@kakadu/components 2.4.3 → 3.1.0

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

package/build/components/popover-menu.mjs

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