@telefonica/mistica 12.8.0 → 12.9.1

package/dist-es/text-field-base.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 _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -99,16 +123,16 @@ 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 { createUseStyles } from "./jss";
-import { Label, HelperText, FieldContainer, LABEL_LEFT_POSITION, LABEL_SCALE_MOBILE, LABEL_SCALE_DESKTOP } from "./text-field-components";
-import { Text3 } from "./text";
-import { isIos, isRunningAcceptanceTest, isFirefox, isSafari } from "./utils/platform";
-import { useAriaId, useTheme, useScreenSize, useIsomorphicLayoutEffect } from "./hooks";
-import classNames from "classnames";
-import { combineRefs } from "./utils/common";
-var commonInputStyles = function(theme) {
+import * as l from "react";
+import { createUseStyles as B } from "./jss.js";
+import { FieldContainer as ne, HelperText as oe, Label as ae, LABEL_LEFT_POSITION as L, LABEL_SCALE_MOBILE as re, LABEL_SCALE_DESKTOP as le } from "./text-field-components.js";
+import { Text3 as O } from "./text.js";
+import { isSafari as se, isRunningAcceptanceTest as _, isFirefox as R, isIos as de } from "./utils/platform.js";
+import { useAriaId as P, useTheme as $, useScreenSize as ce, useIsomorphicLayoutEffect as pe } from "./hooks.js";
+import ge from "classnames";
+import { combineRefs as D } from "./utils/common.js";
+import { jsxs as fe, jsx as a } from "./_virtual/jsx-runtime.js";
+var v = function(i) {
     return {
         background: "none",
         border: 0,
@@ -116,27 +140,20 @@ var commonInputStyles = function(theme) {
         fontSize: "inherit",
         lineHeight: "inherit",
         paddingRight: function(param) {
-            var endIcon = param.endIcon;
-            return endIcon ? 0 : 16;
+            var e = param.endIcon;
+            return e ? 0 : 16;
         },
         paddingLeft: function(param) {
-            var prefix = param.prefix, startIcon = param.startIcon;
-            if (prefix) {
-                return 0;
-            }
-            if (startIcon) {
-                return 48;
-            }
-            return 12;
+            var e = param.prefix, o = param.startIcon;
+            return e ? 0 : o ? 48 : 12;
         },
-        /* Workaround to avoid huge bullets on ios devices (-apple-system font related) */ fontFamily: function(param) {
-            var type = param.type;
-            return type === "password" && isIos(theme.platformOverrides) && !isRunningAcceptanceTest(theme.platformOverrides) ? "arial" : "inherit";
+        fontFamily: function(param) {
+            var e = param.type;
+            return e === "password" && de(i.platformOverrides) && !_(i.platformOverrides) ? "arial" : "inherit";
         },
-        color: theme.colors.textPrimary,
-        caretColor: theme.colors.controlActivated,
+        color: i.colors.textPrimary,
+        caretColor: i.colors.controlActivated,
         width: "100%",
-        // Seems like 'display: flex' is causing issues on firefox and the input takes over the whole space https://stackoverflow.com/questions/43314921/strange-input-widths-in-firefox-vs-chrome
         minWidth: 0,
         textOverflow: "ellipsis",
         "&::placeholder ": {
@@ -150,8 +167,7 @@ var commonInputStyles = function(theme) {
         },
         boxShadow: "none"
     };
-};
-var useStyles = createUseStyles(function(theme) {
+}, ue = B(function(i) {
     var _obj, _obj1, _obj2;
     return {
         container: {
@@ -163,8 +179,8 @@ var useStyles = createUseStyles(function(theme) {
             width: "100%",
             display: "inline-flex",
             alignSelf: function(param) {
-                var prefix = param.prefix;
-                return prefix ? "baseline" : "initial";
+                var e = param.prefix;
+                return e ? "baseline" : "initial";
             },
             "& > div": {
                 width: "100%",
@@ -175,30 +191,30 @@ var useStyles = createUseStyles(function(theme) {
             resize: "none",
             padding: 0,
             marginTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 28 : 16;
+                var e = param.hasLabel;
+                return e ? 28 : 16;
             }
-        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj, i.mq.tabletOrSmaller, {
             marginTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 24 : 16;
+                var e = param.hasLabel;
+                return e ? 24 : 16;
             }
-        }), _defineProperty(_obj, "paddingBottom", "8px"), _obj), commonInputStyles(theme)),
-        input: _objectSpread((_obj1 = {
+        }), _defineProperty(_obj, "paddingBottom", "8px"), _obj), v(i)),
+        input: _objectSpreadProps(_objectSpread((_obj1 = {
             position: "relative",
             paddingTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 28 : 16;
+                var e = param.hasLabel;
+                return e ? 28 : 16;
             }
-        }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj1, i.mq.tabletOrSmaller, {
             paddingTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 24 : 16;
+                var e = param.hasLabel;
+                return e ? 24 : 16;
             }
         }), _defineProperty(_obj1, "paddingBottom", function(param) {
-            var hasLabel = param.hasLabel;
-            return hasLabel ? 8 : 16;
-        }), _defineProperty(_obj1, "height", "100%"), _obj1), commonInputStyles(theme), {
+            var e = param.hasLabel;
+            return e ? 8 : 16;
+        }), _defineProperty(_obj1, "height", "100%"), _obj1), v(i)), {
             WebkitAppearance: "none",
             "&::-webkit-search-cancel-button": {
                 WebkitAppearance: "none"
@@ -206,8 +222,6 @@ var useStyles = createUseStyles(function(theme) {
             "&::-webkit-search-decoration": {
                 WebkitAppearance: "none"
             },
-            // Chrome: make the native icon invisible and stretch it over the whole field so you can click
-            // anywhere in the input field to trigger the native datepicker
             "&::-webkit-calendar-picker-indicator": {
                 position: "absolute",
                 top: 0,
@@ -220,9 +234,6 @@ var useStyles = createUseStyles(function(theme) {
                 color: "transparent",
                 background: "transparent"
             },
-            // Chrome: hide value if not valid or focused
-            // `opacity: 0` is needed when min/max is set and some parts of the date are disabled
-            // be sure to check that case when updating these styles
             '&[type="month"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
                 color: "transparent",
                 opacity: 0
@@ -235,21 +246,17 @@ var useStyles = createUseStyles(function(theme) {
                 color: "transparent",
                 opacity: 0
             },
-            // Firefox: hide value if not valid or focused
-            // Only apply when Firefox, otherwise it breaks styles in safari mobile
-            '&[type="month"]:not(:valid):not(:focus)': isFirefox() ? {
+            '&[type="month"]:not(:valid):not(:focus)': R() ? {
                 color: "transparent"
             } : {},
-            '&[type="date"]:not(:valid):not(:focus)': isFirefox() ? {
+            '&[type="date"]:not(:valid):not(:focus)': R() ? {
                 color: "transparent"
             } : {},
-            '&[type="datetime-local"]:not(:valid):not(:focus)': isFirefox() ? {
+            '&[type="datetime-local"]:not(:valid):not(:focus)': R() ? {
                 color: "transparent"
             } : {},
-            // Override Chrome input autocomplete styles:
             "&:-webkit-autofill": {
-                textFillColor: theme.colors.textPrimary,
-                // The background can not be overriden, but we can delay the background color transition to avoid the change
+                textFillColor: i.colors.textPrimary,
                 transitionProperty: "background-color",
                 transitionDelay: "99999s"
             }
@@ -272,29 +279,28 @@ var useStyles = createUseStyles(function(theme) {
         },
         prefix: (_obj2 = {
             alignSelf: function(param) {
-                var prefixAlignSelf = param.prefixAlignSelf;
-                return prefixAlignSelf;
+                var e = param.prefixAlignSelf;
+                return e;
             },
             paddingTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 28 : 16;
+                var e = param.hasLabel;
+                return e ? 28 : 16;
             }
-        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj2, i.mq.tabletOrSmaller, {
             paddingTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 24 : 16;
+                var e = param.hasLabel;
+                return e ? 24 : 16;
             }
         }), _defineProperty(_obj2, "paddingBottom", function(param) {
-            var hasLabel = param.hasLabel;
-            return hasLabel ? 8 : 16;
+            var e = param.hasLabel;
+            return e ? 8 : 16;
         }), _defineProperty(_obj2, "paddingLeft", 12), _defineProperty(_obj2, "paddingRight", 16), _defineProperty(_obj2, "opacity", function(param) {
-            var inputState = param.inputState;
-            return inputState === "default" ? 0 : 1;
+            var e = param.inputState;
+            return e === "default" ? 0 : 1;
         }), _defineProperty(_obj2, "transition", "opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"), _obj2)
     };
-});
-var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var error = _param.error, helperText = _param.helperText, label = _param.label, inputProps = _param.inputProps, inputRef = _param.inputRef, defaultValue = _param.defaultValue, value = _param.value, onFocus = _param.onFocus, onBlur = _param.onBlur, inputComponent = _param.inputComponent, prefix = _param.prefix, startIcon = _param.startIcon, endIcon = _param.endIcon, endIconOverlay = _param.endIconOverlay, shrinkLabelProp = _param.shrinkLabel, _multiline = _param.multiline, multiline = _multiline === void 0 ? false : _multiline, focus = _param.focus, fieldRef = _param.fieldRef, maxLength = _param.maxLength, idProp = _param.id, autoCompleteProp = _param.autoComplete, fullWidth = _param.fullWidth, rest = _objectWithoutProperties(_param, [
+}), E = /*#__PURE__*/ l.forwardRef(function(_param, U) {
+    var i = _param.error, e = _param.helperText, o = _param.label, b = _param.inputProps, k = _param.inputRef, s = _param.defaultValue, n = _param.value, p = _param.onFocus, x = _param.onBlur, C = _param.inputComponent, g = _param.prefix, f = _param.startIcon, t = _param.endIcon, u = _param.endIconOverlay, w = _param.shrinkLabel, tmp = _param.multiline, y = tmp === void 0 ? !1 : tmp, T = _param.focus, j = _param.fieldRef, S = _param.maxLength, H = _param.id, K = _param.autoComplete, M = _param.fullWidth, r = _objectWithoutProperties(_param, [
         "error",
         "helperText",
         "label",
@@ -318,170 +324,114 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "autoComplete",
         "fullWidth"
     ]);
-    var id = useAriaId(idProp);
-    var _$ref4 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? "filled" : "default"), 2), inputState = _$ref4[0], setInputState = _$ref4[1];
-    var colors = useTheme().colors;
-    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
-    var _$ref1;
-    var _$ref2 = _slicedToArray(React.useState((_$ref1 = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== null && _$ref1 !== void 0 ? _$ref1 : 0), 2), characterCount = _$ref2[0], setCharacterCount = _$ref2[1];
-    var hasLabel = !!label || !rest.required;
-    // this shrinkLabel override is a workaround because I was unable to find a way to hide date
-    // and date-time native placeholders when the input is not required
-    var shrinkLabel = shrinkLabelProp || (rest.type === "date" || rest.type === "datetime-local" || rest.type === "month") && !rest.required;
-    var _$ref3 = _slicedToArray(React.useState("baseline"), 2), prefixAlignSelf = _$ref3[0], setPrefixAlignSelf = _$ref3[1];
-    useIsomorphicLayoutEffect(function() {
-        /**
-             * Safari check to workaround https://jira.tid.es/browse/WEB-648
-             * For some reason it is super hard to align the prefix text with the input text
-             * and get the same result in chrome and safari
-             *
-             * Using an effect to set the style to avoid problems with SSR
-             */ if (isSafari()) {
-            setPrefixAlignSelf("initial");
-        }
+    var N;
+    var q = P(H), ref = _slicedToArray(l.useState((s == null ? void 0 : s.length) || (n == null ? void 0 : n.length) ? "filled" : "default"), 2), m = ref[0], c = ref[1], ref1 = $(), G = ref1.colors, ref2 = ce(), J = ref2.isTabletOrSmaller, ref3 = _slicedToArray(l.useState((N = s == null ? void 0 : s.length) != null ? N : 0), 2), Q = ref3[0], z = ref3[1], X = !!o || !r.required, I = w || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, ref4 = _slicedToArray(l.useState("baseline"), 2), Y = ref4[0], Z = ref4[1];
+    pe(function() {
+        se() && Z("initial");
     }, []);
-    var classes = useStyles({
-        inputState: inputState,
-        error: error,
-        endIcon: endIcon,
-        startIcon: startIcon,
-        shrinkLabel: shrinkLabel,
-        hasLabel: hasLabel,
-        prefix: prefix,
-        multiline: multiline,
-        type: rest.type,
-        disabled: rest.disabled,
-        prefixAlignSelf: prefixAlignSelf
+    var h = ue({
+        inputState: m,
+        error: i,
+        endIcon: t,
+        startIcon: f,
+        shrinkLabel: I,
+        hasLabel: X,
+        prefix: g,
+        multiline: y,
+        type: r.type,
+        disabled: r.disabled,
+        prefixAlignSelf: Y
     });
-    React.useEffect(function() {
-        if (inputState !== "focused" && (value === null || value === void 0 ? void 0 : value.length)) {
-            setCharacterCount(value.length);
-            setInputState("filled");
-        }
-        if (focus) {
-            setInputState("focused");
-        }
-        if (focus === false && !(value === null || value === void 0 ? void 0 : value.length)) {
-            // when textfield is used in selects it doesn't get or lose focus
-            setInputState("default");
-        }
-        if (focus === false && (value === null || value === void 0 ? void 0 : value.length)) {
-            setInputState("filled");
-        }
+    l.useEffect(function() {
+        m !== "focused" && (n == null ? void 0 : n.length) && (z(n.length), c("filled")), T && c("focused"), T === !1 && !(n != null && n.length) && c("default"), T === !1 && (n == null ? void 0 : n.length) && c("filled");
     }, [
-        inputState,
-        value,
-        focus
-    ]);
-    React.useEffect(function() {
-        if (rest.autoFocus) {
-            setInputState("focused");
-        }
+        m,
+        n,
+        T
+    ]), l.useEffect(function() {
+        r.autoFocus && c("focused");
     }, [
-        rest.autoFocus
+        r.autoFocus
     ]);
-    var defaultInputElement = multiline ? "textarea" : "input";
-    // FIXME it should be enough to forward refs. inputRef could be removed
-    var inputRefProps = inputComponent ? {
-        inputRef: inputRef
+    var V = y ? "textarea" : "input", ee = C ? {
+        inputRef: k
     } : {
-        ref: combineRefs(ref, inputRef)
-    };
-    var props = _objectSpread({}, rest, {
-        maxLength: maxLength,
-        autoComplete: autoCompleteProp
-    }, inputProps);
-    var isShrinked = shrinkLabel || inputState === "focused" || inputState === "filled";
-    var scale = isShrinked ? isTabletOrSmaller ? LABEL_SCALE_MOBILE : LABEL_SCALE_DESKTOP : 1;
-    var labelStyle = {
-        left: startIcon ? 48 : LABEL_LEFT_POSITION,
-        // shrinking means applying a scale transformation, so width will be proportionally reduced.
-        // Let's keep the original width.
-        width: "calc(((100% - ".concat(LABEL_LEFT_POSITION + (startIcon ? 48 : LABEL_LEFT_POSITION), "px)) / ").concat(scale, ")"),
-        paddingRight: endIcon && !isShrinked ? 36 : 0
+        ref: D(U, k)
+    }, A = _objectSpread(_objectSpreadProps(_objectSpread({}, r), {
+        maxLength: S,
+        autoComplete: K
+    }), b), F = I || m === "focused" || m === "filled", te = F ? J ? re : le : 1, ie = {
+        left: f ? 48 : L,
+        width: "calc(((100% - ".concat(L + (f ? 48 : L), "px)) / ").concat(te, ")"),
+        paddingRight: t && !F ? 36 : 0
     };
-    return /*#__PURE__*/ _jsxs(FieldContainer, {
-        disabled: rest.disabled,
-        helperText: /*#__PURE__*/ _jsx(HelperText, {
-            error: error,
-            leftText: helperText,
-            rightText: multiline && maxLength ? "".concat(characterCount, "/").concat(maxLength) : undefined
+    return /* @__PURE__ */ fe(ne, {
+        disabled: r.disabled,
+        helperText: /* @__PURE__ */ a(oe, {
+            error: i,
+            leftText: e,
+            rightText: y && S ? "".concat(Q, "/").concat(S) : void 0
         }),
-        multiline: multiline,
-        fullWidth: fullWidth,
-        fieldRef: fieldRef,
-        readOnly: rest.readOnly,
+        multiline: y,
+        fullWidth: M,
+        fieldRef: j,
+        readOnly: r.readOnly,
         children: [
-            startIcon && /*#__PURE__*/ _jsx("div", {
-                className: classes.startIcon,
-                children: startIcon
+            f && /* @__PURE__ */ a("div", {
+                className: h.startIcon,
+                children: f
             }),
-            prefix && /*#__PURE__*/ _jsx("div", {
-                className: classes.prefix,
-                children: /*#__PURE__*/ _jsx(Text3, {
-                    color: colors.textSecondary,
-                    regular: true,
-                    wordBreak: false,
-                    children: prefix
+            g && /* @__PURE__ */ a("div", {
+                className: h.prefix,
+                children: /* @__PURE__ */ a(O, {
+                    color: G.textSecondary,
+                    regular: !0,
+                    wordBreak: !1,
+                    children: g
                 })
             }),
-            /*#__PURE__*/ _jsx("div", {
-                className: classes.fullWidth,
-                children: /*#__PURE__*/ _jsx(Text3, {
+            /* @__PURE__ */ a("div", {
+                className: h.fullWidth,
+                children: /* @__PURE__ */ a(O, {
                     as: "div",
-                    regular: true,
-                    children: /*#__PURE__*/ React.createElement(inputComponent || defaultInputElement, _objectSpread({}, inputRefProps, props, {
-                        id: id,
-                        className: multiline ? classes.textArea : classes.input,
-                        onFocus: function(event) {
-                            setInputState("focused");
-                            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+                    regular: !0,
+                    children: /*#__PURE__*/ l.createElement(C || V, _objectSpread(_objectSpreadProps(_objectSpread({}, ee, A), {
+                        id: q,
+                        className: y ? h.textArea : h.input,
+                        onFocus: function(d) {
+                            c("focused"), p == null || p(d);
                         },
-                        onBlur: function(event) {
-                            if (event.target.value.length > 0) {
-                                setInputState("filled");
-                            } else {
-                                setInputState("default");
-                            }
-                            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+                        onBlur: function(d) {
+                            d.target.value.length > 0 ? c("filled") : c("default"), x == null || x(d);
                         },
-                        onChange: function(event) {
-                            // Workaround for systems where maxlength prop is applied onBlur (https://caniuse.com/#feat=maxlength)
-                            if (maxLength === undefined || event.target.value.length <= maxLength) {
-                                var _$ref;
-                                setCharacterCount(event.target.value.length);
-                                (_$ref = props.onChange) === null || _$ref === void 0 ? void 0 : _$ref.call(props, event);
-                            } else {
-                                event.stopPropagation();
-                                event.preventDefault();
-                            }
+                        onChange: function(d) {
+                            var W;
+                            S === void 0 || d.target.value.length <= S ? (z(d.target.value.length), (W = A.onChange) == null || W.call(A, d)) : (d.stopPropagation(), d.preventDefault());
                         },
-                        defaultValue: defaultValue,
-                        value: value
-                    }, error && {
-                        "aria-invalid": true
+                        defaultValue: s,
+                        value: n
+                    }), i && {
+                        "aria-invalid": !0
                     }))
                 })
             }),
-            label && /*#__PURE__*/ _jsx(Label, {
-                style: labelStyle,
-                error: error,
-                forId: id,
-                inputState: inputState,
-                shrinkLabel: shrinkLabel,
-                optional: !rest.required,
-                children: label
+            o && /* @__PURE__ */ a(ae, {
+                style: ie,
+                error: i,
+                forId: q,
+                inputState: m,
+                shrinkLabel: I,
+                optional: !r.required,
+                children: o
             }),
-            endIcon && /*#__PURE__*/ _jsx("div", {
-                className: classes.endIcon,
-                children: endIcon
+            t && /* @__PURE__ */ a("div", {
+                className: h.endIcon,
+                children: t
             }),
-            endIconOverlay
+            u
         ]
     });
-});
-export { TextFieldBase };
-var useSuggestionsStyles = createUseStyles(function() {
+}), me = B(function() {
     return {
         menuItem: {
             padding: "6px 16px",
@@ -509,94 +459,78 @@ var useSuggestionsStyles = createUseStyles(function() {
             }
         }
     };
-});
-var Autosuggest = /*#__PURE__*/ React.lazy(function() {
+}), he = /*#__PURE__*/ l.lazy(function() {
     return import(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest");
-});
-var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var getSuggestions = _param.getSuggestions, idProp = _param.id, props = _objectWithoutProperties(_param, [
+}), Ae = /*#__PURE__*/ l.forwardRef(function(_param, b) {
+    var i = _param.getSuggestions, e = _param.id, o = _objectWithoutProperties(_param, [
         "getSuggestions",
         "id"
     ]);
-    var _$ref6 = _slicedToArray(React.useState([]), 2), suggestions = _$ref6[0], setSuggestions = _$ref6[1];
-    var inputRef = React.useRef(null);
-    var classes = useSuggestionsStyles();
-    var _$ref5 = useTheme(), platformOverrides = _$ref5.platformOverrides, texts = _$ref5.texts;
-    var id = useAriaId(idProp);
-    var autoSuggestId = useAriaId();
-    if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {
-        throw Error("Fields with suggestions must be used in controlled mode");
-    }
-    return getSuggestions ? /*#__PURE__*/ _jsx(React.Suspense, {
-        fallback: /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({}, props, {
-            // This label override while loading is needed in acceptance tests because
-            // while the test is typing, the component could be remounted.
-            // By hiding the label, we ensure that the test selects the loaded component
-            label: isRunningAcceptanceTest(platformOverrides) ? "" : props.label,
+    var ref = _slicedToArray(l.useState([]), 2), k = ref[0], s = ref[1], n = l.useRef(null), p = me(), ref1 = $(), x = ref1.platformOverrides, C = ref1.texts, g = P(e), f = P();
+    if (i && (o.value === void 0 || o.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
+    return i ? /* @__PURE__ */ a(l.Suspense, {
+        fallback: /* @__PURE__ */ a(E, _objectSpreadProps(_objectSpread({}, o), {
+            label: _(x) ? "" : o.label,
             autoComplete: "off",
-            ref: ref,
-            id: id
+            ref: b,
+            id: g
         })),
-        children: /*#__PURE__*/ _jsx(Autosuggest, {
-            id: autoSuggestId,
-            inputProps: _objectSpread({}, props, {
-                id: id,
+        children: /* @__PURE__ */ a(he, {
+            id: f,
+            inputProps: _objectSpreadProps(_objectSpread({}, o), {
+                id: g,
                 autoComplete: "off",
-                // @ts-expect-error Autosuggest expects slightly different types
-                onChange: function(e, param) {
-                    var newValue = param.newValue;
-                    var _$ref;
-                    // hack to mutate event value
-                    e.target = _objectSpread({}, e.target, {
-                        value: newValue
-                    });
-                    e.currentTarget = _objectSpread({}, e.currentTarget, {
-                        value: newValue
-                    });
-                    (_$ref = props.onChange) === null || _$ref === void 0 ? void 0 : _$ref.call(props, e);
+                onChange: function(t, param) {
+                    var u = param.newValue;
+                    var w;
+                    t.target = _objectSpreadProps(_objectSpread({}, t.target), {
+                        value: u
+                    }), t.currentTarget = _objectSpreadProps(_objectSpread({}, t.currentTarget), {
+                        value: u
+                    }), (w = o.onChange) == null || w.call(o, t);
                 }
             }),
-            renderInputComponent: function(inputProps) {
-                return /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({}, inputProps, {
-                    inputRef: combineRefs(inputRef, props.inputRef, ref)
+            renderInputComponent: function(t) {
+                return /* @__PURE__ */ a(E, _objectSpreadProps(_objectSpread({}, t), {
+                    inputRef: D(n, o.inputRef, b)
                 }));
             },
-            suggestions: suggestions,
+            suggestions: k,
             onSuggestionsFetchRequested: function(param) {
-                var value = param.value;
-                return setSuggestions(getSuggestions(value));
+                var t = param.value;
+                return s(i(t));
             },
             onSuggestionsClearRequested: function() {
-                return setSuggestions([]);
+                return s([]);
             },
-            getSuggestionValue: function(suggestion) {
-                return suggestion;
+            getSuggestionValue: function(t) {
+                return t;
             },
-            renderSuggestion: function(suggestion, param) {
-                var isHighlighted = param.isHighlighted;
-                return /*#__PURE__*/ _jsx("div", {
+            renderSuggestion: function(t, param) {
+                var u = param.isHighlighted;
+                return /* @__PURE__ */ a("div", {
                     role: "menuitem",
-                    className: classNames(classes.menuItem, _defineProperty({}, classes.menuItemSelected, isHighlighted)),
-                    children: /*#__PURE__*/ _jsx(Text3, {
-                        regular: true,
-                        children: suggestion
+                    className: ge(p.menuItem, _defineProperty({}, p.menuItemSelected, u)),
+                    children: /* @__PURE__ */ a(O, {
+                        regular: !0,
+                        children: t
                     })
                 });
             },
-            renderSuggestionsContainer: function(options) {
-                return /*#__PURE__*/ _jsx("div", _objectSpread({}, options.containerProps, {
+            renderSuggestionsContainer: function(t) {
+                return /* @__PURE__ */ a("div", _objectSpreadProps(_objectSpread({}, t.containerProps), {
                     style: {
-                        width: inputRef.current ? inputRef.current.clientWidth + 2 : 0
+                        width: n.current ? n.current.clientWidth + 2 : 0
                     },
-                    className: classes.suggestionsContainer,
-                    "aria-label": "".concat(props.label, " ").concat(texts.menuLabelSuffix),
-                    children: options.children
+                    className: p.suggestionsContainer,
+                    "aria-label": "".concat(o.label, " ").concat(C.menuLabelSuffix),
+                    children: t.children
                 }));
             }
         })
-    }) : /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({}, props, {
-        id: id,
-        ref: ref
+    }) : /* @__PURE__ */ a(E, _objectSpreadProps(_objectSpread({}, o), {
+        id: g,
+        ref: b
     }));
 });
-export { TextFieldBaseAutosuggest };
+export { E as TextFieldBase, Ae as TextFieldBaseAutosuggest };