@kakadu/components 3.1.3 → 3.1.4

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

@@ -1,4 +1,4 @@
-import { type FocusEvent, type MouseEvent, type ReactNode, type Ref } from 'react';
+import { type MouseEvent, type ReactNode, type Ref } from 'react';
 import { type IconType } from '../icons/icon';
 import { type DecoratorType } from './decorators';
 type PopoverMenuItemElementType = HTMLButtonElement | HTMLAnchorElement;
@@ -18,7 +18,6 @@ export type PopoverMenuItemProperties = {
     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[]): {

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

package/build/components/popover-menu.mjs

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

package/package.json

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