@telefonica/mistica 16.0.0 → 16.1.0

package/dist-es/sheet-common.js

@@ -0,0 +1,366 @@
+"use client";
+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;
+}
+import { jsx as e, jsxs as g, Fragment as L } from "react/jsx-runtime";
+import T from "classnames";
+import * as t from "react";
+import { transitionDuration as k, overlay as w, closingOverlay as x, SheetContainer as A, closingSheet as M, Sheet as C, SheetContent as P, handleContainer as Y, handle as _, children as O, modalCloseButton as G, stickyTitle as j, bodyContent as F, stickyButtons as H } from "./sheet-common.css-mistica.js";
+import V from "./focus-trap.js";
+import { useTheme as $, useDisableBodyScroll as z, useIsInViewport as y, useScreenSize as K } from "./hooks.js";
+import { useSetModalStateEffect as X } from "./modal-context-provider.js";
+import { Portal as q } from "./portal.js";
+import { Text5 as J, Text3 as Q, Text2 as D } from "./text.js";
+import { vars as b } from "./skins/skin-contract.css-mistica.js";
+import B from "./stack.js";
+import E from "./box.js";
+import I from "./divider.js";
+import { getPrefixedDataAttributes as U, getScrollableParentElement as W } from "./utils/dom.js";
+import Z from "./generated/mistica-icons/icon-close-regular.js";
+import { InternalIconButton as ee } from "./icon-button.js";
+import te from "./button-layout.js";
+import { safeAreaInsetBottom as re } from "./utils/css.js";
+import { MOBILE_SIDE_MARGIN as ne, TABLET_SIDE_MARGIN as oe, SMALL_DESKTOP_SIDE_MARGIN as se } from "./responsive-layout.css-mistica.js";
+import { modalClose as ie } from "./text-tokens.js";
+const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, ae = (param)=>{
+    let { closeModal: n } = param;
+    const [o, i] = t.useState(0), l = t.useRef(!1), m = t.useRef(0), v = t.useRef(0), r = t.useRef(0), c = t.useRef(0), { isDesktopOrBigger: d } = K(), a = t.useCallback((s)=>{
+        l.current = !0, m.current = 0, v.current = Date.now(), r.current = N(s);
+    }, []), f = t.useCallback(()=>{
+        l.current = !1, i(0);
+    }, []);
+    return t.useEffect(()=>{
+        if (d) return;
+        const s = (p)=>{
+            if (l.current) {
+                if (m.current < 3) {
+                    m.current++;
+                    return;
+                }
+                c.current = N(p), i(c.current - r.current);
+            }
+        }, h = ()=>{
+            if (!l.current) return;
+            const p = Date.now() - v.current, S = c.current - r.current, u = S / p;
+            l.current = !1, i(0), S > 50 && (c.current > window.innerHeight * 0.75 || u > 0.5) && n();
+        };
+        return document.addEventListener("touchmove", s), document.addEventListener("touchend", h), document.addEventListener("mousemove", s), document.addEventListener("mouseup", h), ()=>{
+            document.removeEventListener("touchmove", s), document.removeEventListener("touchend", h), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", h);
+        };
+    }, [
+        n,
+        d
+    ]), d ? {} : {
+        onTouchStart: a,
+        onMouseDown: a,
+        style: o ? {
+            transform: `translateY(${o}px)`,
+            transition: "none"
+        } : void 0,
+        onScroll: f,
+        overlayStyle: o ? {
+            // decrease opacity when dragging down the sheet
+            opacity: 0.25 + 1 - o / (window.innerHeight - r.current),
+            transition: "none"
+        } : void 0
+    };
+}, le = {
+    closed: {
+        open: "opening"
+    },
+    opening: {
+        close: "closed",
+        transitionEnd: "open"
+    },
+    open: {
+        close: "closing"
+    },
+    closing: {
+        transitionEnd: "closed"
+    }
+}, de = (n, o)=>le[n][o] || n, ue = /*#__PURE__*/ t.forwardRef((param, l)=>{
+    let { onClose: n, children: o, dataAttributes: i } = param;
+    const { texts: m, t: v } = $(), [r, c] = t.useReducer(de, "closed"), d = t.useRef(!1), a = t.useId(), f = t.useCallback((u)=>{
+        u.target === u.currentTarget && c("transitionEnd");
+    }, []), s = ()=>{
+        r === "open" && c("close");
+    };
+    t.useEffect(()=>{
+        if (r === "opening" || r === "closing") {
+            const u = setTimeout(()=>{
+                c("transitionEnd");
+            }, ce);
+            return ()=>clearTimeout(u);
+        }
+    }, [
+        r
+    ]), t.useEffect(()=>{
+        r === "closed" ? d.current ? n == null || n() : c("open") : d.current = !0;
+    }, [
+        r,
+        n
+    ]);
+    const _ae = ae({
+        closeModal: s
+    }), { onScroll: h, overlayStyle: p } = _ae, S = _object_without_properties(_ae, [
+        "onScroll",
+        "overlayStyle"
+    ]);
+    return X(), z(r !== "closed"), r === "closed" ? null : /* @__PURE__ */ e(q, {
+        children: /* @__PURE__ */ g(V, {
+            children: [
+                /* @__PURE__ */ e("div", {
+                    className: T(w, {
+                        [x]: r === "closing"
+                    }),
+                    style: p,
+                    onClick: s
+                }),
+                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
+                    className: T(A, {
+                        [M]: r === "closing"
+                    }),
+                    onTransitionEnd: f,
+                    onAnimationEnd: f
+                }, S, U(i, "Sheet")), {
+                    ref: l,
+                    children: /* @__PURE__ */ e("div", {
+                        className: C,
+                        children: /* @__PURE__ */ g("div", {
+                            className: P,
+                            children: [
+                                /* @__PURE__ */ e("div", {
+                                    className: Y,
+                                    children: /* @__PURE__ */ e("div", {
+                                        className: _
+                                    })
+                                }),
+                                /* @__PURE__ */ g("section", {
+                                    role: "dialog",
+                                    "aria-modal": "true",
+                                    "aria-labelledby": a,
+                                    onScroll: h,
+                                    className: O,
+                                    style: {
+                                        paddingBottom: re
+                                    },
+                                    children: [
+                                        typeof o == "function" ? o({
+                                            closeModal: s,
+                                            modalTitleId: a
+                                        }) : o,
+                                        /* @__PURE__ */ e("div", {
+                                            className: G,
+                                            children: /* @__PURE__ */ e(ee, {
+                                                onPress: s,
+                                                "aria-label": m.modalClose || v(ie),
+                                                Icon: Z,
+                                                bleedLeft: !0,
+                                                bleedRight: !0,
+                                                bleedY: !0
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                }))
+            ]
+        })
+    });
+}), R = {
+    mobile: ne,
+    tablet: oe,
+    desktop: se
+}, xe = (param)=>{
+    let { title: n, subtitle: o, description: i, modalTitleId: l, button: m, secondaryButton: v, link: r, children: c } = param;
+    const d = t.useRef(null), a = t.useRef(null), f = t.useRef(null);
+    t.useEffect(()=>{
+        a.current && (f.current = W(a.current));
+    }, []);
+    const s = !y(d, !0, {
+        root: f.current
+    }), h = !y(a, !0, {
+        rootMargin: "1px",
+        // bottomScrollSignal div has 0px height so we need a 1px margin to trigger the intersection observer
+        root: f.current
+    }), p = !!m || !!v || !!r;
+    return /* @__PURE__ */ g(L, {
+        children: [
+            /* @__PURE__ */ e("div", {
+                ref: d
+            }),
+            /* @__PURE__ */ g("div", {
+                className: j,
+                children: [
+                    n ? /* @__PURE__ */ e(E, {
+                        paddingBottom: 8,
+                        paddingTop: {
+                            mobile: 0,
+                            desktop: 40
+                        },
+                        paddingX: R,
+                        children: /* @__PURE__ */ e(J, {
+                            as: "h2",
+                            id: l,
+                            truncate: !0,
+                            children: n
+                        })
+                    }) : /* @__PURE__ */ e(E, {
+                        paddingTop: {
+                            mobile: 0,
+                            desktop: 40
+                        }
+                    }),
+                    s && /* @__PURE__ */ e(I, {})
+                ]
+            }),
+            /* @__PURE__ */ e("div", {
+                className: F,
+                children: /* @__PURE__ */ e(E, {
+                    paddingBottom: p ? 0 : {
+                        desktop: 40,
+                        mobile: 0
+                    },
+                    paddingX: R,
+                    children: /* @__PURE__ */ g(B, {
+                        space: 8,
+                        children: [
+                            o || i ? /* @__PURE__ */ g(B, {
+                                space: {
+                                    mobile: 8,
+                                    desktop: 16
+                                },
+                                children: [
+                                    o && /* @__PURE__ */ e(Q, {
+                                        as: "p",
+                                        regular: !0,
+                                        children: o
+                                    }),
+                                    i && (Array.isArray(i) ? /* @__PURE__ */ e(D, {
+                                        as: "div",
+                                        regular: !0,
+                                        color: b.colors.textSecondary,
+                                        children: i.map((S, u)=>/* @__PURE__ */ e("p", {
+                                                style: {
+                                                    margin: 0,
+                                                    marginBottom: u < i.length - 1 ? "1em" : void 0
+                                                },
+                                                children: S
+                                            }, u))
+                                    }) : /* @__PURE__ */ e(D, {
+                                        as: "p",
+                                        regular: !0,
+                                        color: b.colors.textSecondary,
+                                        children: i
+                                    }))
+                                ]
+                            }) : null,
+                            c
+                        ]
+                    })
+                })
+            }),
+            p && /* @__PURE__ */ g("div", {
+                className: H,
+                children: [
+                    h && /* @__PURE__ */ e(I, {}),
+                    /* @__PURE__ */ e(E, {
+                        paddingY: {
+                            mobile: 16,
+                            desktop: 40
+                        },
+                        paddingX: R,
+                        children: /* @__PURE__ */ e(te, {
+                            align: "full-width",
+                            link: r,
+                            primaryButton: m,
+                            secondaryButton: v
+                        })
+                    })
+                ]
+            }),
+            /* @__PURE__ */ e("div", {
+                ref: a
+            })
+        ]
+    });
+}, Ae = ue;
+export { xe as SheetBody, Ae as default };

package/dist-es/sheet-info.css-mistica.js

@@ -0,0 +1,3 @@
+import "./sprinkles.css.ts.vanilla.css-mistica.js";
+var f = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfiw";
+export { f as infoItemIcon };

package/dist-es/sheet-info.js

@@ -0,0 +1,101 @@
+"use client";
+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;
+}
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import * as u from "react";
+import I from "./inline.js";
+import x from "./circle.js";
+import y, { SheetBody as S } from "./sheet-common.js";
+import { useTheme as g } from "./hooks.js";
+import k from "./box.js";
+import t from "./stack.js";
+import { Text3 as b, Text2 as B } from "./text.js";
+import { vars as c } from "./skins/skin-contract.css-mistica.js";
+import { infoItemIcon as D } from "./sheet-info.css-mistica.js";
+import T from "./image.js";
+const j = /*#__PURE__*/ u.forwardRef((param, m)=>{
+    let { title: n, subtitle: i, description: l, items: a, onClose: s, dataAttributes: p } = param;
+    const { isDarkMode: d } = g();
+    return /* @__PURE__ */ r(y, {
+        onClose: s,
+        ref: m,
+        dataAttributes: _object_spread({
+            "component-name": "InfoSheet"
+        }, p),
+        children: (param)=>{
+            let { modalTitleId: f } = param;
+            return /* @__PURE__ */ r(S, {
+                title: n,
+                subtitle: i,
+                description: l,
+                modalTitleId: f,
+                children: /* @__PURE__ */ r(k, {
+                    paddingBottom: 16,
+                    children: /* @__PURE__ */ r(t, {
+                        space: 16,
+                        role: "list",
+                        children: a.map((o, h)=>/* @__PURE__ */ e(I, {
+                                space: 8,
+                                children: [
+                                    /* @__PURE__ */ r("div", {
+                                        className: D,
+                                        children: o.icon.type === "bullet" ? /* @__PURE__ */ r(x, {
+                                            size: 8,
+                                            backgroundColor: c.colors.textPrimary
+                                        }) : o.icon.Icon ? /* @__PURE__ */ r(o.icon.Icon, {
+                                            size: o.icon.type === "small" ? 16 : 24
+                                        }) : /* @__PURE__ */ r(T, {
+                                            src: d && o.icon.urlDark ? o.icon.urlDark : o.icon.url,
+                                            width: o.icon.type === "small" ? 16 : 24,
+                                            height: o.icon.type === "small" ? 16 : 24
+                                        })
+                                    }),
+                                    /* @__PURE__ */ e(t, {
+                                        space: 2,
+                                        children: [
+                                            /* @__PURE__ */ r(b, {
+                                                regular: !0,
+                                                children: o.title
+                                            }),
+                                            o.description && /* @__PURE__ */ r(B, {
+                                                regular: !0,
+                                                color: c.colors.textSecondary,
+                                                children: o.description
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, o.id || h))
+                    })
+                })
+            });
+        }
+    });
+}), E = j;
+export { E as default };

package/dist-es/sheet-native.js

@@ -0,0 +1,164 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+const I = (e)=>Array.isArray(e) ? e.length ? e.join(`
+
+`) : void 0 : e, a = (e, param)=>{
+    let { title: r, subtitle: t, description: n, selectedId: s, items: o } = param;
+    return e({
+        title: r,
+        subtitle: t,
+        // TODO: add multiline support to native sheet
+        description: I(n),
+        content: [
+            {
+                type: "LIST",
+                id: "list-0",
+                listType: "SINGLE_SELECTION",
+                autoSubmit: !0,
+                selectedIds: typeof s == "string" ? [
+                    s
+                ] : [],
+                items: o
+            }
+        ]
+    }).then((param)=>{
+        let { action: i, result: d } = param;
+        return i === "SUBMIT" ? {
+            action: i,
+            selectedId: d[0].selectedIds[0]
+        } : {
+            action: i,
+            selectedId: null
+        };
+    });
+}, T = (e, param)=>{
+    let { title: r, subtitle: t, description: n, items: s } = param;
+    return e({
+        title: r,
+        subtitle: t,
+        // TODO: add multiline support to native sheet
+        description: I(n),
+        content: [
+            {
+                type: "LIST",
+                id: "list-0",
+                listType: "ACTIONS",
+                autoSubmit: !0,
+                selectedIds: [],
+                items: s
+            }
+        ]
+    }).then((param)=>{
+        let { action: o, result: i } = param;
+        return o === "SUBMIT" ? {
+            action: o,
+            selectedId: i[0].selectedIds[0]
+        } : {
+            action: o,
+            selectedId: null
+        };
+    });
+}, N = function() {
+    var _ref = _async_to_generator(function*(e, param) {
+        let { title: r, subtitle: t, description: n, items: s } = param;
+        yield e({
+            title: r,
+            subtitle: t,
+            // TODO: add multiline support to native sheet
+            description: I(n),
+            content: [
+                {
+                    type: "LIST",
+                    id: "list-0",
+                    listType: "INFORMATIVE",
+                    autoSubmit: !1,
+                    selectedIds: [],
+                    items: s
+                }
+            ]
+        });
+    });
+    return function N(e, _) {
+        return _ref.apply(this, arguments);
+    };
+}(), p = (e, param)=>{
+    let { title: r, subtitle: t, description: n, button: s, secondaryButton: o, link: i } = param;
+    return e({
+        title: r,
+        subtitle: t,
+        // TODO: add multiline support to native sheet
+        description: I(n),
+        content: [
+            {
+                type: "BOTTOM_ACTIONS",
+                id: "bottom-actions-0",
+                button: s,
+                secondaryButton: o,
+                link: i
+            }
+        ]
+    }).then((param)=>{
+        let { action: d, result: l } = param;
+        if (d === "SUBMIT") {
+            const u = l.find((param)=>{
+                let { id: S } = param;
+                return S === "bottom-actions-0";
+            }), c = u == null ? void 0 : u.selectedIds[0];
+            if (c === "PRIMARY" || c === "SECONDARY" || c === "LINK") return {
+                action: c
+            };
+        }
+        return {
+            action: "DISMISS"
+        };
+    });
+}, h = (e, r)=>{
+    let t;
+    const { type: n, props: s } = r;
+    switch(n){
+        case "INFO":
+            t = N(e, s);
+            break;
+        case "ACTIONS_LIST":
+            t = T(e, s);
+            break;
+        case "RADIO_LIST":
+            t = a(e, s);
+            break;
+        case "ACTIONS":
+            t = p(e, s);
+            break;
+        default:
+            const o = n;
+            throw new Error(`Unknown sheet type: ${o}`);
+    }
+    return t;
+};
+export { h as showNativeSheet };