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

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

@@ -2,13 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -36,6 +48,8 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _addonActions = require("@storybook/addon-actions");
@@ -44,7 +58,9 @@ var _i18n = require("@react-aria/i18n");
 
 var _data = require("@react-stately/data");
 
-var _index = require("../../index");
+var _ = require("../../");
+
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _ComboBoxField = _interopRequireDefault(require("./ComboBoxField"));
 
@@ -56,6 +72,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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) { (0, _defineProperty2["default"])(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; }
+
 var items = [{
   name: 'Aardvark',
   id: '1'
@@ -142,7 +162,7 @@ var actions = {
 var _default = {
   title: 'Form/ComboBoxField',
   component: _ComboBoxField["default"],
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -195,13 +215,13 @@ var _default = {
         type: 'none'
       }
     }
-  }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({}, actions, args), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({}, actions, args), function (item) {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name,
       "data-id": item.name
     }, item.name);
@@ -211,16 +231,16 @@ var Default = function Default(args) {
 exports.Default = Default;
 
 var WithSections = function WithSections(args) {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     items: withSection
   }, args), function (section) {
-    return (0, _react2.jsx)(_index.Section, {
+    return (0, _react2.jsx)(_.Section, {
       key: section.name,
       items: section.children,
       title: section.name
     }, function (item) {
-      return (0, _react2.jsx)(_index.Item, {
+      return (0, _react2.jsx)(_.Item, {
         key: item.name
       }, item.name);
     });
@@ -283,7 +303,7 @@ var AsyncLoading = function AsyncLoading() {
       }))();
     }
   });
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({}, actions, {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({}, actions, {
     label: "Example label",
     items: list.items,
     inputValue: list.filterText,
@@ -291,7 +311,7 @@ var AsyncLoading = function AsyncLoading() {
     loadingState: list.loadingState,
     onLoadMore: list.loadMore
   }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -305,14 +325,14 @@ var ControlledInput = function ControlledInput() {
       inputValue = _useState2[0],
       setInputValue = _useState2[1];
 
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items
   }, actions, {
     inputValue: inputValue,
     onInputChange: setInputValue
   }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -327,14 +347,14 @@ var ControlledMenu = function ControlledMenu() {
       setIsOpen = _useState4[1]; // Use menuTrigger="manual" if you don't want open change events to fire on input / focus
 
 
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items
   }, actions, {
     isOpen: isOpen,
     onOpenChange: setIsOpen
   }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -348,14 +368,14 @@ var ControlledSelection = function ControlledSelection() {
       selectedKey = _useState6[0],
       setSelectedKey = _useState6[1];
 
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items
   }, actions, {
     selectedKey: selectedKey,
     onSelectionChange: setSelectedKey
   }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -380,14 +400,14 @@ var ControlledFiltering = function ControlledFiltering() {
       return startsWith(item.name, filterValue);
     });
   }, [startsWith, filterValue]);
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label"
   }, actions, {
     items: filteredItems,
     inputValue: filterValue,
     onInputChange: setFilterValue
   }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -401,7 +421,7 @@ var ControlledWithCustomValue = function ControlledWithCustomValue() {
       inputValue = _useState10[0],
       setInputValue = _useState10[1];
 
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items
   }, actions, {
@@ -411,7 +431,7 @@ var ControlledWithCustomValue = function ControlledWithCustomValue() {
     onSelectionChange: setInputValue,
     hasCustomValue: true
   }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -420,12 +440,12 @@ var ControlledWithCustomValue = function ControlledWithCustomValue() {
 exports.ControlledWithCustomValue = ControlledWithCustomValue;
 
 var WithCustomInputValue = function WithCustomInputValue() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], {
     label: "Example label",
     defaultItems: items,
     hasCustomValue: true
   }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.id,
       textValue: item.id
     }, item.name);
@@ -435,12 +455,12 @@ var WithCustomInputValue = function WithCustomInputValue() {
 exports.WithCustomInputValue = WithCustomInputValue;
 
 var AllowCustomValue = function AllowCustomValue() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items,
     hasCustomValue: true
   }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -449,12 +469,12 @@ var AllowCustomValue = function AllowCustomValue() {
 exports.AllowCustomValue = AllowCustomValue;
 
 var DisabledKeys = function DisabledKeys() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items,
     disabledKeys: ['Aardvark']
   }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -463,12 +483,12 @@ var DisabledKeys = function DisabledKeys() {
 exports.DisabledKeys = DisabledKeys;
 
 var FocusMenuTrigger = function FocusMenuTrigger() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items,
     menuTrigger: "focus"
   }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -477,12 +497,12 @@ var FocusMenuTrigger = function FocusMenuTrigger() {
 exports.FocusMenuTrigger = FocusMenuTrigger;
 
 var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items,
     isDisabled: true
   }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -491,13 +511,13 @@ var Disabled = function Disabled() {
 exports.Disabled = Disabled;
 
 var HelperText = function HelperText() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items,
     helperText: "focus",
     status: "error"
   }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -506,12 +526,12 @@ var HelperText = function HelperText() {
 exports.HelperText = HelperText;
 
 var Required = function Required() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items,
     isRequired: true
   }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -520,12 +540,12 @@ var Required = function Required() {
 exports.Required = Required;
 
 var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: items,
     hasNoStatusIndicator: true
   }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -534,14 +554,14 @@ var WithoutStatusIndicator = function WithoutStatusIndicator() {
 exports.WithoutStatusIndicator = WithoutStatusIndicator;
 
 var WithCustomHeight = function WithCustomHeight() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: animals,
     scrollBoxProps: {
       maxHeight: '75px'
     }
   }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -555,12 +575,12 @@ var CustomDefaultFilter = function CustomDefaultFilter() {
   }),
       startsWith = (0, _startsWith["default"])(_useFilter2);
 
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: animals,
     defaultFilter: startsWith
   }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));
@@ -602,7 +622,7 @@ var ControlledWithAddOption = function ControlledWithAddOption() {
     setSelectedKey(key);
   };
 
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",
     defaultItems: options
   }, actions, {
@@ -612,7 +632,7 @@ var ControlledWithAddOption = function ControlledWithAddOption() {
     onSelectionChange: onSelectionChange,
     hasAddOption: true
   }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_.Item, {
       key: item.name
     }, item.name);
   }));

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -62,17 +62,19 @@ var _utils = require("@react-aria/utils");
 
 var _uuid = require("uuid");
 
-var _index = require("../../index");
+var _ = require("../../");
+
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _FileItem = _interopRequireDefault(require("./FileItem"));
 
 var _FileSelect = _interopRequireDefault(require("./FileSelect"));
 
-var _useStatusClasses3 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
 
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _useStatusClasses3 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
 
 var _react2 = require("@emotion/react");
 
@@ -92,19 +94,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  *
  * We utilize [react-dropzone](https://react-dropzone.js.org/) for the drag and drop functionality.
  * */
-var FileInputField = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+var FileInputField = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
   var _useState = (0, _react.useState)(defaultFileList || []),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -118,10 +120,14 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return inputRef.current;
   });
 
+  var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
+      ariaProps = _getAriaAttributeProp.ariaProps,
+      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
+
   var _useField = (0, _useField2["default"])(_objectSpread({
     status: status,
     isDisabled: isDisabled
-  }, others)),
+  }, nonAriaProps)),
       fieldContainerProps = _useField.fieldContainerProps,
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
@@ -186,8 +192,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
 
     setUploadedFiles(function (prevFiles) {
-      return (0, _filter["default"])(prevFiles).call(prevFiles, function (_ref) {
-        var id = _ref.id;
+      return (0, _filter["default"])(prevFiles).call(prevFiles, function (_ref2) {
+        var id = _ref2.id;
         return id !== fileId;
       });
     });
@@ -226,36 +232,36 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     return isMultiple || !isFileUploaded;
   }, [uploadedFiles, uploadedFilesImperative, isMultiple]);
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Label, fieldLabelProps), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "boxes.fileInputFieldWrapper"
-  }, (0, _utils.mergeProps)(fieldContainerProps, others), {
+  }, (0, _utils.mergeProps)(fieldContainerProps, nonAriaProps), {
     className: classNames
   }, getRootProps(), {
     // to pass accessibility test, this removes focusable dependents
     role: "none"
-  }), (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({}, (0, _utils.mergeProps)(visuallyHiddenProps, fieldControlProps, getInputProps()), {
+  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, (0, _utils.mergeProps)(visuallyHiddenProps, fieldControlProps, getInputProps()), {
     "aria-label": "File Input",
     multiple: isMultiple,
     onChange: handleOnChange,
     ref: inputRef,
     type: "file"
-  })), filesListNode, shouldFileSelectRender() && (0, _react2.jsx)(_FileSelect["default"], {
+  })), filesListNode, shouldFileSelectRender() && (0, _react2.jsx)(_FileSelect["default"], (0, _extends2["default"])({
     buttonText: defaultButtonText,
     handleFileSelect: handleFileSelect,
     isDisabled: isDisabled || isLoading,
     textProps: textProps
-  }), isLoading && (0, _react2.jsx)(_index.Loader, {
+  }, ariaProps)), isLoading && (0, _react2.jsx)(_.Loader, {
     color: "active",
     sx: {
       position: 'absolute'
     },
     "data-testid": "file-input-field__loader"
-  })), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
+  })), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText));
 });
 FileInputField.displayName = 'FileInputField';
-FileInputField.propTypes = {
+FileInputField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
@@ -326,7 +332,7 @@ FileInputField.propTypes = {
 
   /** These props will be spread to the field text component. */
   textProps: _propTypes["default"].shape({})
-};
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 FileInputField.defaultProps = {
   defaultButtonText: 'Select a file',
   status: _statuses["default"].DEFAULT

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

@@ -2,13 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -20,13 +32,17 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _uuid = require("uuid");
 
 var _ = _interopRequireDefault(require("./"));
 
-var _index = require("../../index");
+var _2 = require("../../");
+
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
@@ -36,6 +52,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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) { (0, _defineProperty2["default"])(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; }
+
 var _default = {
   title: 'Form/FileInputField',
   component: _["default"],
@@ -46,7 +66,7 @@ var _default = {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -100,7 +120,7 @@ var _default = {
         type: 'none'
       }
     }
-  }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var fitContentWidthSx = {
@@ -238,7 +258,7 @@ var WithCustomWidth = function WithCustomWidth() {
     overflow: 'hidden',
     whiteSpace: 'nowrap'
   };
-  return (0, _react2.jsx)(_index.Box, {
+  return (0, _react2.jsx)(_2.Box, {
     width: 200
   }, (0, _react2.jsx)(_["default"], {
     defaultButtonText: "Long Long Button Text With A Lot of Words In It",