@okam/next-component 2.0.3 → 2.1.0

package/components/AdminBar/index.js

@@ -1,14 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const stackUi = require("@okam/stack-ui");
-const headers = require("next/headers");
-async function AdminBar({
-  children,
-  themeName = "adminBar",
-  tokens,
-  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 }) });
-}
-module.exports = AdminBar;

package/components/AdminBar/index.mjs

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

package/components/Filter/index.js

@@ -1,54 +0,0 @@
-"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

@@ -1,55 +0,0 @@
-"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

@@ -1,29 +0,0 @@
-"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

@@ -1,30 +0,0 @@
-"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

@@ -1,39 +0,0 @@
-"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,
-    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

@@ -1,40 +0,0 @@
-"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,
-    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

@@ -1,50 +0,0 @@
-"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 = [...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 };
-}
-exports.useFilterState = useFilterState;

package/hooks/useFilterState/index.mjs

@@ -1,50 +0,0 @@
-"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 = [...state.selectionManager.selectedKeys].map(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

@@ -1,25 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-"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

@@ -1,99 +0,0 @@
-"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");
-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,
-    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 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(() => {
-    onPathnameChange?.(pathname);
-  }, [onPathnameChange, pathname]);
-  react.useEffect(() => {
-    onSearchParamsChange?.(searchParams);
-  }, [onSearchParamsChange, searchParams]);
-  react.useEffect(() => {
-    onHashChange?.(hash);
-  }, [onHashChange, hash]);
-  return {
-    href: localizedHref.toString(),
-    as: urlDecorator,
-    replace,
-    locale,
-    prefetch,
-    shallow,
-    onClick: handleClick,
-    onTouchStart: handleTouchStart,
-    onMouseEnter,
-    scroll: nextScroll,
-    passHref,
-    legacyBehavior
-  };
-}
-exports.localizeHref = localizeHref;
-exports.useLink = useLink;
-exports.useLinkLocale = useLinkLocale;

package/hooks/useLink/index.mjs

@@ -1,99 +0,0 @@
-"use client";
-import { usePathname, useSearchParams, useParams } from "next/navigation";
-import { useCallback, useEffect } from "react";
-import { useLocale } from "react-aria";
-import { useHash } from "../useHash/index.mjs";
-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 = useParams();
-  const paramsLocale = getParamsLocale(params);
-  const { locale: ctxLocale } = 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,
-    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 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(() => {
-    onPathnameChange?.(pathname);
-  }, [onPathnameChange, pathname]);
-  useEffect(() => {
-    onSearchParamsChange?.(searchParams);
-  }, [onSearchParamsChange, searchParams]);
-  useEffect(() => {
-    onHashChange?.(hash);
-  }, [onHashChange, hash]);
-  return {
-    href: localizedHref.toString(),
-    as: urlDecorator,
-    replace,
-    locale,
-    prefetch,
-    shallow,
-    onClick: handleClick,
-    onTouchStart: handleTouchStart,
-    onMouseEnter,
-    scroll: nextScroll,
-    passHref,
-    legacyBehavior
-  };
-}
-export {
-  localizeHref,
-  useLink,
-  useLinkLocale
-};

package/lib/createServerContext/index.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-function createServerContext(defaultValue) {
-  const getRef = react.cache(() => ({ current: defaultValue }));
-  const getValue = () => getRef().current;
-  const setValue = (value) => {
-    getRef().current = value;
-  };
-  return [getValue, setValue];
-}
-exports.createServerContext = createServerContext;

package/lib/createServerContext/index.mjs

@@ -1,12 +0,0 @@
-import { cache } from "react";
-function createServerContext(defaultValue) {
-  const getRef = cache(() => ({ current: defaultValue }));
-  const getValue = () => getRef().current;
-  const setValue = (value) => {
-    getRef().current = value;
-  };
-  return [getValue, setValue];
-}
-export {
-  createServerContext
-};

package/providers/AdminBar/index.js

@@ -1,17 +0,0 @@
-"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");
-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 });
-}
-exports.AdminBarContextProvider = AdminBarContextProvider;
-exports.useAdminBar = useAdminBar;