@kakadu/components 3.0.0 → 3.1.1

package/build/components/decorators.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentType, type ReactNode } from 'react';
+export type DecoratorType = ComponentType<{
+    children: ReactNode;
+}>;
+export default function Decorators({ decorators, children, }: {
+    readonly decorators: DecoratorType[];
+    readonly children: ReactNode;
+}): ReactNode;

package/build/components/decorators.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../jsx-runtime-BB_1_6y_.js");function n({decorators:e,children:t}){return e.length===0?t:e.reduceRight((u,r)=>i.jsxRuntimeExports.jsx(r,{children:u}),t)}exports.default=n;

package/build/components/decorators.mjs

@@ -0,0 +1,13 @@
+import { j as u } from "../jsx-runtime-B4hRZ52C.mjs";
+function o({
+  decorators: t,
+  children: r
+}) {
+  return t.length === 0 ? r : t.reduceRight(
+    (e, n) => /* @__PURE__ */ u.jsx(n, { children: e }),
+    r
+  );
+}
+export {
+  o as default
+};

package/build/components/modal.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentType, type ReactNode } from 'react';
+import { type DecoratorType } from './decorators';
 type InitialFocusElement = HTMLElement | null;
 type ModalProviderProperties<Data = any> = {
     isVisible: boolean;
@@ -6,9 +7,6 @@ type ModalProviderProperties<Data = any> = {
     close?: (data?: Data) => void;
 };
 export declare function useModalContext<Data = any>(): ModalProviderProperties<Data>;
-export type DecoratorType = ComponentType<{
-    children: ReactNode;
-}>;
 export type ModalProperties<Data = any> = {
     readonly root?: HTMLElement | ShadowRoot;
     readonly outerDecorators?: DecoratorType[];

package/build/components/modal.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../jsx-runtime-BB_1_6y_.js"),e=require("react"),E=require("@kuma-ui/core"),P=require("react-dom"),$=require("../focus-trap-react-CcpTuiJi.js"),B=require("../icons/icon.js"),D=require("./text-button.js"),I=e.createContext({isVisible:!1}),{Provider:A}=I;function y(){return e.useContext(I)}function z(){const{close:n}=y(),r=e.useCallback(()=>{n==null||n()},[n]);return s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2543813221"}),s.jsxRuntimeExports.jsx("div",{className:"kakadu-components-840864829",children:s.jsxRuntimeExports.jsx(D.default,{iconLeft:B.IconType.times,label:"Close",className:"kakadu-components-3855719072",onClick:r})})]})}function q({decorators:n,children:r}){return n.length===0?r:n.reduceRight((c,i)=>s.jsxRuntimeExports.jsx(i,{children:c}),r)}function G({root:n,outerDecorators:r=[],innerDecorators:c=[],label:i,maxWidth:u,className:l,isVisible:o,isFullWidth:f=!1,shouldCloseOnOutsideClick:p=!0,shouldCloseOnEscapePress:d=!0,showCloseButton:x=!0,onClose:a,children:N}){const v=e.useRef(null),h=e.useRef(null),[M,L]=e.useState(!1),[m,j]=e.useState(!1),b=e.useCallback(t=>{v.current=t,j(!1)},[]),R=e.useRef(null),w=e.useCallback(t=>{t&&(R.current=t)},[]),[T,C]=e.useState(o??!1),S=e.useMemo(()=>({isVisible:T,setInitialFocus:w,close:b}),[T,w,b]);e.useEffect(()=>{o&&(L(!0),C(!0))},[o]),e.useEffect(()=>{if(o){const t=setTimeout(()=>{j(!0)},100);return()=>{clearTimeout(t)}}j(!1)},[o]),e.useEffect(()=>{if(M&&!m){const t=setTimeout(()=>{a==null||a(v.current??void 0),C(!1)},370);return()=>{clearTimeout(t)}}},[M,m,a]),e.useEffect(()=>{const t=h.current;if(o&&p&&t){const k=_=>{t===_.target&&j(!1)};return t.addEventListener("click",k),()=>{t.removeEventListener("click",k)}}},[o,p]),e.useEffect(()=>{if(!o||!d)return;const t=k=>{k.key==="Escape"&&j(!1)};return window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}},[o,d]);const F=e.useMemo(()=>({initialFocus:()=>R.current??void 0,onActivate:()=>{var t;return(t=R.current)==null?void 0:t.focus()}}),[]),g=s.jsxRuntimeExports.jsx(q,{decorators:r,children:s.jsxRuntimeExports.jsx("div",{"aria-hidden":!m,style:{"--max-width":u?`${u}px`:void 0},className:E.cx("kakadu-components-4119461136",m&&"kakadu-components-2522346797",l),children:s.jsxRuntimeExports.jsx(q,{decorators:c,children:s.jsxRuntimeExports.jsx($.focusTrapReactExports.FocusTrap,{active:m,focusTrapOptions:F,children:s.jsxRuntimeExports.jsx("div",{ref:h,className:"kakadu-components-4011815997",children:s.jsxRuntimeExports.jsx("div",{role:"dialog","aria-modal":"true","aria-label":i??"Modal",className:E.cx("kakadu-components-3324483532",f&&"kakadu-components-3799971070",m&&"kakadu-components-968755580"),children:s.jsxRuntimeExports.jsxs(A,{value:S,children:[x?s.jsxRuntimeExports.jsx(z,{}):null,s.jsxRuntimeExports.jsx("div",{className:E.cx("kakadu-components-633990035",f&&"kakadu-components-171969824"),children:N})]})})})})})})});return n?P.createPortal(g,n):g}function H(n,r){const[c,i]=e.useState(!1),u=e.useRef(void 0),l=e.useRef(null),o=e.useCallback(async d=>(i(!0),l.current=d??document.activeElement,new Promise(x=>{u.current=x})),[]),f=e.useCallback(d=>{var x;if(i(!1),(x=u.current)==null||x.call(u,d),u.current=void 0,l.current){const a=l.current;a.isConnected&&a.focus(),l.current=null}},[]),p=e.useMemo(()=>s.jsxRuntimeExports.jsx(n,{...r,isVisible:c,onClose:f}),[n,r,c,f]);return e.useMemo(()=>({isVisible:c,show:o,modal:p}),[c,o,p])}exports.default=G;exports.useModal=H;exports.useModalContext=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../jsx-runtime-BB_1_6y_.js"),e=require("react"),E=require("@kuma-ui/core"),P=require("react-dom"),$=require("../focus-trap-react-CcpTuiJi.js"),B=require("../icons/icon.js"),A=require("./text-button.js"),I=require("./decorators.js"),y=e.createContext({isVisible:!1}),{Provider:D}=y;function N(){return e.useContext(y)}function z(){const{close:o}=N(),u=e.useCallback(()=>{o==null||o()},[o]);return s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2543813221"}),s.jsxRuntimeExports.jsx("div",{className:"kakadu-components-840864829",children:s.jsxRuntimeExports.jsx(A.default,{iconLeft:B.IconType.times,label:"Close",className:"kakadu-components-3855719072",onClick:u})})]})}function G({root:o,outerDecorators:u=[],innerDecorators:a=[],label:k,maxWidth:r,className:i,isVisible:n,isFullWidth:x=!1,shouldCloseOnOutsideClick:f=!0,shouldCloseOnEscapePress:l=!0,showCloseButton:d=!0,onClose:c,children:g}){const v=e.useRef(null),M=e.useRef(null),[h,L]=e.useState(!1),[m,p]=e.useState(!1),b=e.useCallback(t=>{v.current=t,p(!1)},[]),R=e.useRef(null),w=e.useCallback(t=>{t&&(R.current=t)},[]),[T,q]=e.useState(n??!1),S=e.useMemo(()=>({isVisible:T,setInitialFocus:w,close:b}),[T,w,b]);e.useEffect(()=>{n&&(L(!0),q(!0))},[n]),e.useEffect(()=>{if(n){const t=setTimeout(()=>{p(!0)},100);return()=>{clearTimeout(t)}}p(!1)},[n]),e.useEffect(()=>{if(h&&!m){const t=setTimeout(()=>{c==null||c(v.current??void 0),q(!1)},370);return()=>{clearTimeout(t)}}},[h,m,c]),e.useEffect(()=>{const t=M.current;if(n&&f&&t){const j=_=>{t===_.target&&p(!1)};return t.addEventListener("click",j),()=>{t.removeEventListener("click",j)}}},[n,f]),e.useEffect(()=>{if(!n||!l)return;const t=j=>{j.key==="Escape"&&p(!1)};return window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}},[n,l]);const F=e.useMemo(()=>({initialFocus:()=>R.current??void 0,onActivate:()=>{var t;return(t=R.current)==null?void 0:t.focus()}}),[]),C=s.jsxRuntimeExports.jsx(I.default,{decorators:u,children:s.jsxRuntimeExports.jsx("div",{"aria-hidden":!m,style:{"--max-width":r?`${r}px`:void 0},className:E.cx("kakadu-components-4119461136",m&&"kakadu-components-2522346797",i),children:s.jsxRuntimeExports.jsx(I.default,{decorators:a,children:s.jsxRuntimeExports.jsx($.focusTrapReactExports.FocusTrap,{active:m,focusTrapOptions:F,children:s.jsxRuntimeExports.jsx("div",{ref:M,className:"kakadu-components-4011815997",children:s.jsxRuntimeExports.jsx("div",{role:"dialog","aria-modal":"true","aria-label":k??"Modal",className:E.cx("kakadu-components-3324483532",x&&"kakadu-components-3799971070",m&&"kakadu-components-968755580"),children:s.jsxRuntimeExports.jsxs(D,{value:S,children:[d?s.jsxRuntimeExports.jsx(z,{}):null,s.jsxRuntimeExports.jsx("div",{className:E.cx("kakadu-components-633990035",x&&"kakadu-components-171969824"),children:g})]})})})})})})});return o?P.createPortal(C,o):C}function H(o,u){const[a,k]=e.useState(!1),r=e.useRef(void 0),i=e.useRef(null),n=e.useCallback(async l=>(k(!0),i.current=l??document.activeElement,new Promise(d=>{r.current=d})),[]),x=e.useCallback(l=>{var d;if(k(!1),(d=r.current)==null||d.call(r,l),r.current=void 0,i.current){const c=i.current;c.isConnected&&c.focus(),i.current=null}},[]),f=e.useMemo(()=>s.jsxRuntimeExports.jsx(o,{...u,isVisible:a,onClose:x}),[o,u,a,x]);return e.useMemo(()=>({isVisible:a,show:n,modal:f}),[a,n,f])}exports.default=G;exports.useModal=H;exports.useModalContext=N;

package/build/components/modal.mjs

@@ -1,10 +1,11 @@
 import { j as t } from "../jsx-runtime-B4hRZ52C.mjs";
-import { createContext as q, useRef as v, useState as w, useCallback as j, useMemo as T, useEffect as p, useContext as z } from "react";
+import { createContext as q, useRef as p, useState as w, useCallback as v, useMemo as T, useEffect as x, useContext as z } from "react";
 import { cx as I } from "@kuma-ui/core";
 import { createPortal as G } from "react-dom";
 import { f as H } from "../focus-trap-react-DYXrtbDH.mjs";
 import { IconType as J } from "../icons/icon.mjs";
 import K from "./text-button.mjs";
+import C from "./decorators.mjs";
 const B = q({
   isVisible: !1
 }), {
@@ -15,118 +16,112 @@ function U() {
 }
 function V() {
   const {
-    close: n
-  } = U(), o = j(() => {
-    n == null || n();
-  }, [n]);
+    close: o
+  } = U(), a = v(() => {
+    o == null || o();
+  }, [o]);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx("div", { className: "kakadu-components-2543813221" }),
-    /* @__PURE__ */ t.jsx("div", { className: "kakadu-components-840864829", children: /* @__PURE__ */ t.jsx(K, { iconLeft: J.times, label: "Close", className: "kakadu-components-3855719072", onClick: o }) })
+    /* @__PURE__ */ t.jsx("div", { className: "kakadu-components-840864829", children: /* @__PURE__ */ t.jsx(K, { iconLeft: J.times, label: "Close", className: "kakadu-components-3855719072", onClick: a }) })
   ] });
 }
-function C({
-  decorators: n,
-  children: o
-}) {
-  return n.length === 0 ? o : n.reduceRight((r, u) => /* @__PURE__ */ t.jsx(u, { children: r }), o);
-}
-function te({
-  root: n,
-  outerDecorators: o = [],
-  innerDecorators: r = [],
-  label: u,
-  maxWidth: c,
+function ne({
+  root: o,
+  outerDecorators: a = [],
+  innerDecorators: c = [],
+  label: j,
+  maxWidth: s,
   className: i,
-  isVisible: s,
-  isFullWidth: f = !1,
-  shouldCloseOnOutsideClick: k = !0,
-  shouldCloseOnEscapePress: l = !0,
-  showCloseButton: d = !0,
-  onClose: a,
+  isVisible: n,
+  isFullWidth: m = !1,
+  shouldCloseOnOutsideClick: f = !0,
+  shouldCloseOnEscapePress: u = !0,
+  showCloseButton: l = !0,
+  onClose: r,
   children: P
 }) {
-  const R = v(null), N = v(null), [g, A] = w(!1), [m, x] = w(!1), y = j((e) => {
-    R.current = e, x(!1);
-  }, []), E = v(null), L = j((e) => {
+  const N = p(null), R = p(null), [y, A] = w(!1), [d, k] = w(!1), L = v((e) => {
+    N.current = e, k(!1);
+  }, []), E = p(null), M = v((e) => {
     e && (E.current = e);
-  }, []), [M, F] = w(s ?? !1), D = T(() => ({
-    isVisible: M,
-    setInitialFocus: L,
-    close: y
-  }), [M, L, y]);
-  p(() => {
-    s && (A(!0), F(!0));
-  }, [s]), p(() => {
-    if (s) {
+  }, []), [F, b] = w(n ?? !1), D = T(() => ({
+    isVisible: F,
+    setInitialFocus: M,
+    close: L
+  }), [F, M, L]);
+  x(() => {
+    n && (A(!0), b(!0));
+  }, [n]), x(() => {
+    if (n) {
       const e = setTimeout(() => {
-        x(!0);
+        k(!0);
       }, 100);
       return () => {
         clearTimeout(e);
       };
     }
-    x(!1);
-  }, [s]), p(() => {
-    if (g && !m) {
+    k(!1);
+  }, [n]), x(() => {
+    if (y && !d) {
       const e = setTimeout(() => {
-        a == null || a(R.current ?? void 0), F(!1);
+        r == null || r(N.current ?? void 0), b(!1);
       }, 370);
       return () => {
         clearTimeout(e);
       };
     }
-  }, [g, m, a]), p(() => {
-    const e = N.current;
-    if (s && k && e) {
+  }, [y, d, r]), x(() => {
+    const e = R.current;
+    if (n && f && e) {
       const h = ($) => {
-        e === $.target && x(!1);
+        e === $.target && k(!1);
       };
       return e.addEventListener("click", h), () => {
         e.removeEventListener("click", h);
       };
     }
-  }, [s, k]), p(() => {
-    if (!s || !l)
+  }, [n, f]), x(() => {
+    if (!n || !u)
       return;
     const e = (h) => {
-      h.key === "Escape" && x(!1);
+      h.key === "Escape" && k(!1);
     };
     return window.addEventListener("keydown", e), () => {
       window.removeEventListener("keydown", e);
     };
-  }, [s, l]);
+  }, [n, u]);
   const S = T(() => ({
     initialFocus: () => E.current ?? void 0,
     onActivate: () => {
       var e;
       return (e = E.current) == null ? void 0 : e.focus();
     }
-  }), []), b = /* @__PURE__ */ t.jsx(C, { decorators: o, children: /* @__PURE__ */ t.jsx("div", { "aria-hidden": !m, style: {
-    "--max-width": c ? `${c}px` : void 0
-  }, className: I("kakadu-components-4119461136", m && "kakadu-components-2522346797", i), children: /* @__PURE__ */ t.jsx(C, { decorators: r, children: /* @__PURE__ */ t.jsx(H.FocusTrap, { active: m, focusTrapOptions: S, children: /* @__PURE__ */ t.jsx("div", { ref: N, className: "kakadu-components-4011815997", children: /* @__PURE__ */ t.jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": u ?? "Modal", className: I("kakadu-components-3324483532", f && "kakadu-components-3799971070", m && "kakadu-components-968755580"), children: /* @__PURE__ */ t.jsxs(Q, { value: D, children: [
-    d ? /* @__PURE__ */ t.jsx(V, {}) : null,
-    /* @__PURE__ */ t.jsx("div", { className: I("kakadu-components-633990035", f && "kakadu-components-171969824"), children: P })
+  }), []), g = /* @__PURE__ */ t.jsx(C, { decorators: a, children: /* @__PURE__ */ t.jsx("div", { "aria-hidden": !d, style: {
+    "--max-width": s ? `${s}px` : void 0
+  }, className: I("kakadu-components-4119461136", d && "kakadu-components-2522346797", i), children: /* @__PURE__ */ t.jsx(C, { decorators: c, children: /* @__PURE__ */ t.jsx(H.FocusTrap, { active: d, focusTrapOptions: S, children: /* @__PURE__ */ t.jsx("div", { ref: R, className: "kakadu-components-4011815997", children: /* @__PURE__ */ t.jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": j ?? "Modal", className: I("kakadu-components-3324483532", m && "kakadu-components-3799971070", d && "kakadu-components-968755580"), children: /* @__PURE__ */ t.jsxs(Q, { value: D, children: [
+    l ? /* @__PURE__ */ t.jsx(V, {}) : null,
+    /* @__PURE__ */ t.jsx("div", { className: I("kakadu-components-633990035", m && "kakadu-components-171969824"), children: P })
   ] }) }) }) }) }) }) });
-  return n ? G(b, n) : b;
+  return o ? G(g, o) : g;
 }
-function ne(n, o) {
-  const [r, u] = w(!1), c = v(void 0), i = v(null), s = j(async (l) => (u(!0), i.current = l ?? document.activeElement, new Promise((d) => {
-    c.current = d;
-  })), []), f = j((l) => {
-    var d;
-    if (u(!1), (d = c.current) == null || d.call(c, l), c.current = void 0, i.current) {
-      const a = i.current;
-      a.isConnected && a.focus(), i.current = null;
+function oe(o, a) {
+  const [c, j] = w(!1), s = p(void 0), i = p(null), n = v(async (u) => (j(!0), i.current = u ?? document.activeElement, new Promise((l) => {
+    s.current = l;
+  })), []), m = v((u) => {
+    var l;
+    if (j(!1), (l = s.current) == null || l.call(s, u), s.current = void 0, i.current) {
+      const r = i.current;
+      r.isConnected && r.focus(), i.current = null;
     }
-  }, []), k = T(() => /* @__PURE__ */ t.jsx(n, { ...o, isVisible: r, onClose: f }), [n, o, r, f]);
+  }, []), f = T(() => /* @__PURE__ */ t.jsx(o, { ...a, isVisible: c, onClose: m }), [o, a, c, m]);
   return T(() => ({
-    isVisible: r,
-    show: s,
-    modal: k
-  }), [r, s, k]);
+    isVisible: c,
+    show: n,
+    modal: f
+  }), [c, n, f]);
 }
 export {
-  te as default,
-  ne as useModal,
+  ne as default,
+  oe as useModal,
   U as useModalContext
 };

package/build/components/popover-menu.d.ts

@@ -1,12 +1,25 @@
-import { type MouseEvent, type ReactNode } from 'react';
+import { type FocusEvent, type MouseEvent, type ReactNode, type Ref } from 'react';
 import { type IconType } from '../icons/icon';
+import { type DecoratorType } from './decorators';
+type PopoverMenuItemElementType = HTMLButtonElement | HTMLAnchorElement;
 export type PopoverMenuItemProperties = {
+    type: 'separator';
+} | {
+    type: 'group';
     readonly label: ReactNode;
+} | {
+    readonly reference?: Ref<PopoverMenuItemElementType>;
+    readonly label: ReactNode;
+    readonly href?: string;
     readonly iconLeft?: IconType;
     readonly iconRight?: IconType;
-    readonly href?: string;
+    readonly submenu?: ReturnType<typeof usePopoverMenu>;
     readonly shouldCloseOnClick?: boolean;
-    readonly onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    readonly decorators?: DecoratorType[];
+    readonly className?: string;
+    readonly onClick?: (event: MouseEvent<PopoverMenuItemElementType>) => void;
+    readonly onFocus?: (event: FocusEvent<PopoverMenuItemElementType>) => void;
+    readonly onMouseEnter?: (event: MouseEvent<PopoverMenuItemElementType>) => void;
 };
 export declare function usePopoverMenu(items: PopoverMenuItemProperties[]): {
     show: (reference?: HTMLElement) => Promise<void | undefined>;
@@ -14,6 +27,8 @@ export declare function usePopoverMenu(items: PopoverMenuItemProperties[]): {
 };
 export type PopoverMenuProperties = {
     readonly menu: ReactNode;
-    readonly children: ReactNode;
+    readonly className?: string;
+    readonly children?: ReactNode;
 };
-export default function PopoverMenu({ menu, children }: PopoverMenuProperties): import("react/jsx-runtime").JSX.Element;
+export default function PopoverMenu({ menu, className, children, }: PopoverMenuProperties): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/popover-menu.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),j=require("@kuma-ui/core"),p=require("react"),v=require("../theme.js"),c=require("../icons/icon.js"),i=require("./popover.js"),R=require("./atom.js"),h=require("./text.js"),m=require("./hover-gradient.js"),q=require("./click-ripples.js");function f({label:t,iconLeft:s,iconRight:o,href:n,shouldCloseOnClick:a=!0,onClick:r,...x}){const{close:u}=i.usePopoverContext(),l=p.useCallback(d=>{r==null||r(d),a&&(u==null||u())},[r,a,u]);return e.jsxRuntimeExports.jsxs(R.default,{as:n?"a":"button",...x,type:n?void 0:"button",role:"menuitem",href:n,className:j.cx(v.buttonResetStyles,"kakadu-components-3983689191"),onClick:l,children:[e.jsxRuntimeExports.jsxs(h.Span,{className:"kakadu-components-2031937592",children:[s?e.jsxRuntimeExports.jsx(c.default,{width:12,height:12,type:s}):null,e.jsxRuntimeExports.jsx("span",{className:"kakadu-components-3911899222",children:t}),o?e.jsxRuntimeExports.jsx(c.default,{width:12,height:12,type:o}):null]}),e.jsxRuntimeExports.jsx(m.default,{size:100,className:m.normalBlendStyles}),e.jsxRuntimeExports.jsx(q.default,{size:100})]})}function E({items:t,...s}){return e.jsxRuntimeExports.jsx(i.default,{...s,as:"nav",role:"menu",innerClassName:"kakadu-components-3719863410",children:t.map((o,n)=>e.jsxRuntimeExports.jsx(f,{...o},n))})}function M(t){const s=p.useMemo(()=>({items:t}),[t]),{show:o,popover:n}=i.usePopover(E,s);return p.useMemo(()=>({show:o,popoverMenu:n}),[o,n])}function P({menu:t,children:s}){return e.jsxRuntimeExports.jsxs(i.PopoverContainer,{children:[s,t]})}exports.default=P;exports.usePopoverMenu=M;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../jsx-runtime-BB_1_6y_.js"),w=require("@kuma-ui/core"),a=require("react"),M=require("../theme.js"),k=require("../icons/icon.js"),m=require("./popover.js"),q=require("./atom.js"),h=require("./text.js"),g=require("./hover-gradient.js"),I=require("./click-ripples.js"),P=require("./separator.js"),N=require("./decorators.js"),E=new Set;function R(){const[e,n]=a.useState(!1),s=a.useCallback(o=>{n(o);for(const i of E)i(o)},[]);return a.useEffect(()=>{const o=i=>{n(i)};return E.add(o),()=>{E.delete(o)}},[]),a.useMemo(()=>({isKeyboardNavigating:e,setIsKeyboardNavigating:s}),[e,s])}function S({label:e,iconLeft:n,iconRight:s,href:o,shouldCloseOnClick:i=!0,decorators:v=[],submenu:c,className:j,onClick:p,...f}){const{isFocused:u,close:r}=m.usePopoverContext(),{isKeyboardNavigating:l}=R(),x=a.useCallback(b=>{u&&(p==null||p(b),c?c.show():i&&(r==null||r()))},[u,p,i,r,c]),d=a.useMemo(()=>t.jsxRuntimeExports.jsxs(q.default,{as:o?"a":"button",...f,type:o?void 0:"button",role:"menuitem",href:o,className:w.cx(M.buttonResetStyles,"kakadu-components-3114599304",l?"kakadu-components-4096376656":"kakadu-components-2554182777",j),onClick:x,children:[t.jsxRuntimeExports.jsxs(h.Span,{className:"kakadu-components-1109353535",children:[n?t.jsxRuntimeExports.jsx(k.default,{width:12,height:12,type:n}):null,t.jsxRuntimeExports.jsx("span",{className:"kakadu-components-913703148",children:e}),s?t.jsxRuntimeExports.jsx(k.default,{width:12,height:12,type:s}):null]}),l?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(g.default,{size:150,className:g.normalBlendStyles}),t.jsxRuntimeExports.jsx(I.default,{size:100})]})]}),[l,f,o,j,x,n,e,s]);return t.jsxRuntimeExports.jsx(N.default,{decorators:v,children:c?t.jsxRuntimeExports.jsx(y,{menu:c.popoverMenu,className:"kakadu-components-1861176543",children:d}):d})}function _(e){if("type"in e){if(e.type==="separator")return t.jsxRuntimeExports.jsx(P.default,{});if(e.type==="group")return t.jsxRuntimeExports.jsx(h.Span,{className:"kakadu-components-1499037363",children:e.label})}return t.jsxRuntimeExports.jsx(S,{...e})}function C({items:e}){const{isFocused:n}=m.usePopoverContext(),[s,o]=a.useState(0),[i,v]=a.useState([]),{setIsKeyboardNavigating:c}=R(),j=a.useCallback(u=>{u&&v(r=>[...r,u])},[]),p=a.useCallback(u=>{n&&(u.currentTarget.focus(),c(!1))},[n,c]),f=a.useCallback(u=>{if(n){const r=u.target;o(i.indexOf(r))}},[n,i]);return a.useEffect(()=>{if(!n)return;const u=r=>{const l=i.length;if(l===0)return;let x;switch(r.key){case"ArrowDown":{x=(s+1)%l;break}case"ArrowUp":{x=(s-1+l)%l;break}case"Home":{x=0;break}case"End":{x=l-1;break}}if(x!==void 0){r.preventDefault(),r.stopPropagation();const d=i[x];d&&(d.focus(),c(!0))}};return window.addEventListener("keydown",u),()=>{window.removeEventListener("keydown",u)}},[n,i,s,c]),t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:e.map((u,r)=>t.jsxRuntimeExports.jsx(_,{...u,reference:j,onFocus:f,onMouseEnter:p},r))})}function F({items:e,...n}){return t.jsxRuntimeExports.jsx(m.default,{...n,as:"nav",role:"menu",innerClassName:"kakadu-components-3600436535",children:t.jsxRuntimeExports.jsx(C,{items:e})})}function K(e){const n=a.useMemo(()=>({items:e}),[e]),{show:s,popover:o}=m.usePopover(F,n);return a.useMemo(()=>({show:s,popoverMenu:o}),[s,o])}function y({menu:e,className:n,children:s}){return t.jsxRuntimeExports.jsxs(m.PopoverContainer,{className:n,children:[s,e]})}exports.default=y;exports.usePopoverMenu=K;

package/build/components/popover-menu.mjs

@@ -1,68 +1,167 @@
-import { j as e } from "../jsx-runtime-B4hRZ52C.mjs";
-import { cx as d } from "@kuma-ui/core";
-import { useMemo as a, useCallback as x } from "react";
-import { buttonResetStyles as f } from "../theme.mjs";
-import u from "../icons/icon.mjs";
-import v, { PopoverContainer as j, usePopover as h, usePopoverContext as P } from "./popover.mjs";
-import k from "./atom.mjs";
-import { Span as M } from "./text.mjs";
-import y, { normalBlendStyles as N } from "./hover-gradient.mjs";
-import b from "./click-ripples.mjs";
-function w({
-  label: o,
-  iconLeft: r,
-  iconRight: n,
-  href: t,
-  shouldCloseOnClick: m = !0,
-  onClick: s,
-  ...i
+import { j as n } from "../jsx-runtime-B4hRZ52C.mjs";
+import { cx as b } from "@kuma-ui/core";
+import { useMemo as v, useState as h, useCallback as p, useEffect as y } from "react";
+import { buttonResetStyles as M } from "../theme.mjs";
+import j from "../icons/icon.mjs";
+import E, { PopoverContainer as S, usePopover as F, usePopoverContext as w } from "./popover.mjs";
+import K from "./atom.mjs";
+import { Span as I } from "./text.mjs";
+import A, { normalBlendStyles as D } from "./hover-gradient.mjs";
+import H from "./click-ripples.mjs";
+import z from "./separator.mjs";
+import C from "./decorators.mjs";
+const g = /* @__PURE__ */ new Set();
+function N() {
+  const [e, t] = h(!1), o = p((r) => {
+    t(r);
+    for (const i of g)
+      i(r);
+  }, []);
+  return y(() => {
+    const r = (i) => {
+      t(i);
+    };
+    return g.add(r), () => {
+      g.delete(r);
+    };
+  }, []), v(() => ({
+    isKeyboardNavigating: e,
+    setIsKeyboardNavigating: o
+  }), [e, o]);
+}
+function L({
+  label: e,
+  iconLeft: t,
+  iconRight: o,
+  href: r,
+  shouldCloseOnClick: i = !0,
+  decorators: k = [],
+  submenu: c,
+  className: f,
+  onClick: d,
+  ...x
 }) {
   const {
-    close: p
-  } = P(), c = x((l) => {
-    s == null || s(l), m && (p == null || p());
-  }, [s, m, p]);
-  return /* @__PURE__ */ e.jsxs(k, { as: t ? "a" : "button", ...i, type: t ? void 0 : "button", role: "menuitem", href: t, className: d(f, "kakadu-components-3983689191"), onClick: c, children: [
-    /* @__PURE__ */ e.jsxs(M, { className: "kakadu-components-2031937592", children: [
-      r ? /* @__PURE__ */ e.jsx(u, { width: 12, height: 12, type: r }) : null,
-      /* @__PURE__ */ e.jsx("span", { className: "kakadu-components-3911899222", children: o }),
-      n ? /* @__PURE__ */ e.jsx(u, { width: 12, height: 12, type: n }) : null
+    isFocused: a,
+    close: s
+  } = w(), {
+    isKeyboardNavigating: u
+  } = N(), m = p((P) => {
+    a && (d == null || d(P), c ? c.show() : i && (s == null || s()));
+  }, [a, d, i, s, c]), l = v(() => /* @__PURE__ */ n.jsxs(K, { as: r ? "a" : "button", ...x, type: r ? void 0 : "button", role: "menuitem", href: r, className: b(M, "kakadu-components-3114599304", u ? "kakadu-components-4096376656" : "kakadu-components-2554182777", f), onClick: m, children: [
+    /* @__PURE__ */ n.jsxs(I, { className: "kakadu-components-1109353535", children: [
+      t ? /* @__PURE__ */ n.jsx(j, { width: 12, height: 12, type: t }) : null,
+      /* @__PURE__ */ n.jsx("span", { className: "kakadu-components-913703148", children: e }),
+      o ? /* @__PURE__ */ n.jsx(j, { width: 12, height: 12, type: o }) : null
     ] }),
-    /* @__PURE__ */ e.jsx(y, { size: 100, className: N }),
-    /* @__PURE__ */ e.jsx(b, { size: 100 })
-  ] });
+    u ? null : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+      /* @__PURE__ */ n.jsx(A, { size: 150, className: D }),
+      /* @__PURE__ */ n.jsx(H, { size: 100 })
+    ] })
+  ] }), [u, x, r, f, m, t, e, o]);
+  return /* @__PURE__ */ n.jsx(C, { decorators: k, children: c ? /* @__PURE__ */ n.jsx(T, { menu: c.popoverMenu, className: "kakadu-components-1861176543", children: l }) : l });
+}
+function R(e) {
+  if ("type" in e) {
+    if (e.type === "separator")
+      return /* @__PURE__ */ n.jsx(z, {});
+    if (e.type === "group")
+      return /* @__PURE__ */ n.jsx(I, { className: "kakadu-components-1499037363", children: e.label });
+  }
+  return /* @__PURE__ */ n.jsx(L, { ...e });
 }
-function I({
-  items: o,
-  ...r
+function B({
+  items: e
 }) {
-  return /* @__PURE__ */ e.jsx(v, { ...r, as: "nav", role: "menu", innerClassName: "kakadu-components-3719863410", children: o.map((n, t) => (
-    // eslint-disable-next-line react/no-array-index-key
-    /* @__PURE__ */ e.jsx(w, { ...n }, t)
+  const {
+    isFocused: t
+  } = w(), [o, r] = h(0), [i, k] = h([]), {
+    setIsKeyboardNavigating: c
+  } = N(), f = p((a) => {
+    a && k((s) => [...s, a]);
+  }, []), d = p((a) => {
+    t && (a.currentTarget.focus(), c(!1));
+  }, [t, c]), x = p((a) => {
+    if (t) {
+      const s = a.target;
+      r(i.indexOf(s));
+    }
+  }, [t, i]);
+  return y(() => {
+    if (!t)
+      return;
+    const a = (s) => {
+      const u = i.length;
+      if (u === 0)
+        return;
+      let m;
+      switch (s.key) {
+        case "ArrowDown": {
+          m = (o + 1) % u;
+          break;
+        }
+        case "ArrowUp": {
+          m = (o - 1 + u) % u;
+          break;
+        }
+        case "Home": {
+          m = 0;
+          break;
+        }
+        case "End": {
+          m = u - 1;
+          break;
+        }
+      }
+      if (m !== void 0) {
+        s.preventDefault(), s.stopPropagation();
+        const l = i[m];
+        l && (l.focus(), c(!0));
+      }
+    };
+    return window.addEventListener("keydown", a), () => {
+      window.removeEventListener("keydown", a);
+    };
+  }, [t, i, o, c]), /* @__PURE__ */ n.jsx(n.Fragment, { children: e.map((a, s) => /* @__PURE__ */ n.jsx(
+    R,
+    {
+      ...a,
+      reference: f,
+      onFocus: x,
+      onMouseEnter: d
+    },
+    s
   )) });
 }
-function C(o) {
-  const r = a(() => ({
-    items: o
-  }), [o]), {
-    show: n,
-    popover: t
-  } = h(I, r);
-  return a(() => ({
-    show: n,
-    popoverMenu: t
-  }), [n, t]);
+function G({
+  items: e,
+  ...t
+}) {
+  return /* @__PURE__ */ n.jsx(E, { ...t, as: "nav", role: "menu", innerClassName: "kakadu-components-3600436535", children: /* @__PURE__ */ n.jsx(B, { items: e }) });
+}
+function ee(e) {
+  const t = v(() => ({
+    items: e
+  }), [e]), {
+    show: o,
+    popover: r
+  } = F(G, t);
+  return v(() => ({
+    show: o,
+    popoverMenu: r
+  }), [o, r]);
 }
-function D({
-  menu: o,
-  children: r
+function T({
+  menu: e,
+  className: t,
+  children: o
 }) {
-  return /* @__PURE__ */ e.jsxs(j, { children: [
-    r,
-    o
+  return /* @__PURE__ */ n.jsxs(S, { className: t, children: [
+    o,
+    e
   ] });
 }
 export {
-  D as default,
-  C as usePopoverMenu
+  T as default,
+  ee as usePopoverMenu
 };

package/build/components/popover.d.ts

@@ -3,6 +3,7 @@ import { type AtomElementType, type AtomProperties, type DefaultAtomElementType
 type InitialFocusElement = HTMLElement | null;
 type PopoverProviderProperties<Data = any> = {
     isVisible: boolean;
+    isFocused: boolean;
     setInitialFocus?: (initialFocus?: InitialFocusElement) => void;
     close?: (data?: Data) => void;
 };

package/build/components/popover.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../jsx-runtime-BB_1_6y_.js"),d=require("@kuma-ui/core"),e=require("react"),_=require("../focus-trap-react-CcpTuiJi.js"),w=require("./atom.js"),D=e.createContext({isVisible:!1}),{Provider:z}=D;function B(){return e.useContext(D)}function $({as:i,className:n,...o}){return s.jsxRuntimeExports.jsx(w.default,{as:i??w.defaultAtomElementType,...o,className:d.cx("kakadu-components-2845019685",n)})}function H({as:i,isVisible:n,label:o,shouldCloseOnOutsideClick:m=!0,shouldCloseOnEscapePress:r=!0,children:u,className:k,innerClassName:R,onClose:c,...p}){const a=e.useRef(null),x=e.useRef(null),[T,V]=e.useState(!1),[l,h]=e.useState(!1),C=e.useCallback(t=>{a.current=t,h(!1)},[]),E=e.useRef(null),M=e.useCallback(t=>{t&&(E.current=t)},[]),A=e.useMemo(()=>({initialFocus:()=>E.current??void 0,onActivate:()=>{var t;return(t=E.current)==null?void 0:t.focus()},clickOutsideDeactivates:m,escapeDeactivates:r,onDeactivate(){h(!1)}}),[m,r]),[I,S]=e.useState(n??!1),W=e.useMemo(()=>({isVisible:I,setInitialFocus:M,close:C}),[I,M,C]),[f,q]=e.useState("center");return e.useEffect(()=>{const t=x.current;if(t){const g=()=>{const N=t.offsetParent,b=N instanceof HTMLElement?N.getBoundingClientRect():null,F=t.getBoundingClientRect();if(!b){q("center");return}const P=b.left+b.width/2-F.width/2,L=P+F.width,O=P<0,y=L>window.innerWidth;let v="center";if(O&&y){const j=Math.abs(P);v=L-window.innerWidth>j?"right":"left"}else y?v="right":O&&(v="left");q(j=>j===v?j:v)};return g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}}},[]),e.useEffect(()=>{n&&(V(!0),S(!0))},[n]),e.useEffect(()=>{if(n){const t=setTimeout(()=>{h(!0)},100);return()=>{clearTimeout(t)}}h(!1)},[n]),e.useEffect(()=>{if(T&&!l){const t=setTimeout(()=>{c==null||c(a.current??void 0),S(!1)},370);return()=>{clearTimeout(t)}}},[T,l,c]),s.jsxRuntimeExports.jsx(w.default,{reference:x,as:i??w.defaultAtomElementType,role:"dialog","aria-hidden":!l,"aria-label":o??"Popover",...p,className:d.cx("kakadu-components-3920007758",f==="left"&&"kakadu-components-611400930",f==="right"&&"kakadu-components-944244368",l&&"kakadu-components-1399012551",k),children:s.jsxRuntimeExports.jsxs("div",{className:d.cx("kakadu-components-1118152266",l&&"kakadu-components-231244945"),children:[s.jsxRuntimeExports.jsx("div",{className:d.cx("kakadu-components-3330289187",f==="left"&&"kakadu-components-1495725644",f==="right"&&"kakadu-components-4235689197")}),s.jsxRuntimeExports.jsx(_.focusTrapReactExports.FocusTrap,{active:l,focusTrapOptions:A,children:s.jsxRuntimeExports.jsxs("div",{className:d.cx("kakadu-components-3253940005",R),children:[s.jsxRuntimeExports.jsx(z,{value:W,children:u}),s.jsxRuntimeExports.jsx("div",{className:d.cx("kakadu-components-3252390100",f==="left"&&"kakadu-components-3754561431",f==="right"&&"kakadu-components-2265262600")})]})})]})})}function G(i,n){const[o,m]=e.useState(!1),r=e.useRef(void 0),u=e.useRef(null),k=e.useCallback(async p=>(m(!0),u.current=p??document.activeElement,new Promise(a=>{r.current=a})),[]),R=e.useCallback(p=>{var a;if(m(!1),(a=r.current)==null||a.call(r,p),r.current=void 0,u.current){const x=u.current;x.isConnected&&x.focus(),u.current=null}},[]),c=e.useMemo(()=>s.jsxRuntimeExports.jsx(i,{...n,isVisible:o,onClose:R}),[i,n,o,R]);return e.useMemo(()=>({isVisible:o,show:k,popover:c}),[o,k,c])}exports.PopoverContainer=$;exports.default=H;exports.usePopover=G;exports.usePopoverContext=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../jsx-runtime-BB_1_6y_.js"),d=require("@kuma-ui/core"),e=require("react"),B=require("../focus-trap-react-CcpTuiJi.js"),E=require("./atom.js"),A=e.createContext({isVisible:!1,isFocused:!1}),{Provider:$}=A;function H(){return e.useContext(A)}function U({as:u,className:s,...o}){return n.jsxRuntimeExports.jsx(E.default,{as:u??E.defaultAtomElementType,...o,className:d.cx("kakadu-components-2845019685",s)})}function G({as:u,isVisible:s,label:o,shouldCloseOnOutsideClick:m=!0,shouldCloseOnEscapePress:c=!0,children:i,className:k,innerClassName:R,onClose:r,...p}){const a=e.useRef(null),x=e.useRef(null),[F,h]=e.useState(!1),[C,W]=e.useState(!1),[l,j]=e.useState(!1),I=e.useCallback(t=>{a.current=t,j(!1)},[]),g=e.useRef(null),M=e.useCallback(t=>{t&&(g.current=t)},[]),_=e.useMemo(()=>({initialFocus:()=>g.current??void 0,onActivate(){var t;(t=g.current)==null||t.focus(),h(!0)},returnFocusOnDeactivate:!1,clickOutsideDeactivates:m,escapeDeactivates:c,onUnpause(){h(!0)},onPause(){h(!1)},onDeactivate(){j(!1),h(!1)}}),[m,c]),[S,q]=e.useState(s??!1),z=e.useMemo(()=>({isVisible:S,isFocused:F,setInitialFocus:M,close:I}),[S,F,M,I]),[f,N]=e.useState("center");return e.useEffect(()=>{const t=x.current;if(t){const P=()=>{const O=t.offsetParent,b=O instanceof HTMLElement?O.getBoundingClientRect():null,D=t.getBoundingClientRect();if(!b){N("center");return}const T=b.left+b.width/2-D.width/2,L=T+D.width,y=T<0,V=L>window.innerWidth;let v="center";if(y&&V){const w=Math.abs(T);v=L-window.innerWidth>w?"right":"left"}else V?v="right":y&&(v="left");N(w=>w===v?w:v)};return P(),window.addEventListener("resize",P),()=>{window.removeEventListener("resize",P)}}},[]),e.useEffect(()=>{s&&(W(!0),q(!0))},[s]),e.useEffect(()=>{if(s){const t=setTimeout(()=>{j(!0)},100);return()=>{clearTimeout(t)}}j(!1)},[s]),e.useEffect(()=>{if(C&&!l){const t=setTimeout(()=>{r==null||r(a.current??void 0),q(!1)},370);return()=>{clearTimeout(t)}}},[C,l,r]),n.jsxRuntimeExports.jsx(E.default,{reference:x,as:u??E.defaultAtomElementType,role:"dialog","aria-hidden":!l,"aria-label":o??"Popover",...p,className:d.cx("kakadu-components-3920007758",f==="left"&&"kakadu-components-611400930",f==="right"&&"kakadu-components-944244368",l&&"kakadu-components-1399012551",k),children:n.jsxRuntimeExports.jsxs("div",{className:d.cx("kakadu-components-1118152266",l&&"kakadu-components-231244945"),children:[n.jsxRuntimeExports.jsx("div",{className:d.cx("kakadu-components-677077174",f==="left"&&"kakadu-components-1495725644",f==="right"&&"kakadu-components-4235689197")}),n.jsxRuntimeExports.jsx(B.focusTrapReactExports.FocusTrap,{active:l,focusTrapOptions:_,children:n.jsxRuntimeExports.jsxs("div",{className:d.cx("kakadu-components-2488426662",R),children:[n.jsxRuntimeExports.jsx($,{value:z,children:i}),n.jsxRuntimeExports.jsx("div",{className:d.cx("kakadu-components-3252390100",f==="left"&&"kakadu-components-3754561431",f==="right"&&"kakadu-components-2265262600")})]})})]})})}function J(u,s){const[o,m]=e.useState(!1),c=e.useRef(void 0),i=e.useRef(null),k=e.useCallback(async p=>(m(!0),i.current=p??document.activeElement,new Promise(a=>{c.current=a})),[]),R=e.useCallback(p=>{var a;if(m(!1),(a=c.current)==null||a.call(c,p),c.current=void 0,i.current){const x=i.current;x.isConnected&&x.focus(),i.current=null}},[]),r=e.useMemo(()=>n.jsxRuntimeExports.jsx(u,{...s,isVisible:o,onClose:R}),[u,s,o,R]);return e.useMemo(()=>({isVisible:o,show:k,popover:r}),[o,k,r])}exports.PopoverContainer=U;exports.default=G;exports.usePopover=J;exports.usePopoverContext=H;