@databiosphere/findable-ui 35.1.0 → 36.0.0

package/lib/components/DataDictionary/dataDictionary.js

@@ -1,25 +1,44 @@
+import { Fade } from "@mui/material";
 import React from "react";
 import { Entities } from "./components/Entities/entities";
+import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
 import { Filters } from "./components/Filters/filters";
 import { EntitiesLayout as DefaultEntitiesLayout } from "./components/Layout/components/EntitiesLayout/entitiesLayout";
 import { FiltersLayout as DefaultFiltersLayout } from "./components/Layout/components/FiltersLayout/filtersLayout";
 import { OutlineLayout as DefaultOutlineLayout } from "./components/Layout/components/OutlineLayout/outlineLayout";
 import { TitleLayout as DefaultTitleLayout } from "./components/Layout/components/TitleLayout/titleLayout";
 import { Outline as DefaultOutline } from "./components/Outline/outline";
+import { buildClassesOutline } from "./components/Outline/utils";
+import { useTable } from "./components/Table/hook";
 import { Title as DefaultTitle } from "./components/Title/title";
 import { View } from "./dataDictionary.styles";
-import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
+import { useDataDictionaryConfig } from "./hooks/UseDataDictionaryConfig/hook";
 import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
-export const DataDictionary = ({ className, EntitiesLayout = DefaultEntitiesLayout, FiltersLayout = DefaultFiltersLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
-    const { outline, table, title } = useDataDictionary();
+import { useMeasureFilters } from "./hooks/UseMeasureFilters/hook";
+export const DataDictionary = ({ className, dictionary, EntitiesLayout = DefaultEntitiesLayout, FiltersLayout = DefaultFiltersLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
+    // Get dictionary configuration.
+    const { classes, tableOptions, title } = useDataDictionaryConfig(dictionary);
+    // Layout measurements.
+    // Get header and footer dimensions.
     const { spacing } = useLayoutSpacing();
-    return (React.createElement(View, { className: className },
-        React.createElement(TitleLayout, { ...spacing },
-            React.createElement(Title, { title: title })),
-        React.createElement(OutlineLayout, { ...spacing },
-            React.createElement(Outline, { outline: outline })),
-        React.createElement(FiltersLayout, { ...spacing },
-            React.createElement(Filters, { table: table })),
-        React.createElement(EntitiesLayout, { ...spacing },
-            React.createElement(Entities, { spacing: spacing, table: table }))));
+    // Measure filters dimensions.
+    const { dimensions, filtersRef } = useMeasureFilters();
+    // Update entities' spacing with filters dimensions.
+    const entitiesSpacing = { ...spacing, top: dimensions.height };
+    // Table instance.
+    const table = useTable(dictionary, classes, tableOptions);
+    // Dictionary outline.
+    const outline = buildClassesOutline(table);
+    return (React.createElement(Fade, { in: spacing.top > 0 },
+        React.createElement(View, { className: className },
+            React.createElement(TitleLayout, { ...spacing },
+                React.createElement(Title, { title: title })),
+            React.createElement(OutlineLayout, { ...spacing },
+                React.createElement(Outline, { outline: outline })),
+            React.createElement(FiltersLayout, { ref: filtersRef, ...spacing },
+                React.createElement(Filters, { table: table }),
+                React.createElement(ColumnFilterTags, { table: table })),
+            React.createElement(Fade, { in: dimensions.height > 0 },
+                React.createElement(EntitiesLayout, { spacing: entitiesSpacing },
+                    React.createElement(Entities, { spacing: entitiesSpacing, table: table }))))));
 };

package/lib/components/DataDictionary/hooks/UseDataDictionaryConfig/hook.d.ts

@@ -0,0 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+import { UseDataDictionaryConfig } from "./types";
+export declare const useDataDictionaryConfig: <T extends RowData = Attribute>(dictionary: string) => UseDataDictionaryConfig<T>;

package/lib/components/DataDictionary/hooks/UseDataDictionaryConfig/hook.js

@@ -0,0 +1,27 @@
+import { useMemo } from "react";
+import { useConfig } from "../../../../hooks/useConfig";
+import { throwDictionaryConfigNotFoundError } from "./utils";
+export const useDataDictionaryConfig = (dictionary) => {
+    const { config: { dataDictionaries: dataDictionaryConfigs }, } = useConfig();
+    // Get dictionary config by matching the current path with the data dictionary path
+    const dataDictionaryConfig = useMemo(() => {
+        if (!dataDictionaryConfigs?.length)
+            return undefined;
+        // Find the data dictionary with a path that matches the current route
+        // We check if the current path starts with the dictionary path to handle nested routes
+        return dataDictionaryConfigs.find((config) => config.path === dictionary);
+    }, [dataDictionaryConfigs, dictionary]);
+    // Throw error if the dictionary config is not found.
+    if (!dataDictionaryConfig)
+        throwDictionaryConfigNotFoundError(dictionary);
+    // Get configured dictionary classes, column definitions and table options.
+    return useMemo(() => {
+        // Using non-null assertion (!) because we've already checked dataDictionaryConfig
+        // exists above and would have thrown an error if undefined.
+        return {
+            classes: dataDictionaryConfig.dataDictionary.classes,
+            tableOptions: dataDictionaryConfig.tableOptions,
+            title: dataDictionaryConfig.dataDictionary.title,
+        };
+    }, [dataDictionaryConfig]);
+};

package/lib/components/DataDictionary/hooks/UseDataDictionaryConfig/types.d.ts

@@ -0,0 +1,7 @@
+import { RowData, TableOptions } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
+export interface UseDataDictionaryConfig<T extends RowData = Attribute> {
+    classes: Class<T>[];
+    tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">;
+    title: string;
+}

package/lib/components/DataDictionary/hooks/UseDataDictionaryConfig/types.js

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

package/lib/components/DataDictionary/hooks/UseDataDictionaryConfig/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Error thrown when a dictionary config is not found.
+ * @param dictionary - Dictionary ID.
+ * @throws Error - Dictionary config not found.
+ */
+export declare function throwDictionaryConfigNotFoundError(dictionary: string): void;

package/lib/components/DataDictionary/hooks/UseDataDictionaryConfig/utils.js

@@ -0,0 +1,8 @@
+/**
+ * Error thrown when a dictionary config is not found.
+ * @param dictionary - Dictionary ID.
+ * @throws Error - Dictionary config not found.
+ */
+export function throwDictionaryConfigNotFoundError(dictionary) {
+    throw new Error(`Dictionary config not found for dictionary: ${dictionary}`);
+}

package/lib/components/DataDictionary/hooks/UseMeasureFilters/hook.d.ts

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

package/lib/components/DataDictionary/hooks/UseMeasureFilters/hook.js

@@ -0,0 +1,17 @@
+import { useRef } from "react";
+import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../hooks/useResizeObserver";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+export const useMeasureFilters = () => {
+    // Get header dimensions.
+    const { dimensions } = useLayoutDimensions();
+    const { header } = dimensions;
+    // Measure filters dimensions.
+    const filtersRef = useRef(null);
+    const filtersRect = useResizeObserver(filtersRef, getBorderBoxSizeHeight, header.height > 0 // Only measure filters height, when header measurement is available.
+    );
+    const { height = 0 } = filtersRect || {};
+    return {
+        dimensions: { height },
+        filtersRef,
+    };
+};

package/lib/components/DataDictionary/hooks/UseMeasureFilters/types.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from "react";
+export interface UseMeasureFilters {
+    dimensions: {
+        height: number;
+    };
+    filtersRef: RefObject<HTMLElement> | null;
+}

package/lib/components/DataDictionary/hooks/UseMeasureFilters/types.js

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

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

@@ -1,6 +1,7 @@
 import { ElementType } from "react";
 import { BaseComponentProps } from "../types";
 export interface DataDictionaryProps extends BaseComponentProps {
+    dictionary: string;
     EntitiesLayout?: ElementType;
     FiltersLayout?: ElementType;
     Outline?: ElementType;

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.js

@@ -1,49 +1,41 @@
-import { ButtonBase, TableBody, TableCell, TableRow, Tooltip, } from "@mui/material";
+import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
-import React, { useRef } from "react";
+import React from "react";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestDownload } from "../../../../../../../../hooks/useFileManifest/useFileManifestDownload";
 import { useLoginGuard } from "../../../../../../../../providers/loginGuard/hook";
+import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
-import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import { ContentCopyIconSmall, DownloadIconSmall, } from "../../../../../../../common/CustomIcon/common/constants";
 import { FluidPaper, GridPaper, } from "../../../../../../../common/Paper/paper.styles";
 import { Loading, LOADING_PANEL_STYLE, } from "../../../../../../../Loading/loading";
 import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
+import { TOOLTIP_PROPS } from "../../constants";
 import { SectionTitle, TableContainer, } from "../../manifestDownloadEntity.styles";
 export const FileManifestDownload = ({ filters, }) => {
-    const downloadRef = useRef(null);
     const { disabled, message } = useDownloadStatus();
-    const { fileName, isIdle, isLoading, manifestURL } = useFileManifestDownload(filters, disabled);
-    const isInProgress = (isIdle || isLoading) && !disabled;
-    const isReady = Boolean(manifestURL) || disabled;
+    const { fileName, isIdle, isLoading, manifestURL, requestManifest } = useFileManifestDownload(filters);
     // Prompt user for login before download and copy, if required.
     const { requireLogin } = useLoginGuard();
-    // Copies file manifest.
-    const copyManifestURL = (url) => {
-        if (!url)
-            return;
-        copy(url);
-    };
-    // Downloads file manifest.
-    const downloadManifestURL = () => {
-        downloadRef.current?.click();
-    };
     return (React.createElement(FluidPaper, null,
         React.createElement(GridPaper, null,
             React.createElement(SectionTitle, null, "File Manifest"),
             React.createElement(TableContainer, null,
-                React.createElement(Loading, { loading: isInProgress, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
-                React.createElement(GridTable, { gridTemplateColumns: isReady ? "auto 1fr" : "1fr" },
+                React.createElement(Loading, { loading: isLoading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+                React.createElement(GridTable, { gridTemplateColumns: "auto 1fr" },
                     React.createElement(TableBody, null,
-                        React.createElement(TableRow, null, isInProgress ? (React.createElement(TableCell, null)) : isReady ? (React.createElement(React.Fragment, null,
-                            React.createElement(TableCell, null,
-                                React.createElement(ButtonBase, { disabled: disabled, href: manifestURL ?? "", ref: downloadRef, sx: { display: "none" } }),
-                                React.createElement(Tooltip, { arrow: true, title: message },
-                                    React.createElement("span", null,
-                                        React.createElement(ButtonGroup, { Buttons: [
-                                                React.createElement(ButtonGroupButton, { key: "download", action: "Download file manifest", disabled: disabled, label: React.createElement(DownloadIconSmall, null), onClick: () => requireLogin(downloadManifestURL) }),
-                                                React.createElement(ButtonGroupButton, { key: "copy", action: "Copy file manifest", disabled: disabled, label: React.createElement(ContentCopyIconSmall, null), onClick: () => requireLogin(() => copyManifestURL(manifestURL)) }),
-                                            ] })))),
-                            React.createElement(TableCell, null, fileName))) : (React.createElement(TableCell, null, "The manifest is not available for this project.")))))))));
+                        React.createElement(TableRow, null, isIdle || isLoading ? (React.createElement(TableCell, null,
+                            React.createElement(Tooltip, { ...TOOLTIP_PROPS, title: message },
+                                React.createElement("span", null,
+                                    React.createElement(Button, { ...BUTTON_PROPS.PRIMARY_CONTAINED, disabled: disabled || isLoading, onClick: () => requireLogin(requestManifest) }, "Request link"))))) : (React.createElement(React.Fragment, null,
+                            manifestURL && (React.createElement(TableCell, null,
+                                React.createElement(ButtonGroup, { Buttons: [
+                                        React.createElement(Button, { key: "download", download: true, href: manifestURL },
+                                            React.createElement(DownloadIconSmall, null)),
+                                        React.createElement(Button, { key: "copy", onClick: () => copy(manifestURL) },
+                                            React.createElement(ContentCopyIconSmall, null)),
+                                    ] }))),
+                            React.createElement(TableCell, null, manifestURL
+                                ? fileName
+                                : "The manifest is not available for this project."))))))))));
 };

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestSpreadsheet/fileManifestSpreadsheet.js

@@ -1,53 +1,38 @@
-import { ButtonBase, TableBody, TableCell, TableRow, Tooltip, } from "@mui/material";
+import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestSpreadsheet } from "../../../../../../../../hooks/useFileManifest/useFileManifestSpreadsheet";
-import { useRequestFileLocation } from "../../../../../../../../hooks/useRequestFileLocation";
+import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
-import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import { ContentCopyIconSmall, DownloadIconSmall, } from "../../../../../../../common/CustomIcon/common/constants";
 import { FluidPaper, GridPaper, } from "../../../../../../../common/Paper/paper.styles";
 import { Loading, LOADING_PANEL_STYLE, } from "../../../../../../../Loading/loading";
 import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
+import { TOOLTIP_PROPS } from "../../constants";
 import { SectionTitle, TableContainer, } from "../../manifestDownloadEntity.styles";
 export const FileManifestSpreadsheet = ({ filters, }) => {
-    const downloadRef = useRef(null);
     const { disabled, message } = useDownloadStatus();
-    const { exists, fileName, fileUrl } = useFileManifestSpreadsheet(filters, disabled) || {};
-    const { data, isLoading, run } = useRequestFileLocation(fileUrl);
-    const spreadsheetURL = data?.location;
-    const isInProgress = (exists === undefined || isLoading) && !disabled;
-    const isReady = Boolean(spreadsheetURL) || disabled;
-    // Copies metadata spreadsheet.
-    const copyMetadataURL = (url) => {
-        if (!url)
-            return;
-        copy(url);
-    };
-    // Downloads metadata spreadsheet.
-    const downloadMetadataURL = () => {
-        downloadRef.current?.click();
-    };
-    // Requests metadata spreadsheet.
-    useEffect(() => {
-        run();
-    }, [fileUrl, run]);
+    const { fileName, isIdle = false, isLoading = false, requestManifest, spreadsheetUrl, } = useFileManifestSpreadsheet(filters) || {};
     return (React.createElement(FluidPaper, null,
         React.createElement(GridPaper, null,
             React.createElement(SectionTitle, null, "Metadata"),
             React.createElement(TableContainer, null,
-                React.createElement(Loading, { loading: isInProgress, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
-                React.createElement(GridTable, { gridTemplateColumns: isReady ? "auto 1fr" : "1fr" },
+                React.createElement(Loading, { loading: isLoading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+                React.createElement(GridTable, { gridTemplateColumns: "auto 1fr" },
                     React.createElement(TableBody, null,
-                        React.createElement(TableRow, null, isInProgress ? (React.createElement(TableCell, null)) : isReady ? (React.createElement(React.Fragment, null,
-                            React.createElement(TableCell, null,
-                                React.createElement(ButtonBase, { disabled: disabled, download: true, href: spreadsheetURL ?? "", ref: downloadRef, sx: { display: "none" } }),
-                                React.createElement(Tooltip, { arrow: true, title: message },
-                                    React.createElement("span", null,
-                                        React.createElement(ButtonGroup, { Buttons: [
-                                                React.createElement(ButtonGroupButton, { key: "download", action: "Download metadata spreadsheet", disabled: disabled, label: React.createElement(DownloadIconSmall, null), onClick: downloadMetadataURL }),
-                                                React.createElement(ButtonGroupButton, { key: "copy", action: "Copy metadata spreadsheet", disabled: disabled, label: React.createElement(ContentCopyIconSmall, null), onClick: () => copyMetadataURL(spreadsheetURL) }),
-                                            ] })))),
-                            React.createElement(TableCell, null, fileName))) : (React.createElement(TableCell, null, "The metadata is not available for this project.")))))))));
+                        React.createElement(TableRow, null, isIdle || isLoading ? (React.createElement(TableCell, null,
+                            React.createElement(Tooltip, { ...TOOLTIP_PROPS, title: message },
+                                React.createElement("span", null,
+                                    React.createElement(Button, { ...BUTTON_PROPS.PRIMARY_CONTAINED, disabled: disabled || isLoading, onClick: () => requestManifest?.() }, "Request link"))))) : (React.createElement(React.Fragment, null,
+                            spreadsheetUrl && (React.createElement(TableCell, null,
+                                React.createElement(ButtonGroup, { Buttons: [
+                                        React.createElement(Button, { key: "download", download: true, href: spreadsheetUrl },
+                                            React.createElement(DownloadIconSmall, null)),
+                                        React.createElement(Button, { key: "copy", onClick: () => copy(spreadsheetUrl) },
+                                            React.createElement(ContentCopyIconSmall, null)),
+                                    ] }))),
+                            React.createElement(TableCell, null, spreadsheetUrl
+                                ? fileName
+                                : "The metadata is not available for this project."))))))))));
 };

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/constants.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from "@mui/material";
+export declare const TOOLTIP_PROPS: Partial<TooltipProps>;

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/constants.js

@@ -0,0 +1,22 @@
+export const TOOLTIP_PROPS = {
+    arrow: true,
+    slotProps: {
+        popper: {
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, -4],
+                    },
+                },
+                {
+                    name: "preventOverflow",
+                    options: { padding: 8 },
+                },
+            ],
+        },
+        tooltip: {
+            sx: { maxWidth: "none" },
+        },
+    },
+};

package/lib/components/Filter/components/FilterCountChip/filterCountChip.d.ts

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

package/lib/components/Filter/components/FilterCountChip/filterCountChip.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { CHIP_PROPS } from "../../../../styles/common/mui/chip";
+import { StyledChip } from "./filterCountChip.styles";
+export const FilterCountChip = ({ className, count, ...props /* MuiChipProps */ }) => {
+    if (!count)
+        return null;
+    return (React.createElement(StyledChip, { className: className, color: CHIP_PROPS.COLOR.PRIMARY, label: String(count), variant: CHIP_PROPS.VARIANT.FILLED, ...props }));
+};

package/lib/components/Filter/components/FilterCountChip/filterCountChip.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & 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;
+}, "label" | "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/lib/components/Filter/components/FilterCountChip/filterCountChip.styles.js

@@ -0,0 +1,18 @@
+import { Chip, styled } from "@mui/material";
+export const StyledChip = styled(Chip) `
+  align-items: center;
+  border-radius: 10px;
+  flex: none;
+  gap: 0;
+  height: 16px;
+  justify-content: center;
+  min-width: 16px;
+  padding: 0 4px;
+
+  .MuiChip-label {
+    font-size: 9px;
+    font-weight: 600;
+    line-height: 16px;
+    padding: 0;
+  }
+`;

package/lib/components/Filter/components/FilterCountChip/stories/filterCountChip.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FilterCountChip } from "../filterCountChip";
+declare const meta: Meta<typeof FilterCountChip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DEFAULT: Story;

package/lib/components/Filter/components/FilterCountChip/stories/filterCountChip.stories.js

@@ -0,0 +1,6 @@
+import { FilterCountChip } from "../filterCountChip";
+const meta = {
+    component: FilterCountChip,
+};
+export default meta;
+export const DEFAULT = { args: { count: 1, onDelete: undefined } };

package/lib/components/Filter/components/FilterCountChip/types.d.ts

@@ -0,0 +1,5 @@
+import { ChipProps } from "@mui/material";
+import { BaseComponentProps } from "../../../types";
+export interface FilterCountChipProps extends BaseComponentProps, ChipProps {
+    count?: number | string;
+}

package/lib/components/Filter/components/FilterCountChip/types.js

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

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.d.ts

@@ -18,6 +18,6 @@ export declare const UserNames: import("@emotion/styled").StyledComponent<import
 }, {}, {}>;
 export declare const StyledAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & 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" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slots" | "slotProps" | "imgProps"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slotProps" | "slots" | "imgProps"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Outline/outline.styles.d.ts

@@ -5,7 +5,7 @@ interface Props extends TabProps {
 export declare const tab: import("@emotion/react").SerializedStyles;
 export declare const StyledTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & 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" | "aria-label" | "aria-labelledby" | "children" | "onChange" | "sx" | "variant" | "orientation" | "value" | "action" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
+}, "style" | "className" | "classes" | "aria-label" | "aria-labelledby" | "children" | "onChange" | "sx" | "variant" | "orientation" | "value" | "action" | "slotProps" | "slots" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/lib/components/Table/columnDef/globalFilter/constants.d.ts

@@ -0,0 +1,2 @@
+import { RankItemOptions } from "@tanstack/match-sorter-utils";
+export declare const RANK_ITEM_OPTIONS: RankItemOptions;

package/lib/components/Table/columnDef/globalFilter/constants.js

@@ -0,0 +1,4 @@
+import { rankings } from "@tanstack/match-sorter-utils";
+export const RANK_ITEM_OPTIONS = {
+    threshold: rankings.CONTAINS,
+};

package/lib/components/Table/columnDef/globalFilter/filterFn.d.ts

@@ -0,0 +1,13 @@
+import { FilterMeta, Row, RowData } from "@tanstack/react-table";
+/**
+ * Fuzzy matches a column against search terms.
+ * A true value is returned if the column's value passes the ranking threshold.
+ * Normally, TanStack global filtering will not process remaining row columns if a match is found.
+ * This function ranks other row columns for highlighting purposes.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @param value - Search term.
+ * @param addMeta - Function to add filter metadata.
+ * @returns Whether the row passed the filter.
+ */
+export declare function fuzzy<T extends RowData>(row: Row<T>, columnId: string, value: unknown, addMeta: (meta: FilterMeta) => void): boolean;

package/lib/components/Table/columnDef/globalFilter/filterFn.js

@@ -0,0 +1,24 @@
+import { parseSearchTerms, rankColumnValue, rankRowColumns } from "./utils";
+/**
+ * Fuzzy matches a column against search terms.
+ * A true value is returned if the column's value passes the ranking threshold.
+ * Normally, TanStack global filtering will not process remaining row columns if a match is found.
+ * This function ranks other row columns for highlighting purposes.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @param value - Search term.
+ * @param addMeta - Function to add filter metadata.
+ * @returns Whether the row passed the filter.
+ */
+export function fuzzy(row, columnId, value, addMeta) {
+    // Split the search term into terms.
+    const terms = parseSearchTerms(value);
+    // Rank the column value.
+    const passed = rankColumnValue(row, columnId, terms);
+    // Add the filter metadata.
+    addMeta({ passed });
+    // Rank other columns for highlighting purposes (TanStack global filtering will not process remaining columns if a match is found).
+    if (passed)
+        rankRowColumns(row, columnId, terms);
+    return passed;
+}

package/lib/components/Table/columnDef/globalFilter/types.d.ts

@@ -0,0 +1,4 @@
+import { FilterMeta } from "@tanstack/react-table";
+export interface ColumnFilterMeta extends FilterMeta {
+    passed?: boolean;
+}

package/lib/components/Table/columnDef/globalFilter/types.js

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

package/lib/components/Table/columnDef/globalFilter/utils.d.ts

@@ -0,0 +1,23 @@
+import { Row, RowData } from "@tanstack/react-table";
+/**
+ * Parses a search term into an array of terms.
+ * @param value - Search term.
+ * @returns Array of terms.
+ */
+export declare function parseSearchTerms(value: unknown): string[];
+/**
+ * Ranks a column's value against search terms.
+ * @param row - Row to rank.
+ * @param columnId - Column identifier.
+ * @param terms - Search terms to match against.
+ * @returns Whether the value passed.
+ */
+export declare function rankColumnValue<T extends RowData>(row: Row<T>, columnId: string, terms: string[]): boolean;
+/**
+ * Ranks a row's columns against search terms.
+ * Processes columns that are searchable and have not already been processed.
+ * @param row - Row to rank.
+ * @param columnId - Column identifier.
+ * @param terms - Search terms to match against.
+ */
+export declare function rankRowColumns<T extends RowData>(row: Row<T>, columnId: string, terms: string[]): void;

package/lib/components/Table/columnDef/globalFilter/utils.js

@@ -0,0 +1,57 @@
+import { rankItem } from "@tanstack/match-sorter-utils";
+import { RANK_ITEM_OPTIONS } from "./constants";
+/**
+ * Parses a search term into an array of terms.
+ * @param value - Search term.
+ * @returns Array of terms.
+ */
+export function parseSearchTerms(value) {
+    return String(value ?? "")
+        .toLowerCase()
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean);
+}
+/**
+ * Ranks a column's value against search terms.
+ * @param row - Row to rank.
+ * @param columnId - Column identifier.
+ * @param terms - Search terms to match against.
+ * @returns Whether the value passed.
+ */
+export function rankColumnValue(row, columnId, terms) {
+    // Get the column value.
+    const columnValue = row.getValue(columnId);
+    // Return false if the column value is undefined or null.
+    if (columnValue === undefined || columnValue === null)
+        return false;
+    // Check if each term matches the column value.
+    // Ranking from CASE_SENSITIVE_EQUAL to CONTAINS (excludes `ACRONYM`, `MATCHES` threshold).
+    const rankings = terms.map((term) => rankItem(String(columnValue), term, RANK_ITEM_OPTIONS));
+    return rankings.every(({ passed }) => passed);
+}
+/**
+ * Ranks a row's columns against search terms.
+ * Processes columns that are searchable and have not already been processed.
+ * @param row - Row to rank.
+ * @param columnId - Column identifier.
+ * @param terms - Search terms to match against.
+ */
+export function rankRowColumns(row, columnId, terms) {
+    const columnFiltersMeta = row.columnFiltersMeta;
+    // Process other columns.
+    for (const { column } of row.getAllCells()) {
+        // Column is not searchable.
+        if (!column.getCanGlobalFilter())
+            continue;
+        // Column has already been processed.
+        if (column.id === columnId)
+            continue;
+        if (column.id in columnFiltersMeta)
+            continue;
+        // Rank the column value.
+        const passed = rankColumnValue(row, column.id, terms);
+        // Add the filter metadata.
+        row.columnFiltersMeta[column.id] = { passed };
+    }
+}

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.d.ts

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

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { CHIP_PROPS } from "../../../../../../styles/common/mui/chip";
+import { StyledChip } from "./codeCell.styles";
+export const CodeCell = ({ className, getValue, }) => {
+    const value = getValue();
+    if (!value)
+        return null;
+    return (React.createElement(StyledChip, { className: className, color: CHIP_PROPS.COLOR.DEFAULT, label: value, size: CHIP_PROPS.SIZE.SMALL }));
+};

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & 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;
+}, "label" | "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;