@okam/next-component 2.1.0 → 2.1.1

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

@@ -0,0 +1,14 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const headers = require("next/headers");
+const AdminBarContent = require("./AdminBarContent.js");
+async function AdminBar({
+  children,
+  themeName = "adminBar",
+  tokens,
+  customTheme
+}) {
+  const { isEnabled } = await headers.draftMode();
+  return isEnabled && /* @__PURE__ */ jsxRuntime.jsx(AdminBarContent.AdminBarContent, { themeName, tokens, customTheme, children });
+}
+module.exports = AdminBar;

package/components/AdminBar/index.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { draftMode } from "next/headers";
+import { AdminBarContent } from "./AdminBarContent.mjs";
+async function AdminBar({
+  children,
+  themeName = "adminBar",
+  tokens,
+  customTheme
+}) {
+  const { isEnabled } = await draftMode();
+  return isEnabled && /* @__PURE__ */ jsx(AdminBarContent, { themeName, tokens, customTheme, children });
+}
+export {
+  AdminBar as default
+};

package/components/Filter/index.js

@@ -0,0 +1,54 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const index = require("../../hooks/useFilterState/index.js");
+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 = index.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 })
+    }
+  ) });
+}
+module.exports = Filter;

package/components/Filter/index.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Box, PopoverButton, TagGroup } from "@okam/stack-ui";
+import { useFilterState } from "../../hooks/useFilterState/index.mjs";
+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__ */ jsx(Box, { themeName: `${themeName}.wrapper`, tokens, customTheme, children: /* @__PURE__ */ jsx(
+    PopoverButton,
+    {
+      themeName: `${themeName}.popover`,
+      tokens,
+      type,
+      placement,
+      ...popoverButtonProps,
+      children: /* @__PURE__ */ jsx(TagGroup, { themeName: `${themeName}.tagGroup`, tokens, ...tagGroupProps, ...state, children })
+    }
+  ) });
+}
+export {
+  Filter as default
+};

package/components/Img/index.js

@@ -0,0 +1,29 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const Image = require("next/image");
+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 });
+}
+module.exports = Img;

package/components/Img/index.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useThemeContext } from "@okam/stack-ui";
+import Image from "next/image";
+function Img(props) {
+  const { src, width, height, themeName = "img", tokens, customTheme, ...rest } = props;
+  const theme = 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__ */ jsx(
+      Image,
+      {
+        className: theme,
+        ...withoutBlurDimensions,
+        ...rest,
+        ...blur,
+        width: srcWidth ?? width,
+        height: srcHeight ?? height
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Image, { width, height, className: theme, src, ...rest });
+}
+export {
+  Img as default
+};

package/components/Link/index.js

@@ -0,0 +1,40 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const NextLink = require("next/link");
+const index = require("../../hooks/useLink/index.js");
+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 = index.useLink(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    stackUi.Anchor,
+    {
+      ref,
+      ...rest,
+      nextLinkProps: linkProps,
+      as,
+      themeName,
+      tokens,
+      customTheme,
+      children
+    }
+  );
+}
+Link.displayName = "Link";
+module.exports = Link;

package/components/Link/index.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Anchor } from "@okam/stack-ui";
+import NextLink from "next/link";
+import { useLink } from "../../hooks/useLink/index.mjs";
+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__ */ jsx(
+    Anchor,
+    {
+      ref,
+      ...rest,
+      nextLinkProps: linkProps,
+      as,
+      themeName,
+      tokens,
+      customTheme,
+      children
+    }
+  );
+}
+Link.displayName = "Link";
+export {
+  Link as default
+};

package/hooks/useFilterState/index.js

@@ -0,0 +1,50 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const nuqs = require("nuqs");
+const radashi = require("radashi");
+const react = require("react");
+const reactStately = require("react-stately");
+const reactUse = require("react-use");
+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 = Array.from(state.selectionManager.selectedKeys, String);
+    if (radashi.isEqual(next, selectedKeys)) {
+      return;
+    }
+    void setSelectedKeys(next);
+  }, [state.selectionManager.selectedKeys]);
+  return { ...state, onSelectionChange: onSelectedKeysChange, selectedKeys: selectedKeys ?? void 0, defaultSelectedKeys };
+}
+exports.useFilterState = useFilterState;

package/hooks/useFilterState/index.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { parseAsArrayOf, parseAsString, useQueryState } from "nuqs";
+import { isEqual } from "radashi";
+import { useMemo } from "react";
+import { useListState } from "react-stately";
+import { useUpdateEffect } from "react-use";
+function useFilterState(props) {
+  const {
+    id,
+    defaultSelectedKeys: defaultSelectedKeysProp = [],
+    onSelectionChange,
+    selectionMode = "multiple",
+    parser = parseAsArrayOf(parseAsString),
+    children,
+    items,
+    options,
+    ...rest
+  } = props;
+  const defaultValue = Array.from(defaultSelectedKeysProp).map((key) => key.toString());
+  const queryStateOptions = useMemo(
+    () => parser.withOptions(options ?? {}).withDefault(defaultValue),
+    [parser, options, defaultValue]
+  );
+  const [selectedKeys, setSelectedKeys] = 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 = useListState({
+    ...rest,
+    children,
+    items,
+    selectionMode,
+    defaultSelectedKeys,
+    onSelectionChange: onSelectedKeysChange
+  });
+  useUpdateEffect(() => {
+    const next = Array.from(state.selectionManager.selectedKeys, String);
+    if (isEqual(next, selectedKeys)) {
+      return;
+    }
+    void setSelectedKeys(next);
+  }, [state.selectionManager.selectedKeys]);
+  return { ...state, onSelectionChange: onSelectedKeysChange, selectedKeys: selectedKeys ?? void 0, defaultSelectedKeys };
+}
+export {
+  useFilterState
+};

package/hooks/useHash/index.js

@@ -0,0 +1,25 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const reactUse = require("react-use");
+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;
+}
+exports.useHash = useHash;

package/hooks/useHash/index.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { useState } from "react";
+import { useEvent } from "react-use";
+function getHash() {
+  if (typeof window === "undefined")
+    return "";
+  return window.location.hash;
+}
+function useHash() {
+  const defaultHash = getHash();
+  const [hash, setHash] = useState(defaultHash);
+  const handleHashChangeEvent = ({ newURL }) => {
+    if (!URL.canParse(newURL))
+      return;
+    const { hash: newHash } = new URL(newURL);
+    if (!newHash || newHash === hash)
+      return;
+    setHash(newHash);
+  };
+  useEvent("hashchange", handleHashChangeEvent);
+  return hash;
+}
+export {
+  useHash
+};

package/hooks/useLink/index.js

@@ -0,0 +1,118 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 });
+}
+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 = navigation.useParams();
+  const paramsLocale = getParamsLocale(params);
+  const { locale: ctxLocale } = reactAria.useLocale();
+  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 = 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 = 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(() => {
+    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
+  };
+}
+exports.localizeHref = localizeHref;
+exports.useLink = useLink;
+exports.useLinkLocale = useLinkLocale;