@telefonica/mistica 17.6.0 → 17.7.0

package/dist/sidenav-bar.js

@@ -140,7 +140,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const be = function(e) {
+const Ce = function(e) {
     let { standalone: r } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_sidenavbarfirstlevelitem.SidenavFirstLevelItem, {
         id: e.id,
@@ -157,10 +157,10 @@ const be = function(e) {
         newTab: e.newTab,
         onNavigate: e.onNavigate
     }, e.id);
-}, De = (e, r)=>(0, _sidenavbardata.getFirstLevelItems)(e).find((a)=>{
+}, Be = (e, r)=>(0, _sidenavbardata.getFirstLevelItems)(e).find((a)=>{
         var _a_children;
         return (_a_children = a.children) === null || _a_children === void 0 ? void 0 : _a_children.some((d)=>d.id === r);
-    }), xe = (e, r)=>(0, _sidenavbardata.getFirstLevelItems)(e).find((a)=>a.id === r), Jn = (e)=>{
+    }), Le = (e, r)=>(0, _sidenavbardata.getFirstLevelItems)(e).find((a)=>a.id === r), Jn = (e)=>{
     const r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), d = (u, p)=>{
         var _u_children, _u_children1;
         r.has(u.id) ? a.add(u.id) : r.add(u.id), p > 0 && ((_u_children = u.children) === null || _u_children === void 0 ? void 0 : _u_children.length) && console.error(`SidenavItem "${u.label}" at level ${p} cannot have children. SidenavItem supports maximum 2 levels of nesting. Only level 0 items can have children.`), (_u_children1 = u.children) === null || _u_children1 === void 0 ? void 0 : _u_children1.forEach((E)=>d(E, p + 1));
@@ -175,60 +175,60 @@ const be = function(e) {
                     title: r.title,
                     dividerTop: r.dividerTop && !p && !u,
                     dividerBottom: r.dividerBottom && !E,
-                    children: r.items.map((V)=>be(V))
+                    children: r.items.map((V)=>Ce(V))
                 })
             }, `${(0, _sidenavbardata.getSidenavSectionTitle)(r.title).text}-${a}`);
         }
         return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _sidenavbarcssmistica.standaloneItem,
             role: "listitem",
-            children: be(r, {
+            children: Ce(r, {
                 standalone: !0
             })
         }, r.id);
     }), Co = (param)=>{
     let { entries: e, "aria-label": r, variant: a = "default", boxed: d = !1, divider: u = !0, showCollapseButton: p = !0, collapsed: E, defaultCollapsed: V = !1, onCollapse: M, doublePanel: c = !1, width: Q = _sidenavbarcssmistica.DEFAULT_WIDTH, logo: O, headerSlot: X, footerSlot: b, fixedFooter: T = !1, background: F, selectedItemId: v, onSelectedItemIdChange: A, dataAttributes: Y } = param;
-    const { isTabletOrSmaller: Ce } = (0, _hooks.useScreenSize)(), { componentProperties: Be, texts: W, t: _ } = (0, _hooks.useTheme)(), ee = r !== null && r !== void 0 ? r : W.sidenavLandmark || _(_texttokens.sidenavLandmark), h = (0, _sidenavbarmotion.useIsMotionOff)(), Le = (0, _themevariantcontext.normalizeVariant)((0, _themevariantcontext.useThemeVariant)()), [D, f] = _react.useState(()=>{
-        var _De;
-        var _De_id;
-        return c && e && v ? (_De_id = (_De = De(e, v)) === null || _De === void 0 ? void 0 : _De.id) !== null && _De_id !== void 0 ? _De_id : null : null;
-    }), z = E !== void 0, [Ne, Oe] = _react.useState(V), s = z ? !!E : Ne, L = _react.useRef(null), ne = _react.useRef(null), [x, Te] = _react.useState(null), [oe, te] = _react.useState(s);
+    const { isTabletOrSmaller: ee } = (0, _hooks.useScreenSize)(), { componentProperties: Ne, texts: W, t: _ } = (0, _hooks.useTheme)(), ne = r !== null && r !== void 0 ? r : W.sidenavLandmark || _(_texttokens.sidenavLandmark), h = (0, _sidenavbarmotion.useIsMotionOff)(), Oe = (0, _themevariantcontext.normalizeVariant)((0, _themevariantcontext.useThemeVariant)()), [D, f] = _react.useState(()=>{
+        var _Be;
+        var _Be_id;
+        return c && e && v ? (_Be_id = (_Be = Be(e, v)) === null || _Be === void 0 ? void 0 : _Be.id) !== null && _Be_id !== void 0 ? _Be_id : null : null;
+    }), z = E !== void 0, [Te, we] = _react.useState(V), s = z ? !!E : Te, L = _react.useRef(null), oe = _react.useRef(null), [x, Pe] = _react.useState(null), [te, re] = _react.useState(s);
     _react.useEffect(()=>{
         if (h) {
-            te(s);
+            re(s);
             return;
         }
-        const o = setTimeout(()=>te(s), _sidenavbarcssmistica.COLLAPSE_DURATION_MS);
+        const o = setTimeout(()=>re(s), _sidenavbarcssmistica.COLLAPSE_DURATION_MS);
         return ()=>clearTimeout(o);
     }, [
         s,
         h
     ]);
-    const w = s ? oe ? "collapsed" : "collapsing" : oe ? "expanding" : "expanded", [re, se] = _react.useState(null), ie = _react.useCallback((o)=>{
-        c && se(o), f(null), o && (A === null || A === void 0 ? void 0 : A(o));
+    const w = s ? te ? "collapsed" : "collapsing" : te ? "expanding" : "expanded", [se, ie] = _react.useState(null), ae = _react.useCallback((o)=>{
+        c && ie(o), f(null), o && (A === null || A === void 0 ? void 0 : A(o));
     }, [
         c,
         A
-    ]), [we, Pe] = _react.useState(v);
-    if (v !== we && (Pe(v), re !== null && se(null), c && e && v && re !== v)) {
-        const o = De(e, v);
+    ]), [Re, ye] = _react.useState(v);
+    if (v !== Re && (ye(v), se !== null && ie(null), c && e && v && se !== v)) {
+        const o = Be(e, v);
         if (o) f(o.id);
         else {
             var _m_children;
-            const m = xe(e, v);
+            const m = Le(e, v);
             m && !((_m_children = m.children) === null || _m_children === void 0 ? void 0 : _m_children.length) && f(null);
         }
     }
-    const [Re, ye] = _react.useState(c);
-    c !== Re && (ye(c), c || f(null));
+    const [Ie, ke] = _react.useState(c);
+    c !== Ie && (ke(c), c || f(null));
     var _e_length;
-    const [Ie, ke] = _react.useState((_e_length = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length !== void 0 ? _e_length : 0);
+    const [Ve, Me] = _react.useState((_e_length = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length !== void 0 ? _e_length : 0);
     var _e_length1, _e_length2;
-    ((_e_length1 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length1 !== void 0 ? _e_length1 : 0) !== Ie && (ke((_e_length2 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length2 !== void 0 ? _e_length2 : 0), f(null)), _react.useEffect(()=>{
+    ((_e_length1 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length1 !== void 0 ? _e_length1 : 0) !== Ve && (Me((_e_length2 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length2 !== void 0 ? _e_length2 : 0), f(null)), _react.useEffect(()=>{
         if (!c || !D) return;
         const o = (S)=>{
-            const ve = L.current;
-            ve && (S.composedPath().includes(ve) || f(null));
+            const pe = L.current;
+            pe && (S.composedPath().includes(pe) || f(null));
         }, m = (S)=>{
             S.key === "Escape" && f(null);
         };
@@ -241,19 +241,22 @@ const be = function(e) {
     ]);
     const C = F ? {
         backgroundColor: F
-    } : void 0, [H, Ve] = _react.useState(!1), [P, Me] = _react.useState(!1), [Fe, ae] = _react.useState(!1), U = _react.useRef(null), R = _react.useRef(null), y = _react.useRef(null);
+    } : void 0, [H, le] = _react.useState(!1), [P, de] = _react.useState(!1), [Fe, ce] = _react.useState(!1), U = _react.useRef(null), R = _react.useRef(null), y = _react.useRef(null);
     _react.useEffect(()=>{
-        if (!y.current) return;
+        if (!y.current) {
+            le(!1), de(!1);
+            return;
+        }
         const o = new IntersectionObserver((param)=>{
             let [S] = param;
-            Ve(!S.isIntersecting);
+            le(!S.isIntersecting);
         }, {
             root: y.current,
             threshold: 0,
             rootMargin: "1px 0px 1px 0px"
         }), m = new IntersectionObserver((param)=>{
             let [S] = param;
-            Me(!S.isIntersecting);
+            de(!S.isIntersecting);
         }, {
             root: y.current,
             threshold: 0,
@@ -262,12 +265,14 @@ const be = function(e) {
         return U.current && o.observe(U.current), R.current && m.observe(R.current), ()=>{
             o.disconnect(), m.disconnect();
         };
-    }, []);
+    }, [
+        ee
+    ]);
     const j = (0, _sidenavbartypes.isSidenavMoving)(w), Ae = _react.useCallback(()=>{
         if (j) return;
         const o = !s;
         if (!z) {
-            Oe(o), M === null || M === void 0 ? void 0 : M(o);
+            we(o), M === null || M === void 0 ? void 0 : M(o);
             return;
         }
         M === null || M === void 0 ? void 0 : M(o);
@@ -283,7 +288,7 @@ const be = function(e) {
             doublePanel: c,
             panelOpenForItemId: D,
             setPanelOpenForItemId: f,
-            selectItemAndClosePanel: ie,
+            selectItemAndClosePanel: ae,
             containerRef: L,
             selectedItemId: v !== null && v !== void 0 ? v : null
         }), [
@@ -292,15 +297,15 @@ const be = function(e) {
         h,
         c,
         D,
-        ie,
+        ae,
         L,
         v
     ]), _e = (0, _sidenavbarkeyboard.useSidenavRailKeyboard)(L), ze = s ? _sidenavbarcssmistica.COLLAPSED_WIDTH : Q;
     process.env.NODE_ENV !== "production" && e && Jn(e);
     const i = (0, _themevariantcontext.normalizeVariant)(a);
-    if (Ce) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_sidenavbarmobile.SidenavBarMobile, {
+    if (ee) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_sidenavbarmobile.SidenavBarMobile, {
         entries: e,
-        "aria-label": ee,
+        "aria-label": ne,
         variant: i,
         logo: O,
         headerSlot: X,
@@ -312,10 +317,10 @@ const be = function(e) {
     const K = {
         collapsed: s,
         state: w
-    }, le = O === void 0 || O === !0, $ = (0, _sidenavbardata.renderSidenavLogo)(O, K, /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+    }, ue = O === void 0 || O === !0, $ = (0, _sidenavbardata.renderSidenavLogo)(O, K, /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: _sidenavbarcssmistica.LOGO_SIZE,
         type: "isotype"
-    })), de = p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
+    })), ve = p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
         Icon: s ? _iconpanelexpandregular.default : _iconpanelcollapseregular.default,
         type: "neutral",
         backgroundType: "transparent",
@@ -323,8 +328,8 @@ const be = function(e) {
         onPress: Ae,
         "aria-label": s ? W.sidenavExpand || _(_texttokens.sidenavExpand) : W.sidenavCollapse || _(_texttokens.sidenavCollapse),
         "aria-expanded": !s
-    }) : null, q = (0, _sidenavbardata.renderSidenavSlot)(X, K), ce = (0, _sidenavbardata.renderSidenavSlot)(b, K), I = !!($ || de || q), He = d && (0, _boxed.shouldShowBoxedBorder)(i, Le, Be.showBoxedBorder), N = c && D && e ? xe(e, D) : void 0, k = N === null || N === void 0 ? void 0 : N.children, ue = !!(k === null || k === void 0 ? void 0 : k.length);
-    return N && (k === null || k === void 0 ? void 0 : k.length) && ((x === null || x === void 0 ? void 0 : x.label) !== N.label || (x === null || x === void 0 ? void 0 : x.children) !== k) && Te({
+    }) : null, q = (0, _sidenavbardata.renderSidenavSlot)(X, K), me = (0, _sidenavbardata.renderSidenavSlot)(b, K), I = !!($ || ve || q), He = d && (0, _boxed.shouldShowBoxedBorder)(i, Oe, Ne.showBoxedBorder), N = c && D && e ? Le(e, D) : void 0, k = N === null || N === void 0 ? void 0 : N.children, fe = !!(k === null || k === void 0 ? void 0 : k.length);
+    return N && (k === null || k === void 0 ? void 0 : k.length) && ((x === null || x === void 0 ? void 0 : x.label) !== N.label || (x === null || x === void 0 ? void 0 : x.children) !== k) && Pe({
         itemId: N.id,
         label: N.label,
         children: k
@@ -334,7 +339,7 @@ const be = function(e) {
             value: We,
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("nav", _object_spread_props(_object_spread({
                 ref: L,
-                "aria-label": ee,
+                "aria-label": ne,
                 onKeyDown: _e,
                 className: (0, _classnames.default)(_sidenavbarcssmistica.container, {
                     [_sidenavbarcssmistica.withRightDivider[i]]: u && !d,
@@ -354,7 +359,7 @@ const be = function(e) {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         className: (0, _classnames.default)(_sidenavbarcssmistica.mainColumn, {
-                            [_sidenavbarcssmistica.columnSeparator[i]]: ue || Fe
+                            [_sidenavbarcssmistica.columnSeparator[i]]: fe || Fe
                         }),
                         children: [
                             I && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -370,13 +375,13 @@ const be = function(e) {
                                         children: [
                                             $ && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 className: (0, _classnames.default)(_sidenavbarcssmistica.logo, {
-                                                    [_sidenavbarcssmistica.logoDefault]: le,
+                                                    [_sidenavbarcssmistica.logoDefault]: ue,
                                                     [_sidenavbarcssmistica.logoCollapsed]: s
                                                 }),
-                                                "aria-hidden": le || void 0,
+                                                "aria-hidden": ue || void 0,
                                                 children: $
                                             }),
-                                            de
+                                            ve
                                         ]
                                     }),
                                     q && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -433,7 +438,7 @@ const be = function(e) {
                                                     [_sidenavbarcssmistica.footerCollapsed]: s
                                                 }),
                                                 style: C,
-                                                children: ce
+                                                children: me
                                             })
                                         ]
                                     }),
@@ -460,22 +465,22 @@ const be = function(e) {
                                     [_sidenavbarcssmistica.footerCollapsed]: s
                                 }),
                                 style: C,
-                                children: ce
+                                children: me
                             })
                         ]
                     }),
                     x && /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                        in: ue,
+                        in: fe,
                         timeout: h ? 0 : _sidenavbarcssmistica.COLLAPSE_DURATION_MS,
-                        nodeRef: ne,
+                        nodeRef: oe,
                         classNames: _sidenavbarcssmistica.doublePanelTransitionClasses,
                         appear: !0,
                         mountOnEnter: !0,
                         unmountOnExit: !0,
-                        onEnter: ()=>ae(!0),
-                        onExited: ()=>ae(!1),
+                        onEnter: ()=>ce(!0),
+                        onExited: ()=>ce(!1),
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_sidenavbarpanel.SidenavDoublePanel, {
-                            ref: ne,
+                            ref: oe,
                             itemId: x.itemId,
                             label: x.label,
                             variant: i,

package/dist/skeletons.css-mistica.js

@@ -26,9 +26,9 @@ _export(exports, {
     }
 });
 /* empty css                                     */ /* empty css                                     */ var o = {
-    default: "v17_6_zopolw5 v17_6_zopolw0 v17_6_1y2v1nf9d",
-    alternative: "v17_6_zopolw6 v17_6_zopolw1 v17_6_1y2v1nf9d",
-    brand: "v17_6_zopolw7 v17_6_zopolw2 v17_6_1y2v1nf9g",
-    negative: "v17_6_zopolw8 v17_6_zopolw3 v17_6_1y2v1nf9f",
-    media: "v17_6_zopolw9 v17_6_zopolw4 v17_6_1y2v1nf9f"
-}, l = "v17_6_zopolwc v17_6_zopolwb v17_6_1y2v1nfrg", n = "v17_6_zopolwd v17_6_1y2v1nfre v17_6_1y2v1nfrt v17_6_1y2v1nfrn", r = "v17_6_zopolwe v17_6_1y2v1nfrw v17_6_1y2v1nfry", p = "v17_6_zopolwg v17_6_zopolwf v17_6_1y2v1nfrx";
+    default: "v17_7_zopolw5 v17_7_zopolw0 v17_7_1y2v1nf9d",
+    alternative: "v17_7_zopolw6 v17_7_zopolw1 v17_7_1y2v1nf9d",
+    brand: "v17_7_zopolw7 v17_7_zopolw2 v17_7_1y2v1nf9g",
+    negative: "v17_7_zopolw8 v17_7_zopolw3 v17_7_1y2v1nf9f",
+    media: "v17_7_zopolw9 v17_7_zopolw4 v17_7_1y2v1nf9f"
+}, l = "v17_7_zopolwc v17_7_zopolwb v17_7_1y2v1nfrg", n = "v17_7_zopolwd v17_7_1y2v1nfre v17_7_1y2v1nfrt v17_7_1y2v1nfrn", r = "v17_7_zopolwe v17_7_1y2v1nfrw v17_7_1y2v1nfry", p = "v17_7_zopolwg v17_7_zopolwf v17_7_1y2v1nfrx";