@databiosphere/findable-ui 24.0.0 → 25.0.0

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

@@ -2,13 +2,14 @@ import styled from "@emotion/styled";
 import { Dialog, Input } from "@mui/material";
 import { inkLight, smokeMain, } from "../../../../../../../../../../../../styles/common/mixins/colors";
 import { IconButton } from "../../../../../../../../../../../common/IconButton/iconButton";
-import { HEADER_HEIGHT } from "../../../../../../../../common/constants";
-export const SearchBar = styled(Dialog) `
+export const SearchBar = styled(Dialog, {
+    shouldForwardProp: (prop) => prop !== "yOffset",
+}) `
   .MuiDialog-container {
     width: 100%;
 
     .MuiDialog-paper {
-      margin-top: ${HEADER_HEIGHT}px;
+      margin-top: ${(props) => props.yOffset}px;
     }
   }
 `;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface SearchProps {
+    openSearch: () => void;
+}
+export declare const SearchButton: ({ openSearch }: SearchProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.js

@@ -0,0 +1,10 @@
+import { IconButton } from "@mui/material";
+import React from "react";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
+import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { Button } from "./searchButton.styles";
+export const SearchButton = ({ openSearch }) => {
+    const { mdUp } = useBreakpoint();
+    return mdUp ? (React.createElement(Button, { onClick: openSearch, startIcon: React.createElement(SearchIcon, null), variant: "nav" }, "Search")) : (React.createElement(IconButton, { color: "ink", onClick: openSearch },
+        React.createElement(SearchIcon, { fontSize: "medium" })));
+};

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "large" | "medium" | "small" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | "backNav" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    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" | "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/SearchButton/searchButton.styles.js

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+import { textBody500 } from "../../../../../../../../../../../../styles/common/mixins/fonts";
+export const Button = styled(MButton) `
+  & {
+    ${textBody500};
+    padding: 6px 12px;
+  }
+`;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.js

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React, { useCallback } from "react";
 import { Button } from "../../../../../../../../../common/Button/button";
 import { BackArrowIcon } from "../../../../../../../../../common/CustomIcon/components/BackArrowIcon/backArrowIcon";
@@ -16,7 +16,7 @@ export const NavigationDrawer = ({ closeAncestor, headerProps, isMenuIn, isSelec
         closeAncestor?.();
     }, [closeAncestor, onClose]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" }, menuLabel),
+        React.createElement(Button, { EndIcon: ArrowDropDownRounded, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" }, menuLabel),
         React.createElement(Dialog, { ...DIALOG_PROPS, onClose: closeDrawers, open: open, TransitionComponent: Slide },
             React.createElement(AppBar, { component: "div", elevation: 1 },
                 React.createElement(Toolbar, { onClose: closeDrawers, ...headerProps })),

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.js

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import { Grow, ClickAwayListener as MClickAwayListener, MenuList as MMenuList, Paper as MPaper, } from "@mui/material";
 import React, { Fragment, useEffect } from "react";
 import { useMenu } from "../../../../../../../../../common/Menu/hooks/useMenu";
@@ -17,7 +17,7 @@ export const NavigationMenu = ({ closeAncestor, isSelected = false, isSubMenu =
         };
     }, [isSubMenu, onDisableScrollLock, open]);
     return (React.createElement(MenuItem, null,
-        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, isActive: open, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" },
+        React.createElement(Button, { EndIcon: ArrowDropDownRounded, isActive: open, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" },
             React.createElement(NavigationButtonLabel, { label: menuLabel })),
         React.createElement(StyledPopper, { ...POPPER_PROPS, ...popperProps, anchorEl: anchorEl, open: open }, ({ TransitionProps }) => (React.createElement(Grow, { ...TransitionProps, onEntered: () => {
                 if (isSubMenu)

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from "react";
+export interface UseMeasureHeader {
+    headerRef: RefObject<HTMLElement>;
+}
+export declare const useMeasureHeader: () => UseMeasureHeader;

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+import { useLayoutState } from "../../../../../hooks/useLayoutState";
+import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../../hooks/useResizeObserver";
+import { LayoutActionKind } from "../../../../../providers/layoutState";
+export const useMeasureHeader = () => {
+    const { layoutDispatch } = useLayoutState();
+    const headerRef = useRef(null);
+    const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
+    // Updates layout state header height.
+    useEffect(() => {
+        if (!height)
+            return;
+        layoutDispatch({
+            payload: height,
+            type: LayoutActionKind.UpdateHeaderHeight,
+        });
+    }, [height, layoutDispatch]);
+    return { headerRef };
+};

package/lib/components/Layout/components/Outline/common/constants.d.ts

@@ -0,0 +1,2 @@
+import { TabProps as MTabProps } from "@mui/material";
+export declare const DEFAULT_TAB_VALUE: MTabProps["value"];

package/lib/components/Layout/components/Outline/common/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_TAB_VALUE = "";

package/lib/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.js

@@ -1,9 +1,9 @@
-import FilterListRoundedIcon from "@mui/icons-material/FilterListRounded";
+import { FilterListRounded } from "@mui/icons-material";
 import React from "react";
 import { Badge, SidebarButton as Button } from "./sidebarButton.styles";
 export const SidebarButton = ({ className, count, label, onClick, ...props }) => {
     return (React.createElement(Button, { className: className, onClick: onClick, ...props },
-        React.createElement(FilterListRoundedIcon, { fontSize: "small" }),
+        React.createElement(FilterListRounded, { fontSize: "small" }),
         label,
         count > 0 && React.createElement(Badge, null, count)));
 };

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/Login/login.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Login } from "./login";
+declare const _default: Meta<typeof Login>;
+export default _default;
+type Story = StoryObj<typeof Login>;
+export declare const LoginStory: Story;

package/lib/components/Login/login.stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { HelpIconButton } from "../common/Button/components/HelpIconButton/helpIconButton";
+import { Login } from "./login";
+export default {
+    argTypes: {
+        isGoogle: { control: "boolean" },
+        termsOfService: { control: "object" },
+        text: { control: "object" },
+        title: { control: "text" },
+        warning: { control: "object" },
+    },
+    component: Login,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Components/Login",
+};
+export const LoginStory = {
+    args: {
+        isGoogle: true,
+        termsOfService: (React.createElement("p", null, "I have read and agree to privacy notice and terms of use")),
+        text: (React.createElement("p", null,
+            "Please sign in to your Data Explorer account",
+            " ",
+            React.createElement(HelpIconButton, { url: "https://www.google.com/" }))),
+        title: "Sign in to your account",
+        warning: (React.createElement("div", null,
+            React.createElement("p", null, "WARNING NOTICE"),
+            React.createElement("p", null, "This is a warning notice."))),
+    },
+};

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/CheckboxMenu/checkboxMenu.d.ts

@@ -0,0 +1,16 @@
+type MenuListItemOnChangeFn = (event: unknown) => void;
+type onResetFn = () => void;
+export interface CheckboxMenuListItem {
+    checked: boolean;
+    disabled?: boolean;
+    label: string;
+    onChange: MenuListItemOnChangeFn;
+    value: string;
+}
+export interface CheckboxMenuProps {
+    label: string;
+    onReset: onResetFn;
+    options: CheckboxMenuListItem[];
+}
+export declare const CheckboxMenu: ({ label: buttonLabel, onReset, options, }: CheckboxMenuProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+import { Checkbox, ListItem, ListItemButton, ListItemText, } from "@mui/material";
+import React, { useState } from "react";
+import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
+import { DropdownButton } from "../../../common/Button/components/DropdownButton/dropdownButton";
+import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { Menu } from "./checkboxMenu.styles";
+export const CheckboxMenu = ({ label: buttonLabel, onReset, options, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const onOpenMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const onCloseMenu = () => {
+        setAnchorEl(null);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownButton, { onClick: onOpenMenu, open: open }, buttonLabel),
+        React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+                horizontal: "right",
+                vertical: "top",
+            } },
+            options.map(({ checked, disabled = false, label, onChange, value }) => (React.createElement(ListItemButton, { disabled: disabled, key: value, onClick: onChange, role: undefined },
+                React.createElement(Checkbox, { checked: checked, checkedIcon: React.createElement(CheckedIcon, null), disabled: disabled, icon: React.createElement(UncheckedIcon, null) }),
+                React.createElement(ListItemText, { disableTypography: true, primary: React.createElement("span", null, label) })))),
+            React.createElement(ListItem, { component: "div" },
+                React.createElement(ButtonTextPrimary, { onClick: onReset }, "Reset")))));
+};

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

@@ -0,0 +1,5 @@
+import { ComponentMeta } from "@storybook/react";
+import { CheckboxMenu } from "./checkboxMenu";
+declare const _default: ComponentMeta<typeof CheckboxMenu>;
+export default _default;
+export declare const CheckboxMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./checkboxMenu").CheckboxMenuProps>;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { CheckboxMenu } from "./checkboxMenu";
+export default {
+    argTypes: {
+        label: { control: "text" },
+        onReset: { control: { disabled: true } },
+        options: { control: "array" },
+    },
+    component: CheckboxMenu,
+    title: "Components/Common/Menu/CheckboxMenu",
+};
+const CheckboxMenuTemplate = (args) => (React.createElement(CheckboxMenu, { ...args }));
+const onChange = () => {
+    // onChange function
+};
+const onReset = () => {
+    // onReset function
+};
+export const CheckboxMenuStory = CheckboxMenuTemplate.bind({});
+CheckboxMenuStory.args = {
+    label: "Options",
+    onReset: onReset,
+    options: [
+        {
+            checked: true,
+            disabled: true,
+            label: "Item 1",
+            onChange,
+            value: "item_1",
+        },
+        {
+            checked: false,
+            disabled: false,
+            label: "Item 2",
+            onChange,
+            value: "item_2",
+        },
+        {
+            checked: true,
+            disabled: false,
+            label: "Item 3",
+            onChange,
+            value: "item_3",
+        },
+    ],
+};

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

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

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

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+import { Menu as MMenu } from "@mui/material";
+export const Menu = styled(MMenu) `
+  .MuiPaper-menu {
+    margin: 4px 0;
+  }
+
+  // List item button
+  .MuiListItemButton-root {
+    gap: 8px;
+  }
+
+  // List item
+  .MuiListItem-root {
+    padding: 10px 16px;
+  }
+
+  .MuiListItemButton-root.Mui-disabled {
+    opacity: 1;
+  }
+`;

package/lib/components/Table/components/EntityViewToggle/entityViewToggle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EntityViewToggle: () => JSX.Element;