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

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { KeyboardEventHandler, useState } from 'react';
+import React, { KeyboardEventHandler, useRef, useState } from 'react';
 import { noop } from '../../../../helpers/utils';
 import { FilterValidationResult, FilterValue } from '../../Filters.model';
 import classes from './FreeTextFilter.scss';
@@ -17,6 +17,8 @@ export interface FreeTextFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+  /** Select text on focus if true (default: true) */
+  selectOnFocus?: boolean;
 }
 
 export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
@@ -25,11 +27,19 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
   onError = noop,
   onValidate: customValidate,
   className = '',
+  selectOnFocus = true,
 }) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
 
   const [valueLocal, setValue] = useState(value || '');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onFocusWrapper = (): void => {
+    if (selectOnFocus && valueLocal) {
+      inputRef.current?.select();
+    }
+  };
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
     if (e.key === ENTER_KEY) {
@@ -55,11 +65,13 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
       )}
     >
       <input
+        ref={inputRef}
         autoFocus
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}
         onKeyDown={handleKeyDown}
         value={valueLocal as string}
         onChange={(e) => setValue(e.target.value)}
+        onFocus={onFocusWrapper}
       />
       {errorMsg !== undefined && <small>{errorMsg}</small>}
     </div>

package/src/components/FormStation/FormStationHeader/FormStationHeader.tsx

@@ -1,10 +1,11 @@
 import { FormikValues, useFormikContext } from 'formik';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import { SaveIndicatorType, setSaveIndicator } from '../../../initialize';
 import { IconName } from '../../Icons';
 import {
   PageHeader,
+  PageHeaderActionItemProps,
   PageHeaderActionType,
   PageHeaderProps,
 } from '../../PageHeader';
@@ -49,41 +50,44 @@ export const FormStationHeader: React.FC<
 
   const title = useTitle(titleProperty, defaultTitle);
 
+  const actions: PageHeaderActionItemProps[] = useMemo(() => {
+    const actionItems: PageHeaderActionItemProps[] = [];
+
+    if (dirty) {
+      actionItems.push({
+        label: 'Undo Changes',
+        icon: IconName.Undo,
+        kind: 'action',
+        actionType: PageHeaderActionType.Context,
+        onClick: () => {
+          resetForm();
+        },
+      });
+    }
+
+    if (cancelNavigationUrl) {
+      actionItems.push({
+        label: 'Cancel',
+        icon: IconName.X,
+        kind: 'action',
+        onClick: () => {
+          resetForm();
+          // If the form has errors, Navigation needs to be wrapped in a promise or timeout.
+          Promise.resolve().then(() => history.push(cancelNavigationUrl));
+        },
+      });
+    }
+
+    return actionItems;
+  }, [cancelNavigationUrl, dirty, history, resetForm]);
+
   return (
     <PageHeader
       title={title}
       subtitle={subtitle}
       className={className}
       setTabTitle={setTabTitle}
-      actions={[
-        ...(dirty === true // add undo action if form as been altered
-          ? [
-              {
-                label: 'Undo Changes',
-                icon: IconName.Undo,
-                actionType: PageHeaderActionType.Context,
-                onClick: () => {
-                  resetForm();
-                },
-              },
-            ]
-          : []),
-        ...(cancelNavigationUrl // add cancel action if applicable
-          ? [
-              {
-                label: 'Cancel',
-                icon: IconName.X,
-                onClick: () => {
-                  resetForm();
-                  // If the form has errors, Navigation needs to be wrapped in a promise or timeout.
-                  Promise.resolve().then(() =>
-                    history.push(cancelNavigationUrl),
-                  );
-                },
-              },
-            ]
-          : []),
-      ]}
+      actions={actions}
     />
   );
 };

package/src/components/List/List.stories.tsx

@@ -54,7 +54,7 @@ const generateData = (amount: number): ListStoryData[] =>
   generateItemArray(amount, (index) => ({
     id: index + 1,
     desc: `Description ${index + 1}: ${faker.lorem.words(
-      faker.datatype.number({ min: 10, max: 20 }),
+      faker.datatype.number({ min: 10, max: 50 }),
     )}`,
     title: `Item ${index + 1}: ${faker.random.words(
       faker.datatype.number({ min: 1, max: 3 }),
@@ -92,6 +92,7 @@ const groups = createGroups({
   Styling: [
     'horizontalTextAlign',
     'verticalTextAlign',
+    'textWrap',
     'minimumWidth',
     'columnGap',
     'rowGap',

package/src/components/List/List.tsx

@@ -65,6 +65,8 @@ export interface ListProps<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;
   /**
    * Determines which select mode the list is in. (default: ListSelectMode.None)
    * If 'Single' is selected, a check mark will be rendered for each row of data
@@ -122,7 +124,7 @@ const ListRenderer = <T extends Data>(
     columnGap = '5px',
     rowGap = '0px',
     headerRowHeight = '44px',
-    listRowHeight = '50px',
+    listRowHeight,
     listRowActionSize = '50px',
     headerRowActionSize = '28px',
     horizontalTextAlign = 'left',
@@ -134,6 +136,7 @@ const ListRenderer = <T extends Data>(
     selectionMode = ListSelectMode.None,
     enableSelectAll = true,
     enableSelectAllDeselect = false,
+    textWrap,
     onItemClicked = noop,
     onItemSelected = noop,
     onRequestMoreData = noop,
@@ -300,6 +303,7 @@ const ListRenderer = <T extends Data>(
           actionSize={listRowActionSize}
           horizontalTextAlign={horizontalTextAlign}
           verticalTextAlign={verticalTextAlign}
+          textWrap={textWrap}
           selectionMode={selectionMode}
           showActionButton={
             selectionMode === ListSelectMode.None &&

package/src/components/List/ListRow/ListRow.scss

@@ -29,17 +29,24 @@
 
   .cellWrapper {
     display: grid;
-    align-content: center;
     width: 100%;
     height: 100%;
   }
 
   .cell {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
     max-width: 100%;
     max-height: 100%;
+
+    span {
+      padding: 5px 0;
+      display: grid;
+    }
+
+    &.nowrap {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
   }
 
   .actions {

package/src/components/List/ListRow/ListRow.spec.tsx

@@ -566,4 +566,39 @@ describe('ListRow', () => {
       expect(cell.prop('title')).toBe(mockValue);
     });
   });
+
+  describe('column text alignments', () => {
+    const alignments: {
+      horizontal: 'left' | 'right' | 'center';
+      vertical: 'center' | 'start' | 'end';
+    }[] = [
+      { horizontal: 'center', vertical: 'center' },
+      { horizontal: 'left', vertical: 'start' },
+      { horizontal: 'right', vertical: 'end' },
+    ];
+
+    alignments.forEach(({ horizontal, vertical }) => {
+      it(`should apply the correct styles for textAlign: ${horizontal}, alignSelf: ${vertical}`, () => {
+        const wrapper = mount(
+          <ListRow
+            {...mockProps}
+            columns={[{ propertyName: 'id', size: '1fr', label: 'id' }]}
+            horizontalTextAlign={horizontal}
+            verticalTextAlign={vertical}
+          />,
+        );
+
+        const wrapperDivs = wrapper.findWhere((node) =>
+          node.prop('data-test-id')?.startsWith('list-entry-property'),
+        );
+
+        wrapperDivs.forEach((node) => {
+          const style = node.prop('style');
+
+          expect(style).toHaveProperty('textAlign', horizontal);
+          expect(style).toHaveProperty('alignSelf', vertical);
+        });
+      });
+    });
+  });
 });

package/src/components/List/ListRow/ListRow.tsx

@@ -19,13 +19,15 @@ export interface ListRowProps<T extends Data> {
   /** Header row height */
   columnGap: string;
   /** List row height */
-  rowHeight: string;
+  rowHeight?: string;
   /** Size of action button and checkbox */
   actionSize: string;
   /** Horizontal alignment of text */
   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;
   /** List data */
   data: T;
   /** The column definition */
@@ -81,32 +83,54 @@ export const setLocale = (locale: string): void => {
 
 setLocale(navigator.language);
 
-function renderData<T extends Data>(
+const renderData = <T extends Data>(
   column: Column<T>,
   rowData: 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, rowData);
+    const columnData = column.render?.(undefined, rowData);
+    return {
+      columnData,
+      tooltip: getTooltip(columnData),
+    };
   }
   const value: unknown = rowData[column.propertyName];
   if (column.render) {
-    return column.render(value, rowData);
+    const columnData = column.render(value, rowData);
+    return {
+      columnData,
+      tooltip: getTooltip(columnData),
+    };
   }
 
   if (value === null || value === undefined) {
-    return '';
+    return { columnData: <span />, tooltip: undefined };
   }
 
   if (typeof value === 'number') {
-    return numberFormatter.format(value);
+    const columnData = numberFormatter.format(value);
+    return {
+      columnData: <span>{columnData}</span>,
+      tooltip: getTooltip(columnData),
+    };
   }
 
   if (value instanceof Date) {
-    return dateFormatter.format(value);
+    const columnData = dateFormatter.format(value);
+    return {
+      columnData: <span>{columnData}</span>,
+      tooltip: getTooltip(columnData),
+    };
   }
 
-  return String(value);
-}
+  return {
+    columnData: <span>{String(value)}</span>,
+    tooltip: getTooltip(String(value)),
+  };
+};
 
 /**
  * Renders the rows for the list component
@@ -128,6 +152,7 @@ export const ListRow = <T extends Data>({
   actionSize,
   horizontalTextAlign,
   verticalTextAlign,
+  textWrap = false,
   data,
   itemSelected = false,
   isTrigger = false,
@@ -143,7 +168,7 @@ export const ListRow = <T extends Data>({
   inlineMenuActions,
 }: PropsWithChildren<ListRowProps<T>>): JSX.Element => {
   const customRootStyles = {
-    gridAutoRows: rowHeight,
+    gridAutoRows: `minmax(50px, ${rowHeight})`,
     gridColumnGap: columnGap,
     justifyItems: horizontalTextAlign,
     alignItems: verticalTextAlign,
@@ -199,7 +224,7 @@ export const ListRow = <T extends Data>({
     typeof onItemClicked !== 'function';
 
   const generateCells: JSX.Element[] = columns.map((column: Column<T>) => {
-    const columnData: React.ReactNode = renderData<T>(column, data);
+    const { columnData, tooltip } = renderData<T>(column, data);
 
     return (
       <div
@@ -207,12 +232,14 @@ export const ListRow = <T extends Data>({
         className={classes.cellWrapper}
       >
         <div
-          className={classes.cell}
-          title={
-            column.tooltip !== false ? getTooltipText(columnData) : undefined
-          }
+          className={clsx(classes.cell, { [classes.nowrap]: !textWrap })}
+          title={tooltip}
           data-test-id={`list-entry-property:${column.propertyName as string}`}
-          style={{ justifySelf: column.horizontalColumnAlign }}
+          style={{
+            justifySelf: column.horizontalColumnAlign, // Horizontal alignment based on column config
+            alignSelf: verticalTextAlign, // Vertical alignment based on props
+            textAlign: horizontalTextAlign, // Additional text alignment inside the cell
+          }}
         >
           {columnData}
         </div>

package/src/components/List/ListRow/ListRowLoader.tsx

@@ -10,7 +10,7 @@ export interface ListRowLoaderProps<T extends Data> {
   /** Space between columns */
   columnGap: string;
   /** List row height */
-  rowHeight: string;
+  rowHeight?: string;
   /** The column definition */
   columns: Column<T>[];
 }
@@ -25,7 +25,7 @@ export const ListRowLoader = <T extends Data>({
   const rows = 5;
 
   const customRowStyles = {
-    gridAutoRows: rowHeight,
+    gridAutoRows: `minmax(50px, ${rowHeight})`,
     gridTemplateColumns: columnSizes,
     gridColumnGap: columnGap,
   } as React.CSSProperties;

package/src/components/PageHeader/PageHeader.model.ts

@@ -1,4 +1,5 @@
 import { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
+import { PageHeaderActionsGroupProps } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
 
 export interface PageHeaderProps {
   /** Title shown in page header */
@@ -6,20 +7,17 @@ export interface PageHeaderProps {
   /** Subtitle shown in page header */
   subtitle?: string;
   /** Array of actions to be rendered. (default: []) */
-  actions?: PageHeaderActionProps[];
-  /** Array of Bulk Actions to be rendered. If populated, Bulk Actions will become available. (default: []) */
-  bulkActions?: PageHeaderActionProps[];
-  /** Whether or bulk actions are shown by default. (default: false) */
-  openBulkActionsOnStart?: boolean;
-  /** Whether or not bulk actions are disabled (default: false)*/
-  bulkActionsDisabled?: boolean;
-  /**
-   * Callback to emit when Bulk Actions is toggled
-   * The expanded state is supplied as an argument
-   */
-  onBulkActionsToggled?: (expanded: boolean) => void;
+  actions?: PageHeaderActionItemProps[];
   /** CSS Class name for additional styles */
   className?: string;
   /** Update the tab title using the 'title' field. (default: true) */
   setTabTitle?: boolean;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface PageHeaderSpacerProps {}
+
+export type PageHeaderActionItemProps =
+  | (PageHeaderSpacerProps & { kind: 'spacer' })
+  | (PageHeaderActionProps & { kind: 'action' })
+  | (PageHeaderActionsGroupProps & { kind: 'group' });

package/src/components/PageHeader/PageHeader.scss

@@ -5,7 +5,7 @@
 
   height: $page-header-height;
   display: grid;
-  grid-template-columns: minmax(min-content, 1fr) max-content max-content;
+  grid-template-columns: minmax(30%, 1fr) auto;
   grid-template-rows: 1fr;
 
   @media only screen and (min-width: $XL-min-size) {
@@ -52,9 +52,13 @@
 
   .actions {
     display: grid;
-    grid-template-rows: 1fr;
     grid-auto-flow: column;
+    grid-auto-columns: minmax(0, min-content);
     grid-gap: 1px;
-    justify-items: end;
+  }
+
+  .spacer {
+    display: grid;
+    width: 8px;
   }
 }

package/src/components/PageHeader/PageHeader.spec.tsx

@@ -1,10 +1,11 @@
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
 import React from 'react';
 import { noop } from '../../helpers/utils';
 import { PageHeader } from './PageHeader';
+import { PageHeaderActionItemProps } from './PageHeader.model';
+import { PageHeaderActionProps } from './PageHeaderAction';
 import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
-import { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
-import { PageHeaderBulkActions } from './PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
 
 jest.mock('../../hooks/useTabTitle/useTabTitle');
 
@@ -40,96 +41,37 @@ describe('PageHeader', () => {
   });
 
   it(`renders actions`, () => {
-    const wrapper = shallow(<PageHeader actions={defaultbulkActions} />);
+    const wrapper = shallow(
+      <PageHeader actions={[{ ...defaultbulkActions[0], kind: 'action' }]} />,
+    );
 
     const action = wrapper.find(PageHeaderAction);
     expect(action.exists()).toBe(true);
   });
 
-  it(`adds a 10px left margin to the actions container as a spacer when actions are present`, () => {
-    const wrapper = shallow(<PageHeader actions={defaultbulkActions} />);
-
-    const actionsContainer = wrapper
-      .find('.actions')
-      .prop('style') as React.CSSProperties;
-
-    expect(actionsContainer.marginLeft).toBe('10px');
-  });
-
-  it(`does not add a 10px left margin to the actions container when no actions are present`, () => {
-    const wrapper = shallow(<PageHeader />);
-
-    const actionsContainer = wrapper
-      .find('.actions')
-      .prop('style') as React.CSSProperties;
-
-    expect(actionsContainer.marginLeft).toBeUndefined();
-  });
-
-  it(`does not render 'PageHeaderBulkActions' if bulkActions prop is empty`, () => {
-    const wrapper = mount(<PageHeader />);
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.exists()).toBe(false);
-  });
-
-  it(`renders 'PageHeaderBulkActions' if bulkActions prop is populated`, () => {
-    const wrapper = mount(<PageHeader bulkActions={defaultbulkActions} />);
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.exists()).toBe(true);
-  });
-
-  it('raises onBulkActionsToggled', () => {
-    const spy = jest.fn();
-
-    const wrapper = mount(
-      <PageHeader
-        bulkActions={defaultbulkActions}
-        onBulkActionsToggled={spy}
-      />,
-    );
-
-    const bulkActionsToggle = wrapper.find(PageHeaderAction).first();
-    bulkActionsToggle.simulate('click');
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith(true);
-  });
-
-  it(`bulk actions should not be disabled by default`, () => {
-    const spy = jest.fn();
-
-    const wrapper = shallow(
-      <PageHeader
-        bulkActions={defaultbulkActions}
-        onBulkActionsToggled={spy}
-      />,
-    );
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.prop('bulkActionsDisabled')).toBe(false);
+  it(`renders actions groups`, () => {
+    const actions: PageHeaderActionItemProps[] = [
+      {
+        label: 'Bulk Actions',
+        kind: 'group',
+        actions: defaultbulkActions,
+      },
+    ];
+    const wrapper = shallow(<PageHeader actions={actions} />);
+
+    const action = wrapper.find(PageHeaderActionsGroup);
+    expect(action.exists()).toBe(true);
   });
 
-  it(`disables bulk actions if 'bulkActionsDisabled' prop is set to true`, () => {
-    const spy = jest.fn();
+  it('renders spacers', () => {
+    const actions: PageHeaderActionItemProps[] = [
+      {
+        kind: 'spacer',
+      },
+    ];
+    const wrapper = shallow(<PageHeader actions={actions} />);
 
-    const wrapper = shallow(
-      <PageHeader
-        bulkActions={defaultbulkActions}
-        onBulkActionsToggled={spy}
-        bulkActionsDisabled={true}
-      />,
-    );
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.prop('bulkActionsDisabled')).toBe(true);
+    const spacer = wrapper.find('.spacer');
+    expect(spacer.exists()).toBe(true);
   });
-
-  it.todo('calculates the available space needed for bulk actions');
-
-  it.todo('should not calcuate if there are no bulk actions');
 });

package/src/components/PageHeader/PageHeader.stories.tsx

@@ -2,21 +2,24 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { IconName } from '../Icons';
 import { PageHeader } from './PageHeader';
+import { PageHeaderActionItemProps } from './PageHeader.model';
 import {
   PageHeaderActionProps,
   PageHeaderActionType,
 } from './PageHeaderAction';
 import {} from './PageHeaderAction/PageHeaderAction';
 
-const headerActions: PageHeaderActionProps[] = [
+const headerActions: PageHeaderActionItemProps[] = [
   {
     label: 'Undo',
     icon: IconName.Undo,
+    kind: 'action',
     onClick: action('onActionSelected'),
   },
   {
     label: 'Cancel',
     icon: IconName.X,
+    kind: 'action',
     onClick: action('onActionSelected'),
   },
 ];
@@ -101,7 +104,7 @@ export const Actions: StoryObj<typeof PageHeader> = {
   },
 };
 
-export const BulkActions: StoryObj<typeof PageHeader> = {
+export const ActionsGroup: StoryObj<typeof PageHeader> = {
   parameters: {
     docs: {
       description: {
@@ -113,13 +116,19 @@ export const BulkActions: StoryObj<typeof PageHeader> = {
   args: {
     title: 'Title',
     subtitle: 'Subtitle',
-    bulkActions: bulkHeaderActions,
-    openBulkActionsOnStart: false,
+    actions: [
+      {
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkHeaderActions,
+      },
+    ],
   },
 };
 
 export const All: StoryObj<typeof PageHeader> = {
-  name: 'Titles, Bulk Actions, & Actions',
+  name: 'Titles, Actions, & Actions Groups',
   parameters: {
     docs: {
       description: {
@@ -131,7 +140,23 @@ export const All: StoryObj<typeof PageHeader> = {
   args: {
     title: 'Title',
     subtitle: 'Subtitle',
-    actions: headerActions,
-    bulkActions: bulkHeaderActions,
+    actions: [
+      ...headerActions,
+      { kind: 'spacer' },
+      {
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkHeaderActions,
+        onActionsGroupToggled: action('onBulkActions1Toggled'),
+      },
+      {
+        label: 'Bulk Actions 2',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: [bulkHeaderActions[0]],
+        onActionsGroupToggled: action('onBulkActions2Toggled'),
+      },
+    ],
   },
 };