@databiosphere/findable-ui 35.2.0 → 37.0.0

package/src/theme/common/components.ts

@@ -5,6 +5,7 @@ import { PALETTE } from "../../styles/common/constants/palette";
 import { SHADOWS } from "../../styles/common/constants/shadows";
 import { BUTTON_PROPS } from "../../styles/common/mui/button";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
+import { OUTLINED_INPUT_PROPS } from "../../styles/common/mui/outlinedInput";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import {
   TEXT_BODY_400,
@@ -256,11 +257,25 @@ export const MuiButton = (theme: Theme): Components["MuiButton"] => {
         minWidth: 0,
         padding: 0,
       },
-      textPrimary: {
-        color: theme.palette.primary.main,
-      },
     },
     variants: [
+      {
+        props: {
+          color: BUTTON_PROPS.COLOR.PRIMARY,
+          variant: BUTTON_PROPS.VARIANT.TEXT,
+        },
+        style: {
+          color: PALETTE.PRIMARY_MAIN,
+          // eslint-disable-next-line sort-keys -- disabling key order for readability
+          "&:hover": {
+            backgroundColor: "transparent",
+            textDecoration: "underline",
+            textDecorationColor: "currentColor",
+            textDecorationSkipInk: "none",
+            textUnderlinePosition: "from-font",
+          },
+        },
+      },
       {
         props: {
           variant: "activeNav", // associated with "nav" variant.
@@ -439,6 +454,16 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
           color: theme.palette.info.main,
         },
       },
+      {
+        props: {
+          color: CHIP_PROPS.COLOR.PRIMARY,
+          variant: CHIP_PROPS.VARIANT.FILLED,
+        },
+        style: {
+          backgroundColor: PALETTE.PRIMARY_MAIN,
+          color: PALETTE.COMMON_WHITE,
+        },
+      },
       {
         props: { color: "success" },
         style: {
@@ -866,9 +891,6 @@ export const MuiIconButton = (theme: Theme): Components["MuiIconButton"] => {
 export const MuiInputBase = (theme: Theme): Components["MuiInputBase"] => {
   return {
     styleOverrides: {
-      adornedStart: {
-        gap: 8,
-      },
       multiline: {
         height: "unset",
       },
@@ -881,6 +903,17 @@ export const MuiInputBase = (theme: Theme): Components["MuiInputBase"] => {
         [tabletUp]: {
           fontSize: theme.typography[TEXT_BODY_400].fontSize,
         },
+        variants: [
+          /* PRIMARY */ /* TODO: remove `adornedStart` when all input components are refactored to color: secondary */
+          {
+            props: { color: "primary" },
+            style: {
+              adornedStart: {
+                gap: 8,
+              },
+            },
+          },
+        ],
       },
     },
   };
@@ -1012,11 +1045,8 @@ export const MuiOutlinedInput = (
       root: {
         backgroundColor: PALETTE.COMMON_WHITE,
         boxShadow: `inset 0 2px 0 0 ${COLOR_MIXES.COMMON_BLACK_04}`,
-        paddingLeft: 12,
+        paddingLeft: 12, // TODO: remove when all input components are refactored to color: secondary.
         // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "& .MuiSvgIcon-root": {
-          color: theme.palette.ink.light, // Adornment e.g. "SearchIcon".
-        },
         "&:hover": {
           "& .MuiOutlinedInput-notchedOutline": {
             borderColor: theme.palette.smoke.dark,
@@ -1028,9 +1058,6 @@ export const MuiOutlinedInput = (
             borderColor: theme.palette.ink.main,
             borderWidth: 1,
           },
-          "& .MuiSvgIcon-root": {
-            color: theme.palette.ink.main, // Adornment e.g. "SearchIcon".
-          },
         },
         // eslint-disable-next-line sort-keys -- disabling key order for specificity
         "&.Mui-disabled": {
@@ -1038,9 +1065,6 @@ export const MuiOutlinedInput = (
             borderColor: theme.palette.smoke.dark,
             borderWidth: 1,
           },
-          "& .MuiSvgIcon-root": {
-            color: theme.palette.ink.light,
-          },
         },
         "&.Mui-error": {
           backgroundColor: theme.palette.alert.lightest,
@@ -1050,6 +1074,88 @@ export const MuiOutlinedInput = (
             borderWidth: 1,
           },
         },
+        variants: [
+          /* PRIMARY */
+          {
+            props: { color: OUTLINED_INPUT_PROPS.COLOR.PRIMARY },
+            style: {
+              "& .MuiSvgIcon-root": {
+                color: theme.palette.ink.light, // Adornment e.g. "SearchIcon". TODO: remove when all input components are refactored to color: secondary.
+              },
+              // eslint-disable-next-line sort-keys -- disabling key order for specificity
+              "&.Mui-focused": {
+                "& .MuiSvgIcon-root": {
+                  color: theme.palette.ink.main, // Adornment e.g. "SearchIcon". TODO: remove when all input components are refactored to color: secondary.
+                },
+              },
+              // eslint-disable-next-line sort-keys -- disabling key order for specificity
+              "&.Mui-disabled": {
+                "& .MuiSvgIcon-root": {
+                  color: theme.palette.ink.light, // TODO: remove when all input components are refactored to color: secondary.
+                },
+              },
+            },
+          },
+          /* SECONDARY */
+          {
+            props: { color: OUTLINED_INPUT_PROPS.COLOR.SECONDARY },
+            style: {
+              backgroundColor: PALETTE.COMMON_WHITE,
+              boxShadow: `inset 0 2px 0 0 ${COLOR_MIXES.COMMON_BLACK_04}`,
+              color: PALETTE.INK_LIGHT,
+              padding: "0 12px",
+              // eslint-disable-next-line sort-keys -- disabling key order for specificity
+              ".MuiOutlinedInput-input": {
+                color: "inherit",
+                height: 20,
+                padding: "10px 0",
+                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                "&::placeholder": {
+                  color: "inherit",
+                  opacity: 0.8,
+                },
+              },
+              ".MuiOutlinedInput-notchedOutline": {
+                borderColor: PALETTE.SMOKE_DARK,
+                borderWidth: 1,
+              },
+              // eslint-disable-next-line sort-keys -- disabling key order for specificity
+              "&.Mui-focused": {
+                color: PALETTE.INK_MAIN,
+                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                ".MuiOutlinedInput-input": {
+                  "&::placeholder": {
+                    opacity: 0,
+                  },
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                ".MuiOutlinedInput-notchedOutline": {
+                  borderColor: PALETTE.INK_MAIN,
+                  borderWidth: 1,
+                },
+              },
+              // eslint-disable-next-line sort-keys -- disabling key order for specificity
+              "&.Mui-disabled": {
+                backgroundColor: PALETTE.SMOKE_LIGHT,
+                color: PALETTE.INK_LIGHT,
+                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                ".MuiOutlinedInput-input": {
+                  WebkitTextFillColor: "unset",
+                  // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                  "&::placeholder": {
+                    color: "inherit",
+                    opacity: 1,
+                  },
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                ".MuiOutlinedInput-notchedOutline": {
+                  borderColor: PALETTE.SMOKE_DARK,
+                  borderWidth: 1,
+                },
+              },
+            },
+          },
+        ],
       },
     },
   };

package/src/theme/components/muiButtonGroup.ts

@@ -59,6 +59,10 @@ export const MuiButtonGroup: Components["MuiButtonGroup"] = {
                 backgroundColor: PALETTE.SMOKE_LIGHTEST,
                 boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
               },
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&.Mui-focusVisible": {
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
+              },
             },
           },
         },

package/src/theme/components/muiTableCell.ts

@@ -1,4 +1,5 @@
 import { Components, Theme } from "@mui/material";
+import { PALETTE } from "../../styles/common/constants/palette";
 import { TABLE_CELL_PROPS } from "../../styles/common/mui/tableCell";
 import { TEXT_BODY_400, TEXT_BODY_SMALL_500 } from "../common/typography";
 
@@ -34,6 +35,11 @@ export const MuiTableCell = (theme: Theme): Components["MuiTableCell"] => {
             props: { variant: TABLE_CELL_PROPS.VARIANT.BODY },
             style: {
               ...typography[TEXT_BODY_400],
+              "& mark": {
+                backgroundColor: PALETTE.WARNING_LIGHT,
+                color: "inherit",
+                padding: "2px 0",
+              },
             },
           },
           {

package/src/utils/parseJsonQueryParam.ts

@@ -0,0 +1,27 @@
+/**
+ * Parses a JSON-encoded value from a URL query parameter.
+ *
+ * This function is specifically designed for query parameters that contain
+ * serialized complex data (arrays or objects), not for simple string values.
+ *
+ * It handles Next.js query parameters which can be string, string[] or undefined.
+ * Repeated parameters (`string[]`) are not supported.
+ *
+ * @param param - URL query parameter value.
+ * @param defaultValue - Default value.
+ * @returns Parsed complex data structure or default value.
+ */
+export function parseJsonQueryParam<T = unknown>(
+  param: string | string[] | undefined,
+  defaultValue?: T
+): T | undefined {
+  // Handle non-string parameters.
+  if (typeof param !== "string") return defaultValue;
+
+  try {
+    return JSON.parse(decodeURIComponent(param));
+  } catch (error) {
+    console.warn("Failed to parse query param JSON:", error);
+    return defaultValue;
+  }
+}

package/src/utils/stateToUrlQuery.ts

@@ -0,0 +1,40 @@
+import { NextRouter } from "next/router";
+
+/**
+ * Builds a query object from state for URL parameter synchronization.
+ *
+ * This function converts a state object into a format compatible with NextRouter query parameters.
+ * It handles different value types appropriately:
+ *
+ * - Undefined values are excluded.
+ * - Strings are used as-is (empty strings are excluded).
+ * - Arrays are JSON stringified (empty arrays are excluded).
+ *
+ * @param state - State object containing values to convert to URL parameters.
+ * @returns A query object compatible with NextRouter.
+ */
+export function stateToUrlQuery<
+  S extends Record<string, string | unknown[] | undefined>
+>(state: S): NextRouter["query"] {
+  const query: NextRouter["query"] = {};
+
+  for (const [key, value] of Object.entries(state)) {
+    // Handle the undefined case.
+    if (value === undefined) continue;
+
+    // Handle the string case.
+    if (typeof value === "string") {
+      if (!value) continue;
+      query[key] = value;
+      continue;
+    }
+
+    // Handle the array case.
+    if (Array.isArray(value)) {
+      if (value.length === 0) continue;
+      query[key] = JSON.stringify(value);
+    }
+  }
+
+  return query;
+}

package/src/views/DataDictionaryView/dataDictionaryView.tsx

@@ -1,9 +1,35 @@
 import React from "react";
 import { DataDictionary } from "../../components/DataDictionary/dataDictionary";
-import { BaseComponentProps } from "../../components/types";
+import { useStateSyncManager } from "../../hooks/stateSyncManager/hook";
+import { DataDictionaryContext } from "../../providers/dataDictionary/context";
+import { clearMeta } from "../../providers/dataDictionaryState/actions/clearMeta/dispatch";
+import { stateToUrl } from "../../providers/dataDictionaryState/actions/stateToUrl/dispatch";
+import { urlToState } from "../../providers/dataDictionaryState/actions/urlToState/dispatch";
+import { useDataDictionaryState } from "../../providers/dataDictionaryState/hooks/UseDataDictionaryState/hook";
+import { DataDictionaryViewProps } from "./types";
+import { buildStateSyncManagerContext } from "./utils";
 
 export const DataDictionaryView = ({
   className,
-}: BaseComponentProps): JSX.Element => {
-  return <DataDictionary className={className} />;
+  dictionary,
+}: DataDictionaryViewProps): JSX.Element => {
+  const { dataDictionaryDispatch, dataDictionaryState } =
+    useDataDictionaryState();
+
+  useStateSyncManager({
+    actions: { clearMeta, stateToUrl, urlToState },
+    dispatch: dataDictionaryDispatch,
+    state: buildStateSyncManagerContext(dataDictionaryState, dictionary),
+  });
+
+  return (
+    <DataDictionaryContext.Provider value={{ dictionary }}>
+      {/* Using dictionary as `key` to force component mount when dictionary changes to prevent stale outline, global filter value. */}
+      <DataDictionary
+        key={dictionary}
+        className={className}
+        dictionary={dictionary}
+      />
+    </DataDictionaryContext.Provider>
+  );
 };

package/src/views/DataDictionaryView/types.ts

@@ -0,0 +1,5 @@
+import { BaseComponentProps } from "components/types";
+
+export interface DataDictionaryViewProps extends BaseComponentProps {
+  dictionary: string;
+}

package/src/views/DataDictionaryView/utils.ts

@@ -0,0 +1,23 @@
+import { StateSyncManagerContext } from "../../hooks/stateSyncManager/types";
+import { DATA_DICTIONARY_URL_PARAMS } from "../../providers/dataDictionaryState/dictionaries/constants";
+import { DataDictionaryState } from "../../providers/dataDictionaryState/types";
+
+/**
+ * Builds the state sync manager context object for URL-state synchronization.
+ * - Command: The meta command that signals a URL update operation is needed e.g. "STATE_TO_URL_PUSH" or "STATE_TO_URL_REPLACE".
+ * - ParamKeys: Expected list of URL parameter keys that should be synchronized with state e.g. "filter".
+ * - Query: Dictionary related query object from state that should be synchronized with the URL.
+ * @param dataDictionaryState - Data dictionary state.
+ * @param dictionary - Dictionary ID.
+ * @returns The state sync manager context.
+ */
+export function buildStateSyncManagerContext(
+  dataDictionaryState: DataDictionaryState,
+  dictionary: string
+): StateSyncManagerContext {
+  return {
+    command: dataDictionaryState.meta?.command,
+    paramKeys: Object.values(DATA_DICTIONARY_URL_PARAMS),
+    query: dataDictionaryState.dictionaries?.[dictionary]?.query,
+  };
+}

package/src/views/ExploreView/utils.ts

@@ -5,7 +5,7 @@ import { EXPLORE_URL_PARAMS } from "../../providers/exploreState/constants";
 import { ExploreView } from "./exploreView";
 
 /**
- *Builds the state sync manager context object for URL-state synchronization.
+ * Builds the state sync manager context object for URL-state synchronization.
  * - Command: The meta command that signals a URL update operation is needed e.g. "STATE_TO_URL_PUSH" or "STATE_TO_URL_REPLACE".
  * - ParamKeys: Expected list of URL parameter keys that should be synchronized with state e.g. "filter", "catalog".
  * - Query: Entity related query object from state that should be synchronized with the URL.

package/tests/buildRequestFilters.test.ts

@@ -24,26 +24,18 @@ describe("buildRequestFilters", () => {
       expect(result).toEqual(fileManifestState.filters);
     });
 
-    test("when at least one form facet has no terms selected", () => {
-      const fileManifestState = getFileManifestState(
-        FILTERS.FORM_INCOMPLETE_SET
-      );
+    test("when summary file count is not equal to initial file count", () => {
+      const fileManifestState = getFileManifestState(FILTERS.FORM_COMPLETE_SET);
       const result = buildRequestFilters(
-        fileManifestState,
-        FORM_FACET.INCOMPLETE_SET
+        { ...fileManifestState, summary: { fileCount: 9 } },
+        FORM_FACET.COMPLETE_SET
       );
       expect(result).toEqual(fileManifestState.filters);
     });
-
-    test("when at least one form facet has an unselected term", () => {
-      const fileManifestState = getFileManifestState(FILTERS.FORM_SUBSET);
-      const result = buildRequestFilters(fileManifestState, FORM_FACET.SUBSET);
-      expect(result).toEqual(fileManifestState.filters);
-    });
   });
 
   describe("should return filters excluding form related filters", () => {
-    test("when all form facets have all their terms selected", () => {
+    test("when summary file count is equal to initial file count", () => {
       const fileManifestState = getFileManifestState(FILTERS.FORM_COMPLETE_SET);
       const result = buildRequestFilters(
         fileManifestState,

package/tests/useRequestManifest.test.ts

@@ -109,6 +109,16 @@ describe("useRequestManifest", () => {
       });
     });
 
+    test("when fileManifestState fileCount is undefined", () => {
+      MOCK_USE_FILE_MANIFEST_STATE.mockReturnValue({
+        fileManifestDispatch: jest.fn(),
+        fileManifestState: { ...FILE_MANIFEST_STATE, fileCount: undefined },
+      });
+      testRequestManifest({
+        fileManifestFormat: MANIFEST_DOWNLOAD_FORMAT.VERBATIM_PFB,
+      });
+    });
+
     describe("form selection is not ready", () => {
       test("when a form facet is undefined", () => {
         testRequestManifest({

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

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

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

@@ -1,36 +0,0 @@
-import { useRouter } from "next/router";
-import { useMemo } from "react";
-import { useConfig } from "../../../../hooks/useConfig";
-import { buildClassesOutline } from "../../components/Outline/utils";
-import { useTable } from "../../components/Table/hook";
-export const useDataDictionary = () => {
-    const { config: { dataDictionaries: dataDictionaryConfigs }, } = useConfig();
-    // Dynamic paths must be resolved at this point otherwise the initial settings
-    // passed to useTable on subsequent renders will be ignored (as the table will have
-    // already been initialized).
-    const router = useRouter();
-    const query = router.query;
-    const { dictionary } = query;
-    // 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]);
-    // Get configured dictionary classes, column definitions and table options.
-    const { classes, columnDefs, tableOptions, title } = useMemo(() => {
-        return {
-            classes: dataDictionaryConfig?.dataDictionary?.classes || [],
-            columnDefs: dataDictionaryConfig?.columnDefs || [],
-            tableOptions: dataDictionaryConfig?.tableOptions || {},
-            title: dataDictionaryConfig?.dataDictionary?.title || "",
-        };
-    }, [dataDictionaryConfig]);
-    // Build table instance.
-    const table = useTable(classes, columnDefs, tableOptions);
-    // Build outline.
-    const outline = buildClassesOutline(table);
-    return { outline, table, title };
-};

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

@@ -1,8 +0,0 @@
-import { RowData, Table } from "@tanstack/react-table";
-import { Attribute } from "../../../../common/entities";
-import { OutlineItem } from "../../../Layout/components/Outline/types";
-export interface UseDataDictionary<T extends RowData = Attribute> {
-    outline: OutlineItem[];
-    table: Table<T>;
-    title: string;
-}

package/src/components/DataDictionary/hooks/UseDataDictionary/hook.ts

@@ -1,51 +0,0 @@
-import { RowData } from "@tanstack/react-table";
-import { useRouter } from "next/router";
-import { useMemo } from "react";
-import { Attribute, DataDictionaryConfig } from "../../../../common/entities";
-import { useConfig } from "../../../../hooks/useConfig";
-import { buildClassesOutline } from "../../components/Outline/utils";
-import { useTable } from "../../components/Table/hook";
-import { UseDataDictionary } from "./types";
-
-export const useDataDictionary = <
-  T extends RowData = Attribute
->(): UseDataDictionary<T> => {
-  const {
-    config: { dataDictionaries: dataDictionaryConfigs },
-  } = useConfig();
-  // Dynamic paths must be resolved at this point otherwise the initial settings
-  // passed to useTable on subsequent renders will be ignored (as the table will have
-  // already been initialized).
-  const router = useRouter();
-  const query = router.query;
-  const { dictionary } = query;
-
-  // 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
-    ) as DataDictionaryConfig<T> | undefined;
-  }, [dataDictionaryConfigs, dictionary]);
-
-  // Get configured dictionary classes, column definitions and table options.
-  const { classes, columnDefs, tableOptions, title } = useMemo(() => {
-    return {
-      classes: dataDictionaryConfig?.dataDictionary?.classes || [],
-      columnDefs: dataDictionaryConfig?.columnDefs || [],
-      tableOptions: dataDictionaryConfig?.tableOptions || {},
-      title: dataDictionaryConfig?.dataDictionary?.title || "",
-    };
-  }, [dataDictionaryConfig]);
-
-  // Build table instance.
-  const table = useTable<T>(classes, columnDefs, tableOptions);
-
-  // Build outline.
-  const outline = buildClassesOutline<T>(table);
-
-  return { outline, table, title };
-};

package/src/components/DataDictionary/hooks/UseDataDictionary/types.ts

@@ -1,9 +0,0 @@
-import { RowData, Table } from "@tanstack/react-table";
-import { Attribute } from "../../../../common/entities";
-import { OutlineItem } from "../../../Layout/components/Outline/types";
-
-export interface UseDataDictionary<T extends RowData = Attribute> {
-  outline: OutlineItem[];
-  table: Table<T>;
-  title: string;
-}