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

package/lib/cjs/components/SearchField/SearchField.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 _AccountGroupIcon = _interopRequireDefault(require("mdi-react/AccountGroupIcon"));
 
 var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
 
-var _index = require("../../index");
+var _ = require("../../");
+
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _hooks = require("../../hooks");
 
@@ -36,10 +52,14 @@ 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/SearchField',
-  component: _index.SearchField,
-  argTypes: {
+  component: _.SearchField,
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -64,30 +84,21 @@ var _default = {
     labelProps: {},
     name: {},
     id: {},
-    'aria-label': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-labelledby': {
-      control: {
-        type: 'text'
-      }
+    'aria-autocomplete': {
+      table: _ariaAttributes.ariaAttributeBaseDocSettings.table
     },
-    'aria-autocomplete': {},
     value: {
       control: {
         type: 'none'
       }
     }
-  }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.SearchField, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_.SearchField, (0, _extends2["default"])({}, args, {
     icon: _SearchIcon["default"],
-    "aria-label": "Search Groups",
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
@@ -103,7 +114,7 @@ var Controlled = function Controlled() {
       value = _useState2[0],
       setValue = _useState2[1];
 
-  return (0, _react2.jsx)(_index.SearchField, {
+  return (0, _react2.jsx)(_.SearchField, {
     value: value,
     onChange: setValue,
     "aria-label": "Search Groups",
@@ -118,7 +129,7 @@ var Controlled = function Controlled() {
 exports.Controlled = Controlled;
 
 var CustomIcon = function CustomIcon() {
-  return (0, _react2.jsx)(_index.SearchField, {
+  return (0, _react2.jsx)(_.SearchField, {
     icon: _AccountGroupIcon["default"],
     "aria-label": "Search Users",
     placeholder: "Search Users",
@@ -132,7 +143,7 @@ var CustomIcon = function CustomIcon() {
 exports.CustomIcon = CustomIcon;
 
 var NoClearButton = function NoClearButton() {
-  return (0, _react2.jsx)(_index.SearchField, {
+  return (0, _react2.jsx)(_.SearchField, {
     hasNoClearButton: true,
     "aria-label": "Search Users",
     placeholder: "Search Users",
@@ -155,7 +166,7 @@ var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
     value: value,
     delay: 500
   });
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SearchField, {
+  return (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.SearchField, {
     value: value,
     onChange: setValue,
     "aria-label": "Search Groups",
@@ -164,7 +175,7 @@ var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
       return alert(text);
     } // eslint-disable-line no-alert
 
-  }), (0, _react2.jsx)(_index.Text, {
+  }), (0, _react2.jsx)(_.Text, {
     mt: "xs"
   }, "Debounced value: ".concat(debouncedSearchText)));
 };

package/lib/cjs/components/SelectField/SelectField.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
@@ -18,24 +30,32 @@ exports["default"] = void 0;
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _hooks = require("../../hooks");
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _hooks = require("../../hooks");
 
 var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
 var _react2 = require("@emotion/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
+
 /**
  * Select field (dropdown) that does not rely on native browser or mobile implementations.
  *
@@ -51,7 +71,7 @@ var SelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({}, props, selectFieldProps));
 });
-SelectField.propTypes = {
+SelectField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
 
@@ -164,7 +184,7 @@ SelectField.propTypes = {
   scrollBoxProps: _propTypes["default"].shape({
     maxHeight: _propTypes["default"].string
   })
-};
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 SelectField.defaultProps = {
   placeholder: 'Select',
   status: _statuses["default"].DEFAULT,

package/lib/cjs/components/SelectField/SelectField.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
@@ -34,18 +46,22 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _overlays = require("@react-aria/overlays");
 
 var _data = require("@react-stately/data");
 
-var _index = require("../../index");
+var _2 = require("../../");
 
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _constants = require("../Label/constants");
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
 var _react2 = require("@emotion/react");
 
 var _context, _context2;
@@ -54,6 +70,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 _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { (0, _defineProperty2["default"])(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; }
+
 var animals = [{
   name: 'Aardvark',
   id: '1'
@@ -121,7 +141,7 @@ var withSection = [{
 }];
 var _default = {
   title: 'Form/SelectField',
-  component: _index.SelectField,
+  component: _2.SelectField,
   parameters: {
     docs: {
       source: {
@@ -129,7 +149,7 @@ var _default = {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -178,18 +198,18 @@ var _default = {
         type: 'none'
       }
     }
-  }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.SelectField, (0, _extends2["default"])({}, args, {
     width: "100%"
-  }), (0, _react2.jsx)(_index.Item, {
+  }), (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow")));
 };
@@ -197,15 +217,15 @@ var Default = function Default(args) {
 exports.Default = Default;
 
 var WithSections = function WithSections(args) {
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.SelectField, (0, _extends2["default"])({
     items: withSection
   }, args), function (section) {
-    return (0, _react2.jsx)(_index.Section, {
+    return (0, _react2.jsx)(_2.Section, {
       key: section.name,
       items: section.children,
       title: section.name
     }, function (item) {
-      return (0, _react2.jsx)(_index.Item, {
+      return (0, _react2.jsx)(_2.Item, {
         key: item.name
       }, item.name);
     });
@@ -215,14 +235,14 @@ var WithSections = function WithSections(args) {
 exports.WithSections = WithSections;
 
 var WithCustomHeight = function WithCustomHeight(args) {
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.SelectField, (0, _extends2["default"])({
     label: "Example label",
     items: animals,
     scrollBoxProps: {
       maxHeight: '75px'
     }
   }, args), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_2.Item, {
       key: item.name
     }, item.name);
   }));
@@ -231,14 +251,14 @@ var WithCustomHeight = function WithCustomHeight(args) {
 exports.WithCustomHeight = WithCustomHeight;
 
 var FloatLabel = function FloatLabel() {
-  return (0, _react2.jsx)(_index.SelectField, {
+  return (0, _react2.jsx)(_2.SelectField, {
     label: "What's your favorite color?",
     labelMode: "float"
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -255,15 +275,15 @@ var Controlled = function Controlled() {
     return setSelectedKey(key);
   };
 
-  return (0, _react2.jsx)(_index.SelectField, {
+  return (0, _react2.jsx)(_2.SelectField, {
     selectedKey: selectedKey,
     onSelectionChange: handleSelectionChange,
     label: "What's your favorite color?"
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -271,18 +291,18 @@ var Controlled = function Controlled() {
 exports.Controlled = Controlled;
 
 var WithNoneOption = function WithNoneOption() {
-  return (0, _react2.jsx)(_index.SelectField, {
+  return (0, _react2.jsx)(_2.SelectField, {
     label: "What's your favorite color?"
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "none"
-  }, "None"), (0, _react2.jsx)(_index.Item, {
+  }, "None"), (0, _react2.jsx)(_2.Item, {
     isSeparator: true,
     textValue: "-"
-  }, (0, _react2.jsx)(_index.Separator, null)), (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Separator, null)), (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -290,14 +310,14 @@ var WithNoneOption = function WithNoneOption() {
 exports.WithNoneOption = WithNoneOption;
 
 var DisabledField = function DisabledField() {
-  return (0, _react2.jsx)(_index.SelectField, {
+  return (0, _react2.jsx)(_2.SelectField, {
     label: "What's your favorite color?",
     isDisabled: true
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -305,14 +325,14 @@ var DisabledField = function DisabledField() {
 exports.DisabledField = DisabledField;
 
 var DisabledOptions = function DisabledOptions() {
-  return (0, _react2.jsx)(_index.SelectField, {
+  return (0, _react2.jsx)(_2.SelectField, {
     label: "What's your favorite color?",
     disabledKeys: ['blue']
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -320,7 +340,7 @@ var DisabledOptions = function DisabledOptions() {
 exports.DisabledOptions = DisabledOptions;
 
 var NoOptionsAvailable = function NoOptionsAvailable() {
-  return (0, _react2.jsx)(_index.SelectField, {
+  return (0, _react2.jsx)(_2.SelectField, {
     label: "Select an option...",
     placeholder: "No options available"
   });
@@ -329,15 +349,15 @@ var NoOptionsAvailable = function NoOptionsAvailable() {
 exports.NoOptionsAvailable = NoOptionsAvailable;
 
 var HelperText = function HelperText() {
-  return (0, _react2.jsx)(_index.SelectField, {
+  return (0, _react2.jsx)(_2.SelectField, {
     status: "error",
     helperText: "Here is some helpful text...",
     label: "What's your favorite color?"
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -356,11 +376,11 @@ var DynamicItems = function DynamicItems() {
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
       items = _useState4[0];
 
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.SelectField, {
     label: "Select an option...",
     items: items
   }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_2.Item, {
       key: item.key
     }, item.name);
   }));
@@ -416,13 +436,13 @@ var AsyncLoading = function AsyncLoading() {
       }))();
     }
   });
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.SelectField, {
     label: "Pick a Pokemon",
     items: list.items,
     isLoading: list.isLoading,
     onLoadMore: list.loadMore
   }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_2.Item, {
       key: item.name
     }, item.name);
   }));
@@ -431,16 +451,16 @@ var AsyncLoading = function AsyncLoading() {
 exports.AsyncLoading = AsyncLoading;
 
 var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return (0, _react2.jsx)(_index.SelectField, {
+  return (0, _react2.jsx)(_2.SelectField, {
     label: "What's your favorite color?",
     hasNoStatusIndicator: true
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "none"
-  }, "None"), (0, _react2.jsx)(_index.Item, {
+  }, "None"), (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -34,6 +34,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -42,6 +44,8 @@ var _select = require("@react-aria/select");
 
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _Box = _interopRequireDefault(require("../Box"));
@@ -62,6 +66,8 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _react2 = require("@emotion/react");
 
+var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlProps", "fieldLabelProps", "helperText", "isLoadingInitial", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
@@ -77,38 +83,44 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * and [useSelectState](https://react-spectrum.adobe.com/react-stately/useSelectState.html) from
  * React Stately.
  */
-var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var defaultText = props.defaultText,
-      helperText = props.helperText,
-      label = props.label,
-      name = props.name,
-      placeholder = props.placeholder,
-      status = props.status,
-      slots = props.slots,
-      columnStyleProps = props.columnStyleProps,
-      fieldContainerProps = props.fieldContainerProps,
-      fieldControlProps = props.fieldControlProps,
-      fieldLabelProps = props.fieldLabelProps,
-      isLoadingInitial = props.isLoadingInitial,
-      overlay = props.overlay,
-      state = props.state,
-      trigger = props.trigger,
-      triggerProps = props.triggerProps,
-      triggerRef = props.triggerRef,
-      valueProps = props.valueProps;
+var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var columnStyleProps = _ref.columnStyleProps,
+      defaultText = _ref.defaultText,
+      fieldContainerProps = _ref.fieldContainerProps,
+      fieldControlProps = _ref.fieldControlProps,
+      fieldLabelProps = _ref.fieldLabelProps,
+      helperText = _ref.helperText,
+      isLoadingInitial = _ref.isLoadingInitial,
+      label = _ref.label,
+      labelMode = _ref.labelMode,
+      name = _ref.name,
+      overlay = _ref.overlay,
+      placeholder = _ref.placeholder,
+      slots = _ref.slots,
+      state = _ref.state,
+      status = _ref.status,
+      trigger = _ref.trigger,
+      triggerProps = _ref.triggerProps,
+      triggerRef = _ref.triggerRef,
+      valueProps = _ref.valueProps,
+      others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
+      ariaProps = _getAriaAttributeProp.ariaProps;
+
   var defaultTrigger = (0, _react2.jsx)(_Box["default"], {
     className: fieldControlProps.className,
     variant: "forms.input.container"
   }, (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
+    className: fieldControlProps.className,
     ref: triggerRef,
-    variant: "forms.select",
-    className: fieldControlProps.className
-  }, triggerProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: "forms.select"
+  }, triggerProps, ariaProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "span",
     variant: "forms.select.currentValue"
   }, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_Text["default"], {
     variant: "placeholder"
-  }, props.labelMode === _constants.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_Loader["default"], {
+  }, labelMode === _constants.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_Loader["default"], {
     variant: "loader.withinInput"
   }), (0, _react2.jsx)(_Box["default"], {
     as: "span",
@@ -135,7 +147,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     status: status
   }, helperText));
 });
-SelectFieldBase.propTypes = {
+SelectFieldBase.propTypes = _objectSpread({
   /** Default text rendered if no option is selected. Deprecated. */
   defaultText: _propTypes["default"].string,
 
@@ -204,6 +216,6 @@ SelectFieldBase.propTypes = {
 
   /** Props for the element representing the selected value. */
   valueProps: _propTypes["default"].shape({})
-};
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 var _default = SelectFieldBase;
 exports["default"] = _default;