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

package/lib/components/ColorField/ColorField.js

@@ -10,24 +10,22 @@ 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 _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { FocusScope, useOverlayPosition, useOverlayTrigger, useVisuallyHidden, mergeProps } from 'react-aria';
+import { FocusScope, mergeProps, useOverlayPosition, useOverlayTrigger, useVisuallyHidden } from 'react-aria';
 import { ChromePicker } from 'react-color';
 import { useOverlayTriggerState } from 'react-stately';
 import { useColorField } from '@react-aria/color';
 import { useColorFieldState } from '@react-stately/color';
-import { Box, Button, Input, FieldHelperText, Label } from '../../';
+import PropTypes from 'prop-types';
+import { Box, Button, FieldHelperText, Input, Label } from '../..';
+import useField from '../../hooks/useField';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import PopoverContainer from '../PopoverContainer';
-import statuses from '../../utils/devUtils/constants/statuses';
-import useField from '../../hooks/useField';
+
 /**
  * The Color Field component allows the user to pick a color and displays the chosen color.
  *
@@ -36,28 +34,23 @@ import useField from '../../hooks/useField';
  *
  * Using [React Color](https://casesandberg.github.io/react-color/) as a color picker.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
-
   var align = props.align,
-      buttonProps = props.buttonProps,
-      controlProps = props.controlProps,
-      direction = props.direction,
-      helperText = props.helperText,
-      label = props.label,
-      labelProps = props.labelProps,
-      imperativeOnChange = props.onChange,
-      status = props.status;
-
+    buttonProps = props.buttonProps,
+    controlProps = props.controlProps,
+    direction = props.direction,
+    helperText = props.helperText,
+    label = props.label,
+    labelProps = props.labelProps,
+    imperativeOnChange = props.onChange,
+    status = props.status;
   var _getAriaAttributeProp = getAriaAttributeProps(props),
-      ariaProps = _getAriaAttributeProp.ariaProps,
-      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-
+    ariaProps = _getAriaAttributeProp.ariaProps,
+    nonAriaProps = _getAriaAttributeProp.nonAriaProps;
   var colorRef = useRef();
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return colorRef.current;
   });
@@ -65,42 +58,36 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   var overlayRef = React.useRef();
   var state = useColorFieldState(nonAriaProps);
   var popoverState = useOverlayTriggerState({});
-
   var _useOverlayTrigger = useOverlayTrigger({
-    type: 'dialog'
-  }, popoverState, triggerRef),
-      triggerProps = _useOverlayTrigger.triggerProps,
-      overlayProps = _useOverlayTrigger.overlayProps;
-
+      type: 'dialog'
+    }, popoverState, triggerRef),
+    triggerProps = _useOverlayTrigger.triggerProps,
+    overlayProps = _useOverlayTrigger.overlayProps;
   var _useColorField = useColorField(nonAriaProps, state, colorRef),
-      raLabelProps = _useColorField.labelProps,
-      raInputProps = _useColorField.inputProps;
-
+    raLabelProps = _useColorField.labelProps,
+    raInputProps = _useColorField.inputProps;
   var _useVisuallyHidden = useVisuallyHidden(),
-      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var _useField = useField(_objectSpread(_objectSpread({}, nonAriaProps), {}, {
-    labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
-    controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
-  })),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+      labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
+      controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: triggerRef,
-    overlayRef: overlayRef,
-    placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
-    offset: 15,
-    isOpen: popoverState.isOpen,
-    onClose: popoverState.close,
-    shouldUpdatePosition: true
-  }),
-      positionProps = _useOverlayPosition.overlayProps;
-  /* istanbul ignore next */
-
+      targetRef: triggerRef,
+      overlayRef: overlayRef,
+      placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
+      offset: 15,
+      isOpen: popoverState.isOpen,
+      onClose: popoverState.close,
+      shouldUpdatePosition: true
+    }),
+    positionProps = _useOverlayPosition.overlayProps;
 
+  /* istanbul ignore next */
   var handleButtonPress = useCallback(function () {
     return popoverState.open();
   }, [triggerRef]);
@@ -111,7 +98,6 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [imperativeOnChange]);
   var getRgbaFromState = useCallback(function (_ref) {
     var _context2, _context3, _context4;
-
     var colorValue = _ref.colorValue;
     return _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
@@ -144,28 +130,21 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
 ColorField.propTypes = _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']),
-
   /** Text to display after the Color Field button. Useful for errors or other info. */
   helperText: PropTypes.node,
-
   /** The content to display as the label. */
   label: PropTypes.node,
-
   /** Pass a function to call every time the color is changed. [React Color onChange](https://casesandberg.github.io/react-color/#api-onChange)
    *
    * (color, event) => void;
    */
   onChange: PropTypes.func,
-
   /** Determines the helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** Color controls what color is active on the color picker. */
   value: PropTypes.string,
-
   /** Props object that is spread into the Button element. */
   buttonProps: PropTypes.shape({})
 }, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);

package/lib/components/ColorField/ColorField.stories.js

@@ -10,16 +10,13 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-
 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 _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useCallback, useState } from 'react';
-import { ColorField, OverlayProvider } from '../../';
+import { ColorField, OverlayProvider } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
-import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/ColorField',
@@ -75,21 +72,20 @@ export default {
 };
 export var Default = function Default(args) {
   var _useState = useState('rgba(127, 0, 127, 1)'),
-      _useState2 = _slicedToArray(_useState, 2),
-      color = _useState2[0],
-      setColor = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
   var handleChange = useCallback(function (_ref) {
     var _context, _context2, _context3;
-
     var rgb = _ref.rgb;
     var r = rgb.r,
-        b = rgb.b,
-        g = rgb.g,
-        a = rgb.a;
+      b = rgb.b,
+      g = rgb.g,
+      a = rgb.a;
     setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
   }, []);
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ColorField, _extends({
       value: color

package/lib/components/ColorField/ColorField.styles.js

@@ -7,13 +7,10 @@ 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 } from '../Button/Buttons.styles';
 import { neutral } from '../../styles/colors';
+import { defaultFocus } from '../Button/Buttons.styles';
 var container = {
   border: "1px solid ".concat(neutral['80']),
   '&:focus-visible': {

package/lib/components/ColorField/ColorField.test.js

@@ -15,13 +15,12 @@ var defaultProps = {
   label: testLabel,
   helperText: 'test-helper-text'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(ColorField, _extends({}, defaultProps, props)));
-}; // 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);
 test('renders ColorField component', function () {
   getComponent();

package/lib/components/ComboBox/ComboBox.styles.js

@@ -7,20 +7,15 @@ 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 { input as inputBase } from '../Input/Input.styles';
 var container = {
   position: 'relative'
 };
-
 var input = _objectSpread(_objectSpread({}, inputBase), {}, {
   pr: 'xl'
 });
-
 var inputInContainerSlot = {
   position: 'absolute',
   bg: 'transparent',

package/lib/components/ComboBox/ComboBoxInput.js

@@ -13,48 +13,43 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "isDisabled", "isReadOnly", "isOpen", "loadingState", "style", "inputWrapperRef", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import MenuDown from 'mdi-react/MenuDownIcon';
 import { FocusRing, mergeProps } from 'react-aria';
 import { PressResponder, useHover } from '@react-aria/interactions';
-import { Box, Button, Icon, Loader, TextField } from '../../';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import MenuDown from 'mdi-react/MenuDownIcon';
+import PropTypes from 'prop-types';
+import { Box, Button, Icon, Loader, TextField } from '../..';
 import { usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var controlProps = props.controlProps,
-      containerProps = props.containerProps,
-      hasAutoFocus = props.hasAutoFocus,
-      isDisabled = props.isDisabled,
-      isReadOnly = props.isReadOnly,
-      isOpen = props.isOpen,
-      loadingState = props.loadingState,
-      style = props.style,
-      inputWrapperRef = props.inputWrapperRef,
-      inputRef = props.inputRef,
-      inputProps = props.inputProps,
-      triggerRef = props.triggerRef,
-      triggerProps = props.triggerProps,
-      menuTrigger = props.menuTrigger,
-      onInputChange = props.onInputChange,
-      onLoadMore = props.onLoadMore,
-      onOpenChange = props.onOpenChange,
-      onSelectionChange = props.onSelectionChange,
-      wrapperProps = props.wrapperProps,
-      others = _objectWithoutProperties(props, _excluded);
-
+    containerProps = props.containerProps,
+    hasAutoFocus = props.hasAutoFocus,
+    isDisabled = props.isDisabled,
+    isReadOnly = props.isReadOnly,
+    isOpen = props.isOpen,
+    loadingState = props.loadingState,
+    style = props.style,
+    inputWrapperRef = props.inputWrapperRef,
+    inputRef = props.inputRef,
+    inputProps = props.inputProps,
+    triggerRef = props.triggerRef,
+    triggerProps = props.triggerProps,
+    menuTrigger = props.menuTrigger,
+    onInputChange = props.onInputChange,
+    onLoadMore = props.onLoadMore,
+    onOpenChange = props.onOpenChange,
+    onSelectionChange = props.onSelectionChange,
+    wrapperProps = props.wrapperProps,
+    others = _objectWithoutProperties(props, _excluded);
   var _useHover = useHover({}),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
@@ -62,18 +57,18 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
       sx: style,
       variant: 'forms.comboBox.container'
     }, hoverProps), containerProps)
-  }, mergeProps(inputProps, others)); // istanbul ignore next
-
+  }, mergeProps(inputProps, others));
 
+  // istanbul ignore next
   useImperativeHandle(ref, function () {
     return inputRef.current;
-  }); // START - minimum delay time for loading indicator = 500ms
+  });
 
+  // START - minimum delay time for loading indicator = 500ms
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showLoading = _useState2[0],
-      setShowLoading = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showLoading = _useState2[0],
+    setShowLoading = _useState2[1];
   var isLoading = loadingState === loadingStates.LOADING || loadingState === loadingStates.FILTERING;
   var inputValue = inputProps.value;
   var lastInputValue = useRef(inputValue);
@@ -84,9 +79,9 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
         timeout.current = _setTimeout(function () {
           setShowLoading(true);
         }, 500);
-      } // If user is typing, clear the timer and restart since it is a new request
-
+      }
 
+      // If user is typing, clear the timer and restart since it is a new request
       if (inputValue !== lastInputValue.current) {
         clearTimeout(timeout.current);
         timeout.current = _setTimeout(function () {
@@ -99,16 +94,16 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
       clearTimeout(timeout.current);
       timeout.current = null;
     }
-
     lastInputValue.current = inputValue;
-  }, [isLoading, showLoading, inputValue]); // END - minimum delay time for loading indicator = 500ms
+  }, [isLoading, showLoading, inputValue]);
+  // END - minimum delay time for loading indicator = 500ms
 
   usePropWarning(props, 'disabled', 'isDisabled');
-
   var button = !isReadOnly && ___EmotionJSX(Box, {
     isRow: true,
     variant: "forms.comboBox.inputInContainerSlot"
-  }, // Render loader after delay if filtering or loading
+  },
+  // Render loader after delay if filtering or loading
   showLoading && (isOpen || menuTrigger === 'manual' || loadingState === loadingStates.LOADING) && ___EmotionJSX(Loader, {
     variant: "loader.withinInput"
   }), ___EmotionJSX(PressResponder, {
@@ -126,7 +121,6 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
       transform: 'rotate(180deg)'
     } : null
   }))));
-
   return ___EmotionJSX(FocusRing, {
     within: true,
     isTextInput: true,