@databiosphere/findable-ui 24.0.0 → 25.1.0

package/lib/components/Loading/loading.d.ts

@@ -13,9 +13,10 @@ export declare enum LOADING_PANEL_STYLE {
 }
 export interface LoadingProps {
     appear?: boolean;
+    autoPosition?: boolean;
     iconSize?: SvgIconProps["fontSize"];
     loading: boolean;
     panelStyle?: LoadingPanelStyle;
     text?: string;
 }
-export declare const Loading: ({ appear, iconSize, loading, panelStyle, text, }: LoadingProps) => JSX.Element | null;
+export declare const Loading: ({ appear, autoPosition, iconSize, loading, panelStyle, text, }: LoadingProps) => JSX.Element | null;

package/lib/components/Loading/loading.js

@@ -10,8 +10,8 @@ export var LOADING_PANEL_STYLE;
 (function (LOADING_PANEL_STYLE) {
     LOADING_PANEL_STYLE["INHERIT"] = "INHERIT";
 })(LOADING_PANEL_STYLE || (LOADING_PANEL_STYLE = {}));
-export const Loading = ({ appear = true, iconSize = "large", loading, panelStyle = PAPER_PANEL_STYLE.ROUNDED, text, }) => {
-    return (React.createElement(Fade, { appear: appear, in: loading, mountOnEnter: true, onEnter: (node) => onFadeEnter(node), onExited: (node) => onFadeExited(node), timeout: 300, unmountOnExit: true },
+export const Loading = ({ appear = true, autoPosition = true, iconSize = "large", loading, panelStyle = PAPER_PANEL_STYLE.ROUNDED, text, }) => {
+    return (React.createElement(Fade, { appear: appear, in: loading, mountOnEnter: true, onEnter: autoPosition ? onFadeEnter : undefined, onExited: autoPosition ? onFadeExited : undefined, timeout: 300, unmountOnExit: true },
         React.createElement(LoadingPositioner, { panelStyle: panelStyle },
             React.createElement(LoadingPaper, { panelStyle: panelStyle },
                 React.createElement(LoadingIcon, { color: "primary", fontSize: iconSize }),

package/lib/components/Login/components/Button/button.styles.d.ts

@@ -1,5 +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" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & {
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Login/components/Section/components/Consent/consent.js

@@ -4,11 +4,11 @@ import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedErrorIcon } from "../../../../../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
-import { StyledGrid2 } from "./consent.styles";
-export const Consent = ({ children, className, handleConsent, isDisabled, isError, ...props /* Mui Grid2Props */ }) => {
+import { StyledGrid } from "./consent.styles";
+export const Consent = ({ children, className, handleConsent, isDisabled, isError, ...props /* Mui GridProps */ }) => {
     if (isDisabled)
         return null;
-    return (React.createElement(StyledGrid2, { className: className, ...props },
+    return (React.createElement(StyledGrid, { className: className, ...props },
         React.createElement(Checkbox, { checkedIcon: React.createElement(CheckedIcon, null), icon: isError ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: handleConsent }),
         React.createElement(Typography, { variant: TEXT_BODY_400 }, children)));
 };

package/lib/components/Login/components/Section/components/Consent/consent.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const StyledGrid2: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+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;

package/lib/components/Login/components/Section/components/Consent/consent.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
-import { Grid2 } from "@mui/material";
-export const StyledGrid2 = styled(Grid2) `
+import { Grid } from "@mui/material";
+export const StyledGrid = styled(Grid) `
   align-items: center;
   align-self: flex-start;
   display: flex;

package/lib/components/Login/components/Section/components/Consent/types.d.ts

@@ -1,6 +1,6 @@
-import { Grid2Props } from "@mui/material";
+import { GridProps } from "@mui/material";
 import { ReactNode } from "react";
 import { UseUserConsent } from "../../../../hooks/useUserConsent/types";
-export interface ConsentProps extends Grid2Props, Pick<UseUserConsent, "handleConsent">, Pick<UseUserConsent["state"], "isDisabled" | "isError"> {
+export interface ConsentProps extends GridProps, Pick<UseUserConsent, "handleConsent">, Pick<UseUserConsent["state"], "isDisabled" | "isError"> {
     children: ReactNode;
 }

package/lib/components/NoResults/noResults.d.ts

@@ -1,9 +1,2 @@
-import { ReactNode } from "react";
-import { FlatPaper, FluidPaper, RoundedPaper } from "../common/Paper/paper.styles";
-export interface NoResultsProps {
-    actions?: ReactNode;
-    description?: string;
-    Paper?: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper;
-    title: string;
-}
+import { NoResultsProps } from "./types";
 export declare const NoResults: ({ actions, description, Paper, title, }: NoResultsProps) => JSX.Element;

package/lib/components/NoResults/noResults.js

@@ -1,17 +1,18 @@
 import { Typography } from "@mui/material";
-import React from "react";
+import React, { Fragment } from "react";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { SearchOffIcon } from "../common/CustomIcon/components/SearchOffIcon/searchOffIcon";
-import { RoundedPaper, } from "../common/Paper/paper.styles";
 import { SectionTitle } from "../common/Section/components/SectionTitle/sectionTitle";
 import { SectionActions } from "../common/Section/section.styles";
 import { PRIORITY, StatusIcon } from "../common/StatusIcon/statusIcon";
-import { NoResultsSection, NoResultsSectionContent } from "./noResults.styles";
-export const NoResults = ({ actions, description, Paper = RoundedPaper, title, }) => {
-    return (React.createElement(Paper, null,
-        React.createElement(NoResultsSection, null,
+import { StyledSection, StyledSectionContent } from "./noResults.styles";
+export const NoResults = ({ actions, description, Paper, title, }) => {
+    const StyledPaper = Paper ?? Fragment;
+    return (React.createElement(StyledPaper, null,
+        React.createElement(StyledSection, null,
             React.createElement(StatusIcon, { priority: PRIORITY.LOW, StatusIcon: SearchOffIcon }),
-            React.createElement(NoResultsSectionContent, null,
+            React.createElement(StyledSectionContent, null,
                 React.createElement(SectionTitle, { title: title }),
-                description && (React.createElement(Typography, { color: "ink.light", variant: "text-body-400-2lines" }, description))),
+                description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, description))),
             actions && React.createElement(SectionActions, null, actions))));
 };

package/lib/components/NoResults/noResults.styles.d.ts

@@ -1,10 +1,10 @@
-export declare const NoResultsSection: import("@emotion/styled").StyledComponent<{
+export declare const StyledSection: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const NoResultsSectionContent: import("@emotion/styled").StyledComponent<{
+export declare const StyledSectionContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {

package/lib/components/NoResults/noResults.styles.js

@@ -1,10 +1,12 @@
 import styled from "@emotion/styled";
+import { white } from "../../styles/common/mixins/colors";
 import { Section, SectionContent } from "../common/Section/section.styles";
-export const NoResultsSection = styled(Section) `
+export const StyledSection = styled(Section) `
   align-items: center;
+  background-color: ${white};
   padding: 40px !important; /* Overrides section padding. */
 `;
-export const NoResultsSectionContent = styled(SectionContent) `
+export const StyledSectionContent = styled(SectionContent) `
   max-width: 456px;
   text-align: center;
 `;

package/lib/components/NoResults/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { FlatPaper, FluidPaper, RoundedPaper } from "../common/Paper/paper.styles";
+export interface NoResultsProps {
+    actions?: ReactNode;
+    description?: string;
+    Paper: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper | null;
+    title: string;
+}

package/lib/components/NoResults/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Plot/components/BarX/barX.d.ts

@@ -0,0 +1,2 @@
+import { BarXProps } from "./types";
+export declare const BarX: ({ className, options, testId, }: BarXProps) => JSX.Element;

package/lib/components/Plot/components/BarX/barX.js

@@ -0,0 +1,13 @@
+import * as Plot from "@observablehq/plot";
+import React, { useEffect, useRef } from "react";
+export const BarX = ({ className, options, testId, }) => {
+    const chartRef = useRef(null);
+    useEffect(() => {
+        if (chartRef.current)
+            chartRef.current.innerHTML = "";
+        const chart = Plot.plot(options);
+        chartRef.current?.appendChild(chart);
+        return () => chart.remove();
+    }, [options]);
+    return React.createElement("div", { className: className, "data-testid": testId, ref: chartRef });
+};

package/lib/components/Plot/components/BarX/types.d.ts

@@ -0,0 +1,5 @@
+import { PlotOptions } from "@observablehq/plot";
+import { BaseComponentProps, TestIdProps } from "../../../types";
+export interface BarXProps extends BaseComponentProps, TestIdProps {
+    options?: PlotOptions;
+}

package/lib/components/Plot/components/BarX/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Stepper/components/Step/components/StepContent/stepContent.js

@@ -1,7 +1,7 @@
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import React from "react";
 import { StyledStepContent } from "./stepContent.styles";
 export const StepContent = ({ children, className, ...props /* MuiStepContentProps */ }) => {
     return (React.createElement(StyledStepContent, { className: className, ...props },
-        React.createElement(Grid2, null, children)));
+        React.createElement(Grid, null, children)));
 };

package/lib/components/Stepper/components/Step/components/StepContent/stepContent.styles.js

@@ -5,7 +5,7 @@ import { sectionPadding } from "../../../../../common/Section/section.styles";
 export const StyledStepContent = styled(StepContent) `
   &.MuiStepContent-root {
     .MuiCollapse-wrapperInner.MuiCollapse-vertical {
-      > .MuiGrid2-root {
+      > .MuiGrid-root {
         ${sectionPadding};
         border-top: 1px solid ${smokeMain};
         display: grid;

package/lib/components/Stepper/components/Step/step.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledStep: import("@emotion/styled").StyledComponent<import("@mui/material").StepOwnProps & 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" | "disabled" | "expanded" | "active" | "last" | "completed" | "index"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "disabled" | "expanded" | "index" | "active" | "last" | "completed"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Support/components/SupportRequest/components/Dialog/dialog.js

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import React, { useState, } from "react";
 import { FeedbackIcon } from "../../../../../common/CustomIcon/components/FeedbackIcon/feedbackIcon";
 import { Fab, Popover } from "./dialog.styles";
@@ -12,7 +12,7 @@ export const FormDialog = ({ children, setFormSubmitted, }) => {
         setAnchorEl(null);
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Fab, { color: "primary", onClick: toggleOpen, open: open, size: "medium" }, open ? React.createElement(CloseRoundedIcon, null) : React.createElement(FeedbackIcon, { fontSize: "medium" })),
+        React.createElement(Fab, { color: "primary", onClick: toggleOpen, open: open, size: "medium" }, open ? React.createElement(CloseRounded, null) : React.createElement(FeedbackIcon, { fontSize: "medium" })),
         React.createElement(Popover, { anchorEl: anchorEl, anchorOrigin: {
                 horizontal: "right",
                 vertical: -8,

package/lib/components/Table/components/Pagination/pagination.js

@@ -1,19 +1,19 @@
-import EastRoundedIcon from "@mui/icons-material/EastRounded";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
+import { EastRounded, WestRounded } from "@mui/icons-material";
 import { Typography } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { IconButton } from "../../../common/IconButton/iconButton";
 import { Stack } from "../../../common/Stack/stack";
 import { Pagination as TablePagination } from "./pagination.styles";
 export const Pagination = ({ canNextPage = true, canPreviousPage = true, currentPage, onNextPage, onPreviousPage, totalPage, }) => {
-    return (React.createElement(TablePagination, null,
-        React.createElement("div", null,
+    return (React.createElement(TablePagination, { "data-testid": TEST_IDS.TABLE_PAGINATION },
+        React.createElement("div", { "data-testid": TEST_IDS.TABLE_PAGINATION_PAGE },
             React.createElement(Typography, { variant: "text-body-400" }, "Page "),
             React.createElement(Typography, { variant: "text-body-500" },
                 currentPage,
                 " of ",
                 totalPage)),
         React.createElement(Stack, { direction: "row", gap: 2 },
-            React.createElement(IconButton, { color: "secondary", disabled: !canPreviousPage, Icon: WestRoundedIcon, onClick: onPreviousPage }),
-            React.createElement(IconButton, { color: "secondary", disabled: !canNextPage, Icon: EastRoundedIcon, onClick: onNextPage }))));
+            React.createElement(IconButton, { color: "secondary", disabled: !canPreviousPage, Icon: WestRounded, onClick: onPreviousPage }),
+            React.createElement(IconButton, { color: "secondary", disabled: !canNextPage, Icon: EastRounded, onClick: onNextPage }))));
 };

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

@@ -1,8 +1,9 @@
 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 },
-        React.createElement("div", null,
+        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" },
                 firstResult,

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

@@ -1,4 +1,4 @@
-import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
+import { SouthRounded } from "@mui/icons-material";
 import { TableHead as MTableHead, TableRow as MTableRow, TableCell, TableSortLabel, } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
@@ -14,6 +14,6 @@ export const TableHead = ({ rowDirection, tableInstance, }) => {
                 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: SouthRoundedIcon, active: Boolean(getIsSorted()), direction: getIsSorted() || undefined, disabled: isSortDisabled(tableInstance), onClick: (mouseEvent) => handleToggleSorting(mouseEvent, tableInstance, column) }, flexRender(columnDef.header, getContext()))) : (flexRender(columnDef.header, getContext())))));
+                    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/TableRows/tableRows.js

@@ -1,19 +1,23 @@
 import { TableCell } from "@mui/material";
 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";
 export const TableRows = ({ rows, virtualizer, }) => {
     const virtualItems = virtualizer.getVirtualItems();
     return (React.createElement(Fragment, null, virtualItems.map((virtualRow) => {
-        const row = rows[virtualRow.index];
+        const rowIndex = virtualRow.index;
+        const row = rows[rowIndex];
         const { getIsGrouped, getIsPreview } = row;
-        return (React.createElement(TableRow, { key: row.id, "data-index": virtualRow.index, isGrouped: getIsGrouped(), isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(TableRow, { 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())
                 return null; // Display of placeholder cells is currently not supported.
-            return (React.createElement(TableCell, { key: cell.id, align: getTableCellAlign(cell.column), padding: getTableCellPadding(cell.column.id) }, flexRender(cell.column.columnDef.cell, cell.getContext())));
+            return (React.createElement(TableCell, { "data-testid": rowIndex === 0 && i === 0
+                    ? TEST_IDS.TABLE_FIRST_CELL
+                    : undefined, key: cell.id, align: getTableCellAlign(cell.column), padding: getTableCellPadding(cell.column.id) }, flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
     })));
 };

package/lib/components/Table/table.js

@@ -1,6 +1,6 @@
 import { TableContainer } from "@mui/material";
 import { getCoreRowModel, getFacetedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { Fragment, useCallback, useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM, PAGINATION_DIRECTION, SORT_DIRECTION, } from "../../common/analytics/entities";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpointHelper";
@@ -10,7 +10,7 @@ import { useScroll } from "../../hooks/useScroll";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/initializer/constants";
 import { TABLET } from "../../theme/common/breakpoints";
-import { FluidPaper, GridPaper } from "../common/Paper/paper.styles";
+import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
 import { NoResults } from "../NoResults/noResults";
 import { getColumnTrackSizing } from "../TableCreator/options/columnTrackSizing/utils";
 import { ROW_DIRECTION } from "./common/entities";
@@ -38,7 +38,7 @@ export const TableComponent = ({ columns, getRowId, items, listView, tableOption
     const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
     const exploreMode = useExploreMode();
     const { exploreDispatch, exploreState } = useExploreState();
-    const { entityPageState, filterState, listItems, loading, paginationState, rowPreview, tabValue, } = exploreState;
+    const { entityPageState, filterState, listItems, loading = false, paginationState, rowPreview, tabValue, } = exploreState;
     const { columnVisibility, grouping, rowSelection, sorting } = entityPageState[tabValue];
     const { currentPage, pages, pageSize, rows: pageCount } = paginationState;
     const { disablePagination = false } = listView || {};
@@ -200,14 +200,14 @@ export const TableComponent = ({ columns, getRowId, items, listView, tableOption
     function canPreviousPage() {
         return currentPage > 1;
     }
-    return noResults ? (React.createElement(NoResults, { Paper: FluidPaper, title: "No Results found" })) : (React.createElement(FluidPaper, { variant: "table" },
-        React.createElement(GridPaper, null,
-            React.createElement(TableToolbar, { listView: listView, rowDirection: rowDirection, tableInstance: tableInstance }),
-            React.createElement(TableContainer, null,
-                React.createElement(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(getVisibleFlatColumns()) },
-                    React.createElement(TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
-                    React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableInstance: tableInstance }))),
-            !disablePagination && (React.createElement(DXPagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages ?? 0 })))));
+    return noResults ? (React.createElement(NoResults, { Paper: null, title: "No Results found" })) : (React.createElement(Fragment, null,
+        React.createElement(TableToolbar, { listView: listView, rowDirection: rowDirection, tableInstance: tableInstance }),
+        React.createElement(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+        React.createElement(TableContainer, null,
+            React.createElement(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(getVisibleFlatColumns()) },
+                React.createElement(TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
+                React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableInstance: tableInstance }))),
+        !disablePagination && (React.createElement(DXPagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages ?? 0 }))));
 };
 // TODO(Dave) review whether memo is necessary - flash between tabs / loading state.
 export const Table = React.memo(TableComponent);

package/lib/components/TableCreator/tableCreator.js

@@ -1,13 +1,10 @@
 import React, { useMemo } from "react";
-import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
-import { Loading } from "../Loading/loading";
 import { COLUMN_DEF } from "../Table/common/columnDef";
 import { arrIncludesSome, sortingFn } from "../Table/common/utils";
 import { Table } from "../Table/table";
 import { buildBaseColumnDef } from "./common/utils";
 import { useTableOptions } from "./options/hook";
-import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 const createCell = (config) => function CellCreator(cellContext) {
     return (React.createElement(ComponentCreator, { components: [config.componentConfig], response: cellContext.row.original, viewContext: { cellContext } }));
 };
@@ -27,7 +24,5 @@ export const TableCreator = ({ columns, getRowId, items, listView, loading, }) =
         /* Initialize column definitions with the "row selection" column */
         COLUMN_DEF.ROW_SELECTION,
     ]), [columns]);
-    return (React.createElement(TableCreatorContainer, null,
-        React.createElement(Loading, { appear: false, loading: loading || false, panelStyle: PAPER_PANEL_STYLE.FLUID }),
-        React.createElement(Table, { columns: columnDefs, getRowId: getRowId, items: items, listView: listView, loading: loading, tableOptions: tableOptions })));
+    return (React.createElement(Table, { columns: columnDefs, getRowId: getRowId, items: items, listView: listView, loading: loading, tableOptions: tableOptions }));
 };

package/lib/components/common/AnchorLink/anchorLink.js

@@ -1,7 +1,7 @@
-import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
+import { LinkRounded } from "@mui/icons-material";
 import React from "react";
 import { AnchorLink as Link } from "./anchorLink.styles";
 export const AnchorLink = ({ anchorLink, className, }) => {
     return (React.createElement(Link, { "aria-label": anchorLink, className: className, href: `#${anchorLink}` },
-        React.createElement(LinkRoundedIcon, { fontSize: "xsmall" })));
+        React.createElement(LinkRounded, { fontSize: "xsmall" })));
 };

package/lib/components/common/Breadcrumbs/breadcrumbs.js

@@ -1,8 +1,8 @@
-import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
+import { ChevronRightRounded } from "@mui/icons-material";
 import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material";
 import NLink from "next/link";
 import React from "react";
 import { LINK_PROPS } from "./constants";
-export const Breadcrumbs = ({ breadcrumbs, className, Separator = React.createElement(ChevronRightRoundedIcon, { fontSize: "xxsmall" }), }) => {
+export const Breadcrumbs = ({ breadcrumbs, className, Separator = React.createElement(ChevronRightRounded, { fontSize: "xxsmall" }), }) => {
     return (React.createElement(React.Fragment, null, breadcrumbs.length > 0 ? (React.createElement(MBreadcrumbs, { className: className, separator: Separator }, breadcrumbs.map(({ path, text }, b) => path ? (React.createElement(Link, { ...LINK_PROPS, component: NLink, key: b, href: path }, text)) : (React.createElement(Typography, { key: `${path}${b}`, maxWidth: 180, noWrap: true }, text))))) : null));
 };

package/lib/components/common/Breadcrumbs/typeGuard.d.ts

@@ -0,0 +1,13 @@
+import { Breadcrumb } from "./breadcrumbs";
+/**
+ * Checks if the given value is an array of breadcrumbs.
+ * @param value - Value.
+ * @returns True if the value is an array of breadcrumbs.
+ */
+export declare function isBreadcrumbArray(value: unknown): value is Breadcrumb[];
+/**
+ * Checks if the given value is a breadcrumb.
+ * @param value - Value.
+ * @returns True if the value is a breadcrumb.
+ */
+export declare function isBreadcrumb(value: unknown): value is Breadcrumb;

package/lib/components/common/Breadcrumbs/typeGuard.js

@@ -0,0 +1,23 @@
+/**
+ * Checks if the given value is an array of breadcrumbs.
+ * @param value - Value.
+ * @returns True if the value is an array of breadcrumbs.
+ */
+export function isBreadcrumbArray(value) {
+    return Array.isArray(value) && value.every(isBreadcrumb);
+}
+/**
+ * Checks if the given value is a breadcrumb.
+ * @param value - Value.
+ * @returns True if the value is a breadcrumb.
+ */
+export function isBreadcrumb(value) {
+    if (value === null)
+        return false;
+    if (typeof value !== "object")
+        return false;
+    if ("path" in value && "text" in value) {
+        return typeof value.path === "string" && typeof value.text === "string";
+    }
+    return false;
+}

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

@@ -1,6 +1,6 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
 import { DropdownButton as Button } from "./dropdownButton.styles";
 export const DropdownButton = ({ children, disabled = false, open = false, ...props /* Spread props to allow for Mui ButtonProps specific prop overrides e.g. "onClick". */ }) => {
-    return (React.createElement(Button, { disabled: disabled, EndIcon: ArrowDropDownRoundedIcon, open: open, ...props }, children));
+    return (React.createElement(Button, { disabled: disabled, EndIcon: ArrowDropDownRounded, open: open, ...props }, children));
 };

package/lib/components/common/Button/components/NavigationButton/navigationButton.js

@@ -1,6 +1,6 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
 import { Button } from "./navigationButton.styles";
 export const NavigationButton = ({ children, isActive, ...props /* Spread props to allow for Button specific props ButtonProps e.g. "onClick". */ }) => {
-    return (React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, isActive: isActive, variant: "nav", ...props }, children));
+    return (React.createElement(Button, { EndIcon: ArrowDropDownRounded, isActive: isActive, variant: "nav", ...props }, children));
 };

package/lib/components/common/CopyToClipboard/copyToClipboard.js

@@ -1,4 +1,4 @@
-import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
+import { ContentCopyRounded } from "@mui/icons-material";
 import { IconButton, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
 import React, { useEffect } from "react";
@@ -23,5 +23,5 @@ export const CopyToClipboard = ({ copyStr, }) => {
     }, [showTooltip]);
     return (React.createElement(Tooltip, { arrow: true, disableHoverListener: true, open: showTooltip, placement: "top", title: "Link Copied" },
         React.createElement(IconButton, { onClick: () => onCopyToClipboard(copyStr), size: "xxsmall" },
-            React.createElement(ContentCopyRoundedIcon, { color: "primary", fontSize: "small" }))));
+            React.createElement(ContentCopyRounded, { color: "primary", fontSize: "small" }))));
 };

package/lib/components/common/Dialog/components/DialogTitle/dialogTitle.js

@@ -1,9 +1,9 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton, DialogTitle as MDialogTitle } from "@mui/material";
 import React from "react";
 export const DialogTitle = ({ className, onClose, title, }) => {
     return (React.createElement(MDialogTitle, { className: className },
         title,
         onClose && (React.createElement(IconButton, { color: "ink", edge: "end", onClick: onClose, size: "xsmall" },
-            React.createElement(CloseRoundedIcon, null)))));
+            React.createElement(CloseRounded, null)))));
 };

package/lib/components/common/Drawer/components/DrawerTitle/drawerTitle.js

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import React from "react";
 import { DrawerTitle as Title } from "./drawerTitle.styles";
@@ -6,5 +6,5 @@ export const DrawerTitle = ({ className, onClose, title, }) => {
     return (React.createElement(Title, { className: className },
         title,
         onClose && (React.createElement(IconButton, { color: "ink", edge: "end", onClick: onClose, size: "xsmall" },
-            React.createElement(CloseRoundedIcon, { color: "inkLight", fontSize: "small" })))));
+            React.createElement(CloseRounded, { color: "inkLight", fontSize: "small" })))));
 };

package/lib/components/common/Form/components/Input/input.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const InputFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & 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" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "focused" | "fullWidth" | "hiddenLabel"> & {
+}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "fullWidth" | "hiddenLabel" | "focused"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

package/lib/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.d.ts

@@ -1,3 +1,2 @@
-export declare const DropDownIcon: ({ ...props }: {
-    [x: string]: any;
-}) => JSX.Element;
+import { SvgIconProps } from "@mui/material";
+export declare const DropDownIcon: ({ ...props }: SvgIconProps) => JSX.Element;

package/lib/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.js

@@ -1,5 +1,5 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
-export const DropDownIcon = ({ ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */ }) => {
-    return (React.createElement(ArrowDropDownRoundedIcon, { color: "inkMain", fontSize: "small", ...props }));
+export const DropDownIcon = ({ ...props /* MuiSvgIconProps */ }) => {
+    return React.createElement(ArrowDropDownRounded, { color: "inkMain", fontSize: "small", ...props });
 };

package/lib/components/common/Form/components/Select/select.js

@@ -1,10 +1,9 @@
 import { Select as MSelect, Typography, } from "@mui/material";
 import React from "react";
 import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
-import { DropDownIcon } from "./components/DropDownIcon/dropDownIcon";
 import { InputFormControl } from "./select.styles";
 export const Select = ({ children, className, isFilled, label, onBlur, ...props /* Spread props to allow for Mui SelectProps specific prop overrides e.g. "disabled". */ }) => {
     return (React.createElement(InputFormControl, { className: className, isFilled: isFilled },
         label && React.createElement(Typography, { variant: TEXT_BODY_400 }, label),
-        React.createElement(MSelect, { fullWidth: true, IconComponent: DropDownIcon, inputProps: { onBlur }, size: "small", ...props }, children)));
+        React.createElement(MSelect, { fullWidth: true, inputProps: { onBlur }, size: "small", ...props }, children)));
 };

package/lib/components/common/Form/components/Select/select.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const InputFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & 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" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "focused" | "fullWidth" | "hiddenLabel"> & {
+}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "fullWidth" | "hiddenLabel" | "focused"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

package/lib/components/common/Form/components/UploadFile/uploadFile.js

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { FormHelperText, Typography } from "@mui/material";
 import React from "react";
 import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
@@ -17,7 +17,7 @@ export const UploadFile = ({ attachmentName, attachmentRejected, attachmentRejec
                 "Drag or ",
                 React.createElement(Underline, null, "Click"),
                 " to attach file"))),
-            isAttached && React.createElement(CloseRoundedIcon, { fontSize: "small" })),
+            isAttached && React.createElement(CloseRounded, { fontSize: "small" })),
         error && (React.createElement(FormHelperText, null,
             React.createElement(ErrorIcon, { fontSize: "xxsmall" }),
             getErrorMessage(attachmentRejections)))));