@databiosphere/findable-ui 35.2.0 → 36.0.0

package/src/components/Table/coreOptions/state/pagination/utils.ts

@@ -0,0 +1,21 @@
+import { InitialTableState, PaginationTableState } from "@tanstack/react-table";
+import { PAGINATION_TABLE_STATE } from "./constants";
+
+/**
+ * Initializes pagination state by merging default values with initial state.
+ * TanStack Table always applies a default pagination of `{ pageIndex: 0, pageSize: 10 }`,
+ * so this function ensures custom pagination state is properly initialized from the initial state.
+ * @param initialState - The initial state.
+ * @returns The initialized pagination state.
+ */
+export function initPaginationState(
+  initialState?: InitialTableState
+): PaginationTableState {
+  if (!initialState?.pagination) return PAGINATION_TABLE_STATE;
+  return {
+    pagination: {
+      ...PAGINATION_TABLE_STATE.pagination,
+      ...initialState.pagination,
+    },
+  };
+}

package/src/components/common/AnchorLink/anchorLink.styles.ts

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import Link from "next/link";
 import { inkLight } from "../../../styles/common/mixins/colors";
 
-export const AnchorLink = styled(Link)`
+export const StyledNextLink = styled(Link)`
   color: ${inkLight};
   margin-left: 4px;
   opacity: 0;

package/src/components/common/AnchorLink/anchorLink.tsx

@@ -1,6 +1,7 @@
 import { LinkRounded } from "@mui/icons-material";
+import { useRouter } from "next/router";
 import React from "react";
-import { AnchorLink as Link } from "./anchorLink.styles";
+import { StyledNextLink } from "./anchorLink.styles";
 
 /**
  * An anchor link component that provides deep linking functionality.
@@ -18,9 +19,14 @@ export const AnchorLink = ({
   anchorLink,
   className,
 }: AnchorLinkProps): JSX.Element => {
+  const { query } = useRouter();
   return (
-    <Link aria-label={anchorLink} className={className} href={`#${anchorLink}`}>
+    <StyledNextLink
+      aria-label={anchorLink}
+      className={className}
+      href={{ hash: anchorLink, query }}
+    >
       <LinkRounded fontSize="xsmall" />
-    </Link>
+    </StyledNextLink>
   );
 };

package/src/components/common/CustomIcon/components/SearchIcon/searchIcon.tsx

@@ -1,6 +1,5 @@
-import { SvgIcon } from "@mui/material";
+import { SvgIcon, SvgIconProps } from "@mui/material";
 import React from "react";
-import { CustomSVGIconProps } from "../../common/entities";
 
 /**
  * Custom search icon.
@@ -10,7 +9,7 @@ export const SearchIcon = ({
   fontSize = "xsmall",
   viewBox = "0 0 20 20",
   ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
-}: CustomSVGIconProps): JSX.Element => {
+}: SvgIconProps): JSX.Element => {
   return (
     <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
       <path

package/src/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { InputAdornment } from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+
+export const StyledInputAdornment = styled(InputAdornment)`
+  color: ${PALETTE.INK_LIGHT};
+  margin: 0;
+
+  .MuiIconButton-root {
+    margin-right: -10px;
+  }
+`;

package/src/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment.tsx

@@ -0,0 +1,21 @@
+import { CloseRounded } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import React from "react";
+import { SVG_ICON_PROPS } from "../constants";
+import { StyledInputAdornment } from "./clearInputAdornment.styles";
+import { ICON_BUTTON_PROPS, INPUT_ADORNMENT_PROPS } from "./constants";
+import { ClearInputAdornmentProps } from "./types";
+
+export const ClearInputAdornment = ({
+  in: isIn,
+  onClick,
+}: ClearInputAdornmentProps): JSX.Element | null => {
+  if (!isIn) return null;
+  return (
+    <StyledInputAdornment {...INPUT_ADORNMENT_PROPS}>
+      <IconButton {...ICON_BUTTON_PROPS} onClick={onClick}>
+        <CloseRounded {...SVG_ICON_PROPS} />
+      </IconButton>
+    </StyledInputAdornment>
+  );
+};

package/src/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/constants.ts

@@ -0,0 +1,13 @@
+import { IconButtonProps, InputAdornmentProps } from "@mui/material";
+import { ICON_BUTTON_PROPS as MUI_ICON_BUTTON_PROPS } from "../../../../../../../styles/common/mui/iconButton";
+import { INPUT_ADORNMENT_PROPS as MUI_INPUT_ADORNMENT_PROPS } from "../../../../../../../styles/common/mui/inputAdornment";
+
+export const ICON_BUTTON_PROPS: IconButtonProps = {
+  color: MUI_ICON_BUTTON_PROPS.COLOR.INHERIT,
+  edge: MUI_ICON_BUTTON_PROPS.EDGE.END,
+  size: MUI_ICON_BUTTON_PROPS.SIZE.MEDIUM,
+};
+
+export const INPUT_ADORNMENT_PROPS: InputAdornmentProps = {
+  position: MUI_INPUT_ADORNMENT_PROPS.POSITION.END,
+};

package/src/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/types.ts

@@ -0,0 +1,4 @@
+export interface ClearInputAdornmentProps {
+  in?: boolean;
+  onClick: () => void;
+}

package/src/components/common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/constants.ts

@@ -0,0 +1,7 @@
+import { InputAdornmentProps } from "@mui/material";
+import { INPUT_ADORNMENT_PROPS as MUI_INPUT_ADORNMENT_PROPS } from "../../../../../../../styles/common/mui/inputAdornment";
+
+export const INPUT_ADORNMENT_PROPS: InputAdornmentProps = {
+  disablePointerEvents: true,
+  position: MUI_INPUT_ADORNMENT_PROPS.POSITION.START,
+};

package/src/components/common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/searchInputAdornment.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { SearchIcon } from "../../../../../CustomIcon/components/SearchIcon/searchIcon";
+import { StyledInputAdornment } from "../../inputAdornment.styles";
+import { SVG_ICON_PROPS } from "../constants";
+import { INPUT_ADORNMENT_PROPS } from "./constants";
+
+export const SearchInputAdornment = (): JSX.Element => {
+  return (
+    <StyledInputAdornment {...INPUT_ADORNMENT_PROPS}>
+      <SearchIcon {...SVG_ICON_PROPS} />
+    </StyledInputAdornment>
+  );
+};

package/src/components/common/OutlinedInput/components/InputAdornment/components/constants.ts

@@ -0,0 +1,7 @@
+import { SvgIconProps } from "@mui/material";
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../styles/common/mui/svgIcon";
+
+export const SVG_ICON_PROPS: SvgIconProps = {
+  color: MUI_SVG_ICON_PROPS.COLOR.INHERIT,
+  fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.SMALL,
+};

package/src/components/common/OutlinedInput/components/InputAdornment/inputAdornment.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { InputAdornment } from "@mui/material";
+
+export const StyledInputAdornment = styled(InputAdornment)`
+  color: inherit;
+`;

package/src/components/common/OutlinedInput/outlinedInput.styles.ts

@@ -0,0 +1,24 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { OutlinedInput } from "@mui/material";
+import { PALETTE } from "../../../styles/common/constants/palette";
+
+interface Props {
+  hasValue: boolean;
+}
+
+export const StyledOutlinedInput = styled(OutlinedInput, {
+  shouldForwardProp: (prop) => prop !== "hasValue",
+})<Props>`
+  ${({ hasValue }) =>
+    hasValue &&
+    css`
+      & {
+        color: ${PALETTE.INK_MAIN};
+
+        .MuiOutlinedInput-input {
+          color: inherit;
+        }
+      }
+    `};
+`;

package/src/hooks/stateSyncManager/hooks/UseMetaCommands/hook.ts

@@ -17,11 +17,11 @@ export const useMetaCommands = <Action>({
     switch (command) {
       case META_COMMAND.STATE_TO_URL_PUSH:
         Router.push({ query }, undefined, { shallow: true });
-        dispatch(actions.clearMeta());
+        dispatch?.(actions.clearMeta());
         break;
       case META_COMMAND.STATE_TO_URL_REPLACE:
         Router.replace({ query }, undefined, { shallow: true });
-        dispatch(actions.clearMeta());
+        dispatch?.(actions.clearMeta());
         break;
       default:
         break;

package/src/hooks/stateSyncManager/hooks/UseStateSync/hook.ts

@@ -33,7 +33,7 @@ export const useStateSync = <Action>({
     // Dispatch action sync URL >> state.
     if (wasPop(basePath, pathname, popRef.current)) {
       // When the user navigates with the back/forward buttons.
-      dispatch(actions.urlToState({ query }));
+      dispatch?.(actions.urlToState({ query }));
       onClearPopRef();
       return;
     }
@@ -41,12 +41,12 @@ export const useStateSync = <Action>({
     // Dispatch action sync URL >> state.
     if (hasParams(query, paramKeys)) {
       // When the URL has parameters.
-      dispatch(actions.urlToState({ query }));
+      dispatch?.(actions.urlToState({ query }));
       return;
     }
 
     // Otherwise, dispatch action sync URL << state.
-    dispatch(actions.stateToUrl({ method: ROUTER_METHOD.REPLACE }));
+    dispatch?.(actions.stateToUrl({ method: ROUTER_METHOD.REPLACE }));
     // eslint-disable-next-line react-hooks/exhaustive-deps -- deliberate omission of `state.query`, `state.paramKeys`, `actions` and `dispatch` from dependencies, hook is only expected to run when the Next.js router changes.
   }, [basePath, isReady, pathname, query]);
 };

package/src/hooks/stateSyncManager/types.ts

@@ -29,6 +29,6 @@ export interface StateSyncManagerContext {
 
 export interface UseStateSyncManagerProps<Action> {
   actions: StateSyncManagerActions<Action>;
-  dispatch: Dispatch<Action>;
+  dispatch: Dispatch<Action> | null;
   state: StateSyncManagerContext;
 }

package/src/providers/dataDictionary/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import { DataDictionaryContextProps } from "./types";
+
+export const DataDictionaryContext = createContext<DataDictionaryContextProps>({
+  dictionary: "",
+});

package/src/providers/dataDictionary/hook.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { DataDictionaryContext } from "./context";
+import { DataDictionaryContextProps } from "./types";
+
+/**
+ * Returns data dictionary context.
+ * @returns data dictionary context.
+ */
+export const useDataDictionary = (): DataDictionaryContextProps => {
+  return useContext(DataDictionaryContext);
+};

package/src/providers/dataDictionary/types.ts

@@ -0,0 +1,6 @@
+export interface DataDictionaryContextProps {
+  // Dictionary key; used to identify the dictionary currently rendered.
+  // Propagates the dictionary key to child components via context without
+  // having to pass it explicitly with props.
+  dictionary: string;
+}

package/src/providers/dataDictionaryState/actions/clearMeta/action.ts

@@ -0,0 +1,18 @@
+import { DataDictionaryState } from "../../types";
+import { ClearMetaPayload } from "./types";
+
+/**
+ * Reducer function to handle the "clear meta" action.
+ * @param state - Data Dictionary State.
+ * @param payload - Payload.
+ * @returns data dictionary state.
+ */
+export function clearMetaAction(
+  state: DataDictionaryState,
+  payload: ClearMetaPayload
+): DataDictionaryState {
+  return {
+    ...state,
+    meta: payload,
+  };
+}

package/src/providers/dataDictionaryState/actions/clearMeta/dispatch.ts

@@ -0,0 +1,13 @@
+import { DataDictionaryActionKind } from "../types";
+import { ClearMetaAction } from "./types";
+
+/**
+ * Action creator for clearing meta in the state.
+ * @returns Action with payload and action type.
+ */
+export function clearMeta(): ClearMetaAction {
+  return {
+    payload: null,
+    type: DataDictionaryActionKind.ClearMeta,
+  };
+}

package/src/providers/dataDictionaryState/actions/clearMeta/types.ts

@@ -0,0 +1,8 @@
+import { DataDictionaryActionKind } from "../types";
+
+export type ClearMetaAction = {
+  payload: ClearMetaPayload;
+  type: DataDictionaryActionKind.ClearMeta;
+};
+
+export type ClearMetaPayload = null;

package/src/providers/dataDictionaryState/actions/stateToUrl/action.ts

@@ -0,0 +1,20 @@
+import { META_COMMAND } from "../../../../hooks/stateSyncManager/hooks/UseMetaCommands/types";
+import { DataDictionaryState } from "../../types";
+import { ROUTER_METHOD, StateToUrlPayload } from "./types";
+
+/**
+ * Reducer function to handle the "state >> URL sync" action.
+ * @param state - State.
+ * @param payload - Payload.
+ * @returns state.
+ */
+export function stateToUrlAction(
+  state: DataDictionaryState,
+  payload: StateToUrlPayload
+): DataDictionaryState {
+  const command =
+    payload.method === ROUTER_METHOD.PUSH
+      ? META_COMMAND.STATE_TO_URL_PUSH
+      : META_COMMAND.STATE_TO_URL_REPLACE;
+  return { ...state, meta: { command } };
+}

package/src/providers/dataDictionaryState/actions/stateToUrl/dispatch.ts

@@ -0,0 +1,14 @@
+import { DataDictionaryActionKind } from "../types";
+import { StateToUrlAction, StateToUrlPayload } from "./types";
+
+/**
+ * Action creator for state >> URL sync.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function stateToUrl(payload: StateToUrlPayload): StateToUrlAction {
+  return {
+    payload,
+    type: DataDictionaryActionKind.StateToUrl,
+  };
+}

package/src/providers/dataDictionaryState/actions/stateToUrl/types.ts

@@ -0,0 +1,15 @@
+import { DataDictionaryActionKind } from "../types";
+
+export enum ROUTER_METHOD {
+  PUSH = "push",
+  REPLACE = "replace",
+}
+
+export type StateToUrlAction = {
+  payload: StateToUrlPayload;
+  type: DataDictionaryActionKind.StateToUrl;
+};
+
+export type StateToUrlPayload = {
+  method: ROUTER_METHOD;
+};

package/src/providers/dataDictionaryState/actions/types.ts

@@ -0,0 +1,20 @@
+import { ClearMetaAction } from "./clearMeta/types";
+import { StateToUrlAction } from "./stateToUrl/types";
+import { UpdateColumnFiltersAction } from "./updateColumnFilters/types";
+import { UpdateGlobalFilterAction } from "./updateGlobalFilter/types";
+import { UrlToStateAction } from "./urlToState/types";
+
+export type DataDictionaryAction =
+  | ClearMetaAction
+  | StateToUrlAction
+  | UpdateColumnFiltersAction
+  | UpdateGlobalFilterAction
+  | UrlToStateAction;
+
+export enum DataDictionaryActionKind {
+  ClearMeta = "CLEAR_META",
+  StateToUrl = "STATE_TO_URL",
+  UpdateColumnFilters = "UPDATE_COLUMN_FILTERS",
+  UpdateGlobalFilter = "UPDATE_GLOBAL_FILTER",
+  UrlToState = "URL_TO_STATE",
+}

package/src/providers/dataDictionaryState/actions/updateColumnFilters/action.ts

@@ -0,0 +1,24 @@
+import { META_COMMAND } from "../../../../hooks/stateSyncManager/hooks/UseMetaCommands/types";
+import { buildNextDictionaries } from "../../dictionaries/state";
+import { DataDictionaryState } from "../../types";
+import { UpdateColumnFiltersPayload } from "./types";
+import { buildNextColumnFilters } from "./utils";
+
+/**
+ * Reducer function to handle the "update column filters" action.
+ * @param state - Data dictionary state.
+ * @param payload - Payload.
+ * @returns data dictionary state.
+ */
+export function updateColumnFiltersAction(
+  state: DataDictionaryState,
+  payload: UpdateColumnFiltersPayload
+): DataDictionaryState {
+  return {
+    ...state,
+    dictionaries: buildNextDictionaries(state, payload.dictionary, {
+      columnFilters: buildNextColumnFilters(state, payload),
+    }),
+    meta: { command: META_COMMAND.STATE_TO_URL_PUSH },
+  };
+}

package/src/providers/dataDictionaryState/actions/updateColumnFilters/dispatch.ts

@@ -0,0 +1,16 @@
+import { DataDictionaryActionKind } from "../types";
+import { UpdateColumnFiltersAction, UpdateColumnFiltersPayload } from "./types";
+
+/**
+ * Action creator for updating column filters in the state.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function updateColumnFilters(
+  payload: UpdateColumnFiltersPayload
+): UpdateColumnFiltersAction {
+  return {
+    payload,
+    type: DataDictionaryActionKind.UpdateColumnFilters,
+  };
+}

package/src/providers/dataDictionaryState/actions/updateColumnFilters/types.ts

@@ -0,0 +1,12 @@
+import { ColumnFiltersState, Updater } from "@tanstack/react-table";
+import { DataDictionaryActionKind } from "../types";
+
+export type UpdateColumnFiltersAction = {
+  payload: UpdateColumnFiltersPayload;
+  type: DataDictionaryActionKind.UpdateColumnFilters;
+};
+
+export interface UpdateColumnFiltersPayload {
+  dictionary: string;
+  updaterOrValue: Updater<ColumnFiltersState>;
+}

package/src/providers/dataDictionaryState/actions/updateColumnFilters/utils.ts

@@ -0,0 +1,41 @@
+import { ColumnFiltersState, functionalUpdate } from "@tanstack/react-table";
+import { DataDictionaryState } from "../../types";
+import { UpdateColumnFiltersPayload } from "./types";
+
+/**
+ * Builds the next column filters state for the current dictionary.
+ * Uses TanStack updater to update the column filters state.
+ * @param state - State.
+ * @param payload - Payload.
+ * @returns column filters state.
+ */
+export function buildNextColumnFilters(
+  state: DataDictionaryState,
+  payload: UpdateColumnFiltersPayload
+): ColumnFiltersState {
+  return functionalUpdate(
+    payload.updaterOrValue,
+    getOldColumnFilters(state, payload)
+  );
+}
+
+/**
+ * Retrieves the current "old" column filters state.
+ * @param state - State.
+ * @param payload - Payload.
+ * @returns old column filters state.
+ */
+function getOldColumnFilters(
+  state: DataDictionaryState,
+  payload: UpdateColumnFiltersPayload
+): ColumnFiltersState {
+  // Grab the dictionary.
+  const dictionary = state.dictionaries[payload.dictionary];
+
+  // If the dictionary is not found, return an empty array.
+  if (!dictionary) return [];
+
+  // Grab column filters from dictionary state.
+  const { columnFilters = [] } = dictionary.state;
+  return columnFilters;
+}

package/src/providers/dataDictionaryState/actions/updateGlobalFilter/action.ts

@@ -0,0 +1,25 @@
+import { buildNextDictionaries } from "../../dictionaries/state";
+import { DataDictionaryState } from "../../types";
+import { UpdateGlobalFilterPayload } from "./types";
+import { buildNextGlobalFilter, buildNextMeta } from "./utils";
+
+/**
+ * Reducer function to handle the "update global filter" action.
+ * @param state - State.
+ * @param payload - Payload.
+ * @returns state.
+ */
+export function updateGlobalFilterAction(
+  state: DataDictionaryState,
+  payload: UpdateGlobalFilterPayload
+): DataDictionaryState {
+  const globalFilter = buildNextGlobalFilter(payload);
+  const meta = buildNextMeta(state, payload, globalFilter);
+  return {
+    ...state,
+    dictionaries: buildNextDictionaries(state, payload.dictionary, {
+      globalFilter,
+    }),
+    meta,
+  };
+}

package/src/providers/dataDictionaryState/actions/updateGlobalFilter/dispatch.ts

@@ -0,0 +1,16 @@
+import { DataDictionaryActionKind } from "../types";
+import { UpdateGlobalFilterAction, UpdateGlobalFilterPayload } from "./types";
+
+/**
+ * Action creator for updating global filter in the state.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function updateGlobalFilter(
+  payload: UpdateGlobalFilterPayload
+): UpdateGlobalFilterAction {
+  return {
+    payload,
+    type: DataDictionaryActionKind.UpdateGlobalFilter,
+  };
+}

package/src/providers/dataDictionaryState/actions/updateGlobalFilter/types.ts

@@ -0,0 +1,12 @@
+import { Updater } from "@tanstack/react-table";
+import { DataDictionaryActionKind } from "../types";
+
+export type UpdateGlobalFilterAction = {
+  payload: UpdateGlobalFilterPayload;
+  type: DataDictionaryActionKind.UpdateGlobalFilter;
+};
+
+export interface UpdateGlobalFilterPayload {
+  dictionary: string;
+  updaterOrValue: Updater<string | undefined>;
+}

package/src/providers/dataDictionaryState/actions/updateGlobalFilter/utils.ts

@@ -0,0 +1,50 @@
+import { functionalUpdate } from "@tanstack/react-table";
+import { META_COMMAND } from "../../../../hooks/stateSyncManager/hooks/UseMetaCommands/types";
+import { DataDictionaryState } from "../../types";
+import { UpdateGlobalFilterPayload } from "./types";
+
+/**
+ * Builds the next global filter state for the current dictionary.
+ * Uses TanStack updater to update the global filter state.
+ * @param payload - Payload.
+ * @returns global filter state.
+ */
+export function buildNextGlobalFilter(
+  payload: UpdateGlobalFilterPayload
+): string | undefined {
+  return functionalUpdate(payload.updaterOrValue, undefined) || undefined;
+}
+
+/**
+ * Builds the next meta state for the current dictionary.
+ * @param state - State.
+ * @param payload - Payload.
+ * @param nextGlobalFilter - Next global filter.
+ * @returns meta state.
+ */
+export function buildNextMeta(
+  state: DataDictionaryState,
+  payload: UpdateGlobalFilterPayload,
+  nextGlobalFilter: string | undefined
+): DataDictionaryState["meta"] {
+  const currentGlobalFilter = getCurrentGlobalFilter(state, payload);
+  // Use PUSH method with adding or removing the global filter.
+  if (currentGlobalFilter === undefined || nextGlobalFilter === undefined) {
+    return { command: META_COMMAND.STATE_TO_URL_PUSH };
+  }
+  // Use REPLACE method with edits to the global filter.
+  return { command: META_COMMAND.STATE_TO_URL_REPLACE };
+}
+
+/**
+ * Returns the current global filter for the current dictionary.
+ * @param state - State.
+ * @param payload - Payload.
+ * @returns global filter.
+ */
+function getCurrentGlobalFilter(
+  state: DataDictionaryState,
+  payload: UpdateGlobalFilterPayload
+): string | undefined {
+  return state.dictionaries[payload.dictionary].state.globalFilter;
+}

package/src/providers/dataDictionaryState/actions/urlToState/action.ts

@@ -0,0 +1,28 @@
+import { parseJsonQueryParam } from "../../../../utils/parseJsonQueryParam";
+import { DATA_DICTIONARY_URL_PARAMS } from "../../dictionaries/constants";
+import { buildNextDictionaries } from "../../dictionaries/state";
+import { DataDictionaryState } from "../../types";
+import { UrlToStatePayload } from "./types";
+
+/**
+ * Reducer function to handle the "URL >> state sync" action.
+ * @param state - State.
+ * @param payload - Payload.
+ * @returns state.
+ */
+export function urlToStateAction(
+  state: DataDictionaryState,
+  payload: UrlToStatePayload
+): DataDictionaryState {
+  if (typeof payload.query.dictionary !== "string") return state;
+  return {
+    ...state,
+    dictionaries: buildNextDictionaries(state, payload.query.dictionary, {
+      columnFilters: parseJsonQueryParam(
+        payload.query[DATA_DICTIONARY_URL_PARAMS.COLUMN_FILTERS],
+        []
+      ),
+      globalFilter: payload.query[DATA_DICTIONARY_URL_PARAMS.GLOBAL_FILTER],
+    }),
+  };
+}

package/src/providers/dataDictionaryState/actions/urlToState/dispatch.ts

@@ -0,0 +1,14 @@
+import { DataDictionaryActionKind } from "../types";
+import { UrlToStateAction, UrlToStatePayload } from "./types";
+
+/**
+ * Action creator for URL >> state sync.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function urlToState(payload: UrlToStatePayload): UrlToStateAction {
+  return {
+    payload,
+    type: DataDictionaryActionKind.UrlToState,
+  };
+}