@carbon/react 1.15.0 → 1.16.0

package/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -22,7 +22,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className"];
+var _excluded = ["className", "vertical"];
 
 var _CircleDash, _Step, _Step2, _Step3, _Step4;
 
@@ -41,11 +41,12 @@ function Step() {
 
 function ProgressIndicatorSkeleton(_ref) {
   var className = _ref.className,
+      vertical = _ref.vertical,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), className)
+    className: cx__default["default"]("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--progress--vertical"), vertical), className)
   }, rest), _Step || (_Step = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step2 || (_Step2 = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step3 || (_Step3 = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step4 || (_Step4 = /*#__PURE__*/React__default["default"].createElement(Step, null)));
 }
 
@@ -53,7 +54,12 @@ ProgressIndicatorSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Determines whether or not the ProgressIndicator should be rendered vertically.
+   */
+  vertical: PropTypes__default["default"].bool
 };
 
 exports["default"] = ProgressIndicatorSkeleton;

package/lib/components/Select/Select.js

@@ -17,6 +17,7 @@ var iconsReact = require('@carbon/icons-react');
 var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -54,7 +55,16 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
 
   var prefix = usePrefix.usePrefix();
   var enabled = index.useFeatureFlag('enable-v11-release');
-  var selectClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _classNames), [enabled ? null : className]);
+
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var selectClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--fluid--focus"), isFluid && isFocused), _classNames), [enabled ? null : className]);
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
   var inputClasses = cx__default["default"]((_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--select-input"), true), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--select-input--").concat(size), size), _classNames3));
   var errorId = "".concat(id, "-error-msg");
@@ -83,6 +93,10 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
     ariaProps['aria-describedby'] = errorId;
   }
 
+  var handleFocus = function handleFocus(evt) {
+    setIsFocused(evt.type === 'focus' ? true : false);
+  };
+
   var input = function () {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("select", _rollupPluginBabelHelpers["extends"]({}, other, ariaProps, {
       id: id,
@@ -113,8 +127,12 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
     "data-invalid": invalid || null
   }, input), error), !inline && /*#__PURE__*/React__default["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["default"].createElement("hr", {
+    className: "".concat(prefix, "--select__divider")
+  }), !inline && error ? error : helper));
 });
 Select.displayName = 'Select';
 Select.propTypes = {

package/lib/components/TextArea/TextArea.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
+var deprecate = require('../../prop-types/deprecate.js');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -186,7 +187,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__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].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
@@ -230,7 +231,6 @@ TextArea.defaultProps = {
   invalid: false,
   invalidText: '',
   helperText: '',
-  light: false,
   enableCounter: false,
   maxCount: undefined
 };

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -16,6 +16,7 @@ var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
 var util = require('./util.js');
 var warning = require('../../internal/warning.js');
+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 }; }
@@ -182,7 +183,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__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].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>`
@@ -229,14 +230,12 @@ ControlledPasswordInput.propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].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/lib/components/TextInput/PasswordInput.js

@@ -17,6 +17,7 @@ var iconsReact = require('@carbon/icons-react');
 var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 var util = require('./util.js');
 var FeatureFlags = require('@carbon/feature-flags');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 
@@ -62,8 +63,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
       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,
@@ -244,7 +244,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__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].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/lib/components/TextInput/TextInput.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 var PasswordInput = require('./PasswordInput.js');
 var ControlledPasswordInput = require('./ControlledPasswordInput.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var util = require('./util.js');
 var index = require('../FeatureFlags/index.js');
 var FeatureFlags = require('@carbon/feature-flags');
@@ -63,8 +64,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
       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,
@@ -102,8 +102,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
     warn: warn,
     warnText: warnText
   });
-  var customClassName = className !== null && className !== void 0 ? className : "".concat(prefix, "--text__input");
-  var textInputClasses = cx__default["default"]("".concat(prefix, "--text-input"), [enabled ? null : className], (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, customClassName, enabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), normalizedProps.invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
+  var textInputClasses = cx__default["default"]("".concat(prefix, "--text-input"), [enabled ? null : className], (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), normalizedProps.invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
 
   var sharedTextInputProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.defineProperty({
     id: id,
@@ -134,12 +133,12 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
     sharedTextInputProps.maxLength = maxCount;
   }
 
-  var inputWrapperClasses = cx__default["default"]([enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")], "".concat(prefix, "--text-input-wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _classNames2));
+  var inputWrapperClasses = cx__default["default"]([enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")], "".concat(prefix, "--text-input-wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline--invalid"), inline && normalizedProps.invalid), _classNames2));
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), normalizedProps.disabled), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
   var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), normalizedProps.disabled), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
   var fieldOuterWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-outer-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
   var fieldWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx__default["default"]((_classNames7 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__readonly-icon"), readOnly), _classNames7));
+  var iconClasses = cx__default["default"]((_classNames7 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _classNames7));
   var counterClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames8 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--text-input__label-counter"), true), _classNames8));
   var counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: counterClasses
@@ -170,7 +169,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--text-input__label-helper-wrapper")
-  }, labelWrapper, !isFluid && helper), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, labelWrapper, !isFluid && (normalizedProps.validation || helper)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: fieldOuterWrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: fieldWrapperClasses,
@@ -245,7 +244,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__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].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/lib/components/Tile/next/Tile.js

@@ -198,8 +198,7 @@ var SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function
       prevSelected = _useState6[0],
       setPrevSelected = _useState6[1];
 
-  var classes = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--tile--is-selected"), isSelected), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--tile--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--tile--disabled"), disabled), _cx3), className);
-  var inputClasses = cx__default["default"]("".concat(prefix, "--tile-input"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tile-input--checked"), isSelected)); // TODO: rename to handleClick when handleClick prop is deprecated
+  var classes = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--tile--is-selected"), isSelected), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--tile--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--tile--disabled"), disabled), _cx3), className); // TODO: rename to handleClick when handleClick prop is deprecated
 
   function handleOnClick(evt) {
     evt.preventDefault();
@@ -232,30 +231,27 @@ var SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     setPrevSelected(selected);
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["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["default"].createElement("span", {
     className: "".concat(prefix, "--tile__checkmark ").concat(prefix, "--tile__checkmark--persistent")
-  }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id,
     className: "".concat(prefix, "--tile-content")
-  }, children)));
+  }, children));
 });
 SelectableTile.displayName = 'SelectableTile';
 SelectableTile.propTypes = {
@@ -326,7 +322,7 @@ SelectableTile.propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired
 };
 function ExpandableTile(_ref4) {
-  var _cx5, _cx6;
+  var _cx4, _cx5;
 
   var tabIndex = _ref4.tabIndex,
       className = _ref4.className,
@@ -430,8 +426,8 @@ function ExpandableTile(_ref4) {
     return React__default["default"].Children.toArray(children);
   }
 
-  var classNames = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), (_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--tile--is-expanded"), isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--tile--light"), light), _cx5), className);
-  var interactiveClassNames = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), "".concat(prefix, "--tile--expandable--interactive"), (_cx6 = {}, _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--tile--is-expanded"), isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--tile--light"), light), _cx6), className);
+  var classNames = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tile--is-expanded"), isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tile--light"), light), _cx4), className);
+  var interactiveClassNames = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), "".concat(prefix, "--tile--expandable--interactive"), (_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--tile--is-expanded"), isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--tile--light"), light), _cx5), className);
   var chevronInteractiveClassNames = cx__default["default"]("".concat(prefix, "--tile__chevron"), "".concat(prefix, "--tile__chevron--interactive"));
   var tileStyle = {
     maxHeight: isExpanded ? null : isTileMaxHeight + isTilePadding

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

@@ -26,7 +26,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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,
@@ -37,6 +37,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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -64,6 +65,9 @@ function DefinitionTooltip(_ref) {
     onMouseLeave: function onMouseLeave() {
       setOpen(false);
     },
+    onMouseEnter: function onMouseEnter() {
+      openOnHover ? setOpen(true) : null;
+    },
     open: isOpen
   }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"]("".concat(prefix, "--definition-term"), triggerClassName),
@@ -87,7 +91,7 @@ DefinitionTooltip.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right']),
+  align: PropTypes__default["default"].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
@@ -116,6 +120,11 @@ DefinitionTooltip.propTypes = {
    */
   id: PropTypes__default["default"].string,
 
+  /**
+   * Specifies whether or not the `DefinitionTooltip` should open on hover or not
+   */
+  openOnHover: PropTypes__default["default"].bool,
+
   /**
    * [Deprecated in v11] Please use the `definition` prop instead.
    *

package/lib/components/UIShell/HeaderMenu.js

@@ -154,7 +154,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
   _rollupPluginBabelHelpers.createClass(HeaderMenu, [{
     key: "render",
     value: function render() {
-      var _cx;
+      var _cx, _cx2;
 
       var prefix = this.context;
 
@@ -173,7 +173,8 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy
       };
-      var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx)); // Notes on eslint comments and based on the examples in:
+      var itemClassName = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+      var linkClassName = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-item"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-title"), true), _rollupPluginBabelHelpers.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
@@ -182,7 +183,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["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
-        className: className,
+        className: itemClassName,
         onKeyDown: this.handleMenuClose,
         onClick: this.handleOnClick,
         onBlur: this.handleOnBlur
@@ -191,7 +192,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,
@@ -216,11 +217,21 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
 }(React__default["default"].Component);
 
 _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string,
+
   /**
    * Provide a custom ref handler for the menu button
    */
   focusRef: PropTypes__default["default"].func,
 
+  /**
+   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   */
+  isCurrentPage: PropTypes__default["default"].bool,
+
   /**
    * Provide a label for the link text
    */

package/lib/components/UIShell/SideNavMenu.js

@@ -81,7 +81,8 @@ var SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function Sid
       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")
+      className: "".concat(prefix, "--side-nav__submenu-title"),
+      title: title
     }, title), /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
       className: "".concat(prefix, "--side-nav__submenu-chevron"),
       small: true