@databiosphere/findable-ui 2.1.0 → 3.0.0

package/lib/components/Detail/components/DetailViewTable/detailViewTable.js

@@ -12,7 +12,7 @@ const table_1 = require("../Table/table");
 const DetailViewTable = ({ className, columns, gridTemplateColumns, items, noResultsTitle, Paper = paper_styles_1.RoundedPaper, tools, }) => {
     return items.length > 0 ? (react_1.default.createElement(Paper, { className: className },
         react_1.default.createElement(paper_styles_1.GridPaper, null,
-            tools && react_1.default.createElement(tableToolbar_styles_1.TableToolbar, null, tools),
+            tools && react_1.default.createElement(tableToolbar_styles_1.Toolbar, { variant: "table" }, tools),
             react_1.default.createElement(table_1.Table, { columns: columns, gridTemplateColumns: gridTemplateColumns, items: items })))) : (react_1.default.createElement(noResults_1.NoResults, { Paper: Paper, title: noResultsTitle }));
 };
 exports.DetailViewTable = DetailViewTable;

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.d.ts

@@ -31,6 +31,6 @@ export declare const FilterLabel: import("@emotion/styled").StyledComponent<{
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "endIcon" | "fullWidth" | "startIcon"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/lib/components/Filter/components/Filters/filters.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { TrackFilterOpenedFunction } from "config/entities";
 import { SelectCategoryView } from "../../../../common/entities";
+import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 export interface CategoryFilter {
     categoryViews: SelectCategoryView[];

package/lib/components/Filter/components/Filters/filters.styles.js

@@ -10,7 +10,7 @@ const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
 const colors_1 = require("../../../../styles/common/mixins/colors");
 const fonts_1 = require("../../../../styles/common/mixins/fonts");
 exports.Filters = (0, styled_1.default)("div", {
-    shouldForwardProp: (prop) => prop !== "height",
+    shouldForwardProp: (prop) => prop !== "height" && prop !== "isBaseStyle",
 }) `
   ${(props) => (props.isBaseStyle ? (0, fonts_1.textBody500)(props) : (0, fonts_1.textBody400)(props))};
   color: ${(props) => (props.isBaseStyle ? (0, colors_1.inkMain)(props) : (0, colors_1.inkLight)(props))};

package/lib/components/Filter/components/VariableSizeListItem/variableSizeListItem.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
+const constants_1 = require("../../../../providers/exploreState/constants");
 const typography_1 = require("../../../../theme/common/typography");
 const checkedIcon_1 = require("../../../common/CustomIcon/components/CheckedIcon/checkedIcon");
 const uncheckedIcon_1 = require("../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon");
@@ -43,6 +44,6 @@ function VariableSizeListItem({ categoryKey, categorySection, matchedItem, onFil
     };
     return (react_1.default.createElement(material_1.ListItemButton, { ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
         react_1.default.createElement(material_1.Checkbox, { checked: selected, checkedIcon: react_1.default.createElement(checkedIcon_1.CheckedIcon, null), icon: react_1.default.createElement(uncheckedIcon_1.UncheckedIcon, null) }),
-        react_1.default.createElement(material_1.ListItemText, { disableTypography: true, primary: react_1.default.createElement(highlightedLabel_1.HighlightedLabel, { label: label, ranges: labelRanges }), secondary: react_1.default.createElement(material_1.Typography, { color: "ink.light", variant: typography_1.TEXT_BODY_SMALL_400 }, count) })));
+        react_1.default.createElement(material_1.ListItemText, { disableTypography: true, primary: react_1.default.createElement(highlightedLabel_1.HighlightedLabel, { label: label, ranges: labelRanges }), secondary: categoryKey !== constants_1.SELECT_CATEGORY_KEY.SAVED_FILTERS && (react_1.default.createElement(material_1.Typography, { color: "ink.light", variant: typography_1.TEXT_BODY_SMALL_400 }, count)) })));
 }
 exports.default = VariableSizeListItem;

package/lib/components/Index/index.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { HeroTitle } from "../common/Title/title";
 export interface IndexProps {
+    className?: string;
     List?: ReactNode;
     ListHero?: ReactNode | ReactNode[];
     SideBarButton?: ReactNode;
@@ -9,4 +10,4 @@ export interface IndexProps {
     Tabs?: ReactNode;
     title: HeroTitle;
 }
-export declare const Index: ({ List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }: IndexProps) => JSX.Element;
+export declare const Index: ({ className, List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }: IndexProps) => JSX.Element;

package/lib/components/Index/index.js

@@ -8,10 +8,10 @@ const react_1 = __importDefault(require("react"));
 const useLayoutState_1 = require("../../hooks/useLayoutState");
 const hero_1 = require("./components/Hero/hero");
 const index_styles_1 = require("./index.styles");
-const Index = ({ List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
+const Index = ({ className, List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
     const { layoutState } = (0, useLayoutState_1.useLayoutState)();
     const { headerHeight } = layoutState;
-    return (react_1.default.createElement(index_styles_1.Index, { marginTop: headerHeight },
+    return (react_1.default.createElement(index_styles_1.Index, { className: className, marginTop: headerHeight },
         react_1.default.createElement(hero_1.Hero, { SideBarButton: SideBarButton, Summaries: Summaries, title: title }),
         SubTitleHero,
         Tabs,

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.d.ts

@@ -5,11 +5,11 @@ export declare const AuthenticationMenu: import("@emotion/styled").StyledCompone
 export declare const UserIcon: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | "ink" | "inkLight" | undefined;
+    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | "inkLight" | "ink" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
-    size?: "large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined;
+    size?: "large" | "medium" | "small" | "xsmall" | "xxsmall" | "xlarge" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
@@ -59,7 +59,7 @@ export declare const UserSummary: import("@emotion/styled").StyledComponent<{
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "autoFocus" | "tabIndex" | "children" | "sx" | "disabled" | "action" | "selected" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "divider" | "disableGutters"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "autoFocus" | "tabIndex" | "children" | "sx" | "disabled" | "action" | "selected" | "dense" | "disableGutters" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "divider"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const UserNames: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.d.ts

@@ -31,6 +31,6 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "endIcon" | "fullWidth" | "startIcon"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.styles.d.ts

@@ -9,4 +9,4 @@ export declare const SearchForm: import("@emotion/styled").StyledComponent<{
 export declare const SearchInput: import("@emotion/styled").StyledComponent<import("@mui/material").InputProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const ClearButton: ({ className, disabled, Icon, ...props }: import("../../../../../../../../../../../common/IconButton/iconButton").IconButtonProps) => JSX.Element;
+export declare const ClearButton: ({ className, Icon, iconProps, open, size, ...props }: import("../../../../../../../../../../../common/IconButton/iconButton").IconButtonProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.d.ts

@@ -31,6 +31,6 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "endIcon" | "fullWidth" | "startIcon"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.d.ts

@@ -28,6 +28,6 @@ export declare const Tab: import("@emotion/styled").StyledComponent<{
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
+}, "label" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "icon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/lib/components/Layout/components/Outline/outline.styles.d.ts

@@ -105,7 +105,7 @@ export declare const Tab: import("@emotion/styled").StyledComponent<{
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
+}, "label" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "icon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & Props, {}, {}>;
 export {};

package/lib/components/Table/common/utils.d.ts

@@ -91,6 +91,12 @@ export declare function getPinnedCellIndex<T>(row: Row<T>): PinnedCell<T>;
  * @returns table sort label props.
  */
 export declare function getTableSortLabelProps<T>(column: Column<T>): TableSortLabelProps;
+/**
+ * Returns true if any or all table rows are selected.
+ * @param table - Table.
+ * @returns true if a row is selected.
+ */
+export declare function isAnyRowSelected<T>(table: Table<T>): boolean;
 /**
  * Returns true if client-side filtering is enabled.
  * @param exploreMode - Explore mode.

package/lib/components/Table/common/utils.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInitialTableColumnVisibility = exports.sortingFn = exports.isColumnSortActive = exports.isClientFilteringEnabled = exports.getTableSortLabelProps = exports.getPinnedCellIndex = exports.getInitialTableStateSorting = exports.getInitialState = exports.getGridTemplateColumns = exports.getFacetedUniqueValuesWithArrayValues = exports.getEditColumnOptions = exports.generateDownloadBlob = exports.getColumnSortDirection = exports.buildCategoryViews = exports.arrIncludesSome = void 0;
+exports.getInitialTableColumnVisibility = exports.sortingFn = exports.isColumnSortActive = exports.isClientFilteringEnabled = exports.isAnyRowSelected = exports.getTableSortLabelProps = exports.getPinnedCellIndex = exports.getInitialTableStateSorting = exports.getInitialState = exports.getGridTemplateColumns = exports.getFacetedUniqueValuesWithArrayValues = exports.getEditColumnOptions = exports.generateDownloadBlob = exports.getColumnSortDirection = exports.buildCategoryViews = exports.arrIncludesSome = void 0;
 const SouthRounded_1 = __importDefault(require("@mui/icons-material/SouthRounded"));
 const react_table_1 = require("@tanstack/react-table");
 const useExploreMode_1 = require("../../../hooks/useExploreMode");
@@ -262,6 +262,17 @@ function getVisibleHeadersTableData(rows) {
 function getVisibleRowsTableData(rows) {
     return rows.map((row) => row.getVisibleCells().map((cell) => cell.getValue()));
 }
+/**
+ * Returns true if any or all table rows are selected.
+ * @param table - Table.
+ * @returns true if a row is selected.
+ */
+function isAnyRowSelected(table) {
+    const { getIsAllPageRowsSelected, getIsSomePageRowsSelected, options: { enableRowSelection }, } = table;
+    return Boolean(enableRowSelection &&
+        (getIsSomePageRowsSelected() || getIsAllPageRowsSelected()));
+}
+exports.isAnyRowSelected = isAnyRowSelected;
 /**
  * Returns true if client-side filtering is enabled.
  * @param exploreMode - Explore mode.

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.js

@@ -41,8 +41,8 @@ const CheckboxMenu = ({ label: buttonLabel, onReset, options, }) => {
         setAnchorEl(null);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(dropdownButton_1.DropdownButton, { onClick: onOpenMenu }, buttonLabel),
-        react_1.default.createElement(checkboxMenu_styles_1.CheckboxMenu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+        react_1.default.createElement(dropdownButton_1.DropdownButton, { onClick: onOpenMenu, open: open }, buttonLabel),
+        react_1.default.createElement(checkboxMenu_styles_1.Menu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
                 horizontal: "right",
                 vertical: "top",
             } },

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.styles.d.ts

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

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.styles.js

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxMenu = void 0;
+exports.Menu = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const material_1 = require("@mui/material");
-exports.CheckboxMenu = (0, styled_1.default)(material_1.Menu) `
+exports.Menu = (0, styled_1.default)(material_1.Menu) `
   .MuiPaper-menu {
-    margin: 8px 0;
+    margin: 4px 0;
   }
 
   // List item button

package/lib/components/Table/components/TableCell/common/utils.d.ts

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

package/lib/components/Table/components/TableCell/common/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTableCellPadding = void 0;
+const constants_1 = require("../../../../TableCreator/common/constants");
+/**
+ * Returns table cell padding based on the cell ID.
+ * @param id - Cell ID.
+ * @returns table cell padding.
+ */
+function getTableCellPadding(id) {
+    if (id === constants_1.ACCESSOR_KEYS.SELECT) {
+        return "checkbox";
+    }
+}
+exports.getTableCellPadding = getTableCellPadding;

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Row } from "@tanstack/react-table";
+export interface RowSelectionCellProps<T> {
+    row: Row<T>;
+}
+export declare const RowSelectionCell: <T extends unknown>({ row, }: RowSelectionCellProps<T>) => JSX.Element;

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowSelectionCell = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const checkedIcon_1 = require("../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon");
+const uncheckedIcon_1 = require("../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon");
+const RowSelectionCell = ({ row, }) => {
+    const { getIsSelected, getToggleSelectedHandler } = row;
+    return (react_1.default.createElement(material_1.Checkbox, { checked: getIsSelected(), checkedIcon: react_1.default.createElement(checkedIcon_1.CheckedIcon, null), icon: react_1.default.createElement(uncheckedIcon_1.UncheckedIcon, null), onChange: getToggleSelectedHandler() }));
+};
+exports.RowSelectionCell = RowSelectionCell;

package/lib/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Table } from "@tanstack/react-table";
+export interface HeadSelectionCellProps<T> {
+    tableInstance: Table<T>;
+}
+export declare const HeadSelectionCell: <T extends unknown>({ tableInstance, }: HeadSelectionCellProps<T>) => JSX.Element;

package/lib/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeadSelectionCell = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const checkedIcon_1 = require("../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon");
+const indeterminateIcon_1 = require("../../../../../common/CustomIcon/components/IndeterminateIcon/indeterminateIcon");
+const uncheckedIcon_1 = require("../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon");
+const HeadSelectionCell = ({ tableInstance, }) => {
+    const { getIsAllPageRowsSelected, getIsSomePageRowsSelected, getToggleAllRowsSelectedHandler, } = tableInstance;
+    return (react_1.default.createElement(material_1.Checkbox, { checked: getIsAllPageRowsSelected(), checkedIcon: react_1.default.createElement(checkedIcon_1.CheckedIcon, null), icon: react_1.default.createElement(uncheckedIcon_1.UncheckedIcon, null), indeterminate: getIsSomePageRowsSelected(), indeterminateIcon: react_1.default.createElement(indeterminateIcon_1.IndeterminateIcon, null), onChange: getToggleAllRowsSelectedHandler() }));
+};
+exports.HeadSelectionCell = HeadSelectionCell;

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

@@ -29,10 +29,10 @@ const react_table_1 = require("@tanstack/react-table");
 const react_1 = __importStar(require("react"));
 const entities_1 = require("../../common/entities");
 const utils_1 = require("../../common/utils");
+const utils_2 = require("../TableCell/common/utils");
 const TableHead = ({ rowDirection, tableInstance, }) => {
     return (react_1.default.createElement(react_1.Fragment, null, rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
         tableInstance.getHeaderGroups().map((headerGroup) => (react_1.default.createElement(material_1.TableHead, { key: headerGroup.id },
-            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => (react_1.default.createElement(material_1.TableCell, { key: header.id },
-                react_1.default.createElement(material_1.TableSortLabel, Object.assign({}, (0, utils_1.getTableSortLabelProps)(header.column)), (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext())))))))))));
+            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => (react_1.default.createElement(material_1.TableCell, { key: header.id, padding: (0, utils_2.getTableCellPadding)(header.id) }, header.column.getCanSort() ? (react_1.default.createElement(material_1.TableSortLabel, Object.assign({}, (0, utils_1.getTableSortLabelProps)(header.column)), (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))) : ((0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext())))))))))));
 };
 exports.TableHead = TableHead;

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

@@ -27,15 +27,14 @@ exports.TableRows = void 0;
 const material_1 = require("@mui/material");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = __importStar(require("react"));
+const utils_1 = require("../TableCell/common/utils");
 const TableRows = ({ tableInstance, virtualizer, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
     const virtualItems = virtualizer.getVirtualItems();
     return (react_1.default.createElement(react_1.Fragment, null, virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
-        return (react_1.default.createElement(material_1.TableRow, { key: row.id, "data-index": virtualRow.index, ref: virtualizer.measureElement }, row.getVisibleCells().map((cell) => {
-            return (react_1.default.createElement(material_1.TableCell, { key: cell.id }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())));
-        })));
+        return (react_1.default.createElement(material_1.TableRow, { key: row.id, "data-index": virtualRow.index, ref: virtualizer.measureElement }, row.getVisibleCells().map((cell) => (react_1.default.createElement(material_1.TableCell, { key: cell.id, padding: (0, utils_1.getTableCellPadding)(cell.column.id) }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()))))));
     })));
 };
 exports.TableRows = TableRows;

package/lib/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DropdownMenuItemProps } from "../../../../../../../common/DropdownMenu/common/entities";
+import { DropdownMenuProps as DXDropdownMenuProps } from "../../../../../../../common/DropdownMenu/dropdownMenu";
+export interface DropdownMenuProps {
+    Button?: DXDropdownMenuProps["Button"];
+    buttonLabel?: string;
+    children: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
+    className?: string;
+}
+export declare const DropdownMenu: ({ Button, buttonLabel, children, className, ...props }: DropdownMenuProps) => JSX.Element;

package/lib/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.js

@@ -0,0 +1,37 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = void 0;
+const react_1 = __importDefault(require("react"));
+const dropdownButton_1 = require("../../../../../../../common/Button/components/DropdownButton/dropdownButton");
+const dropdownMenu_styles_1 = require("./dropdownMenu.styles");
+const DEFAULT_MENU_PROPS = {
+    anchorOrigin: { horizontal: "left", vertical: "bottom" },
+    transformOrigin: { horizontal: "left", vertical: "top" },
+};
+const DropdownMenu = (_a) => {
+    var { Button = (props) => renderButton(Object.assign({ children: buttonLabel }, props)), buttonLabel = "Edit", children, className } = _a, props = __rest(_a, ["Button", "buttonLabel", "children", "className"]) /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */;
+    return (react_1.default.createElement(dropdownMenu_styles_1.DropdownMenu, Object.assign({}, DEFAULT_MENU_PROPS, { className: className, Button: Button }, props), ({ closeMenu }) => children({ closeMenu })));
+};
+exports.DropdownMenu = DropdownMenu;
+/**
+ * Return the dropdown button.
+ * @param props - Button props e.g. "onClick".
+ * @returns button element.
+ */
+function renderButton(props) {
+    return react_1.default.createElement(dropdownButton_1.DropdownButton, Object.assign({}, props));
+}

package/lib/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const DropdownMenu: import("@emotion/styled").StyledComponent<import("../../../../../../../common/DropdownMenu/dropdownMenu").DropdownMenuProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const dropdownMenu_1 = require("../../../../../../../common/DropdownMenu/dropdownMenu");
+exports.DropdownMenu = (0, styled_1.default)(dropdownMenu_1.DropdownMenu) `
+  .MuiPaper-menu {
+    min-width: 288px;
+  }
+`;

package/lib/components/Table/components/TableToolbar/components/RowSelection/rowSelection.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Row } from "@tanstack/react-table";
+import { ComponentsConfig } from "../../../../../../config/entities";
+export interface RowSelectionProps<T> {
+    className?: string;
+    rows: Row<T>[];
+    rowSelectionView?: ComponentsConfig;
+}
+export declare const RowSelection: <T extends object>({ className, rows, rowSelectionView, }: RowSelectionProps<T>) => JSX.Element | null;

package/lib/components/Table/components/TableToolbar/components/RowSelection/rowSelection.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowSelection = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../../../../theme/common/typography");
+const ComponentCreator_1 = require("../../../../../ComponentCreator/ComponentCreator");
+const rowSelection_styles_1 = require("./rowSelection.styles");
+const RowSelection = ({ className, rows, rowSelectionView, }) => {
+    return (react_1.default.createElement(rowSelection_styles_1.RowSelection, { className: className },
+        react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 },
+            rows.length,
+            " items selected:"),
+        rowSelectionView ? (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: rowSelectionView, response: rows })) : null));
+};
+exports.RowSelection = RowSelection;

package/lib/components/Table/components/TableToolbar/components/RowSelection/rowSelection.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const RowSelection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Table/components/TableToolbar/components/RowSelection/rowSelection.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowSelection = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.RowSelection = styled_1.default.div `
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-start;
+`;

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

@@ -30,14 +30,14 @@ const entities_1 = require("../../common/entities");
 const utils_1 = require("../../common/utils");
 const checkboxMenu_1 = require("../CheckboxMenu/checkboxMenu");
 const downloadEntityResults_1 = require("../DownloadEntityResults/downloadEntityResults");
-const entityViewToggle_1 = require("../EntityViewToggle/entityViewToggle");
 const paginationSummary_1 = require("../PaginationSummary/paginationSummary");
+const rowSelection_1 = require("./components/RowSelection/rowSelection");
 const tableToolbar_styles_1 = require("./tableToolbar.styles");
 const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
     const { exploreState } = (0, useExploreState_1.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 = (0, utils_1.getEditColumnOptions)(tableInstance);
@@ -49,8 +49,8 @@ const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
     const onResetColumnVisibility = () => {
         resetColumnVisibility(false);
     };
-    return (react_1.default.createElement(react_1.Fragment, null, showToolbar && (react_1.default.createElement(tableToolbar_styles_1.TableToolbar, null,
-        relatedListItems ? (react_1.default.createElement(entityViewToggle_1.EntityViewToggle, null)) : (react_1.default.createElement(paginationSummary_1.PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: isLastPage ? rows : pageSize * currentPage, totalResult: rows })),
+    return (react_1.default.createElement(react_1.Fragment, null, showToolbar && (react_1.default.createElement(tableToolbar_styles_1.Toolbar, { variant: "table" },
+        (0, utils_1.isAnyRowSelected)(tableInstance) ? (react_1.default.createElement(rowSelection_1.RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView === null || listView === void 0 ? void 0 : listView.rowSelectionView })) : (react_1.default.createElement(paginationSummary_1.PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: isLastPage ? rows : pageSize * currentPage, totalResult: rows })),
         react_1.default.createElement(tableToolbar_styles_1.ToolbarActions, null,
             enableDownload && (react_1.default.createElement(downloadEntityResults_1.DownloadEntityResults, { entityName: exploreState.tabValue, rows: tableInstance.getFilteredRowModel().rows })),
             react_1.default.createElement(checkboxMenu_1.CheckboxMenu, { label: "Edit Columns", onReset: onResetColumnVisibility, options: editColumnOptions }))))));

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

@@ -1,8 +1,4 @@
-/// <reference types="react" />
-export declare const TableToolbar: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Toolbar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ToolbarTypeMap<{}, "div">>;
 export declare const ToolbarActions: import("@emotion/styled").StyledComponent<import("../../../common/Grid/grid").GridProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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

@@ -3,16 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarActions = exports.TableToolbar = void 0;
+exports.ToolbarActions = exports.Toolbar = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
 const colors_1 = require("../../../../styles/common/mixins/colors");
 const grid_1 = require("../../../common/Grid/grid");
-exports.TableToolbar = styled_1.default.div `
-  align-items: center;
-  background-color: ${colors_1.white};
-  display: flex;
-  justify-content: space-between;
-  padding: 20px;
+exports.Toolbar = (0, styled_1.default)(material_1.Toolbar) `
+  &.MuiToolbar-table {
+    align-items: center;
+    background-color: ${colors_1.white};
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+  }
 `;
 exports.ToolbarActions = (0, styled_1.default)(grid_1.Grid) `
   gap: 8px;

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { ColumnDef, InitialTableState } from "@tanstack/react-table";
+import { CoreOptions } from "@tanstack/table-core";
 import { Pagination } from "../../common/entities";
 import { ListViewConfig } from "../../config/entities";
 export interface TableProps<T extends object> {
     columns: ColumnDef<T>[];
     count?: number;
+    getRowId?: CoreOptions<T>["getRowId"];
     initialState: InitialTableState;
     items: T[];
     listView?: ListViewConfig;
@@ -20,11 +22,12 @@ 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.
  * @param tableProps.total - Total number of rows in the result set.
  * @returns Configured table element for display.
  */
-export declare const TableComponent: <T extends object>({ columns, initialState, items, listView, total, }: TableProps<T>) => JSX.Element;
-export declare const Table: <T extends object>({ columns, initialState, items, listView, total, }: TableProps<T>) => JSX.Element;
+export declare const TableComponent: <T extends object>({ columns, getRowId, initialState, items, listView, total, }: TableProps<T>) => JSX.Element;
+export declare const Table: <T extends object>({ columns, getRowId, initialState, items, listView, total, }: TableProps<T>) => JSX.Element;