@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/AccordionItem/AccordionItem.js

@@ -1,77 +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 React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import { mergeProps, useButton } from 'react-aria';
+import { useAccordionItem } from '@react-aria/accordion';
+import { useFocusRing } from '@react-aria/focus';
+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 { useHover } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
-import { useAccordionItem } from '@react-aria/accordion';
-import { useButton } from '@react-aria/button';
-import { useFocusRing } from '@react-aria/focus';
-import { Text, Icon, Box } from '../../index';
-import { useStatusClasses } from '../../hooks';
 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",
@@ -84,18 +73,18 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
       px: '0',
       height: 'unset'
     },
-    variant: "accordionHeader",
+    variant: "variants.accordion.header",
     className: buttonClasses
   }, mergeProps(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), ___EmotionJSX(Text, {
     className: buttonClasses,
-    variant: "accordion.accordionTitle"
+    variant: "accordion.title"
   }, item.props.label), ___EmotionJSX(Box, {
     as: "span",
     ml: "5px"
   }, ___EmotionJSX(Icon, {
     icon: isOpen ? MenuUp : MenuDown
   }))), isOpen && ___EmotionJSX(Box, _extends({
-    variant: "accordion.accordionBody"
+    variant: "accordion.body"
   }, accordionRegionProps, regionProps, {
     className: itemClasses
   }), item.rendered));

package/lib/components/ArrayField/ArrayField.js

@@ -10,51 +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 { useLabel } from '@react-aria/label';
-import { mergeProps } from '@react-aria/utils';
+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 ArrayFieldItem from './ArrayFieldItem';
 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);
@@ -70,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) {
@@ -83,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 {
@@ -118,23 +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({
@@ -142,28 +131,21 @@ 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);
-
-    var isDisabled = (value || fieldValues).length === 1;
-    return ___EmotionJSX(ArrayFieldItem, _extends({
-      key: id,
-      id: id,
-      isDisabled: isDisabled,
-      fieldValue: fieldValue,
-      onComponentRender: onComponentRender,
-      onFieldValueChange: onFieldValueChange,
-      onFieldDelete: onFieldDelete,
-      renderField: renderField
-    }, otherFieldProps));
+      onComponentRender = _ref2.onComponentRender,
+      fieldValue = _ref2.fieldValue,
+      otherFieldProps = _objectWithoutProperties(_ref2, _excluded2);
+    return ___EmotionJSX(Box, {
+      as: "li",
+      mb: "xs",
+      key: id
+    }, renderedItem(id, fieldValue, otherFieldProps, onComponentRender));
   })), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), isLimitReached && ___EmotionJSX(FieldHelperText, {
     status: statuses.DEFAULT
   }, maxSizeText || "Maximum ".concat(maxSize, " items.")), !isLimitReached && ___EmotionJSX(Button, {
     "aria-label": "Add field",
-    variant: "text",
+    variant: "link",
     onPress: onFieldAdd,
     sx: {
       width: 'fit-content',
@@ -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/overlays';
+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) {

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

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import TextField from '../TextField';
 import ArrayField from './ArrayField';
 import ArrayFieldDeleteButton from './ArrayFieldDeleteButton';
-import TextField from '../TextField';
-import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 jest.mock('uuid', function () {
   return {
@@ -22,14 +22,12 @@ var defaultData = [{
 var defaultProps = {
   defaultValue: defaultData
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(ArrayField, _extends({
     label: "test-label"
   }, defaultProps, props)));
 };
-
 var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
   return ___EmotionJSX(TextField, _extends({
     label: "Text field",
@@ -48,7 +46,6 @@ var renderField = function renderField(id, value, onFieldValueChange, onFieldDel
     }
   }, otherFieldProps));
 };
-
 test('displays multiple text fields', function () {
   var onChange = jest.fn();
   getComponent({

package/lib/components/ArrayField/ArrayFieldDeleteButton.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import TrashIcon from 'mdi-react/TrashIcon';
+import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var ArrayFieldDeleteButton = function ArrayFieldDeleteButton(_ref) {
   var isDisabled = _ref.isDisabled,
-      id = _ref.id,
-      onDelete = _ref.onDelete;
+    id = _ref.id,
+    onDelete = _ref.onDelete;
   return ___EmotionJSX(IconButton, {
     onPress: function onPress() {
       return onDelete(id);
@@ -29,7 +28,6 @@ var ArrayFieldDeleteButton = function ArrayFieldDeleteButton(_ref) {
     color: "neutral.40"
   }));
 };
-
 ArrayFieldDeleteButton.propTypes = {
   id: PropTypes.number,
   isDisabled: PropTypes.bool,