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

package/lib/components/FileInputField/FileSelect.js

@@ -1,15 +1,37 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["buttonText", "handleFileSelect", "isDisabled", "textProps"];
+
+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 from 'react';
 import PropTypes from 'prop-types';
-import { Button, Text } from '../../index';
+import { Button, Text } from '../../';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var FileSelect = function FileSelect(props) {
-  var buttonText = props.buttonText,
-      handleFileSelect = props.handleFileSelect,
-      isDisabled = props.isDisabled,
-      textProps = props.textProps;
-  return ___EmotionJSX(Button, {
+var FileSelect = function FileSelect(_ref) {
+  var buttonText = _ref.buttonText,
+      handleFileSelect = _ref.handleFileSelect,
+      isDisabled = _ref.isDisabled,
+      textProps = _ref.textProps,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+      ariaProps = _getAriaAttributeProp.ariaProps;
+
+  return ___EmotionJSX(Button, _extends({
     "aria-label": buttonText,
     "data-testid": "file-input-field__file-select",
     isDisabled: isDisabled,
@@ -17,15 +39,15 @@ var FileSelect = function FileSelect(props) {
     my: 5,
     onPress: handleFileSelect,
     variant: "fileInputField"
-  }, ___EmotionJSX(Text, _extends({
+  }, ariaProps), ___EmotionJSX(Text, _extends({
     color: "active"
   }, textProps), buttonText));
 };
 
 export default FileSelect;
-FileSelect.propTypes = {
+FileSelect.propTypes = _objectSpread({
   buttonText: PropTypes.string,
   handleFileSelect: PropTypes.func,
   isDisabled: PropTypes.bool,
   textProps: PropTypes.shape({})
-};
+}, ariaAttributesBasePropTypes);

package/lib/components/ImageUploadField/ImageUploadField.js

@@ -1,12 +1,27 @@
+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 _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+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, useCallback, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import ImageUploadFieldBase from './ImageUploadFieldBase';
-import { Item, Menu } from '../../index';
-import { useImageUploadState } from '../../hooks/useImageUploadState';
+import { Item, Menu } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import ImagePreviewButton from './ImagePreviewButton';
+import ImageUploadFieldBase from './ImageUploadFieldBase';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { useImageUploadState } from '../../hooks/useImageUploadState';
 /**
  * The Image Upload Field component gives users the ability to upload a file (image by default).
  */
@@ -56,14 +71,14 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputRef,
     widthHeightSx: state.widthHeightSx
   }, props), ___EmotionJSX(ImagePreviewButton, {
-    isLoading: isLoading,
-    loaderSize: loaderSize,
-    previewImage: state.previewImage,
     defaultPreviewImage: state.defaultPreviewImage,
     defaultPreviewNode: state.defaultPreviewNode,
     isImageType: state.isImageType,
+    isLoading: isLoading,
+    loaderSize: loaderSize,
     onPress: state.pressPreviewButton,
     previewHeight: props === null || props === void 0 ? void 0 : props.previewHeight,
+    previewImage: state.previewImage,
     previewWidth: props === null || props === void 0 ? void 0 : props.previewWidth,
     widthHeightSx: state.widthHeightSx
   }), ___EmotionJSX(Menu, {
@@ -74,7 +89,7 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
     key: "remove"
   }, removeItemText)));
 });
-ImageUploadField.propTypes = {
+ImageUploadField.propTypes = _objectSpread({
   /** Image preview (controlled), used to represent the current image state. */
   previewImage: PropTypes.string,
 
@@ -123,7 +138,7 @@ ImageUploadField.propTypes = {
 
   /** Determines the helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses))
-};
+}, ariaAttributesBasePropTypes);
 ImageUploadField.defaultProps = {
   fileTypes: ['image'],
   loaderSize: 10,

package/lib/components/ImageUploadField/ImageUploadField.stories.js

@@ -1,10 +1,25 @@
+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 _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 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 _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 _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, { useRef, useState } from 'react';
-import { Image, ImageUploadField, OverlayProvider } from '../../index';
+import { Image, ImageUploadField, 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 {
@@ -17,7 +32,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     previewImage: {
       control: {
         type: 'text'
@@ -74,7 +89,7 @@ export default {
       },
       defaultValue: statuses.DEFAULT
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -17,14 +17,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import MenuDown from 'mdi-react/MenuDownIcon';
+import { Box, Button, Loader, Icon, Text } from '../../';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import { usePropWarning, useSelectField } from '../../hooks';
-import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import Button from '../Button';
-import Icon from '../Icon';
-import Loader from '../Loader';
 import SelectFieldBase from '../SelectFieldBase';
-import Text from '../Text';
+import statuses from '../../utils/devUtils/constants/statuses';
 /**
  * Select field (dropdown) that does not rely on native browser or mobile implementations.
  *
@@ -37,6 +34,10 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var placeholder = props.placeholder,
       status = props.status;
+
+  var _getAriaAttributeProp = getAriaAttributeProps(props),
+      ariaProps = _getAriaAttributeProp.ariaProps;
+
   usePropWarning(props, 'disabled', 'isDisabled');
 
   var _useSelectField = useSelectField(_objectSpread(_objectSpread({
@@ -56,10 +57,10 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
       triggerRef = selectFieldProps.triggerRef;
 
   var trigger = ___EmotionJSX(Button, _extends({
+    className: fieldControlProps.className,
     ref: triggerRef,
-    variant: "link",
-    className: fieldControlProps.className
-  }, triggerProps), ___EmotionJSX(Text, {
+    variant: "link"
+  }, triggerProps, ariaProps), ___EmotionJSX(Text, {
     variant: "label",
     color: "active"
   }, placeholder), ___EmotionJSX(Box, {
@@ -81,7 +82,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     trigger: trigger
   }));
 });
-LinkSelectField.propTypes = {
+LinkSelectField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
 
@@ -180,7 +181,7 @@ LinkSelectField.propTypes = {
 
   /** Props object passed along to the label as-is. */
   labelProps: PropTypes.shape({})
-};
+}, ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = {
   placeholder: 'Select',
   status: statuses.DEFAULT,

package/lib/components/LinkSelectField/LinkSelectField.stories.js

@@ -1,3 +1,11 @@
+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 _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
@@ -6,15 +14,20 @@ import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 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";
 
 var _context, _context2;
 
+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, { useState } from 'react';
 import { OverlayProvider } from '@react-aria/overlays';
 import { useAsyncList } from '@react-stately/data';
-import { LinkSelectField, Item, Separator } from '../../index';
+import { Box, Item, LinkSelectField, Separator } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/LinkSelectField',
@@ -26,7 +39,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -68,7 +81,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, _extends({}, args, {

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -15,6 +15,8 @@ import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
 
 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,17 +25,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import Clear from 'mdi-react/CloseIcon';
-import { useFilter } from '@react-aria/i18n';
 import { FocusScope } from '@react-aria/focus';
-import { useListState } from '@react-stately/list';
+import { useFilter } from '@react-aria/i18n';
 import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import { Box, Chip, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../..';
+import { useListState } from '@react-stately/list';
+import { Box, FieldHelperText, Chip, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../../';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { usePropWarning } from '../../hooks';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
-import { usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import FieldHelperText from '../FieldHelperText';
 /**
  * Complex control that lets you choose several tags from the dropdown list.
  * Or to add your own values in non-restrictive mode.
@@ -76,7 +78,12 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       readOnlyKeys = _props$readOnlyKeys === void 0 ? [] : _props$readOnlyKeys,
       selectedKeys = props.selectedKeys,
       scrollBoxProps = props.scrollBoxProps,
-      status = props.status;
+      status = props.status,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+      ariaProps = _getAriaAttributeProp.ariaProps;
+
   var hasCustomValue = mode === 'non-restrictive';
   usePropWarning(props, 'disabled', 'isDisabled');
 
@@ -421,7 +428,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       beforeInput: ___EmotionJSX(React.Fragment, null, readOnlyItems, " ", selectedItems, readOnlyInputEntry)
     },
     value: filterString
-  }, inputProps)), helperText && ___EmotionJSX(FieldHelperText, {
+  }, ariaProps, inputProps)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), ___EmotionJSX(PopoverContainer, {
     ref: popoverRef,
@@ -432,7 +439,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     style: style
   }, listbox));
 });
-MultivaluesField.propTypes = {
+MultivaluesField.propTypes = _objectSpread({
   /** Props object that is spread directly into the root (top-level) Box component. */
   containerProps: PropTypes.shape({}),
 
@@ -558,7 +565,7 @@ MultivaluesField.propTypes = {
 
   /** Determines the input status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses))
-};
+}, ariaAttributesBasePropTypes);
 MultivaluesField.defaultProps = {
   direction: 'bottom',
   isReadOnly: false,

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -1,13 +1,28 @@
+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 _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 _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 { Box, Item, MultivaluesField, OverlayProvider } from '../..';
+import { Box, Item, MultivaluesField, 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 {
   title: 'Form/MultivaluesField',
   component: MultivaluesField,
-  argTypes: {
+  argTypes: _objectSpread({
     direction: {
       defaultValue: 'bottom'
     },
@@ -54,7 +69,7 @@ export default {
         type: 'text'
       }
     }
-  },
+  }, ariaAttributeBaseArgTypes),
   parameters: {
     docs: {
       source: {

package/lib/components/NumberField/NumberField.js

@@ -24,9 +24,10 @@ import { useNumberFieldState } from '@react-stately/numberfield';
 import { useLocale } from '@react-aria/i18n';
 import { mergeProps } from '@react-aria/utils';
 import omit from 'lodash/omit';
-import statuses from '../../utils/devUtils/constants/statuses';
-import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../../index';
+import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useField, usePropWarning } from '../../hooks';
+import statuses from '../../utils/devUtils/constants/statuses';
 /**
  * Number fields allow users to enter a number, and increment or
  * decrement the value using stepper buttons.
@@ -151,7 +152,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, helperText)));
 });
 export default NumberField;
-NumberField.propTypes = {
+NumberField.propTypes = _objectSpread({
   /** A custom aria-label for the decrement button.
    * If not provided, the localized string "Decrement" is used. */
   decrementAriaLabel: PropTypes.string,
@@ -236,4 +237,4 @@ NumberField.propTypes = {
 
   /** The current value (controlled). */
   value: PropTypes.number
-};
+}, ariaAttributesBasePropTypes);

package/lib/components/NumberField/NumberField.stories.js

@@ -1,5 +1,20 @@
+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 _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 { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import NumberField from './NumberField';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -13,7 +28,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -86,7 +101,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(NumberField, args);

package/lib/components/PasswordField/PasswordField.js

@@ -25,16 +25,10 @@ import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
 import { useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import * as hooks from '../../hooks';
+import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import FieldHelperText from '../FieldHelperText';
-import Icon from '../Icon';
-import IconButton from '../IconButton';
-import Input from '../Input';
-import Label from '../Label';
-import PopoverContainer from '../PopoverContainer';
-import RequirementsList from '../RequirementsList';
+import * as hooks from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
   HIDE: 'hide password',
@@ -183,7 +177,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     requirements: requirements
   })));
 });
-PasswordField.propTypes = {
+PasswordField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -285,7 +279,7 @@ PasswordField.propTypes = {
     name: PropTypes.string.isRequired,
     status: PropTypes.oneOf(['default', 'success', 'warning', 'error'])
   }))
-};
+}, ariaAttributesBasePropTypes);
 PasswordField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

package/lib/components/PasswordField/PasswordField.stories.js

@@ -6,9 +6,9 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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; }
 
@@ -17,12 +17,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import PasswordField from '.';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/PasswordField',
   component: PasswordField,
-  argTypes: {
+  argTypes: _objectSpread({
     status: {
       control: {
         type: 'select',
@@ -35,7 +36,7 @@ export default {
         type: 'text'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(PasswordField, _extends({

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -15,16 +15,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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 { useRadioGroup } from '@react-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
-import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import Label from '../Label';
-import { RadioContext } from '../RadioField';
-import FieldHelperText from '../FieldHelperText';
+import PropTypes from 'prop-types';
+import { Box, FieldHelperText, Label } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useStatusClasses, usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { RadioContext } from '../RadioField';
+import statuses from '../../utils/devUtils/constants/statuses';
 /**
  * Radio group component for a single-choice list of options.
  *
@@ -57,10 +56,13 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   usePropWarning(props, 'disabled', 'isDisabled');
+  var unhandledAriaProps = {
+    'aria-controls': props['aria-controls']
+  };
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     className: classNames
-  }, radioGroupProps), ___EmotionJSX(Label, _extends({
+  }, unhandledAriaProps, radioGroupProps), ___EmotionJSX(Label, _extends({
     isDisabled: isDisabled,
     hintText: hintText,
     isRequired: isRequired,
@@ -79,7 +81,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, helperText));
 });
-RadioGroupField.propTypes = {
+RadioGroupField.propTypes = _objectSpread({
   /** The name of the RadioGroupField, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). */
   name: PropTypes.string,
 
@@ -121,25 +123,7 @@ RadioGroupField.propTypes = {
   label: PropTypes.node,
 
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string,
-
-  /** Defines a string value that labels the current element. */
-  'aria-label': PropTypes.string,
-
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby': PropTypes.string,
-
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby': PropTypes.string,
-
-  /**
-   * Identifies the element (or elements) that provide a detailed, extended description for the
-   * object.
-  */
-  'aria-details': PropTypes.string,
-
-  /** Identifies the element that provides an error message for the object. */
-  'aria-errormessage': PropTypes.string
-};
+  id: PropTypes.string
+}, ariaAttributesBasePropTypes);
 RadioGroupField.displayName = 'RadioGroupField';
 export default RadioGroupField;