@telefonica/mistica 14.24.1 → 14.26.0

package/dist/accordion.js

@@ -0,0 +1,350 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Accordion: function() {
+        return io;
+    },
+    AccordionItem: function() {
+        return co;
+    },
+    BoxedAccordion: function() {
+        return ao;
+    },
+    BoxedAccordionItem: function() {
+        return so;
+    },
+    useAccordionContext: function() {
+        return z;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _list = require("./list.js");
+const _iconchevron = /*#__PURE__*/ _interop_require_default(require("./icons/icon-chevron.js"));
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _accordioncssmistica = require("./accordion.css-mistica.js");
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
+const _touchable = require("./touchable.js");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _dom = require("./utils/dom.js");
+const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));
+const _boxed = require("./boxed.js");
+const _themevariantcontext = require("./theme-variant-context.js");
+const _hooks = require("./hooks.js");
+const _reacttransitiongroup = require("react-transition-group");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const q = 400, x = /*#__PURE__*/ _react.createContext({
+    index: [],
+    toogle: ()=>{}
+}), z = ()=>_react.useContext(x), B = (param)=>{
+    let { value: o , defaultValue: r , onChange: n , singleOpen: d  } = param;
+    const m = o !== void 0, a = (e)=>e === void 0 ? [] : typeof e == "number" ? [
+            e
+        ] : e, [i, l] = _react.useState(a(r));
+    _react.useEffect(()=>l(a(r)), [
+        r
+    ]), _react.useEffect(()=>{
+        i.length > 1 && d && (i.splice(1), l([
+            ...i
+        ]));
+    }, [
+        d,
+        i
+    ]);
+    const p = (e, s)=>{
+        if (!s) return [
+            e
+        ];
+        const u = s.indexOf(e);
+        return u === -1 ? d ? s = [
+            e
+        ] : s.push(e) : s.splice(u, 1), [
+            ...s
+        ];
+    }, f = (e)=>{
+        if (m || l(p(e, i)), n) {
+            const s = (m ? a(o) : i).includes(e);
+            n(e, !s);
+        }
+    };
+    return m ? [
+        a(o),
+        f
+    ] : [
+        i,
+        f
+    ];
+}, F = (o)=>{
+    const r = o == null ? void 0 : o.closest("[data-accordion]");
+    if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === r).findIndex((n)=>n === o);
+}, R = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
+    var { content: o , dataAttributes: r , trackingEvent: n  } = _param, d = _object_without_properties(_param, [
+        "content",
+        "dataAttributes",
+        "trackingEvent"
+    ]);
+    const a = _react.useRef(null), i = _react.useRef(null), { index: l , toogle: p  } = z(), f = (0, _themevariantcontext.useIsInverseVariant)(), e = (0, _hooks.useAriaId)(), s = (0, _hooks.useAriaId)(), [u, b] = _react.useState(), I = u !== void 0 && (l == null ? void 0 : l.includes(u));
+    return _react.useEffect(()=>{
+        b(F(i.current));
+    }, []), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+        ref: i
+    }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
+        "accordion-item": !0
+    }))), {
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
+                ref: m,
+                className: (0, _classnames.default)(_accordioncssmistica.itemContent, f ? _accordioncssmistica.touchableBackgroundInverse : _accordioncssmistica.touchableBackground),
+                onPress: ()=>{
+                    u !== void 0 && p(u);
+                },
+                trackingEvent: n,
+                "aria-expanded": I,
+                "aria-controls": s,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    paddingX: 16,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Content, _object_spread_props(_object_spread({
+                        labelId: e,
+                        type: "custom"
+                    }, d), {
+                        right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _accordioncssmistica.chevronContainer,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
+                                size: 24,
+                                transitionDuration: 400,
+                                direction: I ? "up" : "down",
+                                color: f ? _skincontractcssmistica.vars.colors.inverse : I ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium
+                            })
+                        })
+                    }))
+                })
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
+                in: I,
+                timeout: q,
+                nodeRef: a,
+                classNames: _accordioncssmistica.panelTransitionClasses,
+                mountOnEnter: !0,
+                unmountOnExit: !0,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _accordioncssmistica.panelContainer,
+                    ref: a,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _accordioncssmistica.panel,
+                        role: "region",
+                        "aria-labelledby": e,
+                        id: s,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                            paddingX: 16,
+                            paddingBottom: 16,
+                            children: o
+                        })
+                    })
+                })
+            })
+        ]
+    }));
+}), co = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: o  } = _param, r = _object_without_properties(_param, [
+        "dataAttributes"
+    ]);
+    return (0, _jsxruntime.jsx)(R, _object_spread_props(_object_spread({}, r), {
+        ref: n,
+        dataAttributes: _object_spread({
+            "component-name": "AccordionItem"
+        }, o)
+    }));
+}), io = (param)=>{
+    let { children: o , dataAttributes: r , noLastDivider: n , index: d , defaultIndex: m , onChange: a , singleOpen: i  } = param;
+    const [l, p] = B({
+        value: d,
+        defaultValue: m,
+        onChange: a,
+        singleOpen: i
+    }), f = _react.Children.count(o) - 1, e = !n;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x.Provider, {
+        value: {
+            index: l,
+            toogle: p
+        },
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
+            accordion: !0
+        }), "Accordion")), {
+            children: _react.Children.toArray(o).filter(Boolean).map((s, u)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                    children: [
+                        s,
+                        (u < f || e) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                            paddingX: 16,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+                        })
+                    ]
+                }, u))
+        }))
+    });
+}, so = /*#__PURE__*/ _react.forwardRef((_param, d)=>/* @__PURE__ */ {
+    var { dataAttributes: o , isInverse: r  } = _param, n = _object_without_properties(_param, [
+        "dataAttributes",
+        "isInverse"
+    ]);
+    return (0, _jsxruntime.jsx)(_boxed.Boxed, {
+        isInverse: r,
+        ref: d,
+        dataAttributes: _object_spread({
+            "component-name": "BoxedAccordionItem"
+        }, o),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(R, _object_spread({}, n))
+    });
+}), ao = (param)=>{
+    let { children: o , dataAttributes: r , index: n , defaultIndex: d , onChange: m , singleOpen: a  } = param;
+    const [i, l] = B({
+        value: n,
+        defaultValue: d,
+        onChange: m,
+        singleOpen: a
+    });
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x.Provider, {
+        value: {
+            index: i,
+            toogle: l
+        },
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+            space: 16,
+            dataAttributes: _object_spread({
+                "component-name": "BoxedAccordion",
+                accordion: !0
+            }, r),
+            children: o
+        })
+    });
+};

package/dist/boxed.d.ts

@@ -9,6 +9,7 @@ type Props = {
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
+    'aria-labelledby'?: string;
     width?: number | string;
     height?: number | string;
     minHeight?: number | string;

package/dist/boxed.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     Boxed: function() {
-        return z;
+        return A;
     },
     InternalBoxed: function() {
         return w;
@@ -120,33 +120,34 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const h = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
+const h = (e, r)=>e || r ? (0, _sprinklescssmistica.sprinkles)({
         border: "none"
-    }) : _boxedcssmistica.boxBorder, w = /*#__PURE__*/ _react.forwardRef((param, x)=>{
-    let { children: o , isInverse: r = !1 , className: d , role: m , dataAttributes: f , "aria-label": l , width: c , height: b , minHeight: p , borderRadius: u = _skincontractcssmistica.vars.borderRadii.container , background: a  } = param;
+    }) : _boxedcssmistica.boxBorder, w = /*#__PURE__*/ _react.forwardRef((param, v)=>{
+    let { children: e , isInverse: r = !1 , className: l , role: d , dataAttributes: m , "aria-label": b , "aria-labelledby": f , width: c , height: p , minHeight: u , borderRadius: x = _skincontractcssmistica.vars.borderRadii.container , background: t  } = param;
     const n = (0, _themevariantcontext.useIsInverseVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        ref: x,
+        ref: v,
         style: {
             width: c,
-            height: b,
-            minHeight: p,
+            height: p,
+            minHeight: u,
             boxSizing: "border-box",
-            background: a
+            background: t
         },
-        className: (0, _classnames.default)(d, h(n, r), (0, _sprinklescssmistica.sprinkles)({
-            borderRadius: u,
+        className: (0, _classnames.default)(l, h(n, r), (0, _sprinklescssmistica.sprinkles)({
+            borderRadius: x,
             overflow: "hidden",
-            background: (a !== null && a !== void 0 ? a : r) ? n ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer
+            background: (t !== null && t !== void 0 ? t : r) ? n ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer
         })),
-        role: m,
-        "aria-label": l
-    }, (0, _dom.getPrefixedDataAttributes)(f)), {
+        role: d,
+        "aria-label": b,
+        "aria-labelledby": f
+    }, (0, _dom.getPrefixedDataAttributes)(m)), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
             isInverse: r,
-            children: o
+            children: e
         })
     }));
-}), z = /*#__PURE__*/ _react.forwardRef((o, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(w, _object_spread_props(_object_spread({}, o), {
+}), A = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(w, _object_spread_props(_object_spread({}, e), {
         ref: r
     })));