@pingux/astro 2.93.0-alpha.0 → 2.93.0-alpha.2

package/lib/cjs/components/SelectField/Select.styles.d.ts

@@ -0,0 +1,2 @@
+import { ThemeUICSSObject } from 'theme-ui';
+export declare const select: ThemeUICSSObject;

package/lib/cjs/components/SelectField/SelectField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectFieldProps } from '../../types/selectField';
+declare const SelectField: React.ForwardRefExoticComponent<SelectFieldProps<object> & React.RefAttributes<HTMLSelectElement>>;
+export default SelectField;

package/lib/cjs/components/SelectField/SelectField.js

@@ -19,10 +19,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 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/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
 var _react2 = require("@emotion/react");
@@ -31,100 +28,30 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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 SelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var status = props.status;
+  /* istanbul ignore next */
+  var status = props.status,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? 'Select' : _props$placeholder,
+    _props$align = props.align,
+    align = _props$align === void 0 ? 'start' : _props$align,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'bottom' : _props$direction,
+    _props$scrollBoxProps = props.scrollBoxProps,
+    scrollBoxProps = _props$scrollBoxProps === void 0 ? {
+      margin: '300px'
+    } : _props$scrollBoxProps;
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var _useSelectField = (0, _hooks.useSelectField)(props, ref),
     selectFieldProps = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_useSelectField), _useSelectField));
-  return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({}, props, selectFieldProps, {
+  return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({
+    placeholder: placeholder,
+    align: align,
+    direction: direction,
+    scrollBoxProps: scrollBoxProps
+  }, props, selectFieldProps, {
     "aria-invalid": status === 'error' && true
   }));
 });
-SelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** Alignment of the popover menu relative to the trigger. */
-  align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
-  /** Where the popover menu opens relative to its trigger. */
-  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
-  /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey: _propTypes["default"].string,
-  /** Default text rendered if no option is selected. Deprecated. */
-  defaultText: _propTypes["default"].string,
-  /** Array of keys to disable within the options list. */
-  disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  /** Whether the collection allows empty selection. */
-  hasNoEmptySelection: _propTypes["default"].bool,
-  /** Whether the field has a status indicator. */
-  hasNoStatusIndicator: _propTypes["default"].bool,
-  /** Text rendered below the input. */
-  helperText: _propTypes["default"].node,
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: _propTypes["default"].string,
-  /** Sets the default open state of the menu. */
-  isDefaultOpen: _propTypes["default"].bool,
-  /** Whether the input is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the items are currently loading. */
-  isLoading: _propTypes["default"].bool,
-  /** @ignore Whether the menu should automatically flip direction when space is limited. */
-  isNotFlippable: _propTypes["default"].bool,
-  /** Sets the open state of the menu. */
-  isOpen: _propTypes["default"].bool,
-  /** @ignore Whether the input can be selected but not changed by the user. */
-  isReadOnly: _propTypes["default"].bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: _propTypes["default"].bool,
-  /**
-   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-   */
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
-  /** The label for the select element. */
-  label: _propTypes["default"].node,
-  /** The name for the select element, used when submitting a form. */
-  name: _propTypes["default"].string,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: _propTypes["default"].string,
-  /** The currently selected key in the collection (controlled). */
-  selectedKey: _propTypes["default"].string,
-  /** Determines the textarea status indicator and helper text styling. Eg. float. */
-  labelMode: _propTypes["default"].string,
-  /**
-   * Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
-   *
-   * () => any
-   */
-  onLoadMore: _propTypes["default"].func,
-  /**
-   * Method that is called when the open state of the menu changes.
-   *
-   * (isOpen: boolean) => void
-   */
-  onOpenChange: _propTypes["default"].func,
-  /**
-   * Handler that is called when the selection changes.
-   *
-   * (key: Key) => any
-   */
-  onSelectionChange: _propTypes["default"].func
-}, _fieldAttributes.inputFieldAttributesBasePropTypes), {}, {
-  /** Provides a way to insert markup in specified places. */
-  slots: _propTypes["default"].shape({
-    /** The given node will be inserted before the text in field container. */
-    leftOfData: _propTypes["default"].node,
-    /** The given node will be inserted into the field container. */
-    inContainer: _propTypes["default"].node
-  }),
-  /**
-   * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
-   * and/or the visible button representation for the select input.
-   */
-  controlProps: _propTypes["default"].shape({}),
-  /** Props object that is spread directly into the ScrollBox element. */
-  // /** Props object that is spread directly into the ScrollBox element. */
-  /** @ignore */
-  scrollBoxProps: _propTypes["default"].shape({
-    maxHeight: _propTypes["default"].string
-  })
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 SelectField.defaultProps = _objectSpread({
   placeholder: 'Select',
   align: 'start',

package/lib/cjs/components/SelectField/SelectField.stories.d.ts

@@ -0,0 +1,50 @@
+import React, { Key } from 'react';
+export type SelectItemProps = {
+    name?: string;
+    id?: string;
+    key?: Key;
+};
+export type SelectSectionProps = {
+    name?: string;
+    key?: string;
+    children?: SelectItemProps[];
+};
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../../types/selectField").SelectFieldProps<object> & React.RefAttributes<HTMLSelectElement>>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            source: {
+                type: string;
+            };
+        };
+    };
+    argTypes: any;
+    args: {
+        label: string;
+        labelMode: string;
+    };
+};
+export default _default;
+export declare const Default: (args: any) => React.JSX.Element;
+export declare const WithSections: (args: any) => React.JSX.Element;
+export declare const WithCustomHeight: (args: any) => React.JSX.Element;
+export declare const FloatLabel: () => React.JSX.Element;
+export declare const Controlled: () => React.JSX.Element;
+export declare const WithNoneOption: () => React.JSX.Element;
+export declare const WithSlots: () => React.JSX.Element;
+export declare const DisabledField: () => React.JSX.Element;
+export declare const DisabledOptions: () => React.JSX.Element;
+export declare const NoOptionsAvailable: () => React.JSX.Element;
+export declare const HelperText: () => React.JSX.Element;
+export declare const DynamicItems: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            storyDescription: string;
+        };
+    };
+};
+export declare const AsyncLoading: () => React.JSX.Element;
+export declare const WithoutStatusIndicator: () => React.JSX.Element;

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

@@ -351,7 +351,10 @@ var HelperText = function HelperText() {
   }, "Yellow"));
 };
 exports.HelperText = HelperText;
-var options = (0, _map["default"])(_context = (0, _fill["default"])(_context2 = new Array(200)).call(_context2)).call(_context, function (_, i) {
+var options = (0, _map["default"])(_context = (0, _fill["default"])(_context2 = new Array(200)).call(_context2, {
+  key: 'string',
+  name: 'string'
+})).call(_context, function (_, i) {
   return {
     key: "option-".concat(i),
     name: "Option ".concat(i)

package/lib/cjs/components/SelectField/SelectField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/SelectField/SelectField.test.js

@@ -20,7 +20,7 @@ var items = [{
 var withSection = [{
   name: 'Animals',
   key: 'Animals',
-  kids: [{
+  children: [{
     name: 'Aardvark'
   }, {
     name: 'Kangaroo'
@@ -30,7 +30,7 @@ var withSection = [{
 }, {
   name: 'People',
   key: 'People',
-  kids: [{
+  children: [{
     name: 'Michael'
   }, {
     name: 'Dwight'
@@ -40,7 +40,7 @@ var withSection = [{
 }, {
   name: null,
   key: 'Fruit',
-  kids: [{
+  children: [{
     name: 'Apple'
   }, {
     name: 'Strawberry'
@@ -81,7 +81,7 @@ var getComponentWithSections = function getComponentWithSections() {
   }), function (section) {
     return (0, _react2.jsx)(_index.Section, {
       key: section.key,
-      items: section.kids,
+      items: section.children,
       title: section.name
     }, function (item) {
       return (0, _react2.jsx)(_index.Item, {
@@ -155,4 +155,20 @@ test('a blank title does not render', function () {
   var button = _testWrapper.screen.getByRole('button');
   _userEvent["default"].click(button);
   expect(_testWrapper.screen.queryByText('Fruit')).not.toBeInTheDocument();
+});
+test('renders placeholder text', function () {
+  var placeholderText = 'Select an option';
+  getComponent({
+    placeholder: placeholderText
+  });
+  var placeholder = _testWrapper.screen.getByText(placeholderText);
+  expect(placeholder).toBeInTheDocument();
+});
+test('renders default placeholder text', function () {
+  var placeholderText = 'Select';
+  getComponent({
+    placeholder: placeholderText
+  });
+  var placeholder = _testWrapper.screen.getByText(placeholderText);
+  expect(placeholder).toBeInTheDocument();
 });

package/lib/cjs/components/SelectField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SelectField';

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SelectFieldBaseProps } from '../../types/selectField';
+/**
+ * Select field (dropdown) that does not rely on native browser or mobile implementations.
+ *
+ * Utilizes [useSelect](https://react-spectrum.adobe.com/react-aria/useSelect.html) from React Aria
+ * and [useSelectState](https://react-spectrum.adobe.com/react-stately/useSelectState.html) from
+ * React Stately.
+ */
+declare const SelectFieldBase: React.ForwardRefExoticComponent<SelectFieldBaseProps & React.RefAttributes<HTMLSelectElement>>;
+export default SelectFieldBase;

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

@@ -15,19 +15,16 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
@@ -48,33 +45,34 @@ 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 SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var columnStyleProps = _ref.columnStyleProps,
-    defaultText = _ref.defaultText,
-    fieldContainerProps = _ref.fieldContainerProps,
-    fieldControlInputProps = _ref.fieldControlInputProps,
-    fieldControlWrapperProps = _ref.fieldControlWrapperProps,
-    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 SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var columnStyleProps = props.columnStyleProps,
+    defaultText = props.defaultText,
+    fieldContainerProps = props.fieldContainerProps,
+    fieldControlInputProps = props.fieldControlInputProps,
+    fieldControlWrapperProps = props.fieldControlWrapperProps,
+    fieldLabelProps = props.fieldLabelProps,
+    helperText = props.helperText,
+    isLoadingInitial = props.isLoadingInitial,
+    label = props.label,
+    labelMode = props.labelMode,
+    name = props.name,
+    overlay = props.overlay,
+    placeholder = props.placeholder,
+    slots = props.slots,
+    state = props.state,
+    status = props.status,
+    trigger = props.trigger,
+    triggerProps = props.triggerProps,
+    triggerRef = props.triggerRef,
+    valueProps = props.valueProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = (0, _useGetTheme2["default"])(),
     icons = _useGetTheme.icons;
-  var MenuDown = icons.MenuDown;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var helperTextId = (0, _react.useMemo)(function () {
     return (0, _uuid.v4)();
   }, []);
@@ -98,14 +96,11 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-hidden": "true",
     variant: "forms.select.arrow"
   }, (0, _react2.jsx)(_Icon["default"], {
-    icon: MenuDown,
+    icon: state.isOpen ? MenuUp : MenuDown,
     title: {
       name: 'Menu down'
     },
-    size: "md",
-    sx: state.isOpen ? {
-      transform: 'rotate(180deg)'
-    } : null
+    size: "md"
   }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
@@ -123,57 +118,5 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     id: helperTextId
   }, helperText));
 });
-SelectFieldBase.propTypes = _objectSpread(_objectSpread({
-  /** Default text rendered if no option is selected. Deprecated. */
-  defaultText: _propTypes["default"].string,
-  /** Text rendered below the input. */
-  helperText: _propTypes["default"].node,
-  /** The label for the select element. */
-  label: _propTypes["default"].node,
-  /** Determines the textarea status indicator and helper text styling. Eg. float. */
-  labelMode: _propTypes["default"].oneOf((0, _values["default"])(_labelModes.modes)),
-  /** The name for the select element, used when submitting a form. */
-  name: _propTypes["default"].string,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: _propTypes["default"].string,
-  /** Determines whether to use column styles. */
-  columnStyleProps: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].shape({})]),
-  /** Determines props that applied to root container. */
-  fieldContainerProps: _propTypes["default"].shape({
-    sx: _propTypes["default"].shape({})
-  }),
-  /** Determines props that applied to control field. */
-  fieldControlInputProps: _propTypes["default"].shape({
-    className: _propTypes["default"].string
-  }),
-  /** Determines props that applied to label of field. */
-  fieldLabelProps: _propTypes["default"].shape({}),
-  /** Determines whether elements are loading and whether they haven't already appeared in list. */
-  isLoadingInitial: _propTypes["default"].bool,
-  /** Container for list with options */
-  overlay: _propTypes["default"].node,
-  /** State returned by useSelectState */
-  state: _propTypes["default"].shape({
-    isOpen: _propTypes["default"].bool,
-    selectedItem: _propTypes["default"].shape({
-      rendered: _propTypes["default"].node
-    })
-  }),
-  /** Provides a way to insert markup in specified places. */
-  slots: _propTypes["default"].shape({
-    /** The given node will be inserted before the text in field container. */
-    leftOfData: _propTypes["default"].node,
-    /** The given node will be inserted into the field container. */
-    inContainer: _propTypes["default"].node
-  }),
-  /** Control for interaction with SelectField */
-  trigger: _propTypes["default"].node,
-  /** Props for the popup trigger element. */
-  triggerProps: _propTypes["default"].shape({}),
-  /** Determines ref that applied to control */
-  triggerRef: _propTypes["default"].shape({}),
-  /** Props for the element representing the selected value. */
-  valueProps: _propTypes["default"].shape({})
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 var _default = SelectFieldBase;
 exports["default"] = _default;

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -81,7 +81,8 @@ beforeAll(function () {
     return 1024;
   });
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
-    return cb();
+    cb(0);
+    return 0;
   });
   jest.useFakeTimers();
 });
@@ -165,7 +166,9 @@ test('clicking on the visible button opens the popuplist', function () {
   var button = _testWrapper.screen.getByRole('button');
   expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
-  _userEvent["default"].click(button);
+  if (button) {
+    _userEvent["default"].click(button);
+  }
   expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
   expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
 });
@@ -181,7 +184,7 @@ test('clicking on an option then renders its text in the button', function () {
   _userEvent["default"].click(button);
   var options = _testWrapper.screen.queryAllByRole('option');
   _userEvent["default"].click(options[0]);
-  expect(button).toHaveTextContent(options[0].textContent);
+  expect(button).toHaveTextContent(items[0].name);
 });
 test('hovering an option applies correct styles', function () {
   getComponent();
@@ -306,7 +309,10 @@ test('two listbox can not be open at the same time', function () {
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
   var button = _testWrapper.screen.queryByRole('button');
-  _userEvent["default"].click(button);
+  expect(button).toBeInTheDocument();
+  if (button) {
+    _userEvent["default"].click(button);
+  }
   var options = _testWrapper.screen.queryAllByRole('option');
   expect(options).toHaveLength(items.length);
   expect(options[0]).toHaveAttribute('data-id', items[0].name);

package/lib/cjs/components/SelectFieldBase/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SelectFieldBase';

package/lib/cjs/components/TextAreaField/TextAreaField.test.js

@@ -18,6 +18,7 @@ var defaultProps = {
   'data-testid': testId,
   label: 'testLabel'
 };
+var label = defaultProps.label;
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
@@ -34,12 +35,12 @@ test('disabled prop disables input', function () {
   getComponent({
     isDisabled: true
   });
-  var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
+  var textArea = _testWrapper.screen.getByLabelText(label);
   expect(textArea).toBeDisabled();
 });
 test('text area field has focus', function () {
   getComponent();
-  var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
+  var textArea = _testWrapper.screen.getByLabelText(label);
   _userEvent["default"].tab();
   expect(textArea).toHaveFocus();
   expect(textArea).toHaveClass('is-focused');
@@ -48,8 +49,8 @@ test('disabled prop disables text field label', function () {
   getComponent({
     isDisabled: true
   });
-  var label = _testWrapper.screen.getByText(defaultProps.label);
-  expect(label).toHaveClass('is-disabled');
+  var labelDom = _testWrapper.screen.getByText(label);
+  expect(labelDom).toHaveClass('is-disabled');
 });
 test('text area field with helper text', function () {
   var helperText = 'helper text';
@@ -66,8 +67,8 @@ test('float label prop adds float label class', function () {
     helperText: helperText,
     labelMode: labelMode
   });
-  var label = _testWrapper.screen.getByText(defaultProps.label);
-  expect(label).toHaveClass('is-float-label');
+  var labelDom = _testWrapper.screen.getByText(label);
+  expect(labelDom).toHaveClass('is-float-label');
 });
 test('mousemove calls resize event', function () {
   var labelMode = 'float';
@@ -77,7 +78,7 @@ test('mousemove calls resize event', function () {
     labelMode: labelMode,
     resizeCallback: mockfunction
   });
-  var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
+  var textArea = _testWrapper.screen.getByLabelText(label);
   _react2.fireEvent.mouseMove(textArea);
   _react2.fireEvent.mouseMove(textArea);
   expect(mockfunction).toHaveBeenCalledTimes(2);
@@ -92,7 +93,7 @@ test('label will receive gridRow attribute if it will be higher than textarea',
     }
   });
   getComponent();
-  expect(_testWrapper.screen.getByText(defaultProps.label)).toHaveStyle('grid-row: 1/5');
+  expect(_testWrapper.screen.getByText(label)).toHaveStyle('grid-row: 1/5');
   (0, _defineProperty["default"])(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
 });
 test('form wrapper will have default max label column width when no custom width set', function () {
@@ -108,7 +109,7 @@ test('passing read only prop applys the is-read-only class to the textarea', fun
   getComponent({
     isReadOnly: isReadOnly
   });
-  var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
+  var textArea = _testWrapper.screen.getByLabelText(label);
   expect(textArea).toHaveClass('is-read-only');
 });
 test('form wrapper will have a max label column width when custom width set', function () {

package/lib/cjs/hooks/useSelectField/useSelectField.d.ts

@@ -4,16 +4,18 @@ import { AriaSelectOptions } from '@react-aria/select';
 import { SelectState } from '@react-stately/select';
 import type { CollectionChildren } from '@react-types/shared';
 import { LabelProps as ThemeUILabelProps } from 'theme-ui';
-import { Axis, BoxProps, FocusableElement, LabelModeProps, ListBoxProps, PlacementAxis, ReactRef, StyleProps } from '../../types';
+import { Axis, BoxProps, FocusableElement, LabelModeProps, ListBoxProps, PlacementAxis, ReactButtonRef, ReactRef, StyleProps } from '../../types';
 import { FieldControlInputProps } from '../useField/useField';
-interface UseSelectFieldProps<T> extends AriaSelectOptions<T> {
-    children: CollectionChildren<T>;
+export interface UseSelectFieldProps<T> extends AriaSelectOptions<T> {
+    children?: CollectionChildren<T>;
     align?: PlacementAxis;
     defaultSelectedKey?: string;
     defaultText?: string;
     direction?: Axis;
     disabledKeys?: Iterable<Key>;
     hasNoEmptySelection?: boolean;
+    hasNoStatusIndicator?: boolean;
+    helperText?: string;
     isDefaultOpen?: boolean;
     isDisabled?: boolean;
     isLoading?: boolean;
@@ -30,14 +32,17 @@ interface UseSelectFieldProps<T> extends AriaSelectOptions<T> {
     onLoadMore?: () => unknown;
     onOpenChange?: (isOpen: boolean) => unknown;
     onSelectionChange?: (key: Key) => unknown;
-    controlProps?: React.HTMLAttributes<Element>;
+    controlProps?: ControlProps;
     scrollBoxProps?: BoxProps;
     listBoxProps?: ListBoxProps;
     labelProps?: ThemeUILabelProps;
     containerProps?: BoxProps;
-    labelMode: LabelModeProps;
+    labelMode?: LabelModeProps;
 }
-interface UseSelectFieldReturnProps<T> {
+interface ControlProps extends React.HTMLAttributes<Element> {
+    'data-testid'?: string;
+}
+export interface UseSelectFieldReturnProps<T> {
     columnStyleProps: StyleProps;
     fieldContainerProps: BoxProps;
     fieldControlInputProps: FieldControlInputProps;
@@ -49,7 +54,7 @@ interface UseSelectFieldReturnProps<T> {
     popoverRef: ReactRef;
     state: SelectState<T>;
     triggerProps: AriaButtonProps<'button'>;
-    triggerRef: ReactRef;
+    triggerRef: ReactButtonRef;
     valueProps: DOMAttributes<FocusableElement>;
 }
 declare const useSelectField: <T extends object>(props: UseSelectFieldProps<T>, ref: ReactRef) => UseSelectFieldReturnProps<T>;

package/lib/cjs/types/TextAreaField.d.ts

@@ -1,17 +1,8 @@
 import { ReactNode } from 'react';
+import { SharedFieldProps } from './shared/fieldProps';
 import { TestingAttributes } from './shared/test';
-import { Status } from './item';
-import { LabelModeProps } from './label';
 import { ValidPositiveInteger } from './shared';
-export interface TextAreaFieldProps extends TestingAttributes {
-    /** The rendered label for the field. */
-    label: string;
-    /** Text rendered below the textarea. */
-    helperText?: string;
-    /** If present this prop will cause a help hint to render in the label of the field. */
-    hintText?: string;
-    /** A string designating whether or not the label is a float label. */
-    labelMode?: LabelModeProps;
+export interface TextAreaFieldProps extends TestingAttributes, SharedFieldProps {
     /** Whether the textarea is unable to be resized. */
     isUnresizable?: boolean;
     /**
@@ -52,6 +43,4 @@ export interface TextAreaFieldProps extends TestingAttributes {
         /** The given node will be inserted into the field container. */
         inContainer: ReactNode;
     };
-    /** Status of the textarea field */
-    status?: Status;
 }

package/lib/cjs/types/arrayField.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ThemeUICSSObject } from 'theme-ui';
 import { LabelProps, Status, ValidPositiveInteger } from '.';
-type RenderFieldFunction = (id: string, fieldValue: string, onFieldValueChange: (e: React.ChangeEvent, fieldId: string) => void, onFieldDelete: (fieldId: string) => void, isDisabled: boolean, otherFieldProps?: Record<string, string>) => React.ReactNode;
+export type RenderFieldFunction = (id: string, fieldValue: string, onFieldValueChange: (e: React.ChangeEvent, fieldId: string) => void, onFieldDelete: (fieldId: string) => void, isDisabled: boolean, otherFieldProps?: Record<string, string>) => React.ReactNode;
 export interface FieldValue {
     id: string;
     value?: string;
@@ -48,4 +48,3 @@ export interface ArrayFieldDeleteButtonProps {
     isDisabled?: boolean;
     onDelete?: (id?: number) => void;
 }
-export {};

package/lib/cjs/types/selectField.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { UseSelectFieldProps, UseSelectFieldReturnProps } from '../hooks/useSelectField/useSelectField';
+import { SharedFieldProps } from './shared/fieldProps';
+import { Status } from './item';
+import { StyleProps } from './shared';
+export interface SelectFieldProps<T> extends Omit<StyleProps, 'direction'>, UseSelectFieldProps<T> {
+    status?: Status;
+    slots?: {
+        leftOfData?: React.ReactNode;
+        inContainer?: React.ReactNode;
+    };
+    'data-testid'?: string;
+}
+export interface SelectFieldBaseProps extends UseSelectFieldReturnProps<object>, SharedFieldProps {
+    slots?: {
+        inContainer?: React.ReactNode;
+        leftOfData?: React.ReactNode;
+    };
+    name?: string;
+    placeholder?: string;
+    trigger?: React.ReactNode;
+    defaultText?: string;
+}

package/lib/cjs/types/selectField.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/shared/dom.d.ts

@@ -8,3 +8,4 @@ export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, Rea
     className?: string | undefined;
 }
 export type ReactRef = React.Ref<HTMLElement>;
+export type ReactButtonRef = React.Ref<HTMLButtonElement>;

package/lib/cjs/types/shared/fieldProps.d.ts

@@ -0,0 +1,12 @@
+import { Status } from '../item';
+import { LabelModeProps } from '../label';
+export interface SharedFieldProps {
+    status?: Status;
+    label?: string;
+    /** Text rendered below the textarea. */
+    helperText?: string;
+    /** If present this prop will cause a help hint to render in the label of the field. */
+    hintText?: string;
+    /** A string designating whether or not the label is a float label. */
+    labelMode?: LabelModeProps;
+}

package/lib/cjs/types/shared/fieldProps.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/textField.d.ts

@@ -1,16 +1,10 @@
 /// <reference types="react" />
 import { ThemeUICSSObject } from 'theme-ui';
 import { ContainerProps, ControlProps } from '../hooks/useField/useField';
+import { SharedFieldProps } from './shared/fieldProps';
 import { HelpHintProps } from './helpHint';
-import { Status } from './item';
-import { LabelModeProps } from './label';
 import { AriaRole, StyleProps, ValidPositiveInteger } from './shared';
-export interface TextFieldProps extends StyleProps {
-    helperText?: string;
-    /** The rendered label for the field. */
-    label?: React.ReactNode;
-    /** A string designating whether or not the label is a float label. */
-    labelMode?: LabelModeProps;
+export interface TextFieldProps extends StyleProps, SharedFieldProps {
     /** The unique identifier for the input element. */
     id?: string;
     /** The name for the input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
@@ -21,8 +15,6 @@ export interface TextFieldProps extends StyleProps {
     defaultValue?: string;
     /** Whether the input element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus). */
     hasAutoFocus?: boolean;
-    /** If present this prop will cause a help hint to render in the label of the field. */
-    hintText?: string;
     /** Whether the field has a status indicator. */
     hasNoStatusIndicator?: boolean;
     helpHintProps?: HelpHintProps;
@@ -54,7 +46,6 @@ export interface TextFieldProps extends StyleProps {
     type?: string;
     /** Props object that is spread directly into the input wrapper element. */
     wrapperProps?: Record<string, unknown>;
-    status?: Status;
     variant?: string;
     controlProps?: ControlProps;
     containerProps?: ContainerProps;

package/lib/components/SelectField/Select.styles.js

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 // Styles for default select and variants go here.
+
 import { text } from '../../styles/variants';
 import { defaultFocus, input } from '../Input/Input.styles';
 var activeFloatLabel = {

package/lib/components/SelectField/SelectField.js

@@ -12,108 +12,35 @@ 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 } from 'react';
-import PropTypes from 'prop-types';
 import { usePropWarning, useSelectField } from '../../hooks';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
+import { statusDefaultProp } from '../../utils/docUtils/statusProp';
 import SelectFieldBase from '../SelectFieldBase';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var SelectField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var status = props.status;
+  /* istanbul ignore next */
+  var status = props.status,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? 'Select' : _props$placeholder,
+    _props$align = props.align,
+    align = _props$align === void 0 ? 'start' : _props$align,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'bottom' : _props$direction,
+    _props$scrollBoxProps = props.scrollBoxProps,
+    scrollBoxProps = _props$scrollBoxProps === void 0 ? {
+      margin: '300px'
+    } : _props$scrollBoxProps;
   usePropWarning(props, 'disabled', 'isDisabled');
   var _useSelectField = useSelectField(props, ref),
     selectFieldProps = _extends({}, (_objectDestructuringEmpty(_useSelectField), _useSelectField));
-  return ___EmotionJSX(SelectFieldBase, _extends({}, props, selectFieldProps, {
+  return ___EmotionJSX(SelectFieldBase, _extends({
+    placeholder: placeholder,
+    align: align,
+    direction: direction,
+    scrollBoxProps: scrollBoxProps
+  }, props, selectFieldProps, {
     "aria-invalid": status === 'error' && true
   }));
 });
-SelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** Alignment of the popover menu relative to the trigger. */
-  align: PropTypes.oneOf(['start', 'end', 'middle']),
-  /** Where the popover menu opens relative to its trigger. */
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey: PropTypes.string,
-  /** Default text rendered if no option is selected. Deprecated. */
-  defaultText: PropTypes.string,
-  /** Array of keys to disable within the options list. */
-  disabledKeys: PropTypes.arrayOf(PropTypes.string),
-  /** Whether the collection allows empty selection. */
-  hasNoEmptySelection: PropTypes.bool,
-  /** Whether the field has a status indicator. */
-  hasNoStatusIndicator: PropTypes.bool,
-  /** Text rendered below the input. */
-  helperText: PropTypes.node,
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: PropTypes.string,
-  /** Sets the default open state of the menu. */
-  isDefaultOpen: PropTypes.bool,
-  /** Whether the input is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether the items are currently loading. */
-  isLoading: PropTypes.bool,
-  /** @ignore Whether the menu should automatically flip direction when space is limited. */
-  isNotFlippable: PropTypes.bool,
-  /** Sets the open state of the menu. */
-  isOpen: PropTypes.bool,
-  /** @ignore Whether the input can be selected but not changed by the user. */
-  isReadOnly: PropTypes.bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: PropTypes.bool,
-  /**
-   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({})),
-  /** The label for the select element. */
-  label: PropTypes.node,
-  /** The name for the select element, used when submitting a form. */
-  name: PropTypes.string,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: PropTypes.string,
-  /** The currently selected key in the collection (controlled). */
-  selectedKey: PropTypes.string,
-  /** Determines the textarea status indicator and helper text styling. Eg. float. */
-  labelMode: PropTypes.string,
-  /**
-   * Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
-   *
-   * () => any
-   */
-  onLoadMore: PropTypes.func,
-  /**
-   * Method that is called when the open state of the menu changes.
-   *
-   * (isOpen: boolean) => void
-   */
-  onOpenChange: PropTypes.func,
-  /**
-   * Handler that is called when the selection changes.
-   *
-   * (key: Key) => any
-   */
-  onSelectionChange: PropTypes.func
-}, inputFieldAttributesBasePropTypes), {}, {
-  /** Provides a way to insert markup in specified places. */
-  slots: PropTypes.shape({
-    /** The given node will be inserted before the text in field container. */
-    leftOfData: PropTypes.node,
-    /** The given node will be inserted into the field container. */
-    inContainer: PropTypes.node
-  }),
-  /**
-   * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
-   * and/or the visible button representation for the select input.
-   */
-  controlProps: PropTypes.shape({}),
-  /** Props object that is spread directly into the ScrollBox element. */
-  // /** Props object that is spread directly into the ScrollBox element. */
-  /** @ignore */
-  scrollBoxProps: PropTypes.shape({
-    maxHeight: PropTypes.string
-  })
-}, statusPropTypes), ariaAttributesBasePropTypes);
 SelectField.defaultProps = _objectSpread({
   placeholder: 'Select',
   align: 'start',

package/lib/components/SelectField/SelectField.stories.js

@@ -328,7 +328,10 @@ export var HelperText = function HelperText() {
     key: "yellow"
   }, "Yellow"));
 };
-var options = _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = new Array(200)).call(_context2)).call(_context, function (_, i) {
+var options = _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = new Array(200)).call(_context2, {
+  key: 'string',
+  name: 'string'
+})).call(_context, function (_, i) {
   return {
     key: "option-".concat(i),
     name: "Option ".concat(i)

package/lib/components/SelectField/SelectField.test.js

@@ -17,7 +17,7 @@ var items = [{
 var withSection = [{
   name: 'Animals',
   key: 'Animals',
-  kids: [{
+  children: [{
     name: 'Aardvark'
   }, {
     name: 'Kangaroo'
@@ -27,7 +27,7 @@ var withSection = [{
 }, {
   name: 'People',
   key: 'People',
-  kids: [{
+  children: [{
     name: 'Michael'
   }, {
     name: 'Dwight'
@@ -37,7 +37,7 @@ var withSection = [{
 }, {
   name: null,
   key: 'Fruit',
-  kids: [{
+  children: [{
     name: 'Apple'
   }, {
     name: 'Strawberry'
@@ -78,7 +78,7 @@ var getComponentWithSections = function getComponentWithSections() {
   }), function (section) {
     return ___EmotionJSX(Section, {
       key: section.key,
-      items: section.kids,
+      items: section.children,
       title: section.name
     }, function (item) {
       return ___EmotionJSX(Item, {
@@ -152,4 +152,20 @@ test('a blank title does not render', function () {
   var button = screen.getByRole('button');
   userEvent.click(button);
   expect(screen.queryByText('Fruit')).not.toBeInTheDocument();
+});
+test('renders placeholder text', function () {
+  var placeholderText = 'Select an option';
+  getComponent({
+    placeholder: placeholderText
+  });
+  var placeholder = screen.getByText(placeholderText);
+  expect(placeholder).toBeInTheDocument();
+});
+test('renders default placeholder text', function () {
+  var placeholderText = 'Select';
+  getComponent({
+    placeholder: placeholderText
+  });
+  var placeholder = screen.getByText(placeholderText);
+  expect(placeholder).toBeInTheDocument();
 });

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -10,18 +10,15 @@ 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 = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps"];
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useMemo } from 'react';
 import { HiddenSelect } from 'react-aria';
-import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import useGetTheme from '../../hooks/useGetTheme';
 import { modes } from '../../utils/devUtils/constants/labelModes';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
+import { getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import Box from '../Box';
 import Button from '../Button';
 import FieldHelperText from '../FieldHelperText';
@@ -38,33 +35,34 @@ import Text from '../Text';
  * React Stately.
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var columnStyleProps = _ref.columnStyleProps,
-    defaultText = _ref.defaultText,
-    fieldContainerProps = _ref.fieldContainerProps,
-    fieldControlInputProps = _ref.fieldControlInputProps,
-    fieldControlWrapperProps = _ref.fieldControlWrapperProps,
-    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 = _objectWithoutProperties(_ref, _excluded);
+var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
+  var columnStyleProps = props.columnStyleProps,
+    defaultText = props.defaultText,
+    fieldContainerProps = props.fieldContainerProps,
+    fieldControlInputProps = props.fieldControlInputProps,
+    fieldControlWrapperProps = props.fieldControlWrapperProps,
+    fieldLabelProps = props.fieldLabelProps,
+    helperText = props.helperText,
+    isLoadingInitial = props.isLoadingInitial,
+    label = props.label,
+    labelMode = props.labelMode,
+    name = props.name,
+    overlay = props.overlay,
+    placeholder = props.placeholder,
+    slots = props.slots,
+    state = props.state,
+    status = props.status,
+    trigger = props.trigger,
+    triggerProps = props.triggerProps,
+    triggerRef = props.triggerRef,
+    valueProps = props.valueProps,
+    others = _objectWithoutProperties(props, _excluded);
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
     icons = _useGetTheme.icons;
-  var MenuDown = icons.MenuDown;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var helperTextId = useMemo(function () {
     return uuid();
   }, []);
@@ -88,14 +86,11 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-hidden": "true",
     variant: "forms.select.arrow"
   }, ___EmotionJSX(Icon, {
-    icon: MenuDown,
+    icon: state.isOpen ? MenuUp : MenuDown,
     title: {
       name: 'Menu down'
     },
-    size: "md",
-    sx: state.isOpen ? {
-      transform: 'rotate(180deg)'
-    } : null
+    size: "md"
   }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
@@ -113,56 +108,4 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
     id: helperTextId
   }, helperText));
 });
-SelectFieldBase.propTypes = _objectSpread(_objectSpread({
-  /** Default text rendered if no option is selected. Deprecated. */
-  defaultText: PropTypes.string,
-  /** Text rendered below the input. */
-  helperText: PropTypes.node,
-  /** The label for the select element. */
-  label: PropTypes.node,
-  /** Determines the textarea status indicator and helper text styling. Eg. float. */
-  labelMode: PropTypes.oneOf(_Object$values(modes)),
-  /** The name for the select element, used when submitting a form. */
-  name: PropTypes.string,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: PropTypes.string,
-  /** Determines whether to use column styles. */
-  columnStyleProps: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({})]),
-  /** Determines props that applied to root container. */
-  fieldContainerProps: PropTypes.shape({
-    sx: PropTypes.shape({})
-  }),
-  /** Determines props that applied to control field. */
-  fieldControlInputProps: PropTypes.shape({
-    className: PropTypes.string
-  }),
-  /** Determines props that applied to label of field. */
-  fieldLabelProps: PropTypes.shape({}),
-  /** Determines whether elements are loading and whether they haven't already appeared in list. */
-  isLoadingInitial: PropTypes.bool,
-  /** Container for list with options */
-  overlay: PropTypes.node,
-  /** State returned by useSelectState */
-  state: PropTypes.shape({
-    isOpen: PropTypes.bool,
-    selectedItem: PropTypes.shape({
-      rendered: PropTypes.node
-    })
-  }),
-  /** Provides a way to insert markup in specified places. */
-  slots: PropTypes.shape({
-    /** The given node will be inserted before the text in field container. */
-    leftOfData: PropTypes.node,
-    /** The given node will be inserted into the field container. */
-    inContainer: PropTypes.node
-  }),
-  /** Control for interaction with SelectField */
-  trigger: PropTypes.node,
-  /** Props for the popup trigger element. */
-  triggerProps: PropTypes.shape({}),
-  /** Determines ref that applied to control */
-  triggerRef: PropTypes.shape({}),
-  /** Props for the element representing the selected value. */
-  valueProps: PropTypes.shape({})
-}, statusPropTypes), ariaAttributesBasePropTypes);
 export default SelectFieldBase;

package/lib/components/SelectFieldBase/SelectFieldBase.test.js

@@ -74,7 +74,8 @@ beforeAll(function () {
     return 1024;
   });
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
-    return cb();
+    cb(0);
+    return 0;
   });
   jest.useFakeTimers();
 });
@@ -158,7 +159,9 @@ test('clicking on the visible button opens the popuplist', function () {
   var button = screen.getByRole('button');
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
-  userEvent.click(button);
+  if (button) {
+    userEvent.click(button);
+  }
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   expect(screen.queryAllByRole('option')).toHaveLength(3);
 });
@@ -174,7 +177,7 @@ test('clicking on an option then renders its text in the button', function () {
   userEvent.click(button);
   var options = screen.queryAllByRole('option');
   userEvent.click(options[0]);
-  expect(button).toHaveTextContent(options[0].textContent);
+  expect(button).toHaveTextContent(items[0].name);
 });
 test('hovering an option applies correct styles', function () {
   getComponent();
@@ -299,7 +302,10 @@ test('two listbox can not be open at the same time', function () {
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
   var button = screen.queryByRole('button');
-  userEvent.click(button);
+  expect(button).toBeInTheDocument();
+  if (button) {
+    userEvent.click(button);
+  }
   var options = screen.queryAllByRole('option');
   expect(options).toHaveLength(items.length);
   expect(options[0]).toHaveAttribute('data-id', items[0].name);

package/lib/components/TextAreaField/TextAreaField.test.js

@@ -15,6 +15,7 @@ var defaultProps = {
   'data-testid': testId,
   label: 'testLabel'
 };
+var label = defaultProps.label;
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(TextAreaField, _extends({}, defaultProps, props)));
@@ -31,12 +32,12 @@ test('disabled prop disables input', function () {
   getComponent({
     isDisabled: true
   });
-  var textArea = screen.getByLabelText(defaultProps.label);
+  var textArea = screen.getByLabelText(label);
   expect(textArea).toBeDisabled();
 });
 test('text area field has focus', function () {
   getComponent();
-  var textArea = screen.getByLabelText(defaultProps.label);
+  var textArea = screen.getByLabelText(label);
   userEvent.tab();
   expect(textArea).toHaveFocus();
   expect(textArea).toHaveClass('is-focused');
@@ -45,8 +46,8 @@ test('disabled prop disables text field label', function () {
   getComponent({
     isDisabled: true
   });
-  var label = screen.getByText(defaultProps.label);
-  expect(label).toHaveClass('is-disabled');
+  var labelDom = screen.getByText(label);
+  expect(labelDom).toHaveClass('is-disabled');
 });
 test('text area field with helper text', function () {
   var helperText = 'helper text';
@@ -63,8 +64,8 @@ test('float label prop adds float label class', function () {
     helperText: helperText,
     labelMode: labelMode
   });
-  var label = screen.getByText(defaultProps.label);
-  expect(label).toHaveClass('is-float-label');
+  var labelDom = screen.getByText(label);
+  expect(labelDom).toHaveClass('is-float-label');
 });
 test('mousemove calls resize event', function () {
   var labelMode = 'float';
@@ -74,7 +75,7 @@ test('mousemove calls resize event', function () {
     labelMode: labelMode,
     resizeCallback: mockfunction
   });
-  var textArea = screen.getByLabelText(defaultProps.label);
+  var textArea = screen.getByLabelText(label);
   fireEvent.mouseMove(textArea);
   fireEvent.mouseMove(textArea);
   expect(mockfunction).toHaveBeenCalledTimes(2);
@@ -89,7 +90,7 @@ test('label will receive gridRow attribute if it will be higher than textarea',
     }
   });
   getComponent();
-  expect(screen.getByText(defaultProps.label)).toHaveStyle('grid-row: 1/5');
+  expect(screen.getByText(label)).toHaveStyle('grid-row: 1/5');
   _Object$defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
 });
 test('form wrapper will have default max label column width when no custom width set', function () {
@@ -105,7 +106,7 @@ test('passing read only prop applys the is-read-only class to the textarea', fun
   getComponent({
     isReadOnly: isReadOnly
   });
-  var textArea = screen.getByLabelText(defaultProps.label);
+  var textArea = screen.getByLabelText(label);
   expect(textArea).toHaveClass('is-read-only');
 });
 test('form wrapper will have a max label column width when custom width set', function () {

package/lib/types/selectField.js

@@ -0,0 +1 @@
+export {};

package/lib/types/shared/fieldProps.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.93.0-alpha.0",
+  "version": "2.93.0-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",