@pingux/astro 2.238.0 → 2.240.0-alpha.0

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -1,27 +1,4 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-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 = ["items"],
-  _excluded2 = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isFilteringDisabled", "isNotFlippable", "isReadOnly", "isRequired", "label", "loadingState", "mode", "multivaluesProps", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
-function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
-import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { DismissButton, FocusScope } from 'react-aria';
 import { useFilter } from '@react-aria/i18n';
@@ -42,80 +19,65 @@ import ListBox from '../ListBox';
 import Popover from '../Popover/Popover';
 import BadgeLabelTooltip from './BadgeLabelTooltip';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context0, _listBoxRef$current2;
-  var initialItems = props.items,
-    otherProps = _objectWithoutProperties(props, _excluded);
-  var defaultSelectedKeys = otherProps.defaultSelectedKeys,
-    direction = otherProps.direction,
-    _otherProps$disabledK = otherProps.disabledKeys,
-    disabledKeys = _otherProps$disabledK === void 0 ? [] : _otherProps$disabledK,
-    containerProps = otherProps.containerProps,
-    hasAutoFocus = otherProps.hasAutoFocus,
-    hasNoStatusIndicator = otherProps.hasNoStatusIndicator,
-    helperText = otherProps.helperText,
-    customInputProps = otherProps.inputProps,
-    isDisabled = otherProps.isDisabled,
-    isFilteringDisabled = otherProps.isFilteringDisabled,
-    isNotFlippable = otherProps.isNotFlippable,
-    isReadOnly = otherProps.isReadOnly,
-    isRequired = otherProps.isRequired,
-    label = otherProps.label,
-    loadingState = otherProps.loadingState,
-    mode = otherProps.mode,
-    multivaluesProps = otherProps.multivaluesProps,
-    onBlur = otherProps.onBlur,
-    _onFocus = otherProps.onFocus,
-    onInputChange = otherProps.onInputChange,
-    onKeyDown = otherProps.onKeyDown,
-    _onKeyUp = otherProps.onKeyUp,
-    onLoadMore = otherProps.onLoadMore,
-    onLoadPrev = otherProps.onLoadPrev,
-    onOpenChange = otherProps.onOpenChange,
-    onSelectionChange = otherProps.onSelectionChange,
-    placeholder = otherProps.placeholder,
-    _otherProps$readOnlyK = otherProps.readOnlyKeys,
-    readOnlyKeys = _otherProps$readOnlyK === void 0 ? [] : _otherProps$readOnlyK,
-    selectedKeys = otherProps.selectedKeys,
-    scrollBoxProps = otherProps.scrollBoxProps,
-    status = otherProps.status,
-    others = _objectWithoutProperties(otherProps, _excluded2);
-  var hasCustomValue = mode === 'non-restrictive';
+const DefaultMultivaluesField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    items: initialItems,
+    ...otherProps
+  } = props;
+  const {
+    defaultSelectedKeys,
+    direction,
+    disabledKeys = [],
+    containerProps,
+    hasAutoFocus,
+    hasNoStatusIndicator,
+    helperText,
+    inputProps: customInputProps,
+    isDisabled,
+    isFilteringDisabled,
+    isNotFlippable,
+    isReadOnly,
+    isRequired,
+    label,
+    loadingState,
+    mode,
+    multivaluesProps,
+    onBlur,
+    onFocus,
+    onInputChange,
+    onKeyDown,
+    onKeyUp,
+    onLoadMore,
+    onLoadPrev,
+    onOpenChange,
+    onSelectionChange,
+    placeholder,
+    readOnlyKeys = [],
+    selectedKeys,
+    scrollBoxProps,
+    status,
+    ...others
+  } = otherProps;
+  const hasCustomValue = mode === 'non-restrictive';
   usePropWarning(props, 'disabled', 'isDisabled');
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    customItems = _useState2[0],
-    setCustomItems = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    filterString = _useState4[0],
-    setFilterString = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isOpen = _useState6[0],
-    setIsOpen = _useState6[1];
-  var _useState7 = useState(initialItems),
-    _useState8 = _slicedToArray(_useState7, 2),
-    items = _useState8[0],
-    setItems = _useState8[1];
-  var _useState9 = useState(''),
-    _useState0 = _slicedToArray(_useState9, 2),
-    activeDescendant = _useState0[0],
-    setActiveDescendant = _useState0[1];
-  var _useGetTheme = useGetTheme(),
-    themeState = _useGetTheme.themeState;
-  var isOnyx = themeState.isOnyx;
-  useEffect(function () {
+  const [customItems, setCustomItems] = useState([]);
+  const [filterString, setFilterString] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const [items, setItems] = useState(initialItems);
+  const [activeDescendant, setActiveDescendant] = useState('');
+  const {
+    themeState
+  } = useGetTheme();
+  const {
+    isOnyx
+  } = themeState;
+  useEffect(() => {
     if (mode !== 'non-restrictive') {
       setItems(initialItems);
     }
   }, [initialItems, mode]);
-  var toggleItems = function toggleItems(keys) {
-    var _inputRef$current;
-    setItems(_filterInstanceProperty(initialItems).call(initialItems, function (item) {
-      var _context;
-      return !_includesInstanceProperty(_context = _Array$from(keys)).call(_context, item.key);
-    }));
+  const toggleItems = keys => {
+    setItems(initialItems.filter(item => !Array.from(keys).includes(item.key)));
     if (onSelectionChange) onSelectionChange(keys);
     // Selecting an option removes it from the list, unmounting its row while
     // focusedKey still points at it — the virtualizer then holds DOM focus on
@@ -123,119 +85,97 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     // listbox stays open. Clear the stale focus and return it to the input,
     // matching the post-selection focus state of the Astro theme (UXE-9077).
     selectionManager.setFocusedKey(null);
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    inputRef.current?.focus();
   };
-  var _useFilter = useFilter({
-      sensitivity: 'base'
-    }),
-    contains = _useFilter.contains;
-  var defaultFilter = function defaultFilter(nodes) {
-    var _context2;
-    var arr = _filterInstanceProperty(_context2 = _Array$from(nodes)).call(_context2, function (item) {
-      return contains(item.textValue, filterString);
-    });
+  const {
+    contains
+  } = useFilter({
+    sensitivity: 'base'
+  });
+  const defaultFilter = nodes => {
+    const arr = Array.from(nodes).filter(item => contains(item.textValue, filterString));
     return arr;
   };
-  var state = useListState(_objectSpread(_objectSpread({}, otherProps), {}, {
-    items: _filterInstanceProperty(items).call(items, function (_ref) {
-      var key = _ref.key;
-      return !_includesInstanceProperty(readOnlyKeys).call(readOnlyKeys, key);
-    }),
+  const state = useListState({
+    ...otherProps,
+    items: items.filter(({
+      key
+    }) => !readOnlyKeys.includes(key)),
     onSelectionChange: toggleItems,
-    selectionMode: 'multiple'
-  }, !isFilteringDisabled && {
-    filter: defaultFilter
-  }));
-  var selectionManager = state.selectionManager;
-  var filteredItems = useMemo(function () {
-    return _Array$from(state.collection);
-  }, [state.collection, filterString]);
-  var close = function close() {
-    return setIsOpen(false);
-  };
-  var _useInputLoader = useInputLoader({
-      loadingState: loadingState,
-      inputValue: filterString
-    }),
-    isLoading = _useInputLoader.isLoading;
-  var closeBadgeRefs = useRef([]);
-  var inputWrapperRef = useRef();
-  var inputRef = useRef();
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return inputWrapperRef.current;
+    selectionMode: 'multiple',
+    ...(!isFilteringDisabled && {
+      filter: defaultFilter
+    })
   });
-  useImperativeHandle(ref, function () {
-    return inputRef.current;
+  const {
+    selectionManager
+  } = state;
+  const filteredItems = useMemo(() => Array.from(state.collection), [state.collection, filterString]);
+  const close = () => setIsOpen(false);
+  const {
+    isLoading
+  } = useInputLoader({
+    loadingState,
+    inputValue: filterString
   });
-  var listBoxRef = useRef();
-  var popoverRef = useRef();
+  const closeBadgeRefs = useRef([]);
+  const inputWrapperRef = useRef();
+  const inputRef = useRef();
+  /* istanbul ignore next */
+  useImperativeHandle(ref, () => inputWrapperRef.current);
+  useImperativeHandle(ref, () => inputRef.current);
+  const listBoxRef = useRef();
+  const popoverRef = useRef();
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState1 = useState(null),
-    _useState10 = _slicedToArray(_useState1, 2),
-    menuWidth = _useState10[0],
-    setMenuWidth = _useState10[1];
-  var onResize = useCallback(function () {
+  const [menuWidth, setMenuWidth] = useState(null);
+  const onResize = useCallback(() => {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
-      setMenuWidth("".concat(inputWrapperRef.current.offsetWidth + 2, "px"));
+      setMenuWidth(`${inputWrapperRef.current.offsetWidth + 2}px`);
     }
   }, [inputWrapperRef, isOpen, setMenuWidth]);
   useResizeObserver({
     ref: inputWrapperRef,
-    onResize: onResize
+    onResize
   });
   useLayoutEffect(onResize, [onResize]);
-  var menuWidthSx = {
+  const menuWidthSx = {
     width: menuWidth,
     minWidth: menuWidth
   };
-  var popoverState = useMemo(function () {
-    return {
-      isOpen: !state.collection.size ? false : isOpen,
-      close: close
-    };
-  }, [state.collection.size, isOpen, close]);
-  useEffect(function () {
+  const popoverState = useMemo(() => ({
+    isOpen: !state.collection.size ? false : isOpen,
+    close
+  }), [state.collection.size, isOpen, close]);
+  useEffect(() => {
     if (defaultSelectedKeys) {
       selectionManager.setSelectedKeys(defaultSelectedKeys);
-      setItems(function (prevItems) {
-        return _filterInstanceProperty(prevItems).call(prevItems, function (item) {
-          var _context3;
-          return !_includesInstanceProperty(_context3 = _Array$from(defaultSelectedKeys)).call(_context3, item.key);
-        });
-      });
+      setItems(prevItems => prevItems.filter(item => !Array.from(defaultSelectedKeys).includes(item.key)));
     }
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     if (selectedKeys) {
       selectionManager.setSelectedKeys(selectedKeys);
-      setItems(function (prevItems) {
-        return _filterInstanceProperty(prevItems).call(prevItems, function (item) {
-          var _context4;
-          return !_includesInstanceProperty(_context4 = _Array$from(selectedKeys)).call(_context4, item.key);
-        });
-      });
+      setItems(prevItems => prevItems.filter(item => !Array.from(selectedKeys).includes(item.key)));
     }
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     if (onOpenChange) onOpenChange(isOpen);
     if (!isOpen) setActiveDescendant('');
   }, [isOpen]);
-  var addNewBadgeFromInput = function addNewBadgeFromInput(inputValue) {
-    var _context5, _context6;
-    var key = _trimInstanceProperty(inputValue).call(inputValue);
+  const addNewBadgeFromInput = inputValue => {
+    const key = inputValue.trim();
     if (key === '') {
       return;
     }
     if (state.selectionManager.isSelected(key)) {
       return;
     }
-    selectionManager.setSelectedKeys(_concatInstanceProperty(_context5 = []).call(_context5, _Array$from(selectionManager.state.selectedKeys), [key]));
-    setCustomItems(_concatInstanceProperty(_context6 = []).call(_context6, customItems, [{
+    selectionManager.setSelectedKeys([].concat(Array.from(selectionManager.state.selectedKeys), [key]));
+    setCustomItems([].concat(customItems, [{
       id: key,
-      key: key,
+      key,
       name: key
     }]));
     setFilterString('');
@@ -243,9 +183,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   // there actually is a test for this, but coverage is not picking it up.
   /* istanbul ignore next */
-  var selectTheOnlyFilteredItem = function selectTheOnlyFilteredItem() {
-    var key = filteredItems[0].key;
-    if (!_includesInstanceProperty(disabledKeys).call(disabledKeys, key)) {
+  const selectTheOnlyFilteredItem = () => {
+    const key = filteredItems[0].key;
+    if (!disabledKeys.includes(key)) {
       selectionManager.toggleSelection(filteredItems[0].key);
       setFilterString('');
     }
@@ -253,7 +193,7 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   // there actually is a test for this, but coverage is not picking it up.
   /* istanbul ignore next */
-  var onBlurTextField = function onBlurTextField() {
+  const onBlurTextField = () => {
     if (hasCustomValue && filteredItems.length === 1) {
       selectTheOnlyFilteredItem();
     } else if (hasCustomValue) {
@@ -262,19 +202,19 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   /* istanbul ignore next */
-  var keyDown = function keyDown(e) {
+  const keyDown = e => {
     switch (e.key) {
       case 'Enter':
         {
           e.preventDefault();
           if (selectionManager.focusedKey) {
-            var key = selectionManager.focusedKey;
-            if (!_includesInstanceProperty(disabledKeys).call(disabledKeys, key)) {
+            const key = selectionManager.focusedKey;
+            if (!disabledKeys.includes(key)) {
               selectionManager.toggleSelection(selectionManager.focusedKey);
             }
           } else if (hasCustomValue && !selectionManager.focusedKey) {
-            var _key = e.target.value;
-            if (_key === '') {
+            const key = e.target.value;
+            if (key === '') {
               return;
             }
             addNewBadgeFromInput(e.target.value);
@@ -288,13 +228,13 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         }
       case 'ArrowDown':
         {
-          var nextKey = state.collection.getKeyAfter(selectionManager.focusedKey) || state.collection.getFirstKey();
+          const nextKey = state.collection.getKeyAfter(selectionManager.focusedKey) || state.collection.getFirstKey();
           if (nextKey) selectionManager.setFocusedKey(nextKey);
           break;
         }
       case 'ArrowUp':
         {
-          var prevKey = state.collection.getKeyBefore(selectionManager.focusedKey) || state.collection.getLastKey();
+          const prevKey = state.collection.getKeyBefore(selectionManager.focusedKey) || state.collection.getLastKey();
           if (prevKey) selectionManager.setFocusedKey(prevKey);
           break;
         }
@@ -309,9 +249,8 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
-  var deleteItem = function deleteItem(key, e) {
-    var _context7;
-    var activeBadgesKeys = _reduceInstanceProperty(_context7 = closeBadgeRefs.current).call(_context7, function (result, item) {
+  const deleteItem = (key, e) => {
+    const activeBadgesKeys = closeBadgeRefs.current.reduce((result, item) => {
       if (item) {
         result.push(item.dataset.item);
       }
@@ -320,16 +259,14 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     selectionManager.toggleSelection(key);
     if (e.pointerType !== 'keyboard') return;
     if (activeBadgesKeys.length > 1) {
-      var badgeIndex = _findIndexInstanceProperty(activeBadgesKeys).call(activeBadgesKeys, function (item) {
-        return item === key;
-      });
-      var nextFocusBadgeIndex = badgeIndex === activeBadgesKeys.length - 1 ? badgeIndex - 1 : badgeIndex;
+      const badgeIndex = activeBadgesKeys.findIndex(item => item === key);
+      const nextFocusBadgeIndex = badgeIndex === activeBadgesKeys.length - 1 ? badgeIndex - 1 : badgeIndex;
       closeBadgeRefs.current[nextFocusBadgeIndex].focus();
     } else {
       inputRef.current.focus();
     }
   };
-  var readOnlyFieldBadge = function readOnlyFieldBadge(key, name) {
+  const readOnlyFieldBadge = (key, name) => {
     return ___EmotionJSX(Badge, {
       key: key,
       label: name,
@@ -338,7 +275,7 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       tabIndex: 0
     });
   };
-  var readOnlyTextItem = function readOnlyTextItem(key, name) {
+  const readOnlyTextItem = (key, name) => {
     return ___EmotionJSX(Text, {
       key: key,
       role: "presentation",
@@ -349,33 +286,28 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         fontSize: 'sm',
         alignSelf: 'center',
         ':not(:last-of-type):after': {
-          content: "\",\xA0\""
+          content: '",\u00a0"'
         }
       }
     }, name);
   };
-  var readOnlyInputEntry = isReadOnly && (readOnlyKeys.length ? _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
-    var _context8, _context9;
-    var item = _findInstanceProperty(_context8 = _concatInstanceProperty(_context9 = []).call(_context9, initialItems, customItems)).call(_context8, function (el) {
-      return el.key === key;
-    });
+  const readOnlyInputEntry = isReadOnly && (readOnlyKeys.length ? readOnlyKeys.map(key => {
+    const item = [].concat(initialItems, customItems).find(el => el.key === key);
     if (item) {
       return readOnlyTextItem(item.key, item.name);
     }
     return null;
-  }) : _mapInstanceProperty(initialItems).call(initialItems, function (item) {
+  }) : initialItems.map(item => {
     return readOnlyTextItem(item.key, item.name);
   }));
-  var onyxReadOnlyInputEntry = isReadOnly && ___EmotionJSX(Box, {
+  const onyxReadOnlyInputEntry = isReadOnly && ___EmotionJSX(Box, {
     isRow: true,
     gap: "xs"
-  }, _mapInstanceProperty(initialItems).call(initialItems, function (item) {
+  }, initialItems.map(item => {
     return readOnlyFieldBadge(item.key, item.name);
   }));
-  var readOnlyItems = !isReadOnly && _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
-    var item = _findInstanceProperty(initialItems).call(initialItems, function (el) {
-      return el.key === key;
-    });
+  const readOnlyItems = !isReadOnly && readOnlyKeys.map(key => {
+    const item = initialItems.find(el => el.key === key);
     if (item) {
       return ___EmotionJSX(Badge, {
         key: item.key,
@@ -387,26 +319,21 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     return null;
   });
-  var multivaluesFieldBadge = function multivaluesFieldBadge(item, index) {
-    return ___EmotionJSX(BadgeLabelTooltip, {
-      key: "tooltip-".concat(item.key),
-      item: item,
-      index: index,
-      deleteItem: deleteItem,
-      closeBadgeRefs: closeBadgeRefs
-    });
-  };
-  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context0 = _Array$from(selectionManager.selectedKeys)).call(_context0, function (key, i) {
-    var _context1, _context10;
-    var item = _findInstanceProperty(_context1 = _concatInstanceProperty(_context10 = []).call(_context10, initialItems, customItems)).call(_context1, function (el) {
-      return el.key === key;
-    });
+  const multivaluesFieldBadge = (item, index) => ___EmotionJSX(BadgeLabelTooltip, {
+    key: `tooltip-${item.key}`,
+    item: item,
+    index: index,
+    deleteItem: deleteItem,
+    closeBadgeRefs: closeBadgeRefs
+  });
+  const selectedItems = ___EmotionJSX(React.Fragment, null, Array.from(selectionManager.selectedKeys).map((key, i) => {
+    const item = [].concat(initialItems, customItems).find(el => el.key === key);
     if (item) {
       return multivaluesFieldBadge(item, i);
     }
     return null;
   }));
-  var listbox = ___EmotionJSX(FocusScope, null, ___EmotionJSX(DismissButton, {
+  const listbox = ___EmotionJSX(FocusScope, null, ___EmotionJSX(DismissButton, {
     onDismiss: close
   }), ___EmotionJSX(ScrollBox, scrollBoxProps, ___EmotionJSX(ListBox, {
     ref: listBoxRef,
@@ -422,24 +349,23 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   })), ___EmotionJSX(DismissButton, {
     onDismiss: close
   }));
-  var visuallyHidden = ___EmotionJSX(VisuallyHidden, {
+  const visuallyHidden = ___EmotionJSX(VisuallyHidden, {
     id: "selectedKeysState"
-  }, "Selected options:", _Array$from(selectionManager.selectedKeys).join(' '));
+  }, "Selected options:", Array.from(selectionManager.selectedKeys).join(' '));
 
   // the reason we are using two different visually hiddens, rather than one that updates it's value
   // is because there are tests that break if an empty visually hidden is rendered in the TextField
-  var EmptyVisuallyHidden = function EmptyVisuallyHidden() {
+  const EmptyVisuallyHidden = () => {
     return ___EmotionJSX(VisuallyHidden, {
       id: "emptyKeysState"
     }, "Nothing Selected");
   };
-  var handleBlur = function handleBlur(e) {
-    var _inputWrapperRef$curr, _listBoxRef$current;
-    var relatedTarget = e.relatedTarget || document.activeElement;
+  const handleBlur = e => {
+    const relatedTarget = e.relatedTarget || document.activeElement;
 
     // Relates to [UIP-7515] to check if the
     // focused element is inside the listbox or input wrapper
-    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_listBoxRef$current = listBoxRef.current) !== null && _listBoxRef$current !== void 0 && _listBoxRef$current.contains(relatedTarget)) {
+    if (inputWrapperRef.current?.contains(relatedTarget) || listBoxRef.current?.contains(relatedTarget)) {
       return;
     }
     setIsOpen(false);
@@ -447,31 +373,33 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (onBlur) onBlur(e.nativeEvent);
     if (!hasCustomValue) setFilterString('');
   };
-  var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
-    containerProps: _objectSpread(_objectSpread({}, containerProps), {}, {
+  const inputProps = {
+    ...customInputProps,
+    containerProps: {
+      ...containerProps,
       variant: 'forms.input.multivaluesFieldContainer'
-    }),
+    },
     controlProps: {
       'aria-activedescendant': activeDescendant,
-      'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
+      'aria-controls': listBoxRef.current?.id,
       'aria-expanded': isOpen,
       role: 'combobox',
       ref: inputRef
     },
-    hasAutoFocus: hasAutoFocus,
-    hasNoStatusIndicator: hasNoStatusIndicator,
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    isRequired: isRequired,
-    label: label,
-    placeholder: placeholder,
+    hasAutoFocus,
+    hasNoStatusIndicator,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    label,
+    placeholder,
     wrapperProps: {
       ref: inputWrapperRef,
       variant: 'forms.input.multivaluesWrapper'
     },
-    status: status
-  });
-  var loader = ___EmotionJSX(Box, {
+    status
+  };
+  const loader = ___EmotionJSX(Box, {
     isRow: true,
     variant: "forms.comboBox.inputInContainerSlot"
   },
@@ -483,21 +411,19 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     value: setActiveDescendant
   }, ___EmotionJSX(Box, multivaluesProps, ___EmotionJSX(TextField, _extends({
     onBlur: handleBlur,
-    onChange: function onChange(e) {
+    onChange: e => {
       if (!isOpen) setIsOpen(true);
       setFilterString(e.target.value);
       if (onInputChange) onInputChange(e.target.value);
     },
-    onFocus: function onFocus(e) {
+    onFocus: e => {
       if (!isReadOnly) {
         setIsOpen(true);
       }
-      if (_onFocus) _onFocus(e.nativeEvent);
+      if (onFocus) onFocus(e.nativeEvent);
     },
     onKeyDown: keyDown,
-    onKeyUp: function onKeyUp(e) {
-      return _onKeyUp && _onKeyUp(e.nativeEvent);
-    },
+    onKeyUp: e => onKeyUp && onKeyUp(e.nativeEvent),
     "aria-describedby": selectionManager.selectedKeys.size > 0 ? 'selectedKeysState' : 'emptyKeysState',
     slots: {
       inContainer: loader,
@@ -526,13 +452,13 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     popoverRef: popoverRef,
     triggerRef: inputWrapperRef,
     state: popoverState,
-    placement: "".concat(direction, " end"),
+    placement: `${direction} end`,
     shouldFlip: !isNotFlippable,
     scrollRef: listBoxRef,
     sx: menuWidthSx
   }, listbox), ___EmotionJSX(EmptyVisuallyHidden, null)));
 });
-DefaultMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+DefaultMultivaluesField.propTypes = {
   /** The initial selected keys in the collection (uncontrolled). */
   defaultSelectedKeys: isIterableProp,
   /** Where the menu opens relative to its trigger. */
@@ -627,13 +553,17 @@ DefaultMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** @ignore */
   scrollBoxProps: PropTypes.shape({
     maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.number])
-  })
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-DefaultMultivaluesField.defaultProps = _objectSpread({
+  }),
+  ...statusPropTypes,
+  ...ariaAttributesBasePropTypes,
+  ...inputFieldAttributesBasePropTypes
+};
+DefaultMultivaluesField.defaultProps = {
   direction: 'bottom',
   isReadOnly: false,
   scrollBoxProps: {
     maxHeight: 300
-  }
-}, statusDefaultProp);
+  },
+  ...statusDefaultProp
+};
 export default DefaultMultivaluesField;