@databiosphere/findable-ui 18.0.0 → 19.0.0

package/src/components/Table/features/RowPosition/constants.ts

@@ -23,9 +23,9 @@ export const ROW_POSITION: TableFeature = {
     };
   },
   createTable: <T extends RowData>(table: Table<T>): void => {
-    const originalGetRowModel = table.getRowModel.bind(table);
     table.getRowModel = (): RowModel<T> => {
-      return getRowModel(table, originalGetRowModel);
+      const rowModel = table.getPaginationRowModel();
+      return getRowModel(table, rowModel);
     };
   },
   getInitialState: (initialState?: InitialTableState): Partial<TableState> => {

package/src/components/Table/features/RowPosition/utils.ts

@@ -11,17 +11,21 @@ import { DEFAULT_PAGINATION } from "../constants";
 /**
  * Returns row model, with getter for row position.
  * @param table - Table.
- * @param getRowModel - Table getRowModel function.
+ * @param rowModel - Row model.
  * @returns row model.
  */
 export function getRowModel<T extends RowData>(
   table: Table<T>,
-  getRowModel: Table<T>[`getRowModel`]
+  rowModel: RowModel<T>
 ): RowModel<T> {
-  const rowModel = getRowModel();
-  rowModel.rows.forEach(({ id }, i) => {
+  let i = 0;
+  rowModel.flatRows.forEach(({ getIsGrouped, id }) => {
+    const isGroupedRow = getIsGrouped();
+    const index = isGroupedRow ? -1 : i; // Capture the current value of i for this iteration.
     rowModel.rowsById[id].getRowPosition = (): number =>
-      calculateRowPosition(table, i);
+      calculateRowPosition(table, index);
+    if (isGroupedRow) return; // Iterate only for non-grouped rows.
+    i++;
   });
   return rowModel;
 }
@@ -51,6 +55,7 @@ function calculateRowPosition<T extends RowData>(
   table: Table<T>,
   index: number
 ): number {
+  if (index < 0) return index; // Grouped rows have a position of -1.
   const { getState } = table;
   const {
     pagination: { pageIndex, pageSize },

package/src/components/Table/options/updater.ts

@@ -0,0 +1,29 @@
+import { Updater } from "@tanstack/react-table";
+
+/**
+ * Type guard to check if the given value is TanStack's updater function.
+ * TanStack updater can either be a function that computes the new value based on the old value,
+ * or a direct value. This type guard identifies whether the provided updater is a function.
+ * @param updaterOrValue - The value to check.
+ * @returns True if the value is a function, false otherwise.
+ */
+function isUpdaterFunction<T>(
+  updaterOrValue: Updater<T>
+): updaterOrValue is (old: T) => T {
+  return typeof updaterOrValue === "function";
+}
+
+/**
+ * Utility function to resolve TanStack updater into a new value.
+ * If the updater is a function, it is called with the `old` value to compute the new value.
+ * If the updater is not a function, it is returned as-is.
+ * @param updaterOrValue - The updater, either a function or a direct value.
+ * @param old - The (old) value.
+ * @returns Resolved value.
+ */
+export function resolveUpdater<T>(updaterOrValue: Updater<T>, old: T): T {
+  if (isUpdaterFunction(updaterOrValue)) {
+    return updaterOrValue(old);
+  }
+  return updaterOrValue;
+}

package/src/components/Table/table.tsx

@@ -16,7 +16,7 @@ import {
   useReactTable,
   VisibilityState,
 } from "@tanstack/react-table";
-import React, { useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
 import {
   EVENT_NAME,
@@ -98,8 +98,13 @@ TableProps<T>): JSX.Element => {
     rowPreview,
     tabValue,
   } = exploreState;
-  const { columnsVisibility, enableRowSelection, rowSelection, sorting } =
-    entityPageState[tabValue];
+  const {
+    columnsVisibility,
+    enableRowSelection,
+    grouping,
+    rowSelection,
+    sorting,
+  } = entityPageState[tabValue];
   const { currentPage, pages, pageSize, rows: pageCount } = paginationState;
   const { disablePagination = false, enableRowPreview = false } =
     listView || {};
@@ -113,15 +118,19 @@ TableProps<T>): JSX.Element => {
   );
 
   const onSortingChange = (updater: Updater<ColumnSort[]>): void => {
+    // TODO(cc) memoize `onSortingChange` with `useCallback`.
+    // TODO(cc) copy `onSortingChange` to ../options/sorting/hook.ts see src/components/Table/options/grouping/hook.ts for example.
     exploreDispatch({
       payload: typeof updater === "function" ? updater(sorting) : updater,
       type: ExploreActionKind.UpdateSorting,
     });
     // Execute GTM tracking.
+    // TODO(cc) update tracking to handle sorting of multiple columns.
+    // TODO(cc) GTM tracking when `onSortingChange` is triggered only tracks the first column sorted, and takes the value from explore state which is not updated yet.
     track(EVENT_NAME.ENTITY_TABLE_SORTED, {
       [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
-      [EVENT_PARAM.COLUMN_NAME]: sorting[0].id,
-      [EVENT_PARAM.SORT_DIRECTION]: sorting[0].desc
+      [EVENT_PARAM.COLUMN_NAME]: sorting?.[0]?.id, // TODO(cc) sorting should always be at least `[]` and never `undefined`.
+      [EVENT_PARAM.SORT_DIRECTION]: sorting?.[0]?.desc // TODO(cc) sorting should always be at least `[]` and never `undefined`.
         ? SORT_DIRECTION.DESC
         : SORT_DIRECTION.ASC,
     });
@@ -130,6 +139,7 @@ TableProps<T>): JSX.Element => {
   const onColumnVisibilityChange = (
     updater: Updater<VisibilityState>
   ): void => {
+    // TODO(cc) memoize `onColumnVisibilityChange` with `useCallback`.
     exploreDispatch({
       payload:
         typeof updater === "function" ? updater(columnsVisibility) : updater,
@@ -137,22 +147,31 @@ TableProps<T>): JSX.Element => {
     });
   };
 
-  const onRowPreviewChange = (updater: Updater<RowPreviewState>): void => {
-    exploreDispatch({
-      payload: typeof updater === "function" ? updater(rowPreview) : updater,
-      type: ExploreActionKind.UpdateRowPreview,
-    });
-  };
+  const onRowPreviewChange = useCallback(
+    (updater: Updater<RowPreviewState>): void => {
+      exploreDispatch({
+        payload: typeof updater === "function" ? updater(rowPreview) : updater,
+        type: ExploreActionKind.UpdateRowPreview,
+      });
+    },
+    [exploreDispatch, rowPreview]
+  );
 
-  const onRowSelectionChange = (updater: Updater<RowSelectionState>): void => {
-    exploreDispatch({
-      payload: typeof updater === "function" ? updater(rowSelection) : updater,
-      type: ExploreActionKind.UpdateRowSelection,
-    });
-  };
+  const onRowSelectionChange = useCallback(
+    (updater: Updater<RowSelectionState>): void => {
+      // TODO(cc) refactor `onRowSelectionChange` to /options/rowSelection/hook.ts see onGroupingChange.
+      exploreDispatch({
+        payload:
+          typeof updater === "function" ? updater(rowSelection) : updater,
+        type: ExploreActionKind.UpdateRowSelection,
+      });
+    },
+    [exploreDispatch, rowSelection]
+  );
 
   const state: Partial<TableState> = {
     columnVisibility: columnsVisibility,
+    grouping,
     pagination,
     rowPreview,
     rowSelection,
@@ -180,11 +199,9 @@ TableProps<T>): JSX.Element => {
     data: items,
     enableColumnFilters: true, // client-side filtering.
     enableFilters: true, // client-side filtering.
-    enableMultiSort: clientFiltering,
+    enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
     enableRowPreview,
     enableRowSelection,
-    enableSorting: true, // client-side filtering.
-    enableSortingRemoval: false, // client-side filtering.
     getCoreRowModel: getCoreRowModel(),
     getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
     getFacetedUniqueValues: clientFiltering
@@ -215,8 +232,8 @@ TableProps<T>): JSX.Element => {
   } = tableInstance;
   const allColumns = getAllColumns();
   const { columnFilters } = getState();
-  const { rows: results } = getRowModel();
-  const noResults = !loading && (!results || results.length === 0);
+  const { rows } = getRowModel();
+  const noResults = !loading && (!rows || rows.length === 0);
   const scrollTop = useScroll();
   const visibleColumns = getVisibleFlatColumns();
   const gridTemplateColumns = getGridTemplateColumns(visibleColumns);
@@ -280,8 +297,8 @@ TableProps<T>): JSX.Element => {
           loading: false,
           paginationResponse: {
             ...DEFAULT_PAGINATION_STATE,
-            pageSize: results.length,
-            rows: results.length,
+            pageSize: rows.filter(({ getIsGrouped }) => !getIsGrouped()).length,
+            rows: rows.filter(({ getIsGrouped }) => !getIsGrouped()).length,
           },
           selectCategories: buildCategoryViews(allColumns, columnFilters),
         },
@@ -294,7 +311,7 @@ TableProps<T>): JSX.Element => {
     columnFilters,
     exploreDispatch,
     listItems,
-    results,
+    rows,
   ]);
 
   function canNextPage(): boolean {
@@ -325,6 +342,7 @@ TableProps<T>): JSX.Element => {
               tableInstance={tableInstance}
             />
             <TableBody
+              rows={rows}
               rowDirection={rowDirection}
               tableInstance={tableInstance}
             />

package/src/components/TableCreator/common/constants.ts

@@ -1,22 +1,20 @@
 import { RowData } from "@tanstack/react-table";
+import { ColumnConfig } from "../../../config/entities";
 import { RowSelectionCell } from "../../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
-import { BaseColumnConfig } from "./entities";
 
 export const ACCESSOR_KEYS = {
   ROW_POSITION: "rowPosition",
   SELECT: "select",
 };
 
-export const COLUMN_CONFIGS: Record<
-  string,
-  BaseColumnConfig<RowData, unknown>
-> = {
+export const COLUMN_CONFIGS: Record<string, ColumnConfig<RowData>> = {
   SELECT: {
     columnPinned: false,
     columnVisible: false,
     componentConfig: { component: RowSelectionCell },
     disableHiding: true,
-    disableSorting: true,
+    enableGrouping: false,
+    enableSorting: false,
     header: ACCESSOR_KEYS.SELECT,
     id: ACCESSOR_KEYS.SELECT,
     meta: {

package/src/components/TableCreator/common/utils.ts

@@ -1,34 +1,41 @@
 import { ColumnDef } from "@tanstack/react-table";
-import { BaseColumnConfig } from "./entities";
+import { ColumnConfig } from "../../../config/entities";
 
 /**
  * Builds a base column definition.
+ * The following properties are set by default:
+ * - Grouping is not enabled `enableGrouping: false`.
+ * - Sorting is enabled - `enableSorting: true`.
  * @param baseColumnConfig - Base column configuration.
  * @returns column definition.
  */
-export function buildBaseColumnDef<T, TValue>(
-  baseColumnConfig: BaseColumnConfig<T, TValue>
+export function buildBaseColumnDef<T>(
+  baseColumnConfig: ColumnConfig<T>
 ): ColumnDef<T> {
   const {
     columnPinned,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Destructure to avoid passing it to the columnDef.
+    columnVisible,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Destructure to avoid passing it to the columnDef.
+    componentConfig,
     disableHiding,
-    disableSorting,
     header,
     id,
     meta,
     width,
+    ...columnDef
   } = baseColumnConfig;
   return {
+    ...columnDef,
     accessorKey: id,
     enableHiding: !disableHiding,
-    enableSorting: !disableSorting,
     header,
     id,
     meta: {
-      ...meta,
       columnPinned,
-      header: meta ? meta.header : header,
+      header: typeof header === "string" ? header : undefined,
       width,
+      ...meta,
     },
   };
 }

package/src/components/TableCreator/options/expanded/constants.ts

@@ -0,0 +1,14 @@
+import {
+  ExpandedOptions,
+  getExpandedRowModel,
+  RowData,
+} from "@tanstack/react-table";
+
+export const EXPANDED_OPTIONS: Pick<
+  ExpandedOptions<RowData>,
+  "autoResetExpanded" | "enableExpanding" | "getExpandedRowModel"
+> = {
+  autoResetExpanded: false,
+  enableExpanding: false,
+  getExpandedRowModel: getExpandedRowModel(),
+};

package/src/components/TableCreator/options/expanded/hook.ts

@@ -0,0 +1,6 @@
+import { ExpandedOptions, RowData } from "@tanstack/react-table";
+import { EXPANDED_OPTIONS } from "./constants";
+
+export function useExpandedOptions<T extends RowData>(): ExpandedOptions<T> {
+  return { ...EXPANDED_OPTIONS };
+}

package/src/components/TableCreator/options/grouping/constants.ts

@@ -0,0 +1,6 @@
+import { getGroupedRowModel, GroupingOptions } from "@tanstack/react-table";
+
+export const GROUPING_OPTIONS: GroupingOptions = {
+  enableGrouping: false,
+  getGroupedRowModel: getGroupedRowModel(),
+};

package/src/components/TableCreator/options/grouping/hook.ts

@@ -0,0 +1,17 @@
+import { GroupingOptions, GroupingState, Updater } from "@tanstack/react-table";
+import { useCallback } from "react";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { updateGrouping } from "../../../../providers/exploreState/actions/updateGrouping/dispatch";
+import { GROUPING_OPTIONS } from "./constants";
+
+export function useGroupingOptions(): GroupingOptions {
+  const { exploreDispatch } = useExploreState();
+
+  const onGroupingChange = useCallback(
+    (updaterOrValue: Updater<GroupingState>): void =>
+      exploreDispatch(updateGrouping({ updaterOrValue })),
+    [exploreDispatch]
+  );
+
+  return { ...GROUPING_OPTIONS, onGroupingChange };
+}

package/src/components/TableCreator/options/hook.ts

@@ -0,0 +1,31 @@
+import { RowData, TableOptions } from "@tanstack/react-table";
+import { useConfig } from "../../../hooks/useConfig";
+import { useExpandedOptions } from "./expanded/hook";
+import { useGroupingOptions } from "./grouping/hook";
+import { useRowSelectionOptions } from "./rowSelection/hook";
+import { useSortingOptions } from "./sorting/hook";
+
+export function useTableOptions<T extends RowData>(): Partial<TableOptions<T>> {
+  const {
+    entityConfig: {
+      list: { defaultSort, tableOptions },
+    },
+  } = useConfig();
+  const expandedOptions = useExpandedOptions<T>();
+  const groupingOptions = useGroupingOptions();
+  const rowSelectionOptions = useRowSelectionOptions<T>();
+  const sortingOptions = useSortingOptions<T>();
+  return {
+    ...expandedOptions,
+    ...groupingOptions,
+    ...rowSelectionOptions,
+    ...sortingOptions, // TODO(cc) merge of all sorting options.
+    ...tableOptions,
+    initialState: {
+      ...tableOptions?.initialState,
+      sorting: defaultSort
+        ? [defaultSort] // TODO(cc) deprecate `defaultSort` in favor of `initialState.sorting`.
+        : tableOptions?.initialState?.sorting,
+    },
+  };
+}

package/src/components/TableCreator/options/rowSelection/constants.ts

@@ -0,0 +1,10 @@
+import { RowData, RowSelectionOptions } from "@tanstack/react-table";
+
+export const ROW_SELECTION_OPTIONS: Pick<
+  RowSelectionOptions<RowData>,
+  "enableRowSelection" | "enableSubRowSelection" | "enableMultiRowSelection"
+> = {
+  enableMultiRowSelection: false,
+  enableRowSelection: false,
+  enableSubRowSelection: false,
+};

package/src/components/TableCreator/options/rowSelection/hook.ts

@@ -0,0 +1,8 @@
+import { RowData, RowSelectionOptions } from "@tanstack/react-table";
+import { ROW_SELECTION_OPTIONS } from "./constants";
+
+export function useRowSelectionOptions<
+  T extends RowData
+>(): RowSelectionOptions<T> {
+  return { ...(ROW_SELECTION_OPTIONS as RowSelectionOptions<T>) };
+}

package/src/components/TableCreator/options/sorting/constants.ts

@@ -0,0 +1,10 @@
+import { RowData, SortingOptions } from "@tanstack/react-table";
+
+export const SORTING_OPTIONS: Pick<
+  SortingOptions<RowData>,
+  "enableSorting" | "enableSortingInteraction" | "enableSortingRemoval"
+> = {
+  enableSorting: true,
+  enableSortingInteraction: true,
+  enableSortingRemoval: false, // false i.e. toggling the sorting on a column will not remove sorting on the column.
+};

package/src/components/TableCreator/options/sorting/hook.ts

@@ -0,0 +1,6 @@
+import { RowData, SortingOptions } from "@tanstack/react-table";
+import { SORTING_OPTIONS } from "./constants";
+
+export function useSortingOptions<T extends RowData>(): SortingOptions<T> {
+  return { ...SORTING_OPTIONS };
+}

package/src/components/TableCreator/tableCreator.tsx

@@ -1,17 +1,12 @@
 import {
   CellContext,
   ColumnDef,
-  ColumnSort,
   CoreOptions,
   HeaderContext,
   RowData,
 } from "@tanstack/react-table";
 import React, { useMemo } from "react";
-import {
-  ColumnConfig,
-  ListConfig,
-  ListViewConfig,
-} from "../../config/entities";
+import { ColumnConfig, ListViewConfig } from "../../config/entities";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
 import { Loading } from "../Loading/loading";
@@ -26,16 +21,15 @@ 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";
 
 export interface TableCreatorProps<T> {
   columns: ColumnConfig<T>[];
-  defaultSort: ColumnSort | undefined;
   getRowId?: CoreOptions<T>["getRowId"];
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
-  tableOptions?: ListConfig<T>["tableOptions"];
 }
 
 const createCell = <T extends RowData = RowData, TData = unknown>(
@@ -63,13 +57,12 @@ const createRowSelectionCell = <T extends RowData>() =>
 
 export const TableCreator = <T extends RowData>({
   columns,
-  defaultSort,
   getRowId,
   items,
   listView,
   loading,
-  tableOptions,
 }: TableCreatorProps<T>): JSX.Element => {
+  const tableOptions = useTableOptions<T>();
   const columnDefs: ColumnDef<T>[] = useMemo(
     () =>
       columns.reduce(
@@ -95,7 +88,7 @@ export const TableCreator = <T extends RowData>({
       ),
     [columns]
   );
-  const initialState = getInitialState(columns, defaultSort);
+  const initialState = getInitialState(columns);
   return (
     <TableCreatorContainer>
       <Loading

package/src/components/common/DropdownMenu/dropdownMenu.styles.ts

@@ -1,7 +1,7 @@
 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/src/components/common/DropdownMenu/dropdownMenu.tsx

@@ -1,48 +1,50 @@
 import { MenuProps as MMenuProps } from "@mui/material";
-import React, { ElementType, Fragment, MouseEvent, useState } from "react";
+import React, { Fragment } from "react";
+import { useMenu } from "../Menu/hooks/useMenu";
 import { DEFAULT_DROPDOWN_MENU_PROPS } from "./common/constants";
 import {
   DropdownMenuButtonProps,
   DropdownMenuIconButtonProps,
   DropdownMenuItemProps,
 } from "./common/entities";
-import { Menu } from "./dropdownMenu.styles";
+import { StyledMenu } from "./dropdownMenu.styles";
 
 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 const DropdownMenu = ({
-  Button,
+  button,
   children,
   className,
   ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */
 }: DropdownMenuProps): JSX.Element => {
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-  const closeMenu = (): void => setAnchorEl(null);
+  const {
+    anchorEl,
+    onClose: closeMenu,
+    onOpen: openMenu,
+    open,
+  } = useMenu<HTMLButtonElement>();
   return (
     <Fragment>
-      <Button
-        onClick={(event: MouseEvent<HTMLButtonElement>): void =>
-          setAnchorEl(event.currentTarget)
-        }
-        open={Boolean(anchorEl)}
-      />
-      <Menu
+      {button({ onClick: openMenu, open })}
+      <StyledMenu
         {...DEFAULT_DROPDOWN_MENU_PROPS}
         anchorEl={anchorEl}
         className={className}
         onClose={closeMenu}
-        open={Boolean(anchorEl)}
+        open={open}
         {...props}
       >
         {children ? children({ closeMenu }) : null}
-      </Menu>
+      </StyledMenu>
     </Fragment>
   );
 };

package/src/components/common/Menu/hooks/useMenu.ts

@@ -1,13 +1,12 @@
-import { PopperProps as MPopperProps } from "@mui/material";
 import { MouseEvent, useCallback, useMemo, useState } 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;
 }
 
@@ -15,8 +14,8 @@ export interface UseMenu {
  * Menu functionality for menu dropdown, with menu position.
  * @returns menu functionality.
  */
-export const useMenu = (): UseMenu => {
-  const [anchorEl, setAnchorEl] = useState<MPopperProps["anchorEl"]>(null);
+export const useMenu = <E extends HTMLElement>(): UseMenu<E> => {
+  const [anchorEl, setAnchorEl] = useState<E | null>(null);
   const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
 
   // Closes menu.
@@ -35,13 +34,13 @@ export const useMenu = (): UseMenu => {
   }, []);
 
   // Opens menu.
-  const onOpen = useCallback((event: MouseEvent<HTMLElement>): void => {
+  const onOpen = useCallback((event: MouseEvent<E>): void => {
     setAnchorEl(event.currentTarget);
   }, []);
 
   // Toggles menu open/close.
   const onToggleOpen = useCallback(
-    (event: MouseEvent<HTMLElement>): void => {
+    (event: MouseEvent<E>): void => {
       if (open) {
         setAnchorEl(null);
       } else {