@kakadu/components 4.2.0 → 4.2.1

package/build/components/modal.d.ts

@@ -30,10 +30,11 @@ export type ModalProperties<Data = any> = {
     readonly children?: ReactNode;
 };
 type ModalBaseProperties<ModalResult> = Omit<ModalProperties<ModalResult>, 'isVisible' | 'onClose'>;
-export default function Modal<Data = any>({ root, outerDecorators, innerDecorators, label, maxWidth, className, isVisible, isFullWidth, shouldCloseOnOutsideClick, shouldCloseOnEscapePress, showCloseButton, onClose, children, }: ModalProperties<Data>): import("react/jsx-runtime").JSX.Element;
+export default function Modal<Data = any>({ root, outerDecorators, innerDecorators, label, maxWidth, className, isVisible, isFullWidth, shouldCloseOnOutsideClick, shouldCloseOnEscapePress, showCloseButton, onClose, children, }: ModalProperties<Data>): import("react/jsx-runtime").JSX.Element | null;
 export declare function useModal<ModalResult, ModalProperties = ModalBaseProperties<ModalResult>>(ModalComponent: ComponentType<ModalProperties>, properties?: ModalProperties): {
     isVisible: boolean;
     show: () => Promise<ModalResult | undefined>;
-    modal: import("react/jsx-runtime").JSX.Element;
+    close: (result?: ModalResult) => void;
+    modal: import("react/jsx-runtime").JSX.Element | null;
 };
 export {};

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

package/build/components/modal.mjs

@@ -1,139 +1,146 @@
-import { j as t } from "../jsx-runtime-B4hRZ52C.mjs";
-import { createContext as q, useRef as j, useState as h, useCallback as f, useMemo as I, useEffect as m, useContext as z } from "react";
-import { cx as w } from "@kuma-ui/core";
+import { j as n } from "../jsx-runtime-B4hRZ52C.mjs";
+import { createContext as q, useRef as v, useState as j, useCallback as d, useMemo as g, useEffect as k, useContext as z } from "react";
+import { cx as E } from "@kuma-ui/core";
 import { createPortal as G } from "react-dom";
 import { f as J } from "../focus-trap-react-Dr3BYLw6.mjs";
 import K from "./text-button.mjs";
-import F from "./decorators.mjs";
-import C from "./flex.mjs";
+import A from "./decorators.mjs";
+import H from "./flex.mjs";
 import { defaultAtomElementType as Q } from "./atom.mjs";
 import { Heading as U, defaultHeadingElementType as V } from "./text.mjs";
-const A = q({
+const B = q({
   isVisible: !1,
   isInteractive: !1
 }), {
   Provider: X
-} = A;
+} = B;
 function Y() {
-  return z(A);
+  return z(B);
 }
 function Z() {
   const {
-    isInteractive: n,
-    close: o
-  } = Y(), r = f(() => {
-    o == null || o();
-  }, [o]);
-  return /* @__PURE__ */ t.jsx("div", { className: "kakadu-components-2566044647", children: /* @__PURE__ */ t.jsx(K, { iconLeft: "times", label: "Close", disabled: !n, onClick: r }) });
+    isInteractive: o,
+    close: r
+  } = Y(), s = d(() => {
+    r == null || r();
+  }, [r]);
+  return /* @__PURE__ */ n.jsx("div", { className: "kakadu-components-2566044647", children: /* @__PURE__ */ n.jsx(K, { iconLeft: "times", label: "Close", disabled: !o, onClick: s }) });
 }
-function ce(n) {
-  return /* @__PURE__ */ t.jsx(C, { gap: 2, ...n });
+function ce(o) {
+  return /* @__PURE__ */ n.jsx(H, { gap: 2, ...o });
 }
 function ie({
-  as: n,
-  className: o,
-  ...r
+  as: o,
+  className: r,
+  ...s
 }) {
-  return /* @__PURE__ */ t.jsx(U, { ...r, as: n ?? V, className: w("kakadu-components-4275938488", o) });
+  return /* @__PURE__ */ n.jsx(U, { ...s, as: o ?? V, className: E("kakadu-components-4275938488", r) });
 }
 function ue({
-  as: n,
-  ...o
+  as: o,
+  ...r
 }) {
-  return /* @__PURE__ */ t.jsx(C, { direction: "row", gap: 1, preset: "end", ...o, as: n ?? Q });
+  return /* @__PURE__ */ n.jsx(H, { direction: "row", gap: 1, preset: "end", ...r, as: o ?? Q });
 }
 function le({
-  root: n,
-  outerDecorators: o = [],
-  innerDecorators: r = [],
-  label: p,
-  maxWidth: a,
-  className: x,
-  isVisible: s,
-  isFullWidth: u = !1,
-  shouldCloseOnOutsideClick: i = !0,
-  shouldCloseOnEscapePress: l = !0,
-  showCloseButton: H = !0,
-  onClose: k,
-  children: B
+  root: o,
+  outerDecorators: r = [],
+  innerDecorators: s = [],
+  label: h,
+  maxWidth: c,
+  className: w,
+  isVisible: t,
+  isFullWidth: i = !1,
+  shouldCloseOnOutsideClick: f = !0,
+  shouldCloseOnEscapePress: m = !0,
+  showCloseButton: I = !0,
+  onClose: u,
+  children: l
 }) {
-  const E = j(null), M = j(null), [g, P] = h(!1), [c, d] = h(!1), y = f((e) => {
-    E.current = e, d(!1);
-  }, []), T = j(null), L = f((e) => {
-    e && (T.current = e);
-  }, []), [N, R] = h(s ?? !1), D = I(() => ({
-    isVisible: N,
-    isInteractive: c,
-    setInitialFocus: L,
-    close: y
-  }), [N, c, L, y]);
-  m(() => {
-    s && (P(!0), R(!0));
-  }, [s]), m(() => {
-    if (s) {
+  const M = v(null), p = v(null), [L, P] = j(!1), [a, x] = j(!1), N = d((e) => {
+    M.current = e, x(!1);
+  }, []), R = v(null), b = d((e) => {
+    e && (R.current = e);
+  }, []), [y, F] = j(t ?? !1), D = g(() => ({
+    isVisible: y,
+    isInteractive: a,
+    setInitialFocus: b,
+    close: N
+  }), [y, a, b, N]);
+  k(() => {
+    if (t) {
       const e = setTimeout(() => {
-        d(!0);
+        x(!0);
       }, 100);
       return () => {
         clearTimeout(e);
       };
     }
-    d(!1);
-  }, [s]), m(() => {
-    if (g && !c) {
-      const e = setTimeout(() => {
-        k == null || k(E.current ?? void 0), R(!1);
-      }, 370);
-      return () => {
-        clearTimeout(e);
-      };
-    }
-  }, [g, c, k]), m(() => {
-    const e = M.current;
-    if (s && i && e) {
-      const v = ($) => {
-        e === $.target && d(!1);
+    x(!1);
+  }, [t]), k(() => {
+    t && (P(!0), F(!0));
+  }, [t]), k(() => {
+    const e = p.current;
+    if (t && f && e) {
+      const T = ($) => {
+        e === $.target && x(!1);
       };
-      return e.addEventListener("click", v), () => {
-        e.removeEventListener("click", v);
+      return e.addEventListener("click", T), () => {
+        e.removeEventListener("click", T);
       };
     }
-  }, [s, i]), m(() => {
-    if (!s || !l)
+  }, [t, f]), k(() => {
+    if (!t || !m)
       return;
-    const e = (v) => {
-      v.key === "Escape" && d(!1);
+    const e = (T) => {
+      T.key === "Escape" && x(!1);
     };
     return window.addEventListener("keydown", e), () => {
       window.removeEventListener("keydown", e);
     };
-  }, [s, l]);
-  const S = I(() => ({
-    initialFocus: () => T.current ?? void 0,
+  }, [t, m]), k(() => {
+    if (L && !a) {
+      const e = setTimeout(() => {
+        F(!1), u == null || u(M.current ?? void 0);
+      }, 370);
+      return () => {
+        clearTimeout(e);
+      };
+    }
+  }, [L, a, u]);
+  const S = g(() => ({
+    initialFocus: () => R.current ?? void 0,
     onActivate: () => {
       var e;
-      return (e = T.current) == null ? void 0 : e.focus();
+      return (e = R.current) == null ? void 0 : e.focus();
     }
-  }), []), b = /* @__PURE__ */ t.jsx(F, { decorators: o, children: /* @__PURE__ */ t.jsx("div", { "aria-hidden": !c, style: {
-    "--max-width": a ? `${a}px` : void 0
-  }, className: w("kakadu-components-4119461136", c && "kakadu-components-2522346797", x), children: /* @__PURE__ */ t.jsx(F, { decorators: r, children: /* @__PURE__ */ t.jsx(J.FocusTrap, { active: c, focusTrapOptions: S, children: /* @__PURE__ */ t.jsx("div", { ref: M, className: "kakadu-components-4011815997", children: /* @__PURE__ */ t.jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": p ?? "Modal", className: w("kakadu-components-3324483532", u && "kakadu-components-3799971070", c && "kakadu-components-968755580"), children: /* @__PURE__ */ t.jsxs(X, { value: D, children: [
-    H ? /* @__PURE__ */ t.jsx(Z, {}) : null,
-    /* @__PURE__ */ t.jsx("div", { className: w("kakadu-components-633990035", u && "kakadu-components-171969824"), children: B })
+  }), []);
+  if (!y)
+    return null;
+  const C = /* @__PURE__ */ n.jsx(A, { decorators: r, children: /* @__PURE__ */ n.jsx("div", { "aria-hidden": !a, style: {
+    "--max-width": c ? `${c}px` : void 0
+  }, className: E("kakadu-components-4119461136", a && "kakadu-components-2522346797", w), children: /* @__PURE__ */ n.jsx(A, { decorators: s, children: /* @__PURE__ */ n.jsx(J.FocusTrap, { active: a, focusTrapOptions: S, children: /* @__PURE__ */ n.jsx("div", { ref: p, className: "kakadu-components-4011815997", children: /* @__PURE__ */ n.jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": h ?? "Modal", className: E("kakadu-components-3324483532", i && "kakadu-components-3799971070", a && "kakadu-components-968755580"), children: /* @__PURE__ */ n.jsxs(X, { value: D, children: [
+    I ? /* @__PURE__ */ n.jsx(Z, {}) : null,
+    /* @__PURE__ */ n.jsx("div", { className: E("kakadu-components-633990035", i && "kakadu-components-171969824"), children: l })
   ] }) }) }) }) }) }) });
-  return n ? G(b, n) : b;
+  return o ? G(C, o) : C;
 }
-function de(n, o) {
-  const [r, p] = h(!1), a = j(void 0), x = f(async () => (p(!0), new Promise((i) => {
-    a.current = i;
-  })), []), s = f((i) => {
-    var l;
-    p(!1), (l = a.current) == null || l.call(a, i), a.current = void 0;
-  }, []), u = I(() => /* @__PURE__ */ t.jsx(n, { ...o, isVisible: r, onClose: s }), [n, o, r, s]);
-  return I(() => ({
-    isVisible: r,
-    show: x,
+function de(o, r) {
+  const [s, h] = j(!1), [c, w] = j(!1), t = v(void 0), i = v(void 0), f = d(async () => (i.current = void 0, h(!0), w(!0), new Promise((l) => {
+    t.current = l;
+  })), []), m = d((l) => {
+    i.current = l, w(!1);
+  }, []), I = d((l) => {
+    var p;
+    const M = l ?? i.current;
+    i.current = void 0, (p = t.current) == null || p.call(t, M), t.current = void 0, h(!1);
+  }, []), u = g(() => s ? /* @__PURE__ */ n.jsx(o, { ...r, isVisible: c, onClose: I }) : null, [s, o, r, c, I]);
+  return g(() => ({
+    isVisible: c,
+    show: f,
+    close: m,
     modal: u
-  }), [r, x, u]);
+  }), [c, f, m, u]);
 }
 export {
   ue as ModalActions,

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

@@ -27,7 +27,7 @@ export declare function usePopoverMenu(items: PopoverMenuItemProperties[]): {
     isVisible: boolean;
     show: () => Promise<void | undefined>;
     close: (result?: void | undefined) => void;
-    popoverMenu: import("react/jsx-runtime").JSX.Element;
+    popoverMenu: import("react/jsx-runtime").JSX.Element | null;
 };
 export type PopoverMenuProperties = {
     readonly menu: ReactNode;

package/build/components/popover.d.ts

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

package/build/components/popover.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kakadu/components",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "Kakadu components library",
   "license": "MIT",
   "main": "./build/index.js",