@carbon/react 1.83.0 → 1.84.0

package/lib/components/UIShell/HeaderMenu.js

@@ -20,6 +20,7 @@ var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var events = require('../../tools/events.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,204 +28,163 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-/**
- * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
- * will be a `HeaderMenuItem`. It handles certain keyboard events to help
- * with managing focus. It also passes along refs to each child so that it can
- * help manage focus state of its children.
- */
+const frFn = React.forwardRef;
+const HeaderMenu = frFn((props, ref) => {
+  const {
+    isActive,
+    isCurrentPage,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    className: customClassName,
+    children,
+    renderMenuContent: MenuContent,
+    menuLinkName,
+    focusRef,
+    onBlur,
+    onClick,
+    onKeyDown,
+    ...rest
+  } = props;
+  const prefix = React.useContext(usePrefix.PrefixContext);
+  const [expanded, setExpanded] = React.useState(false);
+  const menuButtonRef = React.useRef(null);
+  const subMenusRef = React.useRef(null);
+  const itemRefs = React.useRef([]);
+  const mergedButtonRef = useMergedRefs.useMergedRefs([ref, focusRef, menuButtonRef]);
 
-class HeaderMenu extends React__default["default"].Component {
-  constructor(props) {
-    super(props);
-    _rollupPluginBabelHelpers.defineProperty(this, "_subMenus", /*#__PURE__*/React__default["default"].createRef());
-    _rollupPluginBabelHelpers.defineProperty(this, "items", []);
-    _rollupPluginBabelHelpers.defineProperty(this, "menuButtonRef", null);
-    /**
-     * Toggle the expanded state of the menu on click.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleOnClick", e => {
-      const {
-        current: subMenusNode
-      } = this._subMenus;
-      if (!subMenusNode || !subMenusNode.contains(e.target)) {
-        e.preventDefault();
-      }
-      this.setState(prevState => ({
-        expanded: !prevState.expanded
-      }));
-    });
-    /**
-     * Keyboard event handler for the entire menu.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleOnKeyDown", event => {
-      // Handle enter or space key for toggling the expanded state of the menu.
-      if (match.matches(event, [keys.Enter, keys.Space])) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.setState(prevState => ({
-          expanded: !prevState.expanded
-        }));
-        return;
-      }
-    });
-    /**
-     * Handle our blur event from our underlying menuitems. Will mostly be used
-     * for closing our menu in response to a user clicking off or tabbing out of
-     * the menu or menubar.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleOnBlur", event => {
-      // Close the menu on blur when the related target is not a sibling menu item
-      // or a child in a submenu
-      const siblingItemBlurredTo = this.items.find(element => element === event.relatedTarget);
-      const childItemBlurredTo = this._subMenus.current?.contains(event.relatedTarget);
-      if (!siblingItemBlurredTo && !childItemBlurredTo) {
-        this.setState({
-          expanded: false,
-          selectedIndex: null
-        });
-      }
-    });
-    /**
-     * ref handler for our menu button. If we are supplied a `focusRef` prop, we also
-     * forward along the node.
-     *
-     * This is useful when this component is a child in a
-     * menu or menubar as it will allow the parent to explicitly focus the menu
-     * button node when that child should receive focus.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleMenuButtonRef", node => {
-      const {
-        focusRef
-      } = this.props;
-      // Check if focusRef is a function before calling it
-      if (typeof focusRef === 'function') {
-        focusRef(node);
-      }
-      this.menuButtonRef = node;
-    });
-    /**
-     * Handles individual menuitem refs. We assign them to a class instance
-     * property so that we can properly manage focus of our children.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleItemRef", index => node => {
-      this.items[index] = node;
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "handleMenuClose", event => {
-      // Handle ESC keydown for closing the expanded menu.
-      if (match.matches(event, [keys.Escape]) && this.state.expanded) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.setState(() => ({
-          expanded: false,
-          selectedIndex: null
-        }));
+  /**
+   * Toggle the expanded state of the menu on click.
+   */
+  const handleOnClick = e => {
+    if (!subMenusRef.current || e.target instanceof Node && !subMenusRef.current.contains(e.target)) {
+      e.preventDefault();
+    }
+    setExpanded(prev => !prev);
+  };
 
-        // Return focus to menu button when the user hits ESC.
-        if (this.menuButtonRef !== null) {
-          this.menuButtonRef.focus();
-        }
-        return;
-      }
-    });
-    /**
-     * We capture the `ref` for each child inside of `this.items` to properly
-     * manage focus. In addition to this focus management, all items receive a
-     * `tabIndex: -1` so the user won't hit a large number of items in their tab
-     * sequence when they might not want to go through all the items.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_renderMenuItem", (item, index) => {
-      if (/*#__PURE__*/React__default["default"].isValidElement(item)) {
-        return /*#__PURE__*/React__default["default"].cloneElement(item, {
-          ref: this.handleItemRef(index)
-        });
+  /**
+   * Keyboard event handler for the entire menu.
+   */
+  const handleOnKeyDown = event => {
+    // Handle enter or space key for toggling the expanded state of the menu.
+    if (match.matches(event, [keys.Enter, keys.Space])) {
+      event.stopPropagation();
+      event.preventDefault();
+      setExpanded(prev => !prev);
+      return;
+    }
+  };
+
+  /**
+   * Handle our blur event from our underlying menuitems. Will mostly be used
+   * for closing our menu in response to a user clicking off or tabbing out of
+   * the menu or menubar.
+   */
+  const handleOnBlur = event => {
+    // Close the menu on blur when the related target is not a sibling menu item
+    // or a child in a submenu
+    const siblingItemBlurredTo = itemRefs.current.find(element => element === event.relatedTarget);
+    const childItemBlurredTo = subMenusRef.current?.contains(event.relatedTarget);
+    if (!siblingItemBlurredTo && !childItemBlurredTo) {
+      setExpanded(false);
+    }
+  };
+
+  /**
+   * Handles individual menuitem refs. We assign them to a class instance
+   * property so that we can properly manage focus of our children.
+   */
+  const handleItemRef = index => node => {
+    itemRefs.current[index] = node;
+  };
+  const handleMenuClose = event => {
+    // Handle ESC keydown for closing the expanded menu.
+    if (match.matches(event, [keys.Escape]) && expanded) {
+      event.stopPropagation();
+      event.preventDefault();
+      setExpanded(false);
+
+      // Return focus to menu button when the user hits ESC.
+      if (menuButtonRef.current) {
+        menuButtonRef.current.focus();
       }
-    });
-    this.state = {
-      // Used to manage the expansion state of the menu
-      expanded: false,
-      // Refers to the menuitem that is currently focused
-      // Note: children should have `role="menuitem"` on node consuming ref
-      selectedIndex: null
-    };
-    this.items = [];
-  }
-  render() {
-    const prefix = this.context;
+    }
+  };
+  const hasActiveDescendant = childrenArg => React.Children.toArray(childrenArg).some(child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return false;
+    }
     const {
       isActive,
       isCurrentPage,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      className: customClassName,
-      children,
-      renderMenuContent: MenuContent,
-      menuLinkName,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      focusRef,
-      onBlur,
-      onClick,
-      onKeyDown,
-      ...rest
-    } = this.props;
-    const hasActiveDescendant = childrenArg => React__default["default"].Children.toArray(childrenArg).some(child => {
-      if (! /*#__PURE__*/React__default["default"].isValidElement(child)) {
-        return false;
-      }
+      children
+    } = child.props;
+    return isActive || isCurrentPage || Array.isArray(children) && hasActiveDescendant(children);
+  });
 
-      // Explicitly type the element to access props safely
-      const element = child;
-      return element.props.isActive || element.props.isCurrentPage || Array.isArray(element.props.children) && hasActiveDescendant(element.props.children);
-    });
-    const accessibilityLabel = {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy
-    };
-    const itemClassName = cx__default["default"]({
-      [`${prefix}--header__submenu`]: true,
-      [`${customClassName}`]: !!customClassName
-    });
-    const isActivePage = isActive ? isActive : isCurrentPage;
-    const linkClassName = cx__default["default"]({
-      [`${prefix}--header__menu-item`]: true,
-      [`${prefix}--header__menu-title`]: true,
-      // We set the current class only if `isActive` is passed in and we do
-      // not have an `aria-current="page"` set for the breadcrumb item
-      [`${prefix}--header__menu-item--current`]: isActivePage || hasActiveDescendant(children) && !this.state.expanded
-    });
+  /**
+   * We capture the `ref` for each child inside of `this.items` to properly
+   * manage focus. In addition to this focus management, all items receive a
+   * `tabIndex: -1` so the user won't hit a large number of items in their tab
+   * sequence when they might not want to go through all the items.
+   */
+  const renderMenuItem = (item, index) => {
+    if (/*#__PURE__*/React.isValidElement(item)) {
+      return /*#__PURE__*/React.cloneElement(item, {
+        ref: handleItemRef(index)
+      });
+    }
+    return item;
+  };
+  const accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  const itemClassName = cx__default["default"]({
+    [`${prefix}--header__submenu`]: true,
+    [`${customClassName}`]: !!customClassName
+  });
+  const isActivePage = isActive ? isActive : isCurrentPage;
+  const linkClassName = cx__default["default"]({
+    [`${prefix}--header__menu-item`]: true,
+    [`${prefix}--header__menu-title`]: true,
+    // We set the current class only if `isActive` is passed in and we do
+    // not have an `aria-current="page"` set for the breadcrumb item
+    [`${prefix}--header__menu-item--current`]: isActivePage || hasActiveDescendant(children) && !expanded
+  });
 
-    // Notes on eslint comments and based on the examples in:
-    // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
-    // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
-    // users
-    // - aria-haspopup can definitely have the value "menu"
-    // - aria-expanded is on their example node with role="menuitem"
-    // - href can be set to javascript:void(0), ideally this will be a button
-    return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
-      className: itemClassName,
-      onKeyDown: events.composeEventHandlers([onKeyDown, this.handleMenuClose]),
-      onClick: events.composeEventHandlers([onClick, this.handleOnClick]),
-      onBlur: events.composeEventHandlers([onBlur, this.handleOnBlur])
-    }), /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({
-      // eslint-disable-line jsx-a11y/role-supports-aria-props,jsx-a11y/anchor-is-valid
-      "aria-haspopup": "menu" // eslint-disable-line jsx-a11y/aria-proptypes
-      ,
-      "aria-expanded": this.state.expanded,
-      className: linkClassName,
-      href: "#",
-      onKeyDown: this.handleOnKeyDown,
-      ref: this.handleMenuButtonRef,
-      tabIndex: 0
-    }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React__default["default"].createElement(MenuContent, null) : /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
-      className: `${this.context}--header__menu-arrow`
-    })), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, accessibilityLabel, {
-      ref: this._subMenus,
-      onClick: this.handleOnClick,
-      className: `${prefix}--header__menu`
-    }), React__default["default"].Children.map(children, this._renderMenuItem)));
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", {
+  // Notes on eslint comments and based on the examples in:
+  // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
+  // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
+  // users
+  // - aria-haspopup can definitely have the value "menu"
+  // - aria-expanded is on their example node with role="menuitem"
+  // - href can be set to javascript:void(0), ideally this will be a button
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: itemClassName,
+    onKeyDown: events.composeEventHandlers([onKeyDown, handleMenuClose]),
+    onClick: events.composeEventHandlers([onClick, handleOnClick]),
+    onBlur: events.composeEventHandlers([onBlur, handleOnBlur]),
+    ref: ref
+  }), /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({
+    // eslint-disable-line jsx-a11y/role-supports-aria-props,jsx-a11y/anchor-is-valid
+    "aria-haspopup": "menu" // eslint-disable-line jsx-a11y/aria-proptypes
+    ,
+    "aria-expanded": expanded,
+    className: linkClassName,
+    href: "#",
+    onKeyDown: handleOnKeyDown,
+    ref: mergedButtonRef,
+    tabIndex: 0
+  }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React__default["default"].createElement(MenuContent, null) : /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
+    className: `${prefix}--header__menu-arrow`
+  })), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, accessibilityLabel, {
+    ref: subMenusRef,
+    className: `${prefix}--header__menu`
+  }), React.Children.map(children, renderMenuItem)));
+});
+HeaderMenu.displayName = 'HeaderMenu';
+HeaderMenu.propTypes = {
   /**
    * Required props for the accessibility label of the menu
    */
@@ -273,14 +233,7 @@ _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", {
    * Optionally provide a tabIndex for the underlying menu button
    */
   tabIndex: PropTypes__default["default"].number
-});
-_rollupPluginBabelHelpers.defineProperty(HeaderMenu, "contextType", usePrefix.PrefixContext);
-const HeaderMenuForwardRef = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default["default"].createElement(HeaderMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
-    focusRef: ref
-  }));
-});
-HeaderMenuForwardRef.displayName = 'HeaderMenu';
+};
 
 exports.HeaderMenu = HeaderMenu;
-exports["default"] = HeaderMenuForwardRef;
+exports["default"] = HeaderMenu;

package/lib/components/UIShell/HeaderMenuButton.js

@@ -24,17 +24,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _Menu, _Close;
-function HeaderMenuButton(_ref) {
-  let {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    className: customClassName,
-    renderMenuIcon,
-    renderCloseIcon,
-    isActive,
-    isCollapsible,
-    ...rest
-  } = _ref;
+function HeaderMenuButton({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  className: customClassName,
+  renderMenuIcon,
+  renderCloseIcon,
+  isActive,
+  isCollapsible,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     ...(typeof customClassName === 'string' && {

package/lib/components/UIShell/HeaderMenuItem.js

@@ -23,18 +23,18 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem(_ref, ref) {
-  let {
-    className,
-    isActive,
-    isCurrentPage,
-    'aria-current': ariaCurrent,
-    children,
-    role,
-    tabIndex,
-    ...rest
-  } = _ref;
+const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem({
+  className,
+  isActive,
+  isCurrentPage,
+  'aria-current': ariaCurrent,
+  children,
+  role,
+  tabIndex,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
+  const resolvedTabIndex = tabIndex ?? 0;
   if (isCurrentPage) {
     isActive = isCurrentPage;
   }
@@ -53,7 +53,7 @@ const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem(_re
     "aria-current": hasCurrentClass ? true : ariaCurrent,
     className: linkClassName,
     ref: ref,
-    tabIndex: tabIndex
+    tabIndex: resolvedTabIndex
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-truncate--end`
   }, children)));

package/lib/components/UIShell/HeaderName.js

@@ -22,13 +22,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-function HeaderName(_ref) {
-  let {
-    children,
-    className: customClassName,
-    prefix = 'IBM',
-    ...rest
-  } = _ref;
+function HeaderName({
+  children,
+  className: customClassName,
+  prefix = 'IBM',
+  ...rest
+}) {
   const selectorPrefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${selectorPrefix}--header__name`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {

package/lib/components/UIShell/HeaderNavigation.js

@@ -22,14 +22,13 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-function HeaderNavigation(_ref) {
-  let {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    className: customClassName,
-    ...rest
-  } = _ref;
+function HeaderNavigation({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  className: customClassName,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--header__nav`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, {

package/lib/components/UIShell/HeaderPanel.js

@@ -26,16 +26,15 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noopFn = () => {};
-const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function HeaderPanel(_ref, ref) {
-  let {
-    children,
-    className: customClassName,
-    expanded,
-    addFocusListeners = true,
-    onHeaderPanelFocus = noopFn,
-    href,
-    ...rest
-  } = _ref;
+const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function HeaderPanel({
+  children,
+  className: customClassName,
+  expanded,
+  addFocusListeners = true,
+  onHeaderPanelFocus = noopFn,
+  href,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const headerPanelReference = React.useRef(null);
   const headerPanelRef = useMergedRefs.useMergedRefs([headerPanelReference, ref]);

package/lib/components/UIShell/HeaderSideNavItems.js

@@ -20,12 +20,11 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-function HeaderSideNavItems(_ref) {
-  let {
-    className: customClassName,
-    children,
-    hasDivider = false
-  } = _ref;
+function HeaderSideNavItems({
+  className: customClassName,
+  children,
+  hasDivider = false
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     [`${prefix}--side-nav__header-navigation`]: true,

package/lib/components/UIShell/Link.js

@@ -21,15 +21,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 // First define the component without generics
 
-const LinkBase = (_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;
+const LinkBase = ({
+  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__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     ref: ref

package/lib/components/UIShell/SideNav.js

@@ -34,29 +34,28 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 // import SideNavFooter from './SideNavFooter';
 
 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,
-    // TO-DO: comment back in when footer is added for rails
-    // translateById: t = (id) => translations[id],
-    href,
-    isFixedNav = false,
-    isRail,
-    isPersistent = true,
-    addFocusListeners = true,
-    addMouseListeners = true,
-    onOverlayClick,
-    onSideNavBlur,
-    enterDelayMs = 100,
-    ...other
-  } = _ref;
+function SideNavRenderFunction({
+  expanded: expandedProp,
+  defaultExpanded = false,
+  isChildOfHeader = true,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  onToggle,
+  className: customClassName,
+  // TO-DO: comment back in when footer is added for rails
+  // translateById: t = (id) => translations[id],
+  href,
+  isFixedNav = false,
+  isRail,
+  isPersistent = true,
+  addFocusListeners = true,
+  addMouseListeners = true,
+  onOverlayClick,
+  onSideNavBlur,
+  enterDelayMs = 100,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const {
     current: controlled
@@ -66,8 +65,7 @@ function SideNavRenderFunction(_ref, ref) {
   const expanded = controlled ? expandedProp : expandedState;
   const sideNavRef = React.useRef(null);
   const navRef = useMergedRefs.useMergedRefs([sideNavRef, ref]);
-  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);
     }

package/lib/components/UIShell/SideNavDetails.js

@@ -21,13 +21,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const SideNavDetails = _ref => {
-  let {
-    children,
-    className: customClassName,
-    title,
-    ...rest
-  } = _ref;
+const SideNavDetails = ({
+  children,
+  className: customClassName,
+  title,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--side-nav__details`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({