@pingux/astro 2.92.1 → 2.93.0-alpha.1

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -30,7 +30,7 @@ var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _react2 = require("@emotion/react");
-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 _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; }
@@ -52,6 +52,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     labelProps = props.labelProps,
     maxSize = props.maxSize,
     maxSizeText = props.maxSizeText,
+    slots = props.slots,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var valueRef = _react["default"].useRef(value);
   valueRef.current = value;
@@ -121,6 +122,9 @@ var ArrayField = /*#__PURE__*/(0, _react.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 = (0, _react.useCallback)(function (id, fieldValue, otherFieldProps, onComponentRender, labelId) {
     if (onComponentRender) {
       return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps);
@@ -154,7 +158,10 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     status: status
   }, helperText), isLimitReached && (0, _react2.jsx)(_.FieldHelperText, {
     status: _statuses["default"].DEFAULT
-  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), !isLimitReached && (0, _react2.jsx)(_.Button, {
+  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), shouldShowBottomBar && (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    gap: "md"
+  }, (slots === null || slots === void 0 ? void 0 : slots.left) && (slots === null || slots === void 0 ? void 0 : slots.left), !isLimitReached && (0, _react2.jsx)(_.Button, {
     "aria-label": "Add field",
     variant: "link",
     onPress: onFieldAdd,
@@ -165,7 +172,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, (0, _react2.jsx)(_.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/cjs/components/ArrayField/ArrayField.stories.d.ts

@@ -9,3 +9,6 @@ export declare const WithLimitedItemsNumber: StoryFn<ArrayFieldProps>;
 export declare const Customizations: ({ ...args }: {
     [x: string]: any;
 }) => React.JSX.Element;
+export declare const WithBothSlots: ({ ...args }: {
+    [x: string]: any;
+}) => React.JSX.Element;

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLimitedItemsNumber = exports.Uncontrolled = exports.Customizations = exports.Controlled = void 0;
+exports["default"] = exports.WithLimitedItemsNumber = exports.WithBothSlots = exports.Uncontrolled = exports.Customizations = exports.Controlled = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -318,4 +318,67 @@ var Customizations = function Customizations(_ref5) {
     }
   }, args));
 };
-exports.Customizations = Customizations;
+exports.Customizations = Customizations;
+var WithBothSlots = function WithBothSlots(_ref6) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref6), _ref6));
+  var LeftSlot = (0, _react2.jsx)(_index.Button, {
+    "aria-label": "Add field",
+    variant: "link",
+    sx: {
+      width: 'fit-content',
+      mt: 'xs'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "label",
+    color: "active"
+  }, "Left slot"));
+  var RightSlot = (0, _react2.jsx)(_index.Button, {
+    "aria-label": "Add field",
+    variant: "link",
+    sx: {
+      width: 'fit-content',
+      mt: 'xs'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "label",
+    color: "active"
+  }, "Right slot"));
+  return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
+    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 (0, _react2.jsx)(_index.Box, {
+        width: "400px"
+      }, (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
+        "aria-label": "Text field",
+        value: fieldValue,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps)));
+    }
+  }, args));
+};
+exports.WithBothSlots = WithBothSlots;

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

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

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';