@telefonica/mistica 16.2.0 → 16.3.1

package/dist-es/menu.js

@@ -57,13 +57,13 @@ 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/keys.js";
 import { getPrefixedDataAttributes as le, cancelEvent as S } from "./utils/dom.js";
 import ae from "./overlay.js";
-import { menuItem as ue, menuItemEnabled as me, menuItemDisabled as fe, menuItemHovered as de, menuSectionDivider as pe, menuTransitionClasses as he, vars as b, itemContent as Y, iconContainer as j, menuContainer as ge } from "./menu.css-mistica.js";
+import { menuItem as ue, menuItemEnabled as me, menuItemDisabled as fe, menuItemHovered as de, menuSectionDivider as pe, menuTransitionClasses as he, vars as b, itemContent as j, iconContainer as X, menuContainer as ge } from "./menu.css-mistica.js";
 import { useWindowSize as xe } from "./hooks.js";
 import { Portal as be } from "./portal.js";
-import y from "./box.js";
+import P from "./box.js";
 import Ie from "./inline.js";
 import ve from "./touchable.js";
-import { Text3 as X } from "./text.js";
+import { Text3 as Y } from "./text.js";
 import { vars as q } from "./skins/skin-contract.css-mistica.js";
 import Me from "./divider.js";
 import Oe from "./checkbox.js";
@@ -76,9 +76,9 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
     isMenuOpen: !1,
     setFocusedItem: ()=>{},
     closeMenu: ()=>{}
-}), Ne = ()=>o.useContext(Q), D = (r)=>r ? Array.from(r.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Re = (r, f)=>{
+}), Ne = ()=>o.useContext(Q), y = (r)=>r ? Array.from(r.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Re = (r, f)=>{
     if (!f) return null;
-    const d = D(r).indexOf(f);
+    const d = y(r).indexOf(f);
     return d < 0 ? null : d;
 }, qe = (param)=>{
     let { label: r, Icon: f, destructive: d, disabled: u, onPress: C, controlType: s, checked: p } = param;
@@ -93,7 +93,7 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
             role: "menuitemcheckbox",
             render: (param)=>{
                 let { controlElement: N } = param;
-                return /* @__PURE__ */ e(y, {
+                return /* @__PURE__ */ e(P, {
                     paddingX: 8,
                     paddingY: 12,
                     children: /* @__PURE__ */ E(Ie, {
@@ -101,23 +101,23 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
                         alignItems: "center",
                         children: [
                             /* @__PURE__ */ E("div", {
-                                className: Y,
+                                className: j,
                                 children: [
                                     f && /* @__PURE__ */ e("div", {
-                                        className: j,
+                                        className: X,
                                         children: /* @__PURE__ */ e(f, {
                                             size: 24,
                                             color: h
                                         })
                                     }),
-                                    /* @__PURE__ */ e(X, {
+                                    /* @__PURE__ */ e(Y, {
                                         regular: !0,
                                         color: h,
                                         children: r
                                     })
                                 ]
                             }),
-                            /* @__PURE__ */ e(y, {
+                            /* @__PURE__ */ e(P, {
                                 paddingLeft: 16,
                                 children: N
                             })
@@ -132,20 +132,20 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
             },
             disabled: u,
             role: "menuitem",
-            children: /* @__PURE__ */ e(y, {
+            children: /* @__PURE__ */ e(P, {
                 paddingX: 8,
                 paddingY: 12,
                 children: /* @__PURE__ */ E("div", {
-                    className: Y,
+                    className: j,
                     children: [
                         f && /* @__PURE__ */ e("div", {
-                            className: j,
+                            className: X,
                             children: /* @__PURE__ */ e(f, {
                                 size: 24,
                                 color: h
                             })
                         }),
-                        /* @__PURE__ */ e(X, {
+                        /* @__PURE__ */ e(Y, {
                             regular: !0,
                             color: h,
                             children: r
@@ -169,8 +169,7 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
     return r ? /* @__PURE__ */ E(U, {
         children: [
             r,
-            /* @__PURE__ */ e(y, {
-                paddingY: 8,
+            /* @__PURE__ */ e("div", {
                 className: pe,
                 children: /* @__PURE__ */ e(Me, {})
             })
@@ -182,20 +181,20 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
     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;
+        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, D = R.height - $ - V, H = L - V, B = D > T, z = H > T, te = B || !z && D > H;
         N(te ? {
             left: I,
             right: F,
             top: `${$}px`,
             bottom: "auto",
-            maxHeight: B ? void 0 : H,
+            maxHeight: B ? void 0 : D,
             transformOrigin: "center top"
         } : {
             left: I,
             right: F,
             top: "auto",
             bottom: `${R.height - L}px`,
-            maxHeight: z ? void 0 : P,
+            maxHeight: z ? void 0 : H,
             transformOrigin: "center bottom"
         });
     }, [
@@ -219,13 +218,13 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
         className: ge,
         close: ()=>p(!1)
     }, w = o.useCallback(()=>{
-        const t = D(i).findIndex((O)=>!O.getAttribute("aria-disabled"));
+        const t = y(i).findIndex((O)=>!O.getAttribute("aria-disabled"));
         h(t < 0 ? null : t);
     }, [
         i
     ]), _ = o.useCallback((a)=>{
         var T;
-        const t = D(i);
+        const t = y(i);
         a && t.reverse();
         const O = c === null ? -1 : a ? t.length - 1 - c : c;
         let g = t.findIndex((I, F)=>!I.getAttribute("aria-disabled") && F > O);
@@ -259,7 +258,7 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
                     break;
                 case G:
                 case W:
-                    S(t), c !== null && D(i)[c].click();
+                    S(t), c !== null && y(i)[c].click();
                     break;
                 case oe:
                     S(t);

package/dist-es/package-version.js

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

package/dist-es/sheet-common.js

@@ -81,16 +81,16 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as e, jsxs as g, Fragment as L } from "react/jsx-runtime";
 import T from "classnames";
 import * as t from "react";
-import { transitionDuration as k, overlay as w, closingOverlay as x, SheetContainer as A, closingSheet as M, Sheet as C, SheetContent as P, handleContainer as Y, handle as _, children as O, modalCloseButton as G, stickyTitle as j, bodyContent as F, stickyButtons as H } from "./sheet-common.css-mistica.js";
+import { transitionDuration as k, overlay as x, closingOverlay as w, SheetContainer as A, closingSheet as M, Sheet as C, SheetContent as P, handleContainer as Y, handle as _, children as O, modalCloseButton as G, stickyTitle as j, bodyContent as F, stickyButtons as H } from "./sheet-common.css-mistica.js";
 import V from "./focus-trap.js";
 import { useTheme as $, useDisableBodyScroll as z, useIsInViewport as y, useScreenSize as K } from "./hooks.js";
 import { useSetModalStateEffect as X } from "./modal-context-provider.js";
 import { Portal as q } from "./portal.js";
 import { Text5 as J, Text3 as Q, Text2 as D } from "./text.js";
 import { vars as b } from "./skins/skin-contract.css-mistica.js";
-import B from "./stack.js";
+import I from "./stack.js";
 import E from "./box.js";
-import I from "./divider.js";
+import B from "./divider.js";
 import { getPrefixedDataAttributes as U, getScrollableParentElement as W } from "./utils/dom.js";
 import Z from "./generated/mistica-icons/icon-close-regular.js";
 import { InternalIconButton as ee } from "./icon-button.js";
@@ -186,8 +186,8 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
         children: /* @__PURE__ */ g(V, {
             children: [
                 /* @__PURE__ */ e("div", {
-                    className: T(w, {
-                        [x]: r === "closing"
+                    className: T(x, {
+                        [w]: r === "closing"
                     }),
                     style: p,
                     onClick: s
@@ -220,6 +220,7 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
                                     style: {
                                         paddingBottom: re
                                     },
+                                    tabIndex: -1,
                                     children: [
                                         typeof o == "function" ? o({
                                             closeModal: s,
@@ -249,7 +250,7 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
     mobile: ne,
     tablet: oe,
     desktop: se
-}, xe = (param)=>{
+}, we = (param)=>{
     let { title: n, subtitle: o, description: i, modalTitleId: l, button: m, secondaryButton: v, link: r, children: c } = param;
     const d = t.useRef(null), a = t.useRef(null), f = t.useRef(null);
     t.useEffect(()=>{
@@ -289,7 +290,7 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
                             desktop: 40
                         }
                     }),
-                    s && /* @__PURE__ */ e(I, {})
+                    s && /* @__PURE__ */ e(B, {})
                 ]
             }),
             /* @__PURE__ */ e("div", {
@@ -300,10 +301,10 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
                         mobile: 0
                     },
                     paddingX: R,
-                    children: /* @__PURE__ */ g(B, {
+                    children: /* @__PURE__ */ g(I, {
                         space: 8,
                         children: [
-                            o || i ? /* @__PURE__ */ g(B, {
+                            o || i ? /* @__PURE__ */ g(I, {
                                 space: {
                                     mobile: 8,
                                     desktop: 16
@@ -341,7 +342,7 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
             p && /* @__PURE__ */ g("div", {
                 className: H,
                 children: [
-                    h && /* @__PURE__ */ e(I, {}),
+                    h && /* @__PURE__ */ e(B, {}),
                     /* @__PURE__ */ e(E, {
                         paddingY: {
                             mobile: 16,
@@ -363,4 +364,4 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
         ]
     });
 }, Ae = ue;
-export { xe as SheetBody, Ae as default };
+export { we as SheetBody, Ae as default };