@telefonica/mistica 13.5.0 → 13.6.1

package/dist/menu.js

@@ -4,16 +4,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>Y
+    get: ()=>rt
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
-const _dynamic = require("@vanilla-extract/dynamic");
 const _keyCodesJs = require("./utils/key-codes.js");
 const _domJs = require("./utils/dom.js");
 const _overlayJs = /*#__PURE__*/ _interopRequireDefault(require("./overlay.js"));
 const _menuCssMisticaJs = require("./menu.css-mistica.js");
-const _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
+const _hooksJs = require("./hooks.js");
+const _portalJs = require("./portal.js");
+const _dynamic = require("@vanilla-extract/dynamic");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -111,102 +112,105 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-const h = 416, Y = (param)=>{
-    let { renderTarget: I , renderMenu: b , width: l , position: d = "left" , dataAttributes: v  } = param;
-    const [t, i] = _react.useState(!1), [a, w] = _react.useState(null), [u, y] = _react.useState(null), [H, x] = _react.useState(!1), [r, c] = _react.useState(null);
+const J = 350, f = 400, v = 12, rt = (param)=>{
+    let { renderTarget: y , renderMenu: A , width: c = J , position: O = "left" , dataAttributes: P  } = param;
+    const [e, i] = _react.useState(!1), [a, M] = _react.useState(null), [u, C] = _react.useState(null), [T, w] = _react.useState(!1), [s, m] = _react.useState(null), p = (0, _hooksJs.useWindowSize)();
     _react.useEffect(()=>{
-        var M;
+        var I;
         const o = a == null ? void 0 : a.getBoundingClientRect();
-        if (!u || !o || !t) {
-            x(!1);
+        if (!u || !o || !e) {
+            w(!1);
             return;
         }
-        const n = 12, { top: f , width: O , height: C  } = o, m = f + C, P = (M = parseInt(window.getComputedStyle(u).getPropertyValue("height"))) != null ? M : 0, p = d === "left" ? "auto" : `calc(100% - ${O}px)`;
-        if (m + P + n > window.innerHeight) {
-            const T = window.innerHeight - m;
-            f > T ? c({
-                right: p,
-                bottom: "100%",
-                top: "auto",
-                maxHeight: Math.min(f, h),
-                transformOrigin: "center bottom"
-            }) : c({
-                top: "100%",
-                bottom: "auto",
-                right: p,
-                maxHeight: Math.min(window.innerHeight - m - n, h),
-                transformOrigin: "center top"
-            });
-        } else c({
-            top: "100%",
+        const { top: n , width: $ , left: E , bottom: d  } = o, g = (I = parseInt(window.getComputedStyle(u).getPropertyValue("height"))) != null ? I : 0, l = O === "left" ? E : E + $ - c, h = p.height - d - v, x = n - v, L = h > g, R = x > g;
+        L ? m({
+            left: l,
+            top: `${d}px`,
+            bottom: "auto",
+            maxHeight: f,
+            transformOrigin: "center top"
+        }) : R ? m({
+            left: l,
+            top: `${n - g}px`,
+            bottom: "auto",
+            maxHeight: f,
+            transformOrigin: "center bottom"
+        }) : h > x ? m({
+            left: l,
+            top: `${d}px`,
             bottom: "auto",
-            right: p,
-            maxHeight: Math.min(window.innerHeight - m - n, h),
+            maxHeight: Math.min(h, f),
             transformOrigin: "center top"
+        }) : m({
+            left: l,
+            top: "auto",
+            bottom: `${p.height - n}px`,
+            maxHeight: Math.min(x, f),
+            transformOrigin: "center bottom"
         });
-        let g;
-        return t && (g = requestAnimationFrame(()=>{
-            x(!0);
+        let S;
+        return e && (S = requestAnimationFrame(()=>{
+            w(!0);
         })), ()=>{
-            g && cancelAnimationFrame(g);
+            S && cancelAnimationFrame(S);
         };
     }, [
-        d,
-        t,
+        O,
+        e,
         u,
         a,
-        l
+        c,
+        p
     ]);
-    const A = _react.useMemo(()=>({
-            ref: w,
+    const D = _react.useMemo(()=>({
+            ref: M,
             onPress: ()=>{
-                i(!t);
+                i(!e);
             }
         }), [
-        w,
-        t,
+        M,
+        e,
         i
-    ]), E = _react.useMemo(()=>({
-            ref: y,
-            className: (0, _classnames.default)(_menuCssMisticaJs.menuContainer, H ? _menuCssMisticaJs.showItems : _menuCssMisticaJs.hideItems),
+    ]), F = _react.useMemo(()=>({
+            ref: C,
+            className: (0, _classnames.default)(_menuCssMisticaJs.menuContainer, T ? _menuCssMisticaJs.showItems : _menuCssMisticaJs.hideItems),
             close: ()=>{
                 i(!1);
             }
         }), [
-        H
+        T
     ]);
     return _react.useEffect(()=>{
         const o = (n)=>{
-            t && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && i(!1));
+            e && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && i(!1));
         };
         return document.addEventListener("keydown", o, !1), ()=>{
             document.removeEventListener("keydown", o, !1);
         };
-    }), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: (0, _sprinklesCssMisticaJs.sprinkles)({
-            position: "relative"
-        }),
-        style: _objectSpread({}, (0, _dynamic.assignInlineVars)(_objectSpread({
-            [_menuCssMisticaJs.vars.width]: l ? `${l}px` : "100%"
-        }, r ? {
-            [_menuCssMisticaJs.vars.top]: r.top,
-            [_menuCssMisticaJs.vars.bottom]: r.bottom,
-            [_menuCssMisticaJs.vars.right]: r.right,
-            [_menuCssMisticaJs.vars.transformOrigin]: r.transformOrigin,
-            [_menuCssMisticaJs.vars.maxHeight]: `${r.maxHeight}px`
-        } : {})))
-    }, (0, _domJs.getPrefixedDataAttributes)(v, "Menu")), {
+    }), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(P, "Menu")), {
         children: [
-            t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
-                onPress: (o)=>{
-                    (0, _domJs.cancelEvent)(o), i(!1);
-                },
-                disableScroll: !0
-            }) : null,
-            I(_objectSpreadProps(_objectSpread({}, A), {
-                isMenuOpen: t
+            y(_objectSpreadProps(_objectSpread({}, D), {
+                isMenuOpen: e
             })),
-            t ? b(E) : null
+            e ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_portalJs.Portal, {
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
+                    onPress: (o)=>{
+                        (0, _domJs.cancelEvent)(o), i(!1);
+                    },
+                    disableScroll: !0,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        style: _objectSpread({}, (0, _dynamic.assignInlineVars)(_objectSpread({}, s ? {
+                            [_menuCssMisticaJs.vars.top]: s.top,
+                            [_menuCssMisticaJs.vars.bottom]: s.bottom,
+                            [_menuCssMisticaJs.vars.left]: `${s.left}px`,
+                            [_menuCssMisticaJs.vars.transformOrigin]: s.transformOrigin,
+                            [_menuCssMisticaJs.vars.maxHeight]: `${s.maxHeight}px`,
+                            [_menuCssMisticaJs.vars.width]: `${c}px`
+                        } : {}))),
+                        children: A(F)
+                    })
+                })
+            }) : null
         ]
     }));
 };

package/dist/package-version.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
     enumerable: true,
     get: ()=>o
 });
-const o = "13.5.0";
+const o = "13.6.1";

package/dist/text-field.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>q
+    get: ()=>z
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _formContextJs = require("./form-context.js");
 const _textFieldBaseJs = require("./text-field-base.js");
 const _commonJs = require("./utils/common.js");
+const _domJs = require("./utils/dom.js");
+const _hooksJs = require("./hooks.js");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -129,8 +131,17 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const q = /*#__PURE__*/ _react.forwardRef((_param, v)=>{
-    var { disabled: n , error: s , helperText: f , name: o , optional: m , validate: a , onChangeValue: p , onChange: R , value: d , defaultValue: x , onBlur: r , onFocus: i , onPress: T  } = _param, u = _objectWithoutProperties(_param, [
+const F = (c, t, r, i)=>{
+    (0, _hooksJs.useIsomorphicLayoutEffect)(()=>{
+        c && t && r && t.length > r && i && i((0, _domJs.createChangeEvent)(c, t.slice(0, r)));
+    }, [
+        i,
+        t,
+        r,
+        c
+    ]);
+}, z = /*#__PURE__*/ _react.forwardRef((_param, g)=>{
+    var { disabled: c , error: t , helperText: r , name: i , optional: m , validate: a , onChangeValue: p , onChange: R , value: d , defaultValue: T , onBlur: u , onFocus: l , onPress: x  } = _param, s = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -145,33 +156,33 @@ const q = /*#__PURE__*/ _react.forwardRef((_param, v)=>{
         "onFocus",
         "onPress"
     ]);
-    const e = _react.useRef(null), g = (t)=>t, b = (t)=>{
-        u.multiline && e.current && (e.current.scrollTop = 0), r == null || r(t);
-    }, h = (t)=>{
-        u.multiline && setTimeout(()=>{
+    const e = _react.useRef(null), v = (o)=>o, h = (o)=>{
+        s.multiline && e.current && (e.current.scrollTop = 0), u == null || u(o);
+    }, y = (o)=>{
+        s.multiline && setTimeout(()=>{
             if (e.current) {
-                const j = e.current.value;
-                e.current.value = "", e.current.value = j, e.current.scrollTop = e.current.scrollHeight;
+                const E = e.current.value;
+                e.current.value = "", e.current.value = E, e.current.scrollTop = e.current.scrollHeight;
             }
-        }, 0), i == null || i(t);
-    }, l = (0, _formContextJs.useFieldProps)({
-        name: o,
+        }, 0), l == null || l(o);
+    }, f = (0, _formContextJs.useFieldProps)({
+        name: i,
         value: d,
-        defaultValue: x,
-        processValue: g,
-        helperText: f,
+        defaultValue: T,
+        processValue: v,
+        helperText: r,
         optional: m,
-        error: s,
-        disabled: n,
-        onBlur: b,
+        error: t,
+        disabled: c,
+        onBlur: h,
         validate: a,
         onChange: R,
         onChangeValue: p
     });
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, _objectSpreadProps(_objectSpread({}, u, l), {
-        onClick: T,
-        inputRef: (0, _commonJs.combineRefs)(e, l.inputRef, v),
-        onFocus: h,
+    return F(e.current, f.value, s.maxLength, f.onChange), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, _objectSpreadProps(_objectSpread({}, s, f), {
+        onClick: x,
+        inputRef: (0, _commonJs.combineRefs)(e, f.inputRef, g),
+        onFocus: y,
         type: "text"
     }));
 });

package/dist/text.d.ts

@@ -15,6 +15,8 @@ export interface TextPresetProps {
     role?: string;
     'aria-level'?: number;
     dataAttributes?: DataAttributes;
+    forceMobileSizes?: boolean;
+    textShadow?: string;
 }
 interface TextProps extends TextPresetProps {
     weight?: FontWeight;
@@ -31,6 +33,7 @@ interface TextProps extends TextPresetProps {
     /** in pixels, will be converted to rem in runtime */
     desktopLineHeight?: string | number;
     letterSpacing?: number;
+    forzeMobileSize?: never;
 }
 export declare const Text: React.FC<TextProps>;
 interface LightProps extends TextPresetProps {