@axinom/mosaic-ui 0.45.0-rc.3 → 0.45.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.45.0-rc.3",
+  "version": "0.45.0-rc.5",
   "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.18-rc.3",
+    "@axinom/mosaic-core": "^0.4.18-rc.5",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "48d581221b821f9f2d72e2ae16345c387d672f48"
+  "gitHead": "dc25615bd1c2a5624c53a9070a12884da3f2c5d2"
 }

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

@@ -320,6 +320,17 @@ describe('DynamicListRow', () => {
       dataWithPosition.position,
       Number(mockNewPosition),
     );
+
+    input.prop('onBlur')?.({
+      // @ts-expect-error not full event args object
+      currentTarget: { value: mockNewPosition },
+    });
+
+    expect(inputSpy).toHaveBeenCalledTimes(2);
+    expect(inputSpy).toHaveBeenCalledWith(
+      dataWithPosition.position,
+      Number(mockNewPosition),
+    );
   });
 
   it('onPositionInputChanged is not emitted if current position and new position are the same', () => {

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

@@ -160,6 +160,11 @@ export const DynamicListRow = <T extends Data>({
                 event.key === 'Enter' &&
                 onPositionInputChangedHandler(Number(event.currentTarget.value))
               }
+              onBlur={(event) => {
+                onPositionInputChangedHandler(
+                  Number(event.currentTarget.value),
+                );
+              }}
             />
           </div>
         </div>

package/src/components/Explorer/Explorer.tsx

@@ -19,6 +19,7 @@ import {
   Column,
   ItemSelectEventArgs,
   List,
+  ListElement,
   ListSelectMode,
   SortData,
 } from '../List';
@@ -227,6 +228,8 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     getState<SortData<T>>(stationKey, 'sort') ?? defaultSortOrder,
   );
 
+  const listRef = React.useRef<ListElement>(null);
+
   useEffect(() => {
     if (
       globalStateOptions.filters &&
@@ -436,10 +439,12 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
         onFiltersChange={(args) => {
           onFiltersChange(args);
           setActiveFilters(args);
+          listRef.current?.resetSelection();
         }}
       />
       <div>
         <List<T>
+          ref={listRef}
           columns={columns}
           data={data}
           isLoading={isLoading}

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

@@ -121,8 +121,8 @@ const generateBulkActions = <T extends Data>(
 ): ExplorerBulkAction<T>[] =>
   generateItemArray(amount, (index) => ({
     label: `Bulk Action ${index + 1}`,
-    onClick: () => {
-      action('bulkActionClicked')();
+    onClick: (args) => {
+      action('bulkActionClicked')(args);
       return slowFunc();
     },
     icon: IconName.ChevronRight,

package/src/components/List/List.model.ts

@@ -106,3 +106,10 @@ export interface SortData<T> {
 
   columnSortKey?: string;
 }
+
+export interface ListElement {
+  /**
+   * Resets the selection of the list.
+   */
+  resetSelection: () => void;
+}

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

@@ -5,7 +5,7 @@ import { MemoryRouter } from 'react-router';
 import { Data } from '../../types/data';
 import { TextButton } from '../Buttons/TextButton/TextButton';
 import { List } from './List';
-import { Column, ListSelectMode, SortData } from './List.model';
+import { Column, ListElement, ListSelectMode, SortData } from './List.model';
 import { ListHeader } from './ListHeader/ListHeader';
 import { ListRow } from './ListRow/ListRow';
 import { ListRowLoader } from './ListRow/ListRowLoader';
@@ -366,6 +366,88 @@ describe('List', () => {
     });
   });
 
+  it('clears the SINGLE_ITEMS selection when resetSelection is called', () => {
+    const ref = React.createRef<ListElement>();
+    const spy = jest.fn();
+
+    const wrapper = mount(
+      <List
+        ref={ref}
+        columns={mockListColumns}
+        data={mockListData}
+        selectionMode={ListSelectMode.Multi}
+        onItemSelected={spy}
+      />,
+    );
+
+    let rows = wrapper.find(ListRow);
+
+    act(() => {
+      rows.at(0).prop('onItemSelected')!(true);
+      rows.at(1).prop('onItemSelected')!(true);
+      rows.at(2).prop('onItemSelected')!(true);
+    });
+
+    wrapper.update();
+
+    rows = wrapper.find(ListRow);
+
+    expect(rows.at(0).prop('itemSelected')).toBeTruthy();
+    expect(rows.at(1).prop('itemSelected')).toBeTruthy();
+    expect(rows.at(2).prop('itemSelected')).toBeTruthy();
+
+    act(() => {
+      ref.current?.resetSelection();
+    });
+
+    wrapper.update();
+
+    rows = wrapper.find(ListRow);
+
+    expect(rows.at(0).prop('itemSelected')).toBeFalsy();
+    expect(rows.at(1).prop('itemSelected')).toBeFalsy();
+    expect(rows.at(2).prop('itemSelected')).toBeFalsy();
+  });
+
+  it('clears the SELECT_ALL selection when resetSelection is called', () => {
+    const ref = React.createRef<ListElement>();
+    const spy = jest.fn();
+
+    const wrapper = mount(
+      <List
+        ref={ref}
+        columns={mockListColumns}
+        data={mockListData}
+        selectionMode={ListSelectMode.Multi}
+        onItemSelected={spy}
+      />,
+    );
+
+    let headerRow = wrapper.find(ListHeader);
+
+    act(() => {
+      headerRow.prop('onCheckboxToggled')!(true);
+    });
+
+    wrapper.update();
+
+    headerRow = wrapper.find(ListHeader);
+
+    expect(headerRow.prop('itemSelected')).toBeTruthy();
+
+    act(() => {
+      ref.current?.resetSelection();
+    });
+
+    wrapper.update();
+
+    wrapper.update();
+
+    headerRow = wrapper.find(ListHeader);
+
+    expect(headerRow.prop('itemSelected')).toBeFalsy();
+  });
+
   it('does not use onItemSelected if provided with a generateItemLink', () => {
     const spy = jest.fn();
     const wrapper = mount(

package/src/components/List/List.tsx

@@ -5,6 +5,7 @@ import React, {
   ReactElement,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useRef,
   useState,
 } from 'react';
@@ -16,6 +17,7 @@ import { TextButton } from '../Buttons/TextButton/TextButton';
 import {
   Column,
   ItemSelectEventArgs,
+  ListElement,
   ListItem,
   ListSelectMode,
   SortData,
@@ -24,6 +26,7 @@ import classes from './List.scss';
 import { ListHeader } from './ListHeader/ListHeader';
 import { ListRow } from './ListRow/ListRow';
 import { ListRowLoader } from './ListRow/ListRowLoader';
+import { getActionButtonVisibility, isTrigger, useSort } from './helpers';
 import { useColumnsSize } from './useColumnsSize';
 
 export interface ListProps<T extends Data> {
@@ -105,85 +108,40 @@ export interface ListProps<T extends Data> {
   inlineMenuActions?: (data: T) => ActionData[];
 }
 
-const noItemsMessage = (
-  itemsCount: number,
-  isLoading: boolean,
-  isError: boolean,
-): ReactElement | undefined => {
-  if (!isLoading && !isError && itemsCount === 0) {
-    return (
-      <div className={clsx(classes.NoData)} data-test-id="list-empty">
-        <p>No items found</p>
-      </div>
-    );
-  }
-};
-
-const isTrigger = function <T extends Data>(
-  index: number,
-  listItems: ListItem<T>[],
-  loadingTriggerOffset: number,
-): boolean {
-  return listItems.length - loadingTriggerOffset === index + 1 ? true : false;
-};
-
-const useSort = <T,>(
-  defaultSortOrder: SortData<T> | undefined,
-  onSortChanged: (sort: SortData<T>) => void,
-): {
-  readonly sort: SortData<T> | undefined;
-  readonly sortChangedHandler: (sort: SortData<T>) => void;
-} => {
-  const [sort, setSort] = useState<SortData<T> | undefined>(defaultSortOrder);
-
-  const sortChangedHandler = (sort: SortData<T>): void => {
-    setSort(sort);
-    onSortChanged && onSortChanged(sort);
-  };
-
-  return { sort, sortChangedHandler } as const;
-};
-
-/**
- * Renders various sets of data in a tabular format
- * @example
- * <List<DataInterface>
- *  columns={[{propertyName: 'id', size: '1fr', label: 'Id'}]}
- *  data={[{id: '1',desc: 'Description 1',title: 'Item 1'}]}
- *  itemClicked={(item)=> {console.log(item)}}
- * />
- */
-export const List = <T extends Data>({
-  columns,
-  data = [],
-  isLoading = false,
-  isError = false,
-  errorMsg = 'There was an error.',
-  handleRetry = true,
-  minimumWidth = '500px',
-  columnGap = '5px',
-  rowGap = '0px',
-  headerRowHeight = '44px',
-  listRowHeight = '50px',
-  listRowActionSize = '50px',
-  headerRowActionSize = '28px',
-  horizontalTextAlign = 'left',
-  verticalTextAlign = 'center',
-  keyProperty = 'id' as keyof T,
-  showActionButton = true,
-  loadingTriggerOffset = 10,
-  defaultSortOrder,
-  selectionMode = ListSelectMode.None,
-  enableSelectAll = true,
-  onItemClicked = noop,
-  onItemSelected = noop,
-  onRequestMoreData = noop,
-  onSortChanged = noop,
-  onRetry = noop,
-  generateItemLink,
-  className = '',
-  inlineMenuActions,
-}: PropsWithChildren<ListProps<T>>): JSX.Element => {
+const ListRenderer = <T extends Data>(
+  {
+    columns,
+    data = [],
+    isLoading = false,
+    isError = false,
+    errorMsg = 'There was an error.',
+    handleRetry = true,
+    minimumWidth = '500px',
+    columnGap = '5px',
+    rowGap = '0px',
+    headerRowHeight = '44px',
+    listRowHeight = '50px',
+    listRowActionSize = '50px',
+    headerRowActionSize = '28px',
+    horizontalTextAlign = 'left',
+    verticalTextAlign = 'center',
+    keyProperty = 'id' as keyof T,
+    showActionButton = true,
+    loadingTriggerOffset = 10,
+    defaultSortOrder,
+    selectionMode = ListSelectMode.None,
+    enableSelectAll = true,
+    onItemClicked = noop,
+    onItemSelected = noop,
+    onRequestMoreData = noop,
+    onSortChanged = noop,
+    onRetry = noop,
+    generateItemLink,
+    className = '',
+    inlineMenuActions,
+  }: PropsWithChildren<ListProps<T>>,
+  ref?: React.ForwardedRef<ListElement>,
+): JSX.Element => {
   const [listItems, setListItems] = useState<ListItem<T>[]>([]);
   const isAllItemsChecked = useRef<boolean>(false);
 
@@ -225,11 +183,13 @@ export const List = <T extends Data>({
 
   const headerCheckboxHandler = useCallback(
     (checked: boolean): void => {
-      const newListItems: ListItem<T>[] = data.map((i) => ({
-        selected: checked,
-        data: i,
-      }));
-      setListItems(newListItems);
+      setListItems((prevState) =>
+        prevState.map((i) => ({
+          selected: checked,
+          data: i.data,
+        })),
+      );
+
       isAllItemsChecked.current = checked;
 
       if (checked) {
@@ -243,7 +203,7 @@ export const List = <T extends Data>({
         });
       }
     },
-    [data, onItemSelected],
+    [onItemSelected],
   );
 
   const itemSelectedHandler = (selected: boolean, index: number): void => {
@@ -261,6 +221,24 @@ export const List = <T extends Data>({
 
   const { sort, sortChangedHandler } = useSort(defaultSortOrder, onSortChanged);
 
+  useImperativeHandle(ref, () => ({
+    resetSelection: () => {
+      setListItems((prevState) =>
+        prevState.map((i) => ({
+          selected: false,
+          data: i.data,
+        })),
+      );
+
+      isAllItemsChecked.current = false;
+
+      onItemSelected({
+        mode: 'SINGLE_ITEMS',
+        items: [],
+      });
+    },
+  }));
+
   return (
     <div
       className={clsx(classes.wrapper, 'list-wrapper', className)}
@@ -349,13 +327,27 @@ export const List = <T extends Data>({
   );
 };
 
-function getActionButtonVisibility<T>(
-  data: T,
-  showActionButton: boolean | ((item: T) => boolean),
-): boolean {
-  if (typeof showActionButton === 'boolean') {
-    return showActionButton;
-  }
+/**
+ * Renders various sets of data in a tabular format
+ * @example
+ * <List<DataInterface>
+ *  columns={[{propertyName: 'id', size: '1fr', label: 'Id'}]}
+ *  data={[{id: '1',desc: 'Description 1',title: 'Item 1'}]}
+ *  itemClicked={(item)=> {console.log(item)}}
+ * />
+ */
+export const List = React.forwardRef(ListRenderer);
 
-  return showActionButton(data);
-}
+const noItemsMessage = (
+  itemsCount: number,
+  isLoading: boolean,
+  isError: boolean,
+): ReactElement | undefined => {
+  if (!isLoading && !isError && itemsCount === 0) {
+    return (
+      <div className={clsx(classes.NoData)} data-test-id="list-empty">
+        <p>No items found</p>
+      </div>
+    );
+  }
+};

package/src/components/List/helpers.ts

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { Data } from '../../types';
+import { ListItem, SortData } from './List.model';
+
+export const isTrigger = function <T extends Data>(
+  index: number,
+  listItems: ListItem<T>[],
+  loadingTriggerOffset: number,
+): boolean {
+  return listItems.length - loadingTriggerOffset === index + 1 ? true : false;
+};
+
+export const useSort = <T>(
+  defaultSortOrder: SortData<T> | undefined,
+  onSortChanged: (sort: SortData<T>) => void,
+): {
+  readonly sort: SortData<T> | undefined;
+  readonly sortChangedHandler: (sort: SortData<T>) => void;
+} => {
+  const [sort, setSort] = useState<SortData<T> | undefined>(defaultSortOrder);
+
+  const sortChangedHandler = (sort: SortData<T>): void => {
+    setSort(sort);
+    onSortChanged && onSortChanged(sort);
+  };
+
+  return { sort, sortChangedHandler } as const;
+};
+
+export function getActionButtonVisibility<T>(
+  data: T,
+  showActionButton: boolean | ((item: T) => boolean),
+): boolean {
+  if (typeof showActionButton === 'boolean') {
+    return showActionButton;
+  }
+
+  return showActionButton(data);
+}