@okam/next-component 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 2.1.0 (2026-03-26)
+
+### 🚀 Features
+
+- **next-component:** deprecate onPathnameChange in favor of onNavigate ([#445](https://github.com/OKAMca/stack/pull/445))
+  * fix(next-component): keep deprecated onPathnameChange bridge
+  * fix(next-component): prevent prop leakage and align locale docs
+
+### 🩹 Fixes
+
+- resolve dependabot security alerts and clean up published package dependencies ([#441](https://github.com/OKAMca/stack/pull/441))
+- replace use server by server-only in server chunks ([#437](https://github.com/OKAMca/stack/pull/437))
+
+### ❤️ Thank You
+
+- Claude Opus 4.6 (1M context)
+- GabrielAuclair7
+- Marie-Maxime Tanguay @marie-maxime
+- Pierre-Olivier Clerson @poclerson
+
+## 2.0.3 (2026-03-17)
+
+### 🩹 Fixes
+
+- resolve high-severity dependabot alerts ([#429](https://github.com/OKAMca/stack/pull/429))
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+
 ## 2.0.2 (2026-02-27)
 
 ### 🧱 Updated Dependencies

package/hooks/useLink/interface.d.ts

@@ -14,10 +14,13 @@ export interface TLink extends Omit<NextLinkProps, 'scroll' | 'as'> {
      * @default instant
      */
     behavior?: ScrollBehavior;
+    /**
+     * @deprecated Use `onNavigate` from next/link instead.
+     */
     onPathnameChange?: (_pathname: string) => void;
     onSearchParamsChange?: (_searchParams: ReadonlyURLSearchParams) => void;
     onHashChange?: (_hash: string) => void;
 }
-export interface TUseLinkReturn extends Omit<NextLinkProps, 'href'> {
+export interface TUseLinkReturn extends Omit<NextLinkProps, 'href' | 'locale'> {
     href: string;
 }

package/{providers/DraftMode/index.mjs → index-Ber8Ecgv.mjs}

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import { createCtx } from "@okam/react-utils";
 import { useMemo } from "react";
@@ -11,6 +10,6 @@ function DraftModeContextProvider(props) {
   return /* @__PURE__ */ jsx(DraftModeProvider, { value, children });
 }
 export {
-  DraftModeContextProvider,
-  useDraftMode
+  DraftModeContextProvider as D,
+  useDraftMode as u
 };

package/{providers/DraftMode/index.js → index-DV6W6v68.js}

@@ -1,6 +1,4 @@
-"use client";
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const reactUtils = require("@okam/react-utils");
 const react = require("react");

package/index.js

@@ -1,22 +1,594 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index$2 = require("./components/Filter/index.js");
-const index$3 = require("./components/Img/index.js");
-const index$4 = require("./components/Link/index.js");
-const index$6 = require("./hooks/useFilterState/index.js");
-const index$7 = require("./hooks/useHash/index.js");
-const index$8 = require("./hooks/useLink/index.js");
-const index = require("./providers/AdminBar/index.js");
-const index$1 = require("./providers/DraftMode/index.js");
-const index$5 = require("./theme/index.js");
-exports.Filter = index$2;
-exports.Img = index$3;
-exports.Link = index$4;
-exports.useFilterState = index$6.useFilterState;
-exports.useHash = index$7.useHash;
-exports.useLink = index$8.useLink;
-exports.AdminBarContextProvider = index.AdminBarContextProvider;
-exports.useAdminBar = index.useAdminBar;
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const nuqs = require("nuqs");
+const radashi = require("radashi");
+const react = require("react");
+const reactStately = require("react-stately");
+const reactUse = require("react-use");
+const Image = require("next/image");
+const NextLink = require("next/link");
+const navigation = require("next/navigation");
+const reactAria = require("react-aria");
+const reactUtils = require("@okam/react-utils");
+const index$1 = require("./index-DV6W6v68.js");
+const tailwindVariants = require("tailwind-variants");
+function useFilterState(props) {
+  const {
+    id,
+    defaultSelectedKeys: defaultSelectedKeysProp = [],
+    onSelectionChange,
+    selectionMode = "multiple",
+    parser = nuqs.parseAsArrayOf(nuqs.parseAsString),
+    children,
+    items,
+    options,
+    ...rest
+  } = props;
+  const defaultValue = Array.from(defaultSelectedKeysProp).map((key) => key.toString());
+  const queryStateOptions = react.useMemo(
+    () => parser.withOptions(options ?? {}).withDefault(defaultValue),
+    [parser, options, defaultValue]
+  );
+  const [selectedKeys, setSelectedKeys] = nuqs.useQueryState(id, queryStateOptions);
+  const onSelectedKeysChange = (keys) => {
+    onSelectionChange?.(keys);
+    const stringKeys = Array.from(keys).map((key) => key.toString());
+    void setSelectedKeys(stringKeys);
+  };
+  const defaultSelectedKeys = /* @__PURE__ */ new Set([...defaultSelectedKeysProp, ...selectedKeys ?? []]);
+  const state = reactStately.useListState({
+    ...rest,
+    children,
+    items,
+    selectionMode,
+    defaultSelectedKeys,
+    onSelectionChange: onSelectedKeysChange
+  });
+  reactUse.useUpdateEffect(() => {
+    const next = [...state.selectionManager.selectedKeys].map(String);
+    if (radashi.isEqual(next, selectedKeys)) {
+      return;
+    }
+    void setSelectedKeys(next);
+  }, [state.selectionManager.selectedKeys]);
+  return { ...state, onSelectionChange: onSelectedKeysChange, selectedKeys: selectedKeys ?? void 0, defaultSelectedKeys };
+}
+function Filter(props) {
+  const {
+    // TagGroup-specific props
+    children,
+    items,
+    defaultSelectedKeys,
+    selectedKeys,
+    selectionBehavior,
+    selectionMode = "multiple",
+    options,
+    description,
+    disabledKeys,
+    disallowEmptySelection,
+    errorMessage,
+    onRemove,
+    onSelectionChange,
+    // Common props
+    themeName = "filter",
+    tokens,
+    customTheme,
+    // PopoverButton props with defaults
+    type = "dialog",
+    placement = "bottom",
+    // Remaining PopoverButton props
+    ...popoverButtonProps
+  } = props;
+  const tagGroupProps = {
+    items,
+    selectionBehavior,
+    selectionMode,
+    description,
+    disallowEmptySelection,
+    errorMessage,
+    onRemove
+  };
+  const state = useFilterState({ ...props, selectionMode });
+  return /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { themeName: `${themeName}.wrapper`, tokens, customTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
+    stackUi.PopoverButton,
+    {
+      themeName: `${themeName}.popover`,
+      tokens,
+      type,
+      placement,
+      ...popoverButtonProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(stackUi.TagGroup, { themeName: `${themeName}.tagGroup`, tokens, ...tagGroupProps, ...state, children })
+    }
+  ) });
+}
+function Img(props) {
+  const { src, width, height, themeName = "img", tokens, customTheme, ...rest } = props;
+  const theme = stackUi.useThemeContext(themeName, tokens, customTheme);
+  if (typeof src === "object") {
+    const { blurWidth, blurHeight, width: srcWidth, height: srcHeight, ...withoutBlurDimensions } = src;
+    const blur = {
+      blurwidth: blurWidth,
+      blurheight: blurHeight
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Image,
+      {
+        className: theme,
+        ...withoutBlurDimensions,
+        ...rest,
+        ...blur,
+        width: srcWidth ?? width,
+        height: srcHeight ?? height
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Image, { width, height, className: theme, src, ...rest });
+}
+function getHash() {
+  if (typeof window === "undefined")
+    return "";
+  return window.location.hash;
+}
+function useHash() {
+  const defaultHash = getHash();
+  const [hash, setHash] = react.useState(defaultHash);
+  const handleHashChangeEvent = ({ newURL }) => {
+    if (!URL.canParse(newURL))
+      return;
+    const { hash: newHash } = new URL(newURL);
+    if (!newHash || newHash === hash)
+      return;
+    setHash(newHash);
+  };
+  reactUse.useEvent("hashchange", handleHashChangeEvent);
+  return hash;
+}
+function scrollToTop(behavior) {
+  window?.scrollTo?.({ top: 0, behavior });
+}
+function getParamsLocale(params) {
+  const { locale } = params ?? {};
+  if (Array.isArray(locale))
+    return locale[0];
+  return locale;
+}
+function useLinkLocale(props) {
+  const { locale } = props;
+  const params = navigation.useParams();
+  const paramsLocale = getParamsLocale(params);
+  const { locale: ctxLocale } = reactAria.useLocale();
+  return locale ?? ctxLocale ?? paramsLocale ?? false;
+}
+function localizeHref(href, locale) {
+  const hrefString = href.toString();
+  const isAnchor = hrefString.startsWith("#");
+  const isExternal = /^[a-z]+:\/\//i.test(hrefString) || hrefString.startsWith("//");
+  if (isExternal || isAnchor)
+    return hrefString;
+  if (locale != null && locale !== false) {
+    return `/${locale}${hrefString}`;
+  }
+  return hrefString;
+}
+function useLink(props) {
+  const {
+    scroll = true,
+    onMouseEnter,
+    onTouchStart,
+    onClick,
+    onNavigate,
+    onPathnameChange,
+    onHashChange,
+    onSearchParamsChange,
+    href,
+    urlDecorator,
+    replace,
+    prefetch,
+    shallow,
+    passHref,
+    legacyBehavior,
+    behavior = "instant"
+  } = props;
+  const locale = useLinkLocale(props);
+  const localizedHref = localizeHref(href, locale);
+  const pathname = navigation.usePathname();
+  const searchParams = navigation.useSearchParams();
+  const hash = useHash();
+  const hasWarnedOnPathnameChangeRef = react.useRef(false);
+  const isNextScroll = typeof scroll === "boolean";
+  const nextScroll = isNextScroll ? scroll : false;
+  const handleScroll = react.useCallback(() => {
+    if (isNextScroll)
+      return;
+    scrollToTop(behavior);
+  }, [behavior, isNextScroll]);
+  const handleClick = (event) => {
+    onClick?.(event);
+    handleScroll();
+  };
+  const handleTouchStart = (event) => {
+    onTouchStart?.(event);
+    handleScroll();
+  };
+  react.useEffect(() => {
+    if (process.env.NODE_ENV === "production" || onPathnameChange == null || hasWarnedOnPathnameChangeRef.current)
+      return;
+    console.warn("[next-component/Link] `onPathnameChange` is deprecated and will be removed in the next major version. Use `onNavigate` from next/link instead.");
+    hasWarnedOnPathnameChangeRef.current = true;
+  }, [onPathnameChange]);
+  react.useEffect(() => {
+    onPathnameChange?.(pathname);
+  }, [onPathnameChange, pathname]);
+  react.useEffect(() => {
+    onSearchParamsChange?.(searchParams);
+  }, [onSearchParamsChange, searchParams]);
+  react.useEffect(() => {
+    onHashChange?.(hash);
+  }, [onHashChange, hash]);
+  return {
+    href: localizedHref.toString(),
+    as: urlDecorator,
+    replace,
+    prefetch,
+    shallow,
+    onClick: handleClick,
+    onNavigate,
+    onTouchStart: handleTouchStart,
+    onMouseEnter,
+    scroll: nextScroll,
+    passHref,
+    legacyBehavior
+  };
+}
+function Link({ ref, ...props }) {
+  const {
+    themeName = "link",
+    tokens,
+    customTheme,
+    as = NextLink,
+    children,
+    locale,
+    scroll,
+    onPathnameChange,
+    onSearchParamsChange,
+    onHashChange,
+    behavior,
+    urlDecorator: urlDecoratorProp,
+    href: hrefProp,
+    ...rest
+  } = props;
+  const linkProps = useLink(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    stackUi.Anchor,
+    {
+      ref,
+      ...rest,
+      nextLinkProps: linkProps,
+      as,
+      themeName,
+      tokens,
+      customTheme,
+      children
+    }
+  );
+}
+Link.displayName = "Link";
+const adminBarCtx = reactUtils.createCtx();
+const useAdminBar = adminBarCtx[0];
+const AdminBarProvider = adminBarCtx[1];
+function AdminBarContextProvider(props) {
+  const { children } = props;
+  const [error, setError] = react.useState();
+  const value = react.useMemo(() => ({ error, setError }), [error]);
+  return /* @__PURE__ */ jsxRuntime.jsx(AdminBarProvider, { value, children });
+}
+const adminBarContainer = tailwindVariants.tv({
+  base: "w-full bg-gray-100 py-2 px-4 border-gray-200 fixed left-0 right-0 z-50",
+  variants: {
+    position: {
+      top: "top-0 border-b",
+      bottom: "bottom-0 border-t"
+    },
+    fullWidth: {
+      true: "max-w-full"
+    },
+    background: {
+      grey: "bg-gray-100",
+      dark: "bg-gray-800 text-white",
+      light: "bg-white"
+    },
+    padding: {
+      small: "py-1 px-2",
+      medium: "py-2 px-4",
+      large: "py-3 px-6"
+    }
+  },
+  defaultVariants: {
+    position: "top",
+    background: "grey",
+    padding: "medium"
+  }
+});
+const adminBarContent = tailwindVariants.tv({
+  base: "flex items-center",
+  variants: {
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    gap: {
+      small: "gap-2",
+      medium: "gap-4",
+      large: "gap-6"
+    },
+    wrap: {
+      true: "flex-wrap",
+      false: "flex-nowrap"
+    }
+  },
+  defaultVariants: {
+    justify: "between",
+    gap: "medium",
+    wrap: false
+  }
+});
+const adminBarButton = tailwindVariants.tv({
+  base: "px-3 py-1 rounded text-sm font-medium transition-colors",
+  variants: {
+    variant: {
+      primary: "bg-blue-600 text-white hover:bg-blue-700",
+      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
+      danger: "bg-red-600 text-white hover:bg-red-700"
+    },
+    size: {
+      small: "text-xs px-2 py-0.5",
+      medium: "text-sm px-3 py-1",
+      large: "text-base px-4 py-2"
+    }
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "medium"
+  }
+});
+const adminBarError = tailwindVariants.tv({
+  base: "flex items-center justify-center bg-red-50 text-red-700 px-3 py-1 rounded-md text-sm",
+  variants: {
+    severity: {
+      low: "bg-yellow-50 text-yellow-700",
+      medium: "bg-red-50 text-red-700",
+      high: "bg-red-100 text-red-800 font-bold"
+    },
+    hasBorder: {
+      true: "border border-red-300",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    severity: "medium",
+    hasBorder: true
+  }
+});
+const adminBarErrorTypography = tailwindVariants.tv({
+  base: "text-red-700 text-sm font-medium",
+  variants: {
+    severity: {
+      low: "text-yellow-700",
+      medium: "text-red-700",
+      high: "text-red-800 font-bold"
+    }
+  },
+  defaultVariants: {
+    severity: "medium"
+  }
+});
+const adminBarTheme = {
+  container: adminBarContainer,
+  content: adminBarContent,
+  button: adminBarButton,
+  error: adminBarError,
+  errorTypography: adminBarErrorTypography
+};
+const button = tailwindVariants.tv({
+  base: `
+    flex
+    items-center
+    justify-center
+    gap-4
+    transition
+    duration-300
+    ease-in-out
+    disabled:pointer-events-none
+    disabled:opacity-30
+    focus-ring-black
+  `,
+  defaultVariants: {
+    buttonStyle: "default",
+    type: "button",
+    size: "default",
+    shape: "rounded"
+  },
+  variants: {
+    type: {
+      button: "",
+      menu: "text-2xl"
+    },
+    buttonStyle: {
+      default: `
+            px-4
+            py-2
+            text-white
+            !bg-color-1-500
+            hover:!bg-color-1-400
+            active:!bg-color-1-400
+          `,
+      outline: `
+            px-4
+            py-2
+            bg-transparent
+            !border-color-1-500
+            border-2
+            text-color-1-500
+            hover:bg-color-1-500
+            hover:text-white
+            active:bg-color-1-500
+            active:text-white
+          `,
+      hollow: `
+            px-2
+            bg-transparent
+            text-color-1-500
+            hover:border-b-color-1-500
+            active:border-b-color-1-500
+            focus:border-b-color-1-500
+          `
+    },
+    intent: {
+      error: `
+            !bg-error
+            text-white
+            pointer-events-none
+            !border-error
+          `
+    },
+    size: {
+      default: `min-w-12 min-h-6`,
+      large: `min-w-36 min-h-18`
+    },
+    shape: {
+      rounded: `rounded-md`,
+      circular: `rounded-full`
+    }
+  }
+});
+const typography = tailwindVariants.tv({
+  variants: {
+    size: {
+      h1: `text-5xl`,
+      h2: `text-4xl`,
+      h3: `text-3xl`,
+      h4: `text-2xl`,
+      h5: `text-xl`,
+      h6: `text-lg`,
+      leading: `text-md font-bold leading-normal`,
+      paragraph: `text-md inline`,
+      footnotes: `text-sm`,
+      xs: `text-xs`
+    },
+    font: {
+      body: `font-body`
+    },
+    weight: {
+      normal: `font-normal`,
+      light: `font-light`,
+      bold: "font-bold"
+    },
+    color: {
+      gray: `text-gray-500`,
+      white: `text-white`
+    },
+    isError: {
+      true: "text-sm text-error py-3"
+    },
+    align: {
+      center: "text-center",
+      left: "text-left",
+      right: "text-right"
+    }
+  },
+  defaultVariants: {
+    size: "paragraph",
+    font: "body"
+  }
+});
+const filterTagGroupWrapper = tailwindVariants.tv({
+  base: "w-full flex flex-col gap-2"
+});
+const filterTagGroupTags = tailwindVariants.tv({
+  base: "flex flex-col gap-2 max-w-[150px] items-center mx-auto"
+});
+const filterTagGroupLabel = tailwindVariants.tv({
+  extend: typography,
+  defaultVariants: { size: "h4" }
+});
+const filterTagGroupDescription = tailwindVariants.tv({
+  extend: typography,
+  base: "block",
+  defaultVariants: { size: "footnotes" }
+});
+const filterTagGroupErrorMessage = tailwindVariants.tv({
+  extend: typography,
+  base: "block",
+  defaultVariants: { isError: true }
+});
+const filterTagGroupTagWrapper = tailwindVariants.tv({
+  base: [
+    button({ buttonStyle: "outline" }),
+    `
+      focus-visible:outline
+      focus-visible:outline-offset-2
+      focus-visible:outline-2
+      focus-visible:outline-black
+    `
+  ],
+  variants: {
+    isSelected: {
+      true: [button({ buttonStyle: "default" })]
+    },
+    isDisabled: {
+      true: "pointer-events-none opacity-30"
+    }
+  }
+});
+const filterTagGroupTagContainer = tailwindVariants.tv({
+  extend: typography,
+  base: "flex items-center justify-center"
+});
+const filterPopoverButton = tailwindVariants.tv({
+  extend: button,
+  base: "!min-w-[200px]"
+});
+const filterPopoverPopover = tailwindVariants.tv({
+  base: "w-[var(--filter-popover-container-width)] bg-gray-300 rounded-md p-4"
+});
+const filterTheme = {
+  popover: {
+    button: filterPopoverButton,
+    popover: filterPopoverPopover
+  },
+  tagGroup: {
+    wrapper: filterTagGroupWrapper,
+    tags: filterTagGroupTags,
+    label: filterTagGroupLabel,
+    description: filterTagGroupDescription,
+    errorMessage: filterTagGroupErrorMessage,
+    tag: {
+      wrapper: filterTagGroupTagWrapper,
+      container: filterTagGroupTagContainer
+    }
+  }
+};
+const BaseTheme = stackUi.makeTheme({
+  filter: filterTheme,
+  button,
+  typography,
+  adminBar: adminBarTheme
+});
+const index = react.memo(stackUi.createThemeProvider(BaseTheme));
 exports.DraftModeContextProvider = index$1.DraftModeContextProvider;
 exports.useDraftMode = index$1.useDraftMode;
-exports.ThemeProvider = index$5;
+exports.AdminBarContextProvider = AdminBarContextProvider;
+exports.Filter = Filter;
+exports.Img = Img;
+exports.Link = Link;
+exports.ThemeProvider = index;
+exports.useAdminBar = useAdminBar;
+exports.useFilterState = useFilterState;
+exports.useHash = useHash;
+exports.useLink = useLink;