@telefonica/mistica 12.8.0 → 12.9.1

package/dist/select.js

@@ -2,46 +2,69 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var React = _interopRequireWildcard(require("react"));
-var _formContext = require("./form-context");
-var _hooks = require("./hooks");
-var _keyCodes = require("./utils/key-codes");
-var _textFieldComponents = require("./text-field-components");
-var _iconChevronDownRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-down-regular"));
-var _textFieldBase = require("./text-field-base");
-var _overlay = _interopRequireDefault(require("./overlay"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _platform = require("./utils/platform");
-var _jss = require("./jss");
-var _dom = require("./utils/dom");
-var _text = require("./text");
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return tt;
+    }
+});
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _formContextJs = require("./form-context.js");
+var _hooksJs = require("./hooks.js");
+var _keyCodesJs = require("./utils/key-codes.js");
+var _textFieldComponentsJs = require("./text-field-components.js");
+var _iconChevronDownRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-down-regular.js"));
+var _textFieldBaseJs = require("./text-field-base.js");
+var _overlayJs = /*#__PURE__*/ _interopRequireDefault(require("./overlay.js"));
+var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
+var _platformJs = require("./utils/platform.js");
+var _jssJs = require("./jss.js");
+var _domJs = require("./utils/dom.js");
+var _textJs = require("./text.js");
+var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
         return obj;
-    } else {
-        var newObj = {};
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
             }
         }
-        newObj.default = obj;
-        return newObj;
     }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -92,8 +115,8 @@ function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _objectSpread(target) {
-    var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {};
+    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) {
@@ -103,13 +126,40 @@ function _objectSpread(target) {
         ownKeys.forEach(function(key) {
             _defineProperty(target, key, source[key]);
         });
-    };
-    for(var i = 1; i < arguments.length; i++)_loop(i);
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
     return target;
 }
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
+var _typeof = function _typeof(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+};
 function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -118,45 +168,44 @@ 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);
 }
-var _maxHeight;
-var useStyles = (0, _jss).createUseStyles(function(theme) {
+var Ge = (0, _jssJs.createUseStyles)(function(d) {
     var _obj, _obj1;
     return {
         selectContainer: (_obj = {
             position: "relative",
             outline: 0
-        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj, d.mq.tabletOrSmaller, {
             width: "100%"
-        }), _defineProperty(_obj, theme.mq.desktopOrBigger, {
+        }), _defineProperty(_obj, d.mq.desktopOrBigger, {
             width: function width(param) {
-                var fullWidth = param.fullWidth;
-                return fullWidth ? "100%" : "fit-content";
+                var t = param.fullWidth;
+                return t ? "100%" : "fit-content";
             }
         }), _obj),
         select: {
             fontFamily: "inherit",
             backgroundColor: "transparent",
             paddingTop: function paddingTop(param) {
-                var label = param.label;
-                return label ? 24 : 16;
+                var t = param.label;
+                return t ? 24 : 16;
             },
             paddingBottom: function paddingBottom(param) {
-                var label = param.label;
-                return label ? 8 : 16;
+                var t = param.label;
+                return t ? 8 : 16;
             },
             paddingRight: 0,
             paddingLeft: 12,
             border: 0,
             outline: 0,
             fontSize: 16,
-            color: theme.colors.textPrimary,
+            color: d.colors.textPrimary,
             width: "100%",
             height: "100%",
             textOverflow: "ellipsis",
             appearance: "none",
             cursor: function cursor(param) {
-                var disabled = param.disabled;
-                return disabled ? "default" : "pointer";
+                var t = param.disabled;
+                return t ? "default" : "pointer";
             }
         },
         arrowDown: {
@@ -172,15 +221,15 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             right: 48 + 1,
             overflow: "hidden",
             top: function top(param) {
-                var label = param.label;
-                return label ? 27 : 17;
+                var t = param.label;
+                return t ? 27 : 17;
             },
             lineHeight: "20px",
             fontSize: 16,
-            color: theme.colors.textPrimary,
+            color: d.colors.textPrimary,
             opacity: function opacity(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.5 : 1;
+                var t = param.disabled;
+                return t ? 0.5 : 1;
             },
             maxWidth: "100%",
             textOverflow: "ellipsis",
@@ -192,38 +241,39 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             listStyleType: "none",
             position: "absolute",
             top: function top(param) {
-                var optionsComputedProps = param.optionsComputedProps;
-                return optionsComputedProps.top;
+                var t = param.optionsComputedProps;
+                return t.top;
             },
             left: function left(param) {
-                var optionsComputedProps = param.optionsComputedProps;
-                return optionsComputedProps.left;
+                var t = param.optionsComputedProps;
+                return t.left;
             },
             minWidth: function minWidth(param) {
-                var optionsComputedProps = param.optionsComputedProps;
-                return optionsComputedProps.width;
+                var t = param.optionsComputedProps;
+                return t.width;
             },
             borderRadius: 8,
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
-            backgroundColor: theme.colors.backgroundContainer,
+            backgroundColor: d.colors.backgroundContainer,
             paddingTop: 8,
             paddingBottom: 8,
             transformOrigin: function transformOrigin(param) {
-                var optionsComputedProps = param.optionsComputedProps;
-                return optionsComputedProps.transformOrigin;
+                var t = param.optionsComputedProps;
+                return t.transformOrigin;
             },
             transition: "opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s",
             opacity: function opacity(param) {
-                var animateShowOptions = param.animateShowOptions;
-                return animateShowOptions ? 1 : 0;
+                var t = param.animateShowOptions;
+                return t ? 1 : 0;
             },
             transform: function transform(param) {
-                var animateShowOptions = param.animateShowOptions;
-                return animateShowOptions ? "scale(1)" : "scale(0)";
+                var t = param.animateShowOptions;
+                return t ? "scale(1)" : "scale(0)";
             },
             maxHeight: function maxHeight(param) {
-                var optionsComputedProps = param.optionsComputedProps;
-                return (_maxHeight = optionsComputedProps.maxHeight) !== null && _maxHeight !== void 0 ? _maxHeight : "416px";
+                var t = param.optionsComputedProps;
+                var C;
+                return (C = t.maxHeight) != null ? C : "416px";
             },
             overflowY: "auto"
         },
@@ -231,415 +281,302 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             backgroundColor: "rgba(0, 0, 0, 0.14)"
         },
         menuItem: (_obj1 = {
-            color: theme.colors.textPrimary,
+            color: d.colors.textPrimary,
             padding: "8px 16px",
             height: 48,
             transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
-        }, _defineProperty(_obj1, theme.mq.supportsHover, {
+        }, _defineProperty(_obj1, d.mq.supportsHover, {
             "&:hover": {
                 backgroundColor: "rgba(0, 0, 0, 0.08)"
             }
         }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "alignItems", "center"), _defineProperty(_obj1, "cursor", "pointer"), _obj1)
     };
-});
-var Select = function Select(param1) {
-    var id = param1.id, label = param1.label, helperTextProp = param1.helperText, valueProp = param1.value, onChangeValueProp = param1.onChangeValue, name = param1.name, fullWidth = param1.fullWidth, options = param1.options, optional = param1.optional, disabledProp = param1.disabled, errorProp = param1.error, onBlur = param1.onBlur, _autoFocus = param1.autoFocus, autoFocus = _autoFocus === void 0 ? false : _autoFocus, native = param1.native;
-    var ref9;
-    var inputRef = React.useRef(null);
-    var focusableRef = React.useRef(null);
-    var fieldRef = React.useRef(null);
-    var optionsMenuRef = React.useRef(null);
-    var optionRefs = React.useRef(new Map());
-    var ref1 = _slicedToArray(React.useState(), 2), valueState = ref1[0], setValueState = ref1[1];
-    var ref2 = _slicedToArray(React.useState(false), 2), optionsShown = ref2[0], setOptionsShown = ref2[1];
-    var ref3 = _slicedToArray(React.useState(false), 2), animateShowOptions = ref3[0], setAnimateShowOptions = ref3[1];
-    var ref4 = _slicedToArray(React.useState(false), 2), isFocused = ref4[0], setIsFocused = ref4[1];
-    var ref5 = _slicedToArray(React.useState({}), 2), optionsComputedProps = ref5[0], setOptionsComputedProps = ref5[1];
-    var ref6 = _slicedToArray(React.useState(), 2), tentativeValueState = ref6[0], setTentativeValueState = ref6[1];
-    var lastElementSelectionScrollTop = React.useRef(null);
-    var inputId = (0, _hooks).useAriaId(id);
-    var ref7 = (0, _formContext).useForm(), rawValues = ref7.rawValues, setRawValue = ref7.setRawValue, formSetValue = ref7.setValue, formStatus = ref7.formStatus, formErrors = ref7.formErrors, setFormError = ref7.setFormError, register = ref7.register;
-    var platformOverrides = (0, _hooks).useTheme().platformOverrides;
-    var shouldUseNative = native || process.env.NODE_ENV === "test" || (0, _platform).isAndroid(platformOverrides) || (0, _platform).isIos(platformOverrides);
-    var disabled = disabledProp || formStatus === "sending";
-    var error = errorProp || !!formErrors[name];
-    var helperText = formErrors[name] || helperTextProp;
-    var value1 = valueProp !== null && valueProp !== void 0 ? valueProp : rawValues[name];
-    var onChangeValue = function onChangeValue(value) {
-        onChangeValueProp === null || onChangeValueProp === void 0 ? void 0 : onChangeValueProp(value);
-        setFormError({
-            name: name,
+}), tt = function tt(param) {
+    var d = param.id, t = param.label, C = param.helperText, D = param.value, P = param.onChangeValue, c = param.name, H = param.fullWidth, p = param.options, v = param.optional, ce = param.disabled, le = param.error, M = param.onBlur, tmp = param.autoFocus, j = tmp === void 0 ? !1 : tmp, ae = param.native;
+    var te, oe;
+    var x = _react.useRef(null), f = _react.useRef(null), w = _react.useRef(null), b = _react.useRef(null), k = _react.useRef(/* @__PURE__ */ new Map()), ref = _slicedToArray(_react.useState(), 2), l = ref[0], ue = ref[1], ref1 = _slicedToArray(_react.useState(!1), 2), F = ref1[0], K = ref1[1], ref2 = _slicedToArray(_react.useState(!1), 2), X = ref2[0], W = ref2[1], ref3 = _slicedToArray(_react.useState(!1), 2), Y = ref3[0], O = ref3[1], ref4 = _slicedToArray(_react.useState({}), 2), de = ref4[0], V = ref4[1], ref5 = _slicedToArray(_react.useState(), 2), S = ref5[0], B = ref5[1], G = _react.useRef(null), Z = (0, _hooksJs.useAriaId)(d), ref6 = (0, _formContextJs.useForm)(), pe = ref6.rawValues, q = ref6.setRawValue, z = ref6.setValue, fe = ref6.formStatus, J = ref6.formErrors, me = ref6.setFormError, L = ref6.register, ref7 = (0, _hooksJs.useTheme)(), Q = ref7.platformOverrides, $ = ae || process.env.NODE_ENV === "test" || (0, _platformJs.isAndroid)(Q) || (0, _platformJs.isIos)(Q), E = ce || fe === "sending", N = le || !!J[c], U = J[c] || C, r = D != null ? D : pe[c], R = function R(e) {
+        P == null || P(e), me({
+            name: c,
             error: ""
+        }), q({
+            name: c,
+            value: e
+        }), z({
+            name: c,
+            value: e
         });
-        setRawValue({
-            name: name,
-            value: value
-        });
-        formSetValue({
-            name: name,
-            value: value
-        });
-    };
-    var toggleOptions = function toggleOptions(show) {
-        if (show) {
-            if (fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) {
-                var MAX_OPTIONS = 8;
-                var MARGIN_TOP_SIZE = 12;
-                var PADDING_SIZE = 16;
-                var ref = fieldRef.current.getBoundingClientRect(), selectTop = ref.top, width = ref.width, left = ref.left, height = ref.height;
-                var top = selectTop + height;
-                var visibleOptions = Math.min(options.length, MAX_OPTIONS);
-                var spaceTaken = visibleOptions * 48 + PADDING_SIZE;
-                // if it doesn't fit on bottom
-                if (top + spaceTaken + MARGIN_TOP_SIZE > window.innerHeight) {
-                    var availableSpaceBottom = window.innerHeight - top;
-                    if (selectTop /* this is the available space on top */  > availableSpaceBottom) {
-                        var newTop = selectTop - spaceTaken;
-                        setOptionsComputedProps({
-                            width: width,
-                            left: left,
-                            top: Math.max(newTop, MARGIN_TOP_SIZE),
-                            maxHeight: selectTop - MARGIN_TOP_SIZE,
+    }, T = function T(e) {
+        if (e) {
+            if (w != null && w.current) {
+                var ref = w.current.getBoundingClientRect(), i = ref.top, y = ref.width, I = ref.left, A = ref.height, g = i + A, ne = Math.min(p.length, 8) * 48 + 16;
+                if (g + ne + 12 > window.innerHeight) {
+                    var Se = window.innerHeight - g;
+                    if (i > Se) {
+                        var Te = i - ne;
+                        V({
+                            width: y,
+                            left: I,
+                            top: Math.max(Te, 12),
+                            maxHeight: i - 12,
                             transformOrigin: "center bottom"
                         });
-                    } else {
-                        setOptionsComputedProps({
-                            width: width,
-                            top: top,
-                            left: left,
-                            maxHeight: window.innerHeight - top - MARGIN_TOP_SIZE,
-                            transformOrigin: "center top"
-                        });
-                    }
-                } else {
-                    // if it fits on bottom
-                    setOptionsComputedProps({
-                        width: width,
-                        top: top,
-                        left: left,
-                        maxHeight: undefined,
+                    } else V({
+                        width: y,
+                        top: g,
+                        left: I,
+                        maxHeight: window.innerHeight - g - 12,
                         transformOrigin: "center top"
                     });
-                }
+                } else V({
+                    width: y,
+                    top: g,
+                    left: I,
+                    maxHeight: void 0,
+                    transformOrigin: "center top"
+                });
             }
-            setOptionsShown(true);
-            requestAnimationFrame(function() {
-                if (lastElementSelectionScrollTop.current && optionsMenuRef.current && "scrollTop" in optionsMenuRef.current) {
-                    optionsMenuRef.current.scrollTop = lastElementSelectionScrollTop.current;
-                }
-                setAnimateShowOptions(true);
-            });
-            setTentativeValueState(valueState !== null && valueState !== void 0 ? valueState : value1);
-        } else {
-            setAnimateShowOptions(false);
-            setOptionsShown(false);
-            setTentativeValueState(undefined);
-        }
-    };
-    var setValue = function setValue(val) {
-        var ref;
-        // @ts-expect-error current is typed as read-only
-        lastElementSelectionScrollTop.current = (ref = optionsMenuRef.current) === null || ref === void 0 ? void 0 : ref.scrollTop;
-        toggleOptions(false);
-        if (onChangeValue && typeof val === "string") {
-            onChangeValue(val);
-        }
-        if (typeof value1 === "undefined") {
-            setValueState(val);
-        }
-    };
-    var scrollIntoTargetListElement = function scrollIntoTargetListElement(targetValueState) {
-        var ref;
-        var menuClientRect = (ref = optionsMenuRef.current) === null || ref === void 0 ? void 0 : ref.getBoundingClientRect();
-        if (menuClientRect && targetValueState && optionRefs.current.has(targetValueState)) {
-            var itemRef = optionRefs.current.get(targetValueState);
-            var clientRect = itemRef === null || itemRef === void 0 ? void 0 : itemRef.getBoundingClientRect();
-            if (clientRect && clientRect.top + clientRect.height / 2 >= menuClientRect.top + menuClientRect.height) {
-                itemRef === null || itemRef === void 0 ? void 0 : itemRef.scrollIntoView();
+            K(!0), requestAnimationFrame(function() {
+                G.current && b.current && "scrollTop" in b.current && (b.current.scrollTop = G.current), W(!0);
+            }), B(l != null ? l : r);
+        } else W(!1), K(!1), B(void 0);
+    }, ee = function ee(e) {
+        var o;
+        G.current = (o = b.current) == null ? void 0 : o.scrollTop, T(!1), R && typeof e == "string" && R(e), (typeof r === "undefined" ? "undefined" : _typeof(r)) > "u" && ue(e);
+    }, ge = function ge(e) {
+        var n;
+        var o = (n = b.current) == null ? void 0 : n.getBoundingClientRect();
+        if (o && e && k.current.has(e)) {
+            var a = k.current.get(e), i = a == null ? void 0 : a.getBoundingClientRect();
+            if (i && i.top + i.height / 2 >= o.top + o.height) {
+                a == null || a.scrollIntoView();
                 return;
             }
-            if (clientRect && clientRect.top + clientRect.height / 2 <= menuClientRect.top) {
-                itemRef === null || itemRef === void 0 ? void 0 : itemRef.scrollIntoView(false);
-            }
+            i && i.top + i.height / 2 <= o.top && (a == null || a.scrollIntoView(!1));
         }
-    };
-    var focusableElement = focusableRef.current;
-    var inputElement = inputRef.current;
-    React.useEffect(function() {
-        setRawValue({
-            name: name,
-            value: value1
-        });
-        formSetValue({
-            name: name,
-            value: value1
+    }, he = f.current, xe = x.current;
+    _react.useEffect(function() {
+        q({
+            name: c,
+            value: r
+        }), z({
+            name: c,
+            value: r
         });
     }, [
-        name,
-        setRawValue,
-        formSetValue,
-        value1
-    ]);
-    React.useEffect(function() {
-        register(name, {
-            input: inputRef.current,
-            focusableElement: focusableRef.current
-        });
-        return function() {
-            register(name, {
+        c,
+        q,
+        z,
+        r
+    ]), _react.useEffect(function() {
+        return L(c, {
+            input: x.current,
+            focusableElement: f.current
+        }), function() {
+            L(c, {
                 input: null,
                 focusableElement: null
             });
         };
     }, [
-        name,
-        register,
-        focusableRef,
-        inputRef,
-        focusableElement,
-        inputElement
-    ]);
-    React.useEffect(function() {
-        var updateTentativeValueState = function updateTentativeValueState(e) {
+        c,
+        L,
+        f,
+        x,
+        he,
+        xe
+    ]), _react.useEffect(function() {
+        var e = function e(n) {
+            var y, I;
             var _obj;
-            var keyToOperand = (_obj = {}, _defineProperty(_obj, _keyCodes.UP, -1), _defineProperty(_obj, _keyCodes.DOWN, 1), _obj);
-            var operand = keyToOperand[e.keyCode];
-            if (operand) {
-                var ref;
-                (0, _dom).cancelEvent(e);
-                var ref10;
-                var newTentativeValueState = (ref10 = (ref = options[options.findIndex(function(param) {
-                    var value = param.value;
-                    return value === tentativeValueState;
-                }) + operand]) === null || ref === void 0 ? void 0 : ref.value) !== null && ref10 !== void 0 ? ref10 : tentativeValueState;
-                setTentativeValueState(newTentativeValueState);
-                scrollIntoTargetListElement(newTentativeValueState);
-            }
-        };
-        var handleKeyDown = function handleKeyDown(e) {
-            if (optionsShown) {
-                if (e.keyCode === _keyCodes.TAB) {
-                    (0, _dom).cancelEvent(e);
-                }
-                if (e.keyCode === _keyCodes.ESC) {
-                    toggleOptions(false);
-                }
-                if (e.keyCode === _keyCodes.ENTER || e.keyCode === _keyCodes.SPACE) {
-                    (0, _dom).cancelEvent(e);
-                    if (options.findIndex(function(param) {
-                        var value = param.value;
-                        return value === tentativeValueState;
-                    }) !== -1 && tentativeValueState !== valueState) {
-                        setValue(tentativeValueState);
-                    }
-                    toggleOptions(false);
-                }
-            }
-            // so we don't change the tentativeValueState while menu is closing
-            if (animateShowOptions) {
-                updateTentativeValueState(e);
+            var i = (_obj = {}, _defineProperty(_obj, _keyCodesJs.UP, -1), _defineProperty(_obj, _keyCodesJs.DOWN, 1), _obj)[n.keyCode];
+            if (i) {
+                (0, _domJs.cancelEvent)(n);
+                var A = (I = (y = p[p.findIndex(function(param) {
+                    var g = param.value;
+                    return g === S;
+                }) + i]) == null ? void 0 : y.value) != null ? I : S;
+                B(A), ge(A);
             }
+        }, o = function o(n) {
+            F && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && T(!1), (n.keyCode === _keyCodesJs.ENTER || n.keyCode === _keyCodesJs.SPACE) && ((0, _domJs.cancelEvent)(n), p.findIndex(function(param) {
+                var a = param.value;
+                return a === S;
+            }) !== -1 && S !== l && ee(S), T(!1))), X && e(n);
         };
-        document.addEventListener("keydown", handleKeyDown, false);
-        return function() {
-            document.removeEventListener("keydown", handleKeyDown, false);
+        return document.addEventListener("keydown", o, !1), function() {
+            document.removeEventListener("keydown", o, !1);
         };
-    });
-    React.useEffect(function() {
-        if (autoFocus && focusableRef.current) {
-            focusableRef.current.focus();
-        }
+    }), _react.useEffect(function() {
+        j && f.current && f.current.focus();
     }, [
-        autoFocus
+        j
     ]);
-    var classes = useStyles({
-        label: label || optional && !shouldUseNative,
-        optionsComputedProps: optionsComputedProps,
-        animateShowOptions: animateShowOptions,
-        helperText: helperText,
-        disabled: disabled,
-        fullWidth: fullWidth
-    });
-    // When the value is null/undefined/'' we assume it's the default empty option and we don't show any label
-    var getOptionText = function getOptionText(val) {
-        var ref;
-        return val ? (ref = options.find(function(param) {
-            var value = param.value;
-            return value === val;
-        })) === null || ref === void 0 ? void 0 : ref.text : "";
-    };
-    var containerActiveProps = {
+    var m = Ge({
+        label: t || v && !$,
+        optionsComputedProps: de,
+        animateShowOptions: X,
+        helperText: U,
+        disabled: E,
+        fullWidth: H
+    }), we = function we(e) {
+        var o;
+        return e ? (o = p.find(function(param) {
+            var n = param.value;
+            return n === e;
+        })) == null ? void 0 : o.text : "";
+    }, be = {
         tabIndex: 0,
         onFocus: function onFocus() {
-            return setIsFocused(true);
+            return O(!0);
         },
-        onBlur: function onBlur1() {
-            return setIsFocused(false);
+        onBlur: function onBlur() {
+            return O(!1);
         },
         onClick: function onClick() {
-            toggleOptions(true);
-            setIsFocused(true);
+            T(!0), O(!0);
         },
         onKeyDown: function onKeyDown(e) {
-            if (!optionsShown && (e.keyCode === _keyCodes.SPACE || e.keyCode === _keyCodes.ENTER)) {
-                (0, _dom).cancelEvent(e);
-                toggleOptions(true);
-            }
+            !F && (e.keyCode === _keyCodesJs.SPACE || e.keyCode === _keyCodesJs.ENTER) && ((0, _domJs.cancelEvent)(e), T(!0));
         }
     };
-    var ref8;
-    return shouldUseNative ? /*#__PURE__*/ (0, _jsxRuntime).jsxs(_textFieldComponents.FieldContainer, {
-        disabled: disabled,
-        helperText: /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldComponents.HelperText, {
-            error: error,
-            leftText: helperText
+    return $ ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_textFieldComponentsJs.FieldContainer, {
+        disabled: E,
+        helperText: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.HelperText, {
+            error: N,
+            leftText: U
         }),
-        fieldRef: fieldRef,
-        fullWidth: fullWidth,
+        fieldRef: w,
+        fullWidth: H,
         children: [
-            label && /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldComponents.Label, {
-                error: error,
-                forId: inputId,
-                inputState: isFocused ? "focused" : ((ref8 = value1 !== null && value1 !== void 0 ? value1 : valueState) !== null && ref8 !== void 0 ? ref8 : (ref9 = inputRef.current) === null || ref9 === void 0 ? void 0 : ref9.value) ? "filled" : "default",
-                optional: optional,
-                children: label
+            t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.Label, {
+                error: N,
+                forId: Z,
+                inputState: Y ? "focused" : ((oe = r != null ? r : l) != null ? oe : (te = x.current) == null ? void 0 : te.value) ? "filled" : "default",
+                optional: v,
+                children: t
             }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsxs("select", {
-                className: classes.select,
-                id: inputId,
-                "aria-invalid": !!error,
-                value: value1,
-                required: !optional,
-                disabled: disabled,
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("select", {
+                className: m.select,
+                id: Z,
+                "aria-invalid": !!N,
+                value: r,
+                required: !v,
+                disabled: E,
                 onChange: function onChange(e) {
-                    if (onChangeValue) {
-                        onChangeValue(e.target.value);
-                    }
+                    R && R(e.target.value);
                 },
                 onFocus: function onFocus() {
-                    return setIsFocused(true);
+                    return O(!0);
                 },
-                onBlur: function onBlur1(e) {
-                    setIsFocused(false);
-                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+                onBlur: function onBlur(e) {
+                    O(!1), M == null || M(e);
                 },
-                ref: function ref(actualRef) {
+                ref: function ref(e) {
                     [
-                        inputRef,
-                        focusableRef
-                    ].forEach(function(currentRef) {
-                        // @ts-expect-error current is typed as read-only
-                        currentRef.current = actualRef;
+                        x,
+                        f
+                    ].forEach(function(o) {
+                        o.current = e;
                     });
                 },
                 style: {
-                    // Override default browser opacity when disabled. This opacity also affects the label.
-                    // Without this fix, the label is invisible when disabled
                     opacity: 1
                 },
                 children: [
-                    options.every(function(param) {
-                        var value = param.value;
-                        return !!value;
-                    }) && // this is needed to allow a native select with no selected option
-                    /*#__PURE__*/ (0, _jsxRuntime).jsx("option", {
+                    p.every(function(param) {
+                        var e = param.value;
+                        return !!e;
+                    }) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("option", {
                         value: "",
                         style: {
                             display: "none"
                         }
                     }),
-                    options.map(function(param) {
-                        var val = param.value, text = param.text;
-                        return /*#__PURE__*/ (0, _jsxRuntime).jsx("option", {
-                            value: val,
-                            children: text
-                        }, val);
+                    p.map(function(param) {
+                        var e = param.value, o = param.text;
+                        return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("option", {
+                            value: e,
+                            children: o
+                        }, e);
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: classes.arrowDown,
-                "aria-hidden": true,
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevronDownRegular.default, {
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: m.arrowDown,
+                "aria-hidden": !0,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronDownRegularJs.default, {
                     size: 20
                 })
             })
         ]
-    }) : /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+    }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
-                className: classes.selectContainer,
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
+                className: m.selectContainer,
                 role: "button",
                 "aria-haspopup": "listbox",
-                ref: focusableRef
-            }, !disabled && containerActiveProps, {
+                ref: f
+            }, !E && be), {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, {
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, {
                         style: {
                             visibility: "hidden"
                         },
-                        fullWidth: fullWidth,
-                        endIcon: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevronDownRegular.default, {
+                        fullWidth: H,
+                        endIcon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronDownRegularJs.default, {
                             size: 20
                         }),
-                        focus: isFocused,
-                        label: label,
-                        value: value1,
-                        shrinkLabel: !!(value1 || valueState),
-                        name: name,
-                        helperText: helperText,
-                        required: !optional,
-                        disabled: disabled,
-                        id: inputId,
-                        error: error,
-                        inputRef: inputRef,
-                        fieldRef: fieldRef
+                        focus: Y,
+                        label: t,
+                        value: r,
+                        shrinkLabel: !!(r || l),
+                        name: c,
+                        helperText: U,
+                        required: !v,
+                        disabled: E,
+                        id: Z,
+                        error: N,
+                        inputRef: x,
+                        fieldRef: w
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                        className: classes.selectText,
-                        children: getOptionText(value1 !== null && value1 !== void 0 ? value1 : valueState)
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        className: m.selectText,
+                        children: we(r != null ? r : l)
                     })
                 ]
             })),
-            optionsShown && /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
+            F && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
                 onPress: function onPress(e) {
-                    toggleOptions(false);
-                    (0, _dom).cancelEvent(e);
+                    T(!1), (0, _domJs.cancelEvent)(e);
                 },
-                disableScroll: true,
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("ul", {
-                    onPointerDown: _dom.cancelEvent,
-                    className: classes.optionsContainer,
+                disableScroll: !0,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("ul", {
+                    onPointerDown: _domJs.cancelEvent,
+                    className: m.optionsContainer,
                     role: "listbox",
-                    ref: optionsMenuRef,
-                    children: options.map(function(param) {
-                        var val = param.value, text = param.text;
-                        return /*#__PURE__*/ (0, _jsxRuntime).jsx("li", {
+                    ref: b,
+                    children: p.map(function(param) {
+                        var e = param.value, o = param.text;
+                        return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("li", {
                             role: "option",
-                            "aria-selected": val === (valueState !== null && valueState !== void 0 ? valueState : value1),
-                            "data-value": val,
-                            className: (0, _classnames).default(classes.menuItem, _defineProperty({}, classes.menuItemSelected, val === tentativeValueState || val === (valueState !== null && valueState !== void 0 ? valueState : value1))),
-                            onPointerDown: _dom.cancelEvent,
+                            "aria-selected": e === (l != null ? l : r),
+                            "data-value": e,
+                            className: (0, _classnames.default)(m.menuItem, _defineProperty({}, m.menuItemSelected, e === S || e === (l != null ? l : r))),
+                            onPointerDown: _domJs.cancelEvent,
                             onClick: function onClick() {
-                                return setValue(val);
+                                return ee(e);
                             },
-                            ref: function ref(liRef) {
-                                if (liRef) {
-                                    optionRefs.current.set(val, liRef);
-                                } else {
-                                    optionRefs.current.delete(val);
-                                }
+                            ref: function ref(n) {
+                                n ? k.current.set(e, n) : k.current.delete(e);
                             },
-                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-                                regular: true,
-                                children: text
+                            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                regular: !0,
+                                children: o
                             })
-                        }, val);
+                        }, e);
                     })
                 })
             })
         ]
     });
 };
-var _default = Select;
-exports.default = _default;