@zendeskgarden/react-dropdowns.legacy 9.0.0 → 9.1.1

package/dist/index.cjs.js

@@ -289,37 +289,37 @@ function getMenuPosition(popperPlacement) {
 const COMPONENT_ID$m = 'dropdowns.menu';
 const StyledMenu = styled__default.default.ul.attrs(props => ({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0',
-  className: props.isAnimated && 'is-animated'
+  'data-garden-version': '9.1.1',
+  className: props.$isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-lzt5u6-0"
-})(["position:static !important;max-height:", ";overflow-y:auto;", ";", ";"], props => props.maxHeight, props => props.hasArrow && reactTheming.arrowStyles(getArrowPosition(props.placement), {
+})(["position:static !important;max-height:", ";overflow-y:auto;", ";", ";"], props => props.$maxHeight, props => props.$hasArrow && reactTheming.arrowStyles(getArrowPosition(props.$placement), {
   size: `${props.theme.space.base * 1.5}px`,
   inset: '1px',
-  animationModifier: props.isAnimated ? '.is-animated' : undefined
+  animationModifier: props.$isAnimated ? '.is-animated' : undefined
 }), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 
 const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
 const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0',
-  className: props.isAnimated && 'is-animated'
+  'data-garden-version': '9.1.1',
+  className: props.$isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
   componentId: "sc-u70fn3-0"
-})(["", ";", ";"], props => reactTheming.menuStyles(getMenuPosition(props.placement), {
+})(["", ";", ";"], props => reactTheming.menuStyles(getMenuPosition(props.$placement), {
   theme: props.theme,
-  hidden: props.isHidden,
-  margin: `${props.theme.space.base * (props.hasArrow ? 2 : 1)}px`,
-  zIndex: props.zIndex,
-  animationModifier: props.isAnimated ? '.is-animated' : undefined
+  hidden: props.$isHidden,
+  margin: `${props.theme.space.base * (props.$hasArrow ? 2 : 1)}px`,
+  zIndex: props.$zIndex,
+  animationModifier: props.$isAnimated ? '.is-animated' : undefined
 }), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 
 const COMPONENT_ID$k = 'dropdowns.separator';
 const StyledSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.1',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
@@ -331,13 +331,13 @@ const StyledSeparator = styled__default.default.li.attrs({
 
 const COMPONENT_ID$j = 'dropdowns.item';
 const getItemPaddingVertical = props => {
-  if (props.isCompact) {
+  if (props.$isCompact) {
     return `${props.theme.space.base}px`;
   }
   return `${props.theme.space.base * 2}px`;
 };
 const getColorStyles = props => {
-  const backgroundColor = props.isFocused ? reactTheming.getColor({
+  const backgroundColor = props.$isFocused ? reactTheming.getColor({
     theme: props.theme,
     variable: 'background.primaryEmphasis',
     transparency: props.theme.opacity[100]
@@ -348,7 +348,7 @@ const getColorStyles = props => {
       theme: props.theme,
       variable: 'foreground.disabled'
     });
-  } else if (props.isDanger) {
+  } else if (props.$isDanger) {
     foregroundColor = reactTheming.getColor({
       theme: props.theme,
       variable: 'foreground.danger'
@@ -363,7 +363,7 @@ const getColorStyles = props => {
 };
 const StyledItem = styled__default.default.li.attrs(props => ({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.1',
   'aria-disabled': props.disabled
 })).withConfig({
   displayName: "StyledItem",
@@ -373,7 +373,7 @@ const StyledItem = styled__default.default.li.attrs(props => ({
 const COMPONENT_ID$i = 'dropdowns.add_item';
 const StyledAddItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-mlto71-0"
@@ -385,13 +385,13 @@ const StyledAddItem = styled__default.default(StyledItem).attrs({
 const COMPONENT_ID$h = 'dropdowns.item_meta';
 const StyledItemMeta = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1m3x8m1-0"
-})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => reactTheming.getColor({
+})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.$isCompact ? 3 : 4), props => reactTheming.getColor({
   theme: props.theme,
-  variable: props.isDisabled ? 'foreground.disabled' : 'foreground.subtle'
+  variable: props.$isDisabled ? 'foreground.disabled' : 'foreground.subtle'
 }), props => props.theme.fontSizes.sm, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 
 const COMPONENT_ID$g = 'dropdowns.item_icon';
@@ -400,11 +400,11 @@ const getSizeStyles = props => {
 };
 const StyledItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-pspm80-0"
-})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.isVisible ? '1' : '0', props => props.isDisabled ? 'inherit' : reactTheming.getColor({
+})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.$isVisible ? '1' : '0', props => props.$isDisabled ? 'inherit' : reactTheming.getColor({
   theme: props.theme,
   variable: 'foreground.primary'
 }), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
@@ -412,7 +412,7 @@ const StyledItemIcon = styled__default.default.div.attrs({
 const COMPONENT_ID$f = 'dropdowns.next_item';
 const StyledNextItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1wrjlge-0"
@@ -441,14 +441,14 @@ const NextIconComponent = _ref => {
   } = _ref;
   return React__namespace.default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '9.0.0',
+    "data-garden-version": '9.1.1',
     className: className
   });
 };
 const StyledNextIcon = styled__default.default(NextIconComponent).withConfig({
   displayName: "StyledNextIcon",
   componentId: "sc-1nzkdnq-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : reactTheming.getColor({
+})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.$isDisabled ? 'inherit' : reactTheming.getColor({
   theme: props.theme,
   variable: 'foreground.disabled'
 }), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
@@ -456,7 +456,7 @@ const StyledNextIcon = styled__default.default(NextIconComponent).withConfig({
 const COMPONENT_ID$d = 'dropdowns.previous_item';
 const StyledPreviousItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1qv9jwe-0"
@@ -485,14 +485,14 @@ const PreviousIconComponent = _ref => {
   } = _ref;
   return React__namespace.default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '9.0.0',
+    "data-garden-version": '9.1.1',
     className: className
   });
 };
 const StyledPreviousIcon = styled__default.default(PreviousIconComponent).withConfig({
   displayName: "StyledPreviousIcon",
   componentId: "sc-1n1t07s-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : reactTheming.getColor({
+})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.$isDisabled ? 'inherit' : reactTheming.getColor({
   theme: props.theme,
   variable: 'foreground.subtle'
 }), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
@@ -500,7 +500,7 @@ const StyledPreviousIcon = styled__default.default(PreviousIconComponent).withCo
 const COMPONENT_ID$b = 'dropdowns.header_icon';
 const StyledHeaderIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-ow8s45-0"
@@ -511,14 +511,14 @@ const StyledHeaderIcon = styled__default.default.div.attrs({
 
 const COMPONENT_ID$a = 'dropdowns.header_item';
 const getHorizontalPadding = props => {
-  if (props.hasIcon) {
+  if (props.$hasIcon) {
     return undefined;
   }
   return `${props.theme.space.base * 3}px`;
 };
 const StyledHeaderItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-1xosinr-0"
@@ -527,7 +527,7 @@ const StyledHeaderItem = styled__default.default(StyledItem).attrs({
 const COMPONENT_ID$9 = 'dropdowns.media_body';
 const StyledMediaBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-133sssc-0"
@@ -538,16 +538,14 @@ const StyledMediaFigure = styled__default.default(
 _ref => {
   let {
     children,
-    isCompact,
+    $isCompact,
     theme,
     ...props
   } = _ref;
-  return (
-    React__namespace.default.cloneElement(React.Children.only(children), props)
-  );
+  return  React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-16vz3xj-0"
@@ -556,7 +554,7 @@ _ref => {
 const COMPONENT_ID$7 = 'dropdowns.media_item';
 const StyledMediaItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-af4509-0"
@@ -565,7 +563,7 @@ const StyledMediaItem = styled__default.default(StyledItem).attrs({
 const COMPONENT_ID$6 = 'dropdowns.faux_input';
 const StyledFauxInput = styled__default.default(reactForms.FauxInput).attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.1',
   mediaLayout: true,
   theme: props.theme
 })).withConfig({
@@ -577,7 +575,7 @@ const COMPONENT_ID$5 = 'dropdowns.input';
 const hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.1',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
@@ -587,7 +585,7 @@ const StyledInput = styled__default.default(reactForms.Input).attrs({
 const COMPONENT_ID$4 = 'dropdowns.select';
 const StyledSelect = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xf4qjv-0"
@@ -605,7 +603,7 @@ const visibleStyling = props => {
 };
 const StyledMultiselectInput = styled__default.default(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.1',
   isBare: true
 }).withConfig({
   displayName: "StyledMultiselectInput",
@@ -616,10 +614,10 @@ const COMPONENT_ID$2 = 'dropdowns.multiselect_items_container';
 const sizeStyles = props => {
   let margin;
   let padding;
-  if (!props.isBare) {
-    const marginVertical = props.isCompact ? `-${props.theme.space.base * 1.5}px` : `-${props.theme.space.base * 2.5}px`;
+  if (!props.$isBare) {
+    const marginVertical = props.$isCompact ? `-${props.theme.space.base * 1.5}px` : `-${props.theme.space.base * 2.5}px`;
     margin = `${marginVertical} 0`;
-    const paddingVertical = props.isCompact ? '3px' : '1px';
+    const paddingVertical = props.$isCompact ? '3px' : '1px';
     const paddingEnd = `${props.theme.space.base}px`;
     padding = `${paddingVertical} ${props.theme.rtl ? 0 : paddingEnd} ${paddingVertical} ${props.theme.rtl ? paddingEnd : 0}`;
   }
@@ -627,7 +625,7 @@ const sizeStyles = props => {
 };
 const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1dxwjyz-0"
@@ -636,7 +634,7 @@ const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
 const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
 const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-vgr7nd-0"
@@ -645,14 +643,14 @@ const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
 const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
 const StyledMultiselectMoreAnchor = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-pkakky-0"
-})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.isCompact ? 0.75 : 1.5), props => props.isCompact ? '1em' : reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor({
+})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.$isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.$isCompact ? 0.75 : 1.5), props => props.$isCompact ? '1em' : reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor({
   theme: props.theme,
-  variable: props.isDisabled ? 'foreground.disabled' : 'foreground.primary'
-}), props => !props.isDisabled && 'underline', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+  variable: props.$isDisabled ? 'foreground.disabled' : 'foreground.primary'
+}), props => !props.$isDisabled && 'underline', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 
 const Trigger = _ref => {
   let {
@@ -1198,18 +1196,18 @@ const Multiselect = React__namespace.default.forwardRef((_ref, ref) => {
           }), {
             size: props.isCompact ? 'medium' : 'large'
           });
-          output.push( React__namespace.default.createElement(StyledMultiselectItemWrapper, {
+          output.push(React__namespace.default.createElement(StyledMultiselectItemWrapper, {
             key: x
           }, renderedItem));
         } else {
           output.push(renderSelectableItem(item, x));
         }
       } else if (!isFocused && !inputValue || props.disabled) {
-        output.push( React__namespace.default.createElement(StyledMultiselectItemWrapper, {
+        output.push(React__namespace.default.createElement(StyledMultiselectItemWrapper, {
           key: "more-anchor"
         }, React__namespace.default.createElement(StyledMultiselectMoreAnchor, {
-          isCompact: props.isCompact,
-          isDisabled: props.disabled
+          $isCompact: props.isCompact,
+          $isDisabled: props.disabled
         }, renderShowMore ? renderShowMore(itemValues.length - x) : `+ ${itemValues.length - x} more`)));
         break;
       } else {
@@ -1240,8 +1238,8 @@ const Multiselect = React__namespace.default.forwardRef((_ref, ref) => {
       isFocused: isContainerFocused,
       isDisabled: props.disabled
     }, start), React__namespace.default.createElement(StyledMultiselectItemsContainer, {
-      isBare: props.isBare,
-      isCompact: props.isCompact
+      $isBare: props.isBare,
+      $isCompact: props.isCompact
     }, items, React__namespace.default.createElement(StyledMultiselectInput, getInputProps({
       disabled: props.disabled,
       onFocus: () => {
@@ -1532,17 +1530,18 @@ const useMenuContext = () => {
 
 const Menu = React.forwardRef((props, menuRef) => {
   const {
-    placement,
-    popperModifiers,
+    appendToNode,
+    children,
     eventsEnabled,
+    hasArrow,
     isAnimated,
+    isCompact,
     maxHeight,
+    placement,
+    popperModifiers,
     style: menuStyle,
     zIndex,
-    isCompact,
-    children,
-    appendToNode,
-    ...otherProps
+    ...other
   } = props;
   const {
     hasMenuRef,
@@ -1580,55 +1579,53 @@ const Menu = React.forwardRef((props, menuRef) => {
   previousIndexRef.current = undefined;
   itemSearchRegistry.current = [];
   const popperPlacement = themeContext.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  return (
-    React__namespace.default.createElement(MenuContext.Provider, {
-      value: {
-        itemIndexRef,
-        isCompact
-      }
-    }, React__namespace.default.createElement(reactPopper.Popper, {
-      placement: popperPlacement,
-      modifiers: popperModifiers
-      ,
-      eventsEnabled: !!(isOpen && eventsEnabled)
-    }, _ref => {
-      let {
-        ref,
-        style,
-        scheduleUpdate,
-        placement: currentPlacement
-      } = _ref;
-      let computedStyle = menuStyle;
-      scheduleUpdateRef.current = scheduleUpdate;
-      if ((isOpen || isVisible) && popperReferenceElementRef.current && popperReferenceElementRef.current.getBoundingClientRect) {
-        computedStyle = {
-          width: popperReferenceElementRef.current.getBoundingClientRect().width,
-          ...menuStyle
-        };
-      }
-      const menuProps = getMenuProps({
-        role: hasMenuRef.current ? 'menu' : 'listbox',
-        placement: currentPlacement,
-        isAnimated: isAnimated && (isOpen || isVisible),
-        ...otherProps
-      });
-      const menu = React__namespace.default.createElement(StyledMenuWrapper, {
-        ref: isOpen ? ref : undefined,
-        hasArrow: menuProps.hasArrow,
-        placement: menuProps.placement,
-        style: style,
-        isHidden: !isOpen,
-        isAnimated: menuProps.isAnimated,
-        zIndex: zIndex
-      }, React__namespace.default.createElement(StyledMenu, Object.assign({
-        ref: menuRef,
-        isCompact: isCompact,
-        maxHeight: maxHeight,
-        style: computedStyle
-      }, menuProps), !!(isOpen || isVisible) && children));
-      return appendToNode ? reactDom.createPortal(menu, appendToNode) : menu;
-    }))
-  );
+  return  React__namespace.default.createElement(MenuContext.Provider, {
+    value: {
+      itemIndexRef,
+      isCompact
+    }
+  }, React__namespace.default.createElement(reactPopper.Popper, {
+    placement: popperPlacement,
+    modifiers: popperModifiers
+    ,
+    eventsEnabled: !!(isOpen && eventsEnabled)
+  }, _ref => {
+    let {
+      ref,
+      style,
+      scheduleUpdate,
+      placement: currentPlacement
+    } = _ref;
+    let computedStyle = menuStyle;
+    scheduleUpdateRef.current = scheduleUpdate;
+    if ((isOpen || isVisible) && popperReferenceElementRef.current && popperReferenceElementRef.current.getBoundingClientRect) {
+      computedStyle = {
+        width: popperReferenceElementRef.current.getBoundingClientRect().width,
+        ...menuStyle
+      };
+    }
+    const menuProps = getMenuProps({
+      role: hasMenuRef.current ? 'menu' : 'listbox',
+      ...other
+    });
+    const sharedProps = {
+      $hasArrow: hasArrow,
+      $isAnimated: isAnimated ? isOpen || isVisible : false,
+      $isCompact: isCompact,
+      $maxHeight: maxHeight,
+      $placement: currentPlacement
+    };
+    const menu = React__namespace.default.createElement(StyledMenuWrapper, Object.assign({
+      ref: isOpen ? ref : undefined,
+      $isHidden: !isOpen,
+      $zIndex: zIndex,
+      style: style
+    }, sharedProps), React__namespace.default.createElement(StyledMenu, Object.assign({
+      ref: menuRef,
+      style: computedStyle
+    }, sharedProps, menuProps), !!(isOpen || isVisible) && children));
+    return appendToNode ? reactDom.createPortal(menu, appendToNode) : menu;
+  }));
 });
 Menu.displayName = 'Menu';
 Menu.propTypes = {
@@ -1708,7 +1705,7 @@ const Item = React__namespace.default.forwardRef((_ref, forwardRef) => {
     component = StyledItem,
     hasIcon,
     children,
-    ...props
+    ...other
   } = _ref;
   const {
     selectedItems,
@@ -1769,31 +1766,32 @@ const Item = React__namespace.default.forwardRef((_ref, forwardRef) => {
     }, React__namespace.default.createElement(Component, Object.assign({
       ref: ref,
       disabled: disabled,
-      isDanger: isDanger,
-      isCompact: isCompact
-    }, props), !!isSelected && !hasIcon && React__namespace.default.createElement(StyledItemIcon, {
-      isCompact: isCompact,
-      isVisible: isSelected,
-      isDisabled: disabled
+      $isDanger: isDanger,
+      $isCompact: isCompact
+    }, other), !!isSelected && !hasIcon && React__namespace.default.createElement(StyledItemIcon, {
+      $isCompact: isCompact,
+      $isVisible: isSelected,
+      $isDisabled: disabled
     }, React__namespace.default.createElement(SvgCheckLgStroke, null)), children));
   }
   itemIndexRef.current++;
   return React__namespace.default.createElement(ItemContext.Provider, {
     value: contextValue
-  }, React__namespace.default.createElement(Component, getItemProps({
+  }, React__namespace.default.createElement(Component, Object.assign({
+    $isCompact: isCompact,
+    $isDanger: isDanger,
+    $isFocused: isFocused
+  }, getItemProps({
     item: value,
-    isFocused,
     ref,
-    isCompact,
-    isDanger,
     ...(hasMenuRef.current && {
       role: 'menuitem',
       'aria-selected': null
     }),
-    ...props
-  }), !!isSelected && !hasIcon && React__namespace.default.createElement(StyledItemIcon, {
-    isCompact: isCompact,
-    isVisible: isSelected
+    ...other
+  })), !!isSelected && !hasIcon && React__namespace.default.createElement(StyledItemIcon, {
+    $isCompact: isCompact,
+    $isVisible: isSelected
   }, React__namespace.default.createElement(SvgCheckLgStroke, null)), children));
 });
 Item.displayName = 'Item';
@@ -1815,9 +1813,9 @@ const AddItemComponent = React__namespace.default.forwardRef((_ref, ref) => {
     ref: ref,
     disabled: disabled
   }, props), React__namespace.default.createElement(StyledItemIcon, {
-    isCompact: isCompact,
-    isVisible: true,
-    isDisabled: disabled
+    $isCompact: isCompact,
+    $isVisible: true,
+    $isDisabled: disabled
   }, React__namespace.default.createElement(SvgPlusStroke, null)), children);
 });
 const AddItem = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(Item, Object.assign({
@@ -1843,14 +1841,19 @@ const HeaderIcon = React__namespace.default.forwardRef((props, ref) => {
 });
 HeaderIcon.displayName = 'HeaderIcon';
 
-const HeaderItem = React__namespace.default.forwardRef((props, ref) => {
+const HeaderItem = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    hasIcon,
+    ...other
+  } = _ref;
   const {
     isCompact
   } = useMenuContext();
   return React__namespace.default.createElement(StyledHeaderItem, Object.assign({
     ref: ref,
-    isCompact: isCompact
-  }, props));
+    $isCompact: isCompact,
+    $hasIcon: hasIcon
+  }, other));
 });
 HeaderItem.displayName = 'HeaderItem';
 
@@ -1863,8 +1866,8 @@ const ItemMeta = React__namespace.default.forwardRef((props, ref) => {
   } = useItemContext();
   return React__namespace.default.createElement(StyledItemMeta, Object.assign({
     ref: ref,
-    isCompact: isCompact,
-    isDisabled: isDisabled
+    $isCompact: isCompact,
+    $isDisabled: isDisabled
   }, props));
 });
 ItemMeta.displayName = 'ItemMeta';
@@ -1875,7 +1878,7 @@ const MediaBody = React__namespace.default.forwardRef((props, ref) => {
   } = useMenuContext();
   return React__namespace.default.createElement(StyledMediaBody, Object.assign({
     ref: ref,
-    isCompact: isCompact
+    $isCompact: isCompact
   }, props));
 });
 MediaBody.displayName = 'MediaBody';
@@ -1885,7 +1888,7 @@ const MediaFigure = props => {
     isCompact
   } = useMenuContext();
   return React__namespace.default.createElement(StyledMediaFigure, Object.assign({
-    isCompact: isCompact
+    $isCompact: isCompact
   }, props));
 };
 
@@ -1912,11 +1915,11 @@ const NextItemComponent = React__namespace.default.forwardRef((_ref, ref) => {
     ref: ref,
     disabled: disabled
   }, props), React__namespace.default.createElement(StyledItemIcon, {
-    isCompact: isCompact,
-    isDisabled: disabled,
-    isVisible: true
+    $isCompact: isCompact,
+    $isDisabled: disabled,
+    $isVisible: true
   }, React__namespace.default.createElement(StyledNextIcon, {
-    isDisabled: disabled
+    $isDisabled: disabled
   })), children);
 });
 const NextItem = React__namespace.default.forwardRef((_ref2, ref) => {
@@ -1966,11 +1969,11 @@ const PreviousItemComponent = React__namespace.default.forwardRef((_ref, ref) =>
     ref: ref,
     disabled: disabled
   }, props), React__namespace.default.createElement(StyledItemIcon, {
-    isCompact: isCompact,
-    isDisabled: disabled,
-    isVisible: true
+    $isCompact: isCompact,
+    $isDisabled: disabled,
+    $isVisible: true
   }, React__namespace.default.createElement(StyledPreviousIcon, {
-    isDisabled: disabled
+    $isDisabled: disabled
   })), children);
 });
 const PreviousItem = React__namespace.default.forwardRef((_ref2, ref) => {

package/dist/typings/styled/items/StyledItem.d.ts

@@ -6,9 +6,9 @@
  */
 import { ThemeProps, DefaultTheme } from 'styled-components';
 export interface IStyledItemProps {
-    isFocused?: boolean;
-    isCompact?: boolean;
-    isDanger?: boolean;
+    $isFocused?: boolean;
+    $isCompact?: boolean;
+    $isDanger?: boolean;
     disabled?: boolean;
     checked?: boolean;
 }

package/dist/typings/styled/items/StyledItemIcon.d.ts

@@ -6,9 +6,9 @@
  */
 import { DefaultTheme } from 'styled-components';
 interface IStyledItemIconProps {
-    isCompact?: boolean;
-    isVisible?: boolean;
-    isDisabled?: boolean;
+    $isCompact?: boolean;
+    $isVisible?: boolean;
+    $isDisabled?: boolean;
 }
 export declare const StyledItemIcon: import("styled-components").StyledComponent<"div", DefaultTheme, {
     'data-garden-id': string;