@axinom/mosaic-ui 0.49.0-rc.1 → 0.49.0-rc.11

package/dist/{components/DynamicDataList/helpers/generateId.d.ts → utils/GenerateId.d.ts}

@@ -3,4 +3,4 @@
  * @returns UUID
  */
 export declare const uuid: () => string;
-//# sourceMappingURL=generateId.d.ts.map
+//# sourceMappingURL=GenerateId.d.ts.map

package/dist/utils/GenerateId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenerateId.d.ts","sourceRoot":"","sources":["../../src/utils/GenerateId.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI,QAAO,MAKvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.49.0-rc.1",
+  "version": "0.49.0-rc.11",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.22-rc.1",
+    "@axinom/mosaic-core": "^0.4.22-rc.11",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "12934f9943fdd118ce15a3f5f274826e649d23fc"
+  "gitHead": "9af527f2f2a4e4442b81530d50f4787ea5b9e4db"
 }

package/src/components/DynamicDataList/DynamicDataList.spec.tsx

@@ -9,7 +9,8 @@ import { DynamicListRow } from './DynamicListRow/DynamicListRow';
 import { useDataHandler } from './helpers/useDataHandler';
 
 jest.mock('./helpers/useDataHandler');
-jest.mock('./helpers/generateId', () => ({
+
+jest.mock('../../utils/GenerateId', () => ({
   uuid: jest.fn().mockReturnValue('test-uuid'),
 }));
 

package/src/components/DynamicDataList/DynamicDataList.stories.tsx

@@ -44,7 +44,7 @@ const generateData = (amount: number): DynamicListStoryData[] =>
     position: amount - index, // Position and ID is jumbled for demonstration purposes
     id: index,
     desc: `Description ${index}: ${faker.lorem.words(
-      faker.datatype.number({ min: 10, max: 20 }),
+      faker.datatype.number({ min: 10, max: 50 }),
     )}`,
     title: `Item ${index}: ${faker.random.words(
       faker.datatype.number({ min: 1, max: 3 }),
@@ -87,6 +87,7 @@ const groups = createGroups({
     'headerRowActionSize',
     'horizontalTextAlign',
     'verticalTextAlign',
+    'textWrap',
     'rowClassNameProvider',
   ],
 });

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -10,6 +10,7 @@ import {
 import { OptionalObjectSchema } from 'yup/lib/object';
 import { noop } from '../../helpers/utils';
 import { Data } from '../../types/data';
+import { uuid } from '../../utils/GenerateId';
 import { ActionData } from '../Actions';
 import { ObjectSchemaDefinition } from '../FormStation';
 import { DynamicListColumn } from './DynamicDataList.model';
@@ -21,7 +22,6 @@ import {
 } from './DynamicListDataEntry/DynamicListDataEntry';
 import { DynamicListHeader } from './DynamicListHeader/DynamicListHeader';
 import { DynamicListRow } from './DynamicListRow/DynamicListRow';
-import { uuid } from './helpers/generateId';
 import { useColumnDefs } from './helpers/useColumnDefs';
 import { useDataHandler } from './helpers/useDataHandler';
 import { useRowAnimation } from './helpers/useRowAnimation';
@@ -53,6 +53,8 @@ export interface DynamicDataListProps<T extends Data> {
   horizontalTextAlign?: 'left' | 'right' | 'center';
   /** Vertical alignment of text */
   verticalTextAlign?: 'start' | 'center' | 'end';
+  /** If set to true, column text overflow will be wrapped to a new line. Otherwise, it will be truncated with an ellipsis (default: false) */
+  textWrap?: boolean;
   /** Property that contains the value used in reordering the list (default: undefined) */
   positionPropertyName?: keyof T;
   /** If sets, sets the label for the position column (default: 'Position') */
@@ -127,6 +129,7 @@ export const DynamicDataList = <T extends Data>({
   stickyHeader = true,
   disabled = false,
   className = '',
+  textWrap = false,
   onChange = noop,
   onAddTransformData = (data) => data as T,
   rowClassNameProvider,
@@ -233,6 +236,7 @@ export const DynamicDataList = <T extends Data>({
           actionSize={listRowActionSize}
           horizontalTextAlign={horizontalTextAlign}
           verticalTextAlign={verticalTextAlign}
+          textWrap={textWrap}
           allowRemove={allowNewData}
           positionKey={positionPropertyName}
           allowDragging={allowRowDragging}

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.scss

@@ -9,7 +9,6 @@
 
   display: grid;
   padding: 1px 0px 1px 0px;
-  grid-auto-rows: var(--dynamic-list-row-height, $dynamic-list-row-height);
   column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
 
   border-bottom: var(--dynamic-list-row-border, $dynamic-list-row-border);
@@ -26,7 +25,7 @@
   align-items: center;
 
   .wrapper {
-    min-height: 50px;
+    min-height: var(--dynamic-list-row-height, $dynamic-list-row-height);
     min-width: 100%;
     display: grid;
     align-items: center;
@@ -41,9 +40,16 @@
     max-width: 100%;
     max-height: 100%;
 
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    span {
+      padding: 5px 0;
+      display: grid;
+    }
+
+    &.nowrap {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
   }
 
   .position,

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.spec.tsx

@@ -407,6 +407,43 @@ describe('DynamicListRow', () => {
     expect(input.prop('value')).toBe(dataWithPosition.position);
   });
 
+  describe('DynamicListRow column text alignments', () => {
+    const alignments: {
+      horizontal: 'left' | 'right' | 'center' | undefined;
+      vertical: 'center' | 'start' | 'end' | undefined;
+    }[] = [
+      { horizontal: 'center', vertical: 'center' },
+      { horizontal: 'left', vertical: 'start' },
+      { horizontal: 'right', vertical: 'end' },
+      { horizontal: undefined, vertical: undefined },
+    ];
+
+    alignments.forEach(({ horizontal, vertical }) => {
+      it(`should apply the correct styles for justify-content: ${horizontal}, align-items: ${vertical}`, () => {
+        const wrapper = mount(
+          <DynamicListRow
+            columns={defaultColumns}
+            columnSizes={defaultProps.columnSizes}
+            data={dataWithPosition}
+            positionKey={'position'}
+            showPositionColumn={true}
+            horizontalTextAlign={horizontal}
+            verticalTextAlign={vertical}
+          />,
+        );
+
+        const wrapperDivs = wrapper.find('.wrapper');
+
+        wrapperDivs.forEach((node) => {
+          const style = node.prop('style');
+
+          expect(style).toHaveProperty('justifyContent', horizontal);
+          expect(style).toHaveProperty('alignItems', vertical);
+        });
+      });
+    });
+  });
+
   describe('tooltip', () => {
     it(`renders a tooltip using the 'title' html attribute by default`, () => {
       const wrapper = shallow(

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.tsx

@@ -28,6 +28,8 @@ export interface DynamicListRowProps<T extends Data> {
   horizontalTextAlign?: 'left' | 'right' | 'center';
   /** Vertical alignment of text */
   verticalTextAlign?: 'start' | 'center' | 'end';
+  /** If set to true, column text overflow will be wrapped to a new line. Otherwise, it will be truncated with an ellipsis (default: false) */
+  textWrap?: boolean;
   /** If set to true, the remove action button will be rendered (default: undefined) */
   allowRemove?: boolean;
   /** If set to true, editable fields will be highlighted and row click events will be fired (default: false) */
@@ -85,6 +87,7 @@ export const DynamicListRow = <T extends Data>({
   showPositionColumn = false,
   showActionColumn = false,
   allowEditing = false,
+  textWrap = false,
 }: PropsWithChildren<DynamicListRowProps<T>>): JSX.Element => {
   const customStyles = {
     gridAutoRows: `minmax(50px, ${rowHeight})`,
@@ -170,7 +173,7 @@ export const DynamicListRow = <T extends Data>({
         </div>
       )}
       {columns.map((column: DynamicListColumn<T>) => {
-        const columnData: React.ReactNode = renderData<T>(column, data);
+        const { columnData, tooltip } = renderData<T>(column, data);
 
         return (
           <div
@@ -179,14 +182,16 @@ export const DynamicListRow = <T extends Data>({
                 column.dataEntryRender !== undefined && allowEditing,
             })}
             key={column.key ?? (column.propertyName as string)}
+            style={{
+              justifyContent: horizontalTextAlign,
+              alignItems: verticalTextAlign,
+            }}
           >
             <div
-              className={classes.column}
-              title={
-                column.tooltip !== false
-                  ? getTooltipText(columnData)
-                  : undefined
-              }
+              className={clsx(classes.column, {
+                [classes.nowrap]: !textWrap,
+              })}
+              title={tooltip}
               data-test-id={`dynamic-list-property:${
                 column.propertyName as string
               }`}
@@ -226,22 +231,26 @@ export const DynamicListRow = <T extends Data>({
     </div>
   );
 };
-
-const renderData = function <T extends Data>(
+const renderData = <T extends Data>(
   column: DynamicListColumn<T>,
   data: T,
-): React.ReactNode {
+): { columnData: React.ReactNode; tooltip: string | undefined } => {
+  const getTooltip = (value: unknown): string | undefined =>
+    column.tooltip !== false ? getTooltipText(value) : undefined;
+
   if (!column.propertyName) {
-    return column.render!(undefined, data);
+    const columnData = column.render?.(undefined, data);
+    return { columnData, tooltip: getTooltip(columnData) };
   }
   const value: unknown = data[column.propertyName];
   if (column.render) {
-    return column.render(value, data);
+    const columnData = column.render(value, data);
+    return { columnData, tooltip: getTooltip(columnData) };
   }
 
   if (value === null || value === undefined) {
-    return '';
+    return { columnData: <span />, tooltip: undefined };
   }
 
-  return String(value);
+  return { columnData: String(value), tooltip: getTooltip(String(value)) };
 };

package/src/components/Explorer/Explorer.spec.tsx

@@ -24,7 +24,7 @@ import { MessageBar } from '../MessageBar';
 import { StationError } from '../models';
 import { PageHeaderAction } from '../PageHeader';
 import { PageHeader } from '../PageHeader/PageHeader';
-import { PageHeaderBulkActions } from '../PageHeader/PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from '../PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup';
 import * as GS from '../Utils/State/GlobalState';
 import { Explorer, ExplorerProps } from './Explorer';
 import {
@@ -34,6 +34,10 @@ import {
 } from './Explorer.model';
 import { StationMessage } from './useStationMessage';
 
+jest.mock('../../utils/GenerateId', () => ({
+  uuid: jest.fn().mockReturnValue('test-uuid'),
+}));
+
 interface ExplorerTestData {
   id: number;
   title: string;
@@ -152,7 +156,6 @@ describe('Explorer', () => {
             columns={[{ propertyName: 'id' }]}
             dataProvider={provider}
             stationKey="mock-key"
-            openBulkActionsOnStart={true}
             bulkActions={[{ label: 'Something', onClick: jest.fn() }]}
           />,
         );
@@ -166,8 +169,9 @@ describe('Explorer', () => {
         await wrapper.update();
       });
 
-      wrapper.update();
-      expect(wrapper.find(PageHeader).prop('bulkActionsDisabled')).toBe(true);
+      expect(
+        wrapper.find(PageHeaderActionsGroup).prop('groupActionsDisabled'),
+      ).toBe(true);
     });
 
     it('enables bulk actions if filtered results are returned', async () => {
@@ -203,7 +207,10 @@ describe('Explorer', () => {
       });
 
       wrapper.update();
-      expect(wrapper.find(PageHeader).prop('bulkActionsDisabled')).toBe(false);
+
+      expect(
+        wrapper.find(PageHeaderActionsGroup).prop('groupActionsDisabled'),
+      ).toBe(false);
     });
 
     it('disables bulk actions if no filtered results are returned', async () => {
@@ -239,7 +246,9 @@ describe('Explorer', () => {
       });
 
       wrapper.update();
-      expect(wrapper.find(PageHeader).prop('bulkActionsDisabled')).toBe(true);
+      expect(
+        wrapper.find(PageHeaderActionsGroup).prop('groupActionsDisabled'),
+      ).toBe(true);
     });
 
     it('Reloads data when a bulk action with reloadData is triggered', async () => {
@@ -267,10 +276,10 @@ describe('Explorer', () => {
       // Initial Data Loading
       expect(spy).toHaveBeenCalledTimes(1);
 
-      const header = wrapper.find(PageHeader);
+      const bulkActions = wrapper.find(PageHeaderActionsGroup);
 
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick?.();
+        bulkActions.prop('actions')?.[0].onClick?.();
 
         await wrapper.update();
       });
@@ -301,9 +310,9 @@ describe('Explorer', () => {
         return wrapper;
       });
 
-      const header = wrapper.find(PageHeader);
+      const bulkActions = wrapper.find(PageHeaderActionsGroup);
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick?.();
+        bulkActions.prop('actions')?.[0].onClick?.();
         await wrapper.update();
       });
 
@@ -336,9 +345,9 @@ describe('Explorer', () => {
         return wrapper;
       });
 
-      const header = wrapper.find(PageHeader);
+      const bulkActions = wrapper.find(PageHeaderActionsGroup);
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick?.();
+        bulkActions.prop('actions')?.[0].onClick?.();
         await wrapper.update();
       });
 
@@ -401,7 +410,7 @@ describe('Explorer', () => {
     expectComponentReceivesValue(header, 'title');
     // expectComponentReceivesValue(header, 'actions');
     // expectComponentReceivesValue(header, 'bulkActions');
-    expectComponentReceivesValue(header, 'openBulkActionsOnStart');
+    // expectComponentReceivesValue(header, 'openBulkActionsOnStart');
 
     const filters = wrapper.find(Filters);
     expectComponentReceivesValue(filters, 'filters');
@@ -2025,9 +2034,10 @@ describe('Explorer', () => {
     });
 
     await act(async () => {
-      wrapper.find(PageHeaderBulkActions).prop('onBulkActionsToggled')!(true);
-
-      wrapper.find(PageHeaderBulkActions).prop('onBulkActionsToggled')!(false);
+      wrapper.find(PageHeaderActionsGroup).prop('onActionsGroupToggled')!(true);
+      wrapper.find(PageHeaderActionsGroup).prop('onActionsGroupToggled')!(
+        false,
+      );
     });
 
     expect(spy).toHaveBeenCalledTimes(2);

package/src/components/Explorer/Explorer.stories.tsx

@@ -65,6 +65,7 @@ const groups = createGroups({
     'rowGap',
     'verticalTextAlign',
     'horizontalTextAlign',
+    'textWrap',
     'headerRowActionSize',
     'listRowActionSize',
   ],

package/src/components/Explorer/Explorer.tsx

@@ -7,7 +7,7 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { ActionData } from '..';
+import { ActionData, IconName } from '..';
 import { noop } from '../../helpers/utils';
 import { showNotification } from '../../initialize';
 import { Data } from '../../types/data';
@@ -23,7 +23,11 @@ import {
   ListSelectMode,
   SortData,
 } from '../List';
-import { PageHeader, PageHeaderActionProps } from '../PageHeader';
+import {
+  PageHeader,
+  PageHeaderActionItemProps,
+  PageHeaderActionProps,
+} from '../PageHeader';
 import { isPageHeaderNavigationAction } from '../PageHeader/PageHeaderAction/PageHeaderAction';
 import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction.model';
 import { getState, storeState } from '../Utils/State/GlobalState';
@@ -88,6 +92,9 @@ export interface ExplorerProps<T extends Data> {
   /** Vertical alignment of text */
   verticalTextAlign?: 'start' | 'center' | 'end';
 
+  /** If set to true, column text overflow will be wrapped to a new line. Otherwise, it will be truncated with an ellipsis (default: true) */
+  textWrap?: boolean;
+
   /** Defines when the loading of the next page is triggered. The number represents the number of row left, before a load is triggered. (default: 10) */
   loadingTriggerOffset?: number;
 
@@ -179,6 +186,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     headerRowActionSize,
     horizontalTextAlign,
     verticalTextAlign,
+    textWrap,
 
     columns,
     filterOptions,
@@ -348,24 +356,48 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     });
   };
 
-  const pageHeaderActionsHandler = (): PageHeaderActionProps[] => {
-    return (actions ?? []).map((action) => {
-      return isPageHeaderNavigationAction(action)
-        ? action
-        : {
-            ...action,
-            onClick: async () => {
-              try {
-                const result = await action.onClick();
-                if (result) {
-                  setStationMessage(errMsg(result));
+  const pageHeaderActionsHandler = (): PageHeaderActionItemProps[] => {
+    const headerActions: PageHeaderActionItemProps[] = [];
+
+    if (bulkActions && bulkActions.length > 0) {
+      headerActions.push({
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkActionsHandler(),
+        openActionsGroupOnStart: openBulkActionsOnStart,
+        onActionsGroupToggled: (isOpen) => {
+          setIsBulkOpen(isOpen);
+          onBulkActionsToggled(isOpen);
+        },
+        groupActionsDisabled:
+          itemSelection.items?.length === 0 || resultCount?.filtered === 0,
+      });
+      headerActions.push({ kind: 'spacer' });
+    }
+
+    actions?.forEach((action) => {
+      headerActions.push({
+        ...(isPageHeaderNavigationAction(action)
+          ? action
+          : {
+              ...action,
+              onClick: async () => {
+                try {
+                  const result = await action.onClick();
+                  if (result) {
+                    setStationMessage(errMsg(result));
+                  }
+                } catch (error) {
+                  setStationMessage(errMsg(error, errAction));
                 }
-              } catch (error) {
-                setStationMessage(errMsg(error, errAction));
-              }
-            },
-          };
+              },
+            }),
+        kind: 'action',
+      });
     });
+
+    return headerActions;
   };
 
   const bulkActionsHandler = (): PageHeaderJsActionProps[] => {
@@ -421,16 +453,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
       <PageHeader
         title={title}
         subtitle={resultsTitle}
-        actions={actions && pageHeaderActionsHandler()}
-        bulkActions={bulkActions && bulkActionsHandler()}
-        openBulkActionsOnStart={openBulkActionsOnStart}
-        bulkActionsDisabled={
-          itemSelection.items?.length === 0 || resultCount?.filtered === 0
-        }
-        onBulkActionsToggled={(isOpen) => {
-          setIsBulkOpen(isOpen);
-          onBulkActionsToggled(isOpen);
-        }}
+        actions={pageHeaderActionsHandler()}
         setTabTitle={setTabTitle}
       />
       {StationMessage}
@@ -460,6 +483,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
           headerRowActionSize={headerRowActionSize}
           horizontalTextAlign={horizontalTextAlign}
           verticalTextAlign={verticalTextAlign}
+          textWrap={textWrap}
           keyProperty={keyProperty}
           showActionButton={Boolean(generateItemLink) || Boolean(onItemClicked)} // or hard code to `true`?
           selectionMode={mode}

package/src/components/Explorer/NavigationExplorer/NavigationExplorer.spec.tsx

@@ -117,7 +117,7 @@ describe('NavigationExplorer', () => {
       return wrapper;
     });
 
-    const action = wrapper.find(PageHeaderAction);
+    const action = wrapper.find(PageHeaderAction).last();
     expect(action.props().label).toBe('test');
   });
 
@@ -219,7 +219,7 @@ describe('NavigationExplorer', () => {
       return wrapper;
     });
 
-    const createAction = wrapper.find(PageHeaderAction);
+    const createAction = wrapper.find(PageHeaderAction).last();
 
     createAction.simulate('click');
 

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.spec.tsx

@@ -3,14 +3,16 @@ import { noop } from 'lodash';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { actWithReturn } from '../../../helpers/testing';
-import * as app from '../../../initialize';
 import { Column } from '../../List';
-import { PageHeader } from '../../PageHeader';
-import { PageHeaderBulkActions } from '../../PageHeader/PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from '../../PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup';
 import { Explorer } from '../Explorer';
 import { ExplorerDataProvider } from '../Explorer.model';
 import { SelectionExplorer } from './SelectionExplorer';
 
+jest.mock('../../../utils/GenerateId', () => ({
+  uuid: jest.fn().mockReturnValue('test-uuid'),
+}));
+
 interface SelectExplorerTestData {
   id: string;
   desc: string;
@@ -78,7 +80,7 @@ describe('SelectionExplorer', () => {
       return wrapper;
     });
 
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
+    const bulkActions = wrapper.find(PageHeaderActionsGroup);
 
     expect(bulkActions.exists()).toBe(true);
   });
@@ -101,38 +103,12 @@ describe('SelectionExplorer', () => {
       return wrapper;
     });
 
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
+    const bulkActions = wrapper.find(PageHeaderActionsGroup);
 
     expect(bulkActions.exists()).toBe(false);
   });
 
-  it('Does not call "showNotification" when "Apply Selection" is clicked', async () => {
-    const [provider] = getDataProvider();
-    const showNotificationSpy: jest.SpyInstance = jest.spyOn(
-      app,
-      'showNotification',
-    );
-
-    const wrapper = await actWithReturn(async () => {
-      const wrapper = mount(
-        <SelectionExplorer
-          columns={mockListColumns}
-          dataProvider={provider}
-          stationKey="mock-key"
-          allowBulkSelect={true}
-        />,
-      );
-      return wrapper;
-    });
-
-    const header = wrapper.find(PageHeader);
-    await act(async () => {
-      header.prop('bulkActions')?.[0].onClick?.();
-      await wrapper.update();
-    });
-
-    expect(showNotificationSpy).toHaveBeenCalledTimes(0);
-  });
+  it.todo('Does not call "showNotification" when "Apply Selection" is clicked');
 
   it('sends onSelection callback when the selection of a single item is triggered', async () => {
     const [provider] = getDataProvider();

package/src/components/Filters/Filter/Filter.tsx

@@ -21,6 +21,7 @@ import { SearcheableOptionsFilter } from '../SelectionTypes/SearcheableOptionsFi
 import classes from './Filter.scss';
 
 export interface FilterProps<T extends Data> {
+  selectOnFocus?: boolean;
   options: FilterType<T>;
   value?: FilterValue;
   index?: number;
@@ -42,6 +43,7 @@ export const Filter = <T extends Data>({
   onFilterChange,
   onFilterClicked,
   onValidate,
+  selectOnFocus = true,
 }: PropsWithChildren<FilterProps<T>>): JSX.Element => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [hasError, setHasError] = useState<boolean>(false);
@@ -116,6 +118,7 @@ export const Filter = <T extends Data>({
             }
             onError={onError}
             onValidate={onValidate}
+            selectOnFocus={selectOnFocus}
           />
         );
 

package/src/components/Filters/SelectionTypes/FreeTextFilter/FreeTextFilter.spec.tsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { noop } from '../../../../helpers/utils';
 import { FreeTextFilter } from './FreeTextFilter';
@@ -42,4 +42,19 @@ describe('FreeTextFilter', () => {
 
     expect(error).toBeDefined();
   });
+
+  it('selects text on focus when selectOnFocus is true and there is a value', () => {
+    const mockValue = 'test value';
+    const spy = jest.fn();
+
+    const wrapper = mount(
+      <FreeTextFilter onSelect={spy} value={mockValue} selectOnFocus={true} />,
+    );
+    const input = wrapper.find('input');
+    input.simulate('focus');
+
+    const inputElement = input.getDOMNode<HTMLInputElement>();
+    expect(inputElement.selectionStart).toBe(0);
+    expect(inputElement.selectionEnd).toBe(mockValue.length);
+  });
 });