@databiosphere/findable-ui 45.0.0 → 46.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "45.0.0"
+  ".": "46.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## [46.0.0](https://github.com/DataBiosphere/findable-ui/compare/v45.1.0...v46.0.0) (2025-10-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* add get static props helper function ([#691](https://github.com/DataBiosphere/findable-ui/issues/691)) (#692)
+* add helper functions remarkHeadings and rehypeSlug ([#684](https://github.com/DataBiosphere/findable-ui/issues/684)) (#685)
+* add get static paths helper function ([#688](https://github.com/DataBiosphere/findable-ui/issues/688)) (#693)
+
+### Features
+
+* add get static paths helper function ([#688](https://github.com/DataBiosphere/findable-ui/issues/688)) ([#693](https://github.com/DataBiosphere/findable-ui/issues/693)) ([887b1d8](https://github.com/DataBiosphere/findable-ui/commit/887b1d82770ce472957e03b483aeeacb06ab8fdd))
+* add get static props helper function ([#691](https://github.com/DataBiosphere/findable-ui/issues/691)) ([#692](https://github.com/DataBiosphere/findable-ui/issues/692)) ([71b2927](https://github.com/DataBiosphere/findable-ui/commit/71b2927059e5e55b6e03bda6dc87dad009533fe9))
+* add helper functions remarkHeadings and rehypeSlug ([#684](https://github.com/DataBiosphere/findable-ui/issues/684)) ([#685](https://github.com/DataBiosphere/findable-ui/issues/685)) ([b130b3c](https://github.com/DataBiosphere/findable-ui/commit/b130b3c4a2527566eadcdab174c937e95338a394))
+* update entity list summary component to optionally display summary label ([#679](https://github.com/DataBiosphere/findable-ui/issues/679)) ([#681](https://github.com/DataBiosphere/findable-ui/issues/681)) ([e57e366](https://github.com/DataBiosphere/findable-ui/commit/e57e3660d92e0c155f5cdb56dcd5769bfc0ca2b0))
+* update outline component prop 'outline' to be optional ([#686](https://github.com/DataBiosphere/findable-ui/issues/686)) ([#687](https://github.com/DataBiosphere/findable-ui/issues/687)) ([eaba690](https://github.com/DataBiosphere/findable-ui/commit/eaba690d4277e69e88f3a6cd11d558c9e27918e6))
+
+
+### Bug Fixes
+
+* reintstate file download button component ([#667](https://github.com/DataBiosphere/findable-ui/issues/667)) ([#678](https://github.com/DataBiosphere/findable-ui/issues/678)) ([aa538a3](https://github.com/DataBiosphere/findable-ui/commit/aa538a39f64b07e02f4bc512c51c25fb1234fb89))
+
+
+### Chores
+
+* upgrade packages (minor) and fix security warnings ([#671](https://github.com/DataBiosphere/findable-ui/issues/671)) ([#673](https://github.com/DataBiosphere/findable-ui/issues/673)) ([6b067d5](https://github.com/DataBiosphere/findable-ui/commit/6b067d5e189d72253e6b39551c1ab5d49aa8126a))
+
+## [45.1.0](https://github.com/DataBiosphere/findable-ui/compare/v45.0.0...v45.1.0) (2025-09-18)
+
+
+### Features
+
+* extend row selection feature to handle validation messages for each row ([#666](https://github.com/DataBiosphere/findable-ui/issues/666)) ([#669](https://github.com/DataBiosphere/findable-ui/issues/669)) ([04fc041](https://github.com/DataBiosphere/findable-ui/commit/04fc0411cae9f1ae9c47d8f384e599413cffe639))
+* update row selection component to display disabled state ([#663](https://github.com/DataBiosphere/findable-ui/issues/663)) ([#667](https://github.com/DataBiosphere/findable-ui/issues/667)) ([c2c9fb2](https://github.com/DataBiosphere/findable-ui/commit/c2c9fb24e458858dd6d26be2be8e74f4e3e976da))
+* update table row to display disabled state ([#665](https://github.com/DataBiosphere/findable-ui/issues/665)) ([#668](https://github.com/DataBiosphere/findable-ui/issues/668)) ([2c6000f](https://github.com/DataBiosphere/findable-ui/commit/2c6000f86d0066b91409032f9970284f6b4b6443))
+
 ## [45.0.0](https://github.com/DataBiosphere/findable-ui/compare/v44.0.0...v45.0.0) (2025-09-10)
 
 

package/lib/components/Detail/components/Table/common/utils.js

@@ -9,7 +9,7 @@ export function generateColumnDefinitions(columns) {
             ...column,
             meta: {
                 ...column.meta,
-                header: column.meta?.header || column.header,
+                header: column.meta?.header ?? column.header,
             },
         };
     });

package/lib/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -10,7 +10,7 @@ export const CollapsableRows = ({ rows: leafOrSubRows, tableInstance, }) => {
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
         if (row.depth > 0 && !leafOrSubRows)
             return null; // Hide sub rows that are not already leaf or sub rows.
-        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, isPreview: row.getIsPreview() },
+        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, isPreview: row.getIsPreview(), isSelected: row.getIsSelected() },
             React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };

package/lib/components/Detail/components/Table/components/TableRows/tableRows.js

@@ -10,7 +10,7 @@ export const TableRows = ({ rows: leafOrSubRows, tableInstance, tableView, }) =>
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
-        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, canExpand: row.getCanExpand(), isExpanded: row.getIsExpanded(), isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview(), onClick: () => handleToggleExpanded(row) }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, canExpand: row.getCanExpand(), canSelect: row.getCanSelect(), isExpanded: row.getIsExpanded(), isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview(), isSelected: row.getIsSelected(), onClick: () => handleToggleExpanded(row) }, row.getVisibleCells().map((cell) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

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

@@ -9,6 +9,7 @@ import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { TABLE_DOWNLOAD_OPTIONS } from "../../../Table/featureOptions/tableDownload/constants";
 import { ROW_POSITION } from "../../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../../Table/features/RowPreview/constants";
+import { ROW_SELECTION_VALIDATION } from "../../../Table/features/RowSelectionValidation/constants";
 import { TABLE_DOWNLOAD } from "../../../Table/features/TableDownload/constants";
 import { GridTable } from "../../../Table/table.styles";
 import { generateColumnDefinitions } from "./common/utils";
@@ -20,7 +21,12 @@ export const Table = ({ className, collapsable = true, columns, gridTemplateColu
     const { stickyHeader = false } = table || {};
     const { sx: tableContainerSx } = tableContainer || {};
     const tableInstance = useReactTable({
-        _features: [ROW_POSITION, ROW_PREVIEW, TABLE_DOWNLOAD],
+        _features: [
+            ROW_POSITION,
+            ROW_PREVIEW,
+            ROW_SELECTION_VALIDATION,
+            TABLE_DOWNLOAD,
+        ],
         columns: generateColumnDefinitions([
             COLUMN_DEF.ROW_POSITION,
             ...columns,

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

@@ -12,5 +12,5 @@ export const Summary = ({ className, }) => {
     return (React.createElement(StyledGrid, { ...GRID_PROPS, className: className, "data-testid": TEST_IDS.ENTITY_SUMMARY }, summaries.map(([count, label], i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(StyledDot, null),
         React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 }, count),
-        React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, label))))));
+        label && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, label)))))));
 };

package/lib/components/Index/table/hook.js

@@ -14,6 +14,7 @@ import { getFacetedMinMaxValues } from "../../Table/featureOptions/facetedColumn
 import { TABLE_DOWNLOAD_OPTIONS } from "../../Table/featureOptions/tableDownload/constants";
 import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
+import { ROW_SELECTION_VALIDATION } from "../../Table/features/RowSelectionValidation/constants";
 import { TABLE_DOWNLOAD } from "../../Table/features/TableDownload/constants";
 import { buildBaseColumnDef } from "../../TableCreator/common/utils";
 import { useTableOptions } from "../../TableCreator/options/hook";
@@ -99,7 +100,12 @@ export const useTable = ({ entityListType, }) => {
      * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
      */
     const table = useReactTable({
-        _features: [ROW_POSITION, ROW_PREVIEW, TABLE_DOWNLOAD],
+        _features: [
+            ROW_POSITION,
+            ROW_PREVIEW,
+            ROW_SELECTION_VALIDATION,
+            TABLE_DOWNLOAD,
+        ],
         columns: columnDefs,
         data: listItems || [],
         enableColumnFilters: true, // client-side filtering.

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

@@ -3,7 +3,9 @@ import { DEFAULT_TAB_VALUE } from "./hooks/UseTabs/constants";
 import { useTabs } from "./hooks/UseTabs/hook";
 import { StyledTab, StyledTabs } from "./outline.styles";
 export const Outline = ({ className, Contents, outline, ...props /* MuiTabsProps */ }) => {
-    const { indicatorColor, onChange, orientation, value } = useTabs(outline);
+    const { indicatorColor, onChange, orientation, value } = useTabs(outline ?? []);
+    if (!outline?.length)
+        return null;
     return (React.createElement(StyledTabs, { className: className, indicatorColor: indicatorColor, onChange: onChange, orientation: orientation, value: value, ...props },
         React.createElement(Contents, { value: DEFAULT_TAB_VALUE }),
         outline.map(({ depth, disabled, hash, value }) => (React.createElement(StyledTab, { depth: depth, disabled: disabled, key: hash, label: value, value: hash })))));

package/lib/components/Layout/components/Outline/types.d.ts

@@ -10,5 +10,5 @@ export interface OutlineItem {
 }
 export interface OutlineProps extends BaseComponentProps, TabsProps {
     Contents: ElementType<ContentsTabProps>;
-    outline: OutlineItem[];
+    outline?: OutlineItem[] | null;
 }

package/lib/components/Table/components/TableCell/components/RowSelectionCell/constants.d.ts

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

package/lib/components/Table/components/TableCell/components/RowSelectionCell/constants.js

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

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.js

@@ -1,13 +1,17 @@
-import { Checkbox as MCheckbox } from "@mui/material";
+import { Checkbox as MCheckbox, Tooltip } from "@mui/material";
 import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedDisabledIcon } from "../../../../../common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { TOOLTIP_PROPS } from "./constants";
 export const RowSelectionCell = ({ row, }) => {
-    const { getIsSelected, getToggleSelectedHandler } = row;
-    return (React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), 
-        /*
-         * Prevents click events from bubbling up to parent components
-         * (such as CardActionArea or Accordion) when the checkbox is activated.
-         */
-        onClick: (e) => e.stopPropagation(), onChange: getToggleSelectedHandler() }));
+    const { getCanSelect, getIsSelected, getSelectionValidation, getToggleSelectedHandler, } = row;
+    return (React.createElement(Tooltip, { ...TOOLTIP_PROPS, title: getSelectionValidation?.() },
+        React.createElement("span", null,
+            React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), disabled: !getCanSelect(), icon: getCanSelect() ? React.createElement(UncheckedIcon, null) : React.createElement(UncheckedDisabledIcon, null), 
+                /*
+                 * Prevents click events from bubbling up to parent components
+                 * (such as CardActionArea or Accordion) when the checkbox is activated.
+                 */
+                onClick: (e) => e.stopPropagation(), onChange: getToggleSelectedHandler() }))));
 };

package/lib/components/Table/components/TableRow/tableRow.styles.d.ts

@@ -1,8 +1,10 @@
 export interface StyledTableRowProps {
     canExpand?: boolean;
+    canSelect?: boolean;
     isExpanded?: boolean;
     isGrouped?: boolean;
     isPreview?: boolean;
+    isSelected?: boolean;
 }
 export declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | 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<HTMLTableRowElement> | null | undefined;

package/lib/components/Table/components/TableRow/tableRow.styles.js

@@ -5,9 +5,11 @@ import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
 export const StyledTableRow = styled(MTableRow, {
     shouldForwardProp: (prop) => prop !== "canExpand" &&
+        prop !== "canSelect" &&
         prop !== "isExpanded" &&
+        prop !== "isGrouped" &&
         prop !== "isPreview" &&
-        prop !== "isGrouped",
+        prop !== "isSelected",
 }) `
   && {
     transition: background-color 300ms ease-in;
@@ -42,5 +44,17 @@ export const StyledTableRow = styled(MTableRow, {
     css `
         background-color: ${PALETTE.PRIMARY_LIGHTEST};
       `}
+
+    ${({ isSelected }) => isSelected &&
+    css `
+        background-color: ${PALETTE.PRIMARY_LIGHTEST};
+      `}
+
+    ${({ canSelect }) => !canSelect &&
+    css `
+        .MuiTableCell-root {
+          color: ${PALETTE.INK_LIGHT};
+        }
+      `}
   }
 `;

package/lib/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -13,7 +13,7 @@ export const CollapsableRows = ({ rows, tableInstance, virtualizer, }) => {
         const row = rows[rowIndex];
         if (grouping.length > 0 && row.depth > 0)
             return null; // TODO(cc) hide sub rows -- sub-rows are within collapsed content -- UI TBD.
-        return (React.createElement(StyledTableRow, { key: row.id, "data-index": rowIndex, ref: virtualizer.measureElement, isPreview: row.getIsPreview() },
+        return (React.createElement(StyledTableRow, { key: row.id, "data-index": rowIndex, ref: virtualizer.measureElement, isPreview: row.getIsPreview(), isSelected: row.getIsSelected() },
             React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };

package/lib/components/Table/components/TableRows/tableRows.js

@@ -11,7 +11,7 @@ export const TableRows = ({ rows, virtualizer, }) => {
         const rowIndex = virtualRow.index;
         const row = rows[rowIndex];
         const { getCanExpand, getIsExpanded, getIsGrouped, getIsPreview } = row;
-        return (React.createElement(StyledTableRow, { key: row.id, canExpand: getCanExpand(), "data-index": rowIndex, isExpanded: getIsExpanded(), isGrouped: getIsGrouped(), isPreview: getIsPreview(), onClick: () => handleToggleExpanded(row), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
+        return (React.createElement(StyledTableRow, { key: row.id, canExpand: getCanExpand(), canSelect: row.getCanSelect(), "data-index": rowIndex, isExpanded: getIsExpanded(), isGrouped: getIsGrouped(), isPreview: getIsPreview(), isSelected: row.getIsSelected(), onClick: () => handleToggleExpanded(row), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/lib/components/Table/features/RowSelectionValidation/constants.d.ts

@@ -0,0 +1,2 @@
+import { TableFeature } from "@tanstack/react-table";
+export declare const ROW_SELECTION_VALIDATION: TableFeature;

package/lib/components/Table/features/RowSelectionValidation/constants.js

@@ -0,0 +1,14 @@
+import { getSelectionValidation } from "./utils";
+export const ROW_SELECTION_VALIDATION = {
+    createRow: (row, table) => {
+        row.getSelectionValidation = () => {
+            return getSelectionValidation(row, table);
+        };
+    },
+    getDefaultOptions: () => {
+        return {
+            enableRowSelectionValidation: false,
+            getRowSelectionValidation: undefined,
+        };
+    },
+};

package/lib/components/Table/features/RowSelectionValidation/types.d.ts

@@ -0,0 +1,8 @@
+import { Row, RowData } from "@tanstack/react-table";
+export interface RowSelectionValidationOptions<T extends RowData> {
+    enableRowSelectionValidation?: boolean;
+    getRowSelectionValidation?: (row: Row<T>) => string | undefined;
+}
+export interface RowSelectionValidationRow {
+    getSelectionValidation?: () => string | undefined;
+}

package/lib/components/Table/features/RowSelectionValidation/types.js

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

package/lib/components/Table/features/RowSelectionValidation/utils.d.ts

@@ -0,0 +1,8 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+/**
+ * Returns the validation message for a row.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns The validation message for the row.
+ */
+export declare function getSelectionValidation<T extends RowData>(row: Row<T>, table: Table<T>): string | undefined;

package/lib/components/Table/features/RowSelectionValidation/utils.js

@@ -0,0 +1,11 @@
+/**
+ * Returns the validation message for a row.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns The validation message for the row.
+ */
+export function getSelectionValidation(row, table) {
+    if (!table.options.enableRowSelectionValidation)
+        return;
+    return table.options.getRowSelectionValidation?.(row);
+}

package/lib/components/Table/features/entities.d.ts

@@ -1,13 +1,14 @@
 import { RowData } from "@tanstack/react-table";
 import { RowPositionOptions, RowPositionRow } from "./RowPosition/types";
 import { RowPreviewInstance, RowPreviewOptions, RowPreviewRow, RowPreviewTableState } from "./RowPreview/entities";
+import { RowSelectionValidationOptions, RowSelectionValidationRow } from "./RowSelectionValidation/types";
 import { TableDownloadColumn, TableDownloadInstance, TableDownloadOptions } from "./TableDownload/types";
 export type CustomFeatureColumn = TableDownloadColumn;
 export interface CustomFeatureInstance<T extends RowData> extends TableDownloadInstance, RowPreviewInstance<T> {
 }
 export type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
-export interface CustomFeatureOptions<T extends RowData> extends TableDownloadOptions<T>, RowPositionOptions, RowPreviewOptions {
+export interface CustomFeatureOptions<T extends RowData> extends TableDownloadOptions<T>, RowPositionOptions, RowPreviewOptions, RowSelectionValidationOptions<T> {
 }
-export interface CustomFeatureRow extends RowPositionRow, RowPreviewRow {
+export interface CustomFeatureRow extends RowPositionRow, RowPreviewRow, RowSelectionValidationRow {
 }
 export type CustomFeatureTableState = RowPreviewTableState;

package/lib/components/TableCreator/options/hook.js

@@ -2,7 +2,6 @@ import { useConfig } from "../../../hooks/useConfig";
 import { useExpandedOptions } from "./expanded/hook";
 import { useGroupingOptions } from "./grouping/hook";
 import { useInitialState } from "./initialState/hook";
-import { useRowSelectionOptions } from "./rowSelection/hook";
 import { useSortingOptions } from "./sorting/hook";
 import { useVisibilityOptions } from "./visibility/hook";
 export function useTableOptions() {
@@ -10,14 +9,12 @@ export function useTableOptions() {
     const tableOptions = entityConfig.list.tableOptions;
     const expandedOptions = useExpandedOptions();
     const groupingOptions = useGroupingOptions();
-    const rowSelectionOptions = useRowSelectionOptions();
     const sortingOptions = useSortingOptions();
     const visibilityOptions = useVisibilityOptions();
     const initialState = useInitialState(tableOptions);
     return {
         ...expandedOptions,
         ...groupingOptions,
-        ...rowSelectionOptions,
         ...sortingOptions, // TODO(cc) merge of all sorting options.
         ...visibilityOptions,
         ...tableOptions,

package/lib/components/common/Button/components/FileDownloadButton/fileDownloadButton.d.ts

@@ -0,0 +1,5 @@
+export interface FileDownloadButtonProps {
+    fileName?: string;
+    fileUrl?: string;
+}
+export declare const FileDownloadButton: ({ fileName, fileUrl, }: FileDownloadButtonProps) => JSX.Element;

package/lib/components/common/Button/components/FileDownloadButton/fileDownloadButton.js

@@ -0,0 +1,14 @@
+import { Box } from "@mui/material";
+import React, { useEffect, useRef } from "react";
+export const FileDownloadButton = ({ fileName, fileUrl, }) => {
+    const downloadRef = useRef(null);
+    // Initiates file download when file url request is successful.
+    useEffect(() => {
+        if (downloadRef.current && fileName && fileUrl) {
+            downloadRef.current.setAttribute("href", fileUrl);
+            downloadRef.current.setAttribute("download", fileName);
+            downloadRef.current.click();
+        }
+    }, [fileName, fileUrl]);
+    return (React.createElement(Box, { component: "a", download: true, ref: downloadRef, sx: { display: "none" } }));
+};

package/lib/components/common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconProps } from "@mui/material";
+export declare const UncheckedDisabledIcon: ({ fontSize, viewBox, ...props }: SvgIconProps) => JSX.Element;

package/lib/components/common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon.js

@@ -0,0 +1,8 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+export const UncheckedDisabledIcon = ({ fontSize = "xsmall", viewBox = "0 0 18 18", ...props }) => {
+    return (React.createElement(SvgIcon, { fontSize: fontSize, viewBox: viewBox, ...props },
+        React.createElement("path", { d: "M4 0.5H14C15.933 0.5 17.5 2.067 17.5 4V14C17.5 15.933 15.933 17.5 14 17.5H4C2.067 17.5 0.5 15.933 0.5 14V4C0.5 2.067 2.067 0.5 4 0.5Z", stroke: PALETTE.SMOKE_MAIN }),
+        React.createElement("rect", { x: "0.5", y: "0.5", width: "17", height: "17", rx: "3.5", fill: PALETTE.SMOKE_LIGHT, stroke: PALETTE.SMOKE_MAIN })));
+};

package/lib/utils/mdx/files/mapMDXSlugByFilePaths.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Maps each MDX file path to its slug.
+ * @param docsDirectory - Docs directory.
+ * @param dirPath - Directory path.
+ * @param slugByFilePaths - Accumulator: Map of slug by mdx file path.
+ * @returns returns slug by mdx file path.
+ */
+export declare function mapMDXSlugByFilePaths(docsDirectory: string, dirPath?: string, slugByFilePaths?: Map<string, string[]>): Map<string, string[]>;

package/lib/utils/mdx/files/mapMDXSlugByFilePaths.js

@@ -0,0 +1,39 @@
+import fs from "fs";
+import * as path from "path";
+/**
+ * Returns true if the file is an MDX file.
+ * @param fileName - File name.
+ * @returns true if the file is an MDX file.
+ */
+function isMdxFile(fileName) {
+    return fileName.endsWith(".mdx");
+}
+/**
+ * Maps each MDX file path to its slug.
+ * @param docsDirectory - Docs directory.
+ * @param dirPath - Directory path.
+ * @param slugByFilePaths - Accumulator: Map of slug by mdx file path.
+ * @returns returns slug by mdx file path.
+ */
+export function mapMDXSlugByFilePaths(docsDirectory, dirPath = docsDirectory, slugByFilePaths = new Map()) {
+    const dirents = fs.readdirSync(dirPath, { withFileTypes: true });
+    return dirents.reduce((acc, dirent) => {
+        /* Accumulate the slug for each MDX file. */
+        if (dirent.isFile() && isMdxFile(dirent.name)) {
+            const mdxPath = path.resolve(dirPath, dirent.name);
+            /* Build the slug from the file relative directory and file name. */
+            const mdxRelativePath = path.relative(docsDirectory, mdxPath);
+            const { dir, name } = path.parse(mdxRelativePath);
+            let slug = [];
+            if (dir)
+                slug = dir.split(path.sep);
+            slug.push(name);
+            acc.set(mdxPath, slug);
+        }
+        /* Recurse into subdirectories. */
+        if (dirent.isDirectory()) {
+            mapMDXSlugByFilePaths(docsDirectory, path.resolve(dirPath, dirent.name), acc);
+        }
+        return acc;
+    }, slugByFilePaths);
+}

package/lib/utils/mdx/files/resolveRelativeDirs.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves an absolute docs path from a single set of directory segments.
+ * @param relativeDirs - Directory segments relative to the docs root.
+ * @returns Absolute path.
+ */
+export declare function resolveRelativeDirs(relativeDirs: string[]): string;

package/lib/utils/mdx/files/resolveRelativeDirs.js

@@ -0,0 +1,9 @@
+import * as path from "path";
+/**
+ * Resolves an absolute docs path from a single set of directory segments.
+ * @param relativeDirs - Directory segments relative to the docs root.
+ * @returns Absolute path.
+ */
+export function resolveRelativeDirs(relativeDirs) {
+    return path.join(process.cwd(), ...relativeDirs);
+}

package/lib/utils/mdx/frontmatter/getMatter.d.ts

@@ -0,0 +1,8 @@
+import matter from "gray-matter";
+/**
+ * Returns matter object (frontmatter and content) from the given MD/MDX path.
+ * Server-only: uses Node fs, import only in SSG/SSR/build contexts.
+ * @param filePath - File path of MD/MDX file.
+ * @returns matter object.
+ */
+export declare function getMatter(filePath: string): matter.GrayMatterFile<string>;

package/lib/utils/mdx/frontmatter/getMatter.js

@@ -0,0 +1,12 @@
+import fs from "fs";
+import matter from "gray-matter";
+/**
+ * Returns matter object (frontmatter and content) from the given MD/MDX path.
+ * Server-only: uses Node fs, import only in SSG/SSR/build contexts.
+ * @param filePath - File path of MD/MDX file.
+ * @returns matter object.
+ */
+export function getMatter(filePath) {
+    const markdownWithMeta = fs.readFileSync(filePath, "utf-8");
+    return matter(markdownWithMeta);
+}

package/lib/utils/mdx/frontmatter/types.d.ts

@@ -0,0 +1,7 @@
+interface BaseFrontmatterProps {
+    description: string;
+    hidden?: boolean;
+    title: string;
+}
+export type FrontmatterProps<F extends object> = BaseFrontmatterProps & F;
+export {};

package/lib/utils/mdx/frontmatter/types.js

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

package/lib/utils/mdx/frontmatter/validateMatter.d.ts

@@ -0,0 +1,8 @@
+import matter from "gray-matter";
+import { FrontmatterProps } from "./types";
+/**
+ * Returns the frontmatter from the given gray matter file data.
+ * @param data - Gray matter file data.
+ * @returns Frontmatter.
+ */
+export declare function validateMatter<F extends object>(data: matter.GrayMatterFile<string>["data"]): FrontmatterProps<F> | undefined;

package/lib/utils/mdx/frontmatter/validateMatter.js

@@ -0,0 +1,13 @@
+/**
+ * Returns the frontmatter from the given gray matter file data.
+ * @param data - Gray matter file data.
+ * @returns Frontmatter.
+ */
+export function validateMatter(data) {
+    if ("title" in data &&
+        typeof data.title === "string" &&
+        "description" in data &&
+        typeof data.description === "string") {
+        return data;
+    }
+}

package/lib/utils/mdx/plugins/rehypeSlug.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from "unified";
+/**
+ * Rehype plugin to generate an ID for each heading in MDX content.
+ * @returns plugin to generate an ID for each heading in MDX content.
+ */
+export declare function rehypeSlug(): Plugin;

package/lib/utils/mdx/plugins/rehypeSlug.js

@@ -0,0 +1,34 @@
+import { visit } from "unist-util-visit";
+import { getHeadingTextValue } from "./remarkHeadings";
+import { generateUniqueId, slugifyHeading } from "./utils";
+/**
+ * Rehype plugin to generate an ID for each heading in MDX content.
+ * @returns plugin to generate an ID for each heading in MDX content.
+ */
+export function rehypeSlug() {
+    return (tree) => {
+        const setOfIds = new Set();
+        visit(tree, "element", (node) => {
+            if (/^h[1-6]$/.test(node.tagName)) {
+                const headingText = getHeadingTextValue(node.children);
+                const headingSlug = slugifyHeading(headingText);
+                const id = generateUniqueId(setOfIds, headingSlug);
+                // Add the ID to the heading element.
+                node.properties.id = id;
+                node.properties.style = "position: relative;";
+                // Append AnchorLink to the heading element.
+                node.children.push({
+                    attributes: [
+                        {
+                            name: "anchorLink",
+                            type: "mdxJsxAttribute",
+                            value: id,
+                        },
+                    ],
+                    name: "AnchorLink",
+                    type: "mdxJsxFlowElement",
+                });
+            }
+        });
+    };
+}

package/lib/utils/mdx/plugins/remarkHeadings.d.ts

@@ -0,0 +1,29 @@
+import { PhrasingContent } from "mdast";
+import { Plugin } from "unified";
+import { OutlineItem } from "../../../components/Layout/components/Outline/types";
+interface Options {
+    depth?: {
+        max?: number;
+        min?: number;
+    };
+    outline: OutlineItem[];
+}
+/**
+ * Remark plugin to generate an outline from MDX content.
+ * The outline is a list of headings with their depth, hash, and value.
+ * @param options - Options.
+ * @param options.depth - Depth of the headings.
+ * @param options.depth.max - Maximum depth of the headings.
+ * @param options.depth.min - Minimum depth of the headings.
+ * @param options.outline - Outline items.
+ * @returns plugin to generate an outline from MDX content.
+ */
+export declare function remarkHeadings({ depth: { max, min }, outline, }: Options): Plugin;
+/**
+ * Returns the value of the heading.
+ * @param children - Phrasing content.
+ * @param value - List of heading text values.
+ * @returns heading text value.
+ */
+export declare function getHeadingTextValue(children: PhrasingContent[], value?: string[]): string;
+export {};