@axinom/mosaic-ui 0.48.0-rc.2 → 0.48.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.48.0-rc.2",
+  "version": "0.48.0-rc.3",
   "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.21-rc.2",
+    "@axinom/mosaic-core": "^0.4.21-rc.3",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4918cf4edaf640b1ef1c26aa983bc6a41d691c83"
+  "gitHead": "5cad90cce8fa23b98b1fe0f0e4154b420f8542f4"
 }

package/src/components/Explorer/Explorer.tsx

@@ -195,7 +195,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     dataProvider,
     loadingTriggerOffset,
 
-    enableSelectAll,
+    enableSelectAll = true,
     modalMode = false,
     className = '',
 
@@ -254,6 +254,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     data,
     isLoading,
     resultCount,
+    hasMoreData,
     onReloadData,
     onRequestMoreData,
     onFiltersChange,
@@ -463,6 +464,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
           showActionButton={Boolean(generateItemLink) || Boolean(onItemClicked)} // or hard code to `true`?
           selectionMode={mode}
           enableSelectAll={enableSelectAll}
+          enableSelectAllDeselect={enableSelectAll && !hasMoreData}
           loadingTriggerOffset={loadingTriggerOffset}
           defaultSortOrder={sortOrder}
           generateItemLink={generateItemLink}

package/src/components/Explorer/useDataProvider.tsx

@@ -22,6 +22,7 @@ import { StationMessage } from './useStationMessage';
 interface DataProviderReturnType<T> {
   readonly isLoading: boolean;
   readonly resultCount: ResultCounts;
+  readonly hasMoreData: boolean;
   readonly onReloadData: () => void;
   readonly onSortChanged: (sort: SortData<T>) => void;
   readonly onFiltersChange: (filters: FilterValues<T>) => void;
@@ -184,6 +185,7 @@ export function useDataProvider<T extends Data>({
     onFiltersChange,
     onRequestMoreData,
     data,
+    hasMoreData: hasMoreData.current,
   } as const;
 }
 

package/src/components/List/List.tsx

@@ -71,8 +71,10 @@ export interface ListProps<T extends Data> {
    * If 'Multi' is selected, a checkbox will be rendered for the header and each row of data
    */
   selectionMode?: ListSelectMode;
-  /** In multiselect mode, whether the Select All button will be displayed. When Select All button is clicked the onItemClicked button will return a filter query instead of an array of items. (default: true) */
+  /** In multiselect mode, whether the Select All button will be displayed. When Select All button is clicked the onItemClicked button will return SELECT_ALL instead of an array of items. (default: true) */
   enableSelectAll?: boolean;
+  /** Sets whether deselection should be allowed in multiselect mode when select all is enabled. This would allow the user to deselect items after select all checkbox is checked. Once an item is deselected, the list will switch to a SINGLE_ITEMS selection mode. */
+  enableSelectAllDeselect?: boolean;
   /**
    * Defines whether an action button will be rendered (default: true)
    * Will not render if selectMode is not 'None'
@@ -131,6 +133,7 @@ const ListRenderer = <T extends Data>(
     defaultSortOrder,
     selectionMode = ListSelectMode.None,
     enableSelectAll = true,
+    enableSelectAllDeselect = false,
     onItemClicked = noop,
     onItemSelected = noop,
     onRequestMoreData = noop,
@@ -172,13 +175,20 @@ const ListRenderer = <T extends Data>(
   const itemSelectionHandler = useCallback(
     (items: ListItem<T>[]) => {
       const selectedData: T[] = items.map(({ data }) => data);
+      if (enableSelectAllDeselect) {
+        if (items.length === listItems.length) {
+          isAllItemsChecked.current = true;
+        } else {
+          isAllItemsChecked.current = false;
+        }
+      }
       onItemSelected &&
         onItemSelected({
           mode: 'SINGLE_ITEMS',
           items: selectedData,
         });
     },
-    [onItemSelected],
+    [enableSelectAllDeselect, listItems.length, onItemSelected],
   );
 
   const headerCheckboxHandler = useCallback(
@@ -206,12 +216,15 @@ const ListRenderer = <T extends Data>(
     [onItemSelected],
   );
 
-  const itemSelectedHandler = (selected: boolean, index: number): void => {
-    const items = [...listItems];
-    items[index].selected = selected;
-    setListItems(items);
-    itemSelectionHandler(items.filter((item) => item.selected === true));
-  };
+  const itemSelectedHandler = useCallback(
+    (selected: boolean, index: number): void => {
+      const items = [...listItems];
+      items[index].selected = selected;
+      setListItems(items);
+      itemSelectionHandler(items.filter((item) => item.selected === true));
+    },
+    [itemSelectionHandler, listItems],
+  );
 
   const onTriggeredHandler = (): void => {
     if (!isLoading && !isError) {
@@ -277,7 +290,9 @@ const ListRenderer = <T extends Data>(
           itemSelected={item.selected}
           isTrigger={isTrigger<T>(index, listItems, loadingTriggerOffset)}
           isRowDisabled={
-            isAllItemsChecked.current && selectionMode === ListSelectMode.Multi
+            isAllItemsChecked.current &&
+            !enableSelectAllDeselect &&
+            selectionMode === ListSelectMode.Multi
           }
           columnSizes={columnSizes}
           columnGap={columnGap}