@carbon-labs/react-ui-shell 0.87.0 → 0.88.0

package/lib/components/SideNav.js

@@ -8,7 +8,7 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var React__default = require('react');
+var React = require('react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var AriaPropTypes = require('../prop-types/AriaPropTypes.js');
@@ -45,7 +45,7 @@ const defaultTranslations = {
   [translationIds['disable.autoexpand']]: 'Disable auto-expand'
 };
 const defaultTranslateWithId = id => defaultTranslations[id];
-const SideNavContext = /*#__PURE__*/React__default.createContext({});
+const SideNavContext = /*#__PURE__*/React.createContext({});
 function SideNavRenderFunction({
   expanded: expandedProp,
   defaultExpanded = false,
@@ -73,19 +73,19 @@ function SideNavRenderFunction({
   headerOverflowPanel,
   ...other
 }, ref) {
-  const [internalIsTreeview, setInternalIsTreeview] = React__default.useState(isTreeviewProp ?? false);
+  const [internalIsTreeview, setInternalIsTreeview] = React.useState(isTreeviewProp ?? false);
   const prefix = usePrefix.usePrefix();
   const {
     current: controlled
-  } = React__default.useRef(expandedProp !== undefined);
-  const [autoExpand, setAutoExpand] = React__default.useState(false);
+  } = React.useRef(expandedProp !== undefined);
+  const [autoExpand, setAutoExpand] = React.useState(false);
   const [expandedState, setExpandedState] = useDelayedState.useDelayedState(defaultExpanded);
   const [expandedViaHoverState, setExpandedViaHoverState] = useDelayedState.useDelayedState(defaultExpanded);
-  const [pinned, setPinned] = React__default.useState(false);
+  const [pinned, setPinned] = React.useState(false);
   const expanded = controlled ? expandedProp : expandedState;
-  const sideNavRef = React__default.useRef(null);
+  const sideNavRef = React.useRef(null);
   const navRef = useMergedRefs.useMergedRefs([sideNavRef, ref]);
-  const [currentPrimaryMenu, setCurrentPrimaryMenu] = React__default.useState();
+  const [currentPrimaryMenu, setCurrentPrimaryMenu] = React.useState();
   const pinText = pinned ? t('collapse.sidenav') : t('expand.sidenav');
   const autoExpandText = autoExpand ? t('disable.autoexpand') : t('enable.autoexpand');
   const handleToggle = (event, value = !expanded) => {
@@ -123,13 +123,13 @@ function SideNavRenderFunction({
   let childrenToRender = children;
 
   // Pass the expansion state as a prop, so children can update themselves to match
-  childrenToRender = React__default.Children.map(children, child => {
+  childrenToRender = React.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__*/React__default.isValidElement(child)) {
+    if (/*#__PURE__*/React.isValidElement(child)) {
       const childJsxElement = child;
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      return /*#__PURE__*/React__default.cloneElement(childJsxElement, {
+      return /*#__PURE__*/React.cloneElement(childJsxElement, {
         ...(_utils.CARBON_SIDENAV_ITEMS.includes(childJsxElement.type?.displayName ?? childJsxElement.type?.name) ? {
           isSideNavExpanded: currentExpansionState,
           ...(childJsxElement.type?.displayName === 'SideNavItems' && {
@@ -141,7 +141,7 @@ function SideNavRenderFunction({
     return child;
   });
   const eventHandlers = {};
-  const resetNodeTabIndices = React__default.useCallback(() => {
+  const resetNodeTabIndices = React.useCallback(() => {
     const items = sideNavRef?.current?.querySelectorAll('[tabIndex="0"]') ?? [];
     items.forEach(item => {
       if (item.classList.contains(`${prefix}--side-nav__toggle`) || item.classList.contains(`${prefix}--side-nav__back-button`) || item.closest(`.${prefix}--side-nav__slot-item`) || item.classList.contains(`${prefix}--side-nav__link`) && item.closest('ul')?.getAttribute('aria-label') === ariaLabel || item.closest(`.${prefix}--header-overflow-panel-secondary-container`)) {
@@ -150,8 +150,8 @@ function SideNavRenderFunction({
       item.tabIndex = -1;
     });
   }, [prefix, ariaLabel]);
-  const treeWalkerRef = React__default.useRef(null);
-  React__default.useEffect(() => {
+  const treeWalkerRef = React.useRef(null);
+  React.useEffect(() => {
     if (internalIsTreeview) {
       treeWalkerRef.current = treeWalkerRef.current ?? document.createTreeWalker(sideNavRef?.current, NodeFilter.SHOW_ELEMENT, {
         acceptNode: function (node) {
@@ -174,7 +174,7 @@ function SideNavRenderFunction({
   const lgMediaQuery = `(min-width: ${index.breakpoints.lg.width})`;
   const query = !headerOverflowPanel ? smMediaQuery : lgMediaQuery;
   const isSm = useMatchMedia.useMatchMedia(query);
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (sideNavRef.current) {
       const backButton = sideNavRef?.current.querySelector(`.${prefix}--side-nav__back-button`);
       const slotElement = sideNavRef?.current.querySelector(`.${prefix}--side-nav__slot`);
@@ -387,7 +387,7 @@ function SideNavRenderFunction({
   const isLg = useMatchMedia.useMatchMedia(lgMediaQuery);
 
   // ensure that changes are in sync with internal treeview prop
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (isTreeviewProp !== undefined) {
       setInternalIsTreeview(isTreeviewProp);
     }
@@ -412,7 +412,7 @@ function SideNavRenderFunction({
     setExpandedState(!autoExpand);
     setAutoExpand(!autoExpand);
   };
-  return /*#__PURE__*/React__default.createElement(SideNavContext.Provider, {
+  return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
     value: {
       autoExpand,
       expanded,
@@ -427,27 +427,27 @@ function SideNavRenderFunction({
   }, isFixedNav || hideOverlay || navType === SIDE_NAV_TYPE.RAIL_PANEL ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-  React__default.createElement("div", {
+  React.createElement("div", {
     className: overlayClassName,
     onClick: onOverlayClick
-  }), /*#__PURE__*/React__default.createElement("nav", _rollupPluginBabelHelpers.extends({
+  }), /*#__PURE__*/React.createElement("nav", _rollupPluginBabelHelpers.extends({
     role: 'navigation',
     tabIndex: -1,
     ref: navRef,
     className: `${prefix}--side-nav__navigation ${className}`,
     inert: !isRail && navType !== SIDE_NAV_TYPE.RAIL_PANEL && !(expanded || isLg) ? -1 : undefined
-  }, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.RAIL_PANEL && /*#__PURE__*/React__default.createElement("ul", {
+  }, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.RAIL_PANEL && /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--side-nav__toggle-container`
-  }, _SideNavDivider || (_SideNavDivider = /*#__PURE__*/React__default.createElement(react.SideNavDivider, null)), /*#__PURE__*/React__default.createElement(SideNavToggle.SideNavToggle, {
+  }, _SideNavDivider || (_SideNavDivider = /*#__PURE__*/React.createElement(react.SideNavDivider, null)), /*#__PURE__*/React.createElement(SideNavToggle.SideNavToggle, {
     onClick: handlePinClick,
     renderIcon: pinned ? iconsReact.PinFilled : iconsReact.Pin
-  }, pinText), /*#__PURE__*/React__default.createElement(SideNavToggle.SideNavToggle, {
+  }, pinText), /*#__PURE__*/React.createElement(SideNavToggle.SideNavToggle, {
     disabled: pinned,
     renderIcon: expandedState ? iconsReact.SidePanelClose : iconsReact.SidePanelOpen,
     onClick: handleAutoExpand
   }, autoExpandText))));
 }
-const SideNav = /*#__PURE__*/React__default.forwardRef(SideNavRenderFunction);
+const SideNav = /*#__PURE__*/React.forwardRef(SideNavRenderFunction);
 SideNav.displayName = 'SideNav';
 SideNav.propTypes = {
   /**

package/lib/components/SideNavFlyoutMenu.js

@@ -10,7 +10,7 @@
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React__default = require('react');
+var React = require('react');
 var react = require('@carbon/react');
 var keys = require('../internal/keyboard/keys.js');
 var match = require('../internal/keyboard/match.js');
@@ -38,22 +38,22 @@ function SideNavFlyoutMenu({
   title,
   ...rest
 }) {
-  const popoverRef = React__default.useRef(null);
+  const popoverRef = React.useRef(null);
   const [open, setOpen] = useDelayedState.useDelayedState(defaultOpen);
-  const [isDragging, setIsDragging] = React__default.useState(false);
-  const [focusByMouse, setFocusByMouse] = React__default.useState(false);
-  const [isPointerIntersecting, setIsPointerIntersecting] = React__default.useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [focusByMouse, setFocusByMouse] = React.useState(false);
+  const [isPointerIntersecting, setIsPointerIntersecting] = React.useState(false);
   const id = useId.useId('tooltip');
   const prefix = usePrefix.usePrefix();
-  const child = React__default.Children.only(children);
-  const menuButton = React__default.useRef();
-  const [clickMode, setClickMode] = React__default.useState(false);
-  const isFocusedInsideRef = React__default.useRef(false);
-  const popoverMenuLinks = React__default.useRef(null);
-  const [isButtonFocused, setIsButtonFocused] = React__default.useState(false);
-  const flyoutMenuItems = React__default.Children.map(menuContent, child => {
-    if (/*#__PURE__*/React__default.isValidElement(child)) {
-      return /*#__PURE__*/React__default.cloneElement(child, {
+  const child = React.Children.only(children);
+  const menuButton = React.useRef();
+  const [clickMode, setClickMode] = React.useState(false);
+  const isFocusedInsideRef = React.useRef(false);
+  const popoverMenuLinks = React.useRef(null);
+  const [isButtonFocused, setIsButtonFocused] = React.useState(false);
+  const flyoutMenuItems = React.Children.map(menuContent, child => {
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      return /*#__PURE__*/React.cloneElement(child, {
         ...{
           isFlyoutMenuItem: true
         }
@@ -165,7 +165,7 @@ function SideNavFlyoutMenu({
   function onDragStart() {
     setIsDragging(true);
   }
-  const onDragStop = React__default.useCallback(() => {
+  const onDragStop = React.useCallback(() => {
     setIsDragging(false);
     // Close the tooltip, unless the mouse pointer is within the bounds of the
     // trigger.
@@ -174,7 +174,7 @@ function SideNavFlyoutMenu({
       setOpen(false, leaveDelayMs);
     }
   }, [isPointerIntersecting, leaveDelayMs, setOpen]);
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (isDragging) {
       // Register drag stop handlers.
       DRAG_STOP_EVENT_TYPES.forEach(eventType => {
@@ -224,7 +224,7 @@ function SideNavFlyoutMenu({
   }
 
   // initiate menu content to be untabbable
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (popoverRef.current) {
       popoverMenuLinks.current = popoverRef.current.querySelectorAll(`.${prefix}--side-nav-menu--popover-content a`);
       setContentTabIndex('-1');
@@ -233,7 +233,7 @@ function SideNavFlyoutMenu({
   }, []);
 
   // set menu content to be untabbable
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (popoverRef.current && !popoverMenuLinks.current) {
       popoverMenuLinks.current = popoverRef.current.querySelectorAll(`.${prefix}--side-nav-menu--popover-content a`);
       setContentTabIndex('-1');
@@ -242,7 +242,7 @@ function SideNavFlyoutMenu({
   return (
     /*#__PURE__*/
     // @ts-ignore-error Popover throws a TS error everytime is imported
-    React__default.createElement(react.Popover, _rollupPluginBabelHelpers.extends({
+    React.createElement(react.Popover, _rollupPluginBabelHelpers.extends({
       ref: popoverRef
     }, rest, {
       align: isButtonFocused ? 'right' : align,
@@ -258,10 +258,10 @@ function SideNavFlyoutMenu({
       onKeyDown: onKeyDown,
       onMouseLeave: onMouseLeave,
       open: open
-    }), child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
+    }), child !== undefined ? /*#__PURE__*/React.cloneElement(child, {
       ...triggerProps,
       ...getChildEventHandlers(child.props)
-    }) : null, /*#__PURE__*/React__default.createElement(react.PopoverContent, {
+    }) : null, /*#__PURE__*/React.createElement(react.PopoverContent, {
       "aria-hidden": open ? 'false' : 'true',
       className: cx({
         [`${prefix}--side-nav-menu--popover-content`]: !isButtonFocused,
@@ -270,7 +270,7 @@ function SideNavFlyoutMenu({
       id: id,
       onMouseEnter: onMouseEnter,
       role: "tooltip"
-    }, !isButtonFocused ? /*#__PURE__*/React__default.createElement(react.FormLabel, null, title) : title, /*#__PURE__*/React__default.createElement("div", {
+    }, !isButtonFocused ? /*#__PURE__*/React.createElement(react.FormLabel, null, title) : title, /*#__PURE__*/React.createElement("div", {
       style: {
         display: isButtonFocused ? 'none' : 'block'
       }

package/lib/components/SideNavItems.js

@@ -10,7 +10,7 @@
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React__default = require('react');
+var React = require('react');
 var _utils = require('./_utils.js');
 var usePrefix = require('../internal/usePrefix.js');
 var SideNav = require('./SideNav.js');
@@ -24,18 +24,18 @@ const SideNavItems = ({
   const {
     isTreeview,
     currentPrimaryMenu
-  } = React__default.useContext(SideNav.SideNavContext);
-  const listRef = React__default.useRef(null); // Adjust type if necessary
+  } = React.useContext(SideNav.SideNavContext);
+  const listRef = React.useRef(null); // Adjust type if necessary
   const prefix = usePrefix.usePrefix();
   const className = cx([`${prefix}--side-nav__items`], customClassName);
-  const childrenWithExpandedState = React__default.Children.map(children, child => {
-    if (/*#__PURE__*/React__default.isValidElement(child)) {
+  const childrenWithExpandedState = React.Children.map(children, child => {
+    if (/*#__PURE__*/React.isValidElement(child)) {
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
       const childJsxElement = child;
       const childDisplayName = childJsxElement.type?.displayName ?? childJsxElement.type?.name;
       const isCarbonSideNavItem = _utils.CARBON_SIDENAV_ITEMS.includes(childDisplayName);
       const isSideNavMenu = childDisplayName === 'SideNavMenu';
-      return /*#__PURE__*/React__default.cloneElement(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         ...(isCarbonSideNavItem && {
           isSideNavExpanded: isSideNavExpanded
         }),
@@ -45,7 +45,7 @@ const SideNavItems = ({
       });
     }
   });
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     // set SideNavLink's role without needing to extend original component
     if (isTreeview && listRef.current) {
       const sideNavItem = listRef.current.querySelectorAll(`.${prefix}--side-nav__item a`);
@@ -56,7 +56,7 @@ const SideNavItems = ({
       });
     }
   }, [isTreeview]);
-  return /*#__PURE__*/React__default.createElement("ul", _rollupPluginBabelHelpers.extends({}, isTreeview && accessibilityLabel, {
+  return /*#__PURE__*/React.createElement("ul", _rollupPluginBabelHelpers.extends({}, isTreeview && accessibilityLabel, {
     ref: listRef,
     className: className,
     tabIndex: currentPrimaryMenu ? -1 : undefined,

package/lib/components/SideNavLink.js

@@ -12,14 +12,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React__default = require('react');
+var React = require('react');
 var Link = require('./Link.js');
 var react = require('@carbon/react');
 var usePrefix = require('../internal/usePrefix.js');
 var SideNav = require('./SideNav.js');
 var SideNavLinkPopover = require('./SideNavLinkPopover.js');
 
-const SideNavLink = /*#__PURE__*/React__default.forwardRef(function SideNavLink({
+const SideNavLink = /*#__PURE__*/React.forwardRef(function SideNavLink({
   children,
   className: customClassName,
   renderIcon: IconElement,
@@ -33,29 +33,29 @@ const SideNavLink = /*#__PURE__*/React__default.forwardRef(function SideNavLink(
     expanded,
     isRail,
     navType
-  } = React__default.useContext(SideNav.SideNavContext);
+  } = React.useContext(SideNav.SideNavContext);
   const prefix = usePrefix.usePrefix();
   const className = cx({
     [`${prefix}--side-nav__link`]: true,
     [`${prefix}--side-nav__link--current`]: isActive,
     [customClassName]: !!customClassName
   });
-  const SideNavLinkIcon = IconElement && /*#__PURE__*/React__default.createElement(react.SideNavIcon, {
+  const SideNavLinkIcon = IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, {
     small: true
-  }, /*#__PURE__*/React__default.createElement(IconElement, null));
+  }, /*#__PURE__*/React.createElement(IconElement, null));
   if (!expanded && navType === SideNav.SIDE_NAV_TYPE.RAIL_PANEL) {
-    return /*#__PURE__*/React__default.createElement(SideNavLinkPopover.SideNavLinkPopover, _rollupPluginBabelHelpers.extends({
+    return /*#__PURE__*/React.createElement(SideNavLinkPopover.SideNavLinkPopover, _rollupPluginBabelHelpers.extends({
       align: "right",
       label: children
     }, rest), SideNavLinkIcon);
   }
-  return /*#__PURE__*/React__default.createElement(react.SideNavItem, {
+  return /*#__PURE__*/React.createElement(react.SideNavItem, {
     large: large
-  }, /*#__PURE__*/React__default.createElement(Link.default, _rollupPluginBabelHelpers.extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Link.default, _rollupPluginBabelHelpers.extends({}, rest, {
     className: className,
     ref: ref,
     tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
-  }), SideNavLinkIcon, /*#__PURE__*/React__default.createElement(react.SideNavLinkText, null, children)));
+  }), SideNavLinkIcon, /*#__PURE__*/React.createElement(react.SideNavLinkText, null, children)));
 });
 SideNavLink.displayName = 'SideNavLink';
 SideNavLink.propTypes = {

package/lib/components/SideNavLinkPopover.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React__default = require('react');
+var React = require('react');
 var react = require('@carbon/react');
 var usePrefix = require('../internal/usePrefix.js');
 
@@ -22,7 +22,7 @@ function SideNavLinkPopover({
   ...rest
 }) {
   const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React__default.createElement(react.IconButton, _rollupPluginBabelHelpers.extends({
+  return /*#__PURE__*/React.createElement(react.IconButton, _rollupPluginBabelHelpers.extends({
     className: cx(className, `${prefix}--side-nav-link-popover`),
     dropShadow: true,
     highContrast: false,

package/lib/components/SideNavMenu.js

@@ -12,7 +12,7 @@ var react = require('@carbon/react');
 var index = require('../node_modules/@carbon/layout/es/index.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React__default = require('react');
+var React = require('react');
 var _utils = require('./_utils.js');
 var useId = require('../internal/useId.js');
 var keys = require('../internal/keyboard/keys.js');
@@ -28,8 +28,8 @@ var useMatchMedia = require('../internal/useMatchMedia.js');
 var _ArrowLeft, _SharkFinIcon, _ChevronRight, _ChevronDown;
 const smMediaQuery = `(max-width: ${index.breakpoints.md.width})`;
 const mdMediaQuery = `(max-width: ${index.breakpoints.lg.width})`;
-const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu({
-  backButtonRenderIcon = () => _ArrowLeft || (_ArrowLeft = /*#__PURE__*/React__default.createElement(iconsReact.ArrowLeft, {
+const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu({
+  backButtonRenderIcon = () => _ArrowLeft || (_ArrowLeft = /*#__PURE__*/React.createElement(iconsReact.ArrowLeft, {
     size: 16
   })),
   backButtonTitle = 'My products',
@@ -55,31 +55,31 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     isRail,
     setIsTreeview,
     headerOverflowPanel
-  } = React__default.useContext(SideNav.SideNavContext);
+  } = React.useContext(SideNav.SideNavContext);
   const sideNavExpanded = expanded;
   const prefix = usePrefix.usePrefix();
-  const [isExpanded, setIsExpanded] = React__default.useState(defaultExpanded);
-  const [active, setActive] = React__default.useState(isActive);
-  const firstLink = React__default.useRef(null);
-  const backButtonRef = React__default.useRef(null);
+  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
+  const [active, setActive] = React.useState(isActive);
+  const firstLink = React.useRef(null);
+  const backButtonRef = React.useRef(null);
   const uid = useId.useId('side-nav-menu');
   const uniqueId = id || uid;
-  const [prevExpanded, setPrevExpanded] = React__default.useState(defaultExpanded);
-  const [isSecondaryOpen, setSecondaryOpen] = React__default.useState(defaultExpanded);
+  const [prevExpanded, setPrevExpanded] = React.useState(defaultExpanded);
+  const [isSecondaryOpen, setSecondaryOpen] = React.useState(defaultExpanded);
   const {
     autoExpand,
     currentPrimaryMenu,
     setCurrentPrimaryMenu
-  } = React__default.useContext(SideNav.SideNavContext);
+  } = React.useContext(SideNav.SideNavContext);
 
   /**
     Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
     a single element, an array of elements, or null or undefined.
   **/
-  const hasActiveDescendantInner = React__default.useCallback(children => {
+  const hasActiveDescendantInner = React.useCallback(children => {
     if (Array.isArray(children)) {
       return children.some(child => {
-        if (! /*#__PURE__*/React__default.isValidElement(child)) {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
           // setActive(false);
           return false;
         }
@@ -98,7 +98,7 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
 
     // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
 
-    if (/*#__PURE__*/React__default.isValidElement(children)) {
+    if (/*#__PURE__*/React.isValidElement(children)) {
       const props = children.props;
       if (props.isActive === true || props['aria-current']) {
         return true;
@@ -106,13 +106,13 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     }
     return false;
   }, []);
-  const hasActiveDescendant = React__default.useMemo(() => {
+  const hasActiveDescendant = React.useMemo(() => {
     return hasActiveDescendantInner(children);
   }, [children, hasActiveDescendantInner]);
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     setActive(hasActiveDescendant);
   }, [hasActiveDescendant]);
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (navType == SideNav.SIDE_NAV_TYPE.RAIL_PANEL) {
       // grab first link to redirect if clicked when not expanded
       if (!firstLink?.current && listRef?.current) {
@@ -144,8 +144,8 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     [`${prefix}--side-nav__menu-secondary-wrapper`]: true,
     [`${prefix}--side-nav__menu-secondary-wrapper-expanded`]: isSideNavExpanded && isSecondaryOpen && currentPrimaryMenu === uniqueId
   });
-  const buttonRef = React__default.useRef(null);
-  const listRef = React__default.useRef(null);
+  const buttonRef = React.useRef(null);
+  const listRef = React.useRef(null);
   const menuRef = useMergedRefs.useMergedRefs([buttonRef, ref]);
   if (isSideNavCollapsed && isExpanded && isRail) {
     setIsExpanded(false);
@@ -157,12 +157,12 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
   let childrenToRender = children;
 
   // modify nested SideNavMenus
-  childrenToRender = React__default.Children.map(children, child => {
-    if (/*#__PURE__*/React__default.isValidElement(child)) {
+  childrenToRender = React.Children.map(children, child => {
+    if (/*#__PURE__*/React.isValidElement(child)) {
       const childJsxElement = child;
       const childDisplayName = childJsxElement.type?.displayName ?? childJsxElement.type?.name;
       const isCarbonSideNavItem = _utils.CARBON_SIDENAV_ITEMS.includes(childDisplayName);
-      return /*#__PURE__*/React__default.cloneElement(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         ...(isCarbonSideNavItem && {
           isSideNavExpanded: !isSideNavCollapsed
         }),
@@ -280,19 +280,19 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     }
     setIsExpanded(false);
   }
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (isExpanded && primary && setCurrentPrimaryMenu) {
       setCurrentPrimaryMenu(uniqueId);
     }
     setSecondaryOpen(isExpanded);
   }, [isExpanded]);
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (primary) {
       setIsExpanded(currentPrimaryMenu === uniqueId);
     }
   }, [currentPrimaryMenu]);
   // reset to opened/collapsed menu state when Panel SideNav is toggled
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (navType == SideNav.SIDE_NAV_TYPE.RAIL_PANEL && !sideNavExpanded) {
       setIsExpanded(false);
     }
@@ -302,12 +302,12 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
       setIsExpanded(true);
     }
   }, [sideNavExpanded]);
-  const [openPopover, setOpenPopover] = React__default.useState(false);
+  const [openPopover, setOpenPopover] = React.useState(false);
   const query = !headerOverflowPanel ? smMediaQuery : mdMediaQuery;
   const isSm = useMatchMedia.useMatchMedia(query);
 
   // keeps the secondary open when moving from small to large breakpoints
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (!isSm && uniqueId === currentPrimaryMenu) {
       setIsExpanded(true);
     }
@@ -315,14 +315,14 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
   const content =
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-  React__default.createElement("li", {
+  React.createElement("li", {
     role: isTreeview ? 'treeitem' : undefined,
     "aria-expanded": isExpanded,
     className: className,
     ref: listRef,
     onKeyDown: handleKeyDown,
     id: uniqueId
-  }, /*#__PURE__*/React__default.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     "aria-expanded": isExpanded,
     className: buttonClassName,
     onClick: () => {
@@ -344,46 +344,46 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     ref: menuRef,
     type: "button",
     tabIndex: isTreeview ? -1 : 0
-  }, IconElement && /*#__PURE__*/React__default.createElement(react.SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), !autoExpand && !sideNavExpanded && navType == SideNav.SIDE_NAV_TYPE.RAIL_PANEL && /*#__PURE__*/React__default.createElement("div", {
+  }, IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), !autoExpand && !sideNavExpanded && navType == SideNav.SIDE_NAV_TYPE.RAIL_PANEL && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--side-nav--panel-submenu-caret-container`
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--side-nav--panel-submenu-caret`
-  }, _SharkFinIcon || (_SharkFinIcon = /*#__PURE__*/React__default.createElement(SharkFinIcon.SharkFinIcon, null)))), /*#__PURE__*/React__default.createElement("span", {
+  }, _SharkFinIcon || (_SharkFinIcon = /*#__PURE__*/React.createElement(SharkFinIcon.SharkFinIcon, null)))), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--side-nav__submenu-title`
-  }, title), /*#__PURE__*/React__default.createElement(react.SideNavIcon, {
+  }, title), /*#__PURE__*/React.createElement(react.SideNavIcon, {
     className: `${prefix}--side-nav__submenu-chevron`,
     small: true
-  }, primary ? _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default.createElement(iconsReact.ChevronRight, {
+  }, primary ? _ChevronRight || (_ChevronRight = /*#__PURE__*/React.createElement(iconsReact.ChevronRight, {
     size: 20
-  })) : _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(iconsReact.ChevronDown, {
+  })) : _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(iconsReact.ChevronDown, {
     size: 20
-  })))), primary ? /*#__PURE__*/React__default.createElement(react.Layer, null, /*#__PURE__*/React__default.createElement("div", {
+  })))), primary ? /*#__PURE__*/React.createElement(react.Layer, null, /*#__PURE__*/React.createElement("div", {
     className: secondaryClassNames
-  }, !headerOverflowPanel ? /*#__PURE__*/React__default.createElement(SideNavItems.SideNavItems, {
+  }, !headerOverflowPanel ? /*#__PURE__*/React.createElement(SideNavItems.SideNavItems, {
     accessibilityLabel: {
       'aria-label': `${title} submenu`
     }
-  }, isSm && /*#__PURE__*/React__default.createElement(react.Button, {
+  }, isSm && /*#__PURE__*/React.createElement(react.Button, {
     ref: backButtonRef,
     kind: "ghost",
     size: "md",
     onClick: handleOnBackButtonClick,
     className: `${prefix}--side-nav__back-button`,
     renderIcon: backButtonRenderIcon
-  }, backButtonTitle), childrenToRender) : /*#__PURE__*/React__default.createElement("div", {
+  }, backButtonTitle), childrenToRender) : /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--header-overflow-panel-secondary-container`
-  }, /*#__PURE__*/React__default.createElement(react.Button, {
+  }, /*#__PURE__*/React.createElement(react.Button, {
     ref: backButtonRef,
     kind: "ghost",
     size: "md",
     onClick: handleOnBackButtonClick,
     className: `${prefix}--side-nav__back-button`,
     renderIcon: backButtonRenderIcon
-  }, backButtonTitle), childrenToRender))) : /*#__PURE__*/React__default.createElement("ul", {
+  }, backButtonTitle), childrenToRender))) : /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--side-nav__menu`,
     role: "group"
   }, childrenToRender));
-  return navType == SideNav.SIDE_NAV_TYPE.RAIL_PANEL && !sideNavExpanded ? /*#__PURE__*/React__default.createElement(SideNavFlyoutMenu.SideNavFlyoutMenu, {
+  return navType == SideNav.SIDE_NAV_TYPE.RAIL_PANEL && !sideNavExpanded ? /*#__PURE__*/React.createElement(SideNavFlyoutMenu.SideNavFlyoutMenu, {
     selected: active,
     className: `${prefix}--side-nav-flyout-menu`,
     title: title,