@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -1,92 +1,48 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
-
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _combobox = require("@react-aria/combobox");
-
-var _utils = require("@react-aria/utils");
-
-var _focus = require("@react-aria/focus");
-
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
 var _i18n = require("@react-aria/i18n");
-
-var _overlays = require("@react-aria/overlays");
-
-var _combobox2 = require("@react-stately/combobox");
-
+var _utils = require("@react-aria/utils");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
-
-var _ComboBox = _interopRequireDefault(require("../ComboBox"));
-
 var _hooks = require("../../hooks");
-
-var _isIterable = require("../../utils/devUtils/props/isIterable");
-
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
-
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _isIterable = require("../../utils/devUtils/props/isIterable");
+var _ComboBox = _interopRequireDefault(require("../ComboBox"));
 var _ListBox = _interopRequireDefault(require("../ListBox"));
-
 var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
-
 var _ScrollBox = _interopRequireDefault(require("../ScrollBox"));
-
 var _react2 = require("@emotion/react");
-
 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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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) { (0, _defineProperty2["default"])(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; }
-
 /**
  * Combines an input with a listbox for a filterable dropdown list.
  *
@@ -98,30 +54,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var ComboBoxField = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
-      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-
+    nonAriaProps = _getAriaAttributeProp.nonAriaProps;
   var comboBoxOptions = _objectSpread({
     autoFocus: hasAutoFocus,
     allowsCustomValue: hasAddOption || hasCustomValue,
@@ -135,7 +89,6 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     shouldFlip: !isNotFlippable,
     direction: direction
   }, nonAriaProps);
-
   var popoverRef = (0, _react.useRef)();
   var buttonRef = (0, _react.useRef)();
   var listBoxRef = (0, _react.useRef)();
@@ -143,47 +96,38 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var inputWrapperRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   (0, _react.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 (0, _concat["default"])(_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 = (0, _from["default"])(items || defaultItems);
-
     if (hasAddOption && selectedKey !== inputValue && arrayOfValues[arrayOfValues.length - 1].key === key) {
       newVal = inputValue;
     }
-
     if (onSelectionChange) onSelectionChange(newVal);
   };
-
   var _useFilter = (0, _i18n.useFilter)({
-    sensitivity: 'base'
-  }),
-      contains = _useFilter.contains;
-
-  var state = (0, _combobox2.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
+      sensitivity: 'base'
+    }),
+    contains = _useFilter.contains;
+  var state = (0, _reactStately.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     defaultItems: isReadOnly ? [] : defaultItems,
     items: items,
     onSelectionChange: hasAddOption || hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
@@ -192,52 +136,48 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useEffect)(function () {
     if (shouldShowAddOption) state.selectionManager.setFocusedKey(addOption);
   }, [shouldShowAddOption, inputValue, addOption, state.isOpen]);
-
-  var _useComboBox = (0, _combobox.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;
-
+  var _useComboBox = (0, _reactAria.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;
   var shouldFocusOnHover = listBoxProps.shouldFocusOnHover,
-      shouldSelectOnPressUp = listBoxProps.shouldSelectOnPressUp,
-      otherListBoxProps = (0, _objectWithoutProperties2["default"])(listBoxProps, _excluded2);
-
-  var _useOverlayPosition = (0, _overlays.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
+    shouldSelectOnPressUp = listBoxProps.shouldSelectOnPressUp,
+    otherListBoxProps = (0, _objectWithoutProperties2["default"])(listBoxProps, _excluded2);
+  var _useOverlayPosition = (0, _reactAria.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
   // it flips properly when it doesn't fit in the available space.
-
   /* istanbul ignore next */
-
-
   (0, _utils.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 = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      menuWidth = _useState2[0],
-      setMenuWidth = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    menuWidth = _useState2[0],
+    setMenuWidth = _useState2[1];
   var onResize = (0, _react.useCallback)(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -249,12 +189,10 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onResize: onResize
   });
   (0, _utils.useLayoutEffect)(onResize, [onResize]);
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth
   });
-
   var listBox = !isReadOnly && (0, _react2.jsx)(_PopoverContainer["default"], {
     hasNoArrow: true,
     isDismissable: true,
@@ -264,9 +202,9 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     placement: placement,
     ref: popoverRef,
     style: style
-  }, (0, _react2.jsx)(_focus.FocusScope, {
+  }, (0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true
-  }, (0, _react2.jsx)(_overlays.DismissButton, {
+  }, (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: state.close
   }), (0, _react2.jsx)(_ScrollBox["default"], scrollBoxProps, (0, _react2.jsx)(_ListBox["default"], (0, _extends2["default"])({
     ref: listBoxRef,
@@ -278,7 +216,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onLoadMore: onLoadMore,
     isFocusedOnHover: shouldFocusOnHover,
     isSelectedOnPressUp: shouldSelectOnPressUp
-  }, otherListBoxProps))), (0, _react2.jsx)(_overlays.DismissButton, {
+  }, otherListBoxProps))), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: state.close
   })));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ComboBox["default"], (0, _extends2["default"])({}, props, {
@@ -296,56 +234,42 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 ComboBoxField.propTypes = _objectSpread({
   /* Whether or not adding new options to the list is enabled. */
   hasAddOption: _propTypes["default"].bool,
-
   /** Whether the ComboBox allows a non-item matching input value to be set. */
   hasCustomValue: _propTypes["default"].bool,
-
   /** Whether the collection allows empty selection. */
   hasNoEmptySelection: _propTypes["default"].bool,
-
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.
    */
   disabledKeys: _isIterable.isIterableProp,
-
   /** The interaction required to display the ComboBox menu. */
   menuTrigger: _propTypes["default"].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["default"].bool,
-
   /** Where the ComboBox menu opens relative to its trigger. */
   direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
-
   /** Text rendered below the input. */
   helperText: _propTypes["default"].node,
-
   /** Determines the input status indicator and helper text styling. */
   status: _propTypes["default"].oneOf(['default', 'success', 'warning', 'error']),
-
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey: _propTypes["default"].string,
-
   /** The currently selected key in the collection (controlled). */
   selectedKey: _propTypes["default"].string,
-
   /**
    * Handler that is called when the selection changes.
    *
    * `(key: Key) => any`
    */
   onSelectionChange: _propTypes["default"].func,
-
   /** The list of ComboBox items (uncontrolled). */
   defaultItems: _isIterable.isIterableProp,
-
   /** The list of ComboBox items (controlled). */
   items: _isIterable.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.
@@ -355,79 +279,62 @@ ComboBoxField.propTypes = _objectSpread({
   onOpenChange: _propTypes["default"].func,
   loadingState: _propTypes["default"].oneOf((0, _values["default"])(_loadingStates["default"])),
   onLoadMore: _propTypes["default"].func,
-
   /** The default value of the ComboBox input (uncontrolled). */
   defaultInputValue: _propTypes["default"].string,
-
   /** The value of the ComboBox input (controlled). */
   inputValue: _propTypes["default"].string,
-
   /**
    * Handler that is called when the ComboBox input value changes.
    *
    * `(value: string) => void`
    */
   onInputChange: _propTypes["default"].func,
-
   /** Whether user input is required on the input before form submission. */
   isRequired: _propTypes["default"].bool,
-
   /** Whether the input is disabled. */
   isDisabled: _propTypes["default"].bool,
-
   /** Whether the input can be selected but not changed by the user. */
   isReadOnly: _propTypes["default"].bool,
-
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
-
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: _propTypes["default"].string,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: _propTypes["default"].string,
-
   /** Whether the element should receive focus on render. */
   hasAutoFocus: _propTypes["default"].bool,
-
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: _propTypes["default"].bool,
-
   /**
    * Handler that is called when the element receives focus.
    *
    * `(e: FocusEvent) => void`
    */
   onFocus: _propTypes["default"].func,
-
   /**
    * Handler that is called when the element loses focus.
    *
    * `(e: FocusEvent) => void`
    */
   onBlur: _propTypes["default"].func,
-
   /**
    * Handler that is called when the element's focus status changes.
    *
    * `(isFocused: boolean) => void`
    */
   onFocusChange: _propTypes["default"].func,
-
   /**
    * Handler that is called when a key is pressed.
    *
    * `(e: KeyboardEvent) => void`
    */
   onKeyDown: _propTypes["default"].func,
-
   /**
    * Handler that is called when a key is released.
    *
    * `(e: KeyboardEvent) => void`
    */
   onKeyUp: _propTypes["default"].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.
@@ -436,12 +343,10 @@ ComboBoxField.propTypes = _objectSpread({
    */
   defaultFilter: _propTypes["default"].func,
   // /** Props object that is spread directly into the ScrollBox element. */
-
   /** @ignore */
   scrollBoxProps: _propTypes["default"].shape({
     maxHeight: _propTypes["default"].string
   }),
-
   /** Props object that is spread directly into the ComboBoxInput element. */
   controlProps: _propTypes["default"].shape({
     onClick: _propTypes["default"].func