@zendeskgarden/react-dropdowns.legacy 9.12.3 → 9.12.4

package/dist/esm/elements/Autocomplete/Autocomplete.js

@@ -37,13 +37,12 @@ import '../../styled/multiselect/StyledMultiselectMoreAnchor.js';
 import useDropdownContext from '../../utils/useDropdownContext.js';
 import useFieldContext from '../../utils/useFieldContext.js';
 
-const Autocomplete = forwardRef((_ref, ref) => {
-  let {
-    children,
-    inputRef: controlledInputRef,
-    start,
-    ...props
-  } = _ref;
+const Autocomplete = forwardRef(({
+  children,
+  inputRef: controlledInputRef,
+  start,
+  ...props
+}, ref) => {
   const {
     popperReferenceElementRef,
     downshift: {
@@ -89,48 +88,45 @@ const Autocomplete = forwardRef((_ref, ref) => {
   useEffect(() => {
     setDropdownType('autocomplete');
   }, [setDropdownType]);
-  return React__default.createElement(Reference, null, _ref2 => {
-    let {
-      ref: popperReference
-    } = _ref2;
-    return React__default.createElement(StyledFauxInput, Object.assign({
-      isHovered: isContainerHovered,
-      isFocused: isContainerFocused,
-      tabIndex: null,
-      onKeyDown: onSelectKeyDown
-    }, selectProps, {
-      ref: selectRef => {
-        popperReference(selectRef);
-        mergeRefs([triggerRef, ref])(selectRef);
-        popperReferenceElementRef.current = selectRef;
+  return React__default.createElement(Reference, null, ({
+    ref: popperReference
+  }) => React__default.createElement(StyledFauxInput, Object.assign({
+    isHovered: isContainerHovered,
+    isFocused: isContainerFocused,
+    tabIndex: null,
+    onKeyDown: onSelectKeyDown
+  }, selectProps, {
+    ref: selectRef => {
+      popperReference(selectRef);
+      mergeRefs([triggerRef, ref])(selectRef);
+      popperReferenceElementRef.current = selectRef;
+    }
+  }), !!start && React__default.createElement(StyledFauxInput.StartIcon, {
+    isHovered: isHovered || isLabelHovered && !isOpen,
+    isFocused: isContainerFocused,
+    isDisabled: props.disabled
+  }, start), !isOpen && React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
+    $isHidden: !isOpen,
+    disabled: props.disabled,
+    onFocus: () => {
+      setIsFocused(true);
+    },
+    onBlur: () => {
+      setIsFocused(false);
+    },
+    onClick: e => {
+      if (isOpen) {
+        e.nativeEvent.preventDownshiftDefault = true;
       }
-    }), !!start && React__default.createElement(StyledFauxInput.StartIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled
-    }, start), !isOpen && React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
-      $isHidden: !isOpen,
-      disabled: props.disabled,
-      onFocus: () => {
-        setIsFocused(true);
-      },
-      onBlur: () => {
-        setIsFocused(false);
-      },
-      onClick: e => {
-        if (isOpen) {
-          e.nativeEvent.preventDownshiftDefault = true;
-        }
-      },
-      role: 'combobox',
-      ref: mergeRefs([inputRef, controlledInputRef || null])
-    })), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled,
-      isRotated: isOpen
-    }, React__default.createElement(SvgChevronDownStroke, null)));
-  });
+    },
+    role: 'combobox',
+    ref: mergeRefs([inputRef, controlledInputRef || null])
+  })), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
+    isHovered: isHovered || isLabelHovered && !isOpen,
+    isFocused: isContainerFocused,
+    isDisabled: props.disabled,
+    isRotated: isOpen
+  }, React__default.createElement(SvgChevronDownStroke, null))));
 });
 Autocomplete.displayName = 'Autocomplete';
 Autocomplete.propTypes = {

package/dist/esm/elements/Combobox/Combobox.js

@@ -12,19 +12,18 @@ import { MediaInput, VALIDATION } from '@zendeskgarden/react-forms';
 import { mergeRefs } from 'react-merge-refs';
 import useDropdownContext from '../../utils/useDropdownContext.js';
 
-const Combobox = forwardRef((_ref, ref) => {
-  let {
-    isCompact,
-    isBare,
-    disabled,
-    focusInset,
-    placeholder,
-    validation,
-    inputRef: inputRefProp = null,
-    start,
-    end,
-    ...props
-  } = _ref;
+const Combobox = forwardRef(({
+  isCompact,
+  isBare,
+  disabled,
+  focusInset,
+  placeholder,
+  validation,
+  inputRef: inputRefProp = null,
+  start,
+  end,
+  ...props
+}, ref) => {
   const {
     popperReferenceElementRef,
     downshift: {
@@ -77,10 +76,9 @@ const Combobox = forwardRef((_ref, ref) => {
   useEffect(() => {
     setDropdownType('combobox');
   }, [setDropdownType]);
-  return React__default.createElement(Reference, null, _ref2 => {
-    let {
-      ref: popperReference
-    } = _ref2;
+  return React__default.createElement(Reference, null, ({
+    ref: popperReference
+  }) => {
     const wrapperRefProp = element => {
       popperReference(element);
       mergeRefs([wrapperRef, ref])(element);

package/dist/esm/elements/Dropdown/Dropdown.js

@@ -38,11 +38,10 @@ const Dropdown = props => {
   } = useContext(ThemeContext);
   const hasMenuRef = useRef(false);
   const popperReferenceElementRef = useRef(null);
-  const customGetInputProps = (_ref, downshift) => {
-    let {
-      onKeyDown,
-      ...other
-    } = _ref;
+  const customGetInputProps = ({
+    onKeyDown,
+    ...other
+  }, downshift) => {
     return {
       onKeyDown: composeEventHandlers(onKeyDown, e => {
         const PREVIOUS_KEY = rtl ? KEY_CODES.RIGHT : KEY_CODES.LEFT;
@@ -70,12 +69,11 @@ const Dropdown = props => {
       ...other
     };
   };
-  const transformDownshift = _ref2 => {
-    let {
-      getInputProps,
-      getToggleButtonProps,
-      ...downshift
-    } = _ref2;
+  const transformDownshift = ({
+    getInputProps,
+    getToggleButtonProps,
+    ...downshift
+  }) => {
     return {
       getInputProps: p => getInputProps(customGetInputProps(p, downshift)),
       getToggleButtonProps: p => getToggleButtonProps({

package/dist/esm/elements/Fields/Label.js

@@ -11,12 +11,11 @@ import { Label as Label$1 } from '@zendeskgarden/react-forms';
 import useDropdownContext from '../../utils/useDropdownContext.js';
 import useFieldContext from '../../utils/useFieldContext.js';
 
-const Label = React__default.forwardRef((_ref, ref) => {
-  let {
-    onMouseEnter,
-    onMouseLeave,
-    ...other
-  } = _ref;
+const Label = React__default.forwardRef(({
+  onMouseEnter,
+  onMouseLeave,
+  ...other
+}, ref) => {
   const {
     downshift: {
       getLabelProps

package/dist/esm/elements/Menu/Items/AddItem.js

@@ -33,12 +33,11 @@ import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
 import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
 import useMenuContext from '../../../utils/useMenuContext.js';
 
-const AddItemComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    disabled,
-    ...props
-  } = _ref;
+const AddItemComponent = React__default.forwardRef(({
+  children,
+  disabled,
+  ...props
+}, ref) => {
   const {
     isCompact
   } = useMenuContext();

package/dist/esm/elements/Menu/Items/HeaderItem.js

@@ -30,11 +30,10 @@ import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
 import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
 import useMenuContext from '../../../utils/useMenuContext.js';
 
-const HeaderItem = React__default.forwardRef((_ref, ref) => {
-  let {
-    hasIcon,
-    ...other
-  } = _ref;
+const HeaderItem = React__default.forwardRef(({
+  hasIcon,
+  ...other
+}, ref) => {
   const {
     isCompact
   } = useMenuContext();

package/dist/esm/elements/Menu/Items/Item.js

@@ -35,16 +35,15 @@ import useDropdownContext from '../../../utils/useDropdownContext.js';
 import useMenuContext from '../../../utils/useMenuContext.js';
 import { ItemContext } from '../../../utils/useItemContext.js';
 
-const Item = React__default.forwardRef((_ref, forwardRef) => {
-  let {
-    value,
-    disabled,
-    isDanger,
-    component = StyledItem,
-    hasIcon,
-    children,
-    ...other
-  } = _ref;
+const Item = React__default.forwardRef(({
+  value,
+  disabled,
+  isDanger,
+  component = StyledItem,
+  hasIcon,
+  children,
+  ...other
+}, forwardRef) => {
   const {
     selectedItems,
     hasMenuRef,

package/dist/esm/elements/Menu/Items/NextItem.js

@@ -33,12 +33,11 @@ import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
 import useDropdownContext from '../../../utils/useDropdownContext.js';
 import useMenuContext from '../../../utils/useMenuContext.js';
 
-const NextItemComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    disabled,
-    ...props
-  } = _ref;
+const NextItemComponent = React__default.forwardRef(({
+  children,
+  disabled,
+  ...props
+}, ref) => {
   const {
     isCompact
   } = useMenuContext();
@@ -53,12 +52,11 @@ const NextItemComponent = React__default.forwardRef((_ref, ref) => {
     $isDisabled: disabled
   })), children);
 });
-const NextItem = React__default.forwardRef((_ref2, ref) => {
-  let {
-    value,
-    disabled,
-    ...props
-  } = _ref2;
+const NextItem = React__default.forwardRef(({
+  value,
+  disabled,
+  ...props
+}, ref) => {
   const {
     nextItemsHashRef,
     downshift: {

package/dist/esm/elements/Menu/Items/PreviousItem.js

@@ -33,12 +33,11 @@ import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
 import useDropdownContext from '../../../utils/useDropdownContext.js';
 import useMenuContext from '../../../utils/useMenuContext.js';
 
-const PreviousItemComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    disabled,
-    ...props
-  } = _ref;
+const PreviousItemComponent = React__default.forwardRef(({
+  children,
+  disabled,
+  ...props
+}, ref) => {
   const {
     isCompact
   } = useMenuContext();
@@ -53,12 +52,11 @@ const PreviousItemComponent = React__default.forwardRef((_ref, ref) => {
     $isDisabled: disabled
   })), children);
 });
-const PreviousItem = React__default.forwardRef((_ref2, ref) => {
-  let {
-    value,
-    disabled,
-    ...props
-  } = _ref2;
+const PreviousItem = React__default.forwardRef(({
+  value,
+  disabled,
+  ...props
+}, ref) => {
   const {
     previousIndexRef
   } = useDropdownContext();

package/dist/esm/elements/Menu/Menu.js

@@ -98,13 +98,12 @@ const Menu = forwardRef((props, menuRef) => {
     modifiers: popperModifiers
     ,
     eventsEnabled: !!(isOpen && eventsEnabled)
-  }, _ref => {
-    let {
-      ref,
-      style,
-      scheduleUpdate,
-      placement: currentPlacement
-    } = _ref;
+  }, ({
+    ref,
+    style,
+    scheduleUpdate,
+    placement: currentPlacement
+  }) => {
     let computedStyle = menuStyle;
     scheduleUpdateRef.current = scheduleUpdate;
     if ((isOpen || isVisible) && popperReferenceElementRef.current && popperReferenceElementRef.current.getBoundingClientRect) {

package/dist/esm/elements/Multiselect/Multiselect.js

@@ -40,17 +40,16 @@ import useDropdownContext from '../../utils/useDropdownContext.js';
 import useFieldContext from '../../utils/useFieldContext.js';
 import { REMOVE_ITEM_STATE_TYPE } from '../Dropdown/Dropdown.js';
 
-const Multiselect = React__default.forwardRef((_ref, ref) => {
-  let {
-    renderItem,
-    placeholder,
-    maxItems = 4,
-    renderShowMore,
-    inputRef: externalInputRef = null,
-    start,
-    onKeyDown,
-    ...props
-  } = _ref;
+const Multiselect = React__default.forwardRef(({
+  renderItem,
+  placeholder,
+  maxItems = 4,
+  renderShowMore,
+  inputRef: externalInputRef = null,
+  start,
+  onKeyDown,
+  ...props
+}, ref) => {
   const {
     popperReferenceElementRef,
     selectedItems = [],
@@ -240,64 +239,61 @@ const Multiselect = React__default.forwardRef((_ref, ref) => {
   useEffect(() => {
     setDropdownType('multiselect');
   }, [setDropdownType]);
-  return React__default.createElement(Reference, null, _ref2 => {
-    let {
-      ref: popperReference
-    } = _ref2;
-    return React__default.createElement(StyledFauxInput, getContainerProps({
-      ...selectProps,
-      isHovered: isContainerHovered,
-      isFocused: isContainerFocused,
-      ref: selectRef => {
-        popperReference(selectRef);
-        mergeRefs([triggerRef, popperReferenceElementRef, ref])(selectRef);
+  return React__default.createElement(Reference, null, ({
+    ref: popperReference
+  }) => React__default.createElement(StyledFauxInput, getContainerProps({
+    ...selectProps,
+    isHovered: isContainerHovered,
+    isFocused: isContainerFocused,
+    ref: selectRef => {
+      popperReference(selectRef);
+      mergeRefs([triggerRef, popperReferenceElementRef, ref])(selectRef);
+    }
+  }), !!start && React__default.createElement(StyledFauxInput.StartIcon, {
+    isHovered: isHovered || isLabelHovered && !isOpen,
+    isFocused: isContainerFocused,
+    isDisabled: props.disabled
+  }, start), React__default.createElement(StyledMultiselectItemsContainer, {
+    $isBare: props.isBare,
+    $isCompact: props.isCompact
+  }, items, React__default.createElement(StyledMultiselectInput, getInputProps({
+    disabled: props.disabled,
+    onFocus: () => {
+      setFocusedItem(undefined);
+    },
+    onClick: e => {
+      if (inputValue && inputValue.length > 0 && isOpen) {
+        e.nativeEvent.preventDownshiftDefault = true;
       }
-    }), !!start && React__default.createElement(StyledFauxInput.StartIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled
-    }, start), React__default.createElement(StyledMultiselectItemsContainer, {
-      $isBare: props.isBare,
-      $isCompact: props.isCompact
-    }, items, React__default.createElement(StyledMultiselectInput, getInputProps({
-      disabled: props.disabled,
-      onFocus: () => {
-        setFocusedItem(undefined);
-      },
-      onClick: e => {
-        if (inputValue && inputValue.length > 0 && isOpen) {
+    },
+    onKeyDown: e => {
+      if (!inputValue) {
+        if (themeContext.rtl && e.keyCode === KEY_CODES.RIGHT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
+          setFocusedItem(selectedItems[selectedItems.length - 1]);
+        } else if (!themeContext.rtl && e.keyCode === KEY_CODES.LEFT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
+          setFocusedItem(selectedItems[selectedItems.length - 1]);
+        } else if (e.keyCode === KEY_CODES.BACKSPACE && selectedItems.length > 0) {
+          setDownshiftState({
+            type: REMOVE_ITEM_STATE_TYPE,
+            selectedItem: selectedItems[selectedItems.length - 1]
+          });
           e.nativeEvent.preventDownshiftDefault = true;
+          e.preventDefault();
+          e.stopPropagation();
         }
-      },
-      onKeyDown: e => {
-        if (!inputValue) {
-          if (themeContext.rtl && e.keyCode === KEY_CODES.RIGHT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
-            setFocusedItem(selectedItems[selectedItems.length - 1]);
-          } else if (!themeContext.rtl && e.keyCode === KEY_CODES.LEFT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
-            setFocusedItem(selectedItems[selectedItems.length - 1]);
-          } else if (e.keyCode === KEY_CODES.BACKSPACE && selectedItems.length > 0) {
-            setDownshiftState({
-              type: REMOVE_ITEM_STATE_TYPE,
-              selectedItem: selectedItems[selectedItems.length - 1]
-            });
-            e.nativeEvent.preventDownshiftDefault = true;
-            e.preventDefault();
-            e.stopPropagation();
-          }
-        }
-      },
-      $isVisible: isFocused || inputValue || selectedItems.length === 0,
-      isCompact: props.isCompact,
-      role: 'combobox',
-      ref: mergeRefs([inputRef, externalInputRef]),
-      placeholder: selectedItems.length === 0 ? placeholder : undefined
-    }))), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled,
-      isRotated: isOpen
-    }, React__default.createElement(SvgChevronDownStroke, null)));
-  });
+      }
+    },
+    $isVisible: isFocused || inputValue || selectedItems.length === 0,
+    isCompact: props.isCompact,
+    role: 'combobox',
+    ref: mergeRefs([inputRef, externalInputRef]),
+    placeholder: selectedItems.length === 0 ? placeholder : undefined
+  }))), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
+    isHovered: isHovered || isLabelHovered && !isOpen,
+    isFocused: isContainerFocused,
+    isDisabled: props.disabled,
+    isRotated: isOpen
+  }, React__default.createElement(SvgChevronDownStroke, null))));
 });
 Multiselect.propTypes = {
   isCompact: PropTypes.bool,

package/dist/esm/elements/Select/Select.js

@@ -37,12 +37,11 @@ import '../../styled/multiselect/StyledMultiselectMoreAnchor.js';
 import useDropdownContext from '../../utils/useDropdownContext.js';
 import useFieldContext from '../../utils/useFieldContext.js';
 
-const Select = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    start,
-    ...props
-  } = _ref;
+const Select = React__default.forwardRef(({
+  children,
+  start,
+  ...props
+}, ref) => {
   const {
     popperReferenceElementRef,
     itemSearchRegistry,
@@ -145,42 +144,39 @@ const Select = React__default.forwardRef((_ref, ref) => {
   });
   const isContainerHovered = isLabelHovered && !isOpen;
   const isContainerFocused = isFocused || isOpen;
-  return React__default.createElement(Reference, null, _ref2 => {
-    let {
-      ref: popperReference
-    } = _ref2;
-    return React__default.createElement(StyledFauxInput, Object.assign({
-      isHovered: isContainerHovered,
-      isFocused: isContainerFocused
-    }, selectProps, {
-      role: "none",
-      ref: selectRef => {
-        popperReference(selectRef);
-        mergeRefs([triggerRef, ref, popperReferenceElementRef])(selectRef);
+  return React__default.createElement(Reference, null, ({
+    ref: popperReference
+  }) => React__default.createElement(StyledFauxInput, Object.assign({
+    isHovered: isContainerHovered,
+    isFocused: isContainerFocused
+  }, selectProps, {
+    role: "none",
+    ref: selectRef => {
+      popperReference(selectRef);
+      mergeRefs([triggerRef, ref, popperReferenceElementRef])(selectRef);
+    }
+  }), !!start && React__default.createElement(StyledFauxInput.StartIcon, {
+    isHovered: isHovered || isLabelHovered && !isOpen,
+    isFocused: isContainerFocused,
+    isDisabled: props.disabled
+  }, start), React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
+    readOnly: true,
+    $isHidden: true,
+    tabIndex: -1,
+    ref: hiddenInputRef,
+    value: '',
+    onClick: e => {
+      if (isOpen) {
+        e.nativeEvent.preventDownshiftDefault = true;
       }
-    }), !!start && React__default.createElement(StyledFauxInput.StartIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled
-    }, start), React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
-      readOnly: true,
-      $isHidden: true,
-      tabIndex: -1,
-      ref: hiddenInputRef,
-      value: '',
-      onClick: e => {
-        if (isOpen) {
-          e.nativeEvent.preventDownshiftDefault = true;
-        }
-      },
-      onKeyDown: onInputKeyDown
-    })), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
-      isHovered: isHovered || isLabelHovered && !isOpen,
-      isFocused: isContainerFocused,
-      isDisabled: props.disabled,
-      isRotated: isOpen
-    }, React__default.createElement(SvgChevronDownStroke, null)));
-  });
+    },
+    onKeyDown: onInputKeyDown
+  })), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
+    isHovered: isHovered || isLabelHovered && !isOpen,
+    isFocused: isContainerFocused,
+    isDisabled: props.disabled,
+    isRotated: isOpen
+  }, React__default.createElement(SvgChevronDownStroke, null))));
 });
 Select.displayName = 'Select';
 Select.propTypes = {

package/dist/esm/elements/Trigger/Trigger.js

@@ -33,12 +33,11 @@ import '../../styled/multiselect/StyledMultiselectItemWrapper.js';
 import '../../styled/multiselect/StyledMultiselectMoreAnchor.js';
 import useDropdownContext from '../../utils/useDropdownContext.js';
 
-const Trigger = _ref => {
-  let {
-    children,
-    refKey = 'ref',
-    ...triggerProps
-  } = _ref;
+const Trigger = ({
+  children,
+  refKey = 'ref',
+  ...triggerProps
+}) => {
   const {
     hasMenuRef,
     itemSearchRegistry,
@@ -155,24 +154,21 @@ const Trigger = _ref => {
       }
     });
   };
-  return React__default.createElement(Reference, null, _ref2 => {
-    let {
-      ref: popperReference
-    } = _ref2;
-    return React__default.createElement(React__default.Fragment, null, renderChildren(popperReference), React__default.createElement(StyledInput, getInputProps({
-      readOnly: true,
-      $isHidden: true,
-      tabIndex: -1,
-      ref: hiddenInputRef,
-      value: '',
-      onClick: e => {
-        if (isOpen) {
-          e.nativeEvent.preventDownshiftDefault = true;
-        }
-      },
-      onKeyDown: onInputKeyDown
-    })));
-  });
+  return React__default.createElement(Reference, null, ({
+    ref: popperReference
+  }) => React__default.createElement(React__default.Fragment, null, renderChildren(popperReference), React__default.createElement(StyledInput, getInputProps({
+    readOnly: true,
+    $isHidden: true,
+    tabIndex: -1,
+    ref: hiddenInputRef,
+    value: '',
+    onClick: e => {
+      if (isOpen) {
+        e.nativeEvent.preventDownshiftDefault = true;
+      }
+    },
+    onKeyDown: onInputKeyDown
+  }))));
 };
 Trigger.propTypes = {
   children: PropTypes.any,