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

package/lib/components/SideNav.js

@@ -8,8 +8,8 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var index = require('../_virtual/index.js');
+var React__default = require('react');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
 var AriaPropTypes = require('../prop-types/AriaPropTypes.js');
 var _utils = require('./_utils.js');
@@ -19,10 +19,10 @@ var match = require('../internal/keyboard/match.js');
 var useMergedRefs = require('../internal/useMergedRefs.js');
 var useEvent = require('../internal/useEvent.js');
 var useDelayedState = require('../internal/useDelayedState.js');
-var index$1 = require('../node_modules/@carbon/layout/es/index.js');
+var index = require('../node_modules/@carbon/layout/es/index.js');
 var useMatchMedia = require('../internal/useMatchMedia.js');
+var iconsReact = require('@carbon/icons-react');
 var SideNavToggle = require('./SideNavToggle.js');
-var bucket15 = require('../node_modules/@carbon/icons-react/es/generated/bucket-15.js');
 
 let SIDE_NAV_TYPE = /*#__PURE__*/function (SIDE_NAV_TYPE) {
   SIDE_NAV_TYPE["DEFAULT"] = "default";
@@ -39,48 +39,46 @@ const defaultTranslations = {
   [translationIds['expand.sidenav']]: 'Expand'
 };
 const defaultTranslateWithId = id => defaultTranslations[id];
-const SideNavContext = /*#__PURE__*/React.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;
-  const [internalIsTreeview, setInternalIsTreeview] = React.useState(isTreeviewProp ?? false);
+const SideNavContext = /*#__PURE__*/React__default.createContext({});
+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] = React__default.useState(isTreeviewProp ?? false);
   const prefix = usePrefix.usePrefix();
   const {
     current: controlled
-  } = React.useRef(expandedProp !== undefined);
+  } = React__default.useRef(expandedProp !== undefined);
   const [expandedState, setExpandedState] = useDelayedState.useDelayedState(defaultExpanded);
   const [expandedViaHoverState, setExpandedViaHoverState] = useDelayedState.useDelayedState(defaultExpanded);
   const expanded = controlled ? expandedProp : expandedState;
-  const sideNavRef = React.useRef(null);
+  const sideNavRef = React__default.useRef(null);
   const navRef = useMergedRefs.useMergedRefs([sideNavRef, ref]);
-  const [currentPrimaryMenu, setCurrentPrimaryMenu] = React.useState();
+  const [currentPrimaryMenu, setCurrentPrimaryMenu] = React__default.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);
     }
@@ -95,7 +93,7 @@ function SideNavRenderFunction(_ref, ref) {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   };
-  const className = index.default(customClassName, {
+  const className = cx(customClassName, {
     [`${prefix}--side-nav`]: true,
     [`${prefix}--side-nav--expanded`]: expanded || expandedViaHoverState,
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
@@ -107,20 +105,20 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav--collapsible`]: isCollapsible,
     [`${prefix}--side-nav--with-overlay`]: !hideOverlay
   });
-  const overlayClassName = index.default({
+  const overlayClassName = cx({
     [`${prefix}--side-nav__overlay`]: true,
     [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState
   });
   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__*/React.isValidElement(child)) {
+    if (/*#__PURE__*/React__default.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, {
         ...(_utils.CARBON_SIDENAV_ITEMS.includes(childJsxElement.type?.displayName ?? childJsxElement.type?.name) ? {
           isSideNavExpanded: currentExpansionState,
           ...(childJsxElement.type?.displayName === 'SideNavItems' && {
@@ -132,8 +130,8 @@ function SideNavRenderFunction(_ref, ref) {
     return child;
   });
   const eventHandlers = {};
-  const treeWalkerRef = React.useRef(null);
-  React.useEffect(() => {
+  const treeWalkerRef = React__default.useRef(null);
+  React__default.useEffect(() => {
     if (internalIsTreeview) {
       treeWalkerRef.current = treeWalkerRef.current ?? document.createTreeWalker(sideNavRef?.current, NodeFilter.SHOW_ELEMENT, {
         acceptNode: function (node) {
@@ -152,9 +150,9 @@ function SideNavRenderFunction(_ref, ref) {
       resetNodeTabIndices();
     }
   }, [prefix, internalIsTreeview]);
-  const smMediaQuery = `(min-width: ${index$1.breakpoints.sm.width})`;
+  const smMediaQuery = `(min-width: ${index.breakpoints.sm.width})`;
   const isSm = useMatchMedia.useMatchMedia(smMediaQuery);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (sideNavRef.current) {
       const backButton = sideNavRef?.current.querySelector(`.${prefix}--side-nav__back-button`);
       const slotElement = sideNavRef?.current.querySelector(`.${prefix}--side-nav__slot`);
@@ -345,6 +343,14 @@ function SideNavRenderFunction(_ref, ref) {
       handleToggle(true, true);
     };
   }
+  useEvent.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?.();
+    }
+  });
   useEvent.useWindowEvent('keydown', event => {
     const focusedElement = document.activeElement;
 
@@ -353,7 +359,7 @@ function SideNavRenderFunction(_ref, ref) {
       sideNavRef.current.focus();
     }
   });
-  const lgMediaQuery = `(min-width: ${index$1.breakpoints.lg.width})`;
+  const lgMediaQuery = `(min-width: ${index.breakpoints.lg.width})`;
   const isLg = useMatchMedia.useMatchMedia(lgMediaQuery);
   function resetNodeTabIndices() {
     const items = sideNavRef?.current?.querySelectorAll('[tabIndex="0"]') ?? [];
@@ -366,7 +372,7 @@ function SideNavRenderFunction(_ref, ref) {
   }
 
   // ensure that changes are in sync with internal treeview prop
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (isTreeviewProp !== undefined) {
       setInternalIsTreeview(isTreeviewProp);
     }
@@ -378,12 +384,12 @@ function SideNavRenderFunction(_ref, ref) {
       setInternalIsTreeview(value);
     }
   };
-  const SideNavToggleButton = /*#__PURE__*/React.createElement(SideNavToggle.SideNavToggle, {
+  const SideNavToggleButton = /*#__PURE__*/React__default.createElement(SideNavToggle.SideNavToggle, {
     className: !expandedState ? `${prefix}--side-nav__toggle--collapsed` : '',
-    renderIcon: expandedState ? bucket15.SidePanelClose : bucket15.SidePanelOpen,
+    renderIcon: expandedState ? iconsReact.SidePanelClose : iconsReact.SidePanelOpen,
     onClick: () => setExpandedState(!expandedState)
   }, sideNavToggleText);
-  return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(SideNavContext.Provider, {
     value: {
       expanded,
       isRail,
@@ -396,20 +402,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", _rollupPluginBabelHelpers.extends({
+  }), /*#__PURE__*/React__default.createElement("nav", _rollupPluginBabelHelpers.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/lib/components/SideNavFlyoutMenu.js

@@ -8,9 +8,9 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../_virtual/index.js');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React = require('react');
+var React__default = require('react');
 var react = require('@carbon/react');
 var keys = require('../internal/keyboard/keys.js');
 var match = require('../internal/keyboard/match.js');
@@ -22,39 +22,38 @@ var usePrefix = require('../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;
-  const popoverRef = React.useRef(null);
+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 = React__default.useRef(null);
   const [open, setOpen] = useDelayedState.useDelayedState(defaultOpen);
-  const [isDragging, setIsDragging] = React.useState(false);
-  const [focusByMouse, setFocusByMouse] = React.useState(false);
-  const [isPointerIntersecting, setIsPointerIntersecting] = React.useState(false);
+  const [isDragging, setIsDragging] = React__default.useState(false);
+  const [focusByMouse, setFocusByMouse] = React__default.useState(false);
+  const [isPointerIntersecting, setIsPointerIntersecting] = React__default.useState(false);
   const id = useId.useId('tooltip');
   const prefix = usePrefix.usePrefix();
-  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, {
+  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, {
         ...{
           isFlyoutMenuItem: true
         }
@@ -166,7 +165,7 @@ function SideNavFlyoutMenu(_ref) {
   function onDragStart() {
     setIsDragging(true);
   }
-  const onDragStop = React.useCallback(() => {
+  const onDragStop = React__default.useCallback(() => {
     setIsDragging(false);
     // Close the tooltip, unless the mouse pointer is within the bounds of the
     // trigger.
@@ -175,7 +174,7 @@ function SideNavFlyoutMenu(_ref) {
       setOpen(false, leaveDelayMs);
     }
   }, [isPointerIntersecting, leaveDelayMs, setOpen]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (isDragging) {
       // Register drag stop handlers.
       DRAG_STOP_EVENT_TYPES.forEach(eventType => {
@@ -206,10 +205,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);
@@ -226,7 +224,7 @@ function SideNavFlyoutMenu(_ref) {
   }
 
   // initiate menu content to be untabbable
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (popoverRef.current) {
       popoverMenuLinks.current = popoverRef.current.querySelectorAll(`.${prefix}--side-nav-menu--popover-content a`);
       setContentTabIndex('-1');
@@ -235,7 +233,7 @@ function SideNavFlyoutMenu(_ref) {
   }, []);
 
   // set menu content to be untabbable
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (popoverRef.current && !popoverMenuLinks.current) {
       popoverMenuLinks.current = popoverRef.current.querySelectorAll(`.${prefix}--side-nav-menu--popover-content a`);
       setContentTabIndex('-1');
@@ -244,11 +242,11 @@ function SideNavFlyoutMenu(_ref) {
   return (
     /*#__PURE__*/
     // @ts-ignore-error Popover throws a TS error everytime is imported
-    React.createElement(react.Popover, _rollupPluginBabelHelpers.extends({
+    React__default.createElement(react.Popover, _rollupPluginBabelHelpers.extends({
       ref: popoverRef
     }, rest, {
       align: isButtonFocused ? 'right' : align,
-      className: index.default(customClassName, {
+      className: cx(customClassName, {
         [`${prefix}--flyout-menu`]: true,
         [`${prefix}--flyout-menu-clicked`]: clickMode,
         [`${prefix}--flyout-menu-selected`]: selected,
@@ -260,19 +258,19 @@ 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(react.PopoverContent, {
+    }) : null, /*#__PURE__*/React__default.createElement(react.PopoverContent, {
       "aria-hidden": open ? 'false' : 'true',
-      className: index.default({
+      className: cx({
         [`${prefix}--side-nav-menu--popover-content`]: !isButtonFocused,
         [`${prefix}--flyout-tooltip-content ${prefix}--tooltip-content`]: isButtonFocused
       }),
       id: id,
       onMouseEnter: onMouseEnter,
       role: "tooltip"
-    }, !isButtonFocused ? /*#__PURE__*/React.createElement(react.FormLabel, null, title) : title, /*#__PURE__*/React.createElement("div", {
+    }, !isButtonFocused ? /*#__PURE__*/React__default.createElement(react.FormLabel, null, title) : title, /*#__PURE__*/React__default.createElement("div", {
       style: {
         display: isButtonFocused ? 'none' : 'block'
       }

package/lib/components/SideNavItems.js

@@ -8,35 +8,34 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../_virtual/index.js');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React = require('react');
+var React__default = require('react');
 var _utils = require('./_utils.js');
 var usePrefix = require('../internal/usePrefix.js');
 var SideNav = require('./SideNav.js');
 
-const SideNavItems = _ref => {
-  let {
-    className: customClassName,
-    children,
-    isSideNavExpanded,
-    accessibilityLabel: accessibilityLabel
-  } = _ref;
+const SideNavItems = ({
+  className: customClassName,
+  children,
+  isSideNavExpanded,
+  accessibilityLabel: accessibilityLabel
+}) => {
   const {
     isTreeview,
     currentPrimaryMenu
-  } = React.useContext(SideNav.SideNavContext);
-  const listRef = React.useRef(null); // Adjust type if necessary
+  } = React__default.useContext(SideNav.SideNavContext);
+  const listRef = React__default.useRef(null); // Adjust type if necessary
   const prefix = usePrefix.usePrefix();
-  const className = index.default([`${prefix}--side-nav__items`], customClassName);
-  const childrenWithExpandedState = React.Children.map(children, child => {
-    if (/*#__PURE__*/React.isValidElement(child)) {
+  const className = cx([`${prefix}--side-nav__items`], customClassName);
+  const childrenWithExpandedState = React__default.Children.map(children, child => {
+    if (/*#__PURE__*/React__default.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.cloneElement(child, {
+      return /*#__PURE__*/React__default.cloneElement(child, {
         ...(isCarbonSideNavItem && {
           isSideNavExpanded: isSideNavExpanded
         }),
@@ -46,7 +45,7 @@ const SideNavItems = _ref => {
       });
     }
   });
-  React.useEffect(() => {
+  React__default.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`);
@@ -57,7 +56,7 @@ const SideNavItems = _ref => {
       });
     }
   }, [isTreeview]);
-  return /*#__PURE__*/React.createElement("ul", _rollupPluginBabelHelpers.extends({}, isTreeview && accessibilityLabel, {
+  return /*#__PURE__*/React__default.createElement("ul", _rollupPluginBabelHelpers.extends({}, isTreeview && accessibilityLabel, {
     ref: listRef,
     className: className,
     tabIndex: currentPrimaryMenu ? -1 : undefined,

package/lib/components/SideNavLink.js

@@ -10,53 +10,52 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../_virtual/index.js');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React = require('react');
+var React__default = 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.forwardRef(function SideNavLink(_ref, ref) {
-  let {
-    children,
-    className: customClassName,
-    renderIcon: IconElement,
-    isActive,
-    isSideNavExpanded,
-    large = false,
-    tabIndex,
-    ...rest
-  } = _ref;
+const SideNavLink = /*#__PURE__*/React__default.forwardRef(function SideNavLink({
+  children,
+  className: customClassName,
+  renderIcon: IconElement,
+  isActive,
+  isSideNavExpanded,
+  large = false,
+  tabIndex,
+  ...rest
+}, ref) {
   const {
     expanded,
     isRail,
     navType
-  } = React.useContext(SideNav.SideNavContext);
+  } = React__default.useContext(SideNav.SideNavContext);
   const prefix = usePrefix.usePrefix();
-  const className = index.default({
+  const className = cx({
     [`${prefix}--side-nav__link`]: true,
     [`${prefix}--side-nav__link--current`]: isActive,
     [customClassName]: !!customClassName
   });
-  const SideNavLinkIcon = IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, {
+  const SideNavLinkIcon = IconElement && /*#__PURE__*/React__default.createElement(react.SideNavIcon, {
     small: true
-  }, /*#__PURE__*/React.createElement(IconElement, null));
+  }, /*#__PURE__*/React__default.createElement(IconElement, null));
   if (!expanded && navType === 'panel') {
-    return /*#__PURE__*/React.createElement(SideNavLinkPopover.SideNavLinkPopover, _rollupPluginBabelHelpers.extends({
+    return /*#__PURE__*/React__default.createElement(SideNavLinkPopover.SideNavLinkPopover, _rollupPluginBabelHelpers.extends({
       align: "right",
       label: children
     }, rest), SideNavLinkIcon);
   }
-  return /*#__PURE__*/React.createElement(react.SideNavItem, {
+  return /*#__PURE__*/React__default.createElement(react.SideNavItem, {
     large: large
-  }, /*#__PURE__*/React.createElement(Link.default, _rollupPluginBabelHelpers.extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(Link.default, _rollupPluginBabelHelpers.extends({}, rest, {
     className: className,
     ref: ref,
     tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
-  }), SideNavLinkIcon, /*#__PURE__*/React.createElement(react.SideNavLinkText, null, children)));
+  }), SideNavLinkIcon, /*#__PURE__*/React__default.createElement(react.SideNavLinkText, null, children)));
 });
 SideNavLink.displayName = 'SideNavLink';
 SideNavLink.propTypes = {

package/lib/components/SideNavLinkPopover.js

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