@pingux/astro 2.92.1 → 2.93.0-alpha.1

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 @@
-/// <reference types="react" />
+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;
@@ -37,10 +37,14 @@ export interface ArrayFieldProps {
     status?: Status;
     /** Props object that is spread directly into the wrapper rendering the fields. */
     fieldControlWrapperProps?: Record<string, string>;
+    /** slots that render on either the left or right side of the add more button */
+    slots?: {
+        right?: React.ReactNode;
+        left?: React.ReactNode;
+    };
 }
 export interface ArrayFieldDeleteButtonProps {
     id?: number;
     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/ArrayField/ArrayField.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["addButtonLabel", "defaultValue", "fieldControlWrapperProps", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
+var _excluded = ["addButtonLabel", "defaultValue", "fieldControlWrapperProps", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText", "slots"],
   _excluded2 = ["id", "onComponentRender", "fieldValue"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -40,6 +40,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
     labelProps = props.labelProps,
     maxSize = props.maxSize,
     maxSizeText = props.maxSizeText,
+    slots = props.slots,
     others = _objectWithoutProperties(props, _excluded);
   var valueRef = React.useRef(value);
   valueRef.current = value;
@@ -109,6 +110,9 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
     raLabelProps = _useLabel.labelProps;
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
   var isDisabled = (value || fieldValues).length === 1;
+
+  // renders of the bottom bar if one or more of the components within it should render
+  var shouldShowBottomBar = !isLimitReached || (slots === null || slots === void 0 ? void 0 : slots.left) || (slots === null || slots === void 0 ? void 0 : slots.right);
   var renderedItem = useCallback(function (id, fieldValue, otherFieldProps, onComponentRender, labelId) {
     if (onComponentRender) {
       return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps);
@@ -142,7 +146,10 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status
   }, helperText), isLimitReached && ___EmotionJSX(FieldHelperText, {
     status: statuses.DEFAULT
-  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), !isLimitReached && ___EmotionJSX(Button, {
+  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), shouldShowBottomBar && ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md"
+  }, (slots === null || slots === void 0 ? void 0 : slots.left) && (slots === null || slots === void 0 ? void 0 : slots.left), !isLimitReached && ___EmotionJSX(Button, {
     "aria-label": "Add field",
     variant: "link",
     onPress: onFieldAdd,
@@ -153,7 +160,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(Text, {
     variant: "label",
     color: "active"
-  }, addButtonLabel)));
+  }, addButtonLabel)), (slots === null || slots === void 0 ? void 0 : slots.right) && (slots === null || slots === void 0 ? void 0 : slots.right)));
 });
 ArrayField.defaultProps = {
   addButtonLabel: '+ Add',

package/lib/components/ArrayField/ArrayField.stories.js

@@ -17,7 +17,7 @@ import React from 'react';
 import { OverlayProvider } from 'react-aria';
 import { v4 as uuid } from 'uuid';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { ArrayField, ArrayFieldDeleteButton, Box, Item, SelectField, TextField } from '../../index';
+import { ArrayField, ArrayFieldDeleteButton, Box, Button, Item, SelectField, Text, TextField } from '../../index';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import ArrayFieldReadme from './ArrayField.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -305,4 +305,66 @@ export var Customizations = function Customizations(_ref5) {
       }, otherFieldProps)));
     }
   }, args));
+};
+export var WithBothSlots = function WithBothSlots(_ref6) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
+  var LeftSlot = ___EmotionJSX(Button, {
+    "aria-label": "Add field",
+    variant: "link",
+    sx: {
+      width: 'fit-content',
+      mt: 'xs'
+    }
+  }, ___EmotionJSX(Text, {
+    variant: "label",
+    color: "active"
+  }, "Left slot"));
+  var RightSlot = ___EmotionJSX(Button, {
+    "aria-label": "Add field",
+    variant: "link",
+    sx: {
+      width: 'fit-content',
+      mt: 'xs'
+    }
+  }, ___EmotionJSX(Text, {
+    variant: "label",
+    color: "active"
+  }, "Right slot"));
+  return ___EmotionJSX(ArrayField, _extends({
+    defaultValue: defaultData,
+    sx: {
+      width: '450px'
+    },
+    labelProps: {
+      hintText: 'Example Hint',
+      isRequired: true,
+      helpHintProps: {
+        direction: 'top'
+      }
+    },
+    slots: {
+      left: LeftSlot,
+      right: RightSlot
+    },
+    renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return ___EmotionJSX(Box, {
+        width: "400px"
+      }, ___EmotionJSX(TextField, _extends({
+        "aria-label": "Text field",
+        value: fieldValue,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps)));
+    }
+  }, args));
 };

package/lib/components/ArrayField/ArrayField.test.js

@@ -224,4 +224,30 @@ test('displays max size label if provided', function () {
   });
   expect(screen.queryByText('+ Add')).not.toBeInTheDocument();
   expect(screen.getByText(maxSizeText)).toBeInTheDocument();
+});
+test('renders left slot content', function () {
+  var leftSlotContent = ___EmotionJSX("div", {
+    "data-testid": "left-slot"
+  }, "Left Slot Content");
+  getComponent({
+    slots: {
+      left: leftSlotContent
+    }
+  });
+  var leftSlot = screen.getByTestId('left-slot');
+  expect(leftSlot).toBeInTheDocument();
+  expect(leftSlot).toHaveTextContent('Left Slot Content');
+});
+test('renders right slot content', function () {
+  var rightSlotContent = ___EmotionJSX("div", {
+    "data-testid": "right-slot"
+  }, "Right Slot Content");
+  getComponent({
+    slots: {
+      right: rightSlotContent
+    }
+  });
+  var rightSlot = screen.getByTestId('right-slot');
+  expect(rightSlot).toBeInTheDocument();
+  expect(rightSlot).toHaveTextContent('Right Slot Content');
 });

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();
 });