@okam/next-component 2.1.0 → 2.1.1

package/hooks/useLink/index.mjs

@@ -0,0 +1,118 @@
+"use client";
+import { usePathname, useSearchParams, useParams } from "next/navigation";
+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 });
+}
+function getParamsLocale(params) {
+  const { locale } = params ?? {};
+  if (Array.isArray(locale))
+    return locale[0];
+  return locale;
+}
+function useLinkLocale(props) {
+  const { locale, i18n } = props;
+  const { defaultLocale, localePrefix = "always" } = i18n ?? {};
+  const params = useParams();
+  const paramsLocale = getParamsLocale(params);
+  const { locale: ctxLocale } = useLocale();
+  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 = EXTERNAL_URL_RE.test(hrefString) || hrefString.startsWith("//");
+  let finalHref;
+  if (locale != null && locale !== false && !isExternal && !isAnchor) {
+    finalHref = `/${locale}${hrefString}`;
+  } else {
+    finalHref = hrefString;
+  }
+  return hasTrailingSlash || isAnchor ? finalHref : `${finalHref}/`;
+}
+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 = usePathname();
+  const searchParams = useSearchParams();
+  const hash = useHash();
+  const hasWarnedOnPathnameChangeRef = useRef(false);
+  const isNextScroll = typeof scroll === "boolean";
+  const nextScroll = isNextScroll ? scroll : false;
+  const handleScroll = useCallback(() => {
+    if (isNextScroll)
+      return;
+    scrollToTop(behavior);
+  }, [behavior, isNextScroll]);
+  const handleClick = (event) => {
+    onClick?.(event);
+    handleScroll();
+  };
+  const handleTouchStart = (event) => {
+    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]);
+  useEffect(() => {
+    onSearchParamsChange?.(searchParams);
+  }, [onSearchParamsChange, searchParams]);
+  useEffect(() => {
+    onHashChange?.(hash);
+  }, [onHashChange, hash]);
+  return {
+    href: localizedHref.toString(),
+    as: urlDecorator,
+    replace,
+    prefetch,
+    shallow,
+    onClick: handleClick,
+    onNavigate,
+    onTouchStart: handleTouchStart,
+    onMouseEnter,
+    scroll: nextScroll,
+    passHref,
+    legacyBehavior
+  };
+}
+export {
+  localizeHref,
+  useLink,
+  useLinkLocale
+};

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)
@@ -20,6 +79,7 @@ export interface TLink extends Omit<NextLinkProps, 'scroll' | 'as'> {
     onPathnameChange?: (_pathname: string) => void;
     onSearchParamsChange?: (_searchParams: ReadonlyURLSearchParams) => void;
     onHashChange?: (_hash: string) => void;
+    i18n?: TLinkI18nConfig;
 }
 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';