Merge branch 'master' into fix/filter-bar-show-hide-filter

Author: MarcusNotheis

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx

@@ -1,4 +1,4 @@
-import { Title, Subtitle, Primary, Description, Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
 import { createSelectArgTypes } from '../../../../../shared/stories/createSelectArgTypes';
 import { TableScaleWidthMode } from '@ui5/webcomponents-react/lib/TableScaleWidthMode';
@@ -10,19 +10,15 @@ import '@ui5/webcomponents-icons/dist/icons/delete';
 import '@ui5/webcomponents-icons/dist/icons/edit';
 import '@ui5/webcomponents-icons/dist/icons/settings';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
-import { Text } from '@ui5/webcomponents-react/lib/Text';
 import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
 import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
-import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
-import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
 import { DefaultLoadingComponent } from './defaults/LoadingComponent';
 import { DefaultNoDataComponent } from './defaults/NoDataComponent';
 
 <Meta
   title="Components / AnalyticalTable"
   component={AnalyticalTable}
   args={{
-    dataTree: generateData(20, true),
     data: generateData(1000),
     columns: [
       {
@@ -109,7 +105,6 @@ import { DefaultNoDataComponent } from './defaults/NoDataComponent';
   }}
   argTypes={{
     ref: { type: null },
-    dataTree: { type: null },
     data: { type: null },
     columns: { type: null },
     reactTableOptions: { type: null },
@@ -275,12 +270,12 @@ This even works if you resize the browser window!
 ## Tree Table
 
 <Canvas>
-  <Story name="Tree Table">
+  <Story name="Tree Table" args={{ data: generateData(20, true) }}>
     {(args) => (
       <AnalyticalTable
         {...args}
         title={args.title}
-        data={args.dataTree}
+        data={args.data}
         columns={args.columns}
         loading={args.loading}
         sortable={args.sortable}

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

@@ -97,6 +97,14 @@ export interface TableProps extends CommonProps {
   groupBy?: string[];
   selectionBehavior?: TableSelectionBehavior;
   selectionMode?: TableSelectionMode;
+  /**
+   * Defines the column growing behaviour. Possible Values:
+   *
+   * - **Default**: Every column without fixed width gets the maximum available space of the table.
+   * - **Smart**: Every column gets the space it needs for displaying the full header text. If all headers need more space than the available table width, horizontal scrolling will be enabled. If there is space left, columns with a long content will get more space until there is no more table space left.
+   * - **Grow**: Every column gets the space it needs for displaying it's full header text and full content of all cells. If it requires more space than the table has, horizontal scrolling will be enabled.
+   *
+   */
   scaleWidthMode?: TableScaleWidthMode;
   columnOrder?: string[];
   infiniteScroll?: boolean;
@@ -113,7 +121,7 @@ export interface TableProps extends CommonProps {
   /**
    * Additional options which will be passed to [react-table´s useTable hook](https://react-table.tanstack.com/docs/api/useTable#table-options)
    */
-  reactTableOptions?: object;
+  reactTableOptions?: Record<string, unknown>;
   tableHooks?: PluginHook<any>[];
   subRowsKey?: string;
   /**

packages/main/src/components/FilterBar/index.tsx

@@ -232,6 +232,8 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
     return Children.toArray(children) as unknown[];
   }, [toggledFilters, children]);
 
+  const prevChildren = useRef({});
+
   const renderChildren = useCallback(() => {
     const childProps = { considerGroupName, inFB: true } as any;
     return safeChildren()
@@ -256,10 +258,28 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
             filterItemProps = filterValue(dialogItemRef, child);
           }
         }
-        if (!child.props.children)
+        if (!child.props.children) {
           return cloneElement(child as ReactElement<any>, {
             ...childProps
           });
+        }
+        if (
+          prevChildren.current?.[child.key] &&
+          //Input
+          (child.props.children?.props?.value !== prevChildren.current?.[child.key]?.value ||
+            //Combobox
+            child.props.children?.props?.filterValue !== prevChildren.current?.[child.key]?.filterValue ||
+            //Checkbox
+            child.props.children?.props?.checked !== prevChildren.current?.[child.key]?.checked ||
+            //Selectable
+            child.props.children?.props?.children?.map((item) => item.props.selected).join(',') !==
+              prevChildren?.current?.[child.key]?.children?.map((item) => item.props.selected).join(','))
+        ) {
+          const { [child.key]: omit, ...rest } = dialogRefs;
+          setDialogRefs(rest);
+        }
+        prevChildren.current[child.key] = child.props.children.props;
+
         return cloneElement(child as ReactElement<any>, {
           ...childProps,
           children: {

packages/main/src/enums/TableScaleWidthMode.ts

@@ -1,6 +1,6 @@
 export enum TableScaleWidthMode {
   /*
-   * Every column without fixed width get's the maximum available space of the table
+   * Every column without fixed width gets the maximum available space of the table
    */
   Default = 'Default',
   /*
@@ -10,7 +10,7 @@ export enum TableScaleWidthMode {
    */
   Smart = 'Smart',
   /*
-   * Every column get's the space it needs for displaying it's full header text and full content of all cells.
+   * Every column gets the space it needs for displaying it's full header text and full content of all cells.
    * If it requires more space than the table has, horizontal scrolling will be enabled.
    */
   Grow = 'Grow'