@databiosphere/findable-ui 37.0.0 → 38.0.0

package/lib/components/Index/components/EntityView/components/controls/FilterButton/filterButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../../types";
+export declare const FilterButton: ({ className, ...props }: BaseComponentProps & ButtonProps) => JSX.Element;

package/lib/components/Index/components/EntityView/components/controls/FilterButton/filterButton.js

@@ -0,0 +1,18 @@
+import { FilterListRounded } from "@mui/icons-material";
+import { NoSsr } from "@mui/material";
+import React from "react";
+import { useExploreState } from "../../../../../../../hooks/useExploreState";
+import { SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+import { BUTTON_PROPS } from "../../../../../../common/Button/constants";
+import { useDrawer } from "../../../../../../common/Drawer/provider/hook";
+import { FilterCountChip } from "../../../../../../Filter/components/FilterCountChip/filterCountChip";
+import { StyledButton } from "./filterButton.styles";
+export const FilterButton = ({ className, ...props }) => {
+    const { onOpen } = useDrawer();
+    const { exploreState } = useExploreState();
+    const { filterCount } = exploreState;
+    return (React.createElement(NoSsr, null,
+        React.createElement(StyledButton, { ...BUTTON_PROPS.SECONDARY_CONTAINED, className: className, onClick: onOpen, startIcon: React.createElement(FilterListRounded, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT, fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }), ...props },
+            "Filter",
+            React.createElement(FilterCountChip, { count: filterCount }))));
+};

package/lib/components/Index/components/EntityView/components/controls/FilterButton/filterButton.styles.d.ts

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

package/lib/components/Index/components/EntityView/components/controls/FilterButton/filterButton.styles.js

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

package/lib/components/Index/components/EntityView/components/controls/ViewToggle/hooks/UseViewToggle/hook.d.ts

@@ -0,0 +1,2 @@
+import { UseViewToggleProps } from "./types";
+export declare const useViewToggle: () => UseViewToggleProps;

package/lib/components/Index/components/{EntitiesView/hooks/UseEntitiesView → EntityView/components/controls/ViewToggle/hooks/UseViewToggle}/hook.js

@@ -1,7 +1,7 @@
-import { useConfig } from "../../../../../../hooks/useConfig";
-import { useToggleButtonGroup } from "../../../../../common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook";
+import { useConfig } from "../../../../../../../../../hooks/useConfig";
+import { useToggleButtonGroup } from "../../../../../../../../common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook";
 import { VIEW_MODE } from "./types";
-export const useEntitiesView = () => {
+export const useViewToggle = () => {
     const { onChange, value } = useToggleButtonGroup(VIEW_MODE.TABLE);
     const { config } = useConfig();
     const { enableEntitiesView = false } = config;

package/lib/components/Index/components/{EntitiesView/hooks/UseEntitiesView → EntityView/components/controls/ViewToggle/hooks/UseViewToggle}/types.d.ts

@@ -6,7 +6,7 @@ export declare enum VIEW_MODE {
 export interface ViewStatus {
     disabled: boolean;
 }
-export interface UseEntitiesViewProps {
+export interface UseViewToggleProps {
     onChange: ToggleButtonGroupProps["onChange"];
     viewMode: VIEW_MODE;
     viewStatus: ViewStatus;

package/lib/components/Index/{stories/index.stories.d.ts → components/EntityView/components/controls/ViewToggle/stories/viewToggle.stories.d.ts}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Index } from "../index";
-declare const meta: Meta<typeof Index>;
+import { ViewToggle } from "../viewToggle";
+declare const meta: Meta<typeof ViewToggle>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

package/lib/components/Index/components/EntityView/components/controls/ViewToggle/stories/viewToggle.stories.js

@@ -0,0 +1,6 @@
+import { ViewToggle } from "../viewToggle";
+const meta = {
+    component: ViewToggle,
+};
+export default meta;
+export const Default = {};

package/lib/components/Index/components/EntityView/components/controls/ViewToggle/viewToggle.d.ts

@@ -0,0 +1,2 @@
+import { TestIdProps } from "../../../../../../types";
+export declare const ViewToggle: ({ testId }: TestIdProps) => JSX.Element | null;

package/lib/components/Index/components/EntityView/components/controls/ViewToggle/viewToggle.js

@@ -0,0 +1,13 @@
+import { ToggleButton } from "@mui/material";
+import React from "react";
+import { useEntityView } from "../../../context/hook";
+import { VIEW_MODE } from "./hooks/UseViewToggle/types";
+import { StyledToggleButtonGroup } from "./viewToggle.styles";
+export const ViewToggle = ({ testId }) => {
+    const { onChange, viewMode, viewStatus } = useEntityView();
+    if (viewStatus.disabled)
+        return null;
+    return (React.createElement(StyledToggleButtonGroup, { "data-testid": testId, exclusive: true, onChange: onChange, value: viewMode },
+        React.createElement(ToggleButton, { value: VIEW_MODE.TABLE }, "Table"),
+        React.createElement(ToggleButton, { value: VIEW_MODE.CHART }, "Graph")));
+};

package/lib/components/Index/components/EntityView/components/controls/ViewToggle/viewToggle.styles.d.ts

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

package/lib/components/Index/components/EntityView/components/controls/ViewToggle/viewToggle.styles.js

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { ToggleButtonGroup } from "@mui/material";
+export const StyledToggleButtonGroup = styled(ToggleButtonGroup) `
+  .MuiToggleButton-root {
+    max-height: 32px;
+    text-transform: none;
+  }
+`;

package/lib/components/Index/components/EntityView/components/layout/Summary/constants.d.ts

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

package/lib/components/Index/components/EntityView/components/layout/Summary/constants.js

@@ -0,0 +1,5 @@
+export const GRID_PROPS = {
+    container: true,
+    direction: "row",
+    spacing: 1,
+};

package/lib/components/Index/components/EntityView/components/layout/Summary/summary.d.ts

@@ -0,0 +1,2 @@
+import { BaseComponentProps } from "../../../../../../types";
+export declare const Summary: ({ className, }: BaseComponentProps) => JSX.Element | null;

package/lib/components/Index/components/EntityView/components/layout/Summary/summary.js

@@ -0,0 +1,15 @@
+import { Typography } from "@mui/material";
+import React, { Fragment } from "react";
+import { useSummary } from "../../../../../../../hooks/useSummary";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import { GRID_PROPS } from "./constants";
+import { StyledDot, StyledGrid } from "./summary.styles";
+export const Summary = ({ className, }) => {
+    const { summaries } = useSummary() || {};
+    if (!summaries)
+        return null;
+    return (React.createElement(StyledGrid, { ...GRID_PROPS, className: className }, summaries.map(([count, label], i) => (React.createElement(Fragment, { key: i },
+        i !== 0 && React.createElement(StyledDot, null),
+        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_500 }, count),
+        React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, label))))));
+};

package/lib/components/Index/components/EntityView/components/layout/Summary/summary.styles.d.ts

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

package/lib/components/Index/components/EntityView/components/layout/Summary/summary.styles.js

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { Dot } from "../../../../../../common/Dot/dot";
+export const StyledGrid = styled(Grid) `
+  display: grid;
+  gap: 4px;
+  grid-auto-flow: column;
+  max-width: fit-content;
+  padding: 12px 16px;
+
+  ${({ theme }) => theme.breakpoints.down(1024)} {
+    display: none;
+  }
+`;
+export const StyledDot = styled(Dot) `
+  margin: 0 4px;
+`;

package/lib/components/Index/components/EntityView/components/layout/Title/title.d.ts

@@ -0,0 +1,2 @@
+import { BaseComponentProps } from "../../../../../../types";
+export declare const Title: ({ className, }: BaseComponentProps) => JSX.Element | null;

package/lib/components/Index/components/EntityView/components/layout/Title/title.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { Title as CommonTitle } from "../../../../../../common/Title/title";
+export const Title = ({ className, }) => {
+    const { entityConfig } = useConfig();
+    const { ui } = entityConfig;
+    const { title } = ui || {};
+    if (!title)
+        return null;
+    return React.createElement(CommonTitle, { className: className }, title);
+};

package/lib/components/Index/components/{Tabs → EntityView/components/navigation/Tabs}/common/utils.d.ts

@@ -1,5 +1,5 @@
-import { EntityConfig } from "../../../../../config/entities";
-import { Tab } from "../../../../common/Tabs/tabs";
+import { EntityConfig } from "../../../../../../../../config/entities";
+import { Tab } from "../../../../../../../common/Tabs/tabs";
 /**
  * Returns entity list tabs list for the tabs component.
  * @param entities - Entities config.

package/lib/components/Index/components/EntityView/components/navigation/Tabs/common/utils.js

@@ -0,0 +1,14 @@
+/**
+ * Returns entity list tabs list for the tabs component.
+ * @param entities - Entities config.
+ * @returns tabs list.
+ */
+export function getEntityListTabs(entities) {
+    return entities.map(({ annotation, label, route, tabIcon: icon, tabIconPosition: iconPosition, }) => ({
+        annotation,
+        icon,
+        iconPosition,
+        label,
+        value: route,
+    }));
+}

package/lib/components/Index/components/EntityView/components/navigation/Tabs/tabs.js

@@ -0,0 +1,23 @@
+import Router from "next/router";
+import React, { useCallback, useMemo } from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { useExploreState } from "../../../../../../../hooks/useExploreState";
+import { getEntityListTabs } from "./common/utils";
+import { StyledTabs } from "./tabs.styles";
+export const Tabs = () => {
+    const { config, entityConfig } = useConfig();
+    const { exploreState } = useExploreState();
+    const { entities } = config;
+    const { tabValue } = exploreState;
+    const { ui } = entityConfig;
+    const { enableTabs } = ui || {};
+    // Builds the tabs.
+    const tabs = useMemo(() => getEntityListTabs(entities), [entities]);
+    const onTabChange = useCallback(async (tabValue) => {
+        await Router.push(`/${tabValue}`);
+    }, []);
+    // Returns null if tabs are disabled.
+    if (!enableTabs)
+        return null;
+    return React.createElement(StyledTabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue });
+};

package/lib/components/Index/components/EntityView/components/navigation/Tabs/tabs.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledTabs: import("@emotion/styled").StyledComponent<import("../../../../../../common/Tabs/tabs").TabsProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Index/components/EntityView/components/navigation/Tabs/tabs.styles.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { Tabs } from "../../../../../../common/Tabs/tabs";
+export const StyledTabs = styled(Tabs) `
+  box-shadow: none;
+  flex: 1;
+
+  .MuiTabs-scroller {
+    padding: 0;
+  }
+
+  .MuiTabs-indicator {
+    z-index: 4; /* required; positions indicator above list view hero box-shadow */
+  }
+
+  .MuiTab-root {
+    line-height: 32px;
+    margin: 0;
+  }
+`;

package/lib/components/Index/components/EntityView/components/slots/EntityListSlot/entityListSlot.d.ts

@@ -0,0 +1 @@
+export declare const EntityListSlot: () => JSX.Element | null;

package/lib/components/Index/components/EntityView/components/slots/EntityListSlot/entityListSlot.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { ComponentCreator } from "../../../../../../ComponentCreator/ComponentCreator";
+export const EntityListSlot = () => {
+    const { entityConfig } = useConfig();
+    const { ui } = entityConfig;
+    const { slots } = ui || {};
+    const { entityListSlot } = slots || {};
+    if (!entityListSlot)
+        return null;
+    return React.createElement(ComponentCreator, { components: entityListSlot, response: undefined });
+};

package/lib/components/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.d.ts

@@ -0,0 +1 @@
+export declare const EntityViewSlot: () => JSX.Element | null;

package/lib/components/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { ComponentCreator } from "../../../../../../ComponentCreator/ComponentCreator";
+import { StyledGrid } from "./entityViewSlot.styles";
+export const EntityViewSlot = () => {
+    const { entityConfig } = useConfig();
+    const { ui } = entityConfig;
+    const { slots } = ui || {};
+    const { entityViewSlot } = slots || {};
+    if (!entityViewSlot)
+        return null;
+    return (React.createElement(StyledGrid, null,
+        React.createElement(ComponentCreator, { components: entityViewSlot, response: undefined })));
+};

package/lib/components/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.styles.d.ts

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

package/lib/components/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.styles.js

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { mediaTabletDown } from "../../../../../../../styles/common/mixins/breakpoints";
+export const StyledGrid = styled(Grid) `
+  display: grid;
+  gap: 16px;
+  margin: 16px;
+
+  &:empty {
+    display: none;
+  }
+
+  ${mediaTabletDown} {
+    margin: 16px 0;
+  }
+`;

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/chartView.js

@@ -1,7 +1,9 @@
 import { Typography } from "@mui/material";
 import React, { Fragment } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { Loading, LOADING_PANEL_STYLE } from "../../../../../Loading/loading";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import { Loading, LOADING_PANEL_STYLE, } from "../../../../../../Loading/loading";
+import { StyledToolbar } from "../../../../../../Table/components/TableToolbar/tableToolbar.styles";
+import { ViewToggle } from "../../controls/ViewToggle/viewToggle";
 import { StyledGrid, StyledGridPaperSection } from "./chartView.styles";
 import { Chart } from "./components/Chart/chart";
 import { useChartView } from "./hooks/UseChartView/useChartView";
@@ -10,6 +12,8 @@ export const ChartView = ({ categoryFilters, entityName, loading, testId, }) =>
     if (selectCategoryViews.length === 0)
         return null;
     return (React.createElement(Fragment, null,
+        React.createElement(StyledToolbar, null,
+            React.createElement(ViewToggle, null)),
         React.createElement(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
         React.createElement(StyledGrid, { "data-testid": testId, ref: chartViewRef }, selectCategoryViews.map(({ key, label, values }) => (React.createElement(StyledGridPaperSection, { key: key },
             React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL },

package/lib/components/Index/components/EntityView/components/views/ChartView/chartView.styles.d.ts

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

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/chartView.styles.js

@@ -1,9 +1,10 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
-import { GridPaperSection } from "../../../../../common/Section/section.styles";
+import { GridPaperSection } from "../../../../../../common/Section/section.styles";
 export const StyledGrid = styled(Grid) `
   display: grid;
   gap: inherit;
+  overflow-y: auto;
 `;
 export const StyledGridPaperSection = styled(GridPaperSection) `
   &:last-of-type {

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/barX/plot.d.ts

@@ -1,3 +1,3 @@
 import { PlotOptions } from "@observablehq/plot";
-import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+import { SelectCategoryValueView } from "../../../../../../../../../../common/entities";
 export declare function getPlotOptions(selectCategoryValueViews: SelectCategoryValueView[], width: number): PlotOptions;

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/barX/plot.js

@@ -1,6 +1,6 @@
 import * as Plot from "@observablehq/plot";
-import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
-import { formatCountSize } from "../../../../../../../../../utils/formatCountSize";
+import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
+import { formatCountSize } from "../../../../../../../../../../utils/formatCountSize";
 import { DATA_FIELD, MARGIN_LEFT, TEXT_PADDING } from "./constants";
 import { getCategoryTotalCount, getCategoryValueText, getCategoryValueTextFill, getColorRangeValue, getCountText, getCountTextFill, getPlotHeight, getTicks, getXDomain, getYPaddingInner, getYPaddingOuter, isAnyValueSelected, renderText, } from "./utils";
 export function getPlotOptions(selectCategoryValueViews, width) {

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/barX/utils.d.ts

@@ -1,5 +1,5 @@
 import { ChannelValues, Context, Dimensions, RenderFunction, ScaleFunctions } from "@observablehq/plot";
-import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+import { SelectCategoryValueView } from "../../../../../../../../../../common/entities";
 /**
  * Calculates the total count of all category values from the provided array of category value views.
  * @param selectCategoryValueViews - An array of objects representing category values, where each object contains a count property.

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/barX/utils.js

@@ -1,4 +1,4 @@
-import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
 import { BAR_GAP, BAR_HEIGHT, MARGIN_LEFT, TEXT_PADDING, TICKS, } from "./constants";
 /**
  * Calculates the total count of all category values from the provided array of category value views.

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/chart.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const StyledBarX: import("@emotion/styled").StyledComponent<import("../../../../../../../Plot/components/BarX/types").BarXProps & {
+export declare const StyledBarX: import("@emotion/styled").StyledComponent<import("../../../../../../../../Plot/components/BarX/types").BarXProps & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/chart.styles.js

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../../../../../../../styles/common/mixins/breakpoints";
-import { textBodySmall400 } from "../../../../../../../../styles/common/mixins/fonts";
-import { BarX } from "../../../../../../../Plot/components/BarX/barX";
+import { mediaTabletDown } from "../../../../../../../../../styles/common/mixins/breakpoints";
+import { textBodySmall400 } from "../../../../../../../../../styles/common/mixins/fonts";
+import { BarX } from "../../../../../../../../Plot/components/BarX/barX";
 export const StyledBarX = styled(BarX) `
   ${textBodySmall400};
 

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/stories/chart.stories.js

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import React from "react";
-import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
 import { Chart } from "../chart";
 import { CHART_ARGS, SELECT_CHART_ARGS } from "./args";
 const meta = {

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/components/Chart/types.d.ts

@@ -1,6 +1,6 @@
 import { PlotOptions } from "@observablehq/plot";
-import { SelectCategoryValueView } from "../../../../../../../../common/entities";
-import { TestIdProps } from "../../../../../../../types";
+import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+import { TestIdProps } from "../../../../../../../../types";
 export interface ChartProps extends Required<Pick<PlotOptions, "width">>, TestIdProps {
     selectCategoryValueViews: SelectCategoryValueView[];
 }

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/hooks/UseChartView/types.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from "react";
-import { SelectCategoryView } from "../../../../../../../../common/entities";
+import { SelectCategoryView } from "../../../../../../../../../common/entities";
 export interface UseChartView {
     chartViewRef: RefObject<HTMLDivElement> | null;
     selectCategoryViews: SelectCategoryView[];

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/hooks/UseChartView/useChartView.d.ts

@@ -1,3 +1,3 @@
-import { CategoryFilter } from "../../../../../../../Filter/components/Filters/filters";
+import { CategoryFilter } from "../../../../../../../../Filter/components/Filters/filters";
 import { UseChartView } from "./types";
 export declare const useChartView: (categoryFilters: CategoryFilter[]) => UseChartView;

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/hooks/UseChartView/useChartView.js

@@ -1,5 +1,5 @@
 import { useMemo, useRef } from "react";
-import { getBorderBoxSize, useResizeObserver, } from "../../../../../../../../hooks/useResizeObserver";
+import { getBorderBoxSize, useResizeObserver, } from "../../../../../../../../../hooks/useResizeObserver";
 import { getSelectCategoryViews, getSVGWidth } from "../../utils";
 export const useChartView = (categoryFilters) => {
     const chartViewRef = useRef(null);

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/stories/chartView.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { GridPaper } from "../../../../../../common/Paper/paper.styles";
+import { GridPaper } from "../../../../../../../common/Paper/paper.styles";
 import { ChartView } from "../chartView";
 import { CHART_VIEW_ARGS } from "./args";
 const meta = {

package/lib/components/Index/components/EntityView/components/views/ChartView/types.d.ts

@@ -0,0 +1,8 @@
+import { EntityConfig } from "../../../../../../../config/entities";
+import { CategoryFilter } from "../../../../../../Filter/components/Filters/filters";
+import { TestIdProps } from "../../../../../../types";
+export interface ChartViewProps extends TestIdProps {
+    categoryFilters: CategoryFilter[];
+    entityName: EntityConfig["label"];
+    loading: boolean;
+}

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/utils.d.ts

@@ -1,5 +1,5 @@
-import { SelectCategoryView } from "../../../../../../common/entities";
-import { CategoryFilter } from "../../../../../Filter/components/Filters/filters";
+import { SelectCategoryView } from "../../../../../../../common/entities";
+import { CategoryFilter } from "../../../../../../Filter/components/Filters/filters";
 /**
  * Returns the set of select category views that have chart view enabled.
  * @param categoryFilters - Category filters.

package/lib/components/Index/components/{EntitiesView/components → EntityView/components/views}/ChartView/utils.js

@@ -1,4 +1,4 @@
-import { isSelectCategoryView } from "../../../../../../common/categories/views/select/typeGuards";
+import { isSelectCategoryView } from "../../../../../../../common/categories/views/select/typeGuards";
 /**
  * Returns the set of select category views that have chart view enabled.
  * @param categoryFilters - Category filters.

package/lib/components/Index/components/EntityView/components/views/TableView/tableView.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { EntityListProps } from "./types";
+export declare const TableView: <T extends RowData>({ entityListType, loading, table, }: EntityListProps<T>) => JSX.Element | null;

package/lib/components/Index/components/{EntitiesView/components/EntityList/entityList.js → EntityView/components/views/TableView/tableView.js}

@@ -1,8 +1,8 @@
 import React from "react";
-import { useConfig } from "../../../../../../hooks/useConfig";
-import { useExploreState } from "../../../../../../hooks/useExploreState";
-import { TableCreator } from "../../../../../TableCreator/tableCreator";
-export const EntityList = ({ entityListType, loading, table, }) => {
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { useExploreState } from "../../../../../../../hooks/useExploreState";
+import { TableCreator } from "../../../../../../TableCreator/tableCreator";
+export const TableView = ({ entityListType, loading, table, }) => {
     const { entityConfig } = useConfig();
     const { exploreState } = useExploreState();
     const { listView } = entityConfig;

package/lib/components/Index/components/EntityView/context/context.d.ts

@@ -0,0 +1,2 @@
+import { EntityViewContextProps } from "./types";
+export declare const EntityViewContext: import("react").Context<EntityViewContextProps>;

package/lib/components/Index/components/EntityView/context/context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import { VIEW_MODE } from "../components/controls/ViewToggle/hooks/UseViewToggle/types";
+export const EntityViewContext = createContext({
+    onChange: () => { },
+    viewMode: VIEW_MODE.TABLE,
+    viewStatus: { disabled: false },
+});

package/lib/components/Index/components/EntityView/context/hook.d.ts

@@ -0,0 +1,6 @@
+import { EntityViewContextProps } from "./types";
+/**
+ * Returns entity view context.
+ * @returns entity view context.
+ */
+export declare const useEntityView: () => EntityViewContextProps;

package/lib/components/Index/components/EntityView/context/hook.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { EntityViewContext } from "./context";
+/**
+ * Returns entity view context.
+ * @returns entity view context.
+ */
+export const useEntityView = () => {
+    return useContext(EntityViewContext);
+};