@telefonica/mistica 14.26.0 → 14.27.0

package/dist-es/menu.js

@@ -51,15 +51,15 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsx as e, jsxs as C, Fragment as U } from "react/jsx-runtime";
-import * as n from "react";
+import * as o from "react";
 import ne from "classnames";
 import { TAB as oe, ENTER as W, SPACE as G, ESC as se, UP as re, LEFT as ie, DOWN as K, RIGHT as ce } from "./utils/key-codes.js";
 import { getPrefixedDataAttributes as le, cancelEvent as S } from "./utils/dom.js";
 import ae from "./overlay.js";
-import { menuItem as me, menuItemEnabled as ue, menuItemDisabled as de, menuItemHovered as fe, menuSectionDivider as pe, menuTransitionClasses as he, vars as I, itemContent as Y, iconContainer as j, menuContainer as ge } from "./menu.css-mistica.js";
+import { menuItem as ue, menuItemEnabled as me, menuItemDisabled as de, menuItemHovered as fe, menuSectionDivider as pe, menuTransitionClasses as he, vars as b, itemContent as Y, iconContainer as j, menuContainer as ge } from "./menu.css-mistica.js";
 import { useWindowSize as xe } from "./hooks.js";
-import { Portal as Ie } from "./portal.js";
-import { assignInlineVars as be } from "@vanilla-extract/dynamic";
+import { Portal as be } from "./portal.js";
+import { assignInlineVars as Ie } from "@vanilla-extract/dynamic";
 import y from "./box.js";
 import ve from "./inline.js";
 import Me from "./touchable.js";
@@ -69,25 +69,25 @@ import Oe from "./divider.js";
 import Te from "./checkbox.js";
 import { CSSTransition as Se } from "react-transition-group";
 import { combineRefs as Ce } from "./utils/common.js";
-const Ee = 120, Q = /*#__PURE__*/ n.createContext({
+const Ee = 120, Q = /*#__PURE__*/ o.createContext({
     focusedItem: null,
     isMenuOpen: !1,
     setFocusedItem: ()=>{},
     closeMenu: ()=>{}
-}), ke = ()=>n.useContext(Q), D = (r)=>r ? Array.from(r.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Ne = (r, d)=>{
+}), ke = ()=>o.useContext(Q), D = (r)=>r ? Array.from(r.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Ne = (r, d)=>{
     if (!d) return null;
     const f = D(r).indexOf(d);
     return f < 0 ? null : f;
 }, je = (param)=>{
-    let { label: r , Icon: d , destructive: f , disabled: m , onPress: E , controlType: o , checked: p  } = param;
-    const { focusedItem: s , setFocusedItem: v , closeMenu: i , isMenuOpen: k  } = ke(), c = n.useRef(null), h = f ? q.colors.textLinkDanger : q.colors.neutralHigh, x = c == null ? void 0 : c.current, M = (x == null ? void 0 : x.closest("[role=menu]")) || null, u = Ne(M, x), l = ()=>o === "checkbox" ? /* @__PURE__ */ e(Te, {
+    let { label: r , Icon: d , destructive: f , disabled: u , onPress: E , controlType: s , checked: p  } = param;
+    const { focusedItem: n , setFocusedItem: v , closeMenu: i , isMenuOpen: k  } = ke(), c = o.useRef(null), h = f ? q.colors.textLinkDanger : q.colors.neutralHigh, x = c == null ? void 0 : c.current, M = (x == null ? void 0 : x.closest("[role=menu]")) || null, m = Ne(M, x), l = ()=>s === "checkbox" ? /* @__PURE__ */ e(Te, {
             ref: c,
             name: r,
             checked: p,
             onChange: ()=>{
-                k && u !== null && (E(u), i());
+                k && m !== null && (E(m), i());
             },
-            disabled: m,
+            disabled: u,
             role: "menuitemcheckbox",
             render: (param)=>/* @__PURE__ */ {
                 let { controlElement: N  } = param;
@@ -126,9 +126,9 @@ const Ee = 120, Q = /*#__PURE__*/ n.createContext({
         }) : /* @__PURE__ */ e(Me, {
             ref: c,
             onPress: ()=>{
-                k && u !== null && (E(u), i());
+                k && m !== null && (E(m), i());
             },
-            disabled: m,
+            disabled: u,
             role: "menuitem",
             children: /* @__PURE__ */ e(y, {
                 paddingX: 8,
@@ -153,12 +153,12 @@ const Ee = 120, Q = /*#__PURE__*/ n.createContext({
             })
         });
     return /* @__PURE__ */ e("div", {
-        className: ne(me, {
-            [ue]: !m,
-            [de]: m,
-            [fe]: !m && u !== null && s === u
+        className: ne(ue, {
+            [me]: !u,
+            [de]: u,
+            [fe]: !u && m !== null && n === m
         }),
-        onMouseMove: ()=>v(m ? null : u),
+        onMouseMove: ()=>v(u ? null : m),
         onMouseLeave: ()=>v(null),
         children: l()
     });
@@ -175,75 +175,75 @@ const Ee = 120, Q = /*#__PURE__*/ n.createContext({
         ]
     }) : /* @__PURE__ */ e(U, {});
 }, V = 12, J = 8, qe = (param)=>{
-    let { renderTarget: r , renderMenu: d , width: f , position: m = "left" , dataAttributes: E  } = param;
-    const [o, p] = n.useState(!1), [s, v] = n.useState(null), [i, k] = n.useState(null), [c, h] = n.useState(null), [x, M] = n.useState(!1), u = n.useRef(null), [l, N] = n.useState(null), R = xe();
-    n.useEffect(()=>{
-        const a = s == null ? void 0 : s.getBoundingClientRect();
-        if (!i || !a || !o) return;
-        const { top: t , right: O , left: g , bottom: F  } = a, T = i.scrollHeight, b = m === "left" ? g : void 0, A = m === "right" ? R.width - O : void 0, L = t - J, $ = F + J, H = R.height - $ - V, P = L - V, B = H > T, z = P > T, te = B || !z && H > P;
+    let { renderTarget: r , renderMenu: d , width: f , position: u = "left" , dataAttributes: E  } = param;
+    const [s, p] = o.useState(!1), [n, v] = o.useState(null), [i, k] = o.useState(null), [c, h] = o.useState(null), [x, M] = o.useState(!1), m = o.useRef(null), [l, N] = o.useState(null), R = xe();
+    o.useEffect(()=>{
+        const a = n == null ? void 0 : n.getBoundingClientRect();
+        if (!i || !a || !s) return;
+        const { top: t , right: O , left: g , bottom: A  } = a, T = i.scrollHeight, I = u === "left" ? g : void 0, F = u === "right" ? R.width - O : void 0, L = t - J, $ = A + J, H = R.height - $ - V, P = L - V, B = H > T, z = P > T, te = B || !z && H > P;
         N(te ? {
-            left: b,
-            right: A,
+            left: I,
+            right: F,
             top: `${$}px`,
             bottom: "auto",
             maxHeight: B ? void 0 : H,
             transformOrigin: "center top"
         } : {
-            left: b,
-            right: A,
+            left: I,
+            right: F,
             top: "auto",
             bottom: `${R.height - L}px`,
             maxHeight: z ? void 0 : P,
             transformOrigin: "center bottom"
         });
     }, [
-        m,
-        o,
-        i,
+        u,
         s,
+        i,
+        n,
         f,
         R
     ]);
-    const Z = n.useMemo(()=>({
+    const Z = o.useMemo(()=>({
             ref: v,
             onPress: ()=>{
-                p(!o);
+                p(!s);
             }
         }), [
         v,
-        o
+        s
     ]), ee = {
-        ref: Ce(k, u),
+        ref: Ce(k, m),
         className: ge,
         close: ()=>p(!1)
-    }, w = n.useCallback(()=>{
+    }, w = o.useCallback(()=>{
         const t = D(i).findIndex((O)=>!O.getAttribute("aria-disabled"));
         h(t < 0 ? null : t);
     }, [
         i
-    ]), _ = n.useCallback((a)=>{
+    ]), _ = o.useCallback((a)=>{
         var T;
         const t = D(i);
         a && t.reverse();
         const O = c === null ? -1 : a ? t.length - 1 - c : c;
-        let g = t.findIndex((b, A)=>!b.getAttribute("aria-disabled") && A > O);
-        g === -1 && (g = t.findIndex((b)=>!b.getAttribute("aria-disabled")));
-        const F = a && g !== -1 ? t.length - 1 - g : g;
-        h(F < 0 ? null : F), (T = t[g]) == null || T.focus();
+        let g = t.findIndex((I, F)=>!I.getAttribute("aria-disabled") && F > O);
+        g === -1 && (g = t.findIndex((I)=>!I.getAttribute("aria-disabled")));
+        const A = a && g !== -1 ? t.length - 1 - g : g;
+        h(A < 0 ? null : A), (T = t[g]) == null || T.focus();
     }, [
         c,
         i
     ]);
-    return n.useEffect(()=>{
-        o ? x && i && (w(), M(!1)) : h(null);
+    return o.useEffect(()=>{
+        s ? x && i && (w(), M(!1)) : h(null);
     }, [
-        o,
+        s,
         w,
         x,
         i
-    ]), n.useEffect(()=>{
+    ]), o.useEffect(()=>{
         const a = (t)=>{
-            if (o) switch(t.keyCode){
+            if (s) switch(t.keyCode){
                 case ce:
                 case K:
                     S(t), _();
@@ -269,55 +269,55 @@ const Ee = 120, Q = /*#__PURE__*/ n.createContext({
                     M(!0);
                     break;
                 case K:
-                    s === document.activeElement && (M(!0), p(!0));
+                    n === document.activeElement && (M(!0), p(!0));
                     break;
             }
         };
         return document.addEventListener("keydown", a, !1), ()=>{
             document.removeEventListener("keydown", a, !1);
         };
-    }), n.useEffect(()=>{
-        s == null || s.setAttribute("aria-expanded", String(o));
+    }), o.useEffect(()=>{
+        n == null || n.setAttribute("aria-haspopup", "menu"), n == null || n.setAttribute("aria-expanded", String(s));
     }, [
-        s,
-        o
+        n,
+        s
     ]), /* @__PURE__ */ C("div", _object_spread_props(_object_spread({}, le(E, "Menu")), {
         children: [
             r(_object_spread_props(_object_spread({}, Z), {
-                isMenuOpen: o
+                isMenuOpen: s
             })),
-            /* @__PURE__ */ e(Ie, {
+            /* @__PURE__ */ e(be, {
                 children: /* @__PURE__ */ e(Se, {
-                    in: o,
-                    nodeRef: u,
+                    in: s,
+                    nodeRef: m,
                     timeout: Ee,
                     classNames: he,
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    onExit: ()=>s == null ? void 0 : s.focus(),
+                    onExit: ()=>n == null ? void 0 : n.focus(),
                     children: /* @__PURE__ */ e(ae, {
                         onPress: (a)=>{
                             S(a), p(!1);
                         },
                         disableScroll: !0,
                         children: /* @__PURE__ */ e("div", {
-                            style: _object_spread({}, be(_object_spread({}, l ? _object_spread({
-                                [I.top]: l.top,
-                                [I.bottom]: l.bottom,
-                                [I.transformOrigin]: l.transformOrigin
+                            style: _object_spread({}, Ie(_object_spread({}, l ? _object_spread({
+                                [b.top]: l.top,
+                                [b.bottom]: l.bottom,
+                                [b.transformOrigin]: l.transformOrigin
                             }, l.left !== void 0 && {
-                                [I.left]: `${l.left}px`
+                                [b.left]: `${l.left}px`
                             }, l.right !== void 0 && {
-                                [I.right]: `${l.right}px`
+                                [b.right]: `${l.right}px`
                             }, l.maxHeight !== void 0 && {
-                                [I.maxHeight]: `${l.maxHeight}px`
+                                [b.maxHeight]: `${l.maxHeight}px`
                             }, f !== void 0 && {
-                                [I.width]: f ? `${f}px` : ""
+                                [b.width]: f ? `${f}px` : ""
                             }) : {}))),
                             role: "menu",
                             children: /* @__PURE__ */ e(Q.Provider, {
                                 value: {
-                                    isMenuOpen: o,
+                                    isMenuOpen: s,
                                     focusedItem: c,
                                     setFocusedItem: h,
                                     closeMenu: ()=>p(!1)

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "14.26.0";
+const o = "14.27.0";
 export { o as PACKAGE_VERSION };