@kakadu/components 6.1.1 → 6.3.0

package/build/components/notification.mjs

@@ -1,97 +1,113 @@
-import { j as i } from "../jsx-runtime-B4hRZ52C.mjs";
-import { createContext as b, useState as m, useEffect as x, useRef as j, useCallback as d, useContext as y, useMemo as P } from "react";
-import { cx as N } from "@kuma-ui/core";
-import R from "../utilities/generate-random-id.mjs";
-import D from "./notice.mjs";
-import { noticeTypes as G } from "./notice.mjs";
-function H({
-  type: n,
-  icon: f,
-  index: r,
-  className: c,
-  children: l,
-  onDismiss: o,
-  ...e
+import { j as u } from "../jsx-runtime-B4hRZ52C.mjs";
+import { createContext as H, useState as d, useEffect as m, useRef as E, useCallback as k, useContext as L, useMemo as I } from "react";
+import { cx as j } from "@kuma-ui/core";
+import S from "../utilities/generate-random-id.mjs";
+import V from "./notice.mjs";
+import { noticeTypes as Q } from "./notice.mjs";
+function B({
+  type: i,
+  icon: N,
+  id: a,
+  index: l,
+  shouldDismiss: s,
+  className: v,
+  children: T,
+  onDismiss: c,
+  ...o
 }) {
-  const [t, s] = m(!1), [u, E] = m(!1), [p, v] = m(!1);
-  x(() => {
-    const a = setTimeout(() => {
-      s(!0);
-    }, 250);
+  const [e, r] = d(!1), [t, p] = d(!1), [n, x] = d(!1), h = l ?? 0, [b, g] = d(h);
+  m(() => {
+    if (s || t)
+      return;
+    const f = setTimeout(() => {
+      r(!0);
+    }, 100);
     return () => {
-      clearTimeout(a);
+      clearTimeout(f);
     };
+  }, [s, t]);
+  const C = E(0), w = E(0), y = k(() => {
+    x(!0);
+  }, []), P = k(() => {
+    x(!1);
   }, []);
-  const T = j(0), h = j(0), w = d(() => {
-    v(!0);
-  }, []), I = d(() => {
-    v(!1);
-  }, []);
-  x(() => {
-    if (p) {
-      h.current += Date.now() - T.current;
+  return m(() => {
+    if (n) {
+      w.current += Date.now() - C.current;
       return;
     }
-    if (t) {
-      T.current = Date.now();
-      const a = 6e3 - h.current, M = setTimeout(() => {
-        s(!1), E(!0);
-      }, a);
+    if (e) {
+      C.current = Date.now();
+      const f = 6e3 - w.current, R = setTimeout(() => {
+        r(!1), p(!0);
+      }, f);
       return () => {
-        clearTimeout(M);
+        clearTimeout(R);
       };
     }
-  }, [p, t]);
-  const k = r ?? 0;
-  return x(() => {
-    if (u && !t) {
-      const a = setTimeout(() => {
-        o == null || o(k);
+  }, [n, e]), m(() => {
+    s && !t && (r(!1), p(!0));
+  }, [s, t]), m(() => {
+    if (t && !e) {
+      const f = setTimeout(() => {
+        a && (c == null || c(a));
       }, 300);
       return () => {
-        clearTimeout(a);
+        clearTimeout(f);
       };
     }
-  }, [u, t, o, k]), /* @__PURE__ */ i.jsx("div", { ...e, style: {
-    "--index": k
-  }, className: N("kakadu-components-1727618227", t && "kakadu-components-3003995416", c), children: /* @__PURE__ */ i.jsxs(D, { role: "status", "aria-live": "polite", "aria-atomic": "true", type: n, icon: f, className: N("kakadu-components-3951461646", t && "kakadu-components-2837603142"), onMouseEnter: w, onMouseLeave: I, children: [
-    l,
-    /* @__PURE__ */ i.jsx("div", { className: "kakadu-components-2751825161", children: /* @__PURE__ */ i.jsx("div", { className: N("kakadu-components-47664046", p ? "kakadu-components-758522476" : "kakadu-components-3914681513") }) })
+  }, [t, e, a, c]), m(() => {
+    n || g(h);
+  }, [n, h]), /* @__PURE__ */ u.jsx("div", { ...o, style: {
+    "--index": b
+  }, className: j("kakadu-components-1727618227", e && "kakadu-components-3003995416", v), children: /* @__PURE__ */ u.jsxs(V, { role: "status", "aria-live": "polite", "aria-atomic": "true", type: i, icon: N, className: j("kakadu-components-3951461646", e && "kakadu-components-2837603142"), onMouseEnter: y, onMouseLeave: P, children: [
+    T,
+    /* @__PURE__ */ u.jsx("div", { className: "kakadu-components-2751825161", children: /* @__PURE__ */ u.jsx("div", { className: j("kakadu-components-4050948330", n ? "kakadu-components-758522476" : "kakadu-components-3914681513") }) })
   ] }) });
 }
-const C = b({
+const M = H({
   createNotification() {
     throw new Error("useCreateNotification must be used within a NotificationProvider");
   }
 });
-function z() {
+function G() {
   const {
-    createNotification: n
-  } = y(C);
-  return n;
+    createNotification: i
+  } = L(M);
+  return i;
 }
-function A({
-  children: n
+function J({
+  limit: i = 5,
+  children: N
 }) {
-  const [f, r] = m([]), c = d((e) => {
-    const t = R();
-    r((s) => [...s, {
-      ...e,
-      id: t
-    }]);
-  }, []), l = d((e) => {
-    r((t) => t.filter((s, u) => u !== e));
-  }, []), o = P(() => ({
-    createNotification: c
-  }), [c]);
-  return /* @__PURE__ */ i.jsxs(C.Provider, { value: o, children: [
-    n,
-    f.map((e, t) => /* @__PURE__ */ i.jsx(H, { ...e, index: t, onDismiss: l }, e.id))
+  const [a, l] = d([]), s = k((o) => {
+    const e = S();
+    l((r) => {
+      const t = [...r, {
+        ...o,
+        id: e
+      }];
+      if (t.length <= i)
+        return t;
+      const p = t.length - i;
+      return t.map((n, x) => x < p ? {
+        ...n,
+        shouldDismiss: !0
+      } : n);
+    });
+  }, [i]), v = k((o) => {
+    l((e) => e.filter((r) => r.id !== o));
+  }, []), T = I(() => ({
+    createNotification: s
+  }), [s]), c = I(() => [...a].reverse(), [a]);
+  return /* @__PURE__ */ u.jsxs(M.Provider, { value: T, children: [
+    N,
+    c.map((o, e) => /* @__PURE__ */ u.jsx(B, { ...o, index: e, onDismiss: v }, o.id))
   ] });
 }
 export {
-  A as NotificationProvider,
-  H as default,
-  G as notificationTypes,
-  z as useCreateNotification
+  J as NotificationProvider,
+  B as default,
+  Q as notificationTypes,
+  G as useCreateNotification
 };

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributeAnchorTarget, type MouseEvent, type ReactNode, type Ref } from 'react';
+import React, { type HTMLAttributeAnchorTarget, type MouseEvent, type ReactNode, type Ref } from 'react';
 import { type IconType } from '../icons/icon';
 import { type DecoratorType } from './decorators';
 export declare const dangerPopoverMenuItemStyles: string;
@@ -28,12 +28,12 @@ export declare function usePopoverMenu(items: PopoverMenuItemProperties[]): {
     isVisible: boolean;
     show: () => Promise<void | undefined>;
     close: (result?: void | undefined) => void;
-    popoverMenu: import("react/jsx-runtime").JSX.Element | null;
+    popoverMenu: React.JSX.Element | null;
 };
 export type PopoverMenuProperties = {
     readonly menu: ReactNode;
     readonly className?: string;
     readonly children?: ReactNode;
 };
-export default function PopoverMenu({ menu, className, children, }: PopoverMenuProperties): import("react/jsx-runtime").JSX.Element;
+export default function PopoverMenu({ menu, className, children, }: PopoverMenuProperties): React.JSX.Element;
 export {};

package/build/components/popover-menu.js

@@ -1 +1 @@
-"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"),i=require("react"),z=require("../theme.js"),q=require("../icons/icon.js"),A=require("../hooks/use-synchronized-value.js"),R=require("./popover.js"),F=require("./atom.js"),S=require("./text.js"),I=require("./hover-gradient.js"),V=require("./click-ripples.js"),B=require("./separator.js"),T=require("./decorators.js"),N=require("./spinner.js"),_=require("./skeleton.js");function C(){const{value:e,setValue:s}=A.default("isKeyboardNavigating");return i.useMemo(()=>({isKeyboardNavigating:e,setIsKeyboardNavigating:s}),[e,s])}const H="kakadu-components-949294122";function $({isLoading:e,isDisabled:s,label:c,iconLeft:x,iconRight:u,href:m,target:b,shouldCloseOnClick:o=!0,decorators:a=[],submenu:l,className:d,onClick:r,...v}){const{isVisible:y,isPreparingFocus:h,isFocused:n,close:k}=R.usePopoverContext(),{isKeyboardNavigating:j}=C(),f=i.useRef(!0),M=i.useCallback(()=>{f.current=n},[n]),P=i.useCallback(K=>{!j&&!f.current||n&&(r==null||r(K),l?l.show():o&&(k==null||k()))},[j,n,r,l,o,k]),p=!y&&!h||!!e||!!s,E=m!==void 0&&!e,g=i.useMemo(()=>t.jsxRuntimeExports.jsxs(F.default,{as:E?"a":"button",...v,"aria-disabled":E&&p?!0:void 0,type:E?void 0:"button",role:"menuitem",href:e?void 0:m,target:E?b:void 0,inert:E?p:void 0,disabled:E?void 0:p,className:w.cx(z.buttonResetStyles,"kakadu-components-1772835671",n&&"kakadu-components-3160069815",j?"kakadu-components-2254977234":n&&!p&&"kakadu-components-278139688",p&&"kakadu-components-1879666195",d),onClick:p?void 0:P,onPointerDownCapture:p?void 0:M,children:[t.jsxRuntimeExports.jsxs(S.Span,{className:w.cx("kakadu-components-1377252111",e?"kakadu-components-2409458488":p&&"kakadu-components-532828420"),children:[x?e?t.jsxRuntimeExports.jsx(N.default,{size:12}):t.jsxRuntimeExports.jsx(q.default,{width:12,height:12,type:x}):null,t.jsxRuntimeExports.jsxs("span",{className:w.cx("kakadu-components-1590676894",e&&"kakadu-components-743909038"),children:[e?t.jsxRuntimeExports.jsx(_.SkeletonInstance,{"aria-hidden":!0,width:"100%",className:"kakadu-components-3950955262"}):null,t.jsxRuntimeExports.jsx("span",{className:e?"kakadu-components-543569100":void 0,children:c})]}),u?e?x?t.jsxRuntimeExports.jsx(_.SkeletonInstance,{width:12,height:12}):t.jsxRuntimeExports.jsx(N.default,{size:12}):t.jsxRuntimeExports.jsx(q.default,{width:12,height:12,type:u}):null]}),j||p?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(V.default,{isActive:n,size:100}),t.jsxRuntimeExports.jsx(I.default,{isActive:n,size:150,className:I.normalBlendStyles})]})]}),[E,v,p,m,e,b,d,n,j,P,M,x,c,u]);return t.jsxRuntimeExports.jsx(T.default,{decorators:a,children:l?t.jsxRuntimeExports.jsx(D,{menu:l.popoverMenu,className:"kakadu-components-1861176543",children:g}):g})}function G(e){if("type"in e){if(e.type==="separator")return t.jsxRuntimeExports.jsx(B.default,{});if(e.type==="group")return t.jsxRuntimeExports.jsx(S.Span,{className:"kakadu-components-1499037363",children:e.label})}return t.jsxRuntimeExports.jsx($,{...e})}function O({items:e}){const{isFocused:s}=R.usePopoverContext(),[c,x]=i.useState([]),{setIsKeyboardNavigating:u}=C(),m=i.useCallback(o=>{o&&x(a=>a.includes(o)?a:[...a,o])},[]),b=i.useCallback(o=>{s&&(o.currentTarget.focus(),u(!1))},[s,u]);return i.useEffect(()=>{if(!s)return;const o=a=>{const l=c.filter(n=>n.isConnected),d=l.length;if(d===0)return;let r,v=1;const y=document.activeElement;let h=y?l.indexOf(y):-1;switch(h===-1&&(h=0),a.key){case"ArrowUp":v=-1;case"ArrowDown":{r=(h+v+d)%d;break}case"Home":{r=0;break}case"End":{r=d-1,v=-1;break}case"Tab":{u(!0);return}}if(r!==void 0){a.preventDefault(),a.stopPropagation();let n=l[r];if(n){let k=0;const j=f=>"disabled"in f&&f.disabled||"inert"in f&&f.inert;for(;j(n)&&k<d;)r=(r+v+d)%d,n=l[r],k+=1;n&&!j(n)&&(n.focus(),u(!0))}}};return window.addEventListener("keydown",o,{capture:!0}),()=>{window.removeEventListener("keydown",o,{capture:!0})}},[s,c,u]),t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:e.map((o,a)=>t.jsxRuntimeExports.jsx(G,{...o,reference:m,onMouseEnter:b},a))})}function U({items:e,...s}){return t.jsxRuntimeExports.jsx(R.default,{...s,as:"nav",role:"menu",innerClassName:"kakadu-components-3600436535",children:t.jsxRuntimeExports.jsx(O,{items:e})})}function J(e){const s=i.useMemo(()=>({items:e}),[e]),{isVisible:c,show:x,close:u,popover:m}=R.usePopover(U,s);return i.useMemo(()=>({isVisible:c,show:x,close:u,popoverMenu:m}),[c,x,u,m])}function D({menu:e,className:s,children:c}){return t.jsxRuntimeExports.jsxs(R.PopoverContainer,{className:s,children:[c,e]})}exports.dangerPopoverMenuItemStyles=H;exports.default=D;exports.usePopoverMenu=J;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../jsx-runtime-BB_1_6y_.js"),y=require("@kuma-ui/core"),c=require("react"),z=require("../theme.js"),g=require("../icons/icon.js"),A=require("../hooks/use-synchronized-value.js"),F=require("../utilities/listeners.js"),R=require("./popover.js"),V=require("./atom.js"),S=require("./text.js"),I=require("./hover-gradient.js"),B=require("./click-ripples.js"),T=require("./separator.js"),H=require("./decorators.js"),N=require("./spinner.js"),_=require("./skeleton.js"),$=F.default(e=>{window.addEventListener("keydown",e,{capture:!0})},e=>{window.removeEventListener("keydown",e,{capture:!0})});function C(){const{value:e,setValue:n}=A.default("isKeyboardNavigating");return c.useMemo(()=>({isKeyboardNavigating:e,setIsKeyboardNavigating:n}),[e,n])}const G="kakadu-components-949294122";function O({isLoading:e,isDisabled:n,label:l,iconLeft:m,iconRight:u,href:v,target:b,shouldCloseOnClick:s=!0,decorators:o=[],submenu:r,className:i,onClick:j,...E}){const{isVisible:h,isPreparingFocus:d,isFocused:a,close:k}=R.usePopoverContext(),{isKeyboardNavigating:p}=C(),w=c.useRef(!0),M=c.useCallback(()=>{w.current=a},[a]),P=c.useCallback(D=>{!p&&!w.current||a&&(j==null||j(D),r?r.show():s&&(k==null||k()))},[p,a,j,r,s,k]),x=!h&&!d||!!e||!!n,f=v!==void 0&&!e,q=c.useMemo(()=>t.jsxRuntimeExports.jsxs(V.default,{as:f?"a":"button",...E,"aria-disabled":f&&x?!0:void 0,type:f?void 0:"button",role:"menuitem",href:e?void 0:v,target:f?b:void 0,inert:f?x:void 0,disabled:f?void 0:x,className:y.cx(z.buttonResetStyles,"kakadu-components-1772835671",a&&"kakadu-components-3160069815",p?"kakadu-components-2254977234":a&&!x&&"kakadu-components-278139688",x&&"kakadu-components-1879666195",i),onClick:x?void 0:P,onPointerDownCapture:x?void 0:M,children:[t.jsxRuntimeExports.jsxs(S.Span,{className:y.cx("kakadu-components-1377252111",e?"kakadu-components-2409458488":x&&"kakadu-components-532828420"),children:[m?e?t.jsxRuntimeExports.jsx(N.default,{size:12}):t.jsxRuntimeExports.jsx(g.default,{width:12,height:12,type:m}):null,t.jsxRuntimeExports.jsxs("span",{className:y.cx("kakadu-components-1590676894",e&&"kakadu-components-743909038"),children:[e?t.jsxRuntimeExports.jsx(_.SkeletonInstance,{"aria-hidden":!0,width:"100%",className:"kakadu-components-3950955262"}):null,t.jsxRuntimeExports.jsx("span",{className:e?"kakadu-components-543569100":void 0,children:l})]}),u?e?m?t.jsxRuntimeExports.jsx(_.SkeletonInstance,{width:12,height:12}):t.jsxRuntimeExports.jsx(N.default,{size:12}):t.jsxRuntimeExports.jsx(g.default,{width:12,height:12,type:u}):null]}),p||x?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(B.default,{isActive:a,size:100}),t.jsxRuntimeExports.jsx(I.default,{isActive:a,size:150,className:I.normalBlendStyles})]})]}),[f,E,x,v,e,b,i,a,p,P,M,m,l,u]);return t.jsxRuntimeExports.jsx(H.default,{decorators:o,children:r?t.jsxRuntimeExports.jsx(K,{menu:r.popoverMenu,className:"kakadu-components-1861176543",children:q}):q})}function U(e){if("type"in e){if(e.type==="separator")return t.jsxRuntimeExports.jsx(T.default,{});if(e.type==="group")return t.jsxRuntimeExports.jsx(S.Span,{className:"kakadu-components-1499037363",children:e.label})}return t.jsxRuntimeExports.jsx(O,{...e})}function J({items:e}){const{isFocused:n}=R.usePopoverContext(),[l,m]=c.useState([]),{setIsKeyboardNavigating:u}=C(),v=c.useCallback(s=>{s&&m(o=>o.includes(s)?o:[...o,s])},[]),b=c.useCallback(s=>{n&&(s.currentTarget.focus(),u(!1))},[n,u]);return c.useEffect(()=>{if(n)return $(s=>{const o=l.filter(d=>d.isConnected),r=o.length;if(r===0)return;let i,j=1;const E=document.activeElement;let h=E?o.indexOf(E):-1;switch(h===-1&&(h=0),s.key){case"ArrowUp":j=-1;case"ArrowDown":{i=(h+j+r)%r;break}case"Home":{i=0;break}case"End":{i=r-1,j=-1;break}case"Tab":{u(!0);return}}if(i!==void 0){s.preventDefault(),s.stopPropagation();let d=o[i];if(d){let a=0;const k=p=>"disabled"in p&&p.disabled||"inert"in p&&p.inert;for(;k(d)&&a<r;)i=(i+j+r)%r,d=o[i],a+=1;d&&!k(d)&&(d.focus(),u(!0))}}})},[n,l,u]),t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:e.map((s,o)=>t.jsxRuntimeExports.jsx(U,{...s,reference:v,onMouseEnter:b},o))})}function Q({items:e,...n}){return t.jsxRuntimeExports.jsx(R.default,{...n,as:"nav",role:"menu",innerClassName:"kakadu-components-3600436535",children:t.jsxRuntimeExports.jsx(J,{items:e})})}function W(e){const n=c.useMemo(()=>({items:e}),[e]),{isVisible:l,show:m,close:u,popover:v}=R.usePopover(Q,n);return c.useMemo(()=>({isVisible:l,show:m,close:u,popoverMenu:v}),[l,m,u,v])}function K({menu:e,className:n,children:l}){return t.jsxRuntimeExports.jsxs(R.PopoverContainer,{className:n,children:[l,e]})}exports.dangerPopoverMenuItemStyles=G;exports.default=K;exports.usePopoverMenu=W;

package/build/components/popover-menu.mjs

@@ -1,186 +1,188 @@
 import { j as n } from "../jsx-runtime-B4hRZ52C.mjs";
-import { cx as I } from "@kuma-ui/core";
-import { useMemo as b, useState as F, useCallback as P, useEffect as V, useRef as B } from "react";
+import { cx as P } from "@kuma-ui/core";
+import { useMemo as y, useState as F, useCallback as b, useEffect as V, useRef as B } from "react";
 import { buttonResetStyles as H } from "../theme.mjs";
 import E from "../icons/icon.mjs";
 import R from "../hooks/use-synchronized-value.mjs";
-import T, { PopoverContainer as G, usePopover as U, usePopoverContext as A } from "./popover.mjs";
-import q from "./atom.mjs";
-import { Span as K } from "./text.mjs";
-import J, { normalBlendStyles as O } from "./hover-gradient.mjs";
-import Q from "./click-ripples.mjs";
-import W from "./separator.mjs";
-import X from "./decorators.mjs";
+import T from "../utilities/listeners.mjs";
+import G, { PopoverContainer as U, usePopover as q, usePopoverContext as K } from "./popover.mjs";
+import J from "./atom.mjs";
+import { Span as A } from "./text.mjs";
+import O, { normalBlendStyles as Q } from "./hover-gradient.mjs";
+import W from "./click-ripples.mjs";
+import X from "./separator.mjs";
+import Y from "./decorators.mjs";
 import S from "./spinner.mjs";
 import { SkeletonInstance as D } from "./skeleton.mjs";
+const Z = T((e) => {
+  window.addEventListener("keydown", e, {
+    capture: !0
+  });
+}, (e) => {
+  window.removeEventListener("keydown", e, {
+    capture: !0
+  });
+});
 function z() {
   const {
     value: e,
-    setValue: o
+    setValue: t
   } = R("isKeyboardNavigating");
-  return b(() => ({
+  return y(() => ({
     isKeyboardNavigating: e,
-    setIsKeyboardNavigating: o
-  }), [e, o]);
+    setIsKeyboardNavigating: t
+  }), [e, t]);
 }
-const ve = "kakadu-components-949294122";
-function Y({
+const he = "kakadu-components-949294122";
+function _({
   isLoading: e,
-  isDisabled: o,
-  label: c,
-  iconLeft: m,
+  isDisabled: t,
+  label: u,
+  iconLeft: p,
   iconRight: a,
-  href: p,
+  href: v,
   target: w,
-  shouldCloseOnClick: r = !0,
-  decorators: i = [],
-  submenu: u,
-  className: d,
-  onClick: s,
-  ...v
+  shouldCloseOnClick: o = !0,
+  decorators: r = [],
+  submenu: s,
+  className: c,
+  onClick: f,
+  ...h
 }) {
   const {
-    isVisible: y,
-    isPreparingFocus: j,
-    isFocused: t,
+    isVisible: j,
+    isPreparingFocus: d,
+    isFocused: i,
     close: k
-  } = A(), {
-    isKeyboardNavigating: f
-  } = z(), x = B(!0), N = P(() => {
-    x.current = t;
-  }, [t]), g = P((C) => {
-    !f && !x.current || t && (s == null || s(C), u ? u.show() : r && (k == null || k()));
-  }, [f, t, s, u, r, k]), l = !y && !j || !!e || !!o, h = p !== void 0 && !e, M = b(() => /* @__PURE__ */ n.jsxs(q, { as: h ? "a" : "button", ...v, "aria-disabled": h && l ? !0 : void 0, type: h ? void 0 : "button", role: "menuitem", href: e ? void 0 : p, target: h ? w : void 0, inert: h ? l : void 0, disabled: h ? void 0 : l, className: I(H, "kakadu-components-1772835671", t && "kakadu-components-3160069815", f ? "kakadu-components-2254977234" : t && !l && "kakadu-components-278139688", l && "kakadu-components-1879666195", d), onClick: l ? void 0 : g, onPointerDownCapture: l ? void 0 : N, children: [
-    /* @__PURE__ */ n.jsxs(K, { className: I("kakadu-components-1377252111", e ? "kakadu-components-2409458488" : l && "kakadu-components-532828420"), children: [
-      m ? e ? /* @__PURE__ */ n.jsx(S, { size: 12 }) : /* @__PURE__ */ n.jsx(E, { width: 12, height: 12, type: m }) : null,
-      /* @__PURE__ */ n.jsxs("span", { className: I("kakadu-components-1590676894", e && "kakadu-components-743909038"), children: [
+  } = K(), {
+    isKeyboardNavigating: m
+  } = z(), I = B(!0), N = b(() => {
+    I.current = i;
+  }, [i]), g = b((C) => {
+    !m && !I.current || i && (f == null || f(C), s ? s.show() : o && (k == null || k()));
+  }, [m, i, f, s, o, k]), l = !j && !d || !!e || !!t, x = v !== void 0 && !e, M = y(() => /* @__PURE__ */ n.jsxs(J, { as: x ? "a" : "button", ...h, "aria-disabled": x && l ? !0 : void 0, type: x ? void 0 : "button", role: "menuitem", href: e ? void 0 : v, target: x ? w : void 0, inert: x ? l : void 0, disabled: x ? void 0 : l, className: P(H, "kakadu-components-1772835671", i && "kakadu-components-3160069815", m ? "kakadu-components-2254977234" : i && !l && "kakadu-components-278139688", l && "kakadu-components-1879666195", c), onClick: l ? void 0 : g, onPointerDownCapture: l ? void 0 : N, children: [
+    /* @__PURE__ */ n.jsxs(A, { className: P("kakadu-components-1377252111", e ? "kakadu-components-2409458488" : l && "kakadu-components-532828420"), children: [
+      p ? e ? /* @__PURE__ */ n.jsx(S, { size: 12 }) : /* @__PURE__ */ n.jsx(E, { width: 12, height: 12, type: p }) : null,
+      /* @__PURE__ */ n.jsxs("span", { className: P("kakadu-components-1590676894", e && "kakadu-components-743909038"), children: [
         e ? /* @__PURE__ */ n.jsx(D, { "aria-hidden": !0, width: "100%", className: "kakadu-components-3950955262" }) : null,
-        /* @__PURE__ */ n.jsx("span", { className: e ? "kakadu-components-543569100" : void 0, children: c })
+        /* @__PURE__ */ n.jsx("span", { className: e ? "kakadu-components-543569100" : void 0, children: u })
       ] }),
-      a ? e ? m ? /* @__PURE__ */ n.jsx(D, { width: 12, height: 12 }) : /* @__PURE__ */ n.jsx(S, { size: 12 }) : /* @__PURE__ */ n.jsx(E, { width: 12, height: 12, type: a }) : null
+      a ? e ? p ? /* @__PURE__ */ n.jsx(D, { width: 12, height: 12 }) : /* @__PURE__ */ n.jsx(S, { size: 12 }) : /* @__PURE__ */ n.jsx(E, { width: 12, height: 12, type: a }) : null
     ] }),
-    f || l ? null : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-      /* @__PURE__ */ n.jsx(Q, { isActive: t, size: 100 }),
-      /* @__PURE__ */ n.jsx(J, { isActive: t, size: 150, className: O })
+    m || l ? null : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+      /* @__PURE__ */ n.jsx(W, { isActive: i, size: 100 }),
+      /* @__PURE__ */ n.jsx(O, { isActive: i, size: 150, className: Q })
     ] })
-  ] }), [h, v, l, p, e, w, d, t, f, g, N, m, c, a]);
-  return /* @__PURE__ */ n.jsx(X, { decorators: i, children: u ? /* @__PURE__ */ n.jsx(L, { menu: u.popoverMenu, className: "kakadu-components-1861176543", children: M }) : M });
+  ] }), [x, h, l, v, e, w, c, i, m, g, N, p, u, a]);
+  return /* @__PURE__ */ n.jsx(Y, { decorators: r, children: s ? /* @__PURE__ */ n.jsx(ne, { menu: s.popoverMenu, className: "kakadu-components-1861176543", children: M }) : M });
 }
-function Z(e) {
+function $(e) {
   if ("type" in e) {
     if (e.type === "separator")
-      return /* @__PURE__ */ n.jsx(W, {});
+      return /* @__PURE__ */ n.jsx(X, {});
     if (e.type === "group")
-      return /* @__PURE__ */ n.jsx(K, { className: "kakadu-components-1499037363", children: e.label });
+      return /* @__PURE__ */ n.jsx(A, { className: "kakadu-components-1499037363", children: e.label });
   }
-  return /* @__PURE__ */ n.jsx(Y, { ...e });
+  return /* @__PURE__ */ n.jsx(_, { ...e });
 }
-function _({
+function L({
   items: e
 }) {
   const {
-    isFocused: o
-  } = A(), [c, m] = F([]), {
+    isFocused: t
+  } = K(), [u, p] = F([]), {
     setIsKeyboardNavigating: a
-  } = z(), p = P((r) => {
-    r && m((i) => i.includes(r) ? i : [...i, r]);
-  }, []), w = P((r) => {
-    o && (r.currentTarget.focus(), a(!1));
-  }, [o, a]);
+  } = z(), v = b((o) => {
+    o && p((r) => r.includes(o) ? r : [...r, o]);
+  }, []), w = b((o) => {
+    t && (o.currentTarget.focus(), a(!1));
+  }, [t, a]);
   return V(() => {
-    if (!o)
-      return;
-    const r = (i) => {
-      const u = c.filter((t) => t.isConnected), d = u.length;
-      if (d === 0)
-        return;
-      let s, v = 1;
-      const y = document.activeElement;
-      let j = y ? u.indexOf(y) : -1;
-      switch (j === -1 && (j = 0), i.key) {
-        case "ArrowUp":
-          v = -1;
-        // eslint-disable-next-line no-fallthrough
-        case "ArrowDown": {
-          s = (j + v + d) % d;
-          break;
-        }
-        case "Home": {
-          s = 0;
-          break;
-        }
-        case "End": {
-          s = d - 1, v = -1;
-          break;
-        }
-        case "Tab": {
-          a(!0);
+    if (t)
+      return Z((o) => {
+        const r = u.filter((d) => d.isConnected), s = r.length;
+        if (s === 0)
           return;
+        let c, f = 1;
+        const h = document.activeElement;
+        let j = h ? r.indexOf(h) : -1;
+        switch (j === -1 && (j = 0), o.key) {
+          case "ArrowUp":
+            f = -1;
+          // eslint-disable-next-line no-fallthrough
+          case "ArrowDown": {
+            c = (j + f + s) % s;
+            break;
+          }
+          case "Home": {
+            c = 0;
+            break;
+          }
+          case "End": {
+            c = s - 1, f = -1;
+            break;
+          }
+          case "Tab": {
+            a(!0);
+            return;
+          }
         }
-      }
-      if (s !== void 0) {
-        i.preventDefault(), i.stopPropagation();
-        let t = u[s];
-        if (t) {
-          let k = 0;
-          const f = (x) => "disabled" in x && x.disabled || "inert" in x && x.inert;
-          for (; f(t) && k < d; )
-            s = (s + v + d) % d, t = u[s], k += 1;
-          t && !f(t) && (t.focus(), a(!0));
+        if (c !== void 0) {
+          o.preventDefault(), o.stopPropagation();
+          let d = r[c];
+          if (d) {
+            let i = 0;
+            const k = (m) => "disabled" in m && m.disabled || "inert" in m && m.inert;
+            for (; k(d) && i < s; )
+              c = (c + f + s) % s, d = r[c], i += 1;
+            d && !k(d) && (d.focus(), a(!0));
+          }
         }
-      }
-    };
-    return window.addEventListener("keydown", r, {
-      capture: !0
-    }), () => {
-      window.removeEventListener("keydown", r, {
-        capture: !0
       });
-    };
-  }, [o, c, a]), /* @__PURE__ */ n.jsx(n.Fragment, { children: e.map((r, i) => /* @__PURE__ */ n.jsx(
-    Z,
+  }, [t, u, a]), /* @__PURE__ */ n.jsx(n.Fragment, { children: e.map((o, r) => /* @__PURE__ */ n.jsx(
+    $,
     {
-      ...r,
-      reference: p,
+      ...o,
+      reference: v,
       onMouseEnter: w
     },
-    i
+    r
   )) });
 }
-function $({
+function ee({
   items: e,
-  ...o
+  ...t
 }) {
-  return /* @__PURE__ */ n.jsx(T, { ...o, as: "nav", role: "menu", innerClassName: "kakadu-components-3600436535", children: /* @__PURE__ */ n.jsx(_, { items: e }) });
+  return /* @__PURE__ */ n.jsx(G, { ...t, as: "nav", role: "menu", innerClassName: "kakadu-components-3600436535", children: /* @__PURE__ */ n.jsx(L, { items: e }) });
 }
-function ke(e) {
-  const o = b(() => ({
+function je(e) {
+  const t = y(() => ({
     items: e
   }), [e]), {
-    isVisible: c,
-    show: m,
+    isVisible: u,
+    show: p,
     close: a,
-    popover: p
-  } = U($, o);
-  return b(() => ({
-    isVisible: c,
-    show: m,
+    popover: v
+  } = q(ee, t);
+  return y(() => ({
+    isVisible: u,
+    show: p,
     close: a,
-    popoverMenu: p
-  }), [c, m, a, p]);
+    popoverMenu: v
+  }), [u, p, a, v]);
 }
-function L({
+function ne({
   menu: e,
-  className: o,
-  children: c
+  className: t,
+  children: u
 }) {
-  return /* @__PURE__ */ n.jsxs(G, { className: o, children: [
-    c,
+  return /* @__PURE__ */ n.jsxs(U, { className: t, children: [
+    u,
     e
   ] });
 }
 export {
-  ve as dangerPopoverMenuItemStyles,
-  L as default,
-  ke as usePopoverMenu
+  he as dangerPopoverMenuItemStyles,
+  ne as default,
+  je as usePopoverMenu
 };

package/build/components/popover.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType } from 'react';
+import React, { type ComponentType } from 'react';
 import { type AtomElementType, type AtomProperties, type DefaultAtomElementType } from './atom';
 type InitialFocusElement = HTMLElement | null;
 type PopoverProviderProperties<Data = any> = {
@@ -9,7 +9,7 @@ type PopoverProviderProperties<Data = any> = {
     close?: (data?: Data) => void;
 };
 export declare function usePopoverContext<Data = any>(): PopoverProviderProperties<Data>;
-export declare function PopoverContainer<Type extends AtomElementType = DefaultAtomElementType>({ as, className, ...properties }: AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverContainer<Type extends AtomElementType = DefaultAtomElementType>({ as, className, ...properties }: AtomProperties<Type>): React.JSX.Element;
 export type PopoverProperties<Data = any, Type extends AtomElementType = DefaultAtomElementType> = AtomProperties<Type> & {
     readonly innerClassName?: string;
     readonly label?: string;
@@ -20,11 +20,11 @@ export type PopoverProperties<Data = any, Type extends AtomElementType = Default
     readonly onClose?: (data?: Data) => void;
 };
 type PopoverBaseProperties<PopoverResult> = Omit<PopoverProperties<PopoverResult>, 'isVisible' | 'onClose'>;
-export default function Popover<Data = any, Type extends AtomElementType = DefaultAtomElementType>({ as, isVisible, label, shouldCloseOnOutsideClick, shouldCloseOnEscapePress, children, className, innerClassName, onClose, ...properties }: PopoverProperties<Data, Type>): import("react/jsx-runtime").JSX.Element | null;
+export default function Popover<Data = any, Type extends AtomElementType = DefaultAtomElementType>({ as, isVisible, label, shouldCloseOnOutsideClick, shouldCloseOnEscapePress, children, className, innerClassName, onClose, ...properties }: PopoverProperties<Data, Type>): React.JSX.Element | null;
 export declare function usePopover<PopoverResult, PopoverProperties = PopoverBaseProperties<PopoverResult>>(PopoverComponent: ComponentType<PopoverProperties>, properties?: PopoverProperties): {
     isVisible: boolean;
     show: () => Promise<PopoverResult | undefined>;
     close: (result?: PopoverResult) => void;
-    popover: import("react/jsx-runtime").JSX.Element | null;
+    popover: React.JSX.Element | null;
 };
 export {};

package/build/components/popover.js

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