@databiosphere/findable-ui 2.2.0 → 3.0.0

package/lib/components/Table/table.js

@@ -51,18 +51,19 @@ const table_styles_1 = require("./table.styles");
  * 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.
  */
-const TableComponent = ({ columns, initialState, items, listView, total, }) => {
+const TableComponent = ({ columns, getRowId, initialState, items, listView, total, }) => {
     const tabletDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.TABLET);
     const exploreMode = (0, useExploreMode_1.useExploreMode)();
     const { exploreDispatch, exploreState } = (0, useExploreState_1.useExploreState)();
     const { entityPageState, filterState, isRelatedView, listItems, loading, 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 = (0, utils_1.isClientFilteringEnabled)(exploreMode);
@@ -89,12 +90,19 @@ const TableComponent = ({ columns, initialState, items, listView, total, }) => {
             type: exploreState_1.ExploreActionKind.UpdateColumnVisibility,
         });
     };
+    const onRowSelectionChange = (updater) => {
+        exploreDispatch({
+            payload: typeof updater === "function" ? updater(rowSelection) : updater,
+            type: exploreState_1.ExploreActionKind.UpdateRowSelection,
+        });
+    };
     const state = {
         columnVisibility: columnsVisibility,
         pagination: {
             pageIndex: 0,
             pageSize: disablePagination ? Number.MAX_SAFE_INTEGER : pageSize,
         },
+        rowSelection,
         sorting,
     };
     const tableInstance = (0, react_table_1.useReactTable)({
@@ -103,6 +111,7 @@ const TableComponent = ({ columns, initialState, items, listView, total, }) => {
         enableColumnFilters: true,
         enableFilters: true,
         enableMultiSort: false,
+        enableRowSelection,
         enableSorting: true,
         enableSortingRemoval: false,
         getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
@@ -112,11 +121,13 @@ const TableComponent = ({ columns, initialState, items, listView, total, }) => {
             : undefined,
         getFilteredRowModel: clientFiltering ? (0, react_table_1.getFilteredRowModel)() : undefined,
         getPaginationRowModel: (0, react_table_1.getPaginationRowModel)(),
+        getRowId,
         getSortedRowModel: clientFiltering ? (0, react_table_1.getSortedRowModel)() : undefined,
         initialState,
         manualPagination: clientFiltering,
         manualSorting: !clientFiltering,
         onColumnVisibilityChange,
+        onRowSelectionChange,
         onSortingChange,
         pageCount: total,
         state,

package/lib/components/TableCreator/common/constants.d.ts

@@ -0,0 +1,6 @@
+import { RowData } from "@tanstack/react-table";
+import { BaseColumnConfig } from "./entities";
+export declare const ACCESSOR_KEYS: {
+    SELECT: string;
+};
+export declare const COLUMN_CONFIGS: Record<string, BaseColumnConfig<RowData, unknown>>;

package/lib/components/TableCreator/common/constants.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLUMN_CONFIGS = exports.ACCESSOR_KEYS = void 0;
+const rowSelectionCell_1 = require("../../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell");
+exports.ACCESSOR_KEYS = {
+    SELECT: "select",
+};
+exports.COLUMN_CONFIGS = {
+    SELECT: {
+        columnPinned: false,
+        columnVisible: false,
+        componentConfig: { component: rowSelectionCell_1.RowSelectionCell },
+        disableHiding: true,
+        disableSorting: true,
+        header: exports.ACCESSOR_KEYS.SELECT,
+        id: exports.ACCESSOR_KEYS.SELECT,
+        meta: {
+            header: "",
+        },
+        width: "max-content",
+    },
+};

package/lib/components/TableCreator/common/entities.d.ts

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

package/lib/components/TableCreator/common/entities.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,8 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumnConfig } from "./entities";
+/**
+ * Builds a base column definition.
+ * @param baseColumnConfig - Base column configuration.
+ * @returns column definition.
+ */
+export declare function buildBaseColumnDef<T, TValue>(baseColumnConfig: BaseColumnConfig<T, TValue>): ColumnDef<T>;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildBaseColumnDef = void 0;
+/**
+ * Builds a base column definition.
+ * @param baseColumnConfig - Base column configuration.
+ * @returns column definition.
+ */
+function buildBaseColumnDef(baseColumnConfig) {
+    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,
+        },
+    };
+}
+exports.buildBaseColumnDef = buildBaseColumnDef;

package/lib/components/TableCreator/tableCreator.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { ColumnSort } from "@tanstack/react-table";
+import { CoreOptions } from "@tanstack/table-core";
 import { Pagination } from "../../common/entities";
 import { ColumnConfig, ListViewConfig } from "../../config/entities";
 export interface TableCreatorProps<T> {
     columns: ColumnConfig<T>[];
     defaultSort: ColumnSort | undefined;
+    getRowId?: CoreOptions<T>["getRowId"];
     items: T[];
     listView?: ListViewConfig;
     loading?: boolean;
@@ -14,4 +16,4 @@ export interface TableCreatorProps<T> {
     pagination?: Pagination;
     total?: number;
 }
-export declare const TableCreator: <T extends object>({ columns, defaultSort, items, listView, loading, pageCount, pages, pageSize, pagination, total, }: TableCreatorProps<T>) => JSX.Element;
+export declare const TableCreator: <T extends object>({ columns, defaultSort, getRowId, items, listView, loading, pageCount, pages, pageSize, pagination, total, }: TableCreatorProps<T>) => JSX.Element;

package/lib/components/TableCreator/tableCreator.js

@@ -22,17 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCreator = void 0;
 const react_1 = __importStar(require("react"));
@@ -40,35 +29,31 @@ const paper_1 = require("../common/Paper/paper");
 const ComponentCreator_1 = require("../ComponentCreator/ComponentCreator");
 const loading_1 = require("../Loading/loading");
 const utils_1 = require("../Table/common/utils");
+const rowSelectionCell_1 = require("../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell");
+const headSelectionCell_1 = require("../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell");
 const table_1 = require("../Table/table");
+const constants_1 = require("./common/constants");
+const utils_2 = require("./common/utils");
 const tableCreator_styles_1 = require("./tableCreator.styles");
-const createCell = (config) => 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- We can't determine the cell type
-function CellCreator({ row }) {
+const createCell = (config) => function CellCreator({ row }) {
     return (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: [config.componentConfig], response: row.original }));
 };
-const TableCreator = ({ columns, defaultSort, items, listView, loading, pageCount, pages, pageSize, pagination, total, }) => {
-    const columnDefs = (0, react_1.useMemo)(() => columns.map((_a) => {
-        var { disableHiding, disableSorting } = _a, columnConfig = __rest(_a, ["disableHiding", "disableSorting"]);
-        return ({
-            accessorKey: columnConfig.id,
-            cell: createCell(columnConfig),
-            enableHiding: !disableHiding,
-            enableSorting: !disableSorting,
-            filterFn: utils_1.arrIncludesSome,
-            header: columnConfig.header,
-            id: columnConfig.id,
-            meta: {
-                columnPinned: columnConfig.columnPinned,
-                header: columnConfig.header,
-                width: columnConfig.width,
-            },
-            sortingFn: utils_1.sortingFn,
-        });
-    }), [columns]);
+const createHeaderSelectionCell = () => function CellCreator({ table }) {
+    return react_1.default.createElement(headSelectionCell_1.HeadSelectionCell, { tableInstance: table });
+};
+const createRowSelectionCell = () => function CellCreator({ row }) {
+    return react_1.default.createElement(rowSelectionCell_1.RowSelectionCell, { row: row });
+};
+const TableCreator = ({ columns, defaultSort, getRowId, items, listView, loading, pageCount, pages, pageSize, pagination, total, }) => {
+    const columnDefs = (0, react_1.useMemo)(() => columns.reduce((acc, columnConfig) => {
+        acc.push(Object.assign(Object.assign({}, (0, utils_2.buildBaseColumnDef)(columnConfig)), { cell: createCell(columnConfig), filterFn: utils_1.arrIncludesSome, sortingFn: utils_1.sortingFn }));
+        return acc;
+    }, [
+        Object.assign(Object.assign({}, (0, utils_2.buildBaseColumnDef)(constants_1.COLUMN_CONFIGS.SELECT)), { cell: createRowSelectionCell(), header: createHeaderSelectionCell() }),
+    ]), [columns]);
     const initialState = (0, utils_1.getInitialState)(columns, defaultSort);
     return (react_1.default.createElement(tableCreator_styles_1.TableCreator, null,
         react_1.default.createElement(loading_1.Loading, { appear: false, loading: loading || false, panelStyle: paper_1.PAPER_PANEL_STYLE.FLUID }),
-        react_1.default.createElement(table_1.Table, { columns: columnDefs, count: pageCount, initialState: initialState, items: items, listView: listView, loading: loading, pages: pages, pageSize: pageSize, pagination: pagination, total: total })));
+        react_1.default.createElement(table_1.Table, { columns: columnDefs, count: pageCount, getRowId: getRowId, initialState: initialState, items: items, listView: listView, loading: loading, pages: pages, pageSize: pageSize, pagination: pagination, total: total })));
 };
 exports.TableCreator = TableCreator;

package/lib/components/common/Alert/components/AlertText/alertText.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const AlertText: 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/common/Alert/components/AlertText/alertText.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertText = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.AlertText = styled_1.default.div `
+  ul {
+    padding-left: 24px;
+    margin: 8px 0;
+
+    li {
+      margin: 4px 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+`;

package/lib/components/common/Button/components/DropdownButton/dropdownButton.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { ButtonProps } from "../../button";
-export declare type DropdownButtonProps = Exclude<ButtonProps, "StartIcon">;
-export declare const DropdownButton: ({ children, disabled, ...props }: DropdownButtonProps) => JSX.Element;
+export interface DropdownButtonProps extends Exclude<ButtonProps, "StartIcon"> {
+    open?: boolean;
+}
+export declare const DropdownButton: ({ children, disabled, open, ...props }: DropdownButtonProps) => JSX.Element;

package/lib/components/common/Button/components/DropdownButton/dropdownButton.js

@@ -19,7 +19,7 @@ const ArrowDropDownRounded_1 = __importDefault(require("@mui/icons-material/Arro
 const react_1 = __importDefault(require("react"));
 const dropdownButton_styles_1 = require("./dropdownButton.styles");
 const DropdownButton = (_a) => {
-    var { children, disabled = false } = _a, props = __rest(_a, ["children", "disabled"]) /* Spread props to allow for Mui ButtonProps specific prop overrides e.g. "onClick". */;
-    return (react_1.default.createElement(dropdownButton_styles_1.DropdownButton, Object.assign({ disabled: disabled, EndIcon: ArrowDropDownRounded_1.default }, props), children));
+    var { children, disabled = false, open = false } = _a, props = __rest(_a, ["children", "disabled", "open"]) /* Spread props to allow for Mui ButtonProps specific prop overrides e.g. "onClick". */;
+    return (react_1.default.createElement(dropdownButton_styles_1.DropdownButton, Object.assign({ disabled: disabled, EndIcon: ArrowDropDownRounded_1.default, open: open }, props), children));
 };
 exports.DropdownButton = DropdownButton;

package/lib/components/common/Button/components/DropdownButton/dropdownButton.styles.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+interface Props {
+    open: boolean;
+}
 export declare const DropdownButton: import("@emotion/styled").StyledComponent<Omit<import("../../button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+} & Props, {}, {}>;
+export {};

package/lib/components/common/Button/components/DropdownButton/dropdownButton.styles.js

@@ -1,16 +1,39 @@
 "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.DropdownButton = void 0;
+const react_1 = require("@emotion/react");
 const styled_1 = __importDefault(require("@emotion/styled"));
+const colors_1 = require("../../../../../styles/common/mixins/colors");
 const buttonSecondary_1 = require("../ButtonSecondary/buttonSecondary");
 // Dropdown button with "secondary" styles.
-exports.DropdownButton = (0, styled_1.default)(buttonSecondary_1.ButtonSecondary) `
+exports.DropdownButton = (0, styled_1.default)(buttonSecondary_1.ButtonSecondary, {
+    shouldForwardProp: (prop) => prop !== "open",
+}) `
   padding-right: 8px;
 
   .MuiButton-endIcon {
     margin-left: -6px;
   }
+
+  ${(_a) => {
+    var { open } = _a, props = __rest(_a, ["open"]);
+    return open &&
+        (0, react_1.css) `
+      background-color: ${(0, colors_1.smokeLightest)(props)};
+    `;
+}}
 `;

package/lib/components/common/CustomIcon/components/IndeterminateIcon/indeterminateIcon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CustomSVGIconProps } from "../../common/entities";
+/**
+ * Custom indeterminate icon.
+ */
+export declare const IndeterminateIcon: ({ fontSize, viewBox, ...props }: CustomSVGIconProps) => JSX.Element;

package/lib/components/common/CustomIcon/components/IndeterminateIcon/indeterminateIcon.js

@@ -0,0 +1,29 @@
+"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.IndeterminateIcon = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+/**
+ * Custom indeterminate icon.
+ */
+const IndeterminateIcon = (_a) => {
+    var { fontSize = "xsmall", viewBox = "0 0 18 18" } = _a, props = __rest(_a, ["fontSize", "viewBox"]) /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */;
+    return (react_1.default.createElement(material_1.SvgIcon, Object.assign({ fontSize: fontSize, viewBox: viewBox }, props),
+        react_1.default.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H14C16.2091 0 18 1.79086 18 4V14C18 16.2091 16.2091 18 14 18H4C1.79086 18 0 16.2091 0 14V4Z", fill: "currentColor" }),
+        react_1.default.createElement("rect", { x: "5", y: "8", width: "8", height: "2", rx: "1", fill: "white" })));
+};
+exports.IndeterminateIcon = IndeterminateIcon;

package/lib/components/common/Dialog/dialog.d.ts

@@ -0,0 +1,7 @@
+import { DialogProps as MDialogProps } from "@mui/material";
+import { ReactNode } from "react";
+export interface DialogProps extends MDialogProps {
+    children: ReactNode | ReactNode[];
+    className?: string;
+}
+export declare const Dialog: ({ children, className, onClose, open, ...props }: DialogProps) => JSX.Element;

package/lib/components/common/Dialog/dialog.js

@@ -0,0 +1,24 @@
+"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.Dialog = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const Dialog = (_a) => {
+    var { children, className, onClose, open } = _a, props = __rest(_a, ["children", "className", "onClose", "open"]) /* Spread props to allow for Mui Dialog specific prop overrides e.g. "fullWidth". */;
+    return (react_1.default.createElement(material_1.Dialog, Object.assign({ className: className, onClose: onClose, open: open }, props), children));
+};
+exports.Dialog = Dialog;

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

@@ -0,0 +1,2 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+export declare const DEFAULT_DROPDOWN_MENU_PROPS: Partial<MMenuProps>;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_DROPDOWN_MENU_PROPS = void 0;
+exports.DEFAULT_DROPDOWN_MENU_PROPS = {
+    anchorOrigin: { horizontal: "right", vertical: "bottom" },
+    slotProps: { paper: { variant: "menu" } },
+    transformOrigin: { horizontal: "right", vertical: "top" },
+};

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

@@ -0,0 +1,10 @@
+import { ButtonProps as MButtonProps, IconButtonProps as MIconButtonProps } from "@mui/material";
+export interface DropdownMenuItemProps {
+    closeMenu: () => void;
+}
+export declare type DropdownMenuButtonProps = MButtonProps & {
+    open?: boolean;
+};
+export declare type DropdownMenuIconButtonProps = MIconButtonProps & {
+    open?: boolean;
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/components/common/DropdownMenu/components/MenuItem/menuItem.d.ts

@@ -0,0 +1,7 @@
+import { MenuItemProps as MMenuItemProps } from "@mui/material";
+import { ReactNode } from "react";
+export interface MenuItemProps extends MMenuItemProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const MenuItem: ({ children, className, onClick, ...props }: MenuItemProps) => JSX.Element;

package/lib/components/common/DropdownMenu/components/MenuItem/menuItem.js

@@ -0,0 +1,25 @@
+"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.MenuItem = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const MenuItem = (_a) => {
+    var { children, className, onClick } = _a, props = __rest(_a, ["children", "className", "onClick"]) /* Spread props to allow for Mui MenuItem specific prop overrides e.g. "disableGutters". */;
+    return (react_1.default.createElement(material_1.MenuItem, Object.assign({ className: className, onClick: onClick }, props),
+        react_1.default.createElement(material_1.ListItemText, { disableTypography: true }, children)));
+};
+exports.MenuItem = MenuItem;

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

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

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

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = void 0;
+const react_1 = __importStar(require("react"));
+const constants_1 = require("./common/constants");
+const dropdownMenu_styles_1 = require("./dropdownMenu.styles");
+const DropdownMenu = (_a) => {
+    var { Button, children, className } = _a, props = __rest(_a, ["Button", "children", "className"]) /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */;
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const closeMenu = () => setAnchorEl(null);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(Button, { onClick: (event) => setAnchorEl(event.currentTarget), open: Boolean(anchorEl) }),
+        react_1.default.createElement(dropdownMenu_styles_1.Menu, Object.assign({}, constants_1.DEFAULT_DROPDOWN_MENU_PROPS, { anchorEl: anchorEl, className: className, onClose: closeMenu, open: Boolean(anchorEl) }, props), children ? children({ closeMenu }) : null)));
+};
+exports.DropdownMenu = DropdownMenu;

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

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

package/lib/components/common/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.Menu = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+exports.Menu = (0, styled_1.default)(material_1.Menu) `
+  .MuiPaper-menu {
+    margin: 4px 0;
+  }
+`;

package/lib/components/common/IconButton/iconButton.d.ts

@@ -1,4 +1,4 @@
-import { IconButtonProps as MIconButtonProps } from "@mui/material";
+import { IconButtonProps as MIconButtonProps, IconProps as MIconProps } from "@mui/material";
 import { ElementType } from "react";
 /**
  * Basic icon button component.
@@ -6,7 +6,8 @@ import { ElementType } from "react";
  */
 export interface IconButtonProps extends MIconButtonProps {
     className?: string;
-    disabled?: boolean;
     Icon: ElementType;
+    iconProps?: MIconProps;
+    open?: boolean;
 }
-export declare const IconButton: ({ className, disabled, Icon, ...props }: IconButtonProps) => JSX.Element;
+export declare const IconButton: ({ className, Icon, iconProps, open, size, ...props }: IconButtonProps) => JSX.Element;

package/lib/components/common/IconButton/iconButton.js

@@ -15,11 +15,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = void 0;
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
+const iconButton_styles_1 = require("./iconButton.styles");
 const IconButton = (_a) => {
-    var { className, disabled = false, Icon } = _a, props = __rest(_a, ["className", "disabled", "Icon"]) /* Spread props to allow for Mui IconButtonProps specific prop overrides e.g. "onClick". */;
-    return (react_1.default.createElement(material_1.IconButton, Object.assign({ className: className, disabled: disabled, size: "large" }, props),
-        react_1.default.createElement(Icon, { fontSize: "small" })));
+    var { className, Icon, iconProps = { fontSize: "small" }, open = false, size = "large" } = _a, props = __rest(_a, ["className", "Icon", "iconProps", "open", "size"]) /* Spread props to allow for Mui IconButtonProps specific prop overrides e.g. "onClick". */;
+    return (react_1.default.createElement(iconButton_styles_1.Button, Object.assign({ className: className, open: open, size: size }, props),
+        react_1.default.createElement(Icon, Object.assign({}, iconProps))));
 };
 exports.IconButton = IconButton;