@carbon/react 1.15.0-rc.0 → 1.16.0-rc.0

package/es/components/Select/Select.js

@@ -5,14 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useContext, useState } from 'react';
 import cx from 'classnames';
 import { ChevronDown, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import deprecate from '../../prop-types/deprecate.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 
 var _excluded = ["className", "id", "inline", "labelText", "disabled", "children", "noLabel", "hideLabel", "invalid", "invalidText", "helperText", "light", "size", "warn", "warnText"];
 var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
@@ -44,7 +45,16 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
 
   var prefix = usePrefix();
   var enabled = useFeatureFlag('enable-v11-release');
-  var selectClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--select"), true), _defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _classNames), [enabled ? null : className]);
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var selectClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--select"), true), _defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _defineProperty(_classNames, "".concat(prefix, "--select--fluid--invalid"), isFluid && invalid), _defineProperty(_classNames, "".concat(prefix, "--select--fluid--focus"), isFluid && isFocused), _classNames), [enabled ? null : className]);
   var labelClasses = cx("".concat(prefix, "--label"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
   var inputClasses = cx((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--select-input"), true), _defineProperty(_classNames3, "".concat(prefix, "--select-input--").concat(size), size), _classNames3));
   var errorId = "".concat(id, "-error-msg");
@@ -73,6 +83,10 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
     ariaProps['aria-describedby'] = errorId;
   }
 
+  var handleFocus = function handleFocus(evt) {
+    setIsFocused(evt.type === 'focus' ? true : false);
+  };
+
   var input = function () {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("select", _extends({}, other, ariaProps, {
       id: id,
@@ -103,8 +117,12 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
     "data-invalid": invalid || null
   }, input), error), !inline && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--select-input__wrapper"),
-    "data-invalid": invalid || null
-  }, input), !inline && error ? error : helper));
+    "data-invalid": invalid || null,
+    onFocus: handleFocus,
+    onBlur: handleFocus
+  }, input), isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--select__divider")
+  }), !inline && error ? error : helper));
 });
 Select.displayName = 'Select';
 Select.propTypes = {

package/es/components/TextArea/TextArea.js

@@ -9,6 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import PropTypes from 'prop-types';
 import React__default, { useContext, useState } from 'react';
 import cx from 'classnames';
+import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -176,7 +177,7 @@ TextArea.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `TextArea` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Max character count allowed for the textarea. This is needed in order for enableCounter to display
@@ -220,7 +221,6 @@ TextArea.defaultProps = {
   invalid: false,
   invalidText: '',
   helperText: '',
-  light: false,
   enableCounter: false,
   maxCount: undefined
 };

package/es/components/TextInput/ControlledPasswordInput.js

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
 import { WarningFilled, ViewOff, View } from '@carbon/icons-react';
 import { textInputProps } from './util.js';
 import { warning } from '../../internal/warning.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _excluded = ["labelText", "className", "id", "placeholder", "onChange", "onClick", "hideLabel", "invalid", "invalidText", "helperText", "light", "type", "togglePasswordVisibility", "tooltipPosition", "tooltipAlignment", "hidePasswordLabel", "showPasswordLabel", "size"];
@@ -172,7 +173,7 @@ ControlledPasswordInput.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `ControlledPasswordInput` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Optionally provide an `onChange` handler that is called whenever `<input>`
@@ -219,14 +220,12 @@ ControlledPasswordInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 ControlledPasswordInput.defaultProps = {
-  className: '${prefix}--text__input',
   disabled: false,
   onChange: function onChange() {},
   onClick: function onClick() {},
   invalid: false,
   invalidText: '',
   helperText: '',
-  light: false,
   size: ''
 };
 var ControlledPasswordInput$1 = ControlledPasswordInput;

package/es/components/TextInput/PasswordInput.js

@@ -13,6 +13,7 @@ import { ViewOff, View } from '@carbon/icons-react';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { textInputProps } from './util.js';
 import * as FeatureFlags from '@carbon/feature-flags';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
@@ -33,8 +34,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
       invalidText = _ref.invalidText,
       labelText = _ref.labelText,
-      _ref$light = _ref.light,
-      light = _ref$light === void 0 ? false : _ref$light,
+      light = _ref.light,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       _ref$onClick = _ref.onClick,
@@ -215,7 +215,7 @@ PasswordInput.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `PasswordInput` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Optionally provide an `onChange` handler that is called whenever `<input>`

package/es/components/TextInput/TextInput.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import PasswordInput from './PasswordInput.js';
 import ControlledPasswordInput from './ControlledPasswordInput.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { textInputProps } from './util.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import * as FeatureFlags from '@carbon/feature-flags';
@@ -34,8 +35,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
       invalidText = _ref.invalidText,
       labelText = _ref.labelText,
-      _ref$light = _ref.light,
-      light = _ref$light === void 0 ? false : _ref$light,
+      light = _ref.light,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       _ref$onClick = _ref.onClick,
@@ -73,8 +73,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
     warn: warn,
     warnText: warnText
   });
-  var customClassName = className !== null && className !== void 0 ? className : "".concat(prefix, "--text__input");
-  var textInputClasses = cx("".concat(prefix, "--text-input"), [enabled ? null : className], (_classNames = {}, _defineProperty(_classNames, customClassName, enabled), _defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), normalizedProps.invalid), _defineProperty(_classNames, "".concat(prefix, "--text-input--warning"), normalizedProps.warn), _defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
+  var textInputClasses = cx("".concat(prefix, "--text-input"), [enabled ? null : className], (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), normalizedProps.invalid), _defineProperty(_classNames, "".concat(prefix, "--text-input--warning"), normalizedProps.warn), _defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
 
   var sharedTextInputProps = _objectSpread2(_defineProperty({
     id: id,
@@ -105,7 +104,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
     sharedTextInputProps.maxLength = maxCount;
   }
 
-  var inputWrapperClasses = cx([enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")], "".concat(prefix, "--text-input-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--readonly"), readOnly), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _classNames2));
+  var inputWrapperClasses = cx([enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")], "".concat(prefix, "--text-input-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--readonly"), readOnly), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline--invalid"), inline && normalizedProps.invalid), _classNames2));
   var labelClasses = cx("".concat(prefix, "--label"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), normalizedProps.disabled), _defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
   var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), normalizedProps.disabled), _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
   var fieldOuterWrapperClasses = cx("".concat(prefix, "--text-input__field-outer-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
@@ -141,7 +140,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--text-input__label-helper-wrapper")
-  }, labelWrapper, !isFluid && helper), /*#__PURE__*/React__default.createElement("div", {
+  }, labelWrapper, !isFluid && (normalizedProps.validation || helper)), /*#__PURE__*/React__default.createElement("div", {
     className: fieldOuterWrapperClasses
   }, /*#__PURE__*/React__default.createElement("div", {
     className: fieldWrapperClasses,
@@ -216,7 +215,7 @@ TextInput.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `TextInput` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Max character count allowed for the input. This is needed in order for enableCounter to display

package/es/components/Tile/next/Tile.js

@@ -188,8 +188,7 @@ var SelectableTile = /*#__PURE__*/React__default.forwardRef(function SelectableT
       prevSelected = _useState6[0],
       setPrevSelected = _useState6[1];
 
-  var classes = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--tile--is-selected"), isSelected), _defineProperty(_cx3, "".concat(prefix, "--tile--light"), light), _defineProperty(_cx3, "".concat(prefix, "--tile--disabled"), disabled), _cx3), className);
-  var inputClasses = cx("".concat(prefix, "--tile-input"), _defineProperty({}, "".concat(prefix, "--tile-input--checked"), isSelected)); // TODO: rename to handleClick when handleClick prop is deprecated
+  var classes = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--tile--is-selected"), isSelected), _defineProperty(_cx3, "".concat(prefix, "--tile--light"), light), _defineProperty(_cx3, "".concat(prefix, "--tile--disabled"), disabled), _cx3), className); // TODO: rename to handleClick when handleClick prop is deprecated
 
   function handleOnClick(evt) {
     evt.preventDefault();
@@ -222,30 +221,27 @@ var SelectableTile = /*#__PURE__*/React__default.forwardRef(function SelectableT
     setPrevSelected(selected);
   }
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", {
-    checked: isSelected,
-    className: inputClasses,
-    disabled: disabled,
-    id: id,
-    name: name,
-    onChange: !disabled ? handleChange : null,
-    ref: ref,
-    tabIndex: -1,
-    title: title,
-    type: "checkbox",
-    value: value
-  }), /*#__PURE__*/React__default.createElement("label", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classes,
-    htmlFor: id,
     onClick: !disabled ? handleOnClick : null,
+    role: "checkbox",
+    "aria-checked": isSelected,
+    disabled: disabled,
     onKeyDown: !disabled ? handleOnKeyDown : null // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
-    tabIndex: !disabled ? tabIndex : null
+    tabIndex: !disabled ? tabIndex : null,
+    value: value,
+    name: name,
+    ref: ref,
+    id: id,
+    onChange: !disabled ? handleChange : null,
+    title: title
   }, rest), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--tile__checkmark ").concat(prefix, "--tile__checkmark--persistent")
-  }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("span", {
+  }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
     className: "".concat(prefix, "--tile-content")
-  }, children)));
+  }, children));
 });
 SelectableTile.displayName = 'SelectableTile';
 SelectableTile.propTypes = {
@@ -316,7 +312,7 @@ SelectableTile.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
 function ExpandableTile(_ref4) {
-  var _cx5, _cx6;
+  var _cx4, _cx5;
 
   var tabIndex = _ref4.tabIndex,
       className = _ref4.className,
@@ -420,8 +416,8 @@ function ExpandableTile(_ref4) {
     return React__default.Children.toArray(children);
   }
 
-  var classNames = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--tile--is-expanded"), isExpanded), _defineProperty(_cx5, "".concat(prefix, "--tile--light"), light), _cx5), className);
-  var interactiveClassNames = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), "".concat(prefix, "--tile--expandable--interactive"), (_cx6 = {}, _defineProperty(_cx6, "".concat(prefix, "--tile--is-expanded"), isExpanded), _defineProperty(_cx6, "".concat(prefix, "--tile--light"), light), _cx6), className);
+  var classNames = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--tile--is-expanded"), isExpanded), _defineProperty(_cx4, "".concat(prefix, "--tile--light"), light), _cx4), className);
+  var interactiveClassNames = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), "".concat(prefix, "--tile--expandable--interactive"), (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--tile--is-expanded"), isExpanded), _defineProperty(_cx5, "".concat(prefix, "--tile--light"), light), _cx5), className);
   var chevronInteractiveClassNames = cx("".concat(prefix, "--tile__chevron"), "".concat(prefix, "--tile__chevron--interactive"));
   var tileStyle = {
     maxHeight: isExpanded ? null : isTileMaxHeight + isTilePadding

package/es/components/Tooltip/next/DefinitionTooltip.js

@@ -16,7 +16,7 @@ import deprecate from '../../../prop-types/deprecate.js';
 import { match } from '../../../internal/keyboard/match.js';
 import { Escape } from '../../../internal/keyboard/keys.js';
 
-var _excluded = ["align", "className", "children", "definition", "defaultOpen", "id", "tooltipText", "triggerClassName"];
+var _excluded = ["align", "className", "children", "definition", "defaultOpen", "id", "openOnHover", "tooltipText", "triggerClassName"];
 
 function DefinitionTooltip(_ref) {
   var _ref$align = _ref.align,
@@ -27,6 +27,7 @@ function DefinitionTooltip(_ref) {
       _ref$defaultOpen = _ref.defaultOpen,
       defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
       id = _ref.id,
+      openOnHover = _ref.openOnHover,
       tooltipText = _ref.tooltipText,
       triggerClassName = _ref.triggerClassName,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -54,6 +55,9 @@ function DefinitionTooltip(_ref) {
     onMouseLeave: function onMouseLeave() {
       setOpen(false);
     },
+    onMouseEnter: function onMouseEnter() {
+      openOnHover ? setOpen(true) : null;
+    },
     open: isOpen
   }, /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
     className: cx("".concat(prefix, "--definition-term"), triggerClassName),
@@ -77,7 +81,7 @@ DefinitionTooltip.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right']),
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
 
   /**
    * The `children` prop will be used as the value that is being defined
@@ -106,6 +110,11 @@ DefinitionTooltip.propTypes = {
    */
   id: PropTypes.string,
 
+  /**
+   * Specifies whether or not the `DefinitionTooltip` should open on hover or not
+   */
+  openOnHover: PropTypes.bool,
+
   /**
    * [Deprecated in v11] Please use the `definition` prop instead.
    *

package/es/components/UIShell/HeaderMenu.js

@@ -144,7 +144,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(HeaderMenu, [{
     key: "render",
     value: function render() {
-      var _cx;
+      var _cx, _cx2;
 
       var prefix = this.context;
 
@@ -163,7 +163,8 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy
       };
-      var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _defineProperty(_cx, customClassName, !!customClassName), _cx)); // Notes on eslint comments and based on the examples in:
+      var itemClassName = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _defineProperty(_cx, customClassName, !!customClassName), _cx));
+      var linkClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-title"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-item--current"), isCurrentPage), _cx2)); // 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
@@ -172,7 +173,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
       // - href can be set to javascript:void(0), ideally this will be a button
 
       return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
-        className: className,
+        className: itemClassName,
         onKeyDown: this.handleMenuClose,
         onClick: this.handleOnClick,
         onBlur: this.handleOnBlur
@@ -181,7 +182,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         "aria-haspopup": "menu" // eslint-disable-line jsx-a11y/aria-proptypes
         ,
         "aria-expanded": this.state.expanded,
-        className: "".concat(prefix, "--header__menu-item ").concat(prefix, "--header__menu-title"),
+        className: linkClassName,
         href: "#",
         onKeyDown: this.handleOnKeyDown,
         ref: this.handleMenuButtonRef,
@@ -206,11 +207,21 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
 }(React__default.Component);
 
 _defineProperty(HeaderMenu, "propTypes", _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes.string,
+
   /**
    * Provide a custom ref handler for the menu button
    */
   focusRef: PropTypes.func,
 
+  /**
+   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   */
+  isCurrentPage: PropTypes.bool,
+
   /**
    * Provide a label for the link text
    */

package/es/components/UIShell/SideNavMenu.js

@@ -71,7 +71,8 @@ var SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(pr
       ref: ref,
       type: "button"
     }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(prefix, "--side-nav__submenu-title")
+      className: "".concat(prefix, "--side-nav__submenu-title"),
+      title: title
     }, title), /*#__PURE__*/React__default.createElement(SideNavIcon, {
       className: "".concat(prefix, "--side-nav__submenu-chevron"),
       small: true

package/es/index.js

@@ -28,7 +28,12 @@ export { default as DatePicker } from './components/DatePicker/DatePicker.js';
 export { default as DatePickerInput } from './components/DatePickerInput/DatePickerInput.js';
 export { default as DropdownSkeleton } from './components/Dropdown/Dropdown.Skeleton.js';
 export { default as Dropdown } from './components/Dropdown/Dropdown.js';
-export { default as FileUploader } from './components/FileUploader/index.js';
+export { default as FileUploader } from './components/FileUploader/FileUploader.js';
+export { default as Filename } from './components/FileUploader/Filename.js';
+export { default as FileUploaderSkeleton } from './components/FileUploader/FileUploader.Skeleton.js';
+export { default as FileUploaderButton } from './components/FileUploader/FileUploaderButton.js';
+export { default as FileUploaderDropContainer } from './components/FileUploader/FileUploaderDropContainer.js';
+export { default as FileUploaderItem } from './components/FileUploader/FileUploaderItem.js';
 export { default as Form } from './components/Form/Form.js';
 export { default as FluidForm } from './components/FluidForm/FluidForm.js';
 export { default as FormGroup } from './components/FormGroup/FormGroup.js';
@@ -44,7 +49,8 @@ import './components/MultiSelect/index.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/index.js';
-export { default as Pagination } from './components/Pagination/index.js';
+export { default as Pagination } from './components/Pagination/Pagination.js';
+export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
 export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
@@ -82,8 +88,6 @@ export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder
 export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.js';
 export { default as DataTableSkeleton } from './components/DataTableSkeleton/DataTableSkeleton.js';
 export { default as BreadcrumbSkeleton } from './components/Breadcrumb/Breadcrumb.Skeleton.js';
-export { default as FileUploaderSkeleton } from './components/FileUploader/FileUploader.Skeleton.js';
-export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
 export { default as RadioButtonSkeleton } from './components/RadioButton/RadioButton.Skeleton.js';
 export { default as SearchSkeleton } from './components/Search/Search.Skeleton.js';
@@ -105,10 +109,6 @@ export { DefinitionTooltip } from './components/Tooltip/next/DefinitionTooltip.j
 export { GlobalTheme, Theme, useTheme } from './components/Theme/index.js';
 export { usePrefix } from './internal/usePrefix.js';
 export { default as AspectRatio } from './components/AspectRatio/AspectRatio.js';
-export { default as Filename } from './components/FileUploader/Filename.js';
-export { default as FileUploaderButton } from './components/FileUploader/FileUploaderButton.js';
-export { default as FileUploaderDropContainer } from './components/FileUploader/FileUploaderDropContainer.js';
-export { default as FileUploaderItem } from './components/FileUploader/FileUploaderItem.js';
 export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
@@ -199,8 +199,14 @@ export { default as SideNavLink } from './components/UIShell/SideNavLink.js';
 export { SideNavMenu } from './components/UIShell/SideNavMenu.js';
 export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem.js';
 export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
+export { default as unstable__FluidComboBox } from './components/FluidComboBox/FluidComboBox.js';
+export { default as unstable__FluidComboBoxSkeleton } from './components/FluidComboBox/FluidComboBox.Skeleton.js';
 export { default as unstable__FluidDropdown } from './components/FluidDropdown/FluidDropdown.js';
 export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.Skeleton.js';
+export { default as unstable__FluidMultiSelect } from './components/FluidMultiSelect/FluidMultiSelect.js';
+export { default as unstable__FluidMultiSelectSkeleton } from './components/FluidMultiSelect/FluidMultiSelect.Skeleton.js';
+export { default as unstable__FluidSelect } from './components/FluidSelect/FluidSelect.js';
+export { default as unstable__FluidSelectSkeleton } from './components/FluidSelect/FluidSelect.Skeleton.js';
 export { LayoutDirection as unstable_LayoutDirection } from './components/Layout/LayoutDirection.js';
 export { useLayoutDirection as unstable_useLayoutDirection } from './components/Layout/useLayoutDirection.js';
 export { Stack } from './components/Stack/Stack.js';

package/es/internal/useNormalizedInputProps.js

@@ -7,8 +7,8 @@
 
 import React__default from 'react';
 import { EditOff, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import { usePrefix } from './usePrefix.js';
 
-var prefix = 'cds';
 /**
  * @typedef {object} InputProps
  * @property {string} id - The input's id
@@ -53,6 +53,7 @@ function useNormalizedInputProps(_ref) {
       invalidText = _ref.invalidText,
       warn = _ref.warn,
       warnText = _ref.warnText;
+  var prefix = usePrefix();
   var normalizedProps = {
     disabled: !readOnly && disabled,
     invalid: !readOnly && invalid,

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -20,6 +20,7 @@ var Button = require('../Button/Button.js');
 var CopyButton = require('../CopyButton/CopyButton.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var copy = require('copy-to-clipboard');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -314,7 +315,7 @@ CodeSnippet.propTypes = {
    * Specify whether you are using the light variant of the Code Snippet,
    * typically used for inline snippet to display an alternate color
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the maximum number of rows to be shown when in collapsed view