@databiosphere/findable-ui 37.0.0 → 38.0.0

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.js

@@ -1,8 +1,9 @@
 import React from "react";
-import { ButtonSecondary } from "../../../common/Button/components/ButtonSecondary/buttonSecondary";
 import { FileDownloadButton } from "../../../common/Button/components/FileDownloadButton/fileDownloadButton";
+import { BUTTON_PROPS } from "../../../common/Button/constants";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { generateDownloadBlob } from "../../common/utils";
+import { StyledButton } from "./downloadEntityResults.styles";
 export const DownloadEntityResults = ({ entityName, rows, }) => {
     const [fileUrl, setFileUrl] = React.useState(undefined);
     const onDownload = () => {
@@ -12,6 +13,6 @@ export const DownloadEntityResults = ({ entityName, rows, }) => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(ButtonSecondary, { onClick: () => onDownload(), StartIcon: DownloadIcon }, "Download TSV"),
+        React.createElement(StyledButton, { ...BUTTON_PROPS.SECONDARY_CONTAINED, onClick: () => onDownload(), startIcon: React.createElement(DownloadIcon, null) }, "Download TSV"),
         React.createElement(FileDownloadButton, { fileName: `${entityName}.tsv`, fileUrl: fileUrl })));
 };

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.styles.js

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Button } from "@mui/material";
+import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
+export const StyledButton = styled(Button) `
+  ${mediaTabletDown} {
+    display: none;
+  }
+`;

package/lib/components/Table/components/PaginationSummary/paginationSummary.js

@@ -2,7 +2,7 @@ import { Fade, Typography } from "@mui/material";
 import React from "react";
 import { TEST_IDS } from "../../../../tests/testIds";
 export const PaginationSummary = ({ firstResult, lastResult, totalResult, }) => {
-    return (React.createElement(Fade, { in: totalResult > 0 },
+    return (React.createElement(Fade, { in: totalResult > 0, unmountOnExit: true },
         React.createElement("div", { "data-testid": TEST_IDS.TABLE_PAGINATION_RESULTS },
             React.createElement(Typography, { variant: "text-body-400" }, "Results "),
             React.createElement(Typography, { variant: "text-body-small-500" },

package/lib/components/Table/components/TableBody/tableBody.d.ts

@@ -1,8 +1,10 @@
 import { Row, RowData, Table } from "@tanstack/react-table";
+import { RefObject } from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 export interface TableBodyProps<T extends RowData> {
     rowDirection: ROW_DIRECTION;
     rows: Row<T>[];
+    tableContainerRef: RefObject<HTMLDivElement>;
     tableInstance: Table<T>;
 }
-export declare const TableBody: <T extends RowData>({ rowDirection, rows, tableInstance, }: TableBodyProps<T>) => JSX.Element;
+export declare const TableBody: <T extends RowData>({ rowDirection, rows, tableContainerRef, tableInstance, }: TableBodyProps<T>) => JSX.Element;

package/lib/components/Table/components/TableBody/tableBody.js

@@ -1,14 +1,20 @@
 import { TableBody as MTableBody } from "@mui/material";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import React from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
 import { VirtualizedRow } from "../TableRows/components/VirtualizedRow/virtualizedRow";
 import { TableRows } from "../TableRows/tableRows";
-import { useVirtualizer } from "./hooks/virtualizer/hook";
 import { getAllVirtualizedRows } from "./utils";
-export const TableBody = ({ rowDirection, rows, tableInstance, }) => {
+export const TableBody = ({ rowDirection, rows, tableContainerRef, tableInstance, }) => {
     const virtualizedRows = getAllVirtualizedRows(tableInstance, rows, rowDirection);
-    const { virtualizer } = useVirtualizer(virtualizedRows);
+    const virtualizer = useVirtualizer({
+        count: virtualizedRows.length,
+        estimateSize: () => 56,
+        gap: 1,
+        getScrollElement: () => tableContainerRef.current,
+        overscan: 20,
+    });
     return (React.createElement(MTableBody, null,
         React.createElement(VirtualizedRow, { isUpperRow: true, virtualizer: virtualizer }),
         rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { rows: virtualizedRows, virtualizer: virtualizer })) : (React.createElement(CollapsableRows, { rows: virtualizedRows, tableInstance: tableInstance, virtualizer: virtualizer })),

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled"> & {
+}, "label" | "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "variant" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "slots" | "slotProps"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.d.ts

@@ -1,8 +1,6 @@
 import { Row, RowData } from "@tanstack/react-table";
-import { Virtualizer } from "@tanstack/react-virtual";
 export interface CollapsableCellProps<T extends RowData> {
     isDisabled?: boolean;
     row: Row<T>;
-    virtualizer?: Virtualizer<Window, Element>;
 }
-export declare const CollapsableCell: <T extends RowData>({ isDisabled, row, virtualizer, }: CollapsableCellProps<T>) => JSX.Element;
+export declare const CollapsableCell: <T extends RowData>({ isDisabled, row, }: CollapsableCellProps<T>) => JSX.Element;

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.js

@@ -5,14 +5,14 @@ import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography
 import { UnfoldMoreIcon } from "../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon";
 import { getPinnedCellIndex } from "../../../../common/utils";
 import { CollapsedContents, Content, PinnedCell, TableCell, } from "./collapsableCell.styles";
-export const CollapsableCell = ({ isDisabled = false, row, virtualizer, }) => {
+export const CollapsableCell = ({ isDisabled = false, row, }) => {
     const [pinnedCell, pinnedIndex] = getPinnedCellIndex(row);
     return (React.createElement(TableCell, { isExpanded: row.getIsExpanded() },
         React.createElement(PinnedCell, null,
             flexRender(pinnedCell.column.columnDef.cell, pinnedCell.getContext()),
             React.createElement(IconButton, { color: "ink", disabled: isDisabled, edge: "end", onClick: () => row.toggleExpanded(), size: "large" },
                 React.createElement(UnfoldMoreIcon, { fontSize: "small" }))),
-        React.createElement(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, onEntered: () => virtualizer?.measure(), onExited: () => virtualizer?.measure(), unmountOnExit: true },
+        React.createElement(Collapse, { in: row.getIsExpanded() },
             React.createElement(CollapsedContents, null, getRowVisibleCells(row).map((cell, i) => {
                 if (cell.getIsAggregated())
                     return null; // Display of aggregated cells is currently not supported.

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export declare const StyledMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled"> & {
+}, "label" | "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "variant" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "slots" | "slotProps"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Table/components/TableFeatures/GlobalFilter/globalFilter.d.ts

@@ -1,3 +1,3 @@
 import { RowData } from "@tanstack/react-table";
 import { GlobalFilterProps } from "./types";
-export declare const GlobalFilter: <T extends RowData>({ className, table, ...props }: GlobalFilterProps<T>) => JSX.Element;
+export declare const GlobalFilter: <T extends RowData>({ className, table, ...props }: GlobalFilterProps<T>) => JSX.Element | null;

package/lib/components/Table/components/TableFeatures/GlobalFilter/globalFilter.js

@@ -4,7 +4,10 @@ import { SearchInputAdornment } from "../../../../common/OutlinedInput/component
 import { StyledOutlinedInput } from "../../../../common/OutlinedInput/outlinedInput.styles";
 import { OUTLINED_INPUT_PROPS } from "./constants";
 export const GlobalFilter = ({ className, table, ...props /* MuiOutlinedInputProps */ }) => {
-    const { getState, setGlobalFilter } = table;
+    const { getState, options, setGlobalFilter } = table;
     const { globalFilter } = getState();
+    const { enableGlobalFilter } = options;
+    if (!enableGlobalFilter)
+        return null;
     return (React.createElement(StyledOutlinedInput, { ...OUTLINED_INPUT_PROPS, className: className, endAdornment: React.createElement(ClearInputAdornment, { in: !!globalFilter, onClick: () => setGlobalFilter(undefined) }), hasValue: !!globalFilter, onChange: (e) => setGlobalFilter(e.target.value), startAdornment: React.createElement(SearchInputAdornment, null), value: globalFilter ?? "", ...props }));
 };

package/lib/components/Table/components/TableHead/tableHead.d.ts

@@ -1,3 +1,3 @@
 import { RowData } from "@tanstack/react-table";
 import { TableHeadProps } from "./types";
-export declare const TableHead: <T extends RowData>({ rowDirection, tableInstance, }: TableHeadProps<T>) => JSX.Element;
+export declare const TableHead: <T extends RowData>({ tableInstance, }: TableHeadProps<T>) => JSX.Element;

package/lib/components/Table/components/TableHead/tableHead.js

@@ -3,17 +3,15 @@ import { TableHead as MTableHead, TableRow as MTableRow, TableCell, TableSortLab
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
-import { ROW_DIRECTION } from "../../common/entities";
 import { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
 import { handleToggleSorting } from "../TableFeatures/RowSorting/utils";
 import { isSortDisabled, shouldSortColumn } from "./utils";
-export const TableHead = ({ rowDirection, tableInstance, }) => {
-    return (React.createElement(Fragment, null, rowDirection === ROW_DIRECTION.DEFAULT &&
-        tableInstance.getHeaderGroups().map((headerGroup) => (React.createElement(MTableHead, { key: headerGroup.id },
-            React.createElement(MTableRow, null, headerGroup.headers.map(({ column, getContext, id }) => {
-                const { columnDef, getIsGrouped, getIsSorted } = column;
-                const annotation = columnDef.meta?.annotation;
-                return getIsGrouped() ? null : (React.createElement(TableCell, { key: id, align: getTableCellAlign(column), padding: getTableCellPadding(id) },
-                    React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label }, shouldSortColumn(tableInstance, column) ? (React.createElement(TableSortLabel, { IconComponent: SouthRounded, active: Boolean(getIsSorted()), direction: getIsSorted() || undefined, disabled: isSortDisabled(tableInstance), onClick: (mouseEvent) => handleToggleSorting(mouseEvent, tableInstance, column) }, flexRender(columnDef.header, getContext()))) : (flexRender(columnDef.header, getContext())))));
-            })))))));
+export const TableHead = ({ tableInstance, }) => {
+    return (React.createElement(Fragment, null, tableInstance.getHeaderGroups().map((headerGroup) => (React.createElement(MTableHead, { key: headerGroup.id },
+        React.createElement(MTableRow, null, headerGroup.headers.map(({ column, getContext, id }) => {
+            const { columnDef, getIsGrouped, getIsSorted } = column;
+            const annotation = columnDef.meta?.annotation;
+            return getIsGrouped() ? null : (React.createElement(TableCell, { key: id, align: getTableCellAlign(column), padding: getTableCellPadding(id) },
+                React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label }, shouldSortColumn(tableInstance, column) ? (React.createElement(TableSortLabel, { IconComponent: SouthRounded, active: Boolean(getIsSorted()), direction: getIsSorted() || undefined, disabled: isSortDisabled(tableInstance), onClick: (mouseEvent) => handleToggleSorting(mouseEvent, tableInstance, column) }, flexRender(columnDef.header, getContext()))) : (flexRender(columnDef.header, getContext())))));
+        })))))));
 };

package/lib/components/Table/components/TableHead/types.d.ts

@@ -1,6 +1,4 @@
 import { RowData, Table } from "@tanstack/react-table";
-import { ROW_DIRECTION } from "../../common/entities";
 export interface TableHeadProps<T extends RowData> {
-    rowDirection: ROW_DIRECTION;
     tableInstance: Table<T>;
 }

package/lib/components/Table/components/TablePagination/stories/args.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+import { TablePagination } from "../tablePagination";
+export declare const DEFAULT_ARGS: ComponentProps<typeof TablePagination>;

package/lib/components/Table/components/TablePagination/stories/args.js

@@ -0,0 +1,9 @@
+import { fn } from "@storybook/test";
+export const DEFAULT_ARGS = {
+    canNextPage: true,
+    canPreviousPage: false,
+    currentPage: 1,
+    onNextPage: fn(),
+    onPreviousPage: fn(),
+    totalPage: 10,
+};

package/lib/components/{Index/components/Hero/components/Summaries/stories/summaries.stories.d.ts → Table/components/TablePagination/stories/tablePagination.stories.d.ts}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Summaries } from "../summaries";
-declare const meta: Meta<typeof Summaries>;
+import { TablePagination } from "../tablePagination";
+declare const meta: Meta<typeof TablePagination>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

package/lib/components/Table/components/TablePagination/stories/tablePagination.stories.js

@@ -0,0 +1,9 @@
+import { TablePagination } from "../tablePagination";
+import { DEFAULT_ARGS } from "./args";
+const meta = {
+    component: TablePagination,
+};
+export default meta;
+export const Default = {
+    args: DEFAULT_ARGS,
+};

package/lib/components/Table/components/TablePagination/tablePagination.d.ts

@@ -0,0 +1,2 @@
+import { TablePaginationProps } from "./types";
+export declare const TablePagination: ({ canNextPage, canPreviousPage, currentPage, onNextPage, onPreviousPage, totalPage, }: TablePaginationProps) => JSX.Element | null;

package/lib/components/Table/components/TablePagination/tablePagination.js

@@ -0,0 +1,20 @@
+import { EastRounded, WestRounded } from "@mui/icons-material";
+import { IconButton, tablePaginationClasses, Typography } from "@mui/material";
+import React from "react";
+import { ICON_BUTTON_PROPS } from "../../../../styles/common/mui/iconButton";
+import { SVG_ICON_PROPS } from "../../../../styles/common/mui/svgIcon";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
+import { TEST_IDS } from "../../../../tests/testIds";
+import { StyledGrid } from "./tablePagination.styles";
+export const TablePagination = ({ canNextPage = true, canPreviousPage = true, currentPage, onNextPage, onPreviousPage, totalPage, }) => {
+    return (React.createElement(StyledGrid, { className: tablePaginationClasses.root, container: true, "data-testid": TEST_IDS.TABLE_PAGINATION },
+        React.createElement(IconButton, { color: ICON_BUTTON_PROPS.COLOR.SECONDARY, disabled: !canPreviousPage, onClick: onPreviousPage },
+            React.createElement(WestRounded, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL })),
+        React.createElement(Typography, { "data-testid": TEST_IDS.TABLE_PAGINATION_PAGE, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500 },
+            "Page ",
+            currentPage,
+            " of ",
+            totalPage),
+        React.createElement(IconButton, { color: ICON_BUTTON_PROPS.COLOR.SECONDARY, disabled: !canNextPage, onClick: onNextPage },
+            React.createElement(EastRounded, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }))));
+};

package/lib/components/Table/components/TablePagination/tablePagination.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledGrid: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TablePagination/tablePagination.styles.js

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+export const StyledGrid = styled(Grid) `
+  align-items: center;
+  background-color: ${PALETTE.COMMON_WHITE};
+  gap: 16px;
+  justify-content: center;
+  padding: 16px;
+`;

package/lib/components/Table/components/TablePagination/types.d.ts

@@ -0,0 +1,8 @@
+export interface TablePaginationProps {
+    canNextPage?: boolean;
+    canPreviousPage?: boolean;
+    currentPage: number;
+    onNextPage: () => void;
+    onPreviousPage: () => void;
+    totalPage: number;
+}

package/lib/components/Table/components/TableRow/tableRow.styles.d.ts

@@ -1,10 +1,9 @@
-interface Props {
+export interface StyledTableRowProps {
     isGrouped?: boolean;
     isPreview?: boolean;
 }
-export declare const TableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+export declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
 }, "style" | "className" | "classes" | "children" | "sx" | "selected" | "hover"> & {
     theme?: import("@emotion/react").Theme;
-} & Props, {}, {}>;
-export {};
+} & StyledTableRowProps, {}, {}>;

package/lib/components/Table/components/TableRow/tableRow.styles.js

@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { TableRow as MTableRow } from "@mui/material";
 import { primaryLightest, smokeLightest, } from "../../../../styles/common/mixins/colors";
 import { textBodySmall500 } from "../../../../styles/common/mixins/fonts";
-export const TableRow = styled(MTableRow, {
+export const StyledTableRow = styled(MTableRow, {
     shouldForwardProp: (prop) => prop !== "isPreview" && prop !== "isGrouped",
 }) `
   && {

package/lib/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.d.ts

@@ -3,6 +3,6 @@ import { Virtualizer } from "@tanstack/react-virtual";
 export interface CollapsableRowsProps<T extends RowData> {
     rows: Row<T>[];
     tableInstance: Table<T>;
-    virtualizer: Virtualizer<Window, Element>;
+    virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 export declare const CollapsableRows: <T extends RowData>({ rows, tableInstance, virtualizer, }: CollapsableRowsProps<T>) => JSX.Element;

package/lib/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -1,19 +1,19 @@
 import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../common/utils";
 import { CollapsableCell } from "../../../TableCell/components/CollapsableCell/collapsableCell";
-import { TableRow } from "../../../TableRow/tableRow.styles";
+import { StyledTableRow } from "./collapsableRows.styles";
 import { useCollapsableRows } from "./hook";
 export const CollapsableRows = ({ rows, tableInstance, virtualizer, }) => {
+    useCollapsableRows(tableInstance);
     const { getState } = tableInstance;
     const { grouping } = getState();
     const virtualItems = virtualizer.getVirtualItems();
-    useCollapsableRows(tableInstance);
     return (React.createElement(Fragment, null, virtualItems.map((virtualRow) => {
-        const row = rows[virtualRow.index];
-        const { getIsPreview } = row;
+        const rowIndex = virtualRow.index;
+        const row = rows[rowIndex];
         if (grouping.length > 0 && row.depth > 0)
             return null; // TODO(cc) hide sub rows -- sub-rows are within collapsed content -- UI TBD.
-        return (React.createElement(TableRow, { key: row.id, "data-index": virtualRow.index, isPreview: getIsPreview(), ref: virtualizer.measureElement },
-            React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row, virtualizer: virtualizer })));
+        return (React.createElement(StyledTableRow, { key: row.id, "data-index": rowIndex, ref: virtualizer.measureElement, isPreview: row.getIsPreview() },
+            React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };

package/lib/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+    ref?: ((instance: HTMLTableRowElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "selected" | "hover"> & {
+    theme?: import("@emotion/react").Theme;
+} & import("../../../TableRow/tableRow.styles").StyledTableRowProps, {}, {}>;

package/lib/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.styles.js

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+import { StyledTableRow as BaseStyledTableRow } from "../../../TableRow/tableRow.styles";
+export const StyledTableRow = styled(BaseStyledTableRow) `
+  min-height: 64px;
+`;

package/lib/components/Table/components/TableRows/components/VirtualizedRow/virtualizedRow.d.ts

@@ -1,6 +1,6 @@
 import { Virtualizer } from "@tanstack/react-virtual";
 export interface VirtualizedRowProps {
     isUpperRow: boolean;
-    virtualizer: Virtualizer<Window, Element>;
+    virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 export declare const VirtualizedRow: ({ isUpperRow, virtualizer, }: VirtualizedRowProps) => JSX.Element;

package/lib/components/Table/components/TableRows/tableRows.d.ts

@@ -2,6 +2,6 @@ import { Row, RowData } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 export interface TableRowsProps<T extends RowData> {
     rows: Row<T>[];
-    virtualizer: Virtualizer<Window, Element>;
+    virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 export declare const TableRows: <T extends RowData>({ rows, virtualizer, }: TableRowsProps<T>) => JSX.Element;

package/lib/components/Table/components/TableRows/tableRows.js

@@ -3,14 +3,14 @@ import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
-import { TableRow } from "../TableRow/tableRow.styles";
+import { StyledTableRow } from "../TableRow/tableRow.styles";
 export const TableRows = ({ rows, virtualizer, }) => {
     const virtualItems = virtualizer.getVirtualItems();
     return (React.createElement(Fragment, null, virtualItems.map((virtualRow) => {
         const rowIndex = virtualRow.index;
         const row = rows[rowIndex];
         const { getIsGrouped, getIsPreview } = row;
-        return (React.createElement(TableRow, { key: row.id, "data-index": rowIndex, isGrouped: getIsGrouped(), isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
+        return (React.createElement(StyledTableRow, { key: row.id, "data-index": rowIndex, isGrouped: getIsGrouped(), isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/lib/components/Table/components/TableToolbar/constants.d.ts

@@ -0,0 +1,2 @@
+import { GridProps } from "@mui/material";
+export declare const GRID_PROPS: GridProps;

package/lib/components/Table/components/TableToolbar/constants.js

@@ -0,0 +1,6 @@
+export const GRID_PROPS = {
+    alignItems: "center",
+    container: true,
+    direction: "row",
+    gap: 2,
+};

package/lib/components/Table/components/TableToolbar/tableToolbar.d.ts

@@ -1,9 +1,7 @@
 import { RowData, Table } from "@tanstack/react-table";
 import { ListViewConfig } from "../../../../config/entities";
-import { ROW_DIRECTION } from "../../common/entities";
 export interface TableToolbarProps<T extends RowData> {
     listView?: ListViewConfig;
-    rowDirection: ROW_DIRECTION;
     tableInstance: Table<T>;
 }
-export declare const TableToolbar: <T extends RowData>({ listView, rowDirection, tableInstance, }: TableToolbarProps<T>) => JSX.Element;
+export declare const TableToolbar: <T extends RowData>({ listView, tableInstance, }: TableToolbarProps<T>) => JSX.Element;

package/lib/components/Table/components/TableToolbar/tableToolbar.js

@@ -1,6 +1,7 @@
+import { Grid } from "@mui/material";
 import React, { Fragment } from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
-import { ROW_DIRECTION } from "../../common/entities";
+import { ViewToggle } from "../../../Index/components/EntityView/components/controls/ViewToggle/viewToggle";
 import { isAnyRowSelected } from "../../common/utils";
 import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
@@ -8,22 +9,22 @@ import { ColumnGrouping } from "./components/ColumnGrouping/columnGrouping";
 import { ColumnVisibility } from "./components/ColumnVisibility/columnVisibility";
 import { RowPreview } from "./components/RowPreview/rowPreview";
 import { RowSelection } from "./components/RowSelection/rowSelection";
-import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
-export const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
+import { GRID_PROPS } from "./constants";
+import { StyledToolbar } from "./tableToolbar.styles";
+export const TableToolbar = ({ listView, tableInstance, }) => {
     const { exploreState } = useExploreState();
     const { paginationState } = exploreState;
     const { currentPage, pages, pageSize, rows } = paginationState;
-    const { getSelectedRowModel, options: { enableGrouping, enableHiding }, } = tableInstance;
+    const { getSelectedRowModel } = tableInstance;
     const { enableDownload, rowPreviewView } = listView || {};
-    const isLastPage = currentPage === pages;
-    const showToolbar = rowDirection === ROW_DIRECTION.DEFAULT &&
-        (enableHiding || enableDownload || enableGrouping);
     return (React.createElement(Fragment, null,
-        showToolbar && (React.createElement(Toolbar, { variant: "table" },
-            isAnyRowSelected(tableInstance) ? (React.createElement(RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView?.rowSelectionView })) : (React.createElement(PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: isLastPage ? rows : pageSize * currentPage, totalResult: rows })),
-            React.createElement(ToolbarActions, null,
+        React.createElement(StyledToolbar, null,
+            React.createElement(Grid, { ...GRID_PROPS, gap: 6 },
+                React.createElement(ViewToggle, null),
+                isAnyRowSelected(tableInstance) ? (React.createElement(RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView?.rowSelectionView })) : (React.createElement(PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: currentPage === pages ? rows : pageSize * currentPage, totalResult: rows }))),
+            React.createElement(Grid, { ...GRID_PROPS },
                 enableDownload && (React.createElement(DownloadEntityResults, { entityName: exploreState.tabValue, rows: tableInstance.getFilteredRowModel().rows })),
                 React.createElement(ColumnGrouping, { tableInstance: tableInstance }),
-                React.createElement(ColumnVisibility, { tableInstance: tableInstance })))),
+                React.createElement(ColumnVisibility, { tableInstance: tableInstance }))),
         React.createElement(RowPreview, { rowPreviewView: rowPreviewView, tableInstance: tableInstance })));
 };

package/lib/components/Table/components/TableToolbar/tableToolbar.styles.d.ts

@@ -1,5 +1,5 @@
-import { Toolbar as MToolbar } from "@mui/material";
-export declare const Toolbar: typeof MToolbar;
-export declare const ToolbarActions: import("@emotion/styled").StyledComponent<import("../../../common/Grid/grid").GridProps & {
+export declare const StyledToolbar: import("@emotion/styled").StyledComponent<import("@mui/material").ToolbarOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "disableGutters"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Table/components/TableToolbar/tableToolbar.styles.js

@@ -1,17 +1,18 @@
 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 Toolbar = styled(MToolbar) `
-  &.MuiToolbar-table {
-    align-items: center;
-    background-color: ${white};
-    display: flex;
-    justify-content: space-between;
-    padding: 20px;
+import { PALETTE } from "../../../../styles/common/constants/palette";
+export const StyledToolbar = styled(MToolbar) `
+  align-items: center;
+  background-color: ${PALETTE.COMMON_WHITE};
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 16px;
+
+  .MuiGrid-root {
+    &:empty {
+      display: none;
+    }
   }
 `;
-export const ToolbarActions = styled(Grid) `
-  gap: 8px;
-  grid-auto-flow: column;
-`;

package/lib/components/Table/table.d.ts

@@ -5,5 +5,4 @@ export interface TableProps<T extends RowData> {
     loading: boolean;
     table: TanStackTable<T>;
 }
-export declare const TableComponent: <T extends RowData>({ listView, loading, table, }: TableProps<T>) => JSX.Element;
-export declare const Table: typeof TableComponent;
+export declare const Table: <T extends RowData>({ listView, loading, table, }: TableProps<T>) => JSX.Element;