@databiosphere/findable-ui 35.2.0 → 37.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/DownloadCurlCommand/downloadCurlCommand.d.ts

@@ -13,6 +13,7 @@ interface DownloadCurlCommandProps {
     filters: Filters;
     formFacet: FormFacet;
     manifestDownloadFormat?: ManifestDownloadFormat;
+    speciesFacetName: string;
 }
-export declare const DownloadCurlCommand: ({ DownloadCurlForm, DownloadCurlStart, DownloadCurlSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, manifestDownloadFormat, }: DownloadCurlCommandProps) => JSX.Element;
+export declare const DownloadCurlCommand: ({ DownloadCurlForm, DownloadCurlStart, DownloadCurlSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, manifestDownloadFormat, speciesFacetName, }: DownloadCurlCommandProps) => JSX.Element;
 export {};

package/lib/components/Export/components/DownloadCurlCommand/downloadCurlCommand.js

@@ -2,14 +2,16 @@ import React, { useState } from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
+import { useFileManifestFileCount } from "../../../../hooks/useFileManifest/useFileManifestFileCount";
 import { useRequestFileLocation, } from "../../../../hooks/useRequestFileLocation";
 import { useRequestManifest } from "../../../../hooks/useRequestManifest/useRequestManifest";
 import { BULK_DOWNLOAD_EXECUTION_ENVIRONMENT, } from "../../common/entities";
 import { trackBulkDownloadRequested } from "../../common/tracking";
 import { DownloadCurlCommandNotStarted } from "./components/DownloadCurlCommandNotStarted/downloadCurlCommandNotStarted";
 import { DownloadCurlCommandReady } from "./components/DownloadCurlCommandReady/downloadCurlCommandReady";
-export const DownloadCurlCommand = ({ DownloadCurlForm, DownloadCurlStart, DownloadCurlSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, manifestDownloadFormat = MANIFEST_DOWNLOAD_FORMAT.CURL, }) => {
+export const DownloadCurlCommand = ({ DownloadCurlForm, DownloadCurlStart, DownloadCurlSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, manifestDownloadFormat = MANIFEST_DOWNLOAD_FORMAT.CURL, speciesFacetName, }) => {
     useFileManifest(filters, fileSummaryFacetName);
+    useFileManifestFileCount(filters, speciesFacetName, fileSummaryFacetName);
     const [executionEnvironment, setExecutionEnvironment] = useState(BULK_DOWNLOAD_EXECUTION_ENVIRONMENT.BASH);
     const { exploreState: { tabValue: entityList }, } = useExploreState();
     const { requestMethod, requestUrl } = useRequestManifest(manifestDownloadFormat, formFacet);

package/lib/components/Export/components/ExportToTerra/exportToTerra.d.ts

@@ -14,5 +14,6 @@ export interface ExportToTerraProps {
     formFacet: FormFacet;
     manifestDownloadFormat?: ManifestDownloadFormat;
     manifestDownloadFormats: ManifestDownloadFormat[];
+    speciesFacetName: string;
 }
-export declare const ExportToTerra: ({ ExportForm, ExportToTerraStart, ExportToTerraSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, manifestDownloadFormat, manifestDownloadFormats, }: ExportToTerraProps) => JSX.Element;
+export declare const ExportToTerra: ({ ExportForm, ExportToTerraStart, ExportToTerraSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, manifestDownloadFormat, manifestDownloadFormats, speciesFacetName, }: ExportToTerraProps) => JSX.Element;

package/lib/components/Export/components/ExportToTerra/exportToTerra.js

@@ -2,15 +2,17 @@ import React from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { useExportToTerraResponseURL } from "../../../../hooks/useExportToTerraResponseURL";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
+import { useFileManifestFileCount } from "../../../../hooks/useFileManifest/useFileManifestFileCount";
 import { useFileManifestFormat } from "../../../../hooks/useFileManifest/useFileManifestFormat";
 import { useRequestFileLocation } from "../../../../hooks/useRequestFileLocation";
 import { useRequestManifest } from "../../../../hooks/useRequestManifest/useRequestManifest";
 import { trackExportToTerraRequested } from "../../common/tracking";
 import { ExportToTerraNotStarted } from "./components/ExportToTerraNotStarted/exportToTerraNotStarted";
 import { ExportToTerraReady } from "./components/ExportToTerraReady/exportToTerraReady";
-export const ExportToTerra = ({ ExportForm, ExportToTerraStart, ExportToTerraSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, manifestDownloadFormat, manifestDownloadFormats, }) => {
+export const ExportToTerra = ({ ExportForm, ExportToTerraStart, ExportToTerraSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, manifestDownloadFormat, manifestDownloadFormats, speciesFacetName, }) => {
     const { exploreState: { tabValue: entityList }, } = useExploreState();
     useFileManifest(filters, fileSummaryFacetName);
+    useFileManifestFileCount(filters, speciesFacetName, fileSummaryFacetName);
     const fileManifestFormatState = useFileManifestFormat(manifestDownloadFormat);
     const { requestMethod, requestParams, requestUrl } = useRequestManifest(fileManifestFormatState.fileManifestFormat, formFacet);
     const { data, isLoading, run } = useRequestFileLocation(requestUrl, requestMethod);

package/lib/components/Export/components/ManifestDownload/manifestDownload.d.ts

@@ -13,5 +13,6 @@ export interface ManifestDownloadProps {
     manifestDownloadFormat?: ManifestDownloadFormat;
     ManifestDownloadStart: ElementType;
     ManifestDownloadSuccess: ElementType;
+    speciesFacetName: string;
 }
-export declare const ManifestDownload: ({ fileManifestState, fileSummaryFacetName, filters, formFacet, ManifestDownloadForm, manifestDownloadFormat, ManifestDownloadStart, ManifestDownloadSuccess, }: ManifestDownloadProps) => JSX.Element;
+export declare const ManifestDownload: ({ fileManifestState, fileSummaryFacetName, filters, formFacet, ManifestDownloadForm, manifestDownloadFormat, ManifestDownloadStart, ManifestDownloadSuccess, speciesFacetName, }: ManifestDownloadProps) => JSX.Element;

package/lib/components/Export/components/ManifestDownload/manifestDownload.js

@@ -2,13 +2,15 @@ import React from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
+import { useFileManifestFileCount } from "../../../../hooks/useFileManifest/useFileManifestFileCount";
 import { useRequestFileLocation, } from "../../../../hooks/useRequestFileLocation";
 import { useRequestManifest } from "../../../../hooks/useRequestManifest/useRequestManifest";
 import { trackFileManifestRequested } from "../../common/tracking";
 import { ManifestDownloadNotStarted } from "./components/ManifestDownloadNotStarted/manifestDownloadNotStarted";
 import { ManifestDownloadReady } from "./components/ManifestDownloadReady/manifestDownloadReady";
-export const ManifestDownload = ({ fileManifestState, fileSummaryFacetName, filters, formFacet, ManifestDownloadForm, manifestDownloadFormat = MANIFEST_DOWNLOAD_FORMAT.COMPACT, ManifestDownloadStart, ManifestDownloadSuccess, }) => {
+export const ManifestDownload = ({ fileManifestState, fileSummaryFacetName, filters, formFacet, ManifestDownloadForm, manifestDownloadFormat = MANIFEST_DOWNLOAD_FORMAT.COMPACT, ManifestDownloadStart, ManifestDownloadSuccess, speciesFacetName, }) => {
     useFileManifest(filters, fileSummaryFacetName);
+    useFileManifestFileCount(filters, speciesFacetName, fileSummaryFacetName);
     const { exploreState: { tabValue: entityList }, } = useExploreState();
     const { requestMethod, requestUrl } = useRequestManifest(manifestDownloadFormat, formFacet);
     const { data, isLoading, run } = useRequestFileLocation(requestUrl, requestMethod);

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

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

package/lib/components/Table/components/TableCell/components/RankedCell/rankedCell.d.ts

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

package/lib/components/Table/components/TableCell/components/RankedCell/rankedCell.js

@@ -0,0 +1,25 @@
+import React, { Fragment } from "react";
+import { getTokens, getTokensRegex, isRankedCell } from "./utils";
+export const RankedCell = ({ className, column, getValue, row, table, }) => {
+    // Get the cell value.
+    const value = getValue();
+    // If the cell value is undefined or null, return null.
+    if (value === undefined || value === null)
+        return null;
+    // Convert the cell value to a string.
+    const stringValue = String(value);
+    // Check if the cell is ranked.
+    const isRanked = isRankedCell(table, row, column.id);
+    // Return the unranked cell, as-is.
+    if (!isRanked)
+        return React.createElement(Fragment, null, stringValue);
+    // Tokenise the current global filter.
+    const tokens = getTokens(table);
+    // If there are no tokens, return the value as-is.
+    if (tokens.length === 0)
+        return React.createElement(Fragment, null, stringValue);
+    // Create regex pattern.
+    const regex = getTokensRegex(tokens);
+    // Return the ranked cell, with highlighting.
+    return (React.createElement("span", { className: className }, stringValue.split(regex).map((part, i) => (React.createElement(Fragment, { key: i }, part.match(regex) ? React.createElement("mark", null, part) : part)))));
+};

package/lib/components/Table/components/TableCell/components/RankedCell/utils.d.ts

@@ -0,0 +1,30 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+/**
+ * Renders a cell value with highlighting if it matches item rank filter criteria.
+ * @param table - Table.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @param value - Cell value.
+ * @returns Rendered cell value with highlighting.
+ */
+export declare function renderRankedCell<T extends RowData>(table: Table<T>, row: Row<T>, columnId: string, value: string | undefined | null): string;
+/**
+ * Returns the current global filter tokens from the table.
+ * @param table - Table.
+ * @returns An array of search tokens.
+ */
+export declare function getTokens<T extends RowData>(table: Table<T>): string[];
+/**
+ * Returns a RegExp pattern for matching search tokens.
+ * @param tokens - Search tokens.
+ * @returns A RegExp pattern that matches any of the tokens.
+ */
+export declare function getTokensRegex(tokens: string[]): RegExp;
+/**
+ * Checks if a cell is ranked based on the global filter.
+ * @param table - Table.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @returns Whether the cell is ranked.
+ */
+export declare function isRankedCell<T extends RowData>(table: Table<T>, row: Row<T>, columnId: string): boolean;