@databiosphere/findable-ui 35.1.0 → 36.0.0

package/src/components/Table/components/TableCell/components/RankedCell/utils.ts

@@ -0,0 +1,85 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+import { escapeRegExp } from "../../../../../../common/utils";
+import { ColumnFilterMeta } from "../../../../columnDef/globalFilter/types";
+import { parseSearchTerms } from "../../../../columnDef/globalFilter/utils";
+
+/**
+ * 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 function renderRankedCell<T extends RowData>(
+  table: Table<T>,
+  row: Row<T>,
+  columnId: string,
+  value: string | undefined | null
+): string {
+  // If the cell value is undefined or null, return an empty string.
+  if (value === undefined || value === null) return "";
+
+  const stringValue = String(value);
+
+  // Check if the cell is ranked.
+  const isRanked = isRankedCell(table, row, columnId);
+
+  // Return the unranked cell, as-is, in string form.
+  if (!isRanked) return stringValue;
+
+  // Tokenise the current global filter.
+  const tokens = getTokens(table);
+
+  // If there are no tokens, return the value as-is, in string form.
+  if (tokens.length === 0) return stringValue;
+
+  // Create regex pattern.
+  const regex = getTokensRegex(tokens);
+
+  return stringValue.replace(regex, "<mark>$1</mark>");
+}
+
+/**
+ * Returns the current global filter tokens from the table.
+ * @param table - Table.
+ * @returns An array of search tokens.
+ */
+export function getTokens<T extends RowData>(table: Table<T>): string[] {
+  const { getState } = table;
+  const { globalFilter } = getState();
+  return parseSearchTerms(globalFilter);
+}
+
+/**
+ * Returns a RegExp pattern for matching search tokens.
+ * @param tokens - Search tokens.
+ * @returns A RegExp pattern that matches any of the tokens.
+ */
+export function getTokensRegex(tokens: string[]): RegExp {
+  return new RegExp(`(${tokens.map(escapeRegExp).join("|")})`, "gi");
+}
+
+/**
+ * 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 function isRankedCell<T extends RowData>(
+  table: Table<T>,
+  row: Row<T>,
+  columnId: string
+): boolean {
+  const { getState } = table;
+  const { globalFilter } = getState();
+
+  // If there is no global filter, return the value as-is.
+  if (!globalFilter) return false;
+
+  // Check if the column has filter metadata with itemRank.passed
+  const columnFilterMeta = row.columnFiltersMeta[columnId] as ColumnFilterMeta;
+
+  return columnFilterMeta?.passed ?? false;
+}

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.ts

@@ -1,11 +1,36 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Menu, menuClasses, paperClasses } from "@mui/material";
+import { Button, Menu, menuClasses, paperClasses } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 import { MAX_LIST_HEIGHT_PX } from "../../../../Filter/common/constants";
 import {
   MuiListItemButtonRoot,
   MuiListItemTextRoot,
 } from "../../../../Filter/components/FilterList/filterList.styles";
 
+interface Props {
+  open: boolean;
+}
+
+export const StyledButton = styled(Button, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<Props>`
+  &.MuiButtonGroup-grouped {
+    gap: 0;
+
+    .MuiButton-endIcon {
+      margin-left: 0;
+      margin-right: -8px;
+    }
+
+    ${({ open }) =>
+      open &&
+      css`
+        background-color: ${PALETTE.SMOKE_LIGHT};
+      `}
+  }
+`;
+
 export const StyledMenu = styled(Menu)`
   .${paperClasses.root} {
     margin: 4px 0;

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.tsx

@@ -1,8 +1,8 @@
 import {
   Checkbox,
+  Grid,
   ListItemButton,
   ListItemText,
-  Button as MButton,
   Typography,
 } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
@@ -13,10 +13,11 @@ import { CheckedIcon } from "../../../../common/CustomIcon/components/CheckedIco
 import { UncheckedIcon } from "../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { useMenu } from "../../../../common/Menu/hooks/useMenu";
+import { FilterCountChip } from "../../../../Filter/components/FilterCountChip/filterCountChip";
 import { getColumnHeader } from "../../../common/utils";
 import { getSortedFacetedValues } from "../../../featureOptions/facetedColumn/utils";
-import { StyledMenu } from "./columnFilter.styles";
-import { MENU_PROPS } from "./constants";
+import { StyledButton, StyledMenu } from "./columnFilter.styles";
+import { GRID_PROPS, MENU_PROPS } from "./constants";
 import { ColumnFilterProps } from "./types";
 import { updater } from "./utils";
 
@@ -26,7 +27,7 @@ import { updater } from "./utils";
  */
 
 export const ColumnFilter = <T extends RowData>({
-  Button = MButton,
+  Button = StyledButton,
   className,
   column,
   ...props /* MuiMenuProps */
@@ -39,10 +40,15 @@ export const ColumnFilter = <T extends RowData>({
     <Fragment>
       <Button
         key={column.id}
+        disabled={sortedValues.length === 0}
         endIcon={<DropDownIcon color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />}
         onClick={onOpen}
+        open={open}
       >
-        {getColumnHeader(column)}
+        <Grid {...GRID_PROPS}>
+          {getColumnHeader(column)}
+          <FilterCountChip count={filterValue.length} />
+        </Grid>
       </Button>
       <StyledMenu
         {...MENU_PROPS}

package/src/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag.styles.ts

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+
+export const StyledChip = styled(Chip)`
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px ${PALETTE.COMMON_WHITE};
+  cursor: pointer;
+  gap: 4px;
+  justify-self: flex-start;
+  padding: 0 8px;
+
+  .MuiChip-label {
+    padding: 0;
+  }
+
+  .MuiChip-deleteIcon {
+    font-size: 16px;
+    margin: 0 -4px 0 0;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+`;

package/src/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag.tsx

@@ -0,0 +1,31 @@
+import { CloseRounded } from "@mui/icons-material";
+import { RowData } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { updater } from "../../../../../components/TableFeatures/ColumnFilter/utils";
+import { StyledChip } from "./columnFilterTag.styles";
+import { CHIP_PROPS, SVG_ICON_PROPS } from "./constants";
+import { ColumnFilterTagProps } from "./types";
+
+export const ColumnFilterTag = <T extends RowData>({
+  className,
+  column,
+  ...props /* MuiChipProps */
+}: ColumnFilterTagProps<T>): JSX.Element => {
+  const filterValue = column.getFilterValue() as unknown[];
+  return (
+    <Fragment>
+      {filterValue.map((value) => (
+        <StyledChip
+          {...CHIP_PROPS}
+          key={String(value)}
+          className={className}
+          deleteIcon={<CloseRounded {...SVG_ICON_PROPS} />}
+          label={String(value)}
+          onClick={() => column.setFilterValue(updater(value))}
+          onDelete={() => column.setFilterValue(updater(value))}
+          {...props}
+        />
+      ))}
+    </Fragment>
+  );
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/constants.ts

@@ -0,0 +1,13 @@
+import { ChipProps, SvgIconProps } from "@mui/material";
+import { CHIP_PROPS as MUI_CHIP_PROPS } from "../../../../../../../styles/common/mui/chip";
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+
+export const CHIP_PROPS: ChipProps = {
+  clickable: false,
+  color: MUI_CHIP_PROPS.COLOR.DEFAULT,
+  size: MUI_CHIP_PROPS.SIZE.MEDIUM,
+};
+
+export const SVG_ICON_PROPS: SvgIconProps = {
+  color: MUI_SVG_ICON_PROPS.COLOR.INHERIT,
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/stories/columFilterTag.stories.tsx

@@ -0,0 +1,26 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { BIONETWORK } from "../../../../../../../DataDictionary/components/Filters/stories/constants";
+import { ColumnFilterTag } from "../columnFilterTag";
+
+const meta: Meta<typeof ColumnFilterTag> = {
+  component: ColumnFilterTag,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ display: "grid", gap: 2, gridAutoFlow: "column" }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    column: BIONETWORK,
+  },
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/types.ts

@@ -0,0 +1,9 @@
+import { ChipProps } from "@mui/material";
+import { Column, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../../../types";
+
+export interface ColumnFilterTagProps<T extends RowData>
+  extends BaseComponentProps,
+    ChipProps {
+  column: Column<T>;
+}

package/src/components/Table/components/TableFeatures/ColumnFilter/constants.ts

@@ -1,4 +1,11 @@
-import { MenuProps } from "@mui/material";
+import { GridProps, MenuProps } from "@mui/material";
+
+export const GRID_PROPS: GridProps = {
+  alignItems: "center",
+  container: true,
+  direction: "row",
+  gap: 1,
+};
 
 export const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open"> = {
   anchorOrigin: {

package/src/components/Table/components/TableFeatures/ColumnFilter/types.ts

@@ -1,10 +1,11 @@
-import { Button, MenuProps } from "@mui/material";
+import { MenuProps } from "@mui/material";
 import { Column, RowData } from "@tanstack/react-table";
 import { BaseComponentProps } from "../../../../types";
+import { StyledButton } from "./columnFilter.styles";
 
 export interface ColumnFilterProps<T extends RowData>
   extends BaseComponentProps,
     Omit<MenuProps, "anchorEl" | "onClose" | "open"> {
-  Button?: typeof Button;
+  Button?: typeof StyledButton;
   column: Column<T>;
 }

package/src/components/Table/components/TableFeatures/GlobalFilter/constants.ts

@@ -0,0 +1,8 @@
+import { OutlinedInputProps } from "@mui/material";
+import { OUTLINED_INPUT_PROPS as MUI_OUTLINED_INPUT_PROPS } from "../../../../../styles/common/mui/outlinedInput";
+
+export const OUTLINED_INPUT_PROPS: OutlinedInputProps = {
+  color: MUI_OUTLINED_INPUT_PROPS.COLOR.SECONDARY,
+  fullWidth: true,
+  id: "global-filter",
+};

package/src/components/Table/components/TableFeatures/GlobalFilter/globalFilter.tsx

@@ -0,0 +1,33 @@
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { ClearInputAdornment } from "../../../../common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment";
+import { SearchInputAdornment } from "../../../../common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/searchInputAdornment";
+import { StyledOutlinedInput } from "../../../../common/OutlinedInput/outlinedInput.styles";
+import { OUTLINED_INPUT_PROPS } from "./constants";
+import { GlobalFilterProps } from "./types";
+
+export const GlobalFilter = <T extends RowData>({
+  className,
+  table,
+  ...props /* MuiOutlinedInputProps */
+}: GlobalFilterProps<T>): JSX.Element => {
+  const { getState, setGlobalFilter } = table;
+  const { globalFilter } = getState();
+  return (
+    <StyledOutlinedInput
+      {...OUTLINED_INPUT_PROPS}
+      className={className}
+      endAdornment={
+        <ClearInputAdornment
+          in={!!globalFilter}
+          onClick={() => setGlobalFilter(undefined)}
+        />
+      }
+      hasValue={!!globalFilter}
+      onChange={(e) => setGlobalFilter(e.target.value)}
+      startAdornment={<SearchInputAdornment />}
+      value={globalFilter ?? ""}
+      {...props}
+    />
+  );
+};

package/src/components/Table/components/TableFeatures/GlobalFilter/types.ts

@@ -0,0 +1,9 @@
+import { OutlinedInputProps } from "@mui/material";
+import { RowData, Table } from "@tanstack/react-table";
+import { BaseComponentProps } from "components/types";
+
+export interface GlobalFilterProps<T extends RowData>
+  extends BaseComponentProps,
+    OutlinedInputProps {
+  table: Table<T>;
+}

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

@@ -0,0 +1,8 @@
+import { PaginationTableState } from "@tanstack/react-table";
+
+export const PAGINATION_TABLE_STATE: PaginationTableState = {
+  pagination: {
+    pageIndex: 0,
+    pageSize: 10,
+  },
+};

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;
 }