@databiosphere/findable-ui 17.0.0 → 19.0.0

package/lib/components/TableCreator/tableCreator.js

@@ -9,6 +9,7 @@ import { HeadSelectionCell } from "../Table/components/TableHead/components/Head
 import { Table } from "../Table/table";
 import { COLUMN_CONFIGS } from "./common/constants";
 import { buildBaseColumnDef } from "./common/utils";
+import { useTableOptions } from "./options/hook";
 import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 const createCell = (config) => function CellCreator(cellContext) {
     return (React.createElement(ComponentCreator, { components: [config.componentConfig], response: cellContext.row.original, viewContext: { cellContext } }));
@@ -19,7 +20,8 @@ const createHeaderSelectionCell = () => function CellCreator({ table }) {
 const createRowSelectionCell = () => function CellCreator({ row }) {
     return React.createElement(RowSelectionCell, { row: row });
 };
-export const TableCreator = ({ columns, defaultSort, getRowId, items, listView, loading, tableOptions, }) => {
+export const TableCreator = ({ columns, getRowId, items, listView, loading, }) => {
+    const tableOptions = useTableOptions();
     const columnDefs = useMemo(() => columns.reduce((acc, columnConfig) => {
         acc.push({
             ...buildBaseColumnDef(columnConfig),
@@ -38,7 +40,7 @@ export const TableCreator = ({ columns, defaultSort, getRowId, items, listView,
             header: createHeaderSelectionCell(),
         },
     ]), [columns]);
-    const initialState = getInitialState(columns, defaultSort);
+    const initialState = getInitialState(columns);
     return (React.createElement(TableCreatorContainer, null,
         React.createElement(Loading, { appear: false, loading: loading || false, panelStyle: PAPER_PANEL_STYLE.FLUID }),
         React.createElement(Table, { columns: columnDefs, getRowId: getRowId, initialState: initialState, items: items, listView: listView, loading: loading, tableOptions: tableOptions })));

package/lib/components/common/DropdownMenu/dropdownMenu.d.ts

@@ -1,9 +1,8 @@
 import { MenuProps as MMenuProps } from "@mui/material";
-import { ElementType } from "react";
 import { DropdownMenuButtonProps, DropdownMenuIconButtonProps, DropdownMenuItemProps } from "./common/entities";
 export interface DropdownMenuProps extends Omit<MMenuProps, "children" | "open"> {
-    Button: ElementType<DropdownMenuButtonProps> | ElementType<DropdownMenuIconButtonProps>;
+    button: (props: Pick<DropdownMenuButtonProps, "onClick" | "open"> | Pick<DropdownMenuIconButtonProps, "onClick" | "open">) => JSX.Element;
     children?: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
     className?: string;
 }
-export declare const DropdownMenu: ({ Button, children, className, ...props }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ button, children, className, ...props }: DropdownMenuProps) => JSX.Element;

package/lib/components/common/DropdownMenu/dropdownMenu.js

@@ -1,10 +1,10 @@
-import React, { Fragment, useState } from "react";
+import React, { Fragment } from "react";
+import { useMenu } from "../Menu/hooks/useMenu";
 import { DEFAULT_DROPDOWN_MENU_PROPS } from "./common/constants";
-import { Menu } from "./dropdownMenu.styles";
-export const DropdownMenu = ({ Button, children, className, ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */ }) => {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const closeMenu = () => setAnchorEl(null);
+import { StyledMenu } from "./dropdownMenu.styles";
+export const DropdownMenu = ({ button, children, className, ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */ }) => {
+    const { anchorEl, onClose: closeMenu, onOpen: openMenu, open, } = useMenu();
     return (React.createElement(Fragment, null,
-        React.createElement(Button, { onClick: (event) => setAnchorEl(event.currentTarget), open: Boolean(anchorEl) }),
-        React.createElement(Menu, { ...DEFAULT_DROPDOWN_MENU_PROPS, anchorEl: anchorEl, className: className, onClose: closeMenu, open: Boolean(anchorEl), ...props }, children ? children({ closeMenu }) : null)));
+        button({ onClick: openMenu, open }),
+        React.createElement(StyledMenu, { ...DEFAULT_DROPDOWN_MENU_PROPS, anchorEl: anchorEl, className: className, onClose: closeMenu, open: open, ...props }, children ? children({ closeMenu }) : null)));
 };

package/lib/components/common/DropdownMenu/dropdownMenu.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const Menu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
+export declare const StyledMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/common/DropdownMenu/dropdownMenu.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Menu as MMenu } from "@mui/material";
-export const Menu = styled(MMenu) `
+export const StyledMenu = styled(MMenu) `
   .MuiPaper-menu {
     margin: 4px 0;
   }

package/lib/components/common/Menu/hooks/useMenu.d.ts

@@ -1,16 +1,15 @@
-import { PopperProps as MPopperProps } from "@mui/material";
 import { MouseEvent } from "react";
-export interface UseMenu {
-    anchorEl: MPopperProps["anchorEl"];
+export interface UseMenu<E extends HTMLElement> {
+    anchorEl: E | null;
     onClose: () => void;
     onDisableScrollLock: () => void;
     onEnableScrollLock: () => void;
-    onOpen: (event: MouseEvent<HTMLElement>) => void;
-    onToggleOpen: (event: MouseEvent<HTMLElement>) => void;
+    onOpen: (event: MouseEvent<E>) => void;
+    onToggleOpen: (event: MouseEvent<E>) => void;
     open: boolean;
 }
 /**
  * Menu functionality for menu dropdown, with menu position.
  * @returns menu functionality.
  */
-export declare const useMenu: () => UseMenu;
+export declare const useMenu: <E extends HTMLElement>() => UseMenu<E>;

package/lib/config/entities.d.ts

@@ -1,5 +1,5 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
-import { CellContext, ColumnMeta, ColumnSort, RowData, Table, TableOptions } from "@tanstack/react-table";
+import { CellContext, ColumnDef, ColumnMeta, ColumnSort, GroupingState, RowData, Table, TableOptions } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
 import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
@@ -70,19 +70,19 @@ export interface CategoryConfig {
 }
 /**
  * Column configuration.
+ * TanStack ColumnDef properties not currently supported include:
+ * - `enableMultiSort` - Note, table multi-sort is managed via table options.
  */
-export interface ColumnConfig<T = any, C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = any> {
+export type ColumnConfig<T extends RowData, TValue = unknown, C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = any> = Omit<ColumnDef<T, TValue>, "enableMultiSort"> & {
     columnPinned?: boolean;
     columnVisible?: boolean;
     componentConfig: ComponentConfig<C, T>;
     disableHiding?: boolean;
-    disableSorting?: boolean;
     header: string;
     id: string;
     meta?: ColumnMeta<T, unknown>;
-    tooltip?: string;
     width: GridTrackSize;
-}
+};
 /**
  * Interface used to define the configuration of a component.
  * This will be used by @see ComponentCreator to create a React component with the given props and
@@ -213,7 +213,6 @@ export interface ListViewConfig {
     disablePagination?: boolean;
     enableDownload?: boolean;
     enableRowPreview?: boolean;
-    enableRowSelection?: boolean;
     enableTab?: boolean;
     listHero?: ComponentsConfig;
     rowPreviewView?: ComponentsConfig;
@@ -250,6 +249,7 @@ export interface Override {
 }
 export interface SavedFilter {
     filters: SelectedFilter[];
+    grouping?: GroupingState;
     sorting?: ColumnSort[];
     title: string;
 }
@@ -262,7 +262,7 @@ export interface TrackFilterAppliedPayload {
     searchTerm: string;
     section: string;
     selected: boolean;
-    value: string;
+    value: unknown;
 }
 /**
  * Filter applied tracking function

package/lib/config/utils.d.ts

@@ -1,4 +1,3 @@
-import { ColumnSort } from "@tanstack/react-table";
 import { EntityConfig, SiteConfig } from "./entities";
 /**
  * Returns context default config for config provider.
@@ -10,12 +9,6 @@ export declare function getDefaultConfig(): SiteConfig;
  * @returns context default entity config for config provider.
  */
 export declare function getDefaultEntityConfig(): EntityConfig;
-/**
- * Returns the initial table sorting state for the specified entity list configuration.
- * @param entityConfig - Entity configuration.
- * @returns initial sorting state.
- */
-export declare function getDefaultSorting(entityConfig: EntityConfig): ColumnSort[];
 /**
  * Returns the entity config for the given entity list type.
  * @param entities - Entities config.

package/lib/config/utils.js

@@ -46,18 +46,6 @@ export function getDefaultEntityConfig() {
         route: "",
     };
 }
-/**
- * Returns the initial table sorting state for the specified entity list configuration.
- * @param entityConfig - Entity configuration.
- * @returns initial sorting state.
- */
-export function getDefaultSorting(entityConfig) {
-    const columnSort = entityConfig.list.defaultSort;
-    if (!columnSort) {
-        return [];
-    }
-    return [columnSort];
-}
 /**
  * Returns the entity config for the given entity list type.
  * @param entities - Entities config.

package/lib/hooks/useCategoryFilter.js

@@ -158,7 +158,11 @@ function isCategoryAcceptListed(category, categoryConfigs) {
  * @returns Number indicating sort precedence of cv0 vs cv1.
  */
 function sortCategoryValueViews(cvv0, cvv1) {
-    return COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
+    return !cvv0.label
+        ? 1
+        : !cvv1.label
+            ? -1
+            : COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
 }
 /**
  * Sort category views by display label, ascending.

package/lib/providers/exploreState/actions/updateGrouping/action.d.ts

@@ -0,0 +1,10 @@
+import { ExploreState } from "../../../exploreState";
+import { UpdateGroupingPayload } from "./types";
+/**
+ * Reducer function to handle the "update grouping" action.
+ * Updates the grouping in the state for the current entity.
+ * @param state - Explore State.
+ * @param payload - Payload.
+ * @returns explore state.
+ */
+export declare function updateGroupingAction(state: ExploreState, payload: UpdateGroupingPayload): ExploreState;

package/lib/providers/exploreState/actions/updateGrouping/action.js

@@ -0,0 +1,16 @@
+import { updateEntityPageState } from "../../utils";
+import { buildNextGrouping } from "./utils";
+/**
+ * Reducer function to handle the "update grouping" action.
+ * Updates the grouping in the state for the current entity.
+ * @param state - Explore State.
+ * @param payload - Payload.
+ * @returns explore state.
+ */
+export function updateGroupingAction(state, payload) {
+    const grouping = buildNextGrouping(state, payload.updaterOrValue);
+    return {
+        ...state,
+        entityPageState: updateEntityPageState(state.tabValue, state.entityPageState, { grouping }),
+    };
+}

package/lib/providers/exploreState/actions/updateGrouping/dispatch.d.ts

@@ -0,0 +1,7 @@
+import { UpdateGroupingAction, UpdateGroupingPayload } from "./types";
+/**
+ * Action creator for updating grouping in the state.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export declare function updateGrouping(payload: UpdateGroupingPayload): UpdateGroupingAction;

package/lib/providers/exploreState/actions/updateGrouping/dispatch.js

@@ -0,0 +1,12 @@
+import { ExploreActionKind } from "../../../exploreState";
+/**
+ * Action creator for updating grouping in the state.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function updateGrouping(payload) {
+    return {
+        payload,
+        type: ExploreActionKind.UpdateGrouping,
+    };
+}

package/lib/providers/exploreState/actions/updateGrouping/types.d.ts

@@ -0,0 +1,9 @@
+import { GroupingState, Updater } from "@tanstack/react-table";
+import { ExploreActionKind } from "../../../exploreState";
+export type UpdateGroupingAction = {
+    payload: UpdateGroupingPayload;
+    type: ExploreActionKind.UpdateGrouping;
+};
+export type UpdateGroupingPayload = {
+    updaterOrValue: Updater<GroupingState>;
+};

package/lib/providers/exploreState/actions/updateGrouping/types.js

@@ -0,0 +1 @@
+export {};

package/lib/providers/exploreState/actions/updateGrouping/utils.d.ts

@@ -0,0 +1,10 @@
+import { GroupingState, Updater } from "@tanstack/react-table";
+import { ExploreState } from "../../../exploreState";
+/**
+ * Builds the next grouping state for the current entity type.
+ * Uses TanStack updater to update the grouping state.
+ * @param state - Explore state.
+ * @param updaterOrValue - Updater or value to update the grouping state.
+ * @returns grouping state.
+ */
+export declare function buildNextGrouping(state: ExploreState, updaterOrValue: Updater<GroupingState>): GroupingState;

package/lib/providers/exploreState/actions/updateGrouping/utils.js

@@ -0,0 +1,26 @@
+import { resolveUpdater } from "../../../../components/Table/options/updater";
+/**
+ * Builds the next grouping state for the current entity type.
+ * Uses TanStack updater to update the grouping state.
+ * @param state - Explore state.
+ * @param updaterOrValue - Updater or value to update the grouping state.
+ * @returns grouping state.
+ */
+export function buildNextGrouping(state, updaterOrValue) {
+    const grouping = resolveUpdater(updaterOrValue, getOldGrouping(state));
+    if (grouping.length > 1) {
+        // Explore state only supports single-column grouping.
+        return grouping.slice(-1);
+    }
+    return grouping;
+}
+/**
+ * Retrieves the current "old" grouping state from the explore state, for the current entity type.
+ * @param state - Explore state.
+ * @returns old grouping state.
+ */
+function getOldGrouping(state) {
+    const { entityPageState, tabValue } = state;
+    const { grouping = [] } = entityPageState[tabValue];
+    return grouping;
+}

package/lib/providers/exploreState/entities.d.ts

@@ -1,4 +1,4 @@
-import { ColumnSort, RowSelectionState, VisibilityState } from "@tanstack/react-table";
+import { ColumnSort, GroupingState, RowSelectionState, VisibilityState } from "@tanstack/react-table";
 import { CategoryValueKey, SelectCategory, SelectCategoryView, SelectedFilter } from "../../common/entities";
 import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import { CategoryConfig, CategoryGroup, CategoryGroupConfig, EntityPath, SavedFilter } from "../../config/entities";
@@ -6,6 +6,7 @@ export interface EntityPageState {
     categoryGroupConfigKey: CategoryGroupConfigKey;
     columnsVisibility: VisibilityState;
     enableRowSelection: boolean;
+    grouping: GroupingState;
     rowPreview: RowPreviewState;
     rowSelection: RowSelectionState;
     sorting: ColumnSort[];
@@ -24,8 +25,6 @@ export interface EntityState {
 }
 export type EntityStateByCategoryGroupConfigKey = Map<CategoryGroupConfigKey, EntityState>;
 export type CategoryGroupConfigKey = CategoryGroupConfig["key"];
-export interface EntityStateSavedFilter extends Omit<SavedFilter, "sort"> {
-    sorting?: ColumnSort[];
-}
+export type EntityStateSavedFilter = SavedFilter;
 export type ListItem = any;
 export type SavedFilterByCategoryValueKey = Map<CategoryValueKey, EntityStateSavedFilter>;

package/lib/providers/exploreState/initializer/utils.js

@@ -1,6 +1,5 @@
 import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
 import { ACCESSOR_KEYS } from "../../../components/TableCreator/common/constants";
-import { getDefaultSorting } from "../../../config/utils";
 import { SELECT_CATEGORY_KEY } from "../constants";
 import { getEntityCategoryGroupConfigKey, getFilterCount } from "../utils";
 import { DEFAULT_CATEGORY_GROUP_SAVED_FILTERS, DEFAULT_ENTITY_STATE, INITIAL_STATE, } from "./constants";
@@ -45,8 +44,13 @@ function buildSavedFilterByCategoryValueKey(savedFilters) {
     if (!savedFilters)
         return;
     const savedFilterByCategoryValueKey = new Map();
-    for (const { filters, sorting, title } of savedFilters) {
-        savedFilterByCategoryValueKey.set(title, { filters, sorting, title });
+    for (const { filters, grouping, sorting, title } of savedFilters) {
+        savedFilterByCategoryValueKey.set(title, {
+            filters,
+            grouping,
+            sorting,
+            title,
+        });
     }
     return savedFilterByCategoryValueKey;
 }
@@ -95,14 +99,22 @@ function initCategoryGroups(entityStateByCategoryGroupConfigKey, categoryGroupCo
  * @returns column visibility.
  */
 function initColumnVisibility(entityConfig) {
-    const { list: { columns, tableOptions: { initialState: { columnVisibility = {} } = {} } = {}, }, listView: { enableRowSelection = false } = {}, } = entityConfig;
+    const { list: { columns, tableOptions: { enableRowSelection, initialState: { columnVisibility = {} } = {}, } = {}, }, } = entityConfig;
     return {
-        [ACCESSOR_KEYS.ROW_POSITION]: false, // Explicitly setting row position to false; required - currently `columnVisibilty` is initialized from columns configuration.
-        [ACCESSOR_KEYS.SELECT]: enableRowSelection,
+        [ACCESSOR_KEYS.ROW_POSITION]: false, // Explicitly setting row position to false; required - currently `columnVisibility` is initialized from columns configuration.
+        [ACCESSOR_KEYS.SELECT]: Boolean(enableRowSelection),
         ...getInitialTableColumnVisibility(columns),
         ...columnVisibility, // `columnVisibility` is managed by ExploreState; use table options to override this setting.
     };
 }
+/**
+ * Returns the initial `enableRowSelection` option for the specified entity list configuration.
+ * @param entityConfig - Entity configuration.
+ * @returns initial `enableRowSelection` option.
+ */
+function initEnableRowSelection(entityConfig) {
+    return Boolean(entityConfig.list.tableOptions?.enableRowSelection);
+}
 /**
  * Initializes entity page state.
  * @param config - Site config.
@@ -115,10 +127,11 @@ function initEntityPageState(config) {
             [entity.route]: {
                 categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
                 columnsVisibility: initColumnVisibility(entity),
-                enableRowSelection: Boolean(entity.listView?.enableRowSelection),
+                enableRowSelection: initEnableRowSelection(entity),
+                grouping: initGrouping(entity),
                 rowPreview: undefined,
                 rowSelection: {},
-                sorting: getDefaultSorting(entity),
+                sorting: initSorting(entity),
             },
         };
     }, {});
@@ -169,6 +182,26 @@ function initFilterState(decodedFilterParam) {
     }
     return filterState;
 }
+/**
+ * Returns the initial table grouping state for the specified entity list configuration.
+ * @param entityConfig - Entity configuration.
+ * @returns initial grouping state.
+ */
+function initGrouping(entityConfig) {
+    const { list: { tableOptions: { initialState: { grouping = [] } = {} } = {} }, } = entityConfig;
+    return grouping;
+}
+/**
+ * Returns the initial table sorting state for the specified entity list configuration.
+ * @param entityConfig - Entity configuration.
+ * @returns initial sorting state.
+ */
+function initSorting(entityConfig) {
+    const { list: { defaultSort, tableOptions: { initialState: { sorting = [] } = {} } = {}, }, } = entityConfig;
+    if (defaultSort)
+        return [defaultSort];
+    return sorting;
+}
 /**
  * Returns the explore state reducer initial arguments.
  * @param config - Site config.

package/lib/providers/exploreState/payloads/entities.d.ts

@@ -1,4 +1,4 @@
-import { ColumnSort, RowSelectionState, VisibilityState } from "@tanstack/react-table";
+import { ColumnSort, GroupingState, RowSelectionState, VisibilityState } from "@tanstack/react-table";
 import { CategoryKey, CategoryValueKey, PaginationDirectionType, SelectCategory, SelectedFilter } from "../../../common/entities";
 import { RowPreviewState } from "../../../components/Table/features/RowPreview/entities";
 import { ListItems, PaginationResponse } from "../../exploreState";
@@ -45,6 +45,7 @@ export type UpdateColumnVisibilityPayload = VisibilityState;
 export interface UpdateEntityFiltersPayload {
     entityListType: string;
     filters: SelectedFilter[];
+    grouping?: GroupingState;
     sorting?: ColumnSort[];
 }
 /**

package/lib/providers/exploreState/utils.d.ts

@@ -1,4 +1,3 @@
-import { ColumnSort } from "@tanstack/react-table";
 import { CategoryKey, CategoryValueKey, SelectedFilter } from "../../common/entities";
 import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import { ExploreState, ListItems, PaginationState } from "../exploreState";
@@ -48,13 +47,16 @@ export declare function getEntityState(state: ExploreState, categoryGroupConfigK
  */
 export declare function getEntityStateSavedFilter(state: ExploreState, categoryValueKey: CategoryValueKey): EntityStateSavedFilter | undefined;
 /**
- * Returns entity state "saved filter" sorting for the given category value key.
+ * Retrieves a specified property from the "saved filter" for the given category value key.
+ * This function fetches a property (e.g., "sorting" or "grouping") from the saved filter
+ * associated with a given `selectedValue`.
  * @param state - Explore state.
  * @param selectedValue - Key of category value that has been de/selected.
  * @param selected - True if value is selected, false if de-selected.
- * @returns sorting.
+ * @param propertyName - The name of the property to retrieve from the saved filter. Should be one of the predefined keys: "sorting" or "grouping".
+ * @returns value of the specified property from the saved filter, or undefined if `selected` is false.
  */
-export declare function getEntityStateSavedSorting(state: ExploreState, selectedValue: CategoryValueKey, selected: boolean): ColumnSort[] | undefined;
+export declare function getEntityStateSavedProperty<K extends "sorting" | "grouping">(state: ExploreState, selectedValue: CategoryValueKey, selected: boolean, propertyName: K): EntityStateSavedFilter[K] | undefined;
 /**
  * Returns the filter count.
  * @param filterState - Filter state.

package/lib/providers/exploreState/utils.js

@@ -67,17 +67,20 @@ export function getEntityStateSavedFilter(state, categoryValueKey) {
     return entityState.savedFilterByCategoryValueKey?.get(categoryValueKey);
 }
 /**
- * Returns entity state "saved filter" sorting for the given category value key.
+ * Retrieves a specified property from the "saved filter" for the given category value key.
+ * This function fetches a property (e.g., "sorting" or "grouping") from the saved filter
+ * associated with a given `selectedValue`.
  * @param state - Explore state.
  * @param selectedValue - Key of category value that has been de/selected.
  * @param selected - True if value is selected, false if de-selected.
- * @returns sorting.
+ * @param propertyName - The name of the property to retrieve from the saved filter. Should be one of the predefined keys: "sorting" or "grouping".
+ * @returns value of the specified property from the saved filter, or undefined if `selected` is false.
  */
-export function getEntityStateSavedSorting(state, selectedValue, selected) {
+export function getEntityStateSavedProperty(state, selectedValue, selected, propertyName) {
     if (!selected)
         return;
     const savedFilter = getEntityStateSavedFilter(state, selectedValue);
-    return savedFilter?.sorting;
+    return savedFilter?.[propertyName];
 }
 /**
  * Returns the filter count.

package/lib/providers/exploreState.d.ts

@@ -3,6 +3,7 @@ import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { SelectCategoryView, SelectedFilter } from "../common/entities";
 import { RowPreviewState } from "../components/Table/features/RowPreview/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
+import { UpdateGroupingAction } from "./exploreState/actions/updateGrouping/types";
 import { EntityPageStateMapper, EntityStateByCategoryGroupConfigKey, ListItem } from "./exploreState/entities";
 import { ApplySavedFilterPayload, PaginateTablePayload, PatchExploreResponsePayload, ProcessExploreResponsePayload, ResetExploreResponsePayload, UpdateColumnVisibilityPayload, UpdateEntityFiltersPayload, UpdateEntityViewAccessPayload, UpdateFilterPayload, UpdateRowPreviewPayload, UpdateRowSelectionPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
 export type CatalogState = string | undefined;
@@ -103,6 +104,7 @@ export declare enum ExploreActionKind {
     UpdateEntityFilters = "UPDATE_ENTITY_FILTERS",
     UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
     UpdateFilter = "UPDATE_FILTER",
+    UpdateGrouping = "UPDATE_GROUPING",
     UpdateRowPreview = "UPDATE_ROW_PREVIEW",
     UpdateRowSelection = "UPDATE_ROW_SELECTION",
     UpdateSorting = "UPDATE_SORTING"
@@ -110,7 +112,7 @@ export declare enum ExploreActionKind {
 /**
  * Explore action.
  */
-export type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | UpdateColumnVisibilityAction | UpdateEntityFiltersAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateRowPreviewAction | UpdateRowSelectionAction | UpdateSortingAction;
+export type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | UpdateColumnVisibilityAction | UpdateEntityFiltersAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateGroupingAction | UpdateRowPreviewAction | UpdateRowSelectionAction | UpdateSortingAction;
 /**
  * Apply saved filter action.
  */

package/lib/providers/exploreState.js

@@ -3,9 +3,10 @@ import { useAuthentication } from "../hooks/useAuthentication/useAuthentication"
 import { buildCategoryViews, buildNextFilterState, } from "../hooks/useCategoryFilter";
 import { useConfig } from "../hooks/useConfig";
 import { useURLFilterParams } from "../hooks/useURLFilterParams";
+import { updateGroupingAction } from "./exploreState/actions/updateGrouping/action";
 import { DEFAULT_PAGINATION_STATE, INITIAL_STATE, } from "./exploreState/initializer/constants";
 import { initReducerArguments } from "./exploreState/initializer/utils";
-import { buildEntityStateSavedFilterState, buildNextSavedFilterState, closeRowPreview, getEntityCategoryGroupConfigKey, getEntityState, getEntityStateSavedSorting, getFilterCount, patchEntityListItems, resetPage, updateEntityPageState, updateEntityPageStateWithCommonCategoryGroupConfigKey, updateEntityStateByCategoryGroupConfigKey, updateSelectColumnVisibility, } from "./exploreState/utils";
+import { buildEntityStateSavedFilterState, buildNextSavedFilterState, closeRowPreview, getEntityCategoryGroupConfigKey, getEntityState, getEntityStateSavedProperty, getFilterCount, patchEntityListItems, resetPage, updateEntityPageState, updateEntityPageStateWithCommonCategoryGroupConfigKey, updateEntityStateByCategoryGroupConfigKey, updateSelectColumnVisibility, } from "./exploreState/utils";
 /**
  * Explore state context for storing and using filter-related and explore state.
  */
@@ -70,6 +71,7 @@ export var ExploreActionKind;
     ExploreActionKind["UpdateEntityFilters"] = "UPDATE_ENTITY_FILTERS";
     ExploreActionKind["UpdateEntityViewAccess"] = "UPDATE_ENTITY_VIEW_ACCESS";
     ExploreActionKind["UpdateFilter"] = "UPDATE_FILTER";
+    ExploreActionKind["UpdateGrouping"] = "UPDATE_GROUPING";
     ExploreActionKind["UpdateRowPreview"] = "UPDATE_ROW_PREVIEW";
     ExploreActionKind["UpdateRowSelection"] = "UPDATE_ROW_SELECTION";
     ExploreActionKind["UpdateSorting"] = "UPDATE_SORTING";
@@ -93,7 +95,9 @@ function exploreReducer(state, action, exploreContext) {
             const rowPreview = closeRowPreview(state.rowPreview);
             const rowSelection = {};
             const savedFilterState = buildEntityStateSavedFilterState(payload.categoryKey, payload.selectedValue, payload.selected);
-            const savedSorting = getEntityStateSavedSorting(state, payload.selectedValue, payload.selected);
+            const savedGrouping = getEntityStateSavedProperty(state, payload.selectedValue, payload.selected, "grouping");
+            const savedSorting = getEntityStateSavedProperty(state, payload.selectedValue, payload.selected, "sorting");
+            const grouping = savedGrouping || []; // Reset grouping to default if saved grouping is not available.
             const sorting = savedSorting || []; // Reset sorting to default if saved sorting is not available.
             updateEntityStateByCategoryGroupConfigKey(state, {
                 filterState,
@@ -101,7 +105,7 @@ function exploreReducer(state, action, exploreContext) {
             });
             return {
                 ...state,
-                entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { rowPreview, rowSelection, sorting }),
+                entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { grouping, rowPreview, rowSelection, sorting }),
                 filterCount: getFilterCount(filterState),
                 filterState,
                 paginationState: resetPage(state.paginationState),
@@ -250,7 +254,7 @@ function exploreReducer(state, action, exploreContext) {
          * - closes row preview, without updating the entity page state row preview.
          */
         case ExploreActionKind.UpdateEntityFilters: {
-            const { entityListType, filters: filterState, sorting } = payload;
+            const { entityListType, filters: filterState, grouping = [], sorting = [], } = payload;
             const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(entityListType, state.entityPageState);
             const rowPreview = closeRowPreview(state.entityPageState[entityListType].rowPreview);
             const rowSelection = {};
@@ -261,7 +265,7 @@ function exploreReducer(state, action, exploreContext) {
             }, categoryGroupConfigKey);
             return {
                 ...state,
-                entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { rowPreview, rowSelection, sorting }, categoryGroupConfigKey),
+                entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { grouping, rowPreview, rowSelection, sorting }, categoryGroupConfigKey),
                 rowPreview: closeRowPreview(state.rowPreview),
             };
         }
@@ -295,6 +299,12 @@ function exploreReducer(state, action, exploreContext) {
                 rowPreview,
             };
         }
+        /**
+         * Update grouping
+         **/
+        case ExploreActionKind.UpdateGrouping: {
+            return updateGroupingAction(state, payload);
+        }
         /**
          * Update row preview
          */

package/lib/providers/fileManifestState.js

@@ -96,8 +96,7 @@ function fileManifestReducer(state, action) {
         // Updates selected file manifest filters with given selected category value.
         case FileManifestActionKind.UpdateFilter: {
             // Build next filter state.
-            const filters = buildNextFilterState(state.filters, payload.categoryKey, getFilterParameterValue(payload.selectedValue), // TODO CategoryValueKey may be boolean or null.
-            payload.selected);
+            const filters = buildNextFilterState(state.filters, payload.categoryKey, getFilterParameterValue(payload.selectedValue), payload.selected);
             // Get file summary filters.
             const fileSummaryFilters = buildNextFileSummaryFilterState(filters, state.fileSummaryFacetName);
             return {
@@ -140,8 +139,7 @@ function buildNextFileSummaryFilterState(filters, facetName) {
  * @returns all terms for the given category.
  */
 function getFileFacetTerms(fileFacet) {
-    return fileFacet.terms.map((term) => getFilterParameterValue(term.name) // TODO CategoryValueKey may be boolean or null.
-    );
+    return fileFacet.terms.map((term) => getFilterParameterValue(term.name));
 }
 /**
  * Build new set of selected filters on de/select of filter category.

package/lib/viewModelBuilders/common/utils.d.ts

@@ -7,15 +7,15 @@ import { CategoryKeyLabel } from "./entities";
  */
 export declare function mapCategoryKeyLabel(CATEGORY_KEY: Record<string, string>, CATEGORY_LABEL: Record<string, string>): CategoryKeyLabel;
 /**
- * Sanitizes a string for display i.e. any empty, null or undefined value is sanitized to "Unspecified".
- * @param str - String to sanitize.
+ * Sanitizes a value to a string for display i.e. any empty, null or undefined value is sanitized to "Unspecified".
+ * @param value - Value to sanitize.
  * @returns the string or sanitized string value.
  */
-export declare function sanitizeString(str: string): string;
+export declare function sanitizeString(value: unknown): string;
 /**
- * Sanitizes a string array for display i.e. any string element within the string array that is an empty, null or
+ * Sanitizes array elements to strings for display i.e. any element within the string array that is an empty, null or
  * undefined value is sanitized to "Unspecified".
- * @param strArray - String array to sanitize.
+ * @param array - Array to sanitize.
  * @returns the string array, sanitized.
  */
-export declare function sanitizeStringArray(strArray: string[]): string[];
+export declare function sanitizeStringArray(array: unknown[]): string[];