@telefonica/mistica 10.9.0 → 10.11.0

package/dist-es/select.js

@@ -1,601 +1,569 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _defineProperty(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; }
-
 import * as React from 'react';
 import { useForm } from './form-context';
 import { useAriaId, useTheme } from './hooks';
 import { DOWN, ENTER, ESC, SPACE, TAB, UP } from './utils/key-codes';
 import { FieldContainer, HelperText, Label } from './text-field-components';
-import IconArrowDown from './icons/icon-arrow-down';
+import ChevronDownRegular from './generated/mistica-icons/icon-chevron-down-regular';
 import TextFieldBase from './text-field-base';
 import Overlay from './overlay';
 import classNames from 'classnames';
 import { isAndroid, isIos } from './utils/platform';
 import { createUseStyles } from './jss';
 import { cancelEvent } from './utils/dom';
-var useStyles = createUseStyles(function (theme) {
-  var _selectContainer, _menuItem;
-
-  return {
-    selectContainer: (_selectContainer = {
-      cursor: function cursor(_ref) {
-        var disabled = _ref.disabled;
-        return disabled ? 'auto' : 'pointer';
-      },
-      position: 'relative',
-      outline: 0
-    }, _defineProperty(_selectContainer, theme.mq.tabletOrSmaller, {
-      width: '100%'
-    }), _defineProperty(_selectContainer, theme.mq.desktopOrBigger, {
-      width: function width(_ref2) {
-        var fullWidth = _ref2.fullWidth;
-        return fullWidth ? '100%' : 'fit-content';
-      }
-    }), _selectContainer),
-    select: {
-      fontFamily: 'inherit',
-      backgroundColor: 'transparent',
-      // FieldContainer gives the correct background color
-      paddingTop: function paddingTop(_ref3) {
-        var label = _ref3.label;
-        return label ? 24 : 16;
-      },
-      paddingBottom: function paddingBottom(_ref4) {
-        var label = _ref4.label;
-        return label ? 8 : 16;
-      },
-      paddingRight: 0,
-      paddingLeft: 12,
-      border: 0,
-      outline: 0,
-      fontSize: 16,
-      color: theme.colors.textPrimary,
-      width: '100%',
-      height: '100%',
-      textOverflow: 'ellipsis',
-      '&:disabled': {
-        color: theme.colors.textDisabled
-      },
-      appearance: 'none',
-      cursor: function cursor(_ref5) {
-        var disabled = _ref5.disabled;
-        return disabled ? 'inherit' : 'pointer';
-      }
-    },
-    arrowDown: {
-      position: 'absolute',
-      right: 16,
-      top: 'calc(50% - 12px)',
-      pointerEvents: 'none',
-      opacity: function opacity(_ref6) {
-        var disabled = _ref6.disabled;
-        return disabled ? 0.3 : 1;
-      }
-    },
-    selectText: {
-      position: 'absolute',
-      pointerEvents: 'none',
-      left: 12 + 1,
-      // 12 for select paddingLeft and +1 for border
-      right: 48 + 1,
-      // 48 for icon and +1 for border
-      overflow: 'hidden',
-      top: function top(_ref7) {
-        var label = _ref7.label;
-        return label ? 27 : 17;
-      },
-      fontSize: 16,
-      color: function color(_ref8) {
-        var disabled = _ref8.disabled;
-        return disabled ? theme.colors.textDisabled : theme.colors.textPrimary;
-      },
-      maxWidth: '100%',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap'
-    },
-    optionsContainer: {
-      margin: 0,
-      padding: 0,
-      listStyleType: 'none',
-      position: 'absolute',
-      top: function top(_ref9) {
-        var optionsComputedProps = _ref9.optionsComputedProps;
-        return optionsComputedProps.top;
-      },
-      left: function left(_ref10) {
-        var optionsComputedProps = _ref10.optionsComputedProps;
-        return optionsComputedProps.left;
-      },
-      minWidth: function minWidth(_ref11) {
-        var optionsComputedProps = _ref11.optionsComputedProps;
-        return optionsComputedProps.width;
-      },
-      borderRadius: 4,
-      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,
-      paddingTop: 8,
-      paddingBottom: 8,
-      transformOrigin: function transformOrigin(_ref12) {
-        var optionsComputedProps = _ref12.optionsComputedProps;
-        return optionsComputedProps.transformOrigin;
-      },
-      transition: 'opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s',
-      opacity: function opacity(_ref13) {
-        var animateShowOptions = _ref13.animateShowOptions;
-        return animateShowOptions ? 1 : 0;
-      },
-      transform: function transform(_ref14) {
-        var animateShowOptions = _ref14.animateShowOptions;
-        return animateShowOptions ? 'scale(1)' : 'scale(0)';
-      },
-      maxHeight: function maxHeight(_ref15) {
-        var _optionsComputedProps;
-
-        var optionsComputedProps = _ref15.optionsComputedProps;
-        return (_optionsComputedProps = optionsComputedProps.maxHeight) !== null && _optionsComputedProps !== void 0 ? _optionsComputedProps : '416px';
-      },
-      overflowY: 'auto'
-    },
-    menuItemSelected: {
-      backgroundColor: 'rgba(0, 0, 0, 0.14)'
-    },
-    menuItem: (_menuItem = {
-      color: theme.colors.textPrimary,
-      lineHeight: 1.5,
-      padding: '6px 16px',
-      height: 48,
-      transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
-    }, _defineProperty(_menuItem, theme.mq.supportsHover, {
-      '&:hover': {
-        backgroundColor: 'rgba(0, 0, 0, 0.08)'
-      }
-    }), _defineProperty(_menuItem, "display", 'flex'), _defineProperty(_menuItem, "alignItems", 'center'), _defineProperty(_menuItem, "cursor", 'pointer'), _menuItem)
-  };
-});
-
-var Select = function Select(_ref16) {
-  var _ref20, _inputRef$current;
-
-  var id = _ref16.id,
-      label = _ref16.label,
-      helperTextProp = _ref16.helperText,
-      valueProp = _ref16.value,
-      onChangeValueProp = _ref16.onChangeValue,
-      name = _ref16.name,
-      fullWidth = _ref16.fullWidth,
-      options = _ref16.options,
-      optional = _ref16.optional,
-      disabledProp = _ref16.disabled,
-      errorProp = _ref16.error,
-      _onBlur = _ref16.onBlur,
-      _ref16$autoFocus = _ref16.autoFocus,
-      autoFocus = _ref16$autoFocus === void 0 ? false : _ref16$autoFocus,
-      native = _ref16.native;
-  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 _React$useState = React.useState(),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      valueState = _React$useState2[0],
-      setValueState = _React$useState2[1];
-
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      optionsShown = _React$useState4[0],
-      setOptionsShown = _React$useState4[1];
-
-  var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      animateShowOptions = _React$useState6[0],
-      setAnimateShowOptions = _React$useState6[1];
-
-  var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      isFocused = _React$useState8[0],
-      setIsFocused = _React$useState8[1];
-
-  var _React$useState9 = React.useState({}),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      optionsComputedProps = _React$useState10[0],
-      setOptionsComputedProps = _React$useState10[1];
-
-  var _React$useState11 = React.useState(),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      tentativeValueState = _React$useState12[0],
-      setTentativeValueState = _React$useState12[1];
-
-  var lastElementSelectionScrollTop = React.useRef(null);
-  var inputId = useAriaId(id);
-
-  var _useForm = useForm(),
-      rawValues = _useForm.rawValues,
-      setRawValue = _useForm.setRawValue,
-      formSetValue = _useForm.setValue,
-      formStatus = _useForm.formStatus,
-      formErrors = _useForm.formErrors,
-      setFormError = _useForm.setFormError,
-      register = _useForm.register;
-
-  var _useTheme = useTheme(),
-      platformOverrides = _useTheme.platformOverrides;
-
-  var shouldUseNative = native || process.env.NODE_ENV === 'test' || isAndroid(platformOverrides) || isIos(platformOverrides);
-  var disabled = disabledProp || formStatus === 'sending';
-  var error = errorProp || !!formErrors[name];
-  var helperText = formErrors[name] || helperTextProp;
-  var value = 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,
-      error: ''
-    });
-    setRawValue({
-      name: name,
-      value: value
-    });
-    formSetValue({
-      name: name,
-      value: value
-    });
-  };
-
-  var toggleOptions = function toggleOptions(show) {
-    if (show) {
-      if (fieldRef !== null && fieldRef !== void 0 && fieldRef.current) {
-        var MAX_OPTIONS = 8;
-        var MARGIN_TOP_SIZE = 12;
-        var PADDING_SIZE = 16;
-
-        var _fieldRef$current$get = fieldRef.current.getBoundingClientRect(),
-            selectTop = _fieldRef$current$get.top,
-            width = _fieldRef$current$get.width,
-            left = _fieldRef$current$get.left,
-            height = _fieldRef$current$get.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,
-              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,
-            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 : value);
+import { Text3 } from './text';
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
     } else {
-      setAnimateShowOptions(false);
-      setOptionsShown(false);
-      setTentativeValueState(undefined);
-    }
-  };
-
-  var setValue = function setValue(val) {
-    var _optionsMenuRef$curre;
-
-    // @ts-expect-error current is typed as read-only
-    lastElementSelectionScrollTop.current = (_optionsMenuRef$curre = optionsMenuRef.current) === null || _optionsMenuRef$curre === void 0 ? void 0 : _optionsMenuRef$curre.scrollTop;
-    toggleOptions(false);
-
-    if (onChangeValue && typeof val === 'string') {
-      onChangeValue(val);
+        obj[key] = value;
     }
-
-    if (typeof value === 'undefined') {
-      setValueState(val);
-    }
-  };
-
-  var scrollIntoTargetListElement = function scrollIntoTargetListElement(targetValueState) {
-    var _optionsMenuRef$curre2;
-
-    var menuClientRect = (_optionsMenuRef$curre2 = optionsMenuRef.current) === null || _optionsMenuRef$curre2 === void 0 ? void 0 : _optionsMenuRef$curre2.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();
-        return;
-      }
-
-      if (clientRect && clientRect.top + clientRect.height / 2 <= menuClientRect.top) {
-        itemRef === null || itemRef === void 0 ? void 0 : itemRef.scrollIntoView(false);
-      }
+    return obj;
+}
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+function _iterableToArrayLimit(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+    try {
+        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
     }
-  };
-
-  var focusableElement = focusableRef.current;
-  var inputElement = inputRef.current;
-  React.useEffect(function () {
-    register(name, {
-      input: inputRef.current,
-      focusableElement: focusableRef.current
-    });
-    return function () {
-      register(name, {
-        input: null,
-        focusableElement: null
-      });
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+var _maxHeight;
+var _obj, _obj1;
+var useStyles = createUseStyles(function(theme) {
+    return {
+        selectContainer: (_obj = {
+            cursor: function(param) {
+                var disabled = param.disabled;
+                return disabled ? 'auto' : 'pointer';
+            },
+            position: 'relative',
+            outline: 0
+        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
+            width: '100%'
+        }), _defineProperty(_obj, theme.mq.desktopOrBigger, {
+            width: function(param) {
+                var fullWidth = param.fullWidth;
+                return fullWidth ? '100%' : 'fit-content';
+            }
+        }), _obj),
+        select: {
+            fontFamily: 'inherit',
+            backgroundColor: 'transparent',
+            paddingTop: function(param) {
+                var label = param.label;
+                return label ? 24 : 16;
+            },
+            paddingBottom: function(param) {
+                var label = param.label;
+                return label ? 8 : 16;
+            },
+            paddingRight: 0,
+            paddingLeft: 12,
+            border: 0,
+            outline: 0,
+            fontSize: 16,
+            color: theme.colors.textPrimary,
+            width: '100%',
+            height: '100%',
+            textOverflow: 'ellipsis',
+            '&:disabled': {
+                color: theme.colors.textDisabled
+            },
+            appearance: 'none',
+            cursor: function(param) {
+                var disabled = param.disabled;
+                return disabled ? 'inherit' : 'pointer';
+            }
+        },
+        arrowDown: {
+            position: 'absolute',
+            right: 16,
+            top: 'calc(50% - 10px)',
+            pointerEvents: 'none',
+            opacity: function(param) {
+                var disabled = param.disabled;
+                return disabled ? 0.3 : 1;
+            }
+        },
+        selectText: {
+            position: 'absolute',
+            pointerEvents: 'none',
+            left: 12 + 1,
+            right: 48 + 1,
+            overflow: 'hidden',
+            top: function(param) {
+                var label = param.label;
+                return label ? 27 : 17;
+            },
+            fontSize: 16,
+            color: function(param) {
+                var disabled = param.disabled;
+                return disabled ? theme.colors.textDisabled : theme.colors.textPrimary;
+            },
+            maxWidth: '100%',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        },
+        optionsContainer: {
+            margin: 0,
+            padding: 0,
+            listStyleType: 'none',
+            position: 'absolute',
+            top: function(param) {
+                var optionsComputedProps = param.optionsComputedProps;
+                return optionsComputedProps.top;
+            },
+            left: function(param) {
+                var optionsComputedProps = param.optionsComputedProps;
+                return optionsComputedProps.left;
+            },
+            minWidth: function(param) {
+                var optionsComputedProps = param.optionsComputedProps;
+                return optionsComputedProps.width;
+            },
+            borderRadius: 4,
+            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,
+            paddingTop: 8,
+            paddingBottom: 8,
+            transformOrigin: function(param) {
+                var optionsComputedProps = param.optionsComputedProps;
+                return optionsComputedProps.transformOrigin;
+            },
+            transition: 'opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s',
+            opacity: function(param) {
+                var animateShowOptions = param.animateShowOptions;
+                return animateShowOptions ? 1 : 0;
+            },
+            transform: function(param) {
+                var animateShowOptions = param.animateShowOptions;
+                return animateShowOptions ? 'scale(1)' : 'scale(0)';
+            },
+            maxHeight: function(param) {
+                var optionsComputedProps = param.optionsComputedProps;
+                return (_maxHeight = optionsComputedProps.maxHeight) !== null && _maxHeight !== void 0 ? _maxHeight : '416px';
+            },
+            overflowY: 'auto'
+        },
+        menuItemSelected: {
+            backgroundColor: 'rgba(0, 0, 0, 0.14)'
+        },
+        menuItem: (_obj1 = {
+            color: theme.colors.textPrimary,
+            padding: '6px 16px',
+            height: 48,
+            transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+        }, _defineProperty(_obj1, theme.mq.supportsHover, {
+            '&:hover': {
+                backgroundColor: 'rgba(0, 0, 0, 0.08)'
+            }
+        }), _defineProperty(_obj1, "display", 'flex'), _defineProperty(_obj1, "alignItems", 'center'), _defineProperty(_obj1, "cursor", 'pointer'), _obj1)
     };
-  }, [name, register, focusableRef, inputRef, focusableElement, inputElement]);
-  React.useEffect(function () {
-    var updateTentativeValueState = function updateTentativeValueState(e) {
-      var _keyToOperand;
-
-      var keyToOperand = (_keyToOperand = {}, _defineProperty(_keyToOperand, UP, -1), _defineProperty(_keyToOperand, DOWN, 1), _keyToOperand);
-      var operand = keyToOperand[e.keyCode];
-
-      if (operand) {
-        var _options$value, _options;
-
-        cancelEvent(e);
-        var newTentativeValueState = (_options$value = (_options = options[options.findIndex(function (_ref17) {
-          var value = _ref17.value;
-          return value === tentativeValueState;
-        }) + operand]) === null || _options === void 0 ? void 0 : _options.value) !== null && _options$value !== void 0 ? _options$value : tentativeValueState;
-        setTentativeValueState(newTentativeValueState);
-        scrollIntoTargetListElement(newTentativeValueState);
-      }
+});
+var _obj2;
+var Select = function(param) {
+    var id = param.id, label = param.label, helperTextProp = param.helperText, valueProp = param.value, onChangeValueProp = param.onChangeValue, name = param.name, fullWidth = param.fullWidth, options = param.options, optional = param.optional, disabledProp = param.disabled, errorProp = param.error, onBlur = param.onBlur, _autoFocus = param.autoFocus, autoFocus = _autoFocus === void 0 ? false : _autoFocus, native = param.native;
+    var ref11;
+    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 = useAriaId(id);
+    var ref7 = useForm(), rawValues = ref7.rawValues, setRawValue = ref7.setRawValue, formSetValue = ref7.setValue, formStatus = ref7.formStatus, formErrors = ref7.formErrors, setFormError = ref7.setFormError, register = ref7.register;
+    var ref8 = useTheme(), platformOverrides = ref8.platformOverrides;
+    var shouldUseNative = native || process.env.NODE_ENV === 'test' || isAndroid(platformOverrides) || isIos(platformOverrides);
+    var disabled = disabledProp || formStatus === 'sending';
+    var error = errorProp || !!formErrors[name];
+    var helperText = formErrors[name] || helperTextProp;
+    var value = valueProp !== null && valueProp !== void 0 ? valueProp : rawValues[name];
+    var onChangeValue = function(value) {
+        onChangeValueProp === null || onChangeValueProp === void 0 ? void 0 : onChangeValueProp(value);
+        setFormError({
+            name: name,
+            error: ''
+        });
+        setRawValue({
+            name: name,
+            value: value
+        });
+        formSetValue({
+            name: name,
+            value: value
+        });
     };
-
-    var handleKeyDown = function handleKeyDown(e) {
-      if (optionsShown) {
-        if (e.keyCode === TAB) {
-          cancelEvent(e);
+    var toggleOptions = function(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,
+                            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,
+                        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 : value);
+        } else {
+            setAnimateShowOptions(false);
+            setOptionsShown(false);
+            setTentativeValueState(undefined);
         }
-
-        if (e.keyCode === ESC) {
-          toggleOptions(false);
+    };
+    var setValue = function(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 (e.keyCode === ENTER || e.keyCode === SPACE) {
-          cancelEvent(e);
-
-          if (options.findIndex(function (_ref18) {
-            var value = _ref18.value;
-            return value === tentativeValueState;
-          }) !== -1 && tentativeValueState !== valueState) {
-            setValue(tentativeValueState);
-          }
-
-          toggleOptions(false);
+        if (typeof value === 'undefined') {
+            setValueState(val);
         }
-      } // so we don't change the tentativeValueState while menu is closing
-
-
-      if (animateShowOptions) {
-        updateTentativeValueState(e);
-      }
     };
-
-    document.addEventListener('keydown', handleKeyDown, false);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown, false);
+    var scrollIntoTargetListElement = function(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();
+                return;
+            }
+            if (clientRect && clientRect.top + clientRect.height / 2 <= menuClientRect.top) {
+                itemRef === null || itemRef === void 0 ? void 0 : itemRef.scrollIntoView(false);
+            }
+        }
     };
-  });
-  React.useEffect(function () {
-    if (autoFocus && focusableRef.current) {
-      focusableRef.current.focus();
-    }
-  }, [autoFocus]);
-  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 _options$find;
-
-    return val ? (_options$find = options.find(function (_ref19) {
-      var value = _ref19.value;
-      return value === val;
-    })) === null || _options$find === void 0 ? void 0 : _options$find.text : '';
-  };
-
-  var containerActiveProps = {
-    tabIndex: 0,
-    onFocus: function onFocus() {
-      return setIsFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setIsFocused(false);
-    },
-    onClick: function onClick() {
-      toggleOptions(true);
-      setIsFocused(true);
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (!optionsShown && (e.keyCode === SPACE || e.keyCode === ENTER)) {
-        cancelEvent(e);
-        toggleOptions(true);
-      }
-    }
-  };
-  return shouldUseNative ? /*#__PURE__*/React.createElement(FieldContainer, {
-    disabled: disabled,
-    helperText: /*#__PURE__*/React.createElement(HelperText, {
-      error: error,
-      leftText: helperText
-    }),
-    fieldRef: fieldRef,
-    fullWidth: fullWidth
-  }, label && /*#__PURE__*/React.createElement(Label, {
-    error: error,
-    forId: inputId,
-    inputState: isFocused ? 'focused' : ((_ref20 = value !== null && value !== void 0 ? value : valueState) !== null && _ref20 !== void 0 ? _ref20 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) ? 'filled' : 'default',
-    disabled: disabled,
-    optional: optional
-  }, label), /*#__PURE__*/React.createElement("select", {
-    className: classes.select,
-    id: inputId,
-    "aria-invalid": !!error,
-    value: value,
-    required: !optional,
-    disabled: disabled,
-    onChange: function onChange(e) {
-      if (onChangeValue) {
-        onChangeValue(e.target.value);
-      }
-    },
-    onFocus: function onFocus() {
-      return setIsFocused(true);
-    },
-    onBlur: function onBlur(e) {
-      setIsFocused(false);
-      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
-    },
-    ref: function ref(actualRef) {
-      [inputRef, focusableRef].forEach(function (currentRef) {
-        // @ts-expect-error current is typed as read-only
-        currentRef.current = actualRef;
-      });
-    },
-    style: {
-      // Override default browser opacity when disabled. This opacity also affects the label.
-      // Without this fix, the label is invisible when disabled
-      opacity: 1
-    }
-  }, options.every(function (_ref21) {
-    var value = _ref21.value;
-    return !!value;
-  }) &&
-  /*#__PURE__*/
-  // if no "empty" option exists, insert a dummy empty option
-  // this is needed to allow a native select with no selected option
-  React.createElement("option", {
-    value: "",
-    style: {
-      display: 'none'
-    }
-  }), options.map(function (_ref22) {
-    var val = _ref22.value,
-        text = _ref22.text;
-    return /*#__PURE__*/React.createElement("option", {
-      key: val,
-      value: val
-    }, text);
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.arrowDown,
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(IconArrowDown, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
-    className: classes.selectContainer,
-    role: "button",
-    "aria-haspopup": "listbox",
-    ref: focusableRef
-  }, !disabled && containerActiveProps), /*#__PURE__*/React.createElement(TextFieldBase, {
-    style: {
-      visibility: 'hidden'
-    },
-    fullWidth: fullWidth,
-    endIcon: /*#__PURE__*/React.createElement(IconArrowDown, null),
-    focus: isFocused,
-    label: label,
-    value: value,
-    shrinkLabel: !!(value || valueState),
-    name: name,
-    helperText: helperText,
-    required: !optional,
-    disabled: disabled,
-    id: inputId,
-    error: error,
-    inputRef: inputRef,
-    fieldRef: fieldRef
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.selectText
-  }, getOptionText(value !== null && value !== void 0 ? value : valueState))), optionsShown && /*#__PURE__*/React.createElement(Overlay, {
-    onPress: function onPress(e) {
-      toggleOptions(false);
-      cancelEvent(e);
-    },
-    disableScroll: true
-  }, /*#__PURE__*/React.createElement("ul", {
-    onPointerDown: cancelEvent,
-    className: classes.optionsContainer,
-    role: "listbox",
-    ref: optionsMenuRef
-  }, options.map(function (_ref23) {
-    var val = _ref23.value,
-        text = _ref23.text;
-    return /*#__PURE__*/React.createElement("li", {
-      role: "option",
-      "aria-selected": val === (valueState !== null && valueState !== void 0 ? valueState : value),
-      key: val,
-      "data-value": val,
-      className: classNames(classes.menuItem, _defineProperty({}, classes.menuItemSelected, val === tentativeValueState || val === (valueState !== null && valueState !== void 0 ? valueState : value))),
-      onPointerDown: cancelEvent,
-      onClick: function onClick() {
-        return setValue(val);
-      },
-      ref: function ref(liRef) {
-        if (liRef) {
-          optionRefs.current.set(val, liRef);
-        } else {
-          optionRefs.current.delete(val);
+    var focusableElement = focusableRef.current;
+    var inputElement = inputRef.current;
+    React.useEffect(function() {
+        register(name, {
+            input: inputRef.current,
+            focusableElement: focusableRef.current
+        });
+        return function() {
+            register(name, {
+                input: null,
+                focusableElement: null
+            });
+        };
+    }, [
+        name,
+        register,
+        focusableRef,
+        inputRef,
+        focusableElement,
+        inputElement
+    ]);
+    React.useEffect(function() {
+        var updateTentativeValueState = function(e) {
+            var keyToOperand = (_obj2 = {
+            }, _defineProperty(_obj2, UP, -1), _defineProperty(_obj2, DOWN, 1), _obj2);
+            var operand = keyToOperand[e.keyCode];
+            if (operand) {
+                var ref;
+                cancelEvent(e);
+                var ref9;
+                var newTentativeValueState = (ref9 = (ref = options[options.findIndex(function(param) {
+                    var value = param.value;
+                    return value === tentativeValueState;
+                }) + operand]) === null || ref === void 0 ? void 0 : ref.value) !== null && ref9 !== void 0 ? ref9 : tentativeValueState;
+                setTentativeValueState(newTentativeValueState);
+                scrollIntoTargetListElement(newTentativeValueState);
+            }
+        };
+        var handleKeyDown = function(e) {
+            if (optionsShown) {
+                if (e.keyCode === TAB) {
+                    cancelEvent(e);
+                }
+                if (e.keyCode === ESC) {
+                    toggleOptions(false);
+                }
+                if (e.keyCode === ENTER || e.keyCode === SPACE) {
+                    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);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, false);
+        return function() {
+            document.removeEventListener('keydown', handleKeyDown, false);
+        };
+    });
+    React.useEffect(function() {
+        if (autoFocus && focusableRef.current) {
+            focusableRef.current.focus();
+        }
+    }, [
+        autoFocus
+    ]);
+    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(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 = {
+        tabIndex: 0,
+        onFocus: function() {
+            return setIsFocused(true);
+        },
+        onBlur: function() {
+            return setIsFocused(false);
+        },
+        onClick: function() {
+            toggleOptions(true);
+            setIsFocused(true);
+        },
+        onKeyDown: function(e) {
+            if (!optionsShown && (e.keyCode === SPACE || e.keyCode === ENTER)) {
+                cancelEvent(e);
+                toggleOptions(true);
+            }
+        }
+    };
+    var ref15;
+    return shouldUseNative ? /*#__PURE__*/ React.createElement(FieldContainer, {
+        disabled: disabled,
+        helperText: /*#__PURE__*/ React.createElement(HelperText, {
+            error: error,
+            leftText: helperText
+        }),
+        fieldRef: fieldRef,
+        fullWidth: fullWidth
+    }, label && /*#__PURE__*/ React.createElement(Label, {
+        error: error,
+        forId: inputId,
+        inputState: isFocused ? 'focused' : ((ref15 = value !== null && value !== void 0 ? value : valueState) !== null && ref15 !== void 0 ? ref15 : (ref11 = inputRef.current) === null || ref11 === void 0 ? void 0 : ref11.value) ? 'filled' : 'default',
+        disabled: disabled,
+        optional: optional
+    }, label), /*#__PURE__*/ React.createElement("select", {
+        className: classes.select,
+        id: inputId,
+        "aria-invalid": !!error,
+        value: value,
+        required: !optional,
+        disabled: disabled,
+        onChange: function(e) {
+            if (onChangeValue) {
+                onChangeValue(e.target.value);
+            }
+        },
+        onFocus: function() {
+            return setIsFocused(true);
+        },
+        onBlur: function(e) {
+            setIsFocused(false);
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        },
+        ref: function(actualRef) {
+            [
+                inputRef,
+                focusableRef
+            ].forEach(function(currentRef) {
+                // @ts-expect-error current is typed as read-only
+                currentRef.current = actualRef;
+            });
+        },
+        style: {
+            // Override default browser opacity when disabled. This opacity also affects the label.
+            // Without this fix, the label is invisible when disabled
+            opacity: 1
+        }
+    }, options.every(function(param) {
+        var value = param.value;
+        return !!value;
+    }) && // if no "empty" option exists, insert a dummy empty option
+    // this is needed to allow a native select with no selected option
+    /*#__PURE__*/ React.createElement("option", {
+        value: "",
+        style: {
+            display: 'none'
         }
-      }
-    }, text);
-  }))));
+    }), options.map(function(param) {
+        var val = param.value, text = param.text;
+        /*#__PURE__*/ return React.createElement("option", {
+            key: val,
+            value: val
+        }, text);
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: classes.arrowDown,
+        "aria-hidden": true
+    }, /*#__PURE__*/ React.createElement(ChevronDownRegular, {
+        size: 20
+    }))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", _extends({
+        className: classes.selectContainer,
+        role: "button",
+        "aria-haspopup": "listbox",
+        ref: focusableRef
+    }, !disabled && containerActiveProps), /*#__PURE__*/ React.createElement(TextFieldBase, {
+        style: {
+            visibility: 'hidden'
+        },
+        fullWidth: fullWidth,
+        endIcon: /*#__PURE__*/ React.createElement(ChevronDownRegular, {
+            size: 20
+        }),
+        focus: isFocused,
+        label: label,
+        value: value,
+        shrinkLabel: !!(value || valueState),
+        name: name,
+        helperText: helperText,
+        required: !optional,
+        disabled: disabled,
+        id: inputId,
+        error: error,
+        inputRef: inputRef,
+        fieldRef: fieldRef
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: classes.selectText
+    }, getOptionText(value !== null && value !== void 0 ? value : valueState))), optionsShown && /*#__PURE__*/ React.createElement(Overlay, {
+        onPress: function(e) {
+            toggleOptions(false);
+            cancelEvent(e);
+        },
+        disableScroll: true
+    }, /*#__PURE__*/ React.createElement("ul", {
+        onPointerDown: cancelEvent,
+        className: classes.optionsContainer,
+        role: "listbox",
+        ref: optionsMenuRef
+    }, options.map(function(param) {
+        var val = param.value, text = param.text;
+        /*#__PURE__*/ return React.createElement("li", {
+            role: "option",
+            "aria-selected": val === (valueState !== null && valueState !== void 0 ? valueState : value),
+            key: val,
+            "data-value": val,
+            className: classNames(classes.menuItem, _defineProperty({
+            }, classes.menuItemSelected, val === tentativeValueState || val === (valueState !== null && valueState !== void 0 ? valueState : value))),
+            onPointerDown: cancelEvent,
+            onClick: function() {
+                return setValue(val);
+            },
+            ref: function(liRef) {
+                if (liRef) {
+                    optionRefs.current.set(val, liRef);
+                } else {
+                    optionRefs.current.delete(val);
+                }
+            }
+        }, /*#__PURE__*/ React.createElement(Text3, {
+            regular: true
+        }, text));
+    }))));
 };
-
-export default Select;
+export default Select;