@telefonica/mistica 16.0.0 → 16.1.0

package/dist-es/sheet.js

@@ -1,567 +0,0 @@
-"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 R, Fragment as z } from "react/jsx-runtime";
-import N from "classnames";
-import * as n from "react";
-import { transitionDuration as G, overlay as H, closingOverlay as V, SheetContainer as j, closingSheet as F, Sheet as K, SheetContent as $, handleContainer as X, handle as q, children as J, modalCloseButton as Q, stickyTitle as U, bodyContent as W, stickyButtons as Z, sheetActionRow as ee, infoItemIcon as te } from "./sheet.css-mistica.js";
-import re from "./focus-trap.js";
-import { useTheme as b, useDisableBodyScroll as ne, useIsInViewport as x, useScreenSize as M } from "./hooks.js";
-import { useSetModalStateEffect as oe } from "./modal-context-provider.js";
-import { Portal as ie } from "./portal.js";
-import { Text5 as se, Text3 as L, Text2 as B } from "./text.js";
-import { vars as D } from "./skins/skin-contract.css-mistica.js";
-import { RadioGroup as ce } from "./radio-button.js";
-import { RowList as ae, Row as le } from "./list.js";
-import Y from "./negative-box.js";
-import I from "./stack.js";
-import y from "./box.js";
-import de from "./touchable.js";
-import ue from "./inline.js";
-import me from "./circle.js";
-import C from "./divider.js";
-import { getPrefixedDataAttributes as he, getScrollableParentElement as fe } from "./utils/dom.js";
-import { ButtonPrimary as _, ButtonSecondary as pe, ButtonLink as ge } from "./button.js";
-import ve from "./generated/mistica-icons/icon-close-regular.js";
-import { InternalIconButton as Re } from "./icon-button.js";
-import Se from "./button-layout.js";
-import O from "./image.js";
-import { safeAreaInsetBottom as De } from "./utils/css.js";
-import { MOBILE_SIDE_MARGIN as ye, TABLET_SIDE_MARGIN as Ee, SMALL_DESKTOP_SIDE_MARGIN as Ie } from "./responsive-layout.css-mistica.js";
-import { modalClose as be, sheetConfirmButton as Te } from "./text-tokens.js";
-const ke = process.env.NODE_ENV === "test" ? 0 : G, P = (o)=>"touches" in o ? o.touches[0].clientY : o.clientY, Be = (param)=>{
-    let { closeModal: o } = param;
-    const [i, l] = n.useState(0), f = n.useRef(!1), p = n.useRef(0), h = n.useRef(0), t = n.useRef(0), c = n.useRef(0), { isDesktopOrBigger: u } = M(), r = n.useCallback((s)=>{
-        f.current = !0, p.current = 0, h.current = Date.now(), t.current = P(s);
-    }, []), m = n.useCallback(()=>{
-        f.current = !1, l(0);
-    }, []);
-    return n.useEffect(()=>{
-        if (u) return;
-        const s = (a)=>{
-            if (f.current) {
-                if (p.current < 3) {
-                    p.current++;
-                    return;
-                }
-                c.current = P(a), l(c.current - t.current);
-            }
-        }, d = ()=>{
-            if (!f.current) return;
-            const a = Date.now() - h.current, g = c.current - t.current, v = g / a;
-            f.current = !1, l(0), g > 50 && (c.current > window.innerHeight * 0.75 || v > 0.5) && o();
-        };
-        return document.addEventListener("touchmove", s), document.addEventListener("touchend", d), document.addEventListener("mousemove", s), document.addEventListener("mouseup", d), ()=>{
-            document.removeEventListener("touchmove", s), document.removeEventListener("touchend", d), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", d);
-        };
-    }, [
-        o,
-        u
-    ]), u ? {} : {
-        onTouchStart: r,
-        onMouseDown: r,
-        style: i ? {
-            transform: `translateY(${i}px)`,
-            transition: "none"
-        } : void 0,
-        onScroll: m,
-        overlayStyle: i ? {
-            // decrease opacity when dragging down the sheet
-            opacity: 0.25 + 1 - i / (window.innerHeight - t.current),
-            transition: "none"
-        } : void 0
-    };
-}, Le = {
-    closed: {
-        open: "opening"
-    },
-    opening: {
-        close: "closed",
-        transitionEnd: "open"
-    },
-    open: {
-        close: "closing"
-    },
-    closing: {
-        transitionEnd: "closed"
-    }
-}, we = (o, i)=>Le[o][i] || o, E = /*#__PURE__*/ n.forwardRef((param, f)=>{
-    let { onClose: o, children: i, dataAttributes: l } = param;
-    const { texts: p, t: h } = b(), [t, c] = n.useReducer(we, "closed"), u = n.useRef(!1), r = n.useId(), m = n.useCallback((v)=>{
-        v.target === v.currentTarget && c("transitionEnd");
-    }, []), s = ()=>{
-        t === "open" && c("close");
-    };
-    n.useEffect(()=>{
-        if (t === "opening" || t === "closing") {
-            const v = setTimeout(()=>{
-                c("transitionEnd");
-            }, ke);
-            return ()=>clearTimeout(v);
-        }
-    }, [
-        t
-    ]), n.useEffect(()=>{
-        t === "closed" ? u.current ? o == null || o() : c("open") : u.current = !0;
-    }, [
-        t,
-        o
-    ]);
-    const _Be = Be({
-        closeModal: s
-    }), { onScroll: d, overlayStyle: a } = _Be, g = _object_without_properties(_Be, [
-        "onScroll",
-        "overlayStyle"
-    ]);
-    return oe(), ne(t !== "closed"), t === "closed" ? null : /* @__PURE__ */ e(ie, {
-        children: /* @__PURE__ */ R(re, {
-            children: [
-                /* @__PURE__ */ e("div", {
-                    className: N(H, {
-                        [V]: t === "closing"
-                    }),
-                    style: a,
-                    onClick: s
-                }),
-                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-                    className: N(j, {
-                        [F]: t === "closing"
-                    }),
-                    onTransitionEnd: m,
-                    onAnimationEnd: m
-                }, g, he(l, "Sheet")), {
-                    ref: f,
-                    children: /* @__PURE__ */ e("div", {
-                        className: K,
-                        children: /* @__PURE__ */ R("div", {
-                            className: $,
-                            children: [
-                                /* @__PURE__ */ e("div", {
-                                    className: X,
-                                    children: /* @__PURE__ */ e("div", {
-                                        className: q
-                                    })
-                                }),
-                                /* @__PURE__ */ R("section", {
-                                    role: "dialog",
-                                    "aria-modal": "true",
-                                    "aria-labelledby": r,
-                                    onScroll: d,
-                                    className: J,
-                                    style: {
-                                        paddingBottom: De
-                                    },
-                                    children: [
-                                        typeof i == "function" ? i({
-                                            closeModal: s,
-                                            modalTitleId: r
-                                        }) : i,
-                                        /* @__PURE__ */ e("div", {
-                                            className: Q,
-                                            children: /* @__PURE__ */ e(Re, {
-                                                onPress: s,
-                                                "aria-label": p.modalClose || h(be),
-                                                Icon: ve,
-                                                bleedLeft: !0,
-                                                bleedRight: !0,
-                                                bleedY: !0
-                                            })
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    })
-                }))
-            ]
-        })
-    });
-}), k = {
-    mobile: ye,
-    tablet: Ee,
-    desktop: Ie
-}, T = (param)=>{
-    let { title: o, subtitle: i, description: l, modalTitleId: f, button: p, secondaryButton: h, link: t, children: c } = param;
-    const u = n.useRef(null), r = n.useRef(null), m = n.useRef(null);
-    n.useEffect(()=>{
-        r.current && (m.current = fe(r.current));
-    }, []);
-    const s = !x(u, !0, {
-        root: m.current
-    }), d = !x(r, !0, {
-        rootMargin: "1px",
-        // bottomScrollSignal div has 0px height so we need a 1px margin to trigger the intersection observer
-        root: m.current
-    }), a = !!p || !!h || !!t;
-    return /* @__PURE__ */ R(z, {
-        children: [
-            /* @__PURE__ */ e("div", {
-                ref: u
-            }),
-            /* @__PURE__ */ R("div", {
-                className: U,
-                children: [
-                    o ? /* @__PURE__ */ e(y, {
-                        paddingBottom: 8,
-                        paddingTop: {
-                            mobile: 0,
-                            desktop: 40
-                        },
-                        paddingX: k,
-                        children: /* @__PURE__ */ e(se, {
-                            as: "h2",
-                            id: f,
-                            truncate: !0,
-                            children: o
-                        })
-                    }) : /* @__PURE__ */ e(y, {
-                        paddingTop: {
-                            mobile: 0,
-                            desktop: 40
-                        }
-                    }),
-                    s && /* @__PURE__ */ e(C, {})
-                ]
-            }),
-            /* @__PURE__ */ e("div", {
-                className: W,
-                children: /* @__PURE__ */ e(y, {
-                    paddingBottom: a ? 0 : {
-                        desktop: 40,
-                        mobile: 0
-                    },
-                    paddingX: k,
-                    children: /* @__PURE__ */ R(I, {
-                        space: 8,
-                        children: [
-                            i || l ? /* @__PURE__ */ R(I, {
-                                space: {
-                                    mobile: 8,
-                                    desktop: 16
-                                },
-                                children: [
-                                    i && /* @__PURE__ */ e(L, {
-                                        as: "p",
-                                        regular: !0,
-                                        children: i
-                                    }),
-                                    l && (Array.isArray(l) ? /* @__PURE__ */ e(B, {
-                                        as: "div",
-                                        regular: !0,
-                                        color: D.colors.textSecondary,
-                                        children: l.map((g, v)=>/* @__PURE__ */ e("p", {
-                                                style: {
-                                                    margin: 0,
-                                                    marginBottom: v < l.length - 1 ? "1em" : void 0
-                                                },
-                                                children: g
-                                            }, v))
-                                    }) : /* @__PURE__ */ e(B, {
-                                        as: "p",
-                                        regular: !0,
-                                        color: D.colors.textSecondary,
-                                        children: l
-                                    }))
-                                ]
-                            }) : null,
-                            c
-                        ]
-                    })
-                })
-            }),
-            a && /* @__PURE__ */ R("div", {
-                className: Z,
-                children: [
-                    d && /* @__PURE__ */ e(C, {}),
-                    /* @__PURE__ */ e(y, {
-                        paddingY: {
-                            mobile: 16,
-                            desktop: 40
-                        },
-                        paddingX: k,
-                        children: /* @__PURE__ */ e(Se, {
-                            align: "full-width",
-                            link: t,
-                            primaryButton: p,
-                            secondaryButton: h
-                        })
-                    })
-                ]
-            }),
-            /* @__PURE__ */ e("div", {
-                ref: r
-            })
-        ]
-    });
-}, nt = /*#__PURE__*/ n.forwardRef((param, r)=>{
-    let { title: o, subtitle: i, description: l, items: f, selectedId: p, onClose: h, onSelect: t, button: c, dataAttributes: u } = param;
-    const [m, s] = n.useState(p), d = n.useRef(!1), { isDesktopOrBigger: a } = M(), { texts: g, t: v } = b();
-    return /* @__PURE__ */ e(E, {
-        onClose: h,
-        ref: r,
-        dataAttributes: _object_spread({
-            "component-name": "RadioListSheet"
-        }, u),
-        children: (param)=>{
-            let { closeModal: w, modalTitleId: A } = param;
-            return /* @__PURE__ */ e(T, {
-                title: o,
-                subtitle: i,
-                description: l,
-                modalTitleId: A,
-                button: a ? /* @__PURE__ */ e(_, {
-                    onPress: ()=>{
-                        d.current && (t == null || t(m || "")), w();
-                    },
-                    children: (c == null ? void 0 : c.text) || g.sheetConfirmButton || v(Te)
-                }) : void 0,
-                children: /* @__PURE__ */ e(Y, {
-                    children: /* @__PURE__ */ e(ce, {
-                        "aria-labelledby": A,
-                        name: "sheetselection",
-                        value: m,
-                        onChange: (S)=>{
-                            s(S), d.current = !0, !a && (t == null || t(S), setTimeout(()=>{
-                                w();
-                            }, 200));
-                        },
-                        children: /* @__PURE__ */ e(ae, {
-                            children: f.map((S)=>/* @__PURE__ */ {
-                                var _S_title;
-                                return e(le, {
-                                    title: (_S_title = S.title) !== null && _S_title !== void 0 ? _S_title : "",
-                                    description: S.description,
-                                    asset: S.asset,
-                                    radioValue: S.id
-                                }, S.id);
-                            })
-                        })
-                    })
-                })
-            });
-        }
-    });
-}), ot = /*#__PURE__*/ n.forwardRef((param, c)=>{
-    let { title: o, subtitle: i, description: l, items: f, onClose: p, onSelect: h, dataAttributes: t } = param;
-    const { isDarkMode: u } = b();
-    return /* @__PURE__ */ e(E, {
-        onClose: p,
-        ref: c,
-        dataAttributes: _object_spread({
-            "component-name": "ActionsListSheet"
-        }, t),
-        children: (param)=>{
-            let { closeModal: r, modalTitleId: m } = param;
-            return /* @__PURE__ */ e(T, {
-                title: o,
-                subtitle: i,
-                description: l,
-                modalTitleId: m,
-                children: /* @__PURE__ */ e(Y, {
-                    children: f.map((param)=>{
-                        let { id: s, style: d, title: a, icon: g } = param;
-                        return /* @__PURE__ */ e(de, {
-                            onPress: ()=>{
-                                h == null || h(s), r();
-                            },
-                            children: /* @__PURE__ */ R("div", {
-                                className: ee,
-                                children: [
-                                    g && /* @__PURE__ */ e(y, {
-                                        paddingRight: 16,
-                                        children: g.Icon ? /* @__PURE__ */ e(g.Icon, {
-                                            size: 24,
-                                            color: d === "destructive" ? D.colors.textLinkDanger : D.colors.neutralHigh
-                                        }) : /* @__PURE__ */ e(O, {
-                                            circular: !0,
-                                            src: u && g.urlDark ? g.urlDark : g.url,
-                                            width: 40
-                                        })
-                                    }),
-                                    /* @__PURE__ */ e(L, {
-                                        regular: !0,
-                                        color: d === "destructive" ? D.colors.textLinkDanger : D.colors.textPrimary,
-                                        children: a
-                                    })
-                                ]
-                            })
-                        }, s);
-                    })
-                })
-            });
-        }
-    });
-}), it = /*#__PURE__*/ n.forwardRef((param, t)=>{
-    let { title: o, subtitle: i, description: l, items: f, onClose: p, dataAttributes: h } = param;
-    const { isDarkMode: c } = b();
-    return /* @__PURE__ */ e(E, {
-        onClose: p,
-        ref: t,
-        dataAttributes: _object_spread({
-            "component-name": "InfoSheet"
-        }, h),
-        children: (param)=>{
-            let { modalTitleId: u } = param;
-            return /* @__PURE__ */ e(T, {
-                title: o,
-                subtitle: i,
-                description: l,
-                modalTitleId: u,
-                children: /* @__PURE__ */ e(y, {
-                    paddingBottom: 16,
-                    children: /* @__PURE__ */ e(I, {
-                        space: 16,
-                        role: "list",
-                        children: f.map((r, m)=>/* @__PURE__ */ R(ue, {
-                                space: 8,
-                                children: [
-                                    /* @__PURE__ */ e("div", {
-                                        className: te,
-                                        children: r.icon.type === "bullet" ? /* @__PURE__ */ e(me, {
-                                            size: 8,
-                                            backgroundColor: D.colors.textPrimary
-                                        }) : r.icon.Icon ? /* @__PURE__ */ e(r.icon.Icon, {
-                                            size: r.icon.type === "small" ? 16 : 24
-                                        }) : /* @__PURE__ */ e(O, {
-                                            src: c && r.icon.urlDark ? r.icon.urlDark : r.icon.url,
-                                            width: r.icon.type === "small" ? 16 : 24,
-                                            height: r.icon.type === "small" ? 16 : 24
-                                        })
-                                    }),
-                                    /* @__PURE__ */ R(I, {
-                                        space: 2,
-                                        children: [
-                                            /* @__PURE__ */ e(L, {
-                                                regular: !0,
-                                                children: r.title
-                                            }),
-                                            r.description && /* @__PURE__ */ e(B, {
-                                                regular: !0,
-                                                color: D.colors.textSecondary,
-                                                children: r.description
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }, r.id || m))
-                    })
-                })
-            });
-        }
-    });
-}), st = /*#__PURE__*/ n.forwardRef((param, r)=>{
-    let { title: o, subtitle: i, description: l, button: f, secondaryButton: p, buttonLink: h, onClose: t, dataAttributes: c, onPressButton: u } = param;
-    const m = (d, a)=>()=>{
-            u == null || u(a), d();
-        }, s = (_param)=>{
-        var { text: d } = _param, a = _object_without_properties(_param, [
-            "text"
-        ]);
-        return _object_spread({
-            children: d
-        }, a);
-    };
-    return /* @__PURE__ */ e(E, {
-        onClose: t,
-        ref: r,
-        dataAttributes: _object_spread({
-            "component-name": "ActionsSheet"
-        }, c),
-        children: (param)=>{
-            let { modalTitleId: d, closeModal: a } = param;
-            return /* @__PURE__ */ e(T, {
-                title: o,
-                subtitle: i,
-                description: l,
-                modalTitleId: d,
-                button: /* @__PURE__ */ e(_, _object_spread_props(_object_spread({}, s(f)), {
-                    onPress: m(a, "PRIMARY")
-                })),
-                secondaryButton: p ? /* @__PURE__ */ e(pe, _object_spread_props(_object_spread({}, s(p)), {
-                    onPress: m(a, "SECONDARY")
-                })) : void 0,
-                link: h ? /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, s(h)), {
-                    onPress: m(a, "LINK")
-                })) : void 0
-            });
-        }
-    });
-}), ct = E;
-export { ot as ActionsListSheet, st as ActionsSheet, it as InfoSheet, nt as RadioListSheet, T as SheetBody, ct as default };