@telefonica/mistica 17.3.0 → 17.4.0

package/dist/sidenav-bar-keyboard.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const getItemFocusables: (root: HTMLElement | null) => Array<HTMLElement>;
+declare const useSidenavRailKeyboard: (containerRef: React.RefObject<HTMLElement | null>) => ((event: React.KeyboardEvent) => void);
+type DialogPanelKeyboardArgs = {
+    panelElement: HTMLElement | null;
+    containerRef: React.RefObject<HTMLElement | null>;
+    itemId: string;
+    /** A hidden element takes no focus, so the panel must be positioned first. */
+    isPositioned: boolean;
+    onClose: () => void;
+};
+declare const useDialogPanelKeyboard: ({ panelElement, containerRef, itemId, isPositioned, onClose, }: DialogPanelKeyboardArgs) => void;
+export { useSidenavRailKeyboard, useDialogPanelKeyboard, getItemFocusables };

package/dist/sidenav-bar-keyboard.js

@@ -0,0 +1,314 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get getItemFocusables () {
+        return f;
+    },
+    get useDialogPanelKeyboard () {
+        return F;
+    },
+    get useSidenavRailKeyboard () {
+        return k;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+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 = {
+        __proto__: null
+    };
+    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;
+}
+const m = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])', g = (t)=>typeof CSS < "u" && CSS.escape ? CSS.escape(t) : t.replace(/"/g, '\\"'), A = (t)=>t.map((e)=>e.querySelector(m)).filter((e)=>e !== null), f = (t)=>t ? A(Array.from(t.querySelectorAll("[data-sidenav-item-id]"))) : [], v = (t)=>{
+    if (!t) return [];
+    const e = Array.from(t.querySelectorAll("[data-sidenav-item-id]")).filter((r)=>!r.closest("[data-sidenav-double-panel]"));
+    return A(e);
+}, S = (t, e)=>{
+    var _e_querySelector;
+    var _e_querySelector_querySelector;
+    return (_e_querySelector_querySelector = (_e_querySelector = e.querySelector(`[data-sidenav-item-id="${g(t)}"]`)) === null || _e_querySelector === void 0 ? void 0 : _e_querySelector.querySelector(m)) !== null && _e_querySelector_querySelector !== void 0 ? _e_querySelector_querySelector : null;
+}, h = (t, e)=>{
+    const r = S(t, e);
+    if (!r) return null;
+    const o = v(e);
+    var _o_;
+    return (_o_ = o[o.indexOf(r) + 1]) !== null && _o_ !== void 0 ? _o_ : null;
+}, w = (t)=>{
+    var _t_closest;
+    if (t.getAttribute("aria-expanded") !== "true") return null;
+    const r = (_t_closest = t.closest("[data-sidenav-item-id]")) === null || _t_closest === void 0 ? void 0 : _t_closest.getAttribute("data-sidenav-item-id");
+    return r ? document.querySelector(`[data-sidenav-dialog-panel="${g(r)}"]`) : null;
+}, y = (t, e)=>{
+    var _t_closest;
+    const r = (_t_closest = t.closest("[data-sidenav-item-id]")) === null || _t_closest === void 0 ? void 0 : _t_closest.getAttribute("data-sidenav-item-id");
+    return r ? e.querySelector(`[data-sidenav-double-panel="${g(r)}"]`) : null;
+}, q = (t, e)=>{
+    var _t_closest;
+    const r = (_t_closest = t.closest("[data-sidenav-item-id]")) === null || _t_closest === void 0 ? void 0 : _t_closest.getAttribute("data-sidenav-item-id");
+    return r ? e.querySelector(`[data-sidenav-accordion-for="${g(r)}"]`) : null;
+}, x = (t, e)=>{
+    var _t_closest, _e_querySelector;
+    const o = (_t_closest = t.closest("[data-sidenav-accordion-for]")) === null || _t_closest === void 0 ? void 0 : _t_closest.getAttribute("data-sidenav-accordion-for");
+    var _e_querySelector_querySelector;
+    return o ? (_e_querySelector_querySelector = (_e_querySelector = e.querySelector(`[data-sidenav-item-id="${g(o)}"]`)) === null || _e_querySelector === void 0 ? void 0 : _e_querySelector.querySelector(m)) !== null && _e_querySelector_querySelector !== void 0 ? _e_querySelector_querySelector : null : null;
+}, k = (t)=>_react.useCallback((e)=>{
+        const r = t.current;
+        if (!r) return;
+        const o = document.activeElement;
+        if (!o) return;
+        const d = o.closest("[data-sidenav-double-panel]");
+        if (d) {
+            var _d_getAttribute;
+            const c = (_d_getAttribute = d.getAttribute("data-sidenav-double-panel")) !== null && _d_getAttribute !== void 0 ? _d_getAttribute : "", a = S(c, r), n = f(d), u = n.indexOf(o);
+            switch(e.key){
+                case "ArrowDown":
+                    var _n_Math_min;
+                    e.preventDefault(), (_n_Math_min = n[Math.min(u + 1, n.length - 1)]) === null || _n_Math_min === void 0 ? void 0 : _n_Math_min.focus();
+                    return;
+                // The column is not a floating panel, so it stays open when the focus leaves it.
+                case "ArrowUp":
+                case "ArrowLeft":
+                    if (e.preventDefault(), e.key === "ArrowUp" && u > 0) {
+                        n[u - 1].focus();
+                        return;
+                    }
+                    a === null || a === void 0 ? void 0 : a.focus();
+                    return;
+                case "ArrowRight":
+                    e.preventDefault();
+                    return;
+                case "Home":
+                    var _n_;
+                    e.preventDefault(), (_n_ = n[0]) === null || _n_ === void 0 ? void 0 : _n_.focus();
+                    return;
+                case "End":
+                    var _n_1;
+                    e.preventDefault(), (_n_1 = n[n.length - 1]) === null || _n_1 === void 0 ? void 0 : _n_1.focus();
+                    return;
+                case "Tab":
+                    {
+                        var _this;
+                        if (e.preventDefault(), e.shiftKey) {
+                            var _this1;
+                            (_this1 = u > 0 ? n[u - 1] : a) === null || _this1 === void 0 ? void 0 : _this1.focus();
+                            return;
+                        }
+                        (_this = u < n.length - 1 ? n[u + 1] : h(c, r)) === null || _this === void 0 ? void 0 : _this.focus();
+                        return;
+                    }
+                default:
+                    return;
+            }
+        }
+        if (!o.closest("[data-sidenav-item-id]")) return;
+        const s = v(r), i = s.indexOf(o);
+        switch(e.key){
+            case "ArrowDown":
+                {
+                    e.preventDefault(), i >= 0 && i < s.length - 1 && s[i + 1].focus();
+                    return;
+                }
+            case "ArrowUp":
+                {
+                    e.preventDefault(), i > 0 && s[i - 1].focus();
+                    return;
+                }
+            case "Home":
+                {
+                    var _s_;
+                    e.preventDefault(), (_s_ = s[0]) === null || _s_ === void 0 ? void 0 : _s_.focus();
+                    return;
+                }
+            case "End":
+                {
+                    var _s_1;
+                    e.preventDefault(), (_s_1 = s[s.length - 1]) === null || _s_1 === void 0 ? void 0 : _s_1.focus();
+                    return;
+                }
+            case "ArrowRight":
+                {
+                    var _f_;
+                    if (o.getAttribute("aria-expanded") === "false") {
+                        e.preventDefault(), o.click();
+                        return;
+                    }
+                    const c = w(o);
+                    if (c) {
+                        var _f_1;
+                        e.preventDefault(), (_f_1 = f(c)[0]) === null || _f_1 === void 0 ? void 0 : _f_1.focus();
+                        return;
+                    }
+                    const a = y(o, r);
+                    if (a) {
+                        var _f_2;
+                        e.preventDefault(), (_f_2 = f(a)[0]) === null || _f_2 === void 0 ? void 0 : _f_2.focus();
+                        return;
+                    }
+                    const n = q(o, r);
+                    n && (e.preventDefault(), (_f_ = f(n)[0]) === null || _f_ === void 0 ? void 0 : _f_.focus());
+                    return;
+                }
+            case "ArrowLeft":
+                {
+                    if (o.getAttribute("aria-expanded") === "true") {
+                        e.preventDefault(), o.click();
+                        return;
+                    }
+                    const c = x(o, r);
+                    c && (e.preventDefault(), c.focus());
+                    return;
+                }
+            case "Tab":
+                {
+                    if (!e.shiftKey) {
+                        var _f_3;
+                        var _w;
+                        const u = (_w = w(o)) !== null && _w !== void 0 ? _w : y(o, r);
+                        u && (e.preventDefault(), (_f_3 = f(u)[0]) === null || _f_3 === void 0 ? void 0 : _f_3.focus());
+                        return;
+                    }
+                    const c = i > 0 ? s[i - 1] : null;
+                    if (!c) return;
+                    var _w1;
+                    const a = (_w1 = w(c)) !== null && _w1 !== void 0 ? _w1 : y(c, r), n = f(a).pop();
+                    n && (e.preventDefault(), n.focus());
+                    return;
+                }
+            default:
+                return;
+        }
+    }, [
+        t
+    ]), F = (param)=>{
+    let { panelElement: t, containerRef: e, itemId: r, isPositioned: o, onClose: d } = param;
+    const s = _react.useRef(null), i = _react.useRef(d);
+    i.current = d, _react.useEffect(()=>{
+        var _e_current;
+        const a = (_e_current = e.current) === null || _e_current === void 0 ? void 0 : _e_current.querySelector(`[data-sidenav-item-id="${g(r)}"]`);
+        var _a_querySelector;
+        s.current = (_a_querySelector = a === null || a === void 0 ? void 0 : a.querySelector(m)) !== null && _a_querySelector !== void 0 ? _a_querySelector : null;
+    }, [
+        e,
+        r,
+        t
+    ]);
+    const c = _react.useCallback(()=>{
+        const a = e.current;
+        if (!a) return;
+        const n = ()=>{
+            var _a_querySelector_querySelector, _a_querySelector;
+            const u = document.activeElement;
+            if (u && u !== document.body) return;
+            (_a_querySelector = a.querySelector(`[data-sidenav-item-id="${g(r)}"]`)) === null || _a_querySelector === void 0 ? void 0 : (_a_querySelector_querySelector = _a_querySelector.querySelector(m)) === null || _a_querySelector_querySelector === void 0 ? void 0 : _a_querySelector_querySelector.focus();
+        };
+        typeof requestAnimationFrame == "function" ? requestAnimationFrame(n) : n();
+    }, [
+        e,
+        r
+    ]);
+    _react.useEffect(()=>{
+        var _f_;
+        !t || !o || ((_f_ = f(t)[0]) === null || _f_ === void 0 ? void 0 : _f_.focus());
+    }, [
+        t,
+        o
+    ]), _react.useEffect(()=>()=>c(), [
+        c
+    ]), _react.useEffect(()=>{
+        if (!t) return;
+        const a = (n)=>{
+            const u = f(t);
+            if (u.length === 0) return;
+            const b = document.activeElement, p = b ? u.indexOf(b) : -1;
+            switch(n.key){
+                case "ArrowDown":
+                    var _u_Math_min;
+                    n.preventDefault(), (_u_Math_min = u[Math.min(p + 1, u.length - 1)]) === null || _u_Math_min === void 0 ? void 0 : _u_Math_min.focus();
+                    return;
+                // Closing the panel unmounts it, and the restore effect returns the focus to the trigger.
+                case "ArrowLeft":
+                    n.preventDefault(), i.current();
+                    return;
+                case "ArrowUp":
+                    if (n.preventDefault(), p <= 0) {
+                        i.current();
+                        return;
+                    }
+                    u[p - 1].focus();
+                    return;
+                case "Home":
+                    n.preventDefault(), u[0].focus();
+                    return;
+                case "End":
+                    n.preventDefault(), u[u.length - 1].focus();
+                    return;
+                case "Tab":
+                    {
+                        var _h;
+                        if (n.preventDefault(), n.shiftKey) {
+                            var _this;
+                            (_this = p > 0 ? u[p - 1] : s.current) === null || _this === void 0 ? void 0 : _this.focus();
+                            return;
+                        }
+                        if (p < u.length - 1) {
+                            u[p + 1].focus();
+                            return;
+                        }
+                        const D = e.current;
+                        D && ((_h = h(r, D)) === null || _h === void 0 ? void 0 : _h.focus());
+                        return;
+                    }
+                default:
+                    return;
+            }
+        };
+        return t.addEventListener("keydown", a), ()=>t.removeEventListener("keydown", a);
+    }, [
+        t,
+        e,
+        r
+    ]);
+};

package/dist/sidenav-bar-layout.css-mistica.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get centeredResponsiveLayout () {
+        return a;
+    },
+    get container () {
+        return e;
+    },
+    get content () {
+        return n;
+    },
+    get sidenav () {
+        return r;
+    },
+    get topOffsetVar () {
+        return s;
+    }
+});
+/* empty css                                     */ /* empty css                                              */ var s = "var(--v17_4_16kses10)", e = "v17_4_16kses12 v17_4_16kses11 v17_4_1y2v1nfre", r = "v17_4_16kses14 v17_4_16kses13 v17_4_1y2v1nfre v17_4_1y2v1nfrk v17_4_1y2v1nfrr", n = "v17_4_16kses16 v17_4_16kses15 v17_4_1y2v1nfs0 v17_4_1y2v1nfsz", a = "v17_4_16kses17";

package/dist/sidenav-bar-layout.css.d.ts

@@ -0,0 +1,5 @@
+export declare const topOffsetVar: `var(--${string})`;
+export declare const container: string;
+export declare const sidenav: string;
+export declare const content: string;
+export declare const centeredResponsiveLayout: string;

package/dist/sidenav-bar-layout.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { DataAttributes } from './utils/types';
+type SidenavLayoutProps = {
+    /** Content of the sidenav column (typically SidenavBar). */
+    sidenav: React.ReactNode;
+    /** Content of the main area, which sits beside the sidenav. */
+    children: React.ReactNode;
+    /** Layout mode: 'whole-viewport' spans full width, 'centered' wraps in responsive container. @default 'whole-viewport' */
+    mode?: 'whole-viewport' | 'centered';
+    /**
+     * Height in px of a persistent band above the layout (a fixed or sticky top header). The sidenav
+     * sticks below it instead of taking the whole viewport. A header that scrolls away with the page
+     * needs no offset. @default 0
+     */
+    topOffset?: number;
+    /** Custom data attributes for testing and tracking. */
+    dataAttributes?: DataAttributes;
+};
+declare const SidenavLayout: ({ sidenav, children, mode, topOffset, dataAttributes, }: SidenavLayoutProps) => JSX.Element;
+export default SidenavLayout;
+export { SidenavLayout };
+export type { SidenavLayoutProps };

package/dist/sidenav-bar-layout.js

@@ -0,0 +1,103 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get SidenavLayout () {
+        return j;
+    },
+    get default () {
+        return j;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _sidenavbarlayoutcssmistica = require("./sidenav-bar-layout.css-mistica.js");
+const _responsivelayout = require("./responsive-layout.js");
+const _dom = require("./utils/dom.js");
+const _css = require("./utils/css.js");
+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;
+}
+const j = (param)=>{
+    let { sidenav: s, children: a, mode: i = "whole-viewport", topOffset: t, dataAttributes: o } = param;
+    const r = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+        className: _sidenavbarlayoutcssmistica.container,
+        style: t ? (0, _css.applyCssVars)({
+            [_sidenavbarlayoutcssmistica.topOffsetVar]: `${t}px`
+        }) : void 0
+    }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        testid: "SidenavLayout"
+    }, o))), {
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _sidenavbarlayoutcssmistica.sidenav,
+                children: s
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _sidenavbarlayoutcssmistica.content,
+                children: a
+            })
+        ]
+    }));
+    return i === "centered" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
+        innerDivClassName: _sidenavbarlayoutcssmistica.centeredResponsiveLayout,
+        shouldExpandWhenNested: !0,
+        children: r
+    }) : r;
+};

package/dist/sidenav-bar-mobile.d.ts

@@ -0,0 +1,24 @@
+import type { NonDeprecatedVariant } from './theme-variant-context';
+import type { DataAttributes } from './utils/types';
+import type { SidenavEntry, SidenavLogo, SidenavSlot } from './sidenav-bar-types';
+type SidenavBarMobileProps = {
+    /** First-level entries of the panel. */
+    entries?: ReadonlyArray<SidenavEntry>;
+    /** Accessible name of the navigation landmark. */
+    'aria-label': string;
+    /** Variant of the top bar. The panel always renders in the default variant. */
+    variant: NonDeprecatedVariant;
+    /** Logo of the top bar. */
+    logo?: SidenavLogo;
+    /** Content of the right side of the top bar. */
+    headerSlot?: SidenavSlot;
+    /** Content of the end of the panel. */
+    footerSlot?: SidenavSlot;
+    /** ID of the currently selected item. It marks the item for a screen reader, and paints nothing. */
+    selectedItemId: string | null;
+    /** Called when the user presses an item that navigates. */
+    onSelectedItemIdChange?: (id: string | null) => void;
+    dataAttributes?: DataAttributes;
+};
+declare const SidenavBarMobile: ({ entries, "aria-label": ariaLabel, variant, logo, headerSlot, footerSlot, selectedItemId, onSelectedItemIdChange, dataAttributes, }: SidenavBarMobileProps) => JSX.Element;
+export { SidenavBarMobile };