fix(AnalyticalTableColumnFilter): fix callback, remove CustomListItem to allow inputs of spaces in filter

Author: Lukas742

packages/base/src/styling/CssSizeVariables.ts

@@ -14,7 +14,8 @@ export enum CssSizeVariablesNames {
   sapWcrAnalyticalTableTreePaddingLevel1 = 'sapWcrAnalyticalTableTreePaddingLevel1',
   sapWcrAnalyticalTableTreePaddingLevel2 = 'sapWcrAnalyticalTableTreePaddingLevel2',
   sapWcrAnalyticalTableTreePaddingLevel3 = 'sapWcrAnalyticalTableTreePaddingLevel3',
-  sapWcrAnalyticalTableSelectionColumnWidth = 'sapWcrAnalyticalTableSelectionColumnWidth'
+  sapWcrAnalyticalTableSelectionColumnWidth = 'sapWcrAnalyticalTableSelectionColumnWidth',
+  sapWcrListItemHeight = 'sapWcrListItemHeight'
 }
 
 export const CssSizeVariables: Record<CssSizeVariablesNames, string> = Object.values(CssSizeVariablesNames).reduce(
@@ -43,6 +44,7 @@ export const cssVariablesStyles = `
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel2}:2.25rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel3}:2.75rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableSelectionColumnWidth}:55px;
+  --${CssSizeVariablesNames.sapWcrListItemHeight}:3rem;
 
 }
 
@@ -64,5 +66,6 @@ export const cssVariablesStyles = `
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel2}:1.5rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel3}:2rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableSelectionColumnWidth}:40px;
+  --${CssSizeVariablesNames.sapWcrListItemHeight}:2rem;
 }
 `;

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -1,7 +1,8 @@
 import '@ui5/webcomponents-icons/dist/icons/decline';
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
-import { CustomListItem } from '@ui5/webcomponents-react/lib/CustomListItem';
 import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
+import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
 import { Icon } from '@ui5/webcomponents-react/lib/Icon';
 import { List } from '@ui5/webcomponents-react/lib/List';
@@ -127,12 +128,17 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: Column
           </StandardListItem>
         )}
         {showFilter && !column.isGrouped && (
-          <CustomListItem type={ListItemTypes.Inactive}>
-            <FlexBox alignItems={FlexBoxAlignItems.Center} style={{ padding: '0px 1rem' }}>
-              <Icon name="filter" style={{ paddingRight: '0.5rem', minWidth: '1rem', minHeight: '1rem' }} />
-              <Filter column={column} popoverRef={popoverRef} />
-            </FlexBox>
-          </CustomListItem>
+          <FlexBox
+            alignItems={FlexBoxAlignItems.Center}
+            style={{
+              padding: '0px 1rem',
+              height: CssSizeVariables.sapWcrListItemHeight,
+              borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`
+            }}
+          >
+            <Icon name="filter" style={{ paddingRight: '0.5rem', minWidth: '1rem', minHeight: '1rem' }} />
+            <Filter column={column} popoverRef={popoverRef} />
+          </FlexBox>
         )}
         {showGroup && (
           <StandardListItem type={ListItemTypes.Active} icon="group-2" data-sort={'group'}>

packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx

@@ -7,7 +7,7 @@ export /**
 const DefaultFilterComponent: FC<any> = ({ column }) => {
   const handleChange = useCallback(
     (e) => {
-      column.setFilter(e.detail.value);
+      column.setFilter(e.target.value);
     },
     [column.setFilter]
   );

yarn.lock

@@ -3262,7 +3262,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.2":
+"@types/react@*", "@types/react@16.9.2", "@types/react@^16.9.2":
   version "16.9.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"
   integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==