@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/UIShell/HeaderMenuItem.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
@@ -13,27 +13,29 @@ import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-var _excluded = ["className", "isActive", "isCurrentPage", "aria-current", "children", "role", "tabIndex"];
-var HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMenuItem(_ref, ref) {
-  var _cx;
-
-  var className = _ref.className,
-      isActive = _ref.isActive,
-      isCurrentPage = _ref.isCurrentPage,
-      ariaCurrent = _ref['aria-current'],
-      children = _ref.children,
-      role = _ref.role,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
+const HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMenuItem(_ref, ref) {
+  let {
+    className,
+    isActive,
+    isCurrentPage,
+    'aria-current': ariaCurrent,
+    children,
+    role,
+    tabIndex = 0,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
 
   if (isCurrentPage) {
     isActive = isCurrentPage;
   }
 
-  var linkClassName = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx, "".concat(prefix, "--header__menu-item--current"), isActive && ariaCurrent !== 'page'), _cx));
+  const linkClassName = cx({
+    [`${prefix}--header__menu-item`]: 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`]: isActive && ariaCurrent !== 'page'
+  });
   return /*#__PURE__*/React__default.createElement("li", {
     className: className,
     role: role
@@ -43,11 +45,17 @@ var HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMenuI
     ref: ref,
     tabIndex: tabIndex
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--text-truncate--end")
+    className: `${prefix}--text-truncate--end`
   }, children)));
 });
 HeaderMenuItem.displayName = 'HeaderMenuItem';
-HeaderMenuItem.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {}, {
+HeaderMenuItem.propTypes = {
+  /**
+   * Pass in a valid `element` to replace the underlying `<a>` tag with a
+   * custom `Link` element
+   */
+  ...LinkPropTypes,
+
   /**
    * Pass in children that are either a string or can be read as a string by
    * screen readers
@@ -80,7 +88,7 @@ HeaderMenuItem.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {},
    * Specify the tab index of the Link
    */
   tabIndex: PropTypes.number
-});
+};
 var HeaderMenuItem$1 = HeaderMenuItem;
 
 export { HeaderMenuItem$1 as default };

package/es/components/UIShell/HeaderName.js

@@ -5,33 +5,38 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "className", "prefix", "href"];
-
 function HeaderName(_ref) {
-  var children = _ref.children,
-      customClassName = _ref.className,
-      prefix = _ref.prefix,
-      href = _ref.href,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var selectorPrefix = usePrefix();
-  var className = cx("".concat(selectorPrefix, "--header__name"), customClassName);
+  let {
+    children,
+    className: customClassName,
+    prefix,
+    href,
+    ...rest
+  } = _ref;
+  const selectorPrefix = usePrefix();
+  const className = cx(`${selectorPrefix}--header__name`, customClassName);
   return /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
     className: className,
     href: href
   }), prefix && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(selectorPrefix, "--header__name--prefix")
+    className: `${selectorPrefix}--header__name--prefix`
   }, prefix), "\xA0"), children);
 }
 
-HeaderName.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {}, {
+HeaderName.propTypes = {
+  /**
+   * Pass in a valid `element` to replace the underlying `<a>` tag with a
+   * custom `Link` element
+   */
+  ...LinkPropTypes,
+
   /**
    * Pass in children that are either a string or can be read as a string by
    * screen readers
@@ -53,7 +58,7 @@ HeaderName.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {}, {
    * example: IBM [Product Name] versus solely [Product Name]
    */
   prefix: PropTypes.string
-});
+};
 HeaderName.defaultProps = {
   prefix: 'IBM'
 };

package/es/components/UIShell/HeaderNavigation.js

@@ -5,38 +5,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
-
 function HeaderNavigation(props) {
-  var ariaLabel = props['aria-label'],
-      ariaLabelledBy = props['aria-labelledby'],
-      children = props.children,
-      customClassName = props.className,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--header__nav"), customClassName); // Assign both label strategies in this option, only one should be defined
+  const {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    className: customClassName,
+    ...rest
+  } = props;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--header__nav`, customClassName); // Assign both label strategies in this option, only one should be defined
   // so when we spread that should be the one that is applied to the node
 
-  var accessibilityLabel = {
+  const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   };
   return /*#__PURE__*/React__default.createElement("nav", _extends({}, rest, accessibilityLabel, {
     className: className
   }), /*#__PURE__*/React__default.createElement("ul", {
-    className: "".concat(prefix, "--header__menu-bar")
+    className: `${prefix}--header__menu-bar`
   }, children));
 }
 
-HeaderNavigation.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+HeaderNavigation.propTypes = {
+  /**
+   * Required props for accessibility label on the underlying menu
+   */
+  ...AriaLabelPropType,
+
   /**
    * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
    * or `HeaderMenu`
@@ -47,6 +51,6 @@ HeaderNavigation.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType
    * Optionally provide a custom class to apply to the underlying <nav> node
    */
   className: PropTypes.string
-});
+};
 
 export { HeaderNavigation, HeaderNavigation as default };

package/es/components/UIShell/HeaderPanel.js

@@ -5,37 +5,43 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["aria-label", "aria-labelledby", "children", "className", "expanded"];
-var HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(_ref, ref) {
-  var _cx;
-
-  var ariaLabel = _ref['aria-label'],
-      ariaLabelledBy = _ref['aria-labelledby'],
-      children = _ref.children,
-      customClassName = _ref.className,
-      expanded = _ref.expanded,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var accessibilityLabel = {
+const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(_ref, ref) {
+  let {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    className: customClassName,
+    expanded,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   };
-  var className = cx("".concat(prefix, "--header-panel"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header-panel--expanded"), expanded), _defineProperty(_cx, customClassName, !!customClassName), _cx));
+  const className = cx(`${prefix}--header-panel`, {
+    [`${prefix}--header-panel--expanded`]: expanded,
+    [customClassName]: !!customClassName
+  });
   return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
     className: className
   }, accessibilityLabel, {
     ref: ref
   }), children);
 });
-HeaderPanel.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+HeaderPanel.propTypes = {
+  /**
+   * Required props for accessibility label on the underlying menu
+   */
+  ...AriaLabelPropType,
+
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
@@ -45,7 +51,7 @@ HeaderPanel.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}
    * Specify whether the panel is expanded
    */
   expanded: PropTypes.bool
-});
+};
 HeaderPanel.displayName = 'HeaderPanel';
 var HeaderPanel$1 = HeaderPanel;
 

package/es/components/UIShell/HeaderSideNavItems.js

@@ -5,20 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var HeaderSideNavItems = function HeaderSideNavItems(_ref) {
-  var _cx;
-
-  var customClassName = _ref.className,
-      children = _ref.children,
-      hasDivider = _ref.hasDivider;
-  var prefix = usePrefix();
-  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--side-nav__header-navigation"), true), _defineProperty(_cx, "".concat(prefix, "--side-nav__header-divider"), hasDivider), _cx), customClassName);
+const HeaderSideNavItems = _ref => {
+  let {
+    className: customClassName,
+    children,
+    hasDivider
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx({
+    [`${prefix}--side-nav__header-navigation`]: true,
+    [`${prefix}--side-nav__header-divider`]: hasDivider
+  }, customClassName);
   return /*#__PURE__*/React__default.createElement("ul", {
     className: className
   }, children);

package/es/components/UIShell/Link.js

@@ -5,11 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 
-var _excluded = ["element", "isSideNavExpanded"];
 /**
  * Link is a custom component that allows us to supporting rendering elements
  * other than `a` in our markup. The goal is to allow users to support passing
@@ -17,16 +15,18 @@ var _excluded = ["element", "isSideNavExpanded"];
  * `@reach/router`
  */
 
-var Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
-  var element = props.element;
-      props.isSideNavExpanded;
-      var rest = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/React__default.createElement(element, _objectSpread2(_objectSpread2({}, rest), {}, {
-    ref: ref
-  }));
+const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
+  const {
+    element,
+    isSideNavExpanded,
+    // eslint-disable-line no-unused-vars
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement(element, { ...rest,
+    ref
+  });
 });
-var LinkPropTypes = {
+const LinkPropTypes = {
   /**
    * The base element to use to build the link. Defaults to `a`, can also accept
    * alternative tag names or custom components like `Link` from `react-router`.

package/es/components/UIShell/SideNav.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -13,47 +13,38 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["expanded", "defaultExpanded", "isChildOfHeader", "aria-label", "aria-labelledby", "children", "onToggle", "className", "isFixedNav", "isRail", "isPersistent", "addFocusListeners", "addMouseListeners", "onOverlayClick"];
 // import SideNavFooter from './SideNavFooter';
 
-var SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref) {
-  var _cx, _cx2;
-
-  var expandedProp = props.expanded,
-      defaultExpanded = props.defaultExpanded,
-      isChildOfHeader = props.isChildOfHeader,
-      ariaLabel = props['aria-label'],
-      ariaLabelledBy = props['aria-labelledby'],
-      children = props.children,
-      onToggle = props.onToggle,
-      customClassName = props.className,
-      isFixedNav = props.isFixedNav,
-      isRail = props.isRail,
-      isPersistent = props.isPersistent,
-      addFocusListeners = props.addFocusListeners,
-      addMouseListeners = props.addMouseListeners,
-      onOverlayClick = props.onOverlayClick,
-      other = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useRef = useRef(expandedProp !== undefined),
-      controlled = _useRef.current;
-
-  var _useState = useState(defaultExpanded),
-      _useState2 = _slicedToArray(_useState, 2),
-      expandedState = _useState2[0],
-      setExpandedState = _useState2[1];
-
-  var _useState3 = useState(defaultExpanded),
-      _useState4 = _slicedToArray(_useState3, 2),
-      expandedViaHoverState = _useState4[0],
-      setExpandedViaHoverState = _useState4[1];
-
-  var expanded = controlled ? expandedProp : expandedState;
-
-  var handleToggle = function handleToggle(event) {
-    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
+const SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref) {
+  const {
+    expanded: expandedProp,
+    defaultExpanded,
+    isChildOfHeader,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    onToggle,
+    className: customClassName,
+    // TO-DO: comment back in when footer is added for rails
+    // translateById: t,
+    isFixedNav,
+    isRail,
+    isPersistent,
+    addFocusListeners,
+    addMouseListeners,
+    onOverlayClick,
+    ...other
+  } = props;
+  const prefix = usePrefix();
+  const {
+    current: controlled
+  } = useRef(expandedProp !== undefined);
+  const [expandedState, setExpandedState] = useState(defaultExpanded);
+  const [expandedViaHoverState, setExpandedViaHoverState] = useState(defaultExpanded);
+  const expanded = controlled ? expandedProp : expandedState;
+
+  const handleToggle = function (event) {
+    let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
 
     if (!controlled) {
       setExpandedState(value);
@@ -68,7 +59,7 @@ var SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref
     }
   };
 
-  var accessibilityLabel = {
+  const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   }; // TO-DO: comment back in when footer is added for rails
@@ -76,33 +67,45 @@ var SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref
   //   ? t('carbon.sidenav.state.open')
   //   : t('carbon.sidenav.state.closed');
 
-  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--side-nav"), true), _defineProperty(_cx, "".concat(prefix, "--side-nav--expanded"), expanded || expandedViaHoverState), _defineProperty(_cx, "".concat(prefix, "--side-nav--collapsed"), !expanded && isFixedNav), _defineProperty(_cx, "".concat(prefix, "--side-nav--rail"), isRail), _defineProperty(_cx, customClassName, !!customClassName), _defineProperty(_cx, "".concat(prefix, "--side-nav--ux"), isChildOfHeader), _defineProperty(_cx, "".concat(prefix, "--side-nav--hidden"), !isPersistent), _cx));
-  var overlayClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--side-nav__overlay"), true), _defineProperty(_cx2, "".concat(prefix, "--side-nav__overlay-active"), expanded || expandedViaHoverState), _cx2));
-  var childrenToRender = children; // if a rail, pass the expansion state as a prop, so children can update themselves to match
+  const className = cx({
+    [`${prefix}--side-nav`]: true,
+    [`${prefix}--side-nav--expanded`]: expanded || expandedViaHoverState,
+    [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
+    [`${prefix}--side-nav--rail`]: isRail,
+    [customClassName]: !!customClassName,
+    [`${prefix}--side-nav--ux`]: isChildOfHeader,
+    [`${prefix}--side-nav--hidden`]: !isPersistent
+  });
+  const overlayClassName = cx({
+    [`${prefix}--side-nav__overlay`]: true,
+    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState
+  });
+  let childrenToRender = children; // if a rail, pass the expansion state as a prop, so children can update themselves to match
 
   if (isRail) {
-    childrenToRender = React__default.Children.map(children, function (child) {
-      var _child$type$displayNa, _child$type, _child$type2;
+    childrenToRender = React__default.Children.map(children, child => {
+      var _child$type, _child$type2;
 
       // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
-      var currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded; // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
+      let currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded; // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
 
-      return /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({}, CARBON_SIDENAV_ITEMS.includes((_child$type$displayNa = (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) !== null && _child$type$displayNa !== void 0 ? _child$type$displayNa : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) ? {
-        isSideNavExpanded: currentExpansionState
-      } : {}));
+      return /*#__PURE__*/React__default.cloneElement(child, { ...(CARBON_SIDENAV_ITEMS.includes(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) ?? ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name)) ? {
+          isSideNavExpanded: currentExpansionState
+        } : {})
+      });
     });
   }
 
-  var eventHandlers = {};
+  let eventHandlers = {};
 
   if (addFocusListeners) {
-    eventHandlers.onFocus = function (event) {
+    eventHandlers.onFocus = event => {
       if (!event.currentTarget.contains(event.relatedTarget)) {
         handleToggle(event, true);
       }
     };
 
-    eventHandlers.onBlur = function (event) {
+    eventHandlers.onBlur = event => {
       if (!event.currentTarget.contains(event.relatedTarget)) {
         handleToggle(event, false);
       }
@@ -110,13 +113,9 @@ var SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref
   }
 
   if (addMouseListeners && isRail) {
-    eventHandlers.onMouseEnter = function () {
-      return handleToggle(true, true);
-    };
+    eventHandlers.onMouseEnter = () => handleToggle(true, true);
 
-    eventHandlers.onMouseLeave = function () {
-      return handleToggle(false, false);
-    };
+    eventHandlers.onMouseLeave = () => handleToggle(false, false);
   }
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFixedNav ? null :
@@ -127,7 +126,7 @@ var SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref
     onClick: onOverlayClick
   }), /*#__PURE__*/React__default.createElement("nav", _extends({
     ref: ref,
-    className: "".concat(prefix, "--side-nav__navigation ").concat(className)
+    className: `${prefix}--side-nav__navigation ${className}`
   }, accessibilityLabel, eventHandlers, other), childrenToRender));
 });
 SideNav.displayName = 'SideNav';
@@ -147,7 +146,12 @@ SideNav.defaultProps = {
   addFocusListeners: true,
   addMouseListeners: true
 };
-SideNav.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+SideNav.propTypes = {
+  /**
+   * Required props for accessibility label on the underlying menu
+   */
+  ...AriaLabelPropType,
+
   /**
    * Specify whether focus and blur listeners are added. They are by default.
    */
@@ -217,7 +221,7 @@ SideNav.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
    */
   // translateById: PropTypes.func,
 
-});
+};
 var SideNav$1 = SideNav;
 
 export { SideNav$1 as default };

package/es/components/UIShell/SideNavDetails.js

@@ -5,26 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "className", "title"];
-
-var SideNavDetails = function SideNavDetails(_ref) {
-  var children = _ref.children,
-      customClassName = _ref.className,
-      title = _ref.title,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--side-nav__details"), customClassName);
+const SideNavDetails = _ref => {
+  let {
+    children,
+    className: customClassName,
+    title,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--side-nav__details`, customClassName);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: className
   }, rest), /*#__PURE__*/React__default.createElement("h2", {
-    className: "".concat(prefix, "--side-nav__title"),
+    className: `${prefix}--side-nav__title`,
     title: title
   }, title), children);
 };

package/es/components/UIShell/SideNavDivider.js

@@ -11,9 +11,11 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 function SideNavDivider(_ref) {
-  var className = _ref.className;
-  var prefix = usePrefix();
-  var classNames = cx("".concat(prefix, "--side-nav__divider"), className);
+  let {
+    className
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--side-nav__divider`, className);
   return /*#__PURE__*/React__default.createElement("li", {
     role: "separator",
     className: classNames

package/es/components/UIShell/SideNavFooter.js

@@ -19,29 +19,29 @@ var _Close, _ChevronRight;
  */
 
 function SideNavFooter(_ref) {
-  var assistiveText = _ref.assistiveText,
-      customClassName = _ref.className,
-      expanded = _ref.expanded,
-      onToggle = _ref.onToggle;
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--side-nav__footer"), customClassName);
+  let {
+    assistiveText,
+    className: customClassName,
+    expanded,
+    onToggle
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--side-nav__footer`, customClassName);
   return /*#__PURE__*/React__default.createElement("footer", {
     className: className
   }, /*#__PURE__*/React__default.createElement("button", {
-    className: "".concat(prefix, "--side-nav__toggle"),
+    className: `${prefix}--side-nav__toggle`,
     type: "button",
-    onClick: function onClick(evt) {
-      return onToggle(evt);
-    },
+    onClick: evt => onToggle(evt),
     title: assistiveText
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--side-nav__icon")
+    className: `${prefix}--side-nav__icon`
   }, expanded ? _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
     size: 20
   })) : _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default.createElement(ChevronRight, {
     size: 20
   }))), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--assistive-text")
+    className: `${prefix}--assistive-text`
   }, assistiveText)));
 }