@telefonica/mistica 12.8.0 → 12.9.1

package/dist-es/loading-bar.js

@@ -1,10 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { CSSTransition } from "react-transition-group";
-import { Portal } from "./portal";
-import { createUseStyles } from "./jss";
-var TRANSITION_DURATION_MS = 400;
-var useStyles = createUseStyles(function(theme) {
+import { CSSTransition as a } from "react-transition-group";
+import { Portal as n } from "./portal.js";
+import { createUseStyles as o } from "./jss.js";
+import { jsx as e } from "./_virtual/jsx-runtime.js";
+var t = 400, i = o(function(s) {
     return {
         portal: {
             zIndex: 9999,
@@ -18,7 +16,7 @@ var useStyles = createUseStyles(function(theme) {
             width: "100%",
             overflow: "hidden",
             position: "relative",
-            backgroundColor: theme.colors.loadingBarBackground
+            backgroundColor: s.colors.loadingBarBackground
         },
         progress: {
             position: "absolute",
@@ -26,17 +24,17 @@ var useStyles = createUseStyles(function(theme) {
             height: "100%",
             width: "100%",
             animation: "$progressIndicator 1.2s ease-out infinite",
-            animationDelay: TRANSITION_DURATION_MS,
-            backgroundColor: theme.colors.loadingBar
+            animationDelay: t,
+            backgroundColor: s.colors.loadingBar
         },
         innerProgress: {
             height: "100%",
             transform: "scaleX(0.1)",
             animation: "$innerProgressIndicator 1.2s ease-out infinite",
-            animationDelay: TRANSITION_DURATION_MS
+            animationDelay: t
         },
         enter: {
-            transition: "".concat(TRANSITION_DURATION_MS, "ms ease-out"),
+            transition: "".concat(t, "ms ease-out"),
             transform: "translateY(-4px)"
         },
         enterActive: {
@@ -44,7 +42,7 @@ var useStyles = createUseStyles(function(theme) {
         },
         exit: {
             transform: "translateY(0)",
-            transition: "".concat(TRANSITION_DURATION_MS, "ms ease-out")
+            transition: "".concat(t, "ms ease-out")
         },
         exitActive: {
             transform: "translateY(-4px)"
@@ -72,32 +70,31 @@ var useStyles = createUseStyles(function(theme) {
             }
         }
     };
-});
-var LoadingBar = function(param) {
-    var visible = param.visible;
-    var classes = useStyles();
-    return /*#__PURE__*/ _jsx(CSSTransition, {
-        in: visible,
-        timeout: TRANSITION_DURATION_MS,
+}), f = function(param) {
+    var s = param.visible;
+    var r = i();
+    return /* @__PURE__ */ e(a, {
+        in: s,
+        timeout: t,
         classNames: {
-            enter: classes.enter,
-            enterActive: classes.enterActive,
-            exit: classes.exit,
-            exitActive: classes.exitActive
+            enter: r.enter,
+            enterActive: r.enterActive,
+            exit: r.exit,
+            exitActive: r.exitActive
         },
-        unmountOnExit: true,
-        children: /*#__PURE__*/ _jsx(Portal, {
-            className: classes.portal,
-            children: /*#__PURE__*/ _jsx("div", {
-                className: classes.progressContainer,
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: classes.progress,
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: classes.innerProgress
+        unmountOnExit: !0,
+        children: /* @__PURE__ */ e(n, {
+            className: r.portal,
+            children: /* @__PURE__ */ e("div", {
+                className: r.progressContainer,
+                children: /* @__PURE__ */ e("div", {
+                    className: r.progress,
+                    children: /* @__PURE__ */ e("div", {
+                        className: r.innerProgress
                     })
                 })
             })
         })
     });
 };
-export default LoadingBar;
+export { f as default };

package/dist-es/master-detail-layout.js

@@ -1,22 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import GridLayout from "./grid-layout";
-import { useScreenSize } from "./hooks";
-import ResponsiveLayout from "./responsive-layout";
-var MasterDetailLayout = function(param) {
-    var isOpen = param.isOpen, master = param.master, detail = param.detail;
-    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
-    if (isTabletOrSmaller) {
-        return /*#__PURE__*/ _jsx(ResponsiveLayout, {
-            children: isOpen ? detail : master
-        });
-    }
-    return /*#__PURE__*/ _jsx(ResponsiveLayout, {
-        children: /*#__PURE__*/ _jsx(GridLayout, {
+import a from "./grid-layout.js";
+import { useScreenSize as l } from "./hooks.js";
+import o from "./responsive-layout.js";
+import { jsx as r } from "./_virtual/jsx-runtime.js";
+var u = function(param) {
+    var i = param.isOpen, t = param.master, e = param.detail;
+    var ref = l(), m = ref.isTabletOrSmaller;
+    return m ? /* @__PURE__ */ r(o, {
+        children: i ? e : t
+    }) : /* @__PURE__ */ r(o, {
+        children: /* @__PURE__ */ r(a, {
             template: "4+6",
-            left: master,
-            right: detail
+            left: t,
+            right: e
         })
     });
 };
-export default MasterDetailLayout;
+export { u as default };

package/dist-es/maybe-dismissable.js

@@ -1,24 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import { createUseStyles } from "./jss";
-import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
-import { useTheme } from "./hooks";
-import IconButton from "./icon-button";
-import { useIsInverseVariant } from "./theme-variant-context";
-import { applyAlpha } from "./utils/color";
-var DismissableContext = /*#__PURE__*/ React.createContext(false);
-export var useIsDismissable = function() {
-    return React.useContext(DismissableContext);
-};
-var useStyles = createUseStyles(function(theme) {
+import * as o from "react";
+import { createUseStyles as d } from "./jss.js";
+import u from "./generated/mistica-icons/icon-close-regular.js";
+import { useTheme as p } from "./hooks.js";
+import b from "./icon-button.js";
+import { useIsInverseVariant as f } from "./theme-variant-context.js";
+import { applyAlpha as h } from "./utils/color.js";
+import { jsx as e, Fragment as x, jsxs as g } from "./_virtual/jsx-runtime.js";
+var a = /*#__PURE__*/ o.createContext(!1), D = function() {
+    return o.useContext(a);
+}, C = d(function(s) {
     return {
         dismissableContainer: {
             position: "relative",
             display: "flex",
             flexShrink: 0,
             width: function(param) {
-                var width = param.width;
-                return width || "100%";
+                var t = param.width;
+                return t || "100%";
             }
         },
         dismissableButton: {
@@ -29,7 +27,8 @@ var useStyles = createUseStyles(function(theme) {
             height: 48,
             display: "flex",
             alignItems: "center",
-            justifyContent: "center"
+            justifyContent: "center",
+            zIndex: 2
         },
         dismissableCircleContainer: {
             display: "flex",
@@ -39,48 +38,42 @@ var useStyles = createUseStyles(function(theme) {
             height: 24,
             margin: "0 0 8px 8px",
             borderRadius: "50%",
-            backgroundColor: applyAlpha(theme.colors.background, 0.7)
+            backgroundColor: h(s.colors.background, 0.7)
         }
     };
-});
-var MaybeDismissable = function(param) {
-    var children = param.children, width = param.width, onClose = param.onClose, ariaLabel = param["aria-label"];
-    var isInverse = useIsInverseVariant();
-    var classes = useStyles({
-        isInverse: isInverse,
-        width: width
-    });
-    var ref = useTheme(), colors = ref.colors, texts = ref.texts;
-    if (!onClose) {
-        return /*#__PURE__*/ _jsx(_Fragment, {
-            children: children
-        });
-    }
-    return /*#__PURE__*/ _jsxs("section", {
-        className: classes.dismissableContainer,
-        "aria-label": ariaLabel,
+}), N = function(param) {
+    var s = param.children, t = param.width, r = param.onClose, l = param["aria-label"];
+    var n = f(), i = C({
+        isInverse: n,
+        width: t
+    }), ref = p(), m = ref.colors, c = ref.texts;
+    return r ? /* @__PURE__ */ g("section", {
+        className: i.dismissableContainer,
+        "aria-label": l,
         children: [
-            /*#__PURE__*/ _jsx(DismissableContext.Provider, {
-                value: true,
-                children: children
+            /* @__PURE__ */ e(a.Provider, {
+                value: !0,
+                children: s
             }),
-            /*#__PURE__*/ _jsx(IconButton, {
-                className: classes.dismissableButton,
-                onPress: onClose,
-                "aria-label": texts.closeButtonLabel,
+            /* @__PURE__ */ e(b, {
+                className: i.dismissableButton,
+                onPress: r,
+                "aria-label": c.closeButtonLabel,
                 style: {
                     display: "flex",
                     width: 48,
                     height: 48
                 },
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: classes.dismissableCircleContainer,
-                    children: /*#__PURE__*/ _jsx(IconCloseRegular, {
-                        color: colors.neutralHigh
+                children: /* @__PURE__ */ e("div", {
+                    className: i.dismissableCircleContainer,
+                    children: /* @__PURE__ */ e(u, {
+                        color: m.neutralHigh
                     })
                 })
             })
         ]
+    }) : /* @__PURE__ */ e(x, {
+        children: s
     });
 };
-export default MaybeDismissable;
+export { N as default, D as useIsDismissable };

package/dist-es/media-queries.css-mistica.js

@@ -0,0 +1,7 @@
+var e = {
+    tabletMinWidth: 768,
+    desktopMinWidth: 1024,
+    largeDesktopMinWidth: 1368,
+    desktopOrTabletMinHeight: 550
+};
+export { e as mediaQueriesConfig };

package/dist-es/menu.js

@@ -61,6 +61,30 @@ function _objectSpread(target) {
     }
     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 _objectSpreadProps(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 _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -72,15 +96,14 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { ESC, TAB } from "./utils/key-codes";
-import { createUseStyles } from "./jss";
-import { cancelEvent } from "./utils/dom";
-import Overlay from "./overlay";
-var MAX_HEIGHT_DEFAULT = 416;
-var useStyles = createUseStyles(function(param1) {
-    var colors = param1.colors;
+import * as o from "react";
+import { TAB as k, ESC as P } from "./utils/key-codes.js";
+import { createUseStyles as R } from "./jss.js";
+import { cancelEvent as H } from "./utils/dom.js";
+import D from "./overlay.js";
+import { jsxs as F, jsx as L } from "./_virtual/jsx-runtime.js";
+var g = 416, B = R(function(param) {
+    var m = param.colors;
     return {
         menuContainer: {
             zIndex: 12,
@@ -89,174 +112,140 @@ var useStyles = createUseStyles(function(param1) {
             listStyleType: "none",
             position: "absolute",
             top: function(param) {
-                var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.top;
+                var e = param.itemsComputedProps;
+                return e.top;
             },
             bottom: function(param) {
-                var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.bottom;
+                var e = param.itemsComputedProps;
+                return e.bottom;
             },
             right: function(param) {
-                var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.right;
+                var e = param.itemsComputedProps;
+                return e.right;
             },
             width: function(param) {
-                var width = param.width;
-                return width !== null && width !== void 0 ? width : "100%";
+                var e = param.width;
+                return e != null ? e : "100%";
             },
             borderRadius: 8,
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
-            backgroundColor: colors.backgroundContainer,
+            backgroundColor: m.backgroundContainer,
             transformOrigin: function(param) {
-                var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.transformOrigin;
+                var e = param.itemsComputedProps;
+                return e.transformOrigin;
             },
             transition: "opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s",
             opacity: function(param) {
-                var animateShowItems = param.animateShowItems;
-                return animateShowItems ? 1 : 0;
+                var e = param.animateShowItems;
+                return e ? 1 : 0;
             },
             transform: function(param) {
-                var animateShowItems = param.animateShowItems;
-                return animateShowItems ? "scale(1)" : "scale(0)";
+                var e = param.animateShowItems;
+                return e ? "scale(1)" : "scale(0)";
             },
             maxHeight: function(param) {
-                var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.maxHeight;
+                var e = param.itemsComputedProps;
+                return e.maxHeight;
             },
             overflowY: "auto"
         }
     };
-});
-var Menu = function(param) {
-    var renderTarget = param.renderTarget, renderMenu = param.renderMenu, width = param.width, _position = param.position, position = _position === void 0 ? "left" : _position;
-    var ref5 = _slicedToArray(React.useState(false), 2), isMenuOpen = ref5[0], setIsMenuOpen = ref5[1];
-    var ref1 = _slicedToArray(React.useState(null), 2), target = ref1[0], setTarget = ref1[1];
-    var ref2 = _slicedToArray(React.useState(null), 2), menu = ref2[0], setMenu = ref2[1];
-    var ref3 = _slicedToArray(React.useState(false), 2), animateShowItems = ref3[0], setAnimateShowItems = ref3[1];
-    var ref4 = _slicedToArray(React.useState({}), 2), itemsComputedProps = ref4[0], setItemsComputedProps = ref4[1];
-    React.useEffect(function() {
-        var targetRect = target === null || target === void 0 ? void 0 : target.getBoundingClientRect();
-        if (!menu || !targetRect || !isMenuOpen) {
-            setAnimateShowItems(false);
+}), N = function(param) {
+    var m = param.renderTarget, e = param.renderMenu, d = param.width, tmp = param.position, h = tmp === void 0 ? "left" : tmp;
+    var ref = _slicedToArray(o.useState(!1), 2), t = ref[0], s = ref[1], ref1 = _slicedToArray(o.useState(null), 2), a = ref1[0], x = ref1[1], ref2 = _slicedToArray(o.useState(null), 2), c = ref2[0], b = ref2[1], ref3 = _slicedToArray(o.useState(!1), 2), C = ref3[0], S = ref3[1], ref4 = _slicedToArray(o.useState({}), 2), M = ref4[0], l = ref4[1];
+    o.useEffect(function() {
+        var y;
+        var n = a == null ? void 0 : a.getBoundingClientRect();
+        if (!c || !n || !t) {
+            S(!1);
             return;
         }
-        var MARGIN_THRESHOLD = 12;
-        var topTarget = targetRect.top, widthTarget = targetRect.width, height = targetRect.height;
-        var top = topTarget + height;
-        var ref;
-        var spaceTaken = (ref = parseInt(window.getComputedStyle(menu).getPropertyValue("height"))) !== null && ref !== void 0 ? ref : 0;
-        var rightDirection = position === "left" ? "auto" : "calc(100% - ".concat(widthTarget, "px)");
-        // if it doesn't fit on bottom
-        if (top + spaceTaken + MARGIN_THRESHOLD > window.innerHeight) {
-            var availableSpaceBottom = window.innerHeight - top;
-            if (topTarget /* this is the available space on top */  > availableSpaceBottom) {
-                setItemsComputedProps({
-                    right: rightDirection,
-                    bottom: "100%",
-                    top: "auto",
-                    maxHeight: Math.min(topTarget, MAX_HEIGHT_DEFAULT),
-                    transformOrigin: "center bottom"
-                });
-            } else {
-                setItemsComputedProps({
-                    top: "100%",
-                    bottom: "auto",
-                    right: rightDirection,
-                    maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
-                    transformOrigin: "center top"
-                });
-            }
-        } else {
-            // if it fits on bottom
-            setItemsComputedProps({
+        var r = 12, u = n.top, I = n.width, O = n.height, i = u + O, T = (y = parseInt(window.getComputedStyle(c).getPropertyValue("height"))) != null ? y : 0, p = h === "left" ? "auto" : "calc(100% - ".concat(I, "px)");
+        if (i + T + r > window.innerHeight) {
+            var A = window.innerHeight - i;
+            u > A ? l({
+                right: p,
+                bottom: "100%",
+                top: "auto",
+                maxHeight: Math.min(u, g),
+                transformOrigin: "center bottom"
+            }) : l({
                 top: "100%",
                 bottom: "auto",
-                right: rightDirection,
-                maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
+                right: p,
+                maxHeight: Math.min(window.innerHeight - i - r, g),
                 transformOrigin: "center top"
             });
-        }
-        var requestAnimationFrameId;
-        if (isMenuOpen) {
-            requestAnimationFrameId = requestAnimationFrame(function() {
-                setAnimateShowItems(true);
-            });
-        }
-        return function() {
-            if (requestAnimationFrameId) {
-                cancelAnimationFrame(requestAnimationFrameId);
-            }
+        } else l({
+            top: "100%",
+            bottom: "auto",
+            right: p,
+            maxHeight: Math.min(window.innerHeight - i - r, g),
+            transformOrigin: "center top"
+        });
+        var f;
+        return t && (f = requestAnimationFrame(function() {
+            S(!0);
+        })), function() {
+            f && cancelAnimationFrame(f);
         };
     }, [
-        position,
-        isMenuOpen,
-        menu,
-        target,
-        width
+        h,
+        t,
+        c,
+        a,
+        d
     ]);
-    var classes = useStyles({
-        itemsComputedProps: itemsComputedProps,
-        animateShowItems: animateShowItems,
-        width: width
-    });
-    var targetProps = React.useMemo(function() {
+    var w = B({
+        itemsComputedProps: M,
+        animateShowItems: C,
+        width: d
+    }), v = o.useMemo(function() {
         return {
-            ref: setTarget,
+            ref: x,
             onPress: function() {
-                setIsMenuOpen(!isMenuOpen);
+                s(!t);
             }
         };
     }, [
-        setTarget,
-        isMenuOpen,
-        setIsMenuOpen
-    ]);
-    var menuProps = React.useMemo(function() {
+        x,
+        t,
+        s
+    ]), E = o.useMemo(function() {
         return {
-            ref: setMenu,
-            className: classes.menuContainer,
+            ref: b,
+            className: w.menuContainer,
             close: function() {
-                setIsMenuOpen(false);
+                s(!1);
             }
         };
     }, [
-        classes.menuContainer,
-        setMenu
+        w.menuContainer,
+        b
     ]);
-    React.useEffect(function() {
-        var handleKeyDown = function(e) {
-            if (isMenuOpen) {
-                if (e.keyCode === TAB) {
-                    cancelEvent(e);
-                }
-                if (e.keyCode === ESC) {
-                    setIsMenuOpen(false);
-                }
-            }
+    return o.useEffect(function() {
+        var n = function(r) {
+            t && (r.keyCode === k && H(r), r.keyCode === P && s(!1));
         };
-        document.addEventListener("keydown", handleKeyDown, false);
-        return function() {
-            document.removeEventListener("keydown", handleKeyDown, false);
+        return document.addEventListener("keydown", n, !1), function() {
+            document.removeEventListener("keydown", n, !1);
         };
-    });
-    return /*#__PURE__*/ _jsxs("div", {
+    }), /* @__PURE__ */ F("div", {
         style: {
             position: "relative"
         },
         children: [
-            isMenuOpen ? /*#__PURE__*/ _jsx(Overlay, {
-                onPress: function(e) {
-                    cancelEvent(e);
-                    setIsMenuOpen(false);
+            t ? /* @__PURE__ */ L(D, {
+                onPress: function(n) {
+                    H(n), s(!1);
                 },
-                disableScroll: true
+                disableScroll: !0
             }) : null,
-            renderTarget(_objectSpread({}, targetProps, {
-                isMenuOpen: isMenuOpen
+            m(_objectSpreadProps(_objectSpread({}, v), {
+                isMenuOpen: t
             })),
-            isMenuOpen ? renderMenu(menuProps) : null
+            t ? e(E) : null
         ]
     });
 };
-export default Menu;
+export { N as default };

package/dist-es/modal-context-provider.js

@@ -72,34 +72,29 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-var ModalStateContext = /*#__PURE__*/ React.createContext({
-    isModalOpen: false
-});
-var ModalStateSetterContext = /*#__PURE__*/ React.createContext(function() {});
-var ModalContextProvider = function(param) {
-    var children = param.children;
-    var ref = _slicedToArray(React.useState({
-        isModalOpen: false
-    }), 2), modalState = ref[0], setModalState = ref[1];
-    var updateModalState = React.useCallback(function(newState) {
-        setModalState(function(prevState) {
-            return _objectSpread({}, prevState, newState);
+import * as t from "react";
+import { jsx as e } from "./_virtual/jsx-runtime.js";
+var o = /*#__PURE__*/ t.createContext({
+    isModalOpen: !1
+}), a = /*#__PURE__*/ t.createContext(function() {}), S = function(param) {
+    var s = param.children;
+    var ref = _slicedToArray(t.useState({
+        isModalOpen: !1
+    }), 2), l = ref[0], n = ref[1], r = t.useCallback(function(d) {
+        n(function(c) {
+            return _objectSpread({}, c, d);
         });
     }, []);
-    return /*#__PURE__*/ _jsx(ModalStateContext.Provider, {
-        value: modalState,
-        children: /*#__PURE__*/ _jsx(ModalStateSetterContext.Provider, {
-            value: updateModalState,
-            children: children
+    return /* @__PURE__ */ e(o.Provider, {
+        value: l,
+        children: /* @__PURE__ */ e(a.Provider, {
+            value: r,
+            children: s
         })
     });
+}, x = function() {
+    return t.useContext(a);
+}, M = function() {
+    return t.useContext(o);
 };
-export var useSetModalState = function() {
-    return React.useContext(ModalStateSetterContext);
-};
-export var useModalState = function() {
-    return React.useContext(ModalStateContext);
-};
-export default ModalContextProvider;
+export { S as default, M as useModalState, x as useSetModalState };