@kakadu/components 3.15.3 → 3.15.4

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

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

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

package/build/components/popover-menu.mjs

@@ -1,12 +1,12 @@
 import { j as e } from "../jsx-runtime-B4hRZ52C.mjs";
 import { cx as K } from "@kuma-ui/core";
-import { useMemo as k, useState as N, useCallback as x, useEffect as M, useRef as C } from "react";
+import { useMemo as k, useState as N, useCallback as v, useEffect as M, useRef as C } from "react";
 import { buttonResetStyles as D } from "../theme.mjs";
 import P from "../icons/icon.mjs";
 import z, { PopoverContainer as H, usePopover as T, usePopoverContext as S } from "./popover.mjs";
-import R from "./atom.mjs";
+import V from "./atom.mjs";
 import { Span as E } from "./text.mjs";
-import V, { normalBlendStyles as B } from "./hover-gradient.mjs";
+import R, { normalBlendStyles as B } from "./hover-gradient.mjs";
 import G from "./click-ripples.mjs";
 import U from "./separator.mjs";
 import q from "./decorators.mjs";
@@ -15,7 +15,7 @@ import { SkeletonInstance as J } from "./skeleton.mjs";
 import O from "./aria-text.mjs";
 const h = /* @__PURE__ */ new Set();
 function F() {
-  const [n, r] = N(!1), s = x((a) => {
+  const [n, r] = N(!1), s = v((a) => {
     r(a);
     for (const t of h)
       t(a);
@@ -39,7 +39,7 @@ function Q({
   iconLeft: s,
   iconRight: a,
   href: t,
-  shouldCloseOnClick: v = !0,
+  shouldCloseOnClick: d = !0,
   decorators: j = [],
   submenu: o,
   className: c,
@@ -48,16 +48,16 @@ function Q({
 }) {
   const {
     isVisible: u,
-    isPreparingFocus: d,
+    isPreparingFocus: f,
     isFocused: i,
     close: m
   } = S(), {
-    isKeyboardNavigating: f
-  } = F(), w = C(!0), y = x(() => {
+    isKeyboardNavigating: x
+  } = F(), w = C(!0), y = v(() => {
     w.current = i;
-  }, [i]), g = x((A) => {
-    !f && !w.current || i && (l == null || l(A), o ? o.show() : v && (m == null || m()));
-  }, [f, i, l, o, v, m]), I = k(() => /* @__PURE__ */ e.jsxs(R, { as: t && !n ? "a" : "button", ...p, type: t && !n ? void 0 : "button", role: "menuitem", href: t, inert: !u && !d || n, disabled: t ? void 0 : !u && !d || n, className: K(D, "kakadu-components-1772835671", i && "kakadu-components-3160069815", f ? "kakadu-components-2254977234" : i && "kakadu-components-278139688", c), onClick: g, onPointerDownCapture: y, children: [
+  }, [i]), g = v((A) => {
+    !x && !w.current || i && (l == null || l(A), o ? o.show() : d && (m == null || m()));
+  }, [x, i, l, o, d, m]), I = k(() => /* @__PURE__ */ e.jsxs(V, { as: t && !n ? "a" : "button", ...p, type: t && !n ? void 0 : "button", role: "menuitem", href: t, inert: !u && !f || n, disabled: t ? void 0 : !u && !f || n, className: K(D, "kakadu-components-1772835671", i && "kakadu-components-3160069815", x ? "kakadu-components-2254977234" : i && "kakadu-components-278139688", c), onClick: g, onPointerDownCapture: y, children: [
     /* @__PURE__ */ e.jsx(E, { className: "kakadu-components-1109353535", children: n ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx(O, { children: r }),
       s ? /* @__PURE__ */ e.jsx(b, { size: 12 }) : null,
@@ -68,11 +68,11 @@ function Q({
       /* @__PURE__ */ e.jsx("span", { className: "kakadu-components-4055589237", children: r }),
       a ? /* @__PURE__ */ e.jsx(P, { width: 12, height: 12, type: a }) : null
     ] }) }),
-    f || n ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    x || n ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx(G, { isActive: i, size: 100 }),
-      /* @__PURE__ */ e.jsx(V, { isActive: i, size: 150, className: B })
+      /* @__PURE__ */ e.jsx(R, { isActive: i, size: 150, className: B })
     ] })
-  ] }), [t, n, p, u, d, f, c, g, y, s, r, a, i]);
+  ] }), [t, n, p, u, f, x, c, g, y, s, r, a, i]);
   return /* @__PURE__ */ e.jsx(q, { decorators: j, children: o ? /* @__PURE__ */ e.jsx(Z, { menu: o.popoverMenu, className: "kakadu-components-1861176543", children: I }) : I });
 }
 function W(n) {
@@ -91,9 +91,9 @@ function X({
     isFocused: r
   } = S(), [s, a] = N([]), {
     setIsKeyboardNavigating: t
-  } = F(), v = x((o) => {
+  } = F(), d = v((o) => {
     o && a((c) => c.includes(o) ? c : [...c, o]);
-  }, []), j = x((o) => {
+  }, []), j = v((o) => {
     r && (o.currentTarget.focus(), t(!1));
   }, [r, t]);
   return M(() => {
@@ -104,8 +104,8 @@ function X({
       if (p === 0)
         return;
       let u;
-      const d = document.activeElement;
-      let i = d ? l.indexOf(d) : -1;
+      const f = document.activeElement;
+      let i = f ? l.indexOf(f) : -1;
       switch (i === -1 && (i = 0), c.key) {
         case "ArrowDown": {
           u = (i + 1) % p;
@@ -145,7 +145,7 @@ function X({
     W,
     {
       ...o,
-      reference: v,
+      reference: d,
       onMouseEnter: j
     },
     c
@@ -161,15 +161,17 @@ function de(n) {
   const r = k(() => ({
     items: n
   }), [n]), {
-    show: s,
-    close: a,
-    popover: t
+    isVisible: s,
+    show: a,
+    close: t,
+    popover: d
   } = T(Y, r);
   return k(() => ({
-    show: s,
-    close: a,
-    popoverMenu: t
-  }), [s, a, t]);
+    isVisible: s,
+    show: a,
+    close: t,
+    popoverMenu: d
+  }), [s, a, t, d]);
 }
 function Z({
   menu: n,

package/package.json

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