@okam/next-component 2.0.3 → 2.1.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 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

package/components/AdminBar/AdminBarContent.d.ts

@@ -0,0 +1,3 @@
+import { TToken } from '@okam/stack-ui';
+import { TAdminBarProps } from './interface';
+export declare function AdminBarContent<T extends TToken>({ children, themeName, tokens, customTheme, }: TAdminBarProps<T>): import("react/jsx-runtime").JSX.Element;

package/components/AdminBar/AdminBarContent.js

@@ -0,0 +1,14 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+function AdminBarContent({
+  children,
+  themeName = "adminBar",
+  tokens,
+  customTheme
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { themeName: `${themeName}.container`, tokens, customTheme, children: /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { themeName: `${themeName}.content`, tokens, children }) });
+}
+exports.AdminBarContent = AdminBarContent;

package/components/AdminBar/AdminBarContent.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@okam/stack-ui";
+function AdminBarContent({
+  children,
+  themeName = "adminBar",
+  tokens,
+  customTheme
+}) {
+  return /* @__PURE__ */ jsx(Box, { themeName: `${themeName}.container`, tokens, customTheme, children: /* @__PURE__ */ jsx(Box, { themeName: `${themeName}.content`, tokens, children }) });
+}
+export {
+  AdminBarContent
+};

package/components/AdminBar/index.js

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const stackUi = require("@okam/stack-ui");
 const headers = require("next/headers");
+const AdminBarContent = require("./AdminBarContent.js");
 async function AdminBar({
   children,
   themeName = "adminBar",
@@ -9,6 +9,6 @@ async function AdminBar({
   customTheme
 }) {
   const { isEnabled } = await headers.draftMode();
-  return isEnabled && /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { themeName: `${themeName}.container`, tokens, customTheme, children: /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { themeName: `${themeName}.content`, tokens, children }) });
+  return isEnabled && /* @__PURE__ */ jsxRuntime.jsx(AdminBarContent.AdminBarContent, { themeName, tokens, customTheme, children });
 }
 module.exports = AdminBar;

package/components/AdminBar/index.mjs

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { Box } from "@okam/stack-ui";
 import { draftMode } from "next/headers";
+import { AdminBarContent } from "./AdminBarContent.mjs";
 async function AdminBar({
   children,
   themeName = "adminBar",
@@ -8,7 +8,7 @@ async function AdminBar({
   customTheme
 }) {
   const { isEnabled } = await draftMode();
-  return isEnabled && /* @__PURE__ */ jsx(Box, { themeName: `${themeName}.container`, tokens, customTheme, children: /* @__PURE__ */ jsx(Box, { themeName: `${themeName}.content`, tokens, children }) });
+  return isEnabled && /* @__PURE__ */ jsx(AdminBarContent, { themeName, tokens, customTheme, children });
 }
 export {
   AdminBar as default

package/components/Link/index.js

@@ -11,6 +11,7 @@ function Link({ ref, ...props }) {
     customTheme,
     as = NextLink,
     children,
+    locale,
     scroll,
     onPathnameChange,
     onSearchParamsChange,

package/components/Link/index.mjs

@@ -10,6 +10,7 @@ function Link({ ref, ...props }) {
     customTheme,
     as = NextLink,
     children,
+    locale,
     scroll,
     onPathnameChange,
     onSearchParamsChange,

package/hooks/useFilterState/index.js

@@ -39,7 +39,7 @@ function useFilterState(props) {
     onSelectionChange: onSelectedKeysChange
   });
   reactUse.useUpdateEffect(() => {
-    const next = [...state.selectionManager.selectedKeys].map(String);
+    const next = Array.from(state.selectionManager.selectedKeys, String);
     if (radashi.isEqual(next, selectedKeys)) {
       return;
     }

package/hooks/useFilterState/index.mjs

@@ -37,7 +37,7 @@ function useFilterState(props) {
     onSelectionChange: onSelectedKeysChange
   });
   useUpdateEffect(() => {
-    const next = [...state.selectionManager.selectedKeys].map(String);
+    const next = Array.from(state.selectionManager.selectedKeys, String);
     if (isEqual(next, selectedKeys)) {
       return;
     }

package/hooks/useLink/index.js

@@ -5,6 +5,8 @@ const navigation = require("next/navigation");
 const react = require("react");
 const reactAria = require("react-aria");
 const index = require("../useHash/index.js");
+const _interface = require("./interface.js");
+const EXTERNAL_URL_RE = /^[a-z]+:\/\//i;
 function scrollToTop(behavior) {
   window?.scrollTo?.({ top: 0, behavior });
 }
@@ -15,22 +17,31 @@ function getParamsLocale(params) {
   return locale;
 }
 function useLinkLocale(props) {
-  const { locale } = props;
+  const { locale, i18n } = props;
+  const { defaultLocale, localePrefix = "always" } = i18n ?? {};
   const params = navigation.useParams();
   const paramsLocale = getParamsLocale(params);
   const { locale: ctxLocale } = reactAria.useLocale();
-  return locale ?? ctxLocale ?? paramsLocale ?? false;
+  const finalLocale = locale ?? ctxLocale ?? paramsLocale ?? false;
+  const shouldDisplayLocale = {
+    [_interface.LocalePrefix.Always]: true,
+    [_interface.LocalePrefix.AsNeeded]: finalLocale !== defaultLocale
+  }[localePrefix];
+  const displayLocale = shouldDisplayLocale ? finalLocale : false;
+  return displayLocale;
 }
 function localizeHref(href, locale) {
   const hrefString = href.toString();
+  const hasTrailingSlash = hrefString.endsWith("/");
   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}`;
+  const isExternal = EXTERNAL_URL_RE.test(hrefString) || hrefString.startsWith("//");
+  let finalHref;
+  if (locale != null && locale !== false && !isExternal && !isAnchor) {
+    finalHref = `/${locale}${hrefString}`;
+  } else {
+    finalHref = hrefString;
   }
-  return hrefString;
+  return hasTrailingSlash || isAnchor ? finalHref : `${finalHref}/`;
 }
 function useLink(props) {
   const {
@@ -38,6 +49,7 @@ function useLink(props) {
     onMouseEnter,
     onTouchStart,
     onClick,
+    onNavigate,
     onPathnameChange,
     onHashChange,
     onSearchParamsChange,
@@ -55,6 +67,7 @@ function useLink(props) {
   const pathname = navigation.usePathname();
   const searchParams = navigation.useSearchParams();
   const hash = index.useHash();
+  const hasWarnedOnPathnameChangeRef = react.useRef(false);
   const isNextScroll = typeof scroll === "boolean";
   const nextScroll = isNextScroll ? scroll : false;
   const handleScroll = react.useCallback(() => {
@@ -70,6 +83,12 @@ function useLink(props) {
     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]);
@@ -83,10 +102,10 @@ function useLink(props) {
     href: localizedHref.toString(),
     as: urlDecorator,
     replace,
-    locale,
     prefetch,
     shallow,
     onClick: handleClick,
+    onNavigate,
     onTouchStart: handleTouchStart,
     onMouseEnter,
     scroll: nextScroll,

package/hooks/useLink/index.mjs

@@ -1,8 +1,10 @@
 "use client";
 import { usePathname, useSearchParams, useParams } from "next/navigation";
-import { useCallback, useEffect } from "react";
+import { useRef, useCallback, useEffect } from "react";
 import { useLocale } from "react-aria";
 import { useHash } from "../useHash/index.mjs";
+import { LocalePrefix } from "./interface.mjs";
+const EXTERNAL_URL_RE = /^[a-z]+:\/\//i;
 function scrollToTop(behavior) {
   window?.scrollTo?.({ top: 0, behavior });
 }
@@ -13,22 +15,31 @@ function getParamsLocale(params) {
   return locale;
 }
 function useLinkLocale(props) {
-  const { locale } = props;
+  const { locale, i18n } = props;
+  const { defaultLocale, localePrefix = "always" } = i18n ?? {};
   const params = useParams();
   const paramsLocale = getParamsLocale(params);
   const { locale: ctxLocale } = useLocale();
-  return locale ?? ctxLocale ?? paramsLocale ?? false;
+  const finalLocale = locale ?? ctxLocale ?? paramsLocale ?? false;
+  const shouldDisplayLocale = {
+    [LocalePrefix.Always]: true,
+    [LocalePrefix.AsNeeded]: finalLocale !== defaultLocale
+  }[localePrefix];
+  const displayLocale = shouldDisplayLocale ? finalLocale : false;
+  return displayLocale;
 }
 function localizeHref(href, locale) {
   const hrefString = href.toString();
+  const hasTrailingSlash = hrefString.endsWith("/");
   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}`;
+  const isExternal = EXTERNAL_URL_RE.test(hrefString) || hrefString.startsWith("//");
+  let finalHref;
+  if (locale != null && locale !== false && !isExternal && !isAnchor) {
+    finalHref = `/${locale}${hrefString}`;
+  } else {
+    finalHref = hrefString;
   }
-  return hrefString;
+  return hasTrailingSlash || isAnchor ? finalHref : `${finalHref}/`;
 }
 function useLink(props) {
   const {
@@ -36,6 +47,7 @@ function useLink(props) {
     onMouseEnter,
     onTouchStart,
     onClick,
+    onNavigate,
     onPathnameChange,
     onHashChange,
     onSearchParamsChange,
@@ -53,6 +65,7 @@ function useLink(props) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const hash = useHash();
+  const hasWarnedOnPathnameChangeRef = useRef(false);
   const isNextScroll = typeof scroll === "boolean";
   const nextScroll = isNextScroll ? scroll : false;
   const handleScroll = useCallback(() => {
@@ -68,6 +81,12 @@ function useLink(props) {
     onTouchStart?.(event);
     handleScroll();
   };
+  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]);
   useEffect(() => {
     onPathnameChange?.(pathname);
   }, [onPathnameChange, pathname]);
@@ -81,10 +100,10 @@ function useLink(props) {
     href: localizedHref.toString(),
     as: urlDecorator,
     replace,
-    locale,
     prefetch,
     shallow,
     onClick: handleClick,
+    onNavigate,
     onTouchStart: handleTouchStart,
     onMouseEnter,
     scroll: nextScroll,

package/hooks/useLink/interface.d.ts

@@ -1,6 +1,65 @@
 import { LinkProps as NextLinkProps } from 'next/link';
 import { ReadonlyURLSearchParams } from 'next/navigation';
-export interface TLink extends Omit<NextLinkProps, 'scroll' | 'as'> {
+import { UrlObject } from 'node:url';
+export declare enum LocalePrefix {
+    /**
+     * The pathname will be prefixed with the locale only when it is not the default locale
+     *
+     * @example
+     * ```ts
+     * const linkI18nConfig = {
+     *   localePrefix: 'as-needed',
+     *   defaultLocale: 'en',
+     * }
+     *
+     * // <Link locale="en" href="/products/1" />
+     * // output: /products/1
+     *
+     * // <Link href="/products/1" />
+     * // output: /products/1
+     *
+     * // <Link locale="fr" href="/produits/1" />
+     * // output: /fr/produits/1
+     * ```
+     */
+    AsNeeded = "as-needed",
+    /**
+     * The pathname will always be prefixed by the locale
+     *
+     * @example
+     * ```ts
+     * const linkI18nConfig = {
+     *   localePrefix: 'always',
+     *   defaultLocale: 'en',
+     * }
+     *
+     * // <Link locale="en" href="/products/1" />
+     * // output: /en/products/1
+     *
+     * // <Link href="/products/1" />
+     * // output: /en/products/1
+     *
+     * // <Link locale="fr" href="/produits/1" />
+     * // output: /fr/produits/1
+     * ```
+     */
+    Always = "always"
+}
+export type TLinkI18nConfig = ({
+    defaultLocale: string;
+    /**
+     * {@link LocalePrefix}
+     */
+    localePrefix: `${LocalePrefix.AsNeeded}`;
+} | {
+    defaultLocale?: string;
+    /**
+     * {@link LocalePrefix}
+     */
+    localePrefix?: `${LocalePrefix.Always}` | undefined;
+});
+export interface TLink extends Omit<NextLinkProps, 'scroll' | 'as' | 'hre'> {
+    href: string | UrlObject;
     /**
      * @default true
      * - `true`: Scrolls to the top of the clicked anchor (default Next.js behavior)
@@ -14,10 +73,14 @@ 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;
+    i18n?: TLinkI18nConfig;
 }
-export interface TUseLinkReturn extends Omit<NextLinkProps, 'href'> {
+export interface TUseLinkReturn extends Omit<NextLinkProps, 'href' | 'locale'> {
     href: string;
 }

package/hooks/useLink/interface.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var LocalePrefix = /* @__PURE__ */ ((LocalePrefix2) => {
+  LocalePrefix2["AsNeeded"] = "as-needed";
+  LocalePrefix2["Always"] = "always";
+  return LocalePrefix2;
+})(LocalePrefix || {});
+exports.LocalePrefix = LocalePrefix;

package/hooks/useLink/interface.mjs

@@ -0,0 +1,8 @@
+var LocalePrefix = /* @__PURE__ */ ((LocalePrefix2) => {
+  LocalePrefix2["AsNeeded"] = "as-needed";
+  LocalePrefix2["Always"] = "always";
+  return LocalePrefix2;
+})(LocalePrefix || {});
+export {
+  LocalePrefix
+};

package/index.d.ts

@@ -8,7 +8,8 @@ export { useFilterState } from './hooks/useFilterState';
 export type { TFilter } from './hooks/useFilterState/interface';
 export { useHash } from './hooks/useHash';
 export { useLink } from './hooks/useLink';
-export type { TLink } from './hooks/useLink/interface';
+export type { TLink, TLinkI18nConfig, TUseLinkReturn } from './hooks/useLink/interface';
+export { LocalePrefix } from './hooks/useLink/interface';
 export { AdminBarContextProvider, useAdminBar } from './providers/AdminBar';
 export { DraftModeContextProvider, useDraftMode } from './providers/DraftMode';
 export { default as ThemeProvider } from './theme';

package/index.js

@@ -6,6 +6,7 @@ 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 _interface = require("./hooks/useLink/interface.js");
 const index = require("./providers/AdminBar/index.js");
 const index$1 = require("./providers/DraftMode/index.js");
 const index$5 = require("./theme/index.js");
@@ -15,6 +16,7 @@ exports.Link = index$4;
 exports.useFilterState = index$6.useFilterState;
 exports.useHash = index$7.useHash;
 exports.useLink = index$8.useLink;
+exports.LocalePrefix = _interface.LocalePrefix;
 exports.AdminBarContextProvider = index.AdminBarContextProvider;
 exports.useAdminBar = index.useAdminBar;
 exports.DraftModeContextProvider = index$1.DraftModeContextProvider;

package/index.mjs

@@ -4,6 +4,7 @@ import { default as default4 } from "./components/Link/index.mjs";
 import { useFilterState } from "./hooks/useFilterState/index.mjs";
 import { useHash } from "./hooks/useHash/index.mjs";
 import { useLink } from "./hooks/useLink/index.mjs";
+import { LocalePrefix } from "./hooks/useLink/interface.mjs";
 import { AdminBarContextProvider, useAdminBar } from "./providers/AdminBar/index.mjs";
 import { DraftModeContextProvider, useDraftMode } from "./providers/DraftMode/index.mjs";
 import { default as default5 } from "./theme/index.mjs";
@@ -13,6 +14,7 @@ export {
   default2 as Filter,
   default3 as Img,
   default4 as Link,
+  LocalePrefix,
   default5 as ThemeProvider,
   useAdminBar,
   useDraftMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/next-component",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "repository": {
     "url": "https://github.com/OKAMca/stack.git"
   },
@@ -18,7 +18,7 @@
       },
       "require": {
         "types": "./index.d.ts",
-        "default": "./index.mjs"
+        "default": "./index.js"
       }
     },
     "./server": {
@@ -28,7 +28,7 @@
       },
       "require": {
         "types": "./server.d.ts",
-        "default": "./server.mjs"
+        "default": "./server.js"
       }
     }
   },
@@ -37,15 +37,14 @@
   },
   "peerDependencies": {
     "@react-stately/selection": "^3.20.0",
-    "next": "^15.1.0 || ^16.0.0",
+    "next": ">=15.5.13 <16.0.0 || ^16.1.7",
     "nuqs": "^2.4.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-stately": "^3.43.0"
   },
   "dependencies": {
-    "@okam/react-utils": "0.0.1",
-    "@okam/stack-ui": "2.0.3",
-    "next": "^15.1.0 || ^16.0.0",
+    "@okam/react-utils": "1.0.0",
+    "@okam/stack-ui": "2.1.1",
     "nuqs": "^2.4.3",
     "radashi": "^12.3.0",
     "react-aria": "^3.39.0",

package/server.d.ts

@@ -1,3 +1,4 @@
 export { default as AdminBar } from './components/AdminBar';
+export { LocalePrefix } from './hooks/useLink/interface';
 export { createServerContext } from './lib/createServerContext';
 export { default as DraftModeServerContextProvider } from './providers/DraftMode/server';

package/server.js

@@ -1,9 +1,11 @@
-"use server";
+require("server-only");
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index = require("./components/AdminBar/index.js");
+const _interface = require("./hooks/useLink/interface.js");
 const index$1 = require("./lib/createServerContext/index.js");
 const server = require("./providers/DraftMode/server.js");
 exports.AdminBar = index;
+exports.LocalePrefix = _interface.LocalePrefix;
 exports.createServerContext = index$1.createServerContext;
 exports.DraftModeServerContextProvider = server;

package/server.mjs

@@ -1,9 +1,11 @@
-"use server";
+import "server-only";
 import { default as default2 } from "./components/AdminBar/index.mjs";
+import { LocalePrefix } from "./hooks/useLink/interface.mjs";
 import { createServerContext } from "./lib/createServerContext/index.mjs";
 import { default as default3 } from "./providers/DraftMode/server.mjs";
 export {
   default2 as AdminBar,
   default3 as DraftModeServerContextProvider,
+  LocalePrefix,
   createServerContext
 };