@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.4

package/lib/components/AccordionGroup/Accordion.styles.js

@@ -7,12 +7,9 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 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; }
-
-import { defaultFocus, base } from '../Button/Buttons.styles';
+import { base, defaultFocus } from '../Button/Buttons.styles';
 var title = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -40,7 +37,6 @@ var body = {
     display: 'flex'
   }
 };
-
 var header = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
@@ -57,7 +53,6 @@ var header = _objectSpread(_objectSpread({}, base), {}, {
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
-
 export default {
   title: title,
   accordion: accordion,

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -10,55 +10,48 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"],
-    _excluded2 = ["onFocus"];
+  _excluded2 = ["onFocus"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useTreeState } from 'react-stately';
 import { useAccordion } from '@react-aria/accordion';
 import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
-import { useTreeState } from 'react-stately';
-import { Box } from '../../index';
-import AccordionItem from '../AccordionItem';
 import { AccordionContext } from '../../context/AccordionContext';
+import { Box } from '../../index';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import AccordionItem from '../AccordionItem';
+
 /**
  * Console Warning: "Cannot update a component (`Unknown`)...`"
  * when using controlledExpanded prop is expected
  * and related to a known issue within React Stately.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
-
   var defaultExpandedKeys = props.defaultExpandedKeys,
-      expandedKeys = props.expandedKeys,
-      onExpandedChange = props.onExpandedChange,
-      others = _objectWithoutProperties(props, _excluded);
-
+    expandedKeys = props.expandedKeys,
+    onExpandedChange = props.onExpandedChange,
+    others = _objectWithoutProperties(props, _excluded);
   var state = useTreeState(props);
   var accordionRef = useRef();
-  /* `autoFocus: true` is what makes the initial focus only take one click vs two. */
 
+  /* `autoFocus: true` is what makes the initial focus only take one click vs two. */
   var _useAccordion = useAccordion(_objectSpread({
-    autoFocus: true
-  }, props), state, accordionRef),
-      accordionProps = _useAccordion.accordionProps;
-
+      autoFocus: true
+    }, props), state, accordionRef),
+    accordionProps = _useAccordion.accordionProps;
   delete accordionProps.onMouseDown;
-  /* Splicing out the onFocus function is what allows subsequent focuses to only take one click. */
 
+  /* Splicing out the onFocus function is what allows subsequent focuses to only take one click. */
   var onFocus = accordionProps.onFocus,
-      theseProps = _objectWithoutProperties(accordionProps, _excluded2);
-  /* istanbul ignore next */
-
+    theseProps = _objectWithoutProperties(accordionProps, _excluded2);
 
+  /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return accordionRef.current;
   });
@@ -77,22 +70,17 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
 AccordionGroup.propTypes = {
   /** Handler that is called when items are expanded or collapsed. */
   onExpandedChange: PropTypes.func,
-
   /** Item objects in the collection. */
   items: isIterableProp,
-
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.
    */
   disabledKeys: isIterableProp,
-
   /** The currently expanded keys in the collection (controlled). */
   expandedKeys: isIterableProp,
-
   /** The initial expanded keys in the collection (uncontrolled). */
   defaultExpandedKeys: isIterableProp,
-
   /** Id of the selected element */
   id: PropTypes.string
 };

package/lib/components/AccordionGroup/AccordionGroup.stories.js

@@ -2,11 +2,11 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { Item } from 'react-stately';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import Text from '../Text';
 import Button from '../Button';
+import Text from '../Text';
 import TextField from '../TextField';
-import AccordionGroup from '.';
 import AccordionReadme from './AccordionGroup.mdx';
+import AccordionGroup from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var itemArray = [{
   key: 't1',
@@ -102,10 +102,9 @@ export var Multiple = function Multiple() {
 };
 export var ControlledExpanded = function ControlledExpanded() {
   var _useState = useState(['t3']),
-      _useState2 = _slicedToArray(_useState, 2),
-      expandedKeys = _useState2[0],
-      setExpandedKeys = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandedKeys = _useState2[1];
   return (
     /*
      * itemArray = [

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -3,11 +3,11 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
+import { Box, Button, Menu, OverlayPanel, PopoverMenu, TextField } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import Text from '../Text';
-import AccordionGroup from '../AccordionGroup';
-import { OverlayPanel, TextField, Box, Menu, Button, PopoverMenu } from '../../index';
+import AccordionGroup from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
@@ -23,7 +23,6 @@ var items = [{
   text: 'empty'
 }];
 var selectedAccordionKeys = ['identityProvider', 'identityProvider1'];
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
@@ -47,7 +46,6 @@ var getComponent = function getComponent() {
     "data-testid": "testField"
   }))));
 };
-
 var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(OverlayPanel, {
@@ -66,7 +64,6 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
     "data-id": "third"
   }, ___EmotionJSX(Text, null, "Render me!")))));
 };
-
 var getComponentWithInput = function getComponentWithInput() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
@@ -83,7 +80,6 @@ var getComponentWithInput = function getComponentWithInput() {
     "data-testid": "testInput"
   }))));
 };
-
 var getComponentWithPopover = function getComponentWithPopover() {
   return render(___EmotionJSX(Box, {
     isRow: true,
@@ -114,7 +110,6 @@ var getComponentWithPopover = function getComponentWithPopover() {
     }, item.text);
   })));
 };
-
 var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordion() {
   return render(___EmotionJSX(Box, {
     alignItems: "center",
@@ -149,9 +144,9 @@ var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordi
   }, ___EmotionJSX("form", {
     "data-id": "connection-configuration-custom-form"
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "other text1"), ___EmotionJSX(Text, null, "another text1")))))));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent, {
   // landmark-unique rule conflicts with react-aria role definition
   rules: {
@@ -168,8 +163,9 @@ test('button press uses callback', function () {
   var buttons = screen.getAllByRole('button');
   var selectedItem = buttons[0];
   expect(selectedItem).not.toHaveClass('is-pressed');
-  expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
+  expect(onPress).not.toHaveBeenCalled();
 
+  // Hold down the button to see pressed styles
   fireEvent.mouseDown(selectedItem);
   fireEvent.mouseUp(selectedItem);
   expect(onPress).toHaveBeenCalled();
@@ -211,12 +207,10 @@ test('allows users to open and close accordion item with enter / space key', fun
 test('allows users to naviagte accordion headers through arrow keys', function () {
   getComponent();
   var buttons = screen.getAllByRole('button');
-
   var _buttons = _slicedToArray(buttons, 3),
-      firstItem = _buttons[0],
-      secondItem = _buttons[1],
-      thirdItem = _buttons[2];
-
+    firstItem = _buttons[0],
+    secondItem = _buttons[1],
+    thirdItem = _buttons[2];
   act(function () {
     firstItem.focus();
   });
@@ -245,12 +239,10 @@ test('allows users to naviagte accordion headers through arrow keys', function (
 test('allows users to navigate accordion headers through the tab key', function () {
   getComponent();
   var buttons = screen.getAllByRole('button');
-
   var _buttons2 = _slicedToArray(buttons, 3),
-      firstItem = _buttons2[0],
-      secondItem = _buttons2[1],
-      thirdItem = _buttons2[2];
-
+    firstItem = _buttons2[0],
+    secondItem = _buttons2[1],
+    thirdItem = _buttons2[2];
   act(function () {
     firstItem.focus();
   });

package/lib/components/AccordionItem/AccordionItem.js

@@ -1,76 +1,66 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["label", "children", "textValue", "containerProps", "buttonProps", "regionProps"];
-import React, { forwardRef, useRef, useContext, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import MenuDown from 'mdi-react/MenuDownIcon';
-import MenuUp from 'mdi-react/MenuUpIcon';
+import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton } from 'react-aria';
-import { Button as ThemeUIButton } from 'theme-ui';
 import { useAccordionItem } from '@react-aria/accordion';
-import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
-import { Text, Icon, Box } from '../../index';
-import { useStatusClasses } from '../../hooks';
+import { useHover } from '@react-aria/interactions';
+import MenuDown from 'mdi-react/MenuDownIcon';
+import MenuUp from 'mdi-react/MenuUpIcon';
+import PropTypes from 'prop-types';
+import { Button as ThemeUIButton } from 'theme-ui';
 import { AccordionContext } from '../../context/AccordionContext';
+import { useStatusClasses } from '../../hooks';
+import { Box, Icon, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      item = props.item;
-
+    item = props.item;
   var _item$props = item.props,
-      label = _item$props.label,
-      children = _item$props.children,
-      textValue = _item$props.textValue,
-      _item$props$container = _item$props.containerProps,
-      containerProps = _item$props$container === void 0 ? {} : _item$props$container,
-      _item$props$buttonPro = _item$props.buttonProps,
-      buttonProps = _item$props$buttonPro === void 0 ? {} : _item$props$buttonPro,
-      _item$props$regionPro = _item$props.regionProps,
-      regionProps = _item$props$regionPro === void 0 ? {} : _item$props$regionPro,
-      others = _objectWithoutProperties(_item$props, _excluded);
-
+    label = _item$props.label,
+    children = _item$props.children,
+    textValue = _item$props.textValue,
+    _item$props$container = _item$props.containerProps,
+    containerProps = _item$props$container === void 0 ? {} : _item$props$container,
+    _item$props$buttonPro = _item$props.buttonProps,
+    buttonProps = _item$props$buttonPro === void 0 ? {} : _item$props$buttonPro,
+    _item$props$regionPro = _item$props.regionProps,
+    regionProps = _item$props$regionPro === void 0 ? {} : _item$props$regionPro,
+    others = _objectWithoutProperties(_item$props, _excluded);
   var state = useContext(AccordionContext);
   var buttonRef = useRef();
-
   var _useAccordionItem = useAccordionItem(props, state, buttonRef),
-      accordionButtonProps = _useAccordionItem.buttonProps,
-      accordionRegionProps = _useAccordionItem.regionProps;
-
+    accordionButtonProps = _useAccordionItem.buttonProps,
+    accordionRegionProps = _useAccordionItem.regionProps;
   var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _useFocusRing = useFocusRing(),
-      focusProps = _useFocusRing.focusProps,
-      isFocusVisible = _useFocusRing.isFocusVisible;
-
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
   var isOpen = state.expandedKeys.has(item.key);
   var isDisabled = state.disabledKeys.has(item.key);
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return buttonRef.current;
   });
-
   var _useButton = useButton(props, buttonRef),
-      isPressed = _useButton.isPressed,
-      raButtonProps = _useButton.buttonProps;
-
+    isPressed = _useButton.isPressed,
+    raButtonProps = _useButton.buttonProps;
   var _useStatusClasses = useStatusClasses(className, {
-    isOpen: isOpen,
-    isDisabled: isDisabled,
-    isPressed: isPressed
-  }),
-      itemClasses = _useStatusClasses.classNames;
-
+      isOpen: isOpen,
+      isDisabled: isDisabled,
+      isPressed: isPressed
+    }),
+    itemClasses = _useStatusClasses.classNames;
   var _useStatusClasses2 = useStatusClasses(null, {
-    isHovered: isHovered,
-    isFocused: isFocusVisible,
-    isPressed: isPressed
-  }),
-      buttonClasses = _useStatusClasses2.classNames;
-
+      isHovered: isHovered,
+      isFocused: isFocusVisible,
+      isPressed: isPressed
+    }),
+    buttonClasses = _useStatusClasses2.classNames;
   var ariaLabel = props['aria-label'] || item.props.label;
   return ___EmotionJSX(Box, _extends({
     variant: "accordion.accordion",

package/lib/components/ArrayField/ArrayField.js

@@ -10,49 +10,43 @@ 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", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
-    _excluded2 = ["id", "onComponentRender", "fieldValue"];
-
+  _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; }
-
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
 import { mergeProps, useLabel } from 'react-aria';
+import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
-import { Box, Button, FieldHelperText, Label, Text } from '../../';
+import { Box, Button, FieldHelperText, Label, Text } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
-import statuses from '../../utils/devUtils/constants/statuses';
+
 /**
  * Displays array collections providing useful functions and
  * optimizations for arrays.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var ArrayField = function ArrayField(props) {
   var _context2;
-
   var addButtonLabel = props.addButtonLabel,
-      defaultValue = props.defaultValue,
-      value = props.value,
-      label = props.label,
-      helperText = props.helperText,
-      status = props.status,
-      onAdd = props.onAdd,
-      onChange = props.onChange,
-      onDelete = props.onDelete,
-      renderField = props.renderField,
-      labelProps = props.labelProps,
-      maxSize = props.maxSize,
-      maxSizeText = props.maxSizeText,
-      others = _objectWithoutProperties(props, _excluded);
-
+    defaultValue = props.defaultValue,
+    value = props.value,
+    label = props.label,
+    helperText = props.helperText,
+    status = props.status,
+    onAdd = props.onAdd,
+    onChange = props.onChange,
+    onDelete = props.onDelete,
+    renderField = props.renderField,
+    labelProps = props.labelProps,
+    maxSize = props.maxSize,
+    maxSizeText = props.maxSizeText,
+    others = _objectWithoutProperties(props, _excluded);
   var valueRef = React.useRef(value);
   valueRef.current = value;
   var onAddRef = React.useRef(onAdd);
@@ -68,12 +62,10 @@ var ArrayField = function ArrayField(props) {
       value: ''
     };
   }, []);
-
   var _useState = useState(defaultValue || [createEmptyField()]),
-      _useState2 = _slicedToArray(_useState, 2),
-      fieldValues = _useState2[0],
-      setFieldValues = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    fieldValues = _useState2[0],
+    setFieldValues = _useState2[1];
   var mapArrayFieldWithNewValue = useCallback(function (arrValues, newValue, fieldId) {
     return _mapInstanceProperty(arrValues).call(arrValues, function (fieldValue) {
       if (fieldValue.id === fieldId) {
@@ -81,17 +73,15 @@ var ArrayField = function ArrayField(props) {
           value: newValue
         });
       }
-
       return fieldValue;
     });
   }, []);
   var onFieldValueChange = useCallback(function (event, fieldId) {
-    var tempValue = event; // Checks if value received is a key or event
-
+    var tempValue = event;
+    // Checks if value received is a key or event
     if (typeof event !== 'string') {
       tempValue = event.target.value;
     }
-
     if (isControlled) {
       onChangeRef.current(mapArrayFieldWithNewValue(valueRef.current, tempValue, fieldId));
     } else {
@@ -116,31 +106,24 @@ var ArrayField = function ArrayField(props) {
     if (isControlled) {
       return onAddRef.current();
     }
-
     return setFieldValues(function (oldValues) {
       var _context;
-
       return _concatInstanceProperty(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
   }, [createEmptyField, isControlled]);
-
   var _useLabel = useLabel(_objectSpread({}, props)),
-      raLabelProps = _useLabel.labelProps;
-
+    raLabelProps = _useLabel.labelProps;
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
   var isDisabled = (value || fieldValues).length === 1;
   var renderedItem = useCallback(function (id, fieldValue, otherFieldProps, onComponentRender) {
     if (onComponentRender) {
       return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
     }
-
     return renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
   }, [onFieldValueChange, onFieldDelete, renderField, isDisabled]);
-
   var _getAriaAttributeProp = getAriaAttributeProps(others),
-      ariaProps = _getAriaAttributeProp.ariaProps,
-      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-
+    ariaProps = _getAriaAttributeProp.ariaProps,
+    nonAriaProps = _getAriaAttributeProp.nonAriaProps;
   return ___EmotionJSX(Box, nonAriaProps, ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
     children: label
   }))), ___EmotionJSX(Box, _extends({
@@ -148,10 +131,9 @@ var ArrayField = function ArrayField(props) {
     pl: "0"
   }, ariaProps), _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref2) {
     var id = _ref2.id,
-        onComponentRender = _ref2.onComponentRender,
-        fieldValue = _ref2.fieldValue,
-        otherFieldProps = _objectWithoutProperties(_ref2, _excluded2);
-
+      onComponentRender = _ref2.onComponentRender,
+      fieldValue = _ref2.fieldValue,
+      otherFieldProps = _objectWithoutProperties(_ref2, _excluded2);
     return ___EmotionJSX(Box, {
       as: "li",
       mb: "xs",
@@ -174,50 +156,37 @@ var ArrayField = function ArrayField(props) {
     color: "active"
   }, addButtonLabel)));
 };
-
 ArrayField.propTypes = _objectSpread({
   /** Label for add button */
   addButtonLabel: PropTypes.string,
-
   /** The default value for the array input field (uncontrolled). */
   defaultValue: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     value: PropTypes.string
   })),
-
   /** The default value of the array input field (controlled). */
   value: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     value: PropTypes.string
   })),
-
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** Props object that is spread directly into the label element. */
   labelProps: PropTypes.shape({}),
-
   /** Text to display before add button. Useful for errors or other info. */
   helperText: PropTypes.node,
-
   /** Callback for changing array field data  */
   onChange: PropTypes.func,
-
   /** Callback for adding new empty field */
   onAdd: PropTypes.func,
-
   /** Callback for deleting a field */
   onDelete: PropTypes.func,
-
   /** Render prop to display an input field */
   renderField: PropTypes.func,
-
   /** Determines the helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** Determines the maximum number of items */
   maxSize: isValidPositiveInt,
-
   /** Text to display when the maximum number of items is reached */
   maxSizeText: PropTypes.node
 }, ariaAttributesBasePropTypes);

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

@@ -6,19 +6,17 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { OverlayProvider } from 'react-aria';
 import { v4 as uuid } from 'uuid';
-import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../../';
+import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../..';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -73,8 +71,7 @@ var defaultData = [{
   value: 'World'
 }];
 export var Uncontrolled = function Uncontrolled(_ref) {
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(ArrayField, _extends({
     defaultValue: defaultData,
     labelProps: {
@@ -190,24 +187,19 @@ export var Controlled = function Controlled() {
       }, "Turquoise")));
     }
   };
-
   var _React$useState = React.useState(defaultDataSelectField),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      fieldValues = _React$useState2[0],
-      setFieldValues = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    fieldValues = _React$useState2[0],
+    setFieldValues = _React$useState2[1];
   var handleOnChange = function handleOnChange(values) {
     setFieldValues(values);
   };
-
   var handleOnAdd = function handleOnAdd() {
     setFieldValues(function (oldValues) {
       var _context;
-
       return _concatInstanceProperty(_context = []).call(_context, oldValues, [defaultEmptyField]);
     });
   };
-
   var handleOnDelete = function handleOnDelete(fieldId) {
     setFieldValues(function (oldValues) {
       return _filterInstanceProperty(oldValues).call(oldValues, function (_ref2) {
@@ -216,7 +208,6 @@ export var Controlled = function Controlled() {
       });
     });
   };
-
   return ___EmotionJSX(ArrayField, {
     value: fieldValues,
     helperText: "Here is some helpful text...",
@@ -229,8 +220,7 @@ export var Controlled = function Controlled() {
   });
 };
 export var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref3) {
-  var args = _extends({}, _ref3);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
   return ___EmotionJSX(ArrayField, _extends({
     defaultValue: defaultData,
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {