@pingux/astro 1.28.2-alpha.2 → 1.29.0-alpha.0

package/lib/components/ColorField/ColorField.js

@@ -16,18 +16,19 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { ChromePicker } from 'react-color';
 import { FocusScope } from '@react-aria/focus';
 import { useVisuallyHidden } from '@react-aria/visually-hidden';
 import { useColorField } from '@react-aria/color';
 import { useColorFieldState } from '@react-stately/color';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
-import { Box, Button, Input, FieldHelperText, Label } from '../../index';
-import useField from '../../hooks/useField';
-import statuses from '../../utils/devUtils/constants/statuses';
+import PropTypes from 'prop-types';
+import { ChromePicker } from 'react-color';
+import { Box, Button, Input, FieldHelperText, Label } from '../../';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import PopoverContainer from '../PopoverContainer';
+import statuses from '../../utils/devUtils/constants/statuses';
+import useField from '../../hooks/useField';
 /**
  * The Color Field component allows the user to pick a color and displays the chosen color.
  *
@@ -50,6 +51,11 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
       labelProps = props.labelProps,
       imperativeOnChange = props.onChange,
       status = props.status;
+
+  var _getAriaAttributeProp = getAriaAttributeProps(props),
+      ariaProps = _getAriaAttributeProp.ariaProps,
+      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
+
   var colorRef = useRef();
   /* istanbul ignore next */
 
@@ -58,7 +64,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var triggerRef = React.useRef();
   var overlayRef = React.useRef();
-  var state = useColorFieldState(props);
+  var state = useColorFieldState(nonAriaProps);
   var popoverState = useOverlayTriggerState({});
 
   var _useOverlayTrigger = useOverlayTrigger({
@@ -67,14 +73,14 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
       triggerProps = _useOverlayTrigger.triggerProps,
       overlayProps = _useOverlayTrigger.overlayProps;
 
-  var _useColorField = useColorField(props, state, colorRef),
+  var _useColorField = useColorField(nonAriaProps, state, colorRef),
       raLabelProps = _useColorField.labelProps,
       raInputProps = _useColorField.inputProps;
 
   var _useVisuallyHidden = useVisuallyHidden(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
-  var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
+  var _useField = useField(_objectSpread(_objectSpread({}, nonAriaProps), {}, {
     labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
     controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
   })),
@@ -113,17 +119,17 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     onPress: handleButtonPress,
     ref: triggerRef,
     variant: "colorField"
-  }, triggerProps, buttonProps)), ___EmotionJSX(Input, _extends({}, visuallyHiddenProps, fieldControlProps, {
+  }, triggerProps, ariaProps, buttonProps)), ___EmotionJSX(Input, _extends({}, visuallyHiddenProps, fieldControlProps, {
     ref: colorRef
   })), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
-  }, helperText), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {
-    ref: overlayRef,
+  }, helperText), ___EmotionJSX(PopoverContainer, _extends({
+    hasNoArrow: true,
+    isDismissable: true,
     isOpen: popoverState.isOpen,
     onClose: popoverState.close,
-    hasNoArrow: true,
-    isDismissable: true
-  }), ___EmotionJSX(FocusScope, {
+    ref: overlayRef
+  }, overlayProps, positionProps), ___EmotionJSX(FocusScope, {
     restoreFocus: true,
     contain: true,
     autoFocus: true
@@ -132,7 +138,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: handleColorChange
   }))));
 });
-ColorField.propTypes = {
+ColorField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
 
@@ -168,7 +174,7 @@ ColorField.propTypes = {
 
   /** Props object that is spread into the label element. */
   labelProps: PropTypes.shape({})
-};
+}, ariaAttributesBasePropTypes);
 ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'

package/lib/components/ColorField/ColorField.stories.js

@@ -1,8 +1,23 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+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 _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { useCallback, useState } from 'react';
-import { ColorField, OverlayProvider } from '../../index';
+import { ColorField, OverlayProvider } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -15,7 +30,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     value: {
       control: {
         type: 'text'
@@ -70,7 +85,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   var _useState = useState('rgba(127, 0, 127, 1)'),

package/lib/components/ComboBox/ComboBoxInput.js

@@ -12,7 +12,7 @@ import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "helperText", "isDisabled", "isReadOnly", "isOpen", "label", "labelProps", "loadingState", "status", "style", "inputWrapperRef", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
+var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "isDisabled", "isReadOnly", "isOpen", "loadingState", "style", "inputWrapperRef", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
 
 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; }
 
@@ -23,24 +23,20 @@ import PropTypes from 'prop-types';
 import { FocusRing } from '@react-aria/focus';
 import { PressResponder, useHover } from '@react-aria/interactions';
 import MenuDown from 'mdi-react/MenuDownIcon';
-import { Box, Button, Icon, TextField } from '../../index';
-import statuses from '../../utils/devUtils/constants/statuses';
-import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import { Box, Button, Icon, Loader, TextField } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { usePropWarning } from '../../hooks';
-import Loader from '../Loader';
+import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var controlProps = props.controlProps,
       containerProps = props.containerProps,
       hasAutoFocus = props.hasAutoFocus,
-      helperText = props.helperText,
       isDisabled = props.isDisabled,
       isReadOnly = props.isReadOnly,
       isOpen = props.isOpen,
-      label = props.label,
-      labelProps = props.labelProps,
       loadingState = props.loadingState,
-      status = props.status,
       style = props.style,
       inputWrapperRef = props.inputWrapperRef,
       inputRef = props.inputRef,
@@ -55,14 +51,10 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
       wrapperProps = props.wrapperProps,
       others = _objectWithoutProperties(props, _excluded);
 
-  var textFieldProps = _objectSpread(_objectSpread(_objectSpread({}, others), {}, {
-    helperText: helperText,
+  var textFieldProps = _objectSpread(_objectSpread(_objectSpread({
     isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    label: label,
-    labelProps: labelProps,
-    status: status
-  }, controlProps), inputProps);
+    isReadOnly: isReadOnly
+  }, controlProps), inputProps), others);
 
   var _useHover = useHover({}),
       hoverProps = _useHover.hoverProps,
@@ -154,31 +146,31 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }))));
 });
-ComboBoxInput.propTypes = {
-  controlProps: PropTypes.shape({}),
+ComboBoxInput.propTypes = _objectSpread({
   containerProps: PropTypes.shape({}),
-  wrapperProps: PropTypes.shape({}),
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
+  controlProps: PropTypes.shape({}),
+  hasAutoFocus: PropTypes.bool,
+  helperText: PropTypes.node,
   inputProps: PropTypes.shape({
     value: PropTypes.string
   }),
+  inputRef: PropTypes.shape({}),
+  inputWrapperRef: PropTypes.shape({}),
+  isDisabled: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
   label: PropTypes.node,
   labelProps: PropTypes.shape({}),
   loadingState: PropTypes.oneOf(_Object$values(loadingStates)),
-  inputWrapperRef: PropTypes.shape({}),
-  inputRef: PropTypes.shape({}),
-  triggerProps: PropTypes.shape({}),
-  triggerRef: PropTypes.shape({}),
   menuTrigger: PropTypes.oneOf(['focus', 'input', 'manual']),
-  hasAutoFocus: PropTypes.bool,
-  style: PropTypes.shape({}),
-  isOpen: PropTypes.bool,
-  helperText: PropTypes.node,
-  status: PropTypes.oneOf(_Object$values(statuses)),
   onInputChange: PropTypes.func,
   onLoadMore: PropTypes.func,
   onOpenChange: PropTypes.func,
-  onSelectionChange: PropTypes.func
-};
+  onSelectionChange: PropTypes.func,
+  status: PropTypes.oneOf(_Object$values(statuses)),
+  style: PropTypes.shape({}),
+  triggerProps: PropTypes.shape({}),
+  triggerRef: PropTypes.shape({}),
+  wrapperProps: PropTypes.shape({})
+}, ariaAttributesBasePropTypes);
 export default ComboBoxInput;

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -9,29 +9,31 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-var _excluded = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter"],
+    _excluded2 = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
 
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useCallback, useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
 import { useComboBox } from '@react-aria/combobox';
-import { useComboBoxState } from '@react-stately/combobox';
-import { useFilter } from '@react-aria/i18n';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { FocusScope } from '@react-aria/focus';
-import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import { useFilter } from '@react-aria/i18n';
+import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
+import { useComboBoxState } from '@react-stately/combobox';
+import PropTypes from 'prop-types';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import ComboBoxInput from '../ComboBox';
 import { usePropWarning } from '../../hooks';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import ComboBoxInput from '../ComboBox';
-import PopoverContainer from '../PopoverContainer';
 import ListBox from '../ListBox';
+import PopoverContainer from '../PopoverContainer';
 import ScrollBox from '../ScrollBox';
 /**
  * Combines an input with a listbox for a filterable dropdown list.
@@ -45,70 +47,42 @@ import ScrollBox from '../ScrollBox';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var children = props.children,
-      isRequired = props.isRequired,
-      isDisabled = props.isDisabled,
-      isReadOnly = props.isReadOnly,
-      placeholder = props.placeholder,
-      label = props.label,
-      id = props.id,
-      hasAutoFocus = props.hasAutoFocus,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      onFocusChange = props.onFocusChange,
-      onKeyDown = props.onKeyDown,
-      onKeyUp = props.onKeyUp,
+  var hasAutoFocus = props.hasAutoFocus,
       hasAddOption = props.hasAddOption,
       hasCustomValue = props.hasCustomValue,
       hasNoEmptySelection = props.hasNoEmptySelection,
-      defaultSelectedKey = props.defaultSelectedKey,
       selectedKey = props.selectedKey,
       onSelectionChange = props.onSelectionChange,
       initialDefaultItems = props.defaultItems,
       initialItems = props.items,
-      onOpenChange = props.onOpenChange,
       loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
-      defaultInputValue = props.defaultInputValue,
-      onInputChange = props.onInputChange,
       inputValue = props.inputValue,
-      disabledKeys = props.disabledKeys,
       menuTrigger = props.menuTrigger,
       isNotFlippable = props.isNotFlippable,
       direction = props.direction,
       scrollBoxProps = props.scrollBoxProps,
       controlProps = props.controlProps,
-      defaultFilter = props.defaultFilter;
-  var comboBoxOptions = {
-    children: children,
-    isRequired: isRequired,
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    placeholder: placeholder,
-    label: label,
-    id: id,
+      defaultFilter = props.defaultFilter,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
+
+  var comboBoxOptions = _objectSpread({
     autoFocus: hasAutoFocus,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onFocusChange: onFocusChange,
-    onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp,
     allowsCustomValue: hasAddOption || hasCustomValue,
     disallowEmptySelection: hasNoEmptySelection,
-    defaultSelectedKey: defaultSelectedKey,
     selectedKey: selectedKey,
     onSelectionChange: onSelectionChange,
-    onOpenChange: onOpenChange,
     loadingState: loadingState,
     onLoadMore: onLoadMore,
-    defaultInputValue: defaultInputValue,
-    onInputChange: onInputChange,
     inputValue: inputValue,
-    disabledKeys: disabledKeys,
     menuTrigger: menuTrigger,
     shouldFlip: !isNotFlippable,
     direction: direction
-  };
+  }, nonAriaProps);
+
   var popoverRef = useRef();
   var buttonRef = useRef();
   var listBoxRef = useRef();
@@ -179,7 +153,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var shouldFocusOnHover = listBoxProps.shouldFocusOnHover,
       shouldSelectOnPressUp = listBoxProps.shouldSelectOnPressUp,
-      otherListBoxProps = _objectWithoutProperties(listBoxProps, _excluded);
+      otherListBoxProps = _objectWithoutProperties(listBoxProps, _excluded2);
 
   var _useOverlayPosition = useOverlayPosition({
     targetRef: inputWrapperRef,
@@ -271,7 +245,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     isNonModal: true
   }, listbox));
 });
-ComboBoxField.propTypes = {
+ComboBoxField.propTypes = _objectSpread({
   /* Whether or not adding new options to the list is enabled. */
   hasAddOption: PropTypes.bool,
 
@@ -424,7 +398,7 @@ ComboBoxField.propTypes = {
   controlProps: PropTypes.shape({
     onClick: PropTypes.func
   })
-};
+}, ariaAttributesBasePropTypes);
 ComboBoxField.defaultProps = {
   menuTrigger: 'focus',
   direction: 'bottom',

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -1,3 +1,10 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -8,11 +15,18 @@ import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { useState, useMemo } from 'react';
 import { action } from '@storybook/addon-actions';
 import { useFilter } from '@react-aria/i18n';
 import { useAsyncList } from '@react-stately/data';
-import { Item, OverlayProvider, Section } from '../../index';
+import { Item, OverlayProvider, Section } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import ComboBoxField from './ComboBoxField';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -102,7 +116,7 @@ var actions = {
 export default {
   title: 'Form/ComboBoxField',
   component: ComboBoxField,
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -155,7 +169,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, actions, args), function (item) {

package/lib/components/FileInputField/FileInputField.js

@@ -28,12 +28,13 @@ import { useDropzone } from 'react-dropzone';
 import PropTypes from 'prop-types';
 import { mergeProps } from '@react-aria/utils';
 import { v4 as uuidv4 } from 'uuid';
-import { Box, Input, FieldHelperText, Label, Loader } from '../../index';
+import { Box, Input, FieldHelperText, Label, Loader } from '../../';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import FileItem from './FileItem';
 import FileSelect from './FileSelect';
-import useStatusClasses from '../../hooks/useStatusClasses';
-import useField from '../../hooks/useField';
 import statuses from '../../utils/devUtils/constants/statuses';
+import useField from '../../hooks/useField';
+import useStatusClasses from '../../hooks/useStatusClasses';
 /**
  * The FileInputField component allows users to upload one or more files by
  * clicking the button or via drag and drop.
@@ -42,19 +43,19 @@ import statuses from '../../utils/devUtils/constants/statuses';
  * */
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var defaultButtonText = props.defaultButtonText,
-      defaultFileList = props.defaultFileList,
-      uploadedFilesImperative = props.fileList,
-      helperText = props.helperText,
-      isDisabled = props.isDisabled,
-      isLoading = props.isLoading,
-      isMultiple = props.isMultiple,
-      onFileSelect = props.onFileSelect,
-      onRemove = props.onRemove,
-      status = props.status,
-      textProps = props.textProps,
-      others = _objectWithoutProperties(props, _excluded);
+var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var defaultButtonText = _ref.defaultButtonText,
+      defaultFileList = _ref.defaultFileList,
+      uploadedFilesImperative = _ref.fileList,
+      helperText = _ref.helperText,
+      isDisabled = _ref.isDisabled,
+      isLoading = _ref.isLoading,
+      isMultiple = _ref.isMultiple,
+      onFileSelect = _ref.onFileSelect,
+      onRemove = _ref.onRemove,
+      status = _ref.status,
+      textProps = _ref.textProps,
+      others = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(defaultFileList || []),
       _useState2 = _slicedToArray(_useState, 2),
@@ -68,10 +69,14 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     return inputRef.current;
   });
 
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+      ariaProps = _getAriaAttributeProp.ariaProps,
+      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
+
   var _useField = useField(_objectSpread({
     status: status,
     isDisabled: isDisabled
-  }, others)),
+  }, nonAriaProps)),
       fieldContainerProps = _useField.fieldContainerProps,
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
@@ -136,8 +141,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     setUploadedFiles(function (prevFiles) {
-      return _filterInstanceProperty(prevFiles).call(prevFiles, function (_ref) {
-        var id = _ref.id;
+      return _filterInstanceProperty(prevFiles).call(prevFiles, function (_ref2) {
+        var id = _ref2.id;
         return id !== fileId;
       });
     });
@@ -178,7 +183,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [uploadedFiles, uploadedFilesImperative, isMultiple]);
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
     variant: "boxes.fileInputFieldWrapper"
-  }, mergeProps(fieldContainerProps, others), {
+  }, mergeProps(fieldContainerProps, nonAriaProps), {
     className: classNames
   }, getRootProps(), {
     // to pass accessibility test, this removes focusable dependents
@@ -189,12 +194,12 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: handleOnChange,
     ref: inputRef,
     type: "file"
-  })), filesListNode, shouldFileSelectRender() && ___EmotionJSX(FileSelect, {
+  })), filesListNode, shouldFileSelectRender() && ___EmotionJSX(FileSelect, _extends({
     buttonText: defaultButtonText,
     handleFileSelect: handleFileSelect,
     isDisabled: isDisabled || isLoading,
     textProps: textProps
-  }), isLoading && ___EmotionJSX(Loader, {
+  }, ariaProps)), isLoading && ___EmotionJSX(Loader, {
     color: "active",
     sx: {
       position: 'absolute'
@@ -205,7 +210,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, helperText));
 });
 FileInputField.displayName = 'FileInputField';
-FileInputField.propTypes = {
+FileInputField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -276,7 +281,7 @@ FileInputField.propTypes = {
 
   /** These props will be spread to the field text component. */
   textProps: PropTypes.shape({})
-};
+}, ariaAttributesBasePropTypes);
 FileInputField.defaultProps = {
   defaultButtonText: 'Select a file',
   status: statuses.DEFAULT

package/lib/components/FileInputField/FileInputField.stories.js

@@ -1,9 +1,24 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 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 { v4 as uuidv4 } from 'uuid';
 import FileInputField from './';
-import { Box } from '../../index';
+import { Box } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -16,7 +31,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -70,7 +85,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 var fitContentWidthSx = {
   width: 'fit-content'