@zendeskgarden/react-dropdowns 9.0.0-next.9 → 9.1.0

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

@@ -43,7 +43,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { Listbox } from './Listbox.js';
 import { TagGroup } from './TagGroup.js';
@@ -164,46 +163,31 @@ const Combobox = forwardRef((_ref, ref) => {
   const _listboxAriaLabel = useText(Combobox, {
     listboxAriaLabel
   }, 'listboxAriaLabel', 'Options');
-  const triggerProps = {
-    isAutocomplete,
-    isBare,
-    isCompact,
-    isEditable,
-    isLabelHovered,
-    isMultiselectable,
-    maxHeight,
-    focusInset,
-    validation,
-    ...getTriggerProps({
-      onFocus: () => {
-        if (!isDisabled) {
-          if (isEditable) {
-            setIsInputHidden(false);
-          }
-          if (isMultiselectable) {
-            setIsTagGroupExpanded(true);
-          }
+  const triggerProps = getTriggerProps({
+    onFocus: () => {
+      if (!isDisabled) {
+        if (isEditable) {
+          setIsInputHidden(false);
         }
-      },
-      onBlur: event => {
-        if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) {
-          if (isEditable) {
-            setIsInputHidden(true);
-          }
-          if (isMultiselectable) {
-            setIsTagGroupExpanded(false);
-          }
+        if (isMultiselectable) {
+          setIsTagGroupExpanded(true);
         }
       }
-    })
-  };
+    },
+    onBlur: event => {
+      if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) {
+        if (isEditable) {
+          setIsInputHidden(true);
+        }
+        if (isMultiselectable) {
+          setIsTagGroupExpanded(false);
+        }
+      }
+    }
+  });
   const inputProps = {
     'aria-invalid': validation === 'error' || validation === 'warning',
     hidden: isInputHidden,
-    isBare,
-    isCompact,
-    isEditable,
-    isMultiselectable,
     placeholder,
     ...getInputProps({
       ..._inputProps
@@ -239,14 +223,24 @@ const Combobox = forwardRef((_ref, ref) => {
   return React__default.createElement(ComboboxContext.Provider, {
     value: contextValue
   }, React__default.createElement(StyledCombobox, Object.assign({
-    isCompact: isCompact,
+    $isCompact: isCompact,
     tabIndex: -1
   }, props, {
     ref: ref
-  }), React__default.createElement(StyledTrigger, triggerProps, React__default.createElement(StyledContainer, null, startIcon && React__default.createElement(StyledInputIcon, {
+  }), React__default.createElement(StyledTrigger, Object.assign({
+    $isAutocomplete: isAutocomplete,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isEditable: isEditable,
+    $isLabelHovered: isLabelHovered,
+    $isMultiselectable: isMultiselectable,
+    $maxHeight: maxHeight,
+    $focusInset: focusInset,
+    $validation: validation
+  }, triggerProps), React__default.createElement(StyledContainer, null, !!startIcon && React__default.createElement(StyledInputIcon, {
     $isLabelHovered: isLabelHovered,
     $isCompact: isCompact
-  }, startIcon), React__default.createElement(StyledInputGroup, null, isMultiselectable && Array.isArray(selection) && React__default.createElement(TagGroup, {
+  }, startIcon), React__default.createElement(StyledInputGroup, null, !!isMultiselectable && Array.isArray(selection) && React__default.createElement(TagGroup, {
     isDisabled: isDisabled,
     isExpanded: isTagGroupExpanded,
     maxTags: maxTags,
@@ -255,7 +249,7 @@ const Combobox = forwardRef((_ref, ref) => {
   }, selection.length > maxTags && React__default.createElement(StyledTagsButton, {
     disabled: isDisabled,
     hidden: isTagGroupExpanded,
-    isCompact: isCompact,
+    $isCompact: isCompact,
     tabIndex: -1,
     type: "button"
   }, (() => {
@@ -263,21 +257,26 @@ const Combobox = forwardRef((_ref, ref) => {
     return renderExpandTags ? renderExpandTags(value) : expandTags?.replace('{{value}}', value.toString());
   })())), React__default.createElement(StyledValue, {
     hidden: !isInputHidden,
-    isAutocomplete: isAutocomplete,
-    isBare: isBare,
-    isCompact: isCompact,
-    isDisabled: isDisabled,
-    isEditable: isEditable,
-    isMultiselectable: isMultiselectable,
-    isPlaceholder: !(inputValue || renderValue)
+    $isAutocomplete: isAutocomplete,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isDisabled: isDisabled,
+    $isEditable: isEditable,
+    $isMultiselectable: isMultiselectable,
+    $isPlaceholder: !(inputValue || renderValue)
   }, renderValue ? renderValue({
     selection,
     inputValue
-  }) : inputValue || placeholder), React__default.createElement(StyledInput, inputProps)), (hasChevron || endIcon) && React__default.createElement(StyledInputIcon, {
+  }) : inputValue || placeholder), React__default.createElement(StyledInput, Object.assign({
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isEditable: isEditable,
+    $isMultiselectable: isMultiselectable
+  }, inputProps))), !!(hasChevron || endIcon) && React__default.createElement(StyledInputIcon, {
     $isCompact: isCompact,
     $isEnd: true,
     $isLabelHovered: isLabelHovered,
-    $isRotated: hasChevron && isExpanded
+    $isRotated: !!(hasChevron && isExpanded)
   }, hasChevron ? React__default.createElement(SvgChevronDownStroke, null) : endIcon))), React__default.createElement(Listbox, Object.assign({
     appendToNode: listboxAppendToNode,
     isCompact: isCompact,

package/dist/esm/elements/combobox/Field.js

@@ -36,7 +36,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { Hint } from './Hint.js';
 import { Label } from './Label.js';

package/dist/esm/elements/combobox/Hint.js

@@ -36,7 +36,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const Hint = forwardRef((props, ref) => {
@@ -52,6 +51,6 @@ const Hint = forwardRef((props, ref) => {
     ref: ref
   }));
 });
-Hint.displayName = 'Hint';
+Hint.displayName = 'Field.Hint';
 
 export { Hint };

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

@@ -38,7 +38,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const Label = forwardRef((_ref, ref) => {
@@ -59,7 +58,7 @@ const Label = forwardRef((_ref, ref) => {
     ref: ref
   }));
 });
-Label.displayName = 'Label';
+Label.displayName = 'Field.Label';
 Label.propTypes = {
   hidden: PropTypes.bool,
   isRegular: PropTypes.bool

package/dist/esm/elements/combobox/Listbox.js

@@ -38,7 +38,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { ThemeContext } from 'styled-components';
 import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
@@ -121,25 +120,25 @@ const Listbox = forwardRef((_ref, ref) => {
   children, update]);
   const Node = React__default.createElement(StyledFloatingListbox, {
     "data-garden-animate": isVisible ? 'true' : 'false',
-    isHidden: !isExpanded,
-    position: placement === 'bottom-start' ? 'bottom' : 'top',
+    $isHidden: !isExpanded,
+    $position: placement === 'bottom-start' ? 'bottom' : 'top',
     style: {
       transform,
       width
     },
-    zIndex: zIndex,
+    $zIndex: zIndex,
     ref: floatingRef
   }, React__default.createElement(StyledListbox, Object.assign({
-    isCompact: isCompact,
-    maxHeight: maxHeight,
-    minHeight: minHeight,
+    $isCompact: isCompact,
+    $maxHeight: maxHeight,
+    $minHeight: minHeight,
     onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown),
     style: {
       height
     }
   }, props, {
     ref: ref
-  }), isVisible && children));
+  }), !!isVisible && children));
   return appendToNode ? createPortal(Node, appendToNode) : Node;
 });
 Listbox.displayName = 'Listbox';

package/dist/esm/elements/combobox/Message.js

@@ -38,7 +38,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const Message = forwardRef((props, ref) => {
@@ -54,7 +53,7 @@ const Message = forwardRef((props, ref) => {
     ref: ref
   }));
 });
-Message.displayName = 'Message';
+Message.displayName = 'Field.Message';
 Message.propTypes = {
   validation: PropTypes.oneOf(VALIDATION),
   validationLabel: PropTypes.string

package/dist/esm/elements/combobox/OptGroup.js

@@ -39,7 +39,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const OptGroup = forwardRef((_ref, ref) => {
@@ -64,21 +63,21 @@ const OptGroup = forwardRef((_ref, ref) => {
     'aria-label': groupAriaLabel || legend
   });
   return React__default.createElement(StyledOption, Object.assign({
-    isCompact: isCompact,
+    $isCompact: isCompact,
     $type: "group",
     onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown),
     role: "none"
   }, props, {
     ref: ref
-  }), React__default.createElement(StyledOptionContent, null, (content || legend) && React__default.createElement(StyledOption, {
+  }), React__default.createElement(StyledOptionContent, null, !!(content || legend) && React__default.createElement(StyledOption, {
     as: "div",
-    isCompact: isCompact,
+    $isCompact: isCompact,
     $type: "header"
-  }, icon && React__default.createElement(StyledOptionTypeIcon, {
+  }, !!icon && React__default.createElement(StyledOptionTypeIcon, {
     $isCompact: isCompact,
     $type: "header"
   }, icon), content || legend), React__default.createElement(StyledOptGroup, Object.assign({
-    isCompact: isCompact
+    $isCompact: isCompact
   }, optGroupProps), React__default.createElement(StyledListboxSeparator, {
     role: "none"
   }), children)));

package/dist/esm/elements/combobox/Option.js

@@ -44,7 +44,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { OptionMeta } from './OptionMeta.js';
 import { toOption } from './utils.js';
@@ -62,8 +61,9 @@ const OptionComponent = forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const contextValue = useMemo(() => ({
-    isDisabled
-  }), [isDisabled]);
+    isDisabled,
+    type
+  }), [isDisabled, type]);
   const {
     activeValue,
     getOptionProps,
@@ -108,13 +108,16 @@ const OptionComponent = forwardRef((_ref, ref) => {
   return React__default.createElement(OptionContext.Provider, {
     value: contextValue
   }, React__default.createElement(StyledOption, Object.assign({
-    isActive: isActive,
-    isCompact: isCompact,
+    $isActive: isActive,
+    $isCompact: isCompact,
     $type: type
   }, props, optionProps), React__default.createElement(StyledOptionTypeIcon, {
     $isCompact: isCompact,
     $type: type
-  }, renderActionIcon(type)), icon && React__default.createElement(StyledOptionIcon, null, icon), React__default.createElement(StyledOptionContent, null, children || label || value)));
+  }, renderActionIcon(type)), !!icon && React__default.createElement(StyledOptionIcon, {
+    $isDisabled: isDisabled,
+    $type: type
+  }, icon), React__default.createElement(StyledOptionContent, null, children || label || value)));
 });
 OptionComponent.displayName = 'Option';
 OptionComponent.propTypes = {

package/dist/esm/elements/combobox/OptionMeta.js

@@ -36,7 +36,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const OptionMetaComponent = forwardRef((props, ref) => {
@@ -44,7 +43,7 @@ const OptionMetaComponent = forwardRef((props, ref) => {
     isDisabled
   } = useOptionContext();
   return React__default.createElement(StyledOptionMeta, Object.assign({
-    isDisabled: isDisabled
+    $isDisabled: isDisabled
   }, props, {
     ref: ref
   }));

package/dist/esm/elements/combobox/Tag.js

@@ -40,7 +40,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { TagAvatar } from './TagAvatar.js';
 

package/dist/esm/elements/combobox/utils.js

@@ -17,7 +17,7 @@ const toOption = props => {
 };
 const toOptions = (children, optionTagProps) => Children.toArray(children).reduce((options, option) => {
   const retVal = options;
-  if ( isValidElement(option)) {
+  if (isValidElement(option)) {
     if ('value' in option.props) {
       retVal.push(toOption(option.props));
       optionTagProps[option.props.value] = option.props.tagProps;

package/dist/esm/elements/menu/Item.js

@@ -42,7 +42,6 @@ import '../../views/menu/StyledItemGroup.js';
 import { StyledItemIcon } from '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import { StyledItemTypeIcon } from '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { ItemMeta } from './ItemMeta.js';
 import useMenuContext from '../../context/useMenuContext.js';
@@ -70,7 +69,8 @@ const ItemComponent = forwardRef((_ref, ref) => {
   } = useItemGroupContext();
   const {
     focusedValue,
-    getItemProps
+    getItemProps,
+    isCompact
   } = useMenuContext();
   const item = {
     ...toItem({
@@ -93,9 +93,6 @@ const ItemComponent = forwardRef((_ref, ref) => {
     onMouseEnter
   });
   const isActive = value === focusedValue;
-  const {
-    isCompact
-  } = useMenuContext();
   const renderActionIcon = iconType => {
     switch (iconType) {
       case 'add':
@@ -109,20 +106,24 @@ const ItemComponent = forwardRef((_ref, ref) => {
     }
   };
   const contextValue = useMemo(() => ({
-    isDisabled
-  }), [isDisabled]);
+    isDisabled,
+    type
+  }), [isDisabled, type]);
   return React__default.createElement(ItemContext.Provider, {
     value: contextValue
   }, React__default.createElement(StyledItem, Object.assign({
     $type: type,
-    isCompact: isCompact,
-    isActive: isActive
+    $isCompact: isCompact,
+    $isActive: isActive
   }, props, itemProps, {
     ref: mergeRefs([_itemRef, ref])
   }), React__default.createElement(StyledItemTypeIcon, {
     $isCompact: isCompact,
     $type: type
-  }, renderActionIcon(type)), icon && React__default.createElement(StyledItemIcon, null, icon), React__default.createElement(StyledItemContent, null, children || label)));
+  }, renderActionIcon(type)), !!icon && React__default.createElement(StyledItemIcon, {
+    $isDisabled: isDisabled,
+    $type: type
+  }, icon), React__default.createElement(StyledItemContent, null, children || label)));
 });
 ItemComponent.displayName = 'Item';
 ItemComponent.propTypes = {

package/dist/esm/elements/menu/ItemGroup.js

@@ -38,7 +38,6 @@ import { StyledItemGroup } from '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import { StyledItemTypeIcon } from '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import { StyledSeparator } from '../../views/menu/StyledSeparator.js';
 import { ItemGroupContext } from '../../context/useItemGroupContext.js';
 
@@ -68,19 +67,20 @@ const ItemGroup = forwardRef((_ref, ref) => {
   return React__default.createElement(ItemGroupContext.Provider, {
     value: contextValue
   }, React__default.createElement(StyledItem, Object.assign({
-    isCompact: isCompact,
+    $isCompact: isCompact,
     $type: "group"
   }, props, {
+    role: "none",
     ref: ref
-  }), React__default.createElement(StyledItemContent, null, (content || legend) && React__default.createElement(StyledItem, {
+  }), React__default.createElement(StyledItemContent, null, !!(content || legend) && React__default.createElement(StyledItem, {
     as: "div",
-    isCompact: isCompact,
+    $isCompact: isCompact,
     $type: "header"
-  }, icon && React__default.createElement(StyledItemTypeIcon, {
+  }, !!icon && React__default.createElement(StyledItemTypeIcon, {
     $isCompact: isCompact,
     $type: "header"
   }, icon), content || legend), React__default.createElement(StyledItemGroup, Object.assign({
-    isCompact: isCompact
+    $isCompact: isCompact
   }, groupProps), React__default.createElement(StyledSeparator, {
     role: "none"
   }), children))));

package/dist/esm/elements/menu/ItemMeta.js

@@ -36,7 +36,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import { StyledItemMeta } from '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const ItemMetaComponent = forwardRef((props, ref) => {
@@ -44,7 +43,7 @@ const ItemMetaComponent = forwardRef((props, ref) => {
     isDisabled
   } = useItemContext();
   return React__default.createElement(StyledItemMeta, Object.assign({
-    isDisabled: isDisabled
+    $isDisabled: isDisabled
   }, props, {
     ref: ref
   }));

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

@@ -10,45 +10,14 @@ import { mergeRefs } from 'react-merge-refs';
 import { ThemeContext } from 'styled-components';
 import { useMenu } from '@zendeskgarden/container-menu';
 import { DEFAULT_THEME, useWindow } from '@zendeskgarden/react-theming';
+import { Button } from '@zendeskgarden/react-buttons';
 import { PLACEMENT } from '../../types/index.js';
 import { MenuContext } from '../../context/useMenuContext.js';
 import { toItems } from './utils.js';
 import { MenuList } from './MenuList.js';
-import '../../views/combobox/StyledCombobox.js';
-import '../../views/combobox/StyledContainer.js';
-import '../../views/combobox/StyledField.js';
-import '../../views/combobox/StyledFloatingListbox.js';
-import '../../views/combobox/StyledHint.js';
-import '../../views/combobox/StyledInput.js';
-import '../../views/combobox/StyledInputGroup.js';
-import '../../views/combobox/StyledInputIcon.js';
-import '../../views/combobox/StyledLabel.js';
-import '../../views/combobox/StyledListbox.js';
-import '../../views/combobox/StyledListboxSeparator.js';
-import '../../views/combobox/StyledMessage.js';
-import '../../views/combobox/StyledOptGroup.js';
-import '../../views/combobox/StyledOption.js';
-import '../../views/combobox/StyledOptionContent.js';
-import '../../views/combobox/StyledOptionIcon.js';
-import '../../views/combobox/StyledOptionMeta.js';
-import '../../views/combobox/StyledOptionTypeIcon.js';
-import '../../views/combobox/StyledTag.js';
-import '../../views/combobox/StyledTagsButton.js';
-import '../../views/combobox/StyledTrigger.js';
-import '../../views/combobox/StyledValue.js';
-import '../../views/menu/StyledMenu.js';
-import '../../views/menu/StyledFloatingMenu.js';
-import '../../views/menu/StyledItem.js';
-import '../../views/menu/StyledItemContent.js';
-import '../../views/menu/StyledItemGroup.js';
-import '../../views/menu/StyledItemIcon.js';
-import '../../views/menu/StyledItemMeta.js';
-import '../../views/menu/StyledItemTypeIcon.js';
-import { StyledButton } from '../../views/menu/StyledButton.js';
-import '../../views/menu/StyledSeparator.js';
 import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
 
-const Menu = forwardRef((_ref, ref) => {
+const Menu = forwardRef((_ref2, ref) => {
   let {
     button,
     buttonProps: _buttonProps = {},
@@ -58,11 +27,12 @@ const Menu = forwardRef((_ref, ref) => {
     defaultFocusedValue,
     defaultExpanded,
     isExpanded: _isExpanded,
+    restoreFocus,
     selectedItems,
     onChange,
     onMouseLeave,
     ...props
-  } = _ref;
+  } = _ref2;
   const triggerRef = useRef(null);
   const menuRef = useRef(null);
   const items = toItems(children);
@@ -83,6 +53,7 @@ const Menu = forwardRef((_ref, ref) => {
     focusedValue: _focusedValue,
     defaultExpanded,
     isExpanded: _isExpanded,
+    restoreFocus,
     selectedItems,
     items,
     menuRef,
@@ -93,6 +64,7 @@ const Menu = forwardRef((_ref, ref) => {
     onClick,
     onKeyDown,
     disabled,
+    ref: _ref,
     ...buttonProps
   } = _buttonProps;
   const triggerProps = {
@@ -106,9 +78,9 @@ const Menu = forwardRef((_ref, ref) => {
       onKeyDown,
       disabled
     }),
-    ref: mergeRefs([triggerRef, ref])
+    ref: mergeRefs([triggerRef, _ref])
   };
-  const trigger = typeof button === 'function' ? button(triggerProps) : React__default.createElement(StyledButton, triggerProps, button, React__default.createElement(StyledButton.EndIcon, {
+  const trigger = typeof button === 'function' ? button(triggerProps) : React__default.createElement(Button, triggerProps, button, React__default.createElement(Button.EndIcon, {
     isRotated: isExpanded
   }, React__default.createElement(SvgChevronDownStroke, null)));
   const contextValue = useMemo(() => ({
@@ -145,6 +117,7 @@ Menu.propTypes = {
   minHeight: PropTypes.string,
   onChange: PropTypes.func,
   placement: PropTypes.oneOf(PLACEMENT),
+  restoreFocus: PropTypes.bool,
   selectedItems: PropTypes.arrayOf(PropTypes.any),
   zIndex: PropTypes.number
 };

package/dist/esm/elements/menu/MenuList.js

@@ -40,7 +40,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { createPortal } from 'react-dom';
 
@@ -128,25 +127,25 @@ const MenuList = forwardRef((_ref, ref) => {
   children, update]);
   const Node = React__default.createElement(StyledFloatingMenu, {
     "data-garden-animate": isVisible,
-    isHidden: !isExpanded,
-    position: getMenuPosition(placement),
-    zIndex: zIndex,
+    $isHidden: !isExpanded || !isVisible ,
+    $position: getMenuPosition(placement),
+    $zIndex: zIndex,
     style: {
       transform
     },
     ref: floatingRef
   }, React__default.createElement(StyledMenu, Object.assign({
     "data-garden-animate-arrow": isVisible,
-    arrowPosition: hasArrow ? getArrowPosition(theme, placement) : undefined,
-    isCompact: isCompact,
-    minHeight: minHeight,
-    maxHeight: maxHeight,
+    $arrowPosition: hasArrow ? getArrowPosition(theme, placement) : undefined,
+    $isCompact: isCompact,
+    $minHeight: minHeight,
+    $maxHeight: maxHeight,
     style: {
       height
     }
   }, props, {
     ref: ref
-  }), isVisible && children));
+  }), !!isVisible && children));
   return appendToNode ? createPortal(Node, appendToNode) : Node;
 });
 MenuList.displayName = 'MenuList';

package/dist/esm/elements/menu/Separator.js

@@ -35,7 +35,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import { StyledSeparator } from '../../views/menu/StyledSeparator.js';
 import useMenuContext from '../../context/useMenuContext.js';
 

package/dist/esm/elements/menu/utils.js

@@ -30,7 +30,7 @@ const toItem = props => ({
 });
 const toItems = (children, type) => Children.toArray(children).reduce((items, item) => {
   const retVal = items;
-  if ( isValidElement(item)) {
+  if (isValidElement(item)) {
     if ('value' in item.props) {
       retVal.push(toItem({
         ...item.props,

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",