@axinom/mosaic-ui 0.75.0-rc.5 → 0.77.0

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

@@ -201,7 +201,7 @@ describe('List', () => {
     const { container } = render(<List columns={mockListColumns} data={[]} />);
 
     const listRow = container.querySelector('[data-test-id="list-entry"]');
-    const noData = container.querySelector('.NoData');
+    const noData = container.querySelector('.noData');
 
     expect(listRow).not.toBeInTheDocument();
     expect(noData).toBeInTheDocument();
@@ -376,6 +376,183 @@ describe('List', () => {
       });
     });
 
+    it('keeps the other rows selected when one is deselected after select all', () => {
+      const spy = vi.fn();
+      const { container } = render(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          selectionMode={ListSelectMode.Multi}
+          enableSelectAll={true}
+          enableSelectAllDeselect={true}
+          onItemSelected={spy}
+        />,
+      );
+
+      const header = container.querySelector('[data-test-id="list-header"]');
+      const headerCheckbox = header?.querySelector(
+        '[data-test-id="list-entry-checkbox"]',
+      ) as HTMLButtonElement;
+
+      act(() => {
+        fireEvent.click(headerCheckbox);
+      });
+
+      expect(spy).toHaveBeenLastCalledWith({ mode: 'SELECT_ALL' });
+
+      const rowCheckboxes = Array.from(
+        container.querySelectorAll('[data-test-id="list-entry"]'),
+      ).map(
+        (row) =>
+          row.querySelector(
+            '[data-test-id="list-entry-checkbox"]',
+          ) as HTMLButtonElement,
+      );
+
+      // Deselecting turns the implicit 'select all' into an explicit selection
+      act(() => {
+        fireEvent.click(rowCheckboxes[1]);
+      });
+
+      expect(spy).toHaveBeenLastCalledWith({
+        mode: 'SINGLE_ITEMS',
+        items: [mockListData[0], mockListData[2]],
+      });
+
+      expect(rowCheckboxes[0].className).toContain('active');
+      expect(rowCheckboxes[1].className).not.toContain('active');
+      expect(rowCheckboxes[2].className).toContain('active');
+      expect(headerCheckbox.className).not.toContain('active');
+    });
+
+    it('keeps the selection on the same item when the data is re-ordered', () => {
+      const spy = vi.fn();
+      const props = {
+        columns: mockListColumns,
+        selectionMode: ListSelectMode.Multi,
+        onItemSelected: spy,
+      };
+
+      const { container, rerender } = render(
+        <List {...props} data={mockListData} />,
+      );
+
+      const checkboxOf = (title: string): HTMLButtonElement => {
+        const row = Array.from(
+          container.querySelectorAll('[data-test-id="list-entry"]'),
+        ).find((entry) => entry.textContent?.includes(title));
+
+        return row?.querySelector(
+          '[data-test-id="list-entry-checkbox"]',
+        ) as HTMLButtonElement;
+      };
+
+      act(() => {
+        fireEvent.click(checkboxOf('Item 2'));
+      });
+
+      expect(spy).toHaveBeenLastCalledWith({
+        mode: 'SINGLE_ITEMS',
+        items: [mockListData[1]],
+      });
+
+      // The consumer sorts and hands back the same items in a different order
+      rerender(
+        <List
+          {...props}
+          data={[mockListData[1], mockListData[2], mockListData[0]]}
+        />,
+      );
+
+      expect(checkboxOf('Item 2').className).toContain('active');
+      expect(checkboxOf('Item 1').className).not.toContain('active');
+      expect(checkboxOf('Item 3').className).not.toContain('active');
+    });
+
+    it('drops the selection of items that are no longer in the data', () => {
+      const spy = vi.fn();
+      const props = {
+        columns: mockListColumns,
+        selectionMode: ListSelectMode.Multi,
+        onItemSelected: spy,
+      };
+
+      const { container, rerender } = render(
+        <List {...props} data={mockListData} />,
+      );
+
+      const checkboxOf = (title: string): HTMLButtonElement => {
+        const row = Array.from(
+          container.querySelectorAll('[data-test-id="list-entry"]'),
+        ).find((entry) => entry.textContent?.includes(title));
+
+        return row?.querySelector(
+          '[data-test-id="list-entry-checkbox"]',
+        ) as HTMLButtonElement;
+      };
+
+      act(() => {
+        fireEvent.click(checkboxOf('Item 1'));
+      });
+      act(() => {
+        fireEvent.click(checkboxOf('Item 3'));
+      });
+
+      // 'Item 1' got removed from the data
+      rerender(<List {...props} data={[mockListData[1], mockListData[2]]} />);
+
+      expect(checkboxOf('Item 3').className).toContain('active');
+      expect(checkboxOf('Item 2').className).not.toContain('active');
+
+      act(() => {
+        fireEvent.click(checkboxOf('Item 2'));
+      });
+
+      // The removed item is not reported back to the consumer
+      expect(spy).toHaveBeenLastCalledWith({
+        mode: 'SINGLE_ITEMS',
+        items: [mockListData[1], mockListData[2]],
+      });
+    });
+
+    it('warns when the data carries no value for the key property', () => {
+      const warn = vi
+        .spyOn(console, 'warn')
+        .mockImplementation(() => undefined);
+
+      render(
+        <List
+          columns={mockListColumns}
+          data={[{ title: 'Item 1', desc: 'Description 1' }] as ListTestData[]}
+          selectionMode={ListSelectMode.Multi}
+        />,
+      );
+
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining(`the data has no 'id' property`),
+      );
+
+      warn.mockRestore();
+    });
+
+    it('does not warn about the key property if no selection is possible', () => {
+      const warn = vi
+        .spyOn(console, 'warn')
+        .mockImplementation(() => undefined);
+
+      render(
+        <List
+          columns={mockListColumns}
+          data={[{ title: 'Item 1', desc: 'Description 1' }] as ListTestData[]}
+          selectionMode={ListSelectMode.None}
+        />,
+      );
+
+      expect(warn).not.toHaveBeenCalled();
+
+      warn.mockRestore();
+    });
+
     it('header checkbox container is not rendered when there are no items', () => {
       const { container } = render(
         <List
@@ -541,6 +718,99 @@ describe('List', () => {
     expect(headerCheckbox.className).not.toContain('active');
   });
 
+  describe('selectIndex', () => {
+    it('selects the row at the given index', () => {
+      const ref = React.createRef<ListElement>();
+      const spy = vi.fn();
+
+      render(
+        <List
+          ref={ref}
+          columns={mockListColumns}
+          data={mockListData}
+          selectionMode={ListSelectMode.Multi}
+          onItemSelected={spy}
+        />,
+      );
+
+      act(() => {
+        ref.current?.selectIndex(1);
+      });
+
+      expect(spy).toHaveBeenCalledWith({
+        mode: 'SINGLE_ITEMS',
+        items: [mockListData[1]],
+      });
+    });
+
+    it('marks the row in single selection, without raising onItemClicked', () => {
+      const ref = React.createRef<ListElement>();
+      const onItemClicked = vi.fn();
+
+      const { container } = render(
+        <List
+          ref={ref}
+          columns={mockListColumns}
+          data={mockListData}
+          selectionMode={ListSelectMode.Single}
+          onItemClicked={onItemClicked}
+        />,
+      );
+
+      act(() => {
+        ref.current?.selectIndex(1);
+      });
+
+      const rows = container.querySelectorAll('[data-test-id="list-entry"]');
+
+      expect(rows[1]).toHaveClass('selected');
+      expect(rows[0]).not.toHaveClass('selected');
+      expect(onItemClicked).not.toHaveBeenCalled();
+    });
+
+    it('does nothing if there is no row at that index', () => {
+      const ref = React.createRef<ListElement>();
+      const spy = vi.fn();
+
+      render(
+        <List
+          ref={ref}
+          columns={mockListColumns}
+          data={[]}
+          selectionMode={ListSelectMode.Multi}
+          onItemSelected={spy}
+        />,
+      );
+
+      act(() => {
+        ref.current?.selectIndex(0);
+      });
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('does nothing if the list renders no selection', () => {
+      const ref = React.createRef<ListElement>();
+      const spy = vi.fn();
+
+      render(
+        <List
+          ref={ref}
+          columns={mockListColumns}
+          data={mockListData}
+          selectionMode={ListSelectMode.None}
+          onItemSelected={spy}
+        />,
+      );
+
+      act(() => {
+        ref.current?.selectIndex(1);
+      });
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
   it('does not use onItemSelected if provided with a generateItemLink', () => {
     const spy = vi.fn();
     const { container } = render(
@@ -560,6 +830,95 @@ describe('List', () => {
     expect(link.getAttribute('href')).toBe('/test');
   });
 
+  describe('cell subtree stability', () => {
+    /** Stands in for a cell that holds state, such as an ImageLoader that
+     * restarts its request whenever it is mounted. */
+    const mountCounter = (): {
+      column: Column<ListTestData>;
+      count: () => number;
+    } => {
+      let mounts = 0;
+      const Cell: React.FC = () => {
+        React.useEffect(() => {
+          mounts++;
+        }, []);
+        return <img alt="" src="/thumb.png" />;
+      };
+
+      return {
+        column: {
+          propertyName: 'title',
+          label: 'Thumb',
+          render: () => <Cell />,
+        },
+        count: () => mounts,
+      };
+    };
+
+    const renderList = (
+      props: Record<string, unknown>,
+      column: Column<ListTestData>,
+    ): JSX.Element => (
+      <MemoryRouter>
+        <List
+          columns={[column]}
+          data={mockListData}
+          generateItemLink={(data) => `/item/${data.id}`}
+          {...props}
+        />
+      </MemoryRouter>
+    );
+
+    it('does not remount cells when the list enters multi select mode', () => {
+      const { column, count } = mountCounter();
+      const { rerender } = render(
+        renderList({ selectionMode: ListSelectMode.None }, column),
+      );
+
+      expect(count()).toBe(mockListData.length);
+
+      // Opening bulk actions switches the list to Multi
+      rerender(renderList({ selectionMode: ListSelectMode.Multi }, column));
+
+      expect(count()).toBe(mockListData.length);
+    });
+
+    it('does not remount cells when the list enters single select mode', () => {
+      const { column, count } = mountCounter();
+      const { rerender } = render(
+        renderList({ selectionMode: ListSelectMode.None }, column),
+      );
+
+      expect(count()).toBe(mockListData.length);
+
+      // Opening quick edit switches the list to Single
+      rerender(renderList({ selectionMode: ListSelectMode.Single }, column));
+
+      expect(count()).toBe(mockListData.length);
+    });
+
+    it('does not remount cells when the selection changes', () => {
+      const { column, count } = mountCounter();
+      const { container } = render(
+        renderList({ selectionMode: ListSelectMode.Multi }, column),
+      );
+
+      expect(count()).toBe(mockListData.length);
+
+      const checkbox = container
+        .querySelectorAll('[data-test-id="list-entry"]')[0]
+        .querySelector(
+          '[data-test-id="list-entry-checkbox"]',
+        ) as HTMLButtonElement;
+
+      act(() => {
+        fireEvent.click(checkbox);
+      });
+
+      expect(count()).toBe(mockListData.length);
+    });
+  });
+
   it('raises onRequestMoreData', () => {
     const spy = vi.fn();
     const { container } = render(
@@ -844,6 +1203,144 @@ describe('List', () => {
     });
   });
 
+  describe('action bar', () => {
+    const mockActionBar = {
+      label: 'Showing all of 3 Elements',
+      actions: [
+        { label: 'Publish', onClick: vi.fn() },
+        { label: 'Delete', onClick: vi.fn() },
+      ],
+    };
+
+    it('renders on top of the column header, which stays in place', () => {
+      const { container } = render(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          actionBar={mockActionBar}
+        />,
+      );
+
+      expect(
+        container.querySelector('[data-test-id="action-bar"]'),
+      ).toBeInTheDocument();
+      expect(
+        container.querySelector('[data-test-id="list-header"]'),
+      ).toBeInTheDocument();
+      // Sorting and resizing stay reachable while a context is active
+      expect(
+        container.querySelector('[data-test-id="list-label:desc"]'),
+      ).toBeInTheDocument();
+      expect(container.textContent).toContain('Showing all of 3 Elements');
+    });
+
+    it('offsets the header so that both stick below each other', () => {
+      const { container } = render(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          headerRowHeight="44px"
+          actionBar={mockActionBar}
+        />,
+      );
+
+      expect(
+        container.querySelector('[data-test-id="list-header"]'),
+      ).toHaveStyle({ top: 'calc(44px + 1px)' });
+    });
+
+    it('leaves the header at the top of the list while no bar is rendered', () => {
+      const { container } = render(
+        <List columns={mockListColumns} data={mockListData} />,
+      );
+
+      expect(container.querySelector('[data-test-id="action-bar"]')).toBeNull();
+      expect(
+        container.querySelector('[data-test-id="list-header"]'),
+      ).not.toHaveStyle({ top: 'calc(44px + 1px)' });
+    });
+
+    it('collapses when there is neither a label nor an action to show', () => {
+      const { container } = render(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          actionBar={{ actions: [] }}
+        />,
+      );
+
+      expect(container.querySelector('[data-test-id="action-bar"]')).toBeNull();
+    });
+
+    it('renders with a label alone, without any actions', () => {
+      const { container } = render(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          actionBar={{ label: 'Showing all of 3 Elements', actions: [] }}
+        />,
+      );
+
+      expect(
+        container.querySelector('[data-test-id="action-bar"]'),
+      ).toBeInTheDocument();
+    });
+
+    it('keeps the rows of the list', () => {
+      const { container } = render(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          actionBar={mockActionBar}
+        />,
+      );
+
+      expect(
+        container.querySelectorAll('[data-test-id="list-entry"]'),
+      ).toHaveLength(mockListData.length);
+    });
+
+    it('keeps the select all checkbox on the header, not on the bar', () => {
+      const { container } = render(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          selectionMode={ListSelectMode.Multi}
+          actionBar={mockActionBar}
+        />,
+      );
+
+      const bar = container.querySelector('[data-test-id="action-bar"]');
+      const header = container.querySelector('[data-test-id="list-header"]');
+
+      expect(
+        bar!.querySelector('[data-test-id="list-entry-checkbox"]'),
+      ).toBeNull();
+      expect(
+        header!.querySelector('[data-test-id="list-entry-checkbox"]'),
+      ).toBeInTheDocument();
+    });
+
+    it('runs the action that is clicked', () => {
+      const onClick = vi.fn();
+      const { container } = render(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          actionBar={{ actions: [{ label: 'Publish', onClick }] }}
+        />,
+      );
+
+      const bar = container.querySelector('[data-test-id="action-bar"]');
+
+      act(() => {
+        fireEvent.click(bar!.querySelector('[data-test-id="action"]')!);
+      });
+
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+
   describe('customRowRenderer', () => {
     const createSimpleCustomRenderer = (testId = 'custom-row') =>
       vi.fn(() => <div data-test-id={testId}>Custom Row Content</div>);

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

@@ -2,11 +2,14 @@ import { faker } from '@faker-js/faker';
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useMemo, useState } from 'react';
 import { MemoryRouter, useLocation } from 'react-router-dom';
+import { action } from 'storybook/actions';
 import {
   createGroups,
   enumToObj,
   generateItemArray,
 } from '../../helpers/storybook';
+import type { ActionBarAction, ActionBarData } from '../ActionBar';
+import { IconName } from '../Icons';
 import { Message } from '../Message';
 import { List, type ListProps } from './List';
 import {
@@ -110,6 +113,7 @@ const groups = createGroups({
     'loadingTriggerOffset',
     'isRowDisabled',
     'customRowRenderer',
+    'actionBar',
   ],
   Styling: [
     'horizontalTextAlign',
@@ -351,6 +355,139 @@ export const NoneSelectionMode: StoryObj<StoryListType> = {
   render: Default.render,
 };
 
+export const WithActionBar: StoryObj<StoryListType> = {
+  parameters: {
+    docs: {
+      description: {
+        story: `An action bar sits on top of the column header, which stays in
+        place with it. It shows a label of its own, e.g. the result counts, and
+        the actions of whichever context is currently active - consumers that
+        offer several sets of actions resolve which one that is. Actions that do
+        not fit the available width move into an overflow menu, and the bar
+        collapses while it has neither a label nor any actions to show.`,
+      },
+    },
+  },
+  args: {
+    selectionMode: ListSelectMode.Multi,
+    // With an inline menu the actions column holds two slots, which shows that
+    // the select all checkbox of the header lines up with the row checkboxes.
+    inlineMenuActions: () => [
+      {
+        label: 'Duplicate',
+        icon: IconName.Copy,
+        onActionSelected: action('onDuplicateSelected'),
+      },
+      {
+        label: 'Delete',
+        icon: IconName.Delete,
+        onActionSelected: action('onDeleteSelected'),
+      },
+    ],
+  },
+  render: (args) =>
+    React.createElement(() => {
+      const data = useMemo(() => generateData(args.rowCount), []);
+      const { listData, sortChangedHandler } =
+        useLocalSort<ListStoryData>(data);
+      const [activeSet, setActiveSet] = useState<'bulk' | 'quickEdit'>();
+      const [showLabel, setShowLabel] = useState<boolean>(true);
+      const [selectedCount, setSelectedCount] = useState<number>(0);
+      const [activeStation, setActiveStation] = useState<string>('Details');
+
+      const bulkActions: ActionBarAction[] = [
+        {
+          label: 'Edit',
+          icon: IconName.BulkEdit,
+          onClick: () => alert('Edit'),
+        },
+        {
+          label: 'Create Snapshot',
+          icon: IconName.Snapshot,
+          onClick: () => alert('Create Snapshot'),
+        },
+        {
+          label: 'Publish',
+          icon: IconName.Publish,
+          onClick: () => alert('Publish'),
+        },
+        {
+          label: 'Unpublish',
+          icon: IconName.Unpublish,
+          confirmationMode: 'Simple',
+          onClick: () => alert('Unpublish'),
+        },
+        {
+          label: 'Delete',
+          icon: IconName.Delete,
+          confirmationMode: 'Advanced',
+          confirmationConfig: {
+            title: 'Delete the selected items?',
+            body: 'The action is irreversible.',
+          },
+          disabled: selectedCount === 0,
+          onClick: () => alert('Delete'),
+        },
+      ];
+
+      const quickEditActions: ActionBarAction[] = [
+        'Details',
+        'Focal Point',
+      ].map((station) => ({
+        label: station,
+        icon: IconName.QuickEditStation,
+        toggled: activeStation === station,
+        onClick: () => setActiveStation(station),
+      }));
+
+      // The label stays the same whichever context is active, apart from the
+      // selection, which only the bulk actions apply to.
+      const label = showLabel
+        ? `Showing all of ${listData.length} Elements${
+            activeSet === 'bulk' ? `, Selected: ${selectedCount}` : ''
+          }`
+        : undefined;
+
+      const actionBar: ActionBarData = {
+        label,
+        actions:
+          activeSet === 'bulk'
+            ? bulkActions
+            : activeSet === 'quickEdit'
+            ? quickEditActions
+            : [],
+      };
+
+      return (
+        <>
+          <div style={{ display: 'flex', gap: '8px', padding: '8px' }}>
+            <button onClick={() => setActiveSet(undefined)}>No Context</button>
+            <button onClick={() => setActiveSet('bulk')}>Bulk Actions</button>
+            <button onClick={() => setActiveSet('quickEdit')}>
+              Quick Edit
+            </button>
+            <button onClick={() => setShowLabel((shown) => !shown)}>
+              Toggle Label
+            </button>
+          </div>
+          <List<ListStoryData>
+            {...args}
+            data={listData}
+            actionBar={actionBar}
+            onItemSelected={(event) =>
+              setSelectedCount(
+                event.mode === 'SELECT_ALL'
+                  ? listData.length
+                  : event.items?.length ?? 0,
+              )
+            }
+            onSortChanged={sortChangedHandler}
+          />
+        </>
+      );
+    }),
+};
+
 export const WithoutActionButton: StoryObj<StoryListType> = {
   args: {
     showActionButton: false,
@@ -493,14 +630,6 @@ export const PagedData: StoryObj<StoryListType> = {
       exclude: /.*/g,
     },
   },
-  decorators: [
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    (Story) => (
-      <div style={{ height: '500px', overflow: 'auto' }}>
-        <Story />
-      </div>
-    ),
-  ],
   render: (_args) =>
     React.createElement(() => {
       const [data, setData] = useState<ListStoryData[]>(generateData(30));