@databiosphere/findable-ui 2.2.0 → 3.0.0

package/src/components/Detail/components/DetailViewTable/detailViewTable.tsx

@@ -7,7 +7,7 @@ import {
   RoundedPaper,
 } from "../../../common/Paper/paper.styles";
 import { NoResults } from "../../../NoResults/noResults";
-import { TableToolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
+import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
 import { Table } from "../Table/table";
 
 interface DetailViewTableProps<T extends object> {
@@ -32,7 +32,7 @@ export const DetailViewTable = <T extends object>({
   return items.length > 0 ? (
     <Paper className={className}>
       <GridPaper>
-        {tools && <TableToolbar>{tools}</TableToolbar>}
+        {tools && <Toolbar variant="table">{tools}</Toolbar>}
         <Table
           columns={columns}
           gridTemplateColumns={gridTemplateColumns}

package/src/components/Index/index.tsx

@@ -5,6 +5,7 @@ import { Hero } from "./components/Hero/hero";
 import { Index as IndexLayout } from "./index.styles";
 
 export interface IndexProps {
+  className?: string;
   List?: ReactNode;
   ListHero?: ReactNode | ReactNode[];
   SideBarButton?: ReactNode;
@@ -15,6 +16,7 @@ export interface IndexProps {
 }
 
 export const Index = ({
+  className,
   List,
   ListHero,
   SideBarButton,
@@ -26,7 +28,7 @@ export const Index = ({
   const { layoutState } = useLayoutState();
   const { headerHeight } = layoutState;
   return (
-    <IndexLayout marginTop={headerHeight}>
+    <IndexLayout className={className} marginTop={headerHeight}>
       <Hero SideBarButton={SideBarButton} Summaries={Summaries} title={title} />
       {SubTitleHero}
       {Tabs}

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

@@ -334,6 +334,23 @@ function getVisibleRowsTableData<T>(rows: Row<T>[]): TableData[][] {
   );
 }
 
+/**
+ * Returns true if any or all table rows are selected.
+ * @param table - Table.
+ * @returns true if a row is selected.
+ */
+export function isAnyRowSelected<T>(table: Table<T>): boolean {
+  const {
+    getIsAllPageRowsSelected,
+    getIsSomePageRowsSelected,
+    options: { enableRowSelection },
+  } = table;
+  return Boolean(
+    enableRowSelection &&
+      (getIsSomePageRowsSelected() || getIsAllPageRowsSelected())
+  );
+}
+
 /**
  * Returns true if client-side filtering is enabled.
  * @param exploreMode - Explore mode.

package/src/components/Table/components/CheckboxMenu/checkboxMenu.styles.ts

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

package/src/components/Table/components/CheckboxMenu/checkboxMenu.tsx

@@ -9,7 +9,7 @@ import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextP
 import { DropdownButton } from "../../../common/Button/components/DropdownButton/dropdownButton";
 import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
-import { CheckboxMenu as Menu } from "./checkboxMenu.styles";
+import { Menu } from "./checkboxMenu.styles";
 
 type MenuListItemOnChangeFn = (event: unknown) => void; // see React Table VisibilityColumn "getToggleVisibilityHandler".
 type onResetFn = () => void; // see React Table VisibilityInstance "resetColumnVisibility".
@@ -46,7 +46,9 @@ export const CheckboxMenu = ({
 
   return (
     <>
-      <DropdownButton onClick={onOpenMenu}>{buttonLabel}</DropdownButton>
+      <DropdownButton onClick={onOpenMenu} open={open}>
+        {buttonLabel}
+      </DropdownButton>
       <Menu
         anchorEl={anchorEl}
         anchorOrigin={{ horizontal: "right", vertical: "bottom" }}

package/src/components/Table/components/TableCell/common/utils.ts

@@ -0,0 +1,16 @@
+import { TableCellProps as MTableCellProps } from "@mui/material/TableCell/TableCell";
+import { CoreCell, CoreHeader } from "@tanstack/table-core";
+import { ACCESSOR_KEYS } from "../../../../TableCreator/common/constants";
+
+/**
+ * Returns table cell padding based on the cell ID.
+ * @param id - Cell ID.
+ * @returns table cell padding.
+ */
+export function getTableCellPadding<T extends object, TValue>(
+  id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]
+): MTableCellProps["padding"] {
+  if (id === ACCESSOR_KEYS.SELECT) {
+    return "checkbox";
+  }
+}

package/src/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.tsx

@@ -0,0 +1,24 @@
+import { Checkbox as MCheckbox } from "@mui/material";
+import { Row } from "@tanstack/react-table";
+import { RowData } from "@tanstack/table-core";
+import React from "react";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+
+export interface RowSelectionCellProps<T> {
+  row: Row<T>;
+}
+
+export const RowSelectionCell = <T extends RowData>({
+  row,
+}: RowSelectionCellProps<T>): JSX.Element => {
+  const { getIsSelected, getToggleSelectedHandler } = row;
+  return (
+    <MCheckbox
+      checked={getIsSelected()}
+      checkedIcon={<CheckedIcon />}
+      icon={<UncheckedIcon />}
+      onChange={getToggleSelectedHandler()}
+    />
+  );
+};

package/src/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.tsx

@@ -0,0 +1,31 @@
+import { Checkbox } from "@mui/material";
+import { Table } from "@tanstack/react-table";
+import { RowData } from "@tanstack/table-core";
+import React from "react";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { IndeterminateIcon } from "../../../../../common/CustomIcon/components/IndeterminateIcon/indeterminateIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+
+export interface HeadSelectionCellProps<T> {
+  tableInstance: Table<T>;
+}
+
+export const HeadSelectionCell = <T extends RowData>({
+  tableInstance,
+}: HeadSelectionCellProps<T>): JSX.Element => {
+  const {
+    getIsAllPageRowsSelected,
+    getIsSomePageRowsSelected,
+    getToggleAllRowsSelectedHandler,
+  } = tableInstance;
+  return (
+    <Checkbox
+      checked={getIsAllPageRowsSelected()}
+      checkedIcon={<CheckedIcon />}
+      icon={<UncheckedIcon />}
+      indeterminate={getIsSomePageRowsSelected()}
+      indeterminateIcon={<IndeterminateIcon />}
+      onChange={getToggleAllRowsSelectedHandler()}
+    />
+  );
+};

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -1,5 +1,5 @@
 import {
-  TableCell,
+  TableCell as MTableCell,
   TableHead as MTableHead,
   TableRow,
   TableSortLabel,
@@ -8,6 +8,7 @@ import { flexRender, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { getTableSortLabelProps } from "../../common/utils";
+import { getTableCellPadding } from "../TableCell/common/utils";
 
 export interface TableHeadProps<T> {
   rowDirection: ROW_DIRECTION;
@@ -25,14 +26,24 @@ export const TableHead = <T extends object>({
           <MTableHead key={headerGroup.id}>
             <TableRow>
               {headerGroup.headers.map((header) => (
-                <TableCell key={header.id}>
-                  <TableSortLabel {...getTableSortLabelProps(header.column)}>
-                    {flexRender(
+                <MTableCell
+                  key={header.id}
+                  padding={getTableCellPadding(header.id)}
+                >
+                  {header.column.getCanSort() ? (
+                    <TableSortLabel {...getTableSortLabelProps(header.column)}>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </TableSortLabel>
+                  ) : (
+                    flexRender(
                       header.column.columnDef.header,
                       header.getContext()
-                    )}
-                  </TableSortLabel>
-                </TableCell>
+                    )
+                  )}
+                </MTableCell>
               ))}
             </TableRow>
           </MTableHead>

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -1,7 +1,8 @@
-import { TableCell, TableRow as MTableRow } from "@mui/material";
+import { TableCell as MTableCell, TableRow as MTableRow } from "@mui/material";
 import { flexRender, Row, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
+import { getTableCellPadding } from "../TableCell/common/utils";
 
 export interface TableRowsProps<T> {
   tableInstance: Table<T>;
@@ -25,13 +26,14 @@ export const TableRows = <T extends object>({
             data-index={virtualRow.index}
             ref={virtualizer.measureElement}
           >
-            {row.getVisibleCells().map((cell) => {
-              return (
-                <TableCell key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
-              );
-            })}
+            {row.getVisibleCells().map((cell) => (
+              <MTableCell
+                key={cell.id}
+                padding={getTableCellPadding(cell.column.id)}
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </MTableCell>
+            ))}
           </MTableRow>
         );
       })}

package/src/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { DropdownMenu as DXDropdownMenu } from "../../../../../../../common/DropdownMenu/dropdownMenu";
+
+export const DropdownMenu = styled(DXDropdownMenu)`
+  .MuiPaper-menu {
+    min-width: 288px;
+  }
+`;

package/src/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.tsx

@@ -0,0 +1,50 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+import React from "react";
+import { DropdownButton as DXDropdownButton } from "../../../../../../../common/Button/components/DropdownButton/dropdownButton";
+import {
+  DropdownMenuButtonProps,
+  DropdownMenuItemProps,
+} from "../../../../../../../common/DropdownMenu/common/entities";
+import { DropdownMenuProps as DXDropdownMenuProps } from "../../../../../../../common/DropdownMenu/dropdownMenu";
+import { DropdownMenu as RowSelectionDropdownMenu } from "./dropdownMenu.styles";
+
+const DEFAULT_MENU_PROPS: Partial<MMenuProps> = {
+  anchorOrigin: { horizontal: "left", vertical: "bottom" },
+  transformOrigin: { horizontal: "left", vertical: "top" },
+};
+
+export interface DropdownMenuProps {
+  Button?: DXDropdownMenuProps["Button"];
+  buttonLabel?: string;
+  children: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
+  className?: string;
+}
+
+export const DropdownMenu = ({
+  Button = (props: DropdownMenuButtonProps): JSX.Element =>
+    renderButton({ children: buttonLabel, ...props }),
+  buttonLabel = "Edit",
+  children,
+  className,
+  ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */
+}: DropdownMenuProps): JSX.Element => {
+  return (
+    <RowSelectionDropdownMenu
+      {...DEFAULT_MENU_PROPS}
+      className={className}
+      Button={Button}
+      {...props}
+    >
+      {({ closeMenu }): JSX.Element[] => children({ closeMenu })}
+    </RowSelectionDropdownMenu>
+  );
+};
+
+/**
+ * Return the dropdown button.
+ * @param props - Button props e.g. "onClick".
+ * @returns button element.
+ */
+function renderButton(props: DropdownMenuButtonProps): JSX.Element {
+  return <DXDropdownButton {...props} />;
+}

package/src/components/Table/components/TableToolbar/components/RowSelection/rowSelection.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const RowSelection = styled.div`
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-start;
+`;

package/src/components/Table/components/TableToolbar/components/RowSelection/rowSelection.tsx

@@ -0,0 +1,30 @@
+import { Typography } from "@mui/material";
+import { Row } from "@tanstack/react-table";
+import React from "react";
+import { ComponentsConfig } from "../../../../../../config/entities";
+import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
+import { RowSelection as RowSelectionActions } from "./rowSelection.styles";
+
+export interface RowSelectionProps<T> {
+  className?: string;
+  rows: Row<T>[];
+  rowSelectionView?: ComponentsConfig;
+}
+
+export const RowSelection = <T extends object>({
+  className,
+  rows,
+  rowSelectionView,
+}: RowSelectionProps<T>): JSX.Element | null => {
+  return (
+    <RowSelectionActions className={className}>
+      <Typography variant={TEXT_BODY_400}>
+        {rows.length} items selected:
+      </Typography>
+      {rowSelectionView ? (
+        <ComponentCreator components={rowSelectionView} response={rows} />
+      ) : null}
+    </RowSelectionActions>
+  );
+};

package/src/components/Table/components/TableToolbar/tableToolbar.styles.ts

@@ -1,14 +1,17 @@
 import styled from "@emotion/styled";
+import { Toolbar as MToolbar } from "@mui/material";
 import { white } from "../../../../styles/common/mixins/colors";
 import { Grid } from "../../../common/Grid/grid";
 
-export const TableToolbar = styled.div`
-  align-items: center;
-  background-color: ${white};
-  display: flex;
-  justify-content: space-between;
-  padding: 20px;
-`;
+export const Toolbar = styled(MToolbar)`
+  &.MuiToolbar-table {
+    align-items: center;
+    background-color: ${white};
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+  }
+` as typeof MToolbar;
 
 export const ToolbarActions = styled(Grid)`
   gap: 8px;

package/src/components/Table/components/TableToolbar/tableToolbar.tsx

@@ -3,12 +3,12 @@ import React, { Fragment } from "react";
 import { ListViewConfig } from "../../../../config/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ROW_DIRECTION } from "../../common/entities";
-import { getEditColumnOptions } from "../../common/utils";
+import { getEditColumnOptions, isAnyRowSelected } from "../../common/utils";
 import { CheckboxMenu } from "../CheckboxMenu/checkboxMenu";
 import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
-import { EntityViewToggle } from "../EntityViewToggle/entityViewToggle";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
-import { TableToolbar as Toolbar, ToolbarActions } from "./tableToolbar.styles";
+import { RowSelection } from "./components/RowSelection/rowSelection";
+import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
 
 export interface TableToolbarProps<T> {
   listView?: ListViewConfig;
@@ -22,9 +22,9 @@ export const TableToolbar = <T extends object>({
   tableInstance,
 }: TableToolbarProps<T>): JSX.Element => {
   const { exploreState } = useExploreState();
-  const { paginationState, relatedListItems } = exploreState;
+  const { paginationState } = exploreState;
   const { currentPage, pages, pageSize, rows } = paginationState;
-  const { resetColumnVisibility } = tableInstance;
+  const { getSelectedRowModel, resetColumnVisibility } = tableInstance;
   const { enableDownload } = listView || {};
   const isLastPage = currentPage === pages;
   const editColumnOptions = getEditColumnOptions(tableInstance);
@@ -42,9 +42,12 @@ export const TableToolbar = <T extends object>({
   return (
     <Fragment>
       {showToolbar && (
-        <Toolbar>
-          {relatedListItems ? (
-            <EntityViewToggle />
+        <Toolbar variant="table">
+          {isAnyRowSelected(tableInstance) ? (
+            <RowSelection
+              rows={getSelectedRowModel().rows}
+              rowSelectionView={listView?.rowSelectionView}
+            />
           ) : (
             <PaginationSummary
               firstResult={(currentPage - 1) * pageSize + 1}

package/src/components/Table/table.tsx

@@ -8,11 +8,13 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   InitialTableState,
+  RowSelectionState,
   TableState,
   Updater,
   useReactTable,
   VisibilityState,
 } from "@tanstack/react-table";
+import { CoreOptions } from "@tanstack/table-core";
 import React, { useEffect } from "react";
 import { track } from "../../common/analytics/analytics";
 import {
@@ -51,6 +53,7 @@ import { GridTable } from "./table.styles";
 export interface TableProps<T extends object> {
   columns: ColumnDef<T>[];
   count?: number;
+  getRowId?: CoreOptions<T>["getRowId"];
   initialState: InitialTableState;
   items: T[];
   listView?: ListViewConfig;
@@ -67,6 +70,7 @@ export interface TableProps<T extends object> {
  * Uncontrolled table will take advantage of React Table's state and will be used for static loads.
  * @param tableProps - Set of props required for displaying the table.
  * @param tableProps.columns - Set of columns to display.
+ * @param tableProps.getRowId - Function to customize the row ID.
  * @param tableProps.initialState - Initial table state.
  * @param tableProps.items - Row data to display.
  * @param tableProps.listView - List view configuration.
@@ -75,6 +79,7 @@ export interface TableProps<T extends object> {
  */
 export const TableComponent = <T extends object>({
   columns,
+  getRowId,
   initialState,
   items,
   listView,
@@ -93,7 +98,8 @@ TableProps<T>): JSX.Element => {
     paginationState,
     tabValue,
   } = exploreState;
-  const { columnsVisibility, sorting } = entityPageState[tabValue];
+  const { columnsVisibility, enableRowSelection, rowSelection, sorting } =
+    entityPageState[tabValue];
   const { currentPage, pages, pageSize } = paginationState;
   const { disablePagination = false } = listView || {};
   const clientFiltering = isClientFilteringEnabled(exploreMode);
@@ -126,12 +132,20 @@ TableProps<T>): JSX.Element => {
     });
   };
 
+  const onRowSelectionChange = (updater: Updater<RowSelectionState>): void => {
+    exploreDispatch({
+      payload: typeof updater === "function" ? updater(rowSelection) : updater,
+      type: ExploreActionKind.UpdateRowSelection,
+    });
+  };
+
   const state: Partial<TableState> = {
     columnVisibility: columnsVisibility,
     pagination: {
       pageIndex: 0,
       pageSize: disablePagination ? Number.MAX_SAFE_INTEGER : pageSize,
     },
+    rowSelection,
     sorting,
   };
   const tableInstance = useReactTable({
@@ -140,6 +154,7 @@ TableProps<T>): JSX.Element => {
     enableColumnFilters: true, // client-side filtering.
     enableFilters: true, // client-side filtering.
     enableMultiSort: false,
+    enableRowSelection,
     enableSorting: true, // client-side filtering.
     enableSortingRemoval: false, // client-side filtering.
     getCoreRowModel: getCoreRowModel(),
@@ -149,11 +164,13 @@ TableProps<T>): JSX.Element => {
       : undefined,
     getFilteredRowModel: clientFiltering ? getFilteredRowModel() : undefined,
     getPaginationRowModel: getPaginationRowModel(),
+    getRowId,
     getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
     initialState,
     manualPagination: clientFiltering,
     manualSorting: !clientFiltering,
     onColumnVisibilityChange,
+    onRowSelectionChange,
     onSortingChange,
     pageCount: total,
     state,

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

@@ -0,0 +1,26 @@
+import { RowData } from "@tanstack/react-table";
+import { RowSelectionCell } from "../../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
+import { BaseColumnConfig } from "./entities";
+
+export const ACCESSOR_KEYS = {
+  SELECT: "select",
+};
+
+export const COLUMN_CONFIGS: Record<
+  string,
+  BaseColumnConfig<RowData, unknown>
+> = {
+  SELECT: {
+    columnPinned: false,
+    columnVisible: false,
+    componentConfig: { component: RowSelectionCell },
+    disableHiding: true,
+    disableSorting: true,
+    header: ACCESSOR_KEYS.SELECT,
+    id: ACCESSOR_KEYS.SELECT,
+    meta: {
+      header: "",
+    },
+    width: "max-content",
+  },
+};

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

@@ -0,0 +1,6 @@
+import { ColumnMeta } from "@tanstack/table-core";
+import { ColumnConfig } from "../../../config/entities";
+
+export interface BaseColumnConfig<T, TValue> extends ColumnConfig<T> {
+  meta?: ColumnMeta<T, TValue>;
+}

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

@@ -0,0 +1,33 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumnConfig } from "./entities";
+
+/**
+ * Builds a base column definition.
+ * @param baseColumnConfig - Base column configuration.
+ * @returns column definition.
+ */
+export function buildBaseColumnDef<T, TValue>(
+  baseColumnConfig: BaseColumnConfig<T, TValue>
+): ColumnDef<T> {
+  const {
+    columnPinned,
+    disableHiding,
+    disableSorting,
+    header,
+    id,
+    meta,
+    width,
+  } = baseColumnConfig;
+  return {
+    accessorKey: id,
+    enableHiding: !disableHiding,
+    enableSorting: !disableSorting,
+    header,
+    id,
+    meta: {
+      columnPinned,
+      header: meta ? meta.header : header,
+      width,
+    },
+  };
+}