@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/SearchField/SearchField.js

@@ -8,20 +8,19 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { useSearchField } from '@react-aria/searchfield';
-import { useSearchFieldState } from '@react-stately/searchfield';
+import { useSearchField } from 'react-aria';
+import { useSearchFieldState } from 'react-stately';
 import CloseIcon from 'mdi-react/CloseIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
 import PropTypes from 'prop-types';
-import { Box, Icon, IconButton, Input, Label } from '../../';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { Box, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+
 /**
  * Renders a search field with associated controls including visual elements and keyboard
  * interaction handlers.
@@ -31,61 +30,53 @@ import { useField, usePropWarning } from '../../hooks';
  * [useSearchFieldState](https://react-spectrum.adobe.com/react-stately/useSearchFieldState.html)
  * from React Stately.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var autocomplete = props.autocomplete,
-      hasAutoFocus = props.hasAutoFocus,
-      hasNoClearButton = props.hasNoClearButton,
-      icon = props.icon,
-      isExcludedFromTabOrder = props.isExcludedFromTabOrder,
-      label = props.label,
-      controlProps = props.controlProps,
-      iconProps = props.iconProps,
-      labelProps = props.labelProps;
+    hasAutoFocus = props.hasAutoFocus,
+    hasNoClearButton = props.hasNoClearButton,
+    icon = props.icon,
+    isExcludedFromTabOrder = props.isExcludedFromTabOrder,
+    label = props.label,
+    controlProps = props.controlProps,
+    iconProps = props.iconProps,
+    labelProps = props.labelProps;
   var searchRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return searchRef.current;
   });
   var state = useSearchFieldState(props);
-
   var _useSearchField = useSearchField(_objectSpread({
-    autoComplete: autocomplete,
-    autoFocus: hasAutoFocus,
-    excludeFromTabOrder: isExcludedFromTabOrder
-  }, props), state, searchRef),
-      raLabelProps = _useSearchField.labelProps,
-      raInputProps = _useSearchField.inputProps,
-      clearButtonProps = _useSearchField.clearButtonProps;
-
+      autoComplete: autocomplete,
+      autoFocus: hasAutoFocus,
+      excludeFromTabOrder: isExcludedFromTabOrder
+    }, props), state, searchRef),
+    raLabelProps = _useSearchField.labelProps,
+    raInputProps = _useSearchField.inputProps,
+    clearButtonProps = _useSearchField.clearButtonProps;
   var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
-    labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
-    controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
-  })),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+      labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
+      controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   var handleKeyDownEvent = function handleKeyDownEvent(e) {
     var key = e.key;
-
     if (key === 'Enter' || key === ' ') {
       state.setValue('');
     }
   };
-
-  return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
-    variant: "forms.search.container"
-  }, ___EmotionJSX(Input, _extends({
+  return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.search.wrapper"
+  }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
     ref: searchRef,
     pl: 40,
     pr: 40
-  }, fieldControlProps, {
-    variant: "forms.input.search"
-  })), icon && ___EmotionJSX(Icon, _extends({
+  }, fieldControlInputProps)), icon && ___EmotionJSX(Icon, _extends({
     icon: icon,
     variant: "forms.search.icon",
     size: 22
@@ -104,134 +95,102 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     icon: CloseIcon
   }))));
 });
-SearchField.propTypes = _objectSpread({
+SearchField.propTypes = _objectSpread(_objectSpread({
   /**
    * @ignore
    * Identifies the currently active element when DOM focus is on a composite widget, textbox,
    * group, or application.
    */
   'aria-activedescendant': PropTypes.string,
-
   /**
    * Indicates whether inputting text could trigger display of one or more predictions of the
    * user's intended value for an input and specifies how predictions would be presented if they
    * are made.
    */
   'aria-autocomplete': PropTypes.oneOf(['none', 'inline', 'list', 'both']),
-
   /**
    * @ignore
    * Indicates the availability and type of interactive popup element, such as menu or dialog, that
    * can be triggered by an element.
    */
   'aria-haspopup': PropTypes.oneOf([true, false, 'menu', 'listbox', 'tree', 'grid', 'dialog']),
-
   /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
   autoComplete: PropTypes.string,
-
   /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: PropTypes.string,
-
   /** The default value (uncontrolled). */
   defaultValue: PropTypes.string,
-
   /** Whether the element should receive focus on render. */
   hasAutoFocus: PropTypes.bool,
-
   /** Whether to display the clear button or not. */
   hasNoClearButton: PropTypes.bool,
-
   /** The icon to display alongside the placeholder text. */
   icon: PropTypes.elementType,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
-
   /** Whether the input is disabled. */
   isDisabled: PropTypes.bool,
-
   /** The content to display as the label. */
   label: PropTypes.node,
-
   /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
   name: PropTypes.string,
-
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: PropTypes.string,
-
   /** The current value (controlled). */
   value: PropTypes.string,
-
   /**
    * Handler that is called when the SearchField is submitted.
    * (value: string) => void
    */
   onSubmit: PropTypes.func,
-
   /**
    * Handler that is called when the clear button is pressed.
    * () => void
    */
   onClear: PropTypes.func,
-
   /**
    * Handler that is called when the element receives focus.
    * (e: FocusEvent) => void
    */
   onFocus: PropTypes.func,
-
   /**
    * Handler that is called when the element loses focus.
    * (e: FocusEvent) => void
    */
   onBlur: PropTypes.func,
-
   /**
    * Handler that is called when a key is pressed.
    * (e: KeyboardEvent) => void
    */
   onKeyDown: PropTypes.func,
-
   /**
    * Handler that is called when a key is released.
    * (e: KeyboardEvent) => void
    */
   onKeyUp: PropTypes.func,
-
   /**
    * Handler that is called when the value changes.
    * (value: string) => void
    */
   onChange: PropTypes.func,
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread into the input element. */
-  controlProps: PropTypes.shape({}),
-
   /** Props object that is spread into the icon element. */
   iconProps: PropTypes.shape({}),
-
-  /** Props object that is spread into the label element. */
-  labelProps: PropTypes.shape({}),
   // NOTE: unsurfaced useSearchField / useSearchFieldState props listed below
 
   /** @ignore Whether the input can be selected but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /**
    * @ignore
    * Whether user input is required on the input before form submission.
    * Often paired with the necessityIndicator prop to add a visual indicator to the input.
    */
   isRequired: PropTypes.bool,
-
   /**
    * @ignore
    * Handler that is called when the element's focus status changes.
    * (isFocused: boolean) => void
    */
   onFocusChange: PropTypes.func,
-
   /**
    * @ignore
    * Whether to exclude the element from the sequential tab order. If true, the element will not be
@@ -240,77 +199,63 @@ SearchField.propTypes = _objectSpread({
    * available.
    */
   isExcludedFromTabOrder: PropTypes.bool,
-
   /** The maximum number of characters supported by the input set by the user. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). */
   maxLength: PropTypes.number,
-
   /** @ignore The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). */
   minLength: PropTypes.number,
-
   /** @ignore Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). */
   pattern: PropTypes.string,
-
   /** @ignore The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
   type: PropTypes.string,
-
   /**
    * @ignore
    * Hints at the type of data that might be entered by the user while editing the element or its
    * contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
    */
   inputMode: PropTypes.oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
-
   /**
    * @ignore
    * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
    */
   onCopy: PropTypes.func,
-
   /** @ignore Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). */
   onCut: PropTypes.func,
-
   /** @ignore Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). */
   onPaste: PropTypes.func,
-
   /**
    * @ignore
    * Handler that is called when a text composition system starts a new text composition session.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
    */
   onCompositionStart: PropTypes.func,
-
   /**
    * @ignore
    * Handler that is called when a text composition system completes or cancels the current text
    * composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
    */
   onCompositionEnd: PropTypes.func,
-
   /**
    * @ignore
    * Handler that is called when a new character is received in the current text composition
    * session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
    */
   onCompositionUpdate: PropTypes.func,
-
   /**
    * @ignore
    * Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
    */
   onSelect: PropTypes.func,
-
   /**
    * @ignore
    * Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
    */
   onBeforeInput: PropTypes.func,
-
   /**
    * @ignore
    * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
    */
   onInput: PropTypes.func
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 SearchField.defaultProps = {
   hasNoClearButton: false,
   icon: SearchIcon

package/lib/components/SearchField/SearchField.stories.js

@@ -9,17 +9,15 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useState } from 'react';
 import Users from 'mdi-react/AccountGroupIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
-import { Box, SearchField, Text } from '../../';
-import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/devUtils/props/ariaAttributes';
+import { Box, SearchField, Text } from '../..';
 import { useDebounce } from '../../hooks';
+import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/SearchField',
@@ -31,7 +29,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -50,10 +48,7 @@ export default {
     hasAutoFocus: {},
     hasNoClearButton: {},
     autoComplete: {},
-    containerProps: {},
     iconProps: {},
-    controlProps: {},
-    labelProps: {},
     name: {},
     id: {},
     'aria-autocomplete': {
@@ -64,7 +59,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(SearchField, _extends({}, args, {
@@ -72,15 +67,14 @@ export var Default = function Default(args) {
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-
   }));
 };
+
 export var Controlled = function Controlled() {
   var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   return ___EmotionJSX(SearchField, {
     value: value,
     onChange: setValue,
@@ -89,9 +83,9 @@ export var Controlled = function Controlled() {
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-
   });
 };
+
 export var CustomIcon = function CustomIcon() {
   return ___EmotionJSX(SearchField, {
     icon: Users,
@@ -100,9 +94,9 @@ export var CustomIcon = function CustomIcon() {
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-
   });
 };
+
 export var NoClearButton = function NoClearButton() {
   return ___EmotionJSX(SearchField, {
     hasNoClearButton: true,
@@ -111,15 +105,14 @@ export var NoClearButton = function NoClearButton() {
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-
   });
 };
+
 export var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
   var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
   var debouncedSearchText = useDebounce({
     value: value,
     delay: 500
@@ -132,7 +125,6 @@ export var ControlledWithDebouncedInput = function ControlledWithDebouncedInput(
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-
   }), ___EmotionJSX(Text, {
     mt: "xs"
   }, "Debounced value: ".concat(debouncedSearchText)));

package/lib/components/SearchField/SearchField.test.js

@@ -11,13 +11,12 @@ var defaultProps = {
   'data-testid': testId,
   label: testLabel
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(SearchField, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default search field', function () {
   getComponent();
@@ -74,8 +73,8 @@ test('search isReadOnly', function () {
 test('search isRequired', function () {
   getComponent({
     isRequired: true
-  }); // { exact: false } is used because of the required indicator asterisk
-
+  });
+  // { exact: false } is used because of the required indicator asterisk
   var search = screen.getByLabelText(testLabel, {
     exact: false
   });

package/lib/{styles/forms/select.js → components/SelectField/Select.styles.js}

@@ -7,20 +7,18 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 // Styles for default select and variants go here.
-import { input } from './input';
-import { text } from '../variants';
-import { defaultFocus } from '../variants/buttons';
+import { text } from '../../styles/variants';
+import { defaultFocus } from '../Button/Buttons.styles';
+import { input } from '../Input/Input.styles';
 var activeFloatLabel = {
   pt: 'md',
   pb: 'xs'
-}; // Default select
+};
 
+// Default select
 export var select = _objectSpread(_objectSpread({}, input), {}, {
   display: 'flex',
   alignItems: 'center',

package/lib/components/SelectField/SelectField.js

@@ -7,19 +7,19 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import { usePropWarning, useSelectField } from '../../hooks';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { useSelectField, usePropWarning } from '../../hooks';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import SelectFieldBase from '../SelectFieldBase';
-import statuses from '../../utils/devUtils/constants/statuses';
+
 /**
  * Select field (dropdown) that does not rely on native browser or mobile implementations.
  *
@@ -27,128 +27,92 @@ import statuses from '../../utils/devUtils/constants/statuses';
  * and [useSelectState](https://react-spectrum.adobe.com/react-stately/useSelectState.html) from
  * React Stately.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var SelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var status = props.status;
   usePropWarning(props, 'disabled', 'isDisabled');
-
   var _useSelectField = useSelectField(props, ref),
-      selectFieldProps = _extends({}, _useSelectField);
-
+    selectFieldProps = _extends({}, (_objectDestructuringEmpty(_useSelectField), _useSelectField));
   return ___EmotionJSX(SelectFieldBase, _extends({}, props, selectFieldProps, {
     "aria-invalid": status === 'error' && true
   }));
 });
-SelectField.propTypes = _objectSpread({
+SelectField.propTypes = _objectSpread(_objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
-
   /** Where the popover menu opens relative to its trigger. */
   direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey: PropTypes.string,
-
   /** Default text rendered if no option is selected. Deprecated. */
   defaultText: PropTypes.string,
-
   /** Array of keys to disable within the options list. */
   disabledKeys: PropTypes.arrayOf(PropTypes.string),
-
   /** Whether the collection allows empty selection. */
   hasNoEmptySelection: PropTypes.bool,
-
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: PropTypes.bool,
-
   /** Text rendered below the input. */
   helperText: PropTypes.node,
-
   /** If present this prop will cause a help hint to render in the label of the field. */
   hintText: PropTypes.string,
-
   /** Sets the default open state of the menu. */
   isDefaultOpen: PropTypes.bool,
-
   /** Whether the input is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the items are currently loading. */
   isLoading: PropTypes.bool,
-
   /** @ignore Whether the menu should automatically flip direction when space is limited. */
   isNotFlippable: PropTypes.bool,
-
   /** Sets the open state of the menu. */
   isOpen: PropTypes.bool,
-
   /** @ignore Whether the input can be selected but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /** Whether user input is required on the input before form submission. */
   isRequired: PropTypes.bool,
-
   /**
    * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
    * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
    */
   items: PropTypes.arrayOf(PropTypes.shape({})),
-
   /** The label for the select element. */
   label: PropTypes.node,
-
   /** The name for the select element, used when submitting a form. */
   name: PropTypes.string,
-
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: PropTypes.string,
-
   /** The currently selected key in the collection (controlled). */
   selectedKey: PropTypes.string,
-
   /** Determines the textarea status indicator and helper text styling. Eg. float. */
   labelMode: PropTypes.string,
-
   /** Determines the type of label applied to the component. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /**
    * Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
    *
    * () => any
    */
   onLoadMore: PropTypes.func,
-
   /**
    * Method that is called when the open state of the menu changes.
    *
    * (isOpen: boolean) => void
    */
   onOpenChange: PropTypes.func,
-
   /**
    * Handler that is called when the selection changes.
    *
    * (key: Key) => any
    */
-  onSelectionChange: PropTypes.func,
-
+  onSelectionChange: PropTypes.func
+}, inputFieldAttributesBasePropTypes), {}, {
   /**
    * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
    * and/or the visible button representation for the select input.
    */
   controlProps: PropTypes.shape({}),
-
-  /** Props object passed along to the root container as-is. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object passed along to the label as-is. */
-  labelProps: PropTypes.shape({}),
-
   /** Props object that is spread directly into the ScrollBox element. */
   // /** Props object that is spread directly into the ScrollBox element. */
-
   /** @ignore */
   scrollBoxProps: PropTypes.shape({
     maxHeight: PropTypes.string