@telefonica/mistica 14.32.1 → 14.33.0

package/dist/tabs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Y;
+        return ie;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -19,6 +19,8 @@ const _platform = require("./utils/platform.js");
 const _dom = require("./utils/dom.js");
 const _tabscssmistica = require("./tabs.css-mistica.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
+const _themevariantcontext = require("./theme-variant-context.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -115,8 +117,8 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
-    switch(i){
+const u = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, F = (o)=>{
+    switch(o){
         case 1:
         case 2:
         case 3:
@@ -124,21 +126,21 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
         default:
             return "default";
     }
-}, C = (param)=>{
-    let { selectedIndex: i , onChange: y , tabs: u , dataAttributes: T  } = param;
-    const { textPresets: r  } = (0, _hooks.useTheme)(), l = (0, _hooks.useAriaId)(), { ref: A  } = (0, _hooks.useElementDimensions)(), b = _react.useRef(null), h = _react.useRef(null), [p, L] = _react.useState(!1), N = (o, c)=>{
-        const s = document.querySelector(`[id='${l}'] [data-tabindex="${o}"]`), n = document.querySelector(`[id='${l}'] [data-tabindex="${c}"]`), e = b.current, a = h.current;
-        s && n && e && a && (L(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            e.style.transition = `transform ${f}ms, width ${f}ms`, e.style.width = `${n.offsetWidth}px`, e.style.transform = `translate(${n.offsetLeft - a.scrollLeft}px, 0)`;
+}, U = (param)=>{
+    let { selectedIndex: o , onChange: I , tabs: b , dataAttributes: T  } = param;
+    const { textPresets: n  } = (0, _hooks.useTheme)(), m = (0, _hooks.useAriaId)(), { ref: N  } = (0, _hooks.useElementDimensions)(), h = _react.useRef(null), p = _react.useRef(null), [v, g] = _react.useState(!1), r = (0, _themevariantcontext.useIsInverseVariant)(), S = (c, d)=>{
+        const s = document.querySelector(`[id='${m}'] [data-tabindex="${c}"]`), l = document.querySelector(`[id='${m}'] [data-tabindex="${d}"]`), e = h.current, a = p.current;
+        s && l && e && a && (g(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
+            e.style.transition = `transform ${u}ms, width ${u}ms`, e.style.width = `${l.offsetWidth}px`, e.style.transform = `translate(${l.offsetLeft - a.scrollLeft}px, 0)`;
         }), setTimeout(()=>{
-            e.style.transition = "", e.style.display = "none", L(!1);
-        }, f));
+            e.style.transition = "", e.style.display = "none", g(!1);
+        }, u));
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        id: l,
+        id: m,
         role: "tablist",
-        ref: A,
-        className: _tabscssmistica.outerBorder
+        ref: N,
+        className: r ? _tabscssmistica.outerBorderInverse : _tabscssmistica.outerBorder
     }, (0, _dom.getPrefixedDataAttributes)(T, "Tabs")), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
             fullWidth: !0,
@@ -146,28 +148,28 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                 className: _tabscssmistica.outer,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: h,
+                        ref: p,
                         className: _tabscssmistica.inner,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _tabscssmistica.tabsContainer,
-                            children: u.map((param, e)=>{
-                                let { text: o , trackingEvent: c , icon: s , "aria-controls": n  } = param;
-                                const a = e === i;
+                            children: b.map((param, e)=>{
+                                let { text: c , trackingEvent: d , icon: s , "aria-controls": l  } = param;
+                                const a = e === o;
                                 return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                                     dataAttributes: {
                                         "component-name": "Tab",
                                         tabindex: e
                                     },
-                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[q(u.length)], a ? p ? _tabscssmistica.tabSelectionVariants.selectedAnimating : _tabscssmistica.tabSelectionVariants.selected : _tabscssmistica.tabSelectionVariants.noSelected),
+                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[F(b.length)], a ? v ? r ? _tabscssmistica.tabSelectionVariants.selectedAnimatingInverse : _tabscssmistica.tabSelectionVariants.selectedAnimating : r ? _tabscssmistica.tabSelectionVariants.selectedInverse : _tabscssmistica.tabSelectionVariants.selected : r ? _tabscssmistica.tabSelectionVariants.noSelectedInverse : _tabscssmistica.tabSelectionVariants.noSelected, r ? _tabscssmistica.tabHover.inverse : _tabscssmistica.tabHover.default),
                                     onPress: ()=>{
-                                        !p && i !== e && (y(e), N(i, e));
+                                        !v && o !== e && (I(e), S(o, e));
                                     },
-                                    trackingEvent: c,
+                                    trackingEvent: d,
                                     role: "tab",
-                                    "aria-controls": n,
+                                    "aria-controls": l,
                                     "aria-selected": a ? "true" : "false",
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                                        space: s && o ? 8 : 0,
+                                        space: s && c ? 8 : 0,
                                         alignItems: "center",
                                         children: [
                                             s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -176,16 +178,16 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                                             }),
                                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
                                                 as: "div",
-                                                desktopSize: r.tabsLabel.size.desktop,
-                                                mobileSize: r.tabsLabel.size.mobile,
-                                                desktopLineHeight: r.tabsLabel.lineHeight.desktop,
-                                                mobileLineHeight: r.tabsLabel.lineHeight.mobile,
-                                                weight: r.tabsLabel.weight,
+                                                desktopSize: n.tabsLabel.size.desktop,
+                                                mobileSize: n.tabsLabel.size.mobile,
+                                                desktopLineHeight: n.tabsLabel.lineHeight.desktop,
+                                                mobileLineHeight: n.tabsLabel.lineHeight.mobile,
+                                                weight: n.tabsLabel.weight,
                                                 color: "inherit",
                                                 wordBreak: !1,
                                                 textAlign: "center",
                                                 hyphens: "auto",
-                                                children: o
+                                                children: c
                                             })
                                         ]
                                     })
@@ -194,11 +196,14 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: b,
-                        className: _tabscssmistica.animatedLine
+                        ref: h,
+                        className: _tabscssmistica.animatedLine,
+                        style: {
+                            background: r ? _skincontractcssmistica.vars.colors.controlActivatedInverse : _skincontractcssmistica.vars.colors.controlActivated
+                        }
                     })
                 ]
             })
         })
     }));
-}, Y = C;
+}, ie = U;