@carbon/react 1.5.0 → 1.7.0-rc.0

package/lib/components/UIShell/HeaderMenuButton.js

@@ -27,7 +27,7 @@ var _Menu, _Close;
 
 var _excluded = ["aria-label", "aria-labelledby", "className", "renderMenuIcon", "renderCloseIcon", "onClick", "isActive", "isCollapsible"];
 
-var HeaderMenuButton = function HeaderMenuButton(_ref) {
+function HeaderMenuButton(_ref) {
   var _cx;
 
   var ariaLabel = _ref['aria-label'],
@@ -58,7 +58,7 @@ var HeaderMenuButton = function HeaderMenuButton(_ref) {
     type: "button",
     onClick: onClick
   }), isActive ? closeIcon : menuIcon);
-};
+}
 
 HeaderMenuButton.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
   /**
@@ -74,6 +74,5 @@ HeaderMenuButton.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPlug
    */
   onClick: PropTypes__default["default"].func
 });
-var HeaderMenuButton$1 = HeaderMenuButton;
 
-exports["default"] = HeaderMenuButton$1;
+exports["default"] = HeaderMenuButton;

package/lib/components/UIShell/HeaderName.js

@@ -24,7 +24,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _excluded = ["children", "className", "prefix", "href"];
 
-var HeaderName = function HeaderName(_ref) {
+function HeaderName(_ref) {
   var children = _ref.children,
       customClassName = _ref.className,
       prefix = _ref.prefix,
@@ -39,7 +39,7 @@ var HeaderName = function HeaderName(_ref) {
   }), prefix && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(selectorPrefix, "--header__name--prefix")
   }, prefix), "\xA0"), children);
-};
+}
 
 HeaderName.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, Link.LinkPropTypes), {}, {
   /**
@@ -67,6 +67,5 @@ HeaderName.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabe
 HeaderName.defaultProps = {
   prefix: 'IBM'
 };
-var HeaderName$1 = HeaderName;
 
-exports["default"] = HeaderName$1;
+exports["default"] = HeaderName;

package/lib/components/UIShell/HeaderNavigation.js

@@ -24,75 +24,29 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
 
-var HeaderNavigation = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(HeaderNavigation, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(HeaderNavigation);
-
-  function HeaderNavigation(props) {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, HeaderNavigation);
-
-    _this = _super.call(this, props);
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleItemRef", function (index) {
-      return function (node) {
-        _this.items[index] = node;
-      };
-    });
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_renderNavItem", function (child, index) {
-      if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          ref: _this.handleItemRef(index)
-        });
-      }
-    });
-
-    _this.items = [];
-    _this.state = {
-      selectedIndex: 0
-    };
-    return _this;
-  }
-
-  _rollupPluginBabelHelpers.createClass(HeaderNavigation, [{
-    key: "render",
-    value: function render() {
-      var prefix = this.context;
-
-      var _this$props = this.props,
-          ariaLabel = _this$props['aria-label'],
-          ariaLabelledBy = _this$props['aria-labelledby'],
-          children = _this$props.children,
-          customClassName = _this$props.className,
-          rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      var className = cx__default["default"]("".concat(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 = {
-        'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabelledBy
-      };
-      return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
-        className: className
-      }), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, accessibilityLabel, {
-        className: "".concat(prefix, "--header__menu-bar")
-      }), React__default["default"].Children.map(children, this._renderNavItem)));
-    }
-    /**
-     * Render an individual menuitem, adding a `ref` for each child inside of
-     * `this.items` to properly manage focus.
-     */
-
-  }]);
-
-  return HeaderNavigation;
-}(React__default["default"].Component);
-
-_rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "propTypes", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+function HeaderNavigation(props) {
+  var ariaLabel = props['aria-label'],
+      ariaLabelledBy = props['aria-labelledby'],
+      children = props.children,
+      customClassName = props.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(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 = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
+    className: className
+  }), /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: "".concat(prefix, "--header__menu-bar")
+  }, children));
+}
+
+HeaderNavigation.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
   /**
    * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
    * or `HeaderMenu`
@@ -103,8 +57,6 @@ _rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "propTypes", _rollupP
    * Optionally provide a custom class to apply to the underlying <nav> node
    */
   className: PropTypes__default["default"].string
-}));
-
-_rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "contextType", usePrefix.PrefixContext);
+});
 
-exports["default"] = HeaderNavigation;
+exports.HeaderNavigation = HeaderNavigation;

package/lib/components/UIShell/SideNav.js

@@ -222,15 +222,15 @@ SideNav.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHe
    * @param {object} event
    * @param {boolean} value
    */
-  onToggle: PropTypes__default["default"].func,
-
+  onToggle: PropTypes__default["default"].func
   /**
    * Provide a custom function for translating all message ids within this
    * component. This function will take in two arguments: the mesasge Id and the
    * state of the component. From this, you should return a string representing
    * the label you want displayed or read by screen readers.
    */
-  translateById: PropTypes__default["default"].func
+  // translateById: PropTypes.func,
+
 });
 var SideNav$1 = SideNav;
 

package/lib/components/UIShell/SideNavFooter.js

@@ -28,7 +28,7 @@ var _Close, _ChevronRight;
  * user interaction to expand or collapse the side navigation.
  */
 
-var SideNavFooter = function SideNavFooter(_ref) {
+function SideNavFooter(_ref) {
   var assistiveText = _ref.assistiveText,
       customClassName = _ref.className,
       expanded = _ref.expanded,
@@ -53,7 +53,7 @@ var SideNavFooter = function SideNavFooter(_ref) {
   }))), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--assistive-text")
   }, assistiveText)));
-};
+}
 
 SideNavFooter.propTypes = {
   /**
@@ -68,12 +68,6 @@ SideNavFooter.propTypes = {
    */
   expanded: PropTypes__default["default"].bool.isRequired,
 
-  /**
-   * Property to indicate if the side nav container is open (or not). Use to
-   * keep local state and styling in step with the SideNav expansion state.
-   */
-  isSideNavExpanded: PropTypes__default["default"].bool,
-
   /**
    * Provide a function that is called when the toggle button is interacted
    * with. Useful for controlling the expansion state of the side navigation.
@@ -83,6 +77,5 @@ SideNavFooter.propTypes = {
 SideNavFooter.defaultProps = {
   assistiveText: 'Toggle opening or closing the side navigation'
 };
-var SideNavFooter$1 = SideNavFooter;
 
-exports["default"] = SideNavFooter$1;
+exports["default"] = SideNavFooter;

package/lib/components/UIShell/SideNavIcon.js

@@ -21,7 +21,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var SideNavIcon = function SideNavIcon(_ref) {
+function SideNavIcon(_ref) {
   var _cx;
 
   var children = _ref.children,
@@ -32,7 +32,7 @@ var SideNavIcon = function SideNavIcon(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: className
   }, children);
-};
+}
 
 SideNavIcon.propTypes = {
   /**
@@ -54,6 +54,5 @@ SideNavIcon.propTypes = {
 SideNavIcon.defaultProps = {
   small: false
 };
-var SideNavIcon$1 = SideNavIcon;
 
-exports["default"] = SideNavIcon$1;
+exports["default"] = SideNavIcon;

package/lib/components/UIShell/SideNavItem.js

@@ -21,7 +21,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var SideNavItem = function SideNavItem(_ref) {
+function SideNavItem(_ref) {
   var _cx;
 
   var customClassName = _ref.className,
@@ -33,11 +33,11 @@ var SideNavItem = function SideNavItem(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className
   }, children);
-};
+}
 
 SideNavItem.propTypes = {
   /**
-   * Provide a single icon as the child to `SideNavIcon` to render in the
+   * Provide a single icon as the child to `SideNavItem` to render in the
    * container
    */
   children: PropTypes__default["default"].node.isRequired,
@@ -52,6 +52,5 @@ SideNavItem.propTypes = {
    */
   large: PropTypes__default["default"].bool
 };
-var SideNavItem$1 = SideNavItem;
 
-exports["default"] = SideNavItem$1;
+exports["default"] = SideNavItem;

package/lib/components/UIShell/SideNavLink.js

@@ -59,12 +59,6 @@ SideNavLink.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBab
    */
   className: PropTypes__default["default"].string,
 
-  /**
-   * Property to indicate if the side nav container is open (or not). Use to
-   * keep local state and styling in step with the SideNav expansion state.
-   */
-  isSideNavExpanded: PropTypes__default["default"].bool,
-
   /**
    * Specify if this is a large variation of the SideNavLink
    */

package/lib/components/UIShell/SideNavLinkText.js

@@ -23,7 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["className", "children"];
 
-var SideNavLinkText = function SideNavLinkText(_ref) {
+function SideNavLinkText(_ref) {
   var customClassName = _ref.className,
       children = _ref.children,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -33,7 +33,7 @@ var SideNavLinkText = function SideNavLinkText(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), children);
-};
+}
 
 SideNavLinkText.propTypes = {
   /**
@@ -46,6 +46,5 @@ SideNavLinkText.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var SideNavLinkText$1 = SideNavLinkText;
 
-exports["default"] = SideNavLinkText$1;
+exports["default"] = SideNavLinkText;

package/lib/components/UIShell/SideNavMenu.js

@@ -26,108 +26,73 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _ChevronDown;
-var SideNavMenu = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(SideNavMenu, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(SideNavMenu);
-
-  function SideNavMenu(props) {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, SideNavMenu);
-
-    _this = _super.call(this, props);
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleToggleExpand", function () {
-      _this.setState(function (state) {
-        return {
-          isExpanded: !state.isExpanded
-        };
-      });
-    });
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleKeyDown", function (event) {
-      if (match.match(event, keys.Escape)) {
-        _this.setState(function () {
-          return {
-            isExpanded: false
-          };
-        });
-      }
-    });
-
-    _this.state = {
-      isExpanded: props.defaultExpanded || false,
-      wasPreviouslyExpanded: props.defaultExpanded || false
-    };
-    return _this;
+var SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function SideNavMenu(props, ref) {
+  var _cx;
+
+  var customClassName = props.className,
+      children = props.children,
+      _props$defaultExpande = props.defaultExpanded,
+      defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
+      _props$isActive = props.isActive,
+      isActive = _props$isActive === void 0 ? false : _props$isActive,
+      _props$large = props.large,
+      large = _props$large === void 0 ? false : _props$large,
+      IconElement = props.renderIcon,
+      isSideNavExpanded = props.isSideNavExpanded,
+      title = props.title;
+  var prefix = usePrefix.usePrefix();
+
+  var _useState = React.useState(defaultExpanded),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isExpanded = _useState2[0],
+      setIsExpanded = _useState2[1];
+
+  var _useState3 = React.useState(defaultExpanded),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevExpanded = _useState4[0],
+      setPrevExpanded = _useState4[1];
+
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--active"), isActive || hasActiveChild(children) && !isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--icon"), IconElement), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+
+  if (isSideNavExpanded === false && isExpanded === true) {
+    setIsExpanded(false);
+    setPrevExpanded(true);
+  } else if (isSideNavExpanded === true && prevExpanded === true) {
+    setIsExpanded(true);
+    setPrevExpanded(false);
   }
 
-  _rollupPluginBabelHelpers.createClass(SideNavMenu, [{
-    key: "render",
-    value: function render() {
-      var _cx;
-
-      var prefix = this.context;
-      var _this$props = this.props,
-          buttonRef = _this$props.buttonRef,
-          customClassName = _this$props.className,
-          children = _this$props.children,
-          IconElement = _this$props.renderIcon,
-          isActive = _this$props.isActive,
-          title = _this$props.title,
-          large = _this$props.large;
-      var isExpanded = this.state.isExpanded;
-      var hasActiveChild;
-
-      if (children) {
-        // if we have children, either a single or multiple, find if it is active
-        hasActiveChild = Array.isArray(children) ? children.some(function (child) {
-          if (child.props && (child.props.isActive === true || child.props['aria-current'])) {
-            return true;
-          }
-
-          return false;
-        }) : children.props && (children.props.isActive === true || children.props['aria-current']);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    React__default["default"].createElement("li", {
+      className: className,
+      onKeyDown: function onKeyDown(event) {
+        if (match.match(event, keys.Escape)) {
+          setIsExpanded(false);
+        }
       }
-
-      var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--active"), isActive || hasActiveChild && !isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--icon"), IconElement), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        React__default["default"].createElement("li", {
-          className: className,
-          onKeyDown: this.handleKeyDown
-        }, /*#__PURE__*/React__default["default"].createElement("button", {
-          "aria-expanded": isExpanded,
-          className: "".concat(prefix, "--side-nav__submenu"),
-          onClick: this.handleToggleExpand,
-          ref: buttonRef,
-          type: "button"
-        }, IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--side-nav__submenu-title")
-        }, title), /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
-          className: "".concat(prefix, "--side-nav__submenu-chevron"),
-          small: true
-        }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
-          size: 20
-        })))), /*#__PURE__*/React__default["default"].createElement("ul", {
-          className: "".concat(prefix, "--side-nav__menu")
-        }, children))
-      );
-    }
-  }]);
-
-  return SideNavMenu;
-}(React__default["default"].Component);
-
-_rollupPluginBabelHelpers.defineProperty(SideNavMenu, "contextType", usePrefix.PrefixContext);
-
-_rollupPluginBabelHelpers.defineProperty(SideNavMenu, "propTypes", {
-  buttonRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any
-  })]),
-
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
+      "aria-expanded": isExpanded,
+      className: "".concat(prefix, "--side-nav__submenu"),
+      onClick: function onClick() {
+        setIsExpanded(!isExpanded);
+      },
+      ref: ref,
+      type: "button"
+    }, IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(prefix, "--side-nav__submenu-title")
+    }, title), /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
+      className: "".concat(prefix, "--side-nav__submenu-chevron"),
+      small: true
+    }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
+      size: 20
+    })))), /*#__PURE__*/React__default["default"].createElement("ul", {
+      className: "".concat(prefix, "--side-nav__menu")
+    }, children))
+  );
+});
+SideNavMenu.propTypes = {
   /**
    * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
    */
@@ -171,39 +136,35 @@ _rollupPluginBabelHelpers.defineProperty(SideNavMenu, "propTypes", {
    * Provide the text for the overall menu name
    */
   title: PropTypes__default["default"].string.isRequired
-});
+};
+
+function hasActiveChild(children) {
+  // if we have children, either a single or multiple, find if it is active
+  if (Array.isArray(children)) {
+    return children.some(function (child) {
+      if (!child.props) {
+        return false;
+      }
 
-_rollupPluginBabelHelpers.defineProperty(SideNavMenu, "defaultProps", {
-  defaultExpanded: false,
-  isActive: false,
-  large: false
-});
+      if (child.props.isActive === true) {
+        return true;
+      }
 
-_rollupPluginBabelHelpers.defineProperty(SideNavMenu, "getDerivedStateFromProps", function (props, state) {
-  var derivedState = null;
-
-  if (props.isSideNavExpanded === false && state.isExpanded === true) {
-    derivedState = {
-      isExpanded: props.isSideNavExpanded,
-      wasPreviouslyExpanded: true
-    };
-  } else if (props.isSideNavExpanded === true && state.wasPreviouslyExpanded === true) {
-    derivedState = {
-      isExpanded: props.isSideNavExpanded,
-      wasPreviouslyExpanded: false
-    };
+      if (child.props['aria-current']) {
+        return true;
+      }
+
+      return false;
+    });
   }
 
-  return derivedState;
-});
+  if (children.props) {
+    if (children.props.isActive === true || children.props['aria-current']) {
+      return true;
+    }
+  }
 
-var SideNavMenuForwardRef = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default["default"].createElement(SideNavMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
-    buttonRef: ref
-  }));
-});
-SideNavMenuForwardRef.displayName = 'SideNavMenu';
-var SideNavMenuClassic = SideNavMenuForwardRef;
+  return false;
+}
 
 exports.SideNavMenu = SideNavMenu;
-exports["default"] = SideNavMenuClassic;

package/lib/components/UIShell/SideNavSwitcher.js

@@ -14,6 +14,7 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
+var useId = require('../../internal/useId.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,6 +24,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _ChevronDown;
 var SideNavSwitcher = /*#__PURE__*/React__default["default"].forwardRef(function SideNavSwitcher(props, ref) {
+  var id = useId.useId('side-nav-switcher');
   var prefix = usePrefix.usePrefix();
   var customClassName = props.className,
       labelText = props.labelText,
@@ -33,10 +35,10 @@ var SideNavSwitcher = /*#__PURE__*/React__default["default"].forwardRef(function
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement("label", {
-    htmlFor: "side-nav-switcher",
+    htmlFor: id,
     className: "".concat(prefix, "--assistive-text")
   }, labelText), /*#__PURE__*/React__default["default"].createElement("select", {
-    id: "carbon-side-nav-switcher",
+    id: id,
     className: "".concat(prefix, "--side-nav__select"),
     defaultValue: "",
     onBlur: onChange,

package/lib/components/UIShell/SkipToContent.js

@@ -23,7 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _excluded = ["children", "className", "href", "tabIndex"];
 
-var SkipToContent = function SkipToContent(_ref) {
+function SkipToContent(_ref) {
   var children = _ref.children,
       customClassName = _ref.className,
       href = _ref.href,
@@ -37,7 +37,7 @@ var SkipToContent = function SkipToContent(_ref) {
     href: href,
     tabIndex: tabIndex
   }), children);
-};
+}
 
 SkipToContent.propTypes = {
   /**
@@ -62,6 +62,5 @@ SkipToContent.defaultProps = {
   href: '#main-content',
   tabIndex: '0'
 };
-var SkipToContent$1 = SkipToContent;
 
-exports["default"] = SkipToContent$1;
+exports["default"] = SkipToContent;