@carbon/react 1.27.0 → 1.28.0

package/lib/components/UIShell/HeaderPanel.js

@@ -22,30 +22,36 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["aria-label", "aria-labelledby", "children", "className", "expanded"];
-var HeaderPanel = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var accessibilityLabel = {
+const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function HeaderPanel(_ref, ref) {
+  let {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    className: customClassName,
+    expanded,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   };
-  var className = cx__default["default"]("".concat(prefix, "--header-panel"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header-panel--expanded"), expanded), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  const className = cx__default["default"](`${prefix}--header-panel`, {
+    [`${prefix}--header-panel--expanded`]: expanded,
+    [customClassName]: !!customClassName
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
     className: className
   }, accessibilityLabel, {
     ref: ref
   }), children);
 });
-HeaderPanel.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+HeaderPanel.propTypes = {
+  /**
+   * Required props for accessibility label on the underlying menu
+   */
+  ...AriaPropTypes.AriaLabelPropType,
+
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
@@ -55,7 +61,7 @@ HeaderPanel.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBab
    * Specify whether the panel is expanded
    */
   expanded: PropTypes__default["default"].bool
-});
+};
 HeaderPanel.displayName = 'HeaderPanel';
 var HeaderPanel$1 = HeaderPanel;
 

package/lib/components/UIShell/HeaderSideNavItems.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -21,14 +20,17 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var HeaderSideNavItems = function HeaderSideNavItems(_ref) {
-  var _cx;
-
-  var customClassName = _ref.className,
-      children = _ref.children,
-      hasDivider = _ref.hasDivider;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__header-navigation"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__header-divider"), hasDivider), _cx), customClassName);
+const HeaderSideNavItems = _ref => {
+  let {
+    className: customClassName,
+    children,
+    hasDivider
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"]({
+    [`${prefix}--side-nav__header-navigation`]: true,
+    [`${prefix}--side-nav__header-divider`]: hasDivider
+  }, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: className
   }, children);

package/lib/components/UIShell/Link.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 
@@ -18,7 +17,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(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
@@ -26,16 +24,18 @@ var _excluded = ["element", "isSideNavExpanded"];
  * `@reach/router`
  */
 
-var Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(props, ref) {
-  var element = props.element;
-      props.isSideNavExpanded;
-      var rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/React__default["default"].createElement(element, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
-    ref: ref
-  }));
+const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(props, ref) {
+  const {
+    element,
+    isSideNavExpanded,
+    // eslint-disable-line no-unused-vars
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default["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/lib/components/UIShell/SideNav.js

@@ -23,47 +23,38 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-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["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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useRef = React.useRef(expandedProp !== undefined),
-      controlled = _useRef.current;
-
-  var _useState = React.useState(defaultExpanded),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      expandedState = _useState2[0],
-      setExpandedState = _useState2[1];
-
-  var _useState3 = React.useState(defaultExpanded),
-      _useState4 = _rollupPluginBabelHelpers.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["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.usePrefix();
+  const {
+    current: controlled
+  } = React.useRef(expandedProp !== undefined);
+  const [expandedState, setExpandedState] = React.useState(defaultExpanded);
+  const [expandedViaHoverState, setExpandedViaHoverState] = React.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);
@@ -78,7 +69,7 @@ var SideNav = /*#__PURE__*/React__default["default"].forwardRef(function SideNav
     }
   };
 
-  var accessibilityLabel = {
+  const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   }; // TO-DO: comment back in when footer is added for rails
@@ -86,33 +77,45 @@ var SideNav = /*#__PURE__*/React__default["default"].forwardRef(function SideNav
   //   ? t('carbon.sidenav.state.open')
   //   : t('carbon.sidenav.state.closed');
 
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--expanded"), expanded || expandedViaHoverState), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--collapsed"), !expanded && isFixedNav), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--rail"), isRail), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--ux"), isChildOfHeader), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--hidden"), !isPersistent), _cx));
-  var overlayClassName = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--side-nav__overlay"), true), _rollupPluginBabelHelpers.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__default["default"]({
+    [`${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__default["default"]({
+    [`${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["default"].Children.map(children, function (child) {
-      var _child$type$displayNa, _child$type, _child$type2;
+    childrenToRender = React__default["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["default"].cloneElement(child, _rollupPluginBabelHelpers.objectSpread2({}, _utils.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["default"].cloneElement(child, { ...(_utils.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);
       }
@@ -120,13 +123,9 @@ var SideNav = /*#__PURE__*/React__default["default"].forwardRef(function SideNav
   }
 
   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["default"].createElement(React__default["default"].Fragment, null, isFixedNav ? null :
@@ -137,7 +136,7 @@ var SideNav = /*#__PURE__*/React__default["default"].forwardRef(function SideNav
     onClick: onOverlayClick
   }), /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
-    className: "".concat(prefix, "--side-nav__navigation ").concat(className)
+    className: `${prefix}--side-nav__navigation ${className}`
   }, accessibilityLabel, eventHandlers, other), childrenToRender));
 });
 SideNav.displayName = 'SideNav';
@@ -157,7 +156,12 @@ SideNav.defaultProps = {
   addFocusListeners: true,
   addMouseListeners: true
 };
-SideNav.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+SideNav.propTypes = {
+  /**
+   * Required props for accessibility label on the underlying menu
+   */
+  ...AriaPropTypes.AriaLabelPropType,
+
   /**
    * Specify whether focus and blur listeners are added. They are by default.
    */
@@ -227,7 +231,7 @@ SideNav.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHe
    */
   // translateById: PropTypes.func,
 
-});
+};
 var SideNav$1 = SideNav;
 
 exports["default"] = SideNav$1;

package/lib/components/UIShell/SideNavDetails.js

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

package/lib/components/UIShell/SideNavDivider.js

@@ -21,9 +21,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function SideNavDivider(_ref) {
-  var className = _ref.className;
-  var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"]("".concat(prefix, "--side-nav__divider"), className);
+  let {
+    className
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--side-nav__divider`, className);
   return /*#__PURE__*/React__default["default"].createElement("li", {
     role: "separator",
     className: classNames

package/lib/components/UIShell/SideNavFooter.js

@@ -29,32 +29,33 @@ var _Close, _ChevronRight;
  */
 
 function SideNavFooter(_ref) {
-  var assistiveText = _ref.assistiveText,
-      customClassName = _ref.className,
-      expanded = _ref.expanded,
-      onToggle = _ref.onToggle;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--side-nav__footer"), customClassName);
+  let {
+    assistiveText,
+    className: customClassName,
+    expanded,
+    onToggle
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--side-nav__footer`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("footer", {
     className: className
   }, /*#__PURE__*/React__default["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["default"].createElement("div", {
-    className: "".concat(prefix, "--side-nav__icon")
+    className: `${prefix}--side-nav__icon`
   }, expanded ? _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
     size: 20
   })) : _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, {
     size: 20
   }))), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--assistive-text")
+    className: `${prefix}--assistive-text`
   }, assistiveText)));
 }
 
+SideNavFooter.displayName = 'SideNavFooter';
 SideNavFooter.propTypes = {
   /**
    * Provide text to be read to screen readers and shown as a tooltip when

package/lib/components/UIShell/SideNavHeader.js

@@ -21,17 +21,20 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var SideNavHeader = function SideNavHeader(_ref) {
-  var customClassName = _ref.className,
-      children = _ref.children,
-      IconElement = _ref.renderIcon;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--side-nav__header"), customClassName);
+const SideNavHeader = _ref => {
+  let {
+    className: customClassName,
+    children,
+    renderIcon: IconElement
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--side-nav__header`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("header", {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), children);
 };
 
+SideNavHeader.displayName = 'SideNavHeader';
 SideNavHeader.propTypes = {
   /**
    * The child nodes to be rendered

package/lib/components/UIShell/SideNavIcon.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
@@ -22,13 +21,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function SideNavIcon(_ref) {
-  var _cx;
-
-  var children = _ref.children,
-      customClassName = _ref.className,
-      small = _ref.small;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__icon"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__icon--small"), small), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  let {
+    children,
+    className: customClassName,
+    small
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"]({
+    [`${prefix}--side-nav__icon`]: true,
+    [`${prefix}--side-nav__icon--small`]: small,
+    [customClassName]: !!customClassName
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: className
   }, children);

package/lib/components/UIShell/SideNavItem.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
@@ -22,14 +21,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function SideNavItem(_ref) {
-  var _cx;
-
-  var customClassName = _ref.className,
-      children = _ref.children,
-      _ref$large = _ref.large,
-      large = _ref$large === void 0 ? false : _ref$large;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  let {
+    className: customClassName,
+    children,
+    large = false
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"]({
+    [`${prefix}--side-nav__item`]: true,
+    [`${prefix}--side-nav__item--large`]: large,
+    [customClassName]: !!customClassName
+  });
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className
   }, children);

package/lib/components/UIShell/SideNavItems.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
@@ -22,20 +21,23 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var SideNavItems = function SideNavItems(_ref) {
-  var customClassName = _ref.className,
-      children = _ref.children,
-      isSideNavExpanded = _ref.isSideNavExpanded;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](["".concat(prefix, "--side-nav__items")], customClassName);
-  var childrenWithExpandedState = React__default["default"].Children.map(children, function (child) {
+const SideNavItems = _ref => {
+  let {
+    className: customClassName,
+    children,
+    isSideNavExpanded
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"]([`${prefix}--side-nav__items`], customClassName);
+  const childrenWithExpandedState = React__default["default"].Children.map(children, child => {
     if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
       var _child$type;
 
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      return /*#__PURE__*/React__default["default"].cloneElement(child, _rollupPluginBabelHelpers.objectSpread2({}, _utils.CARBON_SIDENAV_ITEMS.includes((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) ? {
-        isSideNavExpanded: isSideNavExpanded
-      } : {}));
+      return /*#__PURE__*/React__default["default"].cloneElement(child, { ...(_utils.CARBON_SIDENAV_ITEMS.includes((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) ? {
+          isSideNavExpanded
+        } : {})
+      });
     }
   });
   return /*#__PURE__*/React__default["default"].createElement("ul", {
@@ -43,6 +45,7 @@ var SideNavItems = function SideNavItems(_ref) {
   }, childrenWithExpandedState);
 };
 
+SideNavItems.displayName = 'SideNavItems';
 SideNavItems.propTypes = {
   /**
    * Provide a single icon as the child to `SideNavIcon` to render in the

package/lib/components/UIShell/SideNavLink.js

@@ -25,20 +25,21 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["children", "className", "renderIcon", "isActive", "large"];
-var SideNavLink = /*#__PURE__*/React__default["default"].forwardRef(function SideNavLink(_ref, ref) {
-  var _cx;
-
-  var children = _ref.children,
-      customClassName = _ref.className,
-      IconElement = _ref.renderIcon,
-      isActive = _ref.isActive,
-      _ref$large = _ref.large,
-      large = _ref$large === void 0 ? false : _ref$large,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__link"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__link--current"), isActive), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+const SideNavLink = /*#__PURE__*/React__default["default"].forwardRef(function SideNavLink(_ref, ref) {
+  let {
+    children,
+    className: customClassName,
+    renderIcon: IconElement,
+    isActive,
+    large = false,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"]({
+    [`${prefix}--side-nav__link`]: true,
+    [`${prefix}--side-nav__link--current`]: isActive,
+    [customClassName]: !!customClassName
+  });
   return /*#__PURE__*/React__default["default"].createElement(SideNavItem["default"], {
     large: large
   }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
@@ -49,7 +50,8 @@ var SideNavLink = /*#__PURE__*/React__default["default"].forwardRef(function Sid
   }, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(SideNavLinkText["default"], null, children)));
 });
 SideNavLink.displayName = 'SideNavLink';
-SideNavLink.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, Link.LinkPropTypes), {}, {
+SideNavLink.propTypes = { ...Link.LinkPropTypes,
+
   /**
    * Specify the text content for the link
    */
@@ -74,7 +76,7 @@ SideNavLink.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBab
    * Provide an icon to render in the side navigation link. Should be a React class.
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
-}); // eslint-disable-next-line react/display-name
+}; // eslint-disable-next-line react/display-name
 var SideNavLink$1 = SideNavLink;
 
 exports["default"] = SideNavLink$1;