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

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -11,29 +11,27 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "isReadOnly", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
-    _excluded2 = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
+  _excluded2 = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 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 _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, { useCallback, useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { DismissButton, FocusScope, useComboBox, useOverlayPosition } from 'react-aria';
 import { useComboBoxState } from 'react-stately';
 import { useFilter } from '@react-aria/i18n';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
-import ComboBoxInput from '../ComboBox';
+import PropTypes from 'prop-types';
 import { usePropWarning } from '../../hooks';
-import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import ComboBoxInput from '../ComboBox';
 import ListBox from '../ListBox';
 import PopoverContainer from '../PopoverContainer';
 import ScrollBox from '../ScrollBox';
+
 /**
  * Combines an input with a listbox for a filterable dropdown list.
  *
@@ -43,34 +41,31 @@ import ScrollBox from '../ScrollBox';
  *
  * Props not specified are passed along to the underlying `TextField` component.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var hasAutoFocus = props.hasAutoFocus,
-      hasAddOption = props.hasAddOption,
-      hasCustomValue = props.hasCustomValue,
-      hasNoEmptySelection = props.hasNoEmptySelection,
-      selectedKey = props.selectedKey,
-      onSelectionChange = props.onSelectionChange,
-      initialDefaultItems = props.defaultItems,
-      initialItems = props.items,
-      loadingState = props.loadingState,
-      onLoadMore = props.onLoadMore,
-      inputValue = props.inputValue,
-      isReadOnly = props.isReadOnly,
-      menuTrigger = props.menuTrigger,
-      isNotFlippable = props.isNotFlippable,
-      direction = props.direction,
-      scrollBoxProps = props.scrollBoxProps,
-      controlProps = props.controlProps,
-      defaultFilter = props.defaultFilter,
-      status = props.status,
-      helperText = props.helperText,
-      others = _objectWithoutProperties(props, _excluded);
-
+    hasAddOption = props.hasAddOption,
+    hasCustomValue = props.hasCustomValue,
+    hasNoEmptySelection = props.hasNoEmptySelection,
+    selectedKey = props.selectedKey,
+    onSelectionChange = props.onSelectionChange,
+    initialDefaultItems = props.defaultItems,
+    initialItems = props.items,
+    loadingState = props.loadingState,
+    onLoadMore = props.onLoadMore,
+    inputValue = props.inputValue,
+    isReadOnly = props.isReadOnly,
+    menuTrigger = props.menuTrigger,
+    isNotFlippable = props.isNotFlippable,
+    direction = props.direction,
+    scrollBoxProps = props.scrollBoxProps,
+    controlProps = props.controlProps,
+    defaultFilter = props.defaultFilter,
+    status = props.status,
+    helperText = props.helperText,
+    others = _objectWithoutProperties(props, _excluded);
   var _getAriaAttributeProp = getAriaAttributeProps(others),
-      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-
+    nonAriaProps = _getAriaAttributeProp.nonAriaProps;
   var comboBoxOptions = _objectSpread({
     autoFocus: hasAutoFocus,
     allowsCustomValue: hasAddOption || hasCustomValue,
@@ -84,7 +79,6 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     shouldFlip: !isNotFlippable,
     direction: direction
   }, nonAriaProps);
-
   var popoverRef = useRef();
   var buttonRef = useRef();
   var listBoxRef = useRef();
@@ -92,47 +86,37 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputWrapperRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
   var shouldShowAddOption = hasAddOption && inputValue && selectedKey !== inputValue;
   var addOption = "ADD: ".concat(inputValue);
-
   var getItemsArr = function getItemsArr(initialArr) {
     if (initialArr && shouldShowAddOption) {
       var _context;
-
       return _concatInstanceProperty(_context = []).call(_context, initialArr, [{
         name: addOption,
         key: addOption
       }]);
     }
-
     return initialArr;
   };
-
   var defaultItems = getItemsArr(initialDefaultItems);
   var items = getItemsArr(initialItems);
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
     var newVal = key || selectedKey || '';
-
     var arrayOfValues = _Array$from(items || defaultItems);
-
     if (hasAddOption && selectedKey !== inputValue && arrayOfValues[arrayOfValues.length - 1].key === key) {
       newVal = inputValue;
     }
-
     if (onSelectionChange) onSelectionChange(newVal);
   };
-
   var _useFilter = useFilter({
-    sensitivity: 'base'
-  }),
-      contains = _useFilter.contains;
-
+      sensitivity: 'base'
+    }),
+    contains = _useFilter.contains;
   var state = useComboBoxState(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     defaultItems: isReadOnly ? [] : defaultItems,
     items: items,
@@ -142,52 +126,48 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     if (shouldShowAddOption) state.selectionManager.setFocusedKey(addOption);
   }, [shouldShowAddOption, inputValue, addOption, state.isOpen]);
-
   var _useComboBox = useComboBox(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
-    buttonRef: buttonRef,
-    popoverRef: popoverRef,
-    listBoxRef: listBoxRef,
-    inputRef: inputRef
-  }), state),
-      buttonProps = _useComboBox.buttonProps,
-      inputProps = _useComboBox.inputProps,
-      listBoxProps = _useComboBox.listBoxProps,
-      labelProps = _useComboBox.labelProps;
-
+      buttonRef: buttonRef,
+      popoverRef: popoverRef,
+      listBoxRef: listBoxRef,
+      inputRef: inputRef
+    }), state),
+    buttonProps = _useComboBox.buttonProps,
+    inputProps = _useComboBox.inputProps,
+    listBoxProps = _useComboBox.listBoxProps,
+    labelProps = _useComboBox.labelProps;
   var shouldFocusOnHover = listBoxProps.shouldFocusOnHover,
-      shouldSelectOnPressUp = listBoxProps.shouldSelectOnPressUp,
-      otherListBoxProps = _objectWithoutProperties(listBoxProps, _excluded2);
-
+    shouldSelectOnPressUp = listBoxProps.shouldSelectOnPressUp,
+    otherListBoxProps = _objectWithoutProperties(listBoxProps, _excluded2);
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: inputWrapperRef,
-    overlayRef: popoverRef,
-    scrollRef: listBoxRef,
-    placement: "".concat(direction, " end"),
-    shouldFlip: !isNotFlippable,
-    isOpen: state.isOpen,
-    onClose: state.close
-  }),
-      overlayProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement,
-      updatePosition = _useOverlayPosition.updatePosition; // Update position once the ListBox has rendered. This ensures that
+      targetRef: inputWrapperRef,
+      overlayRef: popoverRef,
+      scrollRef: listBoxRef,
+      placement: "".concat(direction, " end"),
+      shouldFlip: !isNotFlippable,
+      isOpen: state.isOpen,
+      onClose: state.close
+    }),
+    overlayProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
+
+  // Update position once the ListBox has rendered. This ensures that
   // it flips properly when it doesn't fit in the available space.
-
   /* istanbul ignore next */
-
-
   useLayoutEffect(function () {
     if (state.isOpen) {
       requestAnimationFrame(function () {
         updatePosition();
       });
     }
-  }, [state.isOpen, updatePosition]); // Measure the width of the input to inform the width of the menu (below).
+  }, [state.isOpen, updatePosition]);
 
+  // Measure the width of the input to inform the width of the menu (below).
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      menuWidth = _useState2[0],
-      setMenuWidth = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    menuWidth = _useState2[0],
+    setMenuWidth = _useState2[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -199,12 +179,10 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     onResize: onResize
   });
   useLayoutEffect(onResize, [onResize]);
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth
   });
-
   var listBox = !isReadOnly && ___EmotionJSX(PopoverContainer, {
     hasNoArrow: true,
     isDismissable: true,
@@ -231,7 +209,6 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, otherListBoxProps))), ___EmotionJSX(DismissButton, {
     onDismiss: state.close
   })));
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ComboBoxInput, _extends({}, props, {
     isOpen: state.isOpen,
     inputProps: inputProps,
@@ -247,56 +224,42 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
 ComboBoxField.propTypes = _objectSpread({
   /* Whether or not adding new options to the list is enabled. */
   hasAddOption: PropTypes.bool,
-
   /** Whether the ComboBox allows a non-item matching input value to be set. */
   hasCustomValue: PropTypes.bool,
-
   /** Whether the collection allows empty selection. */
   hasNoEmptySelection: PropTypes.bool,
-
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.
    */
   disabledKeys: isIterableProp,
-
   /** The interaction required to display the ComboBox menu. */
   menuTrigger: PropTypes.oneOf(['focus', 'input', 'manual']),
-
   /**
    * Whether the ComboBox menu is prevented from flipping directions when insufficient space is
    * available for the given `direction` placement.
    */
   isNotFlippable: PropTypes.bool,
-
   /** Where the ComboBox menu opens relative to its trigger. */
   direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-
   /** Text rendered below the input. */
   helperText: PropTypes.node,
-
   /** Determines the input status indicator and helper text styling. */
   status: PropTypes.oneOf(['default', 'success', 'warning', 'error']),
-
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey: PropTypes.string,
-
   /** The currently selected key in the collection (controlled). */
   selectedKey: PropTypes.string,
-
   /**
    * Handler that is called when the selection changes.
    *
    * `(key: Key) => any`
    */
   onSelectionChange: PropTypes.func,
-
   /** The list of ComboBox items (uncontrolled). */
   defaultItems: isIterableProp,
-
   /** The list of ComboBox items (controlled). */
   items: isIterableProp,
-
   /**
    * Method that is called when the open state of the menu changes.
    * Returns the new open state and the action that caused the opening of the menu.
@@ -306,79 +269,62 @@ ComboBoxField.propTypes = _objectSpread({
   onOpenChange: PropTypes.func,
   loadingState: PropTypes.oneOf(_Object$values(loadingStates)),
   onLoadMore: PropTypes.func,
-
   /** The default value of the ComboBox input (uncontrolled). */
   defaultInputValue: PropTypes.string,
-
   /** The value of the ComboBox input (controlled). */
   inputValue: PropTypes.string,
-
   /**
    * Handler that is called when the ComboBox input value changes.
    *
    * `(value: string) => void`
    */
   onInputChange: PropTypes.func,
-
   /** Whether user input is required on the input before form submission. */
   isRequired: PropTypes.bool,
-
   /** Whether the input is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the input can be selected but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: PropTypes.string,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
-
   /** Whether the element should receive focus on render. */
   hasAutoFocus: PropTypes.bool,
-
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: PropTypes.bool,
-
   /**
    * Handler that is called when the element receives focus.
    *
    * `(e: FocusEvent) => void`
    */
   onFocus: PropTypes.func,
-
   /**
    * Handler that is called when the element loses focus.
    *
    * `(e: FocusEvent) => void`
    */
   onBlur: PropTypes.func,
-
   /**
    * Handler that is called when the element's focus status changes.
    *
    * `(isFocused: boolean) => void`
    */
   onFocusChange: PropTypes.func,
-
   /**
    * Handler that is called when a key is pressed.
    *
    * `(e: KeyboardEvent) => void`
    */
   onKeyDown: PropTypes.func,
-
   /**
    * Handler that is called when a key is released.
    *
    * `(e: KeyboardEvent) => void`
    */
   onKeyUp: PropTypes.func,
-
   /**
    * Handler that determines the default filtering for items. If undefined, `contains` from
    * [useFilter](https://react-spectrum.adobe.com/react-aria/useFilter.html) is used.
@@ -387,12 +333,10 @@ ComboBoxField.propTypes = _objectSpread({
    */
   defaultFilter: PropTypes.func,
   // /** Props object that is spread directly into the ScrollBox element. */
-
   /** @ignore */
   scrollBoxProps: PropTypes.shape({
     maxHeight: PropTypes.string
   }),
-
   /** Props object that is spread directly into the ComboBoxInput element. */
   controlProps: PropTypes.shape({
     onClick: PropTypes.func