@databiosphere/findable-ui 47.0.2 → 49.0.0

package/lib/common/chart/sort/utils.js

@@ -0,0 +1,19 @@
+import { CHART_SORT_FN } from "./constants";
+import { CHART_SORT } from "./types";
+/**
+ * Resolves chart sort options to a sorting function.
+ * @param chartSortOptions - Chart sort option (ALPHA, COUNT, or custom function).
+ * @returns Sorting function to use for chart data.
+ */
+export function getChartSortFn(chartSortOptions) {
+    // Default to COUNT sort if not specified.
+    if (!chartSortOptions) {
+        return CHART_SORT_FN[CHART_SORT.COUNT];
+    }
+    // If it's a custom function, return it directly.
+    if (typeof chartSortOptions === "function") {
+        return chartSortOptions;
+    }
+    // Otherwise, look up the function from the map.
+    return CHART_SORT_FN[chartSortOptions];
+}

package/lib/common/chart/types.d.ts

@@ -0,0 +1,5 @@
+import { ChartSortOptions } from "./sort/types";
+export interface Chart {
+    enable: boolean;
+    sortBy?: ChartSortOptions;
+}

package/lib/common/entities.d.ts

@@ -1,4 +1,5 @@
 import { RowData, TableOptions } from "@tanstack/react-table";
+import { Chart } from "./chart/types";
 /**
  * Model of a value of a metadata class.
  */
@@ -133,7 +134,7 @@ export interface SelectCategoryValueView {
  */
 export interface SelectCategoryView {
     annotation?: DataDictionaryAnnotation;
-    enableChartView?: boolean;
+    chart?: Chart;
     isDisabled?: boolean;
     key: CategoryKey;
     label: string;

package/lib/components/Authentication/components/SessionController/components/GoogleSessionController/SessionController.d.ts

@@ -1,2 +1,3 @@
+import { JSX } from "react";
 import { SessionControllerProps } from "./types";
 export declare function SessionController({ children, token, }: SessionControllerProps): JSX.Element;

package/lib/components/Authentication/components/SessionController/components/GoogleSessionController/SessionController.js

@@ -1,4 +1,5 @@
-import React, { Fragment, useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useEffect } from "react";
 import { authComplete } from "../../../../../../providers/authentication/auth/dispatch";
 import { useAuth } from "../../../../../../providers/authentication/auth/hook";
 import { authenticationComplete } from "../../../../../../providers/authentication/authentication/dispatch";
@@ -25,5 +26,5 @@ export function SessionController({ children, token, }) {
         profile,
         token,
     ]);
-    return React.createElement(Fragment, null, children);
+    return _jsx(Fragment, { children: children });
 }

package/lib/components/Authentication/components/SessionController/components/NextSessionController/SessionController.d.ts

@@ -1,2 +1,3 @@
+import { JSX } from "react";
 import { SessionControllerProps } from "./types";
 export declare function SessionController({ children, }: SessionControllerProps): JSX.Element;

package/lib/components/Authentication/components/SessionController/components/NextSessionController/SessionController.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useSession } from "next-auth/react";
-import React, { Fragment, useEffect } from "react";
+import { Fragment, useEffect } from "react";
 import { updateAuthState } from "../../../../../../providers/authentication/auth/dispatch";
 import { useAuth } from "../../../../../../providers/authentication/auth/hook";
 import { updateAuthentication } from "../../../../../../providers/authentication/authentication/dispatch";
@@ -13,5 +14,5 @@ export function SessionController({ children, }) {
         authDispatch?.(updateAuthState(mapAuth(session)));
         authenticationDispatch?.(updateAuthentication(mapAuthentication(session)));
     }, [authDispatch, authenticationDispatch, session]);
-    return React.createElement(Fragment, null, children);
+    return _jsx(Fragment, { children: children });
 }

package/lib/components/ComponentCreator/ComponentCreator.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { ComponentsConfig, ViewContext } from "../../config/entities";
 export interface ComponentCreatorProps<T> {
     components: ComponentsConfig;

package/lib/components/ComponentCreator/ComponentCreator.js

@@ -1,4 +1,5 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement } from "react";
 import { useConfig } from "../../hooks/useConfig";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useFileManifestState } from "../../hooks/useFileManifestState";
@@ -21,23 +22,25 @@ export const ComponentCreator = ({ components, response, viewContext, }) => {
     const { fileManifestState } = useFileManifestState();
     const systemStatus = useSystemStatus();
     const componentsValue = typeof components === "function" ? components(config) : components;
-    return (React.createElement(React.Fragment, null, componentsValue.map((c, k) => {
-        // Using uuid as the component's key causes the component to re-mount on re-render.
-        // An interim solution is to use the array item's index as its key; however, this may lead to subtle bugs.
-        // See issue https://github.com/clevercanary/data-explorer/issues/363.
-        const children = c.children ? (React.createElement(ComponentCreator, { key: k, components: c.children, response: response, viewContext: viewContext })) : null;
-        const props = c.viewBuilder
-            ? c.viewBuilder(response, {
-                ...viewContext,
-                authState: {
-                    isAuthenticated,
-                },
-                entityConfig,
-                exploreState,
-                fileManifestState,
-                systemStatus,
-            })
-            : {};
-        return React.createElement(c.component, { ...c.props, ...props, key: k }, [children ?? props.children]);
-    })));
+    return (_jsx(_Fragment, { children: componentsValue.map((c, k) => {
+            // Using uuid as the component's key causes the component to re-mount on re-render.
+            // An interim solution is to use the array item's index as its key; however, this may lead to subtle bugs.
+            // See issue https://github.com/clevercanary/data-explorer/issues/363.
+            const children = c.children ? (_jsx(ComponentCreator, { components: c.children, response: response, viewContext: viewContext }, k)) : null;
+            const props = c.viewBuilder
+                ? c.viewBuilder(response, {
+                    ...viewContext,
+                    authState: {
+                        isAuthenticated,
+                    },
+                    entityConfig,
+                    exploreState,
+                    fileManifestState,
+                    systemStatus,
+                })
+                : {};
+            return createElement(c.component, { ...c.props, ...props, key: k }, [
+                children ?? props.children,
+            ]);
+        }) }));
 };

package/lib/components/ComponentCreator/components/ConditionalComponent/conditionalComponent.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 /**
  * Basic component to conditionally render children.
  */

package/lib/components/ComponentCreator/components/ConditionalComponent/conditionalComponent.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export const ConditionalComponent = ({ children, isIn, }) => {
-    return isIn ? React.createElement(React.Fragment, null, children) : null;
+    return isIn ? _jsx(_Fragment, { children: children }) : null;
 };

package/lib/components/ComponentCreator/components/RenderComponent/renderComponent.d.ts

@@ -1,4 +1,4 @@
-import { ElementType } from "react";
+import { JSX, ElementType } from "react";
 /**
  * Renders a React functional or class component as a React node.
  */

package/lib/components/ComponentCreator/components/RenderComponent/renderComponent.js

@@ -1,5 +1,5 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { v4 as uuid4 } from "uuid";
 export const RenderComponent = ({ Component, ...props }) => {
-    return React.createElement(Component, { key: uuid4, ...props });
+    return _jsx(Component, { ...props }, uuid4);
 };

package/lib/components/DataDictionary/components/Description/description.d.ts

@@ -1,2 +1,3 @@
+import { JSX } from "react";
 import { DescriptionProps } from "./types";
 export declare const Description: ({ description, }: DescriptionProps) => JSX.Element | null;

package/lib/components/DataDictionary/components/Description/description.js

@@ -1,8 +1,7 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledFluidPaper, StyledMarkdownRenderer } from "./description.styles";
 export const Description = ({ description, }) => {
     if (!description)
         return null;
-    return (React.createElement(StyledFluidPaper, { elevation: 0 },
-        React.createElement(StyledMarkdownRenderer, { value: description })));
+    return (_jsx(StyledFluidPaper, { elevation: 0, children: _jsx(StyledMarkdownRenderer, { value: description }) }));
 };

package/lib/components/DataDictionary/components/Description/description.styles.d.ts

@@ -1,6 +1,4 @@
-export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & 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" | "square" | "elevation" | "variant"> & {
+export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "square" | "elevation" | "variant"> & {
     component?: React.ElementType;
 } & {
     theme?: import("@emotion/react").Theme;

package/lib/components/DataDictionary/components/Description/description.styles.js

@@ -17,7 +17,9 @@ export const StyledMarkdownRenderer = styled(MarkdownRenderer) `
   code {
     all: unset;
     font: inherit;
-    font-family: Roboto Mono, monospace;
+    font-family:
+      Roboto Mono,
+      monospace;
   }
 
   h2,

package/lib/components/DataDictionary/components/Entities/entities.d.ts

@@ -1,4 +1,5 @@
 import { RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { Attribute } from "../../../../common/entities";
 import { ClassesProps } from "./types";
 export declare const Entities: <T extends RowData = Attribute>({ table, }: ClassesProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Entities/entities.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Grid } from "@mui/material";
-import React from "react";
 import { NoResults } from "../../../NoResults/noResults";
 import { Entity } from "../Entity/entity";
 import { GRID_PROPS, NO_RESULTS_PROPS } from "./constants";
@@ -7,6 +7,6 @@ export const Entities = ({ table, }) => {
     const { getGroupedRowModel } = table;
     const { rows } = getGroupedRowModel();
     if (rows.length === 0)
-        return React.createElement(NoResults, { ...NO_RESULTS_PROPS });
-    return (React.createElement(Grid, { ...GRID_PROPS }, rows.map((row) => (React.createElement(Entity, { key: row.id, row: row, table: table })))));
+        return _jsx(NoResults, { ...NO_RESULTS_PROPS });
+    return (_jsx(Grid, { ...GRID_PROPS, children: rows.map((row) => (_jsx(Entity, { row: row, table: table }, row.id))) }));
 };

package/lib/components/DataDictionary/components/Entity/entity.d.ts

@@ -1,4 +1,5 @@
 import { RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { Attribute } from "../../../../common/entities";
 import { EntityProps } from "./types";
 export declare const Entity: <T extends RowData = Attribute>({ row, table, }: EntityProps<T>) => JSX.Element | null;

package/lib/components/DataDictionary/components/Entity/entity.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grid, Typography } from "@mui/material";
-import React from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
 import { Table } from "../Table/table";
@@ -14,12 +14,5 @@ export const Entity = ({ row, table, }) => {
     // Class not found in table meta - return null.
     if (!cls)
         return null;
-    return (React.createElement(Grid, { ...GRID_PROPS, rowGap: 4 },
-        React.createElement(Grid, { ...GRID_PROPS, rowGap: 1 },
-            React.createElement(StyledTypography, { component: "h3", id: classKey, variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL },
-                cls.title,
-                " ",
-                React.createElement(AnchorLink, { anchorLink: classKey })),
-            cls.description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, cls.description))),
-        React.createElement(Table, { row: row, table: table })));
+    return (_jsxs(Grid, { ...GRID_PROPS, rowGap: 4, children: [_jsxs(Grid, { ...GRID_PROPS, rowGap: 1, children: [_jsxs(StyledTypography, { component: "h3", id: classKey, variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL, children: [cls.title, " ", _jsx(AnchorLink, { anchorLink: classKey })] }), cls.description && (_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, children: cls.description }))] }), _jsx(Table, { row: row, table: table })] }));
 };

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.d.ts

@@ -1,4 +1,5 @@
 import { RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { Attribute } from "../../../../../../common/entities";
 import { ColumnFilterTagsProps } from "./types";
 export declare const ColumnFilterTags: <T extends RowData = Attribute>({ className, table, }: ColumnFilterTagsProps<T>) => JSX.Element | null;

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, useMediaQuery } from "@mui/material";
-import React from "react";
 import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
 import { ColumnFilterTag } from "../../../../../Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag";
 import { StyledGrid } from "./columnFilterTags.styles";
@@ -12,7 +12,5 @@ export const ColumnFilterTags = ({ className, table, }) => {
         return null;
     if (isDrawer)
         return null;
-    return (React.createElement(StyledGrid, { className: className, ...GRID_PROPS },
-        columns.map((column) => (React.createElement(ColumnFilterTag, { key: column.id, column: column }))),
-        React.createElement(Button, { onClick: () => resetColumnFilters(true), variant: BUTTON_PROPS.VARIANT.TEXT }, "Clear all")));
+    return (_jsxs(StyledGrid, { className: className, ...GRID_PROPS, children: [columns.map((column) => (_jsx(ColumnFilterTag, { column: column }, column.id))), _jsx(Button, { onClick: () => resetColumnFilters(true), variant: BUTTON_PROPS.VARIANT.TEXT, children: "Clear all" })] }));
 };

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.styles.d.ts

@@ -1,7 +1,5 @@
 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" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "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" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | ("order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "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" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "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/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.d.ts

@@ -1,4 +1,5 @@
 import { RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { Attribute } from "../../../../../../common/entities";
 import { ColumnFiltersProps } from "./types";
 export declare const ColumnFilters: <T extends RowData = Attribute>({ table, }: ColumnFiltersProps<T>) => JSX.Element | null;

package/lib/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ButtonGroup, useMediaQuery } from "@mui/material";
-import React from "react";
 import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
 import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";
 import { ColumnFiltersAdapter } from "../../../../../Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter";
@@ -14,8 +14,8 @@ export const ColumnFilters = ({ table, }) => {
     if (!enableColumnFilters)
         return null;
     if (isDrawer)
-        return (React.createElement(ColumnFiltersAdapter, { table: table, renderSurface: (props) => React.createElement(Drawer, { Button: renderButton, ...props }) }));
-    return (React.createElement(ButtonGroup, { ...BUTTON_GROUP_PROPS.SECONDARY_OUTLINED }, columnFilters.map((column) => (React.createElement(ColumnFilter, { key: column.id, column: column })))));
+        return (_jsx(ColumnFiltersAdapter, { table: table, renderSurface: (props) => _jsx(Drawer, { Button: renderButton, ...props }) }));
+    return (_jsx(ButtonGroup, { ...BUTTON_GROUP_PROPS.SECONDARY_OUTLINED, children: columnFilters.map((column) => (_jsx(ColumnFilter, { column: column }, column.id))) }));
 };
 /**
  * Renders the drawer's open button with the specified size.
@@ -23,5 +23,5 @@ export const ColumnFilters = ({ table, }) => {
  * @returns Button.
  */
 function renderButton(props) {
-    return React.createElement(Button, { size: BUTTON_PROPS.SIZE.LARGE, ...props });
+    return _jsx(Button, { size: BUTTON_PROPS.SIZE.LARGE, ...props });
 }

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

@@ -1,4 +1,5 @@
 import { RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { Attribute } from "../../../../common/entities";
 import { FiltersProps } from "./types";
 export declare const Filters: <T extends RowData = Attribute>({ table, }: FiltersProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Filters/filters.js

@@ -1,9 +1,7 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GlobalFilter } from "../../../Table/components/TableFeatures/GlobalFilter/globalFilter";
 import { ColumnFilters } from "./components/ColumnFilters/columnFilters";
 import { StyledGrid } from "./filters.styles";
 export const Filters = ({ table, }) => {
-    return (React.createElement(StyledGrid, null,
-        React.createElement(GlobalFilter, { placeholder: "Search all attributes...", table: table }),
-        React.createElement(ColumnFilters, { table: table })));
+    return (_jsxs(StyledGrid, { children: [_jsx(GlobalFilter, { placeholder: "Search all attributes...", table: table }), _jsx(ColumnFilters, { table: table })] }));
 };

package/lib/components/DataDictionary/components/Filters/filters.styles.d.ts

@@ -1,7 +1,5 @@
 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" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "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" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | ("order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "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" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "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/DataDictionary/components/Filters/stories/constants.js

@@ -1,4 +1,4 @@
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 export const BIONETWORK = {
     columnDef: { header: "BioNetwork" },
     getCanFilter: () => true,

package/lib/components/DataDictionary/components/Filters/stories/filters.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { Filters } from "../filters";
 declare const meta: Meta<typeof Filters>;
 export default meta;

package/lib/components/DataDictionary/components/Filters/stories/filters.stories.js

@@ -1,7 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "@mui/material";
-import { action } from "@storybook/addon-actions";
 import { functionalUpdate } from "@tanstack/react-table";
-import React from "react";
+import { action } from "storybook/actions";
 import { Filters } from "../filters";
 import { COLUMNS } from "./constants";
 import { useFilterStore, useGlobalFilterStore } from "./hook";
@@ -9,8 +9,7 @@ import { buildColumnFilters } from "./utils";
 const meta = {
     component: Filters,
     decorators: [
-        (Story) => (React.createElement(Box, { sx: { width: 600 } },
-            React.createElement(Story, null))),
+        (Story) => (_jsx(Box, { sx: { width: 600 }, children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -39,8 +38,8 @@ const DefaultStory = () => {
         options: { enableColumnFilters: true, enableGlobalFilter: true },
         setGlobalFilter,
     };
-    return React.createElement(Filters, { table: table });
+    return _jsx(Filters, { table: table });
 };
 export const Default = {
-    render: () => React.createElement(DefaultStory, null),
+    render: () => _jsx(DefaultStory, {}),
 };

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import { EntitiesLayoutProps } from "./types";
-export declare const EntitiesLayout: React.ForwardRefExoticComponent<EntitiesLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export declare const EntitiesLayout: import("react").ForwardRefExoticComponent<EntitiesLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.js

@@ -1,5 +1,6 @@
-import React, { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Layout } from "./entitiesLayout.styles";
 export const EntitiesLayout = forwardRef(function EntitiesLayout({ children, spacing, ...props }, ref) {
-    return (React.createElement(Layout, { ref: ref, ...spacing, ...props }, children));
+    return (_jsx(Layout, { ref: ref, ...spacing, ...props, children: children }));
 });

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import { FiltersLayoutProps } from "./types";
-export declare const FiltersLayout: React.ForwardRefExoticComponent<FiltersLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FiltersLayout: import("react").ForwardRefExoticComponent<FiltersLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.js

@@ -1,5 +1,6 @@
-import React, { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Layout } from "./filtersLayout.styles";
 export const FiltersLayout = forwardRef(function FiltersLayout({ children, ...props }, ref) {
-    return (React.createElement(Layout, { ref: ref, ...props }, children));
+    return (_jsx(Layout, { ref: ref, ...props, children: children }));
 });

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.d.ts

@@ -1,2 +1,3 @@
+import { JSX } from "react";
 import { OutlineLayoutProps } from "./types";
 export declare const OutlineLayout: ({ children, ...props }: OutlineLayoutProps) => JSX.Element;

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.js

@@ -1,6 +1,5 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Layout, LayoutScroller } from "./outlineLayout.styles";
 export const OutlineLayout = ({ children, ...props }) => {
-    return (React.createElement(Layout, { ...props },
-        React.createElement(LayoutScroller, null, children)));
+    return (_jsx(Layout, { ...props, children: _jsx(LayoutScroller, { children: children }) }));
 };

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.d.ts

@@ -1,2 +1,3 @@
+import { JSX } from "react";
 import { TitleLayoutProps } from "./types";
 export declare const TitleLayout: ({ children, ...props }: TitleLayoutProps) => JSX.Element;

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.js

@@ -1,5 +1,5 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Layout } from "./titleLayout.styles";
 export const TitleLayout = ({ children, ...props }) => {
-    return React.createElement(Layout, { ...props }, children);
+    return _jsx(Layout, { ...props, children: children });
 };

package/lib/components/DataDictionary/components/Outline/components/ContentsTab/contentsTab.d.ts

@@ -1 +1,2 @@
+import { JSX } from "react";
 export declare const ContentsTab: () => JSX.Element;

package/lib/components/DataDictionary/components/Outline/components/ContentsTab/contentsTab.js

@@ -1,6 +1,6 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TAB_PROPS } from "./constants";
 import { StyledContentsTab } from "./contentsTab.styles";
 export const ContentsTab = () => {
-    return React.createElement(StyledContentsTab, { ...TAB_PROPS });
+    return _jsx(StyledContentsTab, { ...TAB_PROPS });
 };

package/lib/components/DataDictionary/components/Outline/outline.d.ts

@@ -1,2 +1,3 @@
+import { JSX } from "react";
 import { OutlineProps } from "./types";
 export declare const Outline: ({ outline, ...props }: OutlineProps) => JSX.Element;

package/lib/components/DataDictionary/components/Outline/outline.js

@@ -1,6 +1,6 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ContentsTab } from "./components/ContentsTab/contentsTab";
 import { StyledOutline } from "./outline.styles";
 export const Outline = ({ outline, ...props /* MuiTabsProps */ }) => {
-    return React.createElement(StyledOutline, { Contents: ContentsTab, outline: outline, ...props });
+    return _jsx(StyledOutline, { Contents: ContentsTab, outline: outline, ...props });
 };

package/lib/components/DataDictionary/components/Table/components/BasicCell/basicCell.d.ts

@@ -1,3 +1,3 @@
 import { CellContext, RowData } from "@tanstack/react-table";
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 export declare const BasicCell: <T extends RowData, TValue extends ReactNode = ReactNode>({ getValue, }: CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/DataDictionary/components/Table/components/BasicCell/basicCell.js

@@ -1,10 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
-import React from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { parseValue } from "./utils";
 export const BasicCell = ({ getValue, }) => {
     const value = getValue();
     if (value === undefined || value === null)
         return null;
-    return (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT }, parseValue(value)));
+    return (_jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, children: parseValue(value) }));
 };

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

@@ -1,3 +1,4 @@
 import { RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { TableProps } from "./types";
 export declare const Table: <T extends RowData>({ row, table, }: TableProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Table/table.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TableContainer } from "@mui/material";
-import React from "react";
 import { useBreakpoint } from "../../../../hooks/useBreakpoint";
 import { TableBody } from "../../../Detail/components/Table/components/TableBody/tableBody";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
@@ -10,9 +10,5 @@ import { StyledFluidPaper } from "./table.styles";
 export const Table = ({ row, table, }) => {
     const { smDown } = useBreakpoint();
     const rowDirection = smDown ? ROW_DIRECTION.VERTICAL : ROW_DIRECTION.DEFAULT;
-    return (React.createElement(StyledFluidPaper, { elevation: 0 },
-        React.createElement(TableContainer, null,
-            React.createElement(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(table.getVisibleFlatColumns()) },
-                React.createElement(TableHead, { tableInstance: table }),
-                React.createElement(TableBody, { rowDirection: rowDirection, rows: row.getLeafRows(), tableInstance: table })))));
+    return (_jsx(StyledFluidPaper, { elevation: 0, children: _jsx(TableContainer, { children: _jsxs(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(table.getVisibleFlatColumns()), children: [_jsx(TableHead, { tableInstance: table }), _jsx(TableBody, { rowDirection: rowDirection, rows: row.getLeafRows(), tableInstance: table })] }) }) }));
 };

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

@@ -1,6 +1,4 @@
-export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & 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" | "square" | "elevation" | "variant"> & {
+export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "square" | "elevation" | "variant"> & {
     component?: React.ElementType;
 } & {
     theme?: import("@emotion/react").Theme;

package/lib/components/DataDictionary/components/Title/title.d.ts

@@ -1,2 +1,3 @@
 import { TypographyProps } from "@mui/material";
+import { JSX } from "react";
 export declare const Title: ({ children, ...props }: TypographyProps) => JSX.Element;