@carbon-labs/react-ui-shell 0.60.0 → 0.62.0

package/es/components/HeaderContainer.js

@@ -7,21 +7,20 @@
 
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState, useCallback, useLayoutEffect, useEffect } from 'react';
+import React__default, { useState, useCallback, useLayoutEffect, useEffect } from 'react';
 import { Escape } from '../internal/keyboard/keys.js';
 import { match } from '../internal/keyboard/match.js';
 import { useWindowEvent } from '../internal/useEvent.js';
 import { usePrefix } from '../internal/usePrefix.js';
 
-function HeaderContainer(_ref) {
-  let {
-    render: Children,
-    isSideNavExpanded = false,
-    isSwitcherExpanded = false,
-    isProfileExpanded = false,
-    themeSetting,
-    ...rest
-  } = _ref;
+function HeaderContainer({
+  render: Children,
+  isSideNavExpanded = false,
+  isSwitcherExpanded = false,
+  isProfileExpanded = false,
+  themeSetting,
+  ...rest
+}) {
   const prefix = usePrefix();
   const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
   const [isSwitcherExpandedState, setSwitcherExpandedState] = useState(isSwitcherExpanded);
@@ -63,7 +62,7 @@ function HeaderContainer(_ref) {
       document.removeEventListener('focusin', handleProfileClosing);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(Children, _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement(Children, _extends({}, rest, {
     isSideNavExpanded: isSideNavExpandedState,
     isSwitcherExpanded: isSwitcherExpandedState,
     isProfileExpanded: isProfileExpandedState,

package/es/components/HeaderDivider.js

@@ -5,18 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import cx from '../_virtual/index.js';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React__default from 'react';
 import { usePrefix } from '../internal/usePrefix.js';
 
-const HeaderDivider = _ref => {
-  let {
-    className
-  } = _ref;
+const HeaderDivider = ({
+  className
+}) => {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--header__divider`, className);
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React__default.createElement("span", {
     className: classNames
   });
 };

package/es/components/HeaderPopover.js

@@ -6,9 +6,9 @@
  */
 
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
-import cx from '../_virtual/index.js';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useContext } from 'react';
+import React__default, { useRef, useState, useContext } from 'react';
 import { Popover, ToggletipContent, ToggletipActions, IconButton } from '@carbon/react';
 import { Escape } from '../internal/keyboard/keys.js';
 import { match } from '../internal/keyboard/match.js';
@@ -18,7 +18,7 @@ import { usePrefix } from '../internal/usePrefix.js';
 
 // Used to coordinate accessibility props between button and content along with
 // the actions to open and close the toggletip
-const HeaderPopoverContext = /*#__PURE__*/React.createContext(undefined);
+const HeaderPopoverContext = /*#__PURE__*/React__default.createContext(undefined);
 function useToggletip() {
   return useContext(HeaderPopoverContext);
 }
@@ -28,16 +28,15 @@ function useToggletip() {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-function HeaderPopover(_ref) {
-  let {
-    align,
-    as,
-    autoAlign,
-    className: customClassName,
-    children,
-    defaultOpen = false,
-    ...rest
-  } = _ref;
+function HeaderPopover({
+  align,
+  as,
+  autoAlign,
+  className: customClassName,
+  children,
+  defaultOpen = false,
+  ...rest
+}) {
   const ref = useRef(null);
   const [open, setOpen] = useState(defaultOpen);
   const prefix = usePrefix();
@@ -100,9 +99,9 @@ function HeaderPopover(_ref) {
       actions.close();
     }
   });
-  return /*#__PURE__*/React.createElement(HeaderPopoverContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(HeaderPopoverContext.Provider, {
     value: value
-  }, /*#__PURE__*/React.createElement(Popover, _extends({
+  }, /*#__PURE__*/React__default.createElement(Popover, _extends({
     align: align,
     autoAlign: autoAlign,
     as: as,
@@ -154,21 +153,20 @@ HeaderPopover.propTypes = {
  * clicks and keyboard interactions.
  */
 
-function HeaderPopoverButton(_ref2) {
-  let {
-    children,
-    className: customClassName,
-    label = 'Show information',
-    as: BaseComponent,
-    ...rest
-  } = _ref2;
+function HeaderPopoverButton({
+  children,
+  className: customClassName,
+  label = 'Show information',
+  as: BaseComponent,
+  ...rest
+}) {
   const toggletip = useToggletip();
   const prefix = usePrefix();
   const className = cx(customClassName, {
     [`${prefix}--header-action__button`]: true
   });
   const ComponentToggle = BaseComponent ?? IconButton;
-  return /*#__PURE__*/React.createElement(ComponentToggle, _extends({}, toggletip?.onClick, {
+  return /*#__PURE__*/React__default.createElement(ComponentToggle, _extends({}, toggletip?.onClick, {
     className: className,
     kind: BaseComponent ? null : 'ghost',
     label: label,
@@ -196,14 +194,13 @@ HeaderPopoverButton.propTypes = {
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-function HeaderPopoverContent(_ref3) {
-  let {
-    children,
-    className,
-    ...rest
-  } = _ref3;
+function HeaderPopoverContent({
+  children,
+  className,
+  ...rest
+}) {
   const prefix = usePrefix();
-  return /*#__PURE__*/React.createElement(ToggletipContent, _extends({
+  return /*#__PURE__*/React__default.createElement(ToggletipContent, _extends({
     className: cx(className, {
       [`${prefix}--header-action__content`]: true
     })

package/es/components/Link.js

@@ -7,23 +7,22 @@
 
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 import deprecate from '../prop-types/deprecate.js';
 
 // Note: Maybe we should use `as` instead of `element`? `as` appears to be
 // standard and is used in other places in this project.
 
-function LinkRenderFunction(_ref, ref) {
-  let {
-    element,
-    as: BaseComponent,
-    // Captured here to prevent it from being passed into the created element.
-    // See https://github.com/carbon-design-system/carbon/issues/3970
-    isSideNavExpanded: _isSideNavExpanded,
-    ...rest
-  } = _ref;
+function LinkRenderFunction({
+  element,
+  as: BaseComponent,
+  // Captured here to prevent it from being passed into the created element.
+  // See https://github.com/carbon-design-system/carbon/issues/3970
+  isSideNavExpanded: _isSideNavExpanded,
+  ...rest
+}, ref) {
   const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
-  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
+  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
     ref: ref
   }, rest));
 }

package/es/components/Profile.js

@@ -6,33 +6,32 @@
  */
 
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
-import cx from '../_virtual/index.js';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React__default from 'react';
 import { usePrefix } from '../internal/usePrefix.js';
 import { HeaderPopover, HeaderPopoverButton, HeaderPopoverContent } from './HeaderPopover.js';
 import { UserAvatar } from '../node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js';
 
-const Profile = /*#__PURE__*/React.forwardRef(function Profile(_ref) {
-  let {
-    className: customClassName,
-    label,
-    children,
-    renderIcon: IconElement,
-    ...rest
-  } = _ref;
+const Profile = /*#__PURE__*/React__default.forwardRef(function Profile({
+  className: customClassName,
+  label,
+  children,
+  renderIcon: IconElement,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--profile`]: true,
     [customClassName]: !!customClassName
   });
-  return /*#__PURE__*/React.createElement(HeaderPopover, _extends({
+  return /*#__PURE__*/React__default.createElement(HeaderPopover, _extends({
     align: "bottom-right",
     className: className
-  }, rest), /*#__PURE__*/React.createElement(HeaderPopoverButton, {
+  }, rest), /*#__PURE__*/React__default.createElement(HeaderPopoverButton, {
     align: "bottom",
     label: label
-  }, IconElement), /*#__PURE__*/React.createElement(HeaderPopoverContent, null, children));
+  }, IconElement), /*#__PURE__*/React__default.createElement(HeaderPopoverContent, null, children));
 });
 Profile.displayName = 'Profile';
 Profile.propTypes = {
@@ -54,28 +53,27 @@ Profile.propTypes = {
   // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-const ProfileUserInfo = /*#__PURE__*/React.forwardRef(function ProfileUserInfo(_ref2) {
-  let {
-    className: customClassName,
-    name,
-    email,
-    ...rest
-  } = _ref2;
+const ProfileUserInfo = /*#__PURE__*/React__default.forwardRef(function ProfileUserInfo({
+  className: customClassName,
+  name,
+  email,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--profile-user-info`]: true,
     [customClassName]: !!customClassName
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: className
-  }, /*#__PURE__*/React.createElement(UserAvatar, _extends({
+  }, /*#__PURE__*/React__default.createElement(UserAvatar, _extends({
     size: "lg",
     name: name
-  }, rest)), /*#__PURE__*/React.createElement("div", {
+  }, rest)), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-user-info__text-wrapper`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-user-info__name`
-  }, name), /*#__PURE__*/React.createElement("div", {
+  }, name), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-user-info__email`
   }, email)));
 });
@@ -94,24 +92,23 @@ ProfileUserInfo.propTypes = {
    */
   name: PropTypes.string.isRequired
 };
-const ProfileReadOnly = /*#__PURE__*/React.forwardRef(function ProfileReadOnly(_ref3) {
-  let {
-    className: customClassName,
-    items
-  } = _ref3;
+const ProfileReadOnly = /*#__PURE__*/React__default.forwardRef(function ProfileReadOnly({
+  className: customClassName,
+  items
+}) {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--profile-read-only`]: true,
     [customClassName]: !!customClassName
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: className
-  }, items?.map((item, index) => /*#__PURE__*/React.createElement("div", {
+  }, items?.map((item, index) => /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-read-only__items`,
     key: index
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-read-only__label`
-  }, item.label), /*#__PURE__*/React.createElement("div", {
+  }, item.label), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-read-only__title`
   }, item.title))));
 });

package/es/components/SharkFinIcon.js

@@ -5,36 +5,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import cx from '../_virtual/index.js';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React__default from 'react';
 import { usePrefix } from '../internal/usePrefix.js';
 
 var _g, _defs;
-const SharkFinIcon = _ref => {
-  let {
-    className: customClassName
-  } = _ref;
+const SharkFinIcon = ({
+  className: customClassName
+}) => {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__icon`]: true,
     [`${prefix}--shark-fin__icon`]: true,
     [customClassName]: !!customClassName
   });
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React__default.createElement("svg", {
     className: className,
     width: "4",
     height: "4",
     viewBox: "0 0 4 4",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, _g || (_g = /*#__PURE__*/React.createElement("g", {
+  }, _g || (_g = /*#__PURE__*/React__default.createElement("g", {
     "clip-path": "url(#clip0_519_52879)"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React__default.createElement("path", {
     d: "M2 2L4 0V4H0L2 2Z"
-  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs || (_defs = /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
     id: "clip0_519_52879"
-  }, /*#__PURE__*/React.createElement("rect", {
+  }, /*#__PURE__*/React__default.createElement("rect", {
     width: "4",
     height: "4",
     fill: "white"

package/es/components/SideNav.js

@@ -6,8 +6,8 @@
  */
 
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
-import React, { createContext, useState, useRef, isValidElement, useEffect } from 'react';
-import cx from '../_virtual/index.js';
+import React__default, { createContext, useState, useRef, isValidElement, useEffect } from 'react';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../prop-types/AriaPropTypes.js';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
@@ -19,8 +19,8 @@ import { useWindowEvent } from '../internal/useEvent.js';
 import { useDelayedState } from '../internal/useDelayedState.js';
 import { breakpoints } from '../node_modules/@carbon/layout/es/index.js';
 import { useMatchMedia } from '../internal/useMatchMedia.js';
+import { SidePanelClose, SidePanelOpen } from '@carbon/icons-react';
 import { SideNavToggle } from './SideNavToggle.js';
-import { SidePanelClose, SidePanelOpen } from '../node_modules/@carbon/icons-react/es/generated/bucket-15.js';
 
 let SIDE_NAV_TYPE = /*#__PURE__*/function (SIDE_NAV_TYPE) {
   SIDE_NAV_TYPE["DEFAULT"] = "default";
@@ -38,33 +38,32 @@ const defaultTranslations = {
 };
 const defaultTranslateWithId = id => defaultTranslations[id];
 const SideNavContext = /*#__PURE__*/createContext({});
-function SideNavRenderFunction(_ref, ref) {
-  let {
-    expanded: expandedProp,
-    defaultExpanded = false,
-    isChildOfHeader = true,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    onToggle,
-    className: customClassName,
-    hideRailBreakpointDown,
-    href,
-    isFixedNav = false,
-    isRail,
-    isPersistent = true,
-    isTreeview: isTreeviewProp,
-    navType = SIDE_NAV_TYPE.DEFAULT,
-    addFocusListeners = true,
-    addMouseListeners = true,
-    onOverlayClick,
-    onSideNavBlur,
-    enterDelayMs = 100,
-    isCollapsible = false,
-    hideOverlay = false,
-    translateWithId: t = defaultTranslateWithId,
-    ...other
-  } = _ref;
+function SideNavRenderFunction({
+  expanded: expandedProp,
+  defaultExpanded = false,
+  isChildOfHeader = true,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  onToggle,
+  className: customClassName,
+  hideRailBreakpointDown,
+  href,
+  isFixedNav = false,
+  isRail,
+  isPersistent = true,
+  isTreeview: isTreeviewProp,
+  navType = SIDE_NAV_TYPE.DEFAULT,
+  addFocusListeners = true,
+  addMouseListeners = true,
+  onOverlayClick,
+  onSideNavBlur,
+  enterDelayMs = 100,
+  isCollapsible = false,
+  hideOverlay = false,
+  translateWithId: t = defaultTranslateWithId,
+  ...other
+}, ref) {
   const [internalIsTreeview, setInternalIsTreeview] = useState(isTreeviewProp ?? false);
   const prefix = usePrefix();
   const {
@@ -77,8 +76,7 @@ function SideNavRenderFunction(_ref, ref) {
   const navRef = useMergedRefs([sideNavRef, ref]);
   const [currentPrimaryMenu, setCurrentPrimaryMenu] = useState();
   const sideNavToggleText = expandedState ? t('collapse.sidenav') : t('expand.sidenav');
-  const handleToggle = function (event) {
-    let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
+  const handleToggle = (event, value = !expanded) => {
     if (!controlled) {
       setExpandedState(value, enterDelayMs);
     }
@@ -112,13 +110,13 @@ function SideNavRenderFunction(_ref, ref) {
   let childrenToRender = children;
 
   // Pass the expansion state as a prop, so children can update themselves to match
-  childrenToRender = React.Children.map(children, child => {
+  childrenToRender = React__default.Children.map(children, child => {
     // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
     const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
     if (/*#__PURE__*/isValidElement(child)) {
       const childJsxElement = child;
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      return /*#__PURE__*/React.cloneElement(childJsxElement, {
+      return /*#__PURE__*/React__default.cloneElement(childJsxElement, {
         ...(CARBON_SIDENAV_ITEMS.includes(childJsxElement.type?.displayName ?? childJsxElement.type?.name) ? {
           isSideNavExpanded: currentExpansionState,
           ...(childJsxElement.type?.displayName === 'SideNavItems' && {
@@ -343,6 +341,14 @@ function SideNavRenderFunction(_ref, ref) {
       handleToggle(true, true);
     };
   }
+  useWindowEvent('click', event => {
+    const target = event.target;
+    const isNavItemClick = target.closest(`.${prefix}--side-nav a, .${prefix}--side-nav button`);
+    const isInRail = isNavItemClick?.closest(`.${prefix}--side-nav--rail`);
+    if (isNavItemClick) {
+      isInRail ? handleToggle(false, false) : onSideNavBlur?.();
+    }
+  });
   useWindowEvent('keydown', event => {
     const focusedElement = document.activeElement;
 
@@ -376,12 +382,12 @@ function SideNavRenderFunction(_ref, ref) {
       setInternalIsTreeview(value);
     }
   };
-  const SideNavToggleButton = /*#__PURE__*/React.createElement(SideNavToggle, {
+  const SideNavToggleButton = /*#__PURE__*/React__default.createElement(SideNavToggle, {
     className: !expandedState ? `${prefix}--side-nav__toggle--collapsed` : '',
     renderIcon: expandedState ? SidePanelClose : SidePanelOpen,
     onClick: () => setExpandedState(!expandedState)
   }, sideNavToggleText);
-  return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(SideNavContext.Provider, {
     value: {
       expanded,
       isRail,
@@ -394,20 +400,20 @@ function SideNavRenderFunction(_ref, ref) {
   }, isFixedNav || hideOverlay ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-  React.createElement("div", {
+  React__default.createElement("div", {
     className: overlayClassName,
     onClick: onOverlayClick
-  }), /*#__PURE__*/React.createElement("nav", _extends({
+  }), /*#__PURE__*/React__default.createElement("nav", _extends({
     role: 'navigation',
     tabIndex: -1,
     ref: navRef,
     className: `${prefix}--side-nav__navigation ${className}`,
     inert: !isRail && navType !== SIDE_NAV_TYPE.PANEL && !(expanded || isLg) ? -1 : undefined
-  }, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.PANEL && (expandedState ? SideNavToggleButton : /*#__PURE__*/React.createElement("div", {
+  }, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.PANEL && (expandedState ? SideNavToggleButton : /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--side-nav__toggle-container`
   }, SideNavToggleButton))));
 }
-const SideNav = /*#__PURE__*/React.forwardRef(SideNavRenderFunction);
+const SideNav = /*#__PURE__*/React__default.forwardRef(SideNavRenderFunction);
 SideNav.displayName = 'SideNav';
 SideNav.propTypes = {
   /**

package/es/components/SideNavFlyoutMenu.js

@@ -6,9 +6,9 @@
  */
 
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
-import cx from '../_virtual/index.js';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import { Popover, PopoverContent, FormLabel } from '@carbon/react';
 import { Escape, Enter, Space } from '../internal/keyboard/keys.js';
 import { match } from '../internal/keyboard/match.js';
@@ -20,23 +20,22 @@ import { usePrefix } from '../internal/usePrefix.js';
  * Event types that trigger a "drag" to stop.
  */
 const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
-function SideNavFlyoutMenu(_ref) {
-  let {
-    align = 'right-start',
-    className: customClassName,
-    children,
-    label,
-    description,
-    enterDelayMs = 100,
-    leaveDelayMs = 300,
-    defaultOpen = false,
-    dropShadow = true,
-    highContrast = false,
-    menuContent,
-    selected = false,
-    title,
-    ...rest
-  } = _ref;
+function SideNavFlyoutMenu({
+  align = 'right-start',
+  className: customClassName,
+  children,
+  label,
+  description,
+  enterDelayMs = 100,
+  leaveDelayMs = 300,
+  defaultOpen = false,
+  dropShadow = true,
+  highContrast = false,
+  menuContent,
+  selected = false,
+  title,
+  ...rest
+}) {
   const popoverRef = useRef(null);
   const [open, setOpen] = useDelayedState(defaultOpen);
   const [isDragging, setIsDragging] = useState(false);
@@ -44,15 +43,15 @@ function SideNavFlyoutMenu(_ref) {
   const [isPointerIntersecting, setIsPointerIntersecting] = useState(false);
   const id = useId('tooltip');
   const prefix = usePrefix();
-  const child = React.Children.only(children);
+  const child = React__default.Children.only(children);
   const menuButton = useRef();
   const [clickMode, setClickMode] = useState(false);
   const isFocusedInsideRef = useRef(false);
   const popoverMenuLinks = useRef(null);
   const [isButtonFocused, setIsButtonFocused] = useState(false);
-  const flyoutMenuItems = React.Children.map(menuContent, child => {
-    if (/*#__PURE__*/React.isValidElement(child)) {
-      return /*#__PURE__*/React.cloneElement(child, {
+  const flyoutMenuItems = React__default.Children.map(menuContent, child => {
+    if (/*#__PURE__*/React__default.isValidElement(child)) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
         ...{
           isFlyoutMenuItem: true
         }
@@ -204,10 +203,9 @@ function SideNavFlyoutMenu(_ref) {
       closeMenu();
     }
   }
-  function closeMenu() {
-    let {
-      revertFocus = false
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  function closeMenu({
+    revertFocus = false
+  } = {}) {
     if (revertFocus) {
       menuButton.current?.focus();
       setOpen(true);
@@ -242,7 +240,7 @@ function SideNavFlyoutMenu(_ref) {
   return (
     /*#__PURE__*/
     // @ts-ignore-error Popover throws a TS error everytime is imported
-    React.createElement(Popover, _extends({
+    React__default.createElement(Popover, _extends({
       ref: popoverRef
     }, rest, {
       align: isButtonFocused ? 'right' : align,
@@ -258,10 +256,10 @@ function SideNavFlyoutMenu(_ref) {
       onKeyDown: onKeyDown,
       onMouseLeave: onMouseLeave,
       open: open
-    }), child !== undefined ? /*#__PURE__*/React.cloneElement(child, {
+    }), child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
       ...triggerProps,
       ...getChildEventHandlers(child.props)
-    }) : null, /*#__PURE__*/React.createElement(PopoverContent, {
+    }) : null, /*#__PURE__*/React__default.createElement(PopoverContent, {
       "aria-hidden": open ? 'false' : 'true',
       className: cx({
         [`${prefix}--side-nav-menu--popover-content`]: !isButtonFocused,
@@ -270,7 +268,7 @@ function SideNavFlyoutMenu(_ref) {
       id: id,
       onMouseEnter: onMouseEnter,
       role: "tooltip"
-    }, !isButtonFocused ? /*#__PURE__*/React.createElement(FormLabel, null, title) : title, /*#__PURE__*/React.createElement("div", {
+    }, !isButtonFocused ? /*#__PURE__*/React__default.createElement(FormLabel, null, title) : title, /*#__PURE__*/React__default.createElement("div", {
       style: {
         display: isButtonFocused ? 'none' : 'block'
       }