@zendeskgarden/react-dropdowns 9.12.3 → 9.12.5

package/dist/index.cjs.js

@@ -83,7 +83,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$w = 'dropdowns.combobox.label';
 const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
@@ -92,7 +92,7 @@ const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
 const COMPONENT_ID$v = 'dropdowns.combobox.hint';
 const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
@@ -101,7 +101,7 @@ const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
 const COMPONENT_ID$u = 'dropdowns.combobox.message';
 const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
@@ -115,7 +115,7 @@ const sizeStyles$b = props => {
 };
 const StyledCombobox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
@@ -124,7 +124,7 @@ const StyledCombobox = styled__default.default.div.attrs({
 const COMPONENT_ID$s = 'dropdowns.combobox.container';
 const StyledContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
@@ -133,7 +133,7 @@ const StyledContainer = styled__default.default.div.attrs({
 const COMPONENT_ID$r = 'dropdowns.combobox.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
@@ -142,7 +142,7 @@ const StyledField = styled__default.default.div.attrs({
 const COMPONENT_ID$q = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
@@ -154,10 +154,9 @@ const StyledFloatingListbox = styled__default.default.div.attrs({
 }), reactTheming.componentStyles);
 
 const COMPONENT_ID$p = 'dropdowns.combobox.input';
-const colorStyles$a = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$a = ({
+  theme
+}) => {
   const placeholderColor = reactTheming.getColor({
     theme,
     variable: 'foreground.disabled'
@@ -180,7 +179,7 @@ const sizeStyles$a = props => {
 };
 const StyledInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"
@@ -193,21 +192,20 @@ const sizeStyles$9 = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
 })(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$9, reactTheming.componentStyles);
 
 const COMPONENT_ID$n = 'dropdowns.combobox.trigger';
-const colorStyles$9 = _ref => {
-  let {
-    theme,
-    $validation,
-    $isBare,
-    $isLabelHovered,
-    $focusInset
-  } = _ref;
+const colorStyles$9 = ({
+  theme,
+  $validation,
+  $isBare,
+  $isLabelHovered,
+  $focusInset
+}) => {
   const foregroundColor = reactTheming.getColor({
     theme,
     variable: 'foreground.default'
@@ -303,18 +301,17 @@ const sizeStyles$8 = props => {
 };
 const StyledTrigger = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
 })(["overflow-y:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:", ";border-radius:", ";cursor:", ";box-sizing:border-box;", ";&:focus{outline:none;}", ";&[aria-disabled='true']{cursor:default;}", ";"], props => props.$isBare && !props.$isMultiselectable ? 'visible' : 'auto', props => props.$isBare ? 'none' : props.theme.borders.sm, props => props.$isBare ? '0' : props.theme.borderRadii.md, props => !props.$isAutocomplete && props.$isEditable ? 'text' : 'pointer', sizeStyles$8, colorStyles$9, reactTheming.componentStyles);
 
 const COMPONENT_ID$m = 'dropdowns.combobox.input_icon';
-const colorStyles$8 = _ref => {
-  let {
-    theme,
-    $isLabelHovered
-  } = _ref;
+const colorStyles$8 = ({
+  theme,
+  $isLabelHovered
+}) => {
   const options = {
     theme,
     variable: 'foreground.subtle'
@@ -349,19 +346,18 @@ const sizeStyles$7 = props => {
 };
 const StyledInputIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
 })(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$7, colorStyles$8, reactTheming.componentStyles);
 
 const COMPONENT_ID$l = 'dropdowns.combobox.option';
-const colorStyles$7 = _ref => {
-  let {
-    theme,
-    $isActive,
-    $type
-  } = _ref;
+const colorStyles$7 = ({
+  theme,
+  $isActive,
+  $type
+}) => {
   let backgroundColor;
   let boxShadow;
   if ($isActive && $type !== 'group' && $type !== 'header') {
@@ -404,7 +400,7 @@ const sizeStyles$6 = props => {
 };
 const StyledOption = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
@@ -413,7 +409,7 @@ const StyledOption = styled__default.default.li.attrs({
 const COMPONENT_ID$k = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
@@ -422,17 +418,16 @@ const StyledOptionContent = styled__default.default.div.attrs({
 const COMPONENT_ID$j = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
 })(["margin:0;padding:0;list-style-type:none;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$i = 'dropdowns.combobox.separator';
-const colorStyles$6 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$6 = ({
+  theme
+}) => {
   const backgroundColor = reactTheming.getColor({
     theme,
     variable: 'border.subtle'
@@ -446,7 +441,7 @@ const sizeStyles$5 = props => {
 };
 const StyledListboxSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
@@ -460,19 +455,18 @@ const sizeStyles$4 = props => {
 };
 const StyledListbox = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
 })(["overflow-y:auto;list-style-type:none;", ";&&&{display:block;}", ":first-child ", " ", ":first-child ", "[role='none']:first-child{display:none;}"], sizeStyles$4, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
 
 const COMPONENT_ID$g = 'dropdowns.combobox.option.icon';
-const colorStyles$5 = _ref => {
-  let {
-    theme,
-    $isDisabled,
-    $type
-  } = _ref;
+const colorStyles$5 = ({
+  theme,
+  $isDisabled,
+  $type
+}) => {
   let variable;
   if ($isDisabled) {
     variable = 'foreground.disabled';
@@ -497,18 +491,17 @@ const sizeStyles$3 = props => {
 };
 const StyledOptionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
 })(["flex-shrink:0;", ";", ";", ";"], sizeStyles$3, colorStyles$5, reactTheming.componentStyles);
 
 const COMPONENT_ID$f = 'dropdowns.combobox.option.meta';
-const colorStyles$4 = _ref => {
-  let {
-    theme,
-    $isDisabled
-  } = _ref;
+const colorStyles$4 = ({
+  theme,
+  $isDisabled
+}) => {
   const variable = $isDisabled ? 'foreground.disabled' : 'foreground.subtle';
   const color = reactTheming.getColor({
     theme,
@@ -523,28 +516,26 @@ const sizeStyles$2 = props => {
 };
 const StyledOptionMeta = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
 })(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$2, colorStyles$4, reactTheming.componentStyles);
 
 const COMPONENT_ID$e = 'dropdowns.combobox.option.selection_icon';
-const colorStyles$3 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$3 = ({
+  theme
+}) => {
   const color = reactTheming.getColor({
     theme,
     variable: 'foreground.primary'
   });
   return styled.css(["color:", ";"], color);
 };
-const sizeStyles$1 = _ref2 => {
-  let {
-    theme,
-    $isCompact
-  } = _ref2;
+const sizeStyles$1 = ({
+  theme,
+  $isCompact
+}) => {
   const size = theme.iconSizes.sm;
   const position = `${theme.space.base * 3.5}px`;
   const top = polished.math(`(${getMinHeight({
@@ -556,18 +547,17 @@ const sizeStyles$1 = _ref2 => {
 };
 const StyledOptionSelectionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledOptionSelectionIcon",
   componentId: "sc-12wj24m-0"
 })(["position:absolute;", ";", ";", ";"], sizeStyles$1, colorStyles$3, reactTheming.componentStyles);
 
 const COMPONENT_ID$d = 'dropdowns.combobox.option.type_icon';
-const colorStyles$2 = _ref => {
-  let {
-    theme,
-    $type
-  } = _ref;
+const colorStyles$2 = ({
+  theme,
+  $type
+}) => {
   const opacity = $type && $type !== 'danger' ? 1 : 0;
   let color;
   if ($type === 'add') {
@@ -599,7 +589,7 @@ const sizeStyles = props => {
 };
 const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
@@ -608,7 +598,7 @@ const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon
 const COMPONENT_ID$c = 'dropdowns.combobox.tag';
 const StyledTag = styled__default.default(reactTags.Tag).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
@@ -618,11 +608,10 @@ const StyledTag = styled__default.default(reactTags.Tag).attrs({
 }), polished.hideVisually(), reactTheming.componentStyles);
 
 const COMPONENT_ID$b = 'dropdowns.combobox.value';
-const colorStyles$1 = _ref => {
-  let {
-    theme,
-    $isPlaceholder
-  } = _ref;
+const colorStyles$1 = ({
+  theme,
+  $isPlaceholder
+}) => {
   const foregroundColor = $isPlaceholder && reactTheming.getColor({
     theme,
     variable: 'foreground.disabled'
@@ -631,7 +620,7 @@ const colorStyles$1 = _ref => {
 };
 const StyledValue = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -643,10 +632,9 @@ const StyledValue = styled__default.default.div.attrs({
 }, sizeStyles$a, colorStyles$1, reactTheming.componentStyles);
 
 const COMPONENT_ID$a = 'dropdowns.combobox.tags_button';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles = ({
+  theme
+}) => {
   const color = reactTheming.getColor({
     theme,
     variable: 'foreground.primary'
@@ -656,7 +644,7 @@ const colorStyles = _ref => {
 const StyledTagsButton = styled__default.default(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
@@ -665,7 +653,7 @@ const StyledTagsButton = styled__default.default(StyledValue).attrs({
 const COMPONENT_ID$9 = 'dropdowns.menu';
 const StyledMenu = styled__default.default(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
@@ -678,7 +666,7 @@ const StyledMenu = styled__default.default(StyledListbox).attrs({
 const COMPONENT_ID$8 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
@@ -687,7 +675,7 @@ const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs(
 const COMPONENT_ID$7 = 'dropdowns.menu.item';
 const StyledItem = styled__default.default(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
@@ -696,7 +684,7 @@ const StyledItem = styled__default.default(StyledOption).attrs({
 const COMPONENT_ID$6 = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
@@ -705,7 +693,7 @@ const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
 const COMPONENT_ID$5 = 'dropdowns.menu.item_anchor';
 const StyledItemAnchor = styled__default.default(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.5',
   as: 'a'
 }).withConfig({
   displayName: "StyledItemAnchor",
@@ -715,7 +703,7 @@ const StyledItemAnchor = styled__default.default(StyledOption).attrs({
 const COMPONENT_ID$4 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
@@ -724,7 +712,7 @@ const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
 const COMPONENT_ID$3 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
@@ -733,7 +721,7 @@ const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
 const COMPONENT_ID$2 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
@@ -742,7 +730,7 @@ const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
 const COMPONENT_ID$1 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
@@ -751,25 +739,24 @@ const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.5'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
 })(["", ";"], reactTheming.componentStyles);
 
-const Listbox = React.forwardRef((_ref, ref) => {
-  let {
-    appendToNode,
-    children,
-    isCompact,
-    isExpanded,
-    maxHeight,
-    minHeight,
-    onMouseDown,
-    triggerRef,
-    zIndex,
-    ...props
-  } = _ref;
+const Listbox = React.forwardRef(({
+  appendToNode,
+  children,
+  isCompact,
+  isExpanded,
+  maxHeight,
+  minHeight,
+  onMouseDown,
+  triggerRef,
+  zIndex,
+  ...props
+}, ref) => {
   const floatingRef = React.useRef(null);
   const [isVisible, setIsVisible] = React.useState(false);
   const [height, setHeight] = React.useState();
@@ -789,11 +776,10 @@ const Listbox = React.forwardRef((_ref, ref) => {
     },
     placement: 'bottom-start',
     middleware: [reactDom.offset(theme.space.base), reactDom.flip(), reactDom.size({
-      apply: _ref2 => {
-        let {
-          rects,
-          availableHeight
-        } = _ref2;
+      apply: ({
+        rects,
+        availableHeight
+      }) => {
         if (rects.reference.width > 0) {
           setWidth(rects.reference.width);
           if (!(minHeight === null || minHeight === 'fit-content') && rects.floating.height > availableHeight) {
@@ -871,14 +857,13 @@ const TagAvatarComponent = reactTags.Tag.Avatar;
 TagAvatarComponent.displayName = 'Tag.Avatar';
 const TagAvatar = TagAvatarComponent;
 
-const TagComponent = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    option,
-    removeLabel,
-    tooltipZIndex,
-    ...props
-  } = _ref;
+const TagComponent = React.forwardRef(({
+  children,
+  option,
+  removeLabel,
+  tooltipZIndex,
+  ...props
+}, ref) => {
   const {
     getTagProps,
     isCompact,
@@ -922,29 +907,26 @@ TagComponent.propTypes = {
 const Tag = TagComponent;
 Tag.Avatar = TagAvatar;
 
-const TagGroup = _ref => {
-  let {
-    children,
-    isDisabled,
-    isExpanded,
-    listboxZIndex,
-    maxTags,
-    optionTagProps,
-    selection
-  } = _ref;
-  return React__namespace.default.createElement(React__namespace.default.Fragment, null, selection.map((option, index) => {
-    const disabled = isDisabled || option.disabled;
-    return React__namespace.default.createElement(Tag, Object.assign({
-      key: option.value,
-      hidden: !isExpanded && index >= maxTags,
-      option: {
-        ...option,
-        disabled
-      },
-      tooltipZIndex: listboxZIndex ? listboxZIndex + 1 : undefined
-    }, optionTagProps[option.value]));
-  }), children);
-};
+const TagGroup = ({
+  children,
+  isDisabled,
+  isExpanded,
+  listboxZIndex,
+  maxTags,
+  optionTagProps,
+  selection
+}) => React__namespace.default.createElement(React__namespace.default.Fragment, null, selection.map((option, index) => {
+  const disabled = isDisabled || option.disabled;
+  return React__namespace.default.createElement(Tag, Object.assign({
+    key: option.value,
+    hidden: !isExpanded && index >= maxTags,
+    option: {
+      ...option,
+      disabled
+    },
+    tooltipZIndex: listboxZIndex ? listboxZIndex + 1 : undefined
+  }, optionTagProps[option.value]));
+}), children);
 TagGroup.displayName = 'TagGroup';
 
 const toOption = props => {
@@ -975,39 +957,38 @@ const toOptions = (children, optionTagProps) => React.Children.toArray(children)
 }, []);
 
 const MAX_TAGS = 4;
-const Combobox = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    activeIndex,
-    defaultActiveIndex,
-    defaultExpanded,
-    endIcon,
-    focusInset,
-    inputProps: _inputProps,
-    inputValue: _inputValue,
-    isAutocomplete,
-    isBare,
-    isCompact,
-    isDisabled,
-    isEditable = true,
-    isExpanded: _isExpanded,
-    isMultiselectable,
-    listboxAppendToNode,
-    listboxAriaLabel,
-    listboxMaxHeight = '400px',
-    listboxMinHeight,
-    listboxZIndex = 1000,
-    maxHeight,
-    maxTags = MAX_TAGS,
-    onChange,
-    placeholder,
-    renderExpandTags,
-    renderValue,
-    selectionValue,
-    startIcon,
-    validation,
-    ...props
-  } = _ref;
+const Combobox = React.forwardRef(({
+  children,
+  activeIndex,
+  defaultActiveIndex,
+  defaultExpanded,
+  endIcon,
+  focusInset,
+  inputProps: _inputProps,
+  inputValue: _inputValue,
+  isAutocomplete,
+  isBare,
+  isCompact,
+  isDisabled,
+  isEditable = true,
+  isExpanded: _isExpanded,
+  isMultiselectable,
+  listboxAppendToNode,
+  listboxAriaLabel,
+  listboxMaxHeight = '400px',
+  listboxMinHeight,
+  listboxZIndex = 1000,
+  maxHeight,
+  maxTags = MAX_TAGS,
+  onChange,
+  placeholder,
+  renderExpandTags,
+  renderValue,
+  selectionValue,
+  startIcon,
+  validation,
+  ...props
+}, ref) => {
   const {
     hasHint,
     hasMessage,
@@ -1261,13 +1242,12 @@ const Hint = React.forwardRef((props, ref) => {
 });
 Hint.displayName = 'Field.Hint';
 
-const Label = React.forwardRef((_ref, ref) => {
-  let {
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    ...props
-  } = _ref;
+const Label = React.forwardRef(({
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  ...props
+}, ref) => {
   const {
     labelProps
   } = useFieldContext();
@@ -1445,20 +1425,19 @@ const OptionMetaComponent = React.forwardRef((props, ref) => {
 OptionMetaComponent.displayName = 'Option.Meta';
 const OptionMeta = OptionMetaComponent;
 
-const OptionComponent = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    hasSelection,
-    icon,
-    isDisabled,
-    isHidden,
-    isSelected,
-    label,
-    type,
-    value,
-    tagProps,
-    ...props
-  } = _ref;
+const OptionComponent = React.forwardRef(({
+  children,
+  hasSelection,
+  icon,
+  isDisabled,
+  isHidden,
+  isSelected,
+  label,
+  type,
+  value,
+  tagProps,
+  ...props
+}, ref) => {
   const contextValue = React.useMemo(() => ({
     isDisabled,
     type
@@ -1535,16 +1514,15 @@ OptionComponent.propTypes = {
 const Option = OptionComponent;
 Option.Meta = OptionMeta;
 
-const OptGroup = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    content,
-    icon,
-    legend,
-    'aria-label': ariaLabel,
-    onMouseDown,
-    ...props
-  } = _ref;
+const OptGroup = React.forwardRef(({
+  children,
+  content,
+  icon,
+  legend,
+  'aria-label': ariaLabel,
+  onMouseDown,
+  ...props
+}, ref) => {
   const {
     getOptGroupProps,
     isCompact
@@ -1645,21 +1623,20 @@ const toItems = (children, type) => React.Children.toArray(children).reduce((ite
 }, []);
 
 const PLACEMENT_DEFAULT = 'bottom-start';
-const MenuList = React.forwardRef((_ref, ref) => {
-  let {
-    appendToNode,
-    hasArrow,
-    isCompact,
-    isExpanded,
-    fallbackPlacements: _fallbackPlacements,
-    maxHeight = '400px',
-    minHeight,
-    placement: _placement = PLACEMENT_DEFAULT,
-    triggerRef,
-    zIndex = 1000,
-    children,
-    ...props
-  } = _ref;
+const MenuList = React.forwardRef(({
+  appendToNode,
+  hasArrow,
+  isCompact,
+  isExpanded,
+  fallbackPlacements: _fallbackPlacements,
+  maxHeight = '400px',
+  minHeight,
+  placement: _placement = PLACEMENT_DEFAULT,
+  triggerRef,
+  zIndex = 1000,
+  children,
+  ...props
+}, ref) => {
   const floatingRef = React.useRef(null);
   const [isVisible, setIsVisible] = React.useState(isExpanded);
   const [height, setHeight] = React.useState();
@@ -1685,11 +1662,10 @@ const MenuList = React.forwardRef((_ref, ref) => {
     middleware: [reactDom.offset(theme.space.base * (hasArrow ? 2 : 1)), _placement === 'auto' ? reactDom.autoPlacement() : reactDom.flip({
       fallbackPlacements
     }), reactDom.size({
-      apply: _ref2 => {
-        let {
-          rects,
-          availableHeight
-        } = _ref2;
+      apply: ({
+        rects,
+        availableHeight
+      }) => {
         if (!(minHeight === null || minHeight === 'fit-content')) {
           if (rects.floating.height > availableHeight) {
             setHeight(availableHeight);
@@ -1762,25 +1738,24 @@ MenuList.propTypes = {
   zIndex: PropTypes__default.default.number
 };
 
-const Menu = React.forwardRef((_ref2, ref) => {
-  let {
-    button,
-    buttonProps: _buttonProps = {},
-    children,
-    isCompact,
-    focusedValue: _focusedValue,
-    defaultFocusedValue,
-    defaultExpanded,
-    isExpanded: _isExpanded,
-    restoreFocus,
-    selectedItems,
-    onChange,
-    onMouseLeave,
-    maxHeight = '400px',
-    placement = 'bottom-start',
-    zIndex = 1000,
-    ...props
-  } = _ref2;
+const Menu = React.forwardRef(({
+  button,
+  buttonProps: _buttonProps = {},
+  children,
+  isCompact,
+  focusedValue: _focusedValue,
+  defaultFocusedValue,
+  defaultExpanded,
+  isExpanded: _isExpanded,
+  restoreFocus,
+  selectedItems,
+  onChange,
+  onMouseLeave,
+  maxHeight = '400px',
+  placement = 'bottom-start',
+  zIndex = 1000,
+  ...props
+}, ref) => {
   const triggerRef = React.useRef(null);
   const menuRef = React.useRef(null);
   const items = toItems(children);
@@ -1880,16 +1855,15 @@ const useItemGroupContext = () => {
   return React.useContext(ItemGroupContext);
 };
 
-const ItemGroup = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    content,
-    legend,
-    icon,
-    'aria-label': ariaLabel,
-    type,
-    ...props
-  } = _ref;
+const ItemGroup = React.forwardRef(({
+  children,
+  content,
+  legend,
+  icon,
+  'aria-label': ariaLabel,
+  type,
+  ...props
+}, ref) => {
   const {
     isCompact,
     getItemGroupProps
@@ -1966,23 +1940,22 @@ const renderActionIcon = itemType => {
       return React__namespace.default.createElement(SvgCheckLgStroke, null);
   }
 };
-const ItemComponent = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    value,
-    label = value,
-    href,
-    isSelected,
-    icon,
-    isDisabled,
-    isExternal,
-    type,
-    name,
-    onClick,
-    onKeyDown,
-    onMouseEnter,
-    ...other
-  } = _ref;
+const ItemComponent = React.forwardRef(({
+  children,
+  value,
+  label = value,
+  href,
+  isSelected,
+  icon,
+  isDisabled,
+  isExternal,
+  type,
+  name,
+  onClick,
+  onKeyDown,
+  onMouseEnter,
+  ...other
+}, ref) => {
   const {
     type: selectionType
   } = useItemGroupContext();
@@ -2063,11 +2036,10 @@ const Item = ItemComponent;
 Item.Meta = ItemMeta;
 
 const Separator = React.forwardRef(
-(_ref, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref;
+({
+  children,
+  ...props
+}, ref) => {
   const {
     getSeparatorProps
   } = useMenuContext();