@carbon/react 1.4.0 → 1.6.0-rc.0

package/es/components/TreeView/TreeNode.js

@@ -64,6 +64,10 @@ function TreeNode(_ref) {
   var toggleClasses = cx("".concat(prefix, "--tree-parent-node__toggle-icon"), _defineProperty({}, "".concat(prefix, "--tree-parent-node__toggle-icon--expanded"), expanded));
 
   function handleToggleClick(event) {
+    if (disabled) {
+      return;
+    }
+
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
       id: id,
       isExpanded: !expanded,
@@ -96,6 +100,10 @@ function TreeNode(_ref) {
   function handleKeyDown(event) {
     var _rest$onKeyDown;
 
+    if (disabled) {
+      return;
+    }
+
     if (matches(event, [ArrowLeft, ArrowRight, Enter])) {
       event.stopPropagation();
     }

package/es/components/TreeView/TreeView.js

@@ -153,7 +153,7 @@ function TreeView(_ref) {
       var nodeIds = [];
 
       if (matches(event, [Home, End])) {
-        if (multiselect && event.shiftKey && event.ctrlKey) {
+        if (multiselect && event.shiftKey && event.ctrlKey && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
           var _treeWalker$current$c;
 
           nodeIds.push((_treeWalker$current$c = treeWalker.current.currentNode) === null || _treeWalker$current$c === void 0 ? void 0 : _treeWalker$current$c.id);
@@ -162,7 +162,7 @@ function TreeView(_ref) {
         while (match(event, Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
           nextFocusNode = treeWalker.current.currentNode;
 
-          if (multiselect && event.shiftKey && event.ctrlKey) {
+          if (multiselect && event.shiftKey && event.ctrlKey && !nextFocusNode.getAttribute('aria-disabled')) {
             var _nextFocusNode;
 
             nodeIds.push((_nextFocusNode = nextFocusNode) === null || _nextFocusNode === void 0 ? void 0 : _nextFocusNode.id);
@@ -176,9 +176,11 @@ function TreeView(_ref) {
         treeWalker.current.currentNode = treeWalker.current.root;
 
         while (treeWalker.current.nextNode()) {
-          var _treeWalker$current$c2;
+          if (!treeWalker.current.currentNode.getAttribute('aria-disabled')) {
+            var _treeWalker$current$c2;
 
-          nodeIds.push((_treeWalker$current$c2 = treeWalker.current.currentNode) === null || _treeWalker$current$c2 === void 0 ? void 0 : _treeWalker$current$c2.id);
+            nodeIds.push((_treeWalker$current$c2 = treeWalker.current.currentNode) === null || _treeWalker$current$c2 === void 0 ? void 0 : _treeWalker$current$c2.id);
+          }
         }
       }
 

package/es/components/UIShell/HeaderGlobalBar.js

@@ -13,7 +13,9 @@ import wrapComponent from '../../tools/wrapComponent.js';
 
 var HeaderGlobalBar = wrapComponent({
   name: 'HeaderGlobalBar',
-  className: "cds--header__global",
+  className: function className(prefix) {
+    return "".concat(prefix, "--header__global");
+  },
   type: 'div'
 });
 

package/es/components/UIShell/SideNav.js

@@ -212,15 +212,15 @@ SideNav.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
    * @param {object} event
    * @param {boolean} value
    */
-  onToggle: PropTypes.func,
-
+  onToggle: PropTypes.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.func
+  // translateById: PropTypes.func,
+
 });
 var SideNav$1 = SideNav;
 

package/es/index.js

@@ -79,7 +79,8 @@ export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as TileGroup } from './components/TileGroup/index.js';
 export { default as TimePicker } from './components/TimePicker/index.js';
 export { default as TimePickerSelect } from './components/TimePickerSelect/index.js';
-export { default as Toggle } from './components/Toggle/index.js';
+export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
+export { Toggle } from './components/Toggle/Toggle.js';
 export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
 export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
@@ -95,7 +96,6 @@ export { default as SearchSkeleton } from './components/Search/Search.Skeleton.j
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
-export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
 export { HeaderNavigation, SideNavMenu } from './components/UIShell/index.js';
@@ -110,6 +110,7 @@ export { HStack, VStack } from './components/Stack/index.js';
 export { DefinitionTooltip } from './components/Tooltip/next/DefinitionTooltip.js';
 import './components/TreeView/index.js';
 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';

package/es/tools/wrapComponent.js

@@ -9,26 +9,28 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { usePrefix } from '../internal/usePrefix.js';
 
 var _excluded = ["className"];
 
 var wrapComponent = function wrapComponent(_ref) {
   var name = _ref.name,
-      className = _ref.className,
+      getClassName = _ref.className,
       type = _ref.type;
 
-  var Component = function Component(_ref2) {
+  function Component(_ref2) {
     var baseClassName = _ref2.className,
         other = _objectWithoutProperties(_ref2, _excluded);
 
-    var componentClass = cx(className, baseClassName);
+    var prefix = usePrefix();
+    var componentClass = cx(typeof getClassName === 'function' ? getClassName(prefix) : getClassName, baseClassName);
     return /*#__PURE__*/React__default.createElement(type, _objectSpread2(_objectSpread2({}, other), {}, {
       // Prevent Weird quirk where `cx` will evaluate to an empty string, '',
       // and so we have empty `class` attributes in the resulting markup
       // eslint-disable-next-line no-extra-boolean-cast
       className: !!componentClass ? componentClass : undefined
     }));
-  };
+  }
 
   Component.displayName = name;
   Component.propTypes = {

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -86,7 +86,7 @@ function _defineProperty(obj, key, value) {
 }
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -99,7 +99,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -122,18 +121,17 @@ function _inherits(subClass, superClass) {
 }
 
 function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
     return o.__proto__ || Object.getPrototypeOf(o);
   };
   return _getPrototypeOf(o);
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 

package/lib/components/Button/Button.Skeleton.js

@@ -55,7 +55,7 @@ var ButtonSkeleton = function ButtonSkeleton(_ref) {
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var buttonClasses = cx__default["default"](className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--sm"), small || size === 'sm'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--xl"), size === 'xl'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--2xl"), size === '2xl'), _cx));
+  var buttonClasses = cx__default["default"](className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--sm"), small || size === 'sm'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--lg"), size === 'lg'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--xl"), size === 'xl'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--2xl"), size === '2xl'), _cx));
 
   var commonProps = _rollupPluginBabelHelpers.objectSpread2({
     className: buttonClasses

package/lib/components/Checkbox/Checkbox.js

@@ -36,9 +36,8 @@ var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function Checkb
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var labelClasses = cx__default["default"]("".concat(prefix, "--checkbox-label"), [className]);
-  var innerLabelClasses = cx__default["default"]("".concat(prefix, "--checkbox-label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), "".concat(prefix, "--checkbox-wrapper"), [className]);
+  var innerLabelClasses = cx__default["default"]("".concat(prefix, "--checkbox-label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {
@@ -64,7 +63,7 @@ var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function Checkb
     }
   })), /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
-    className: labelClasses,
+    className: "".concat(prefix, "--checkbox-label"),
     title: title || null
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: innerLabelClasses
@@ -113,8 +112,9 @@ Checkbox.propTypes = {
   labelText: PropTypes__default["default"].node.isRequired,
 
   /**
-   * Receives three arguments: true/false, the checkbox's id, and the dom event.
-   * `(value, id, event) => console.log({value, id, event})`
+   * Provide an optional handler that is called when the internal state of
+   * Checkbox changes. This handler is called with event and state info.
+   * `(event, { checked, id }) => void`
    */
   onChange: PropTypes__default["default"].func,
 

package/lib/components/ComposedModal/ComposedModal.js

@@ -233,7 +233,8 @@ var ComposedModal = /*#__PURE__*/function (_Component) {
         onClick: this.handleClick,
         onKeyDown: this.handleKeyDown,
         onTransitionEnd: open ? this.handleTransitionEnd : undefined,
-        className: modalClass
+        className: modalClass,
+        tabIndex: "-1"
       }), /*#__PURE__*/React__default["default"].createElement("span", {
         ref: this.startSentinel,
         tabIndex: "0",

package/lib/components/ComposedModal/next/ComposedModal.js

@@ -204,7 +204,8 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     onBlur: handleBlur,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    className: modalClass
+    className: modalClass,
+    tabIndex: "-1"
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: containerClass,
     role: "dialog",

package/lib/components/DataTable/TableActionList.js

@@ -14,7 +14,9 @@ var wrapComponent = require('../../tools/wrapComponent.js');
 var TableActionList = wrapComponent["default"]({
   name: 'TableActionList',
   type: 'div',
-  className: "cds--action-list"
+  className: function className(prefix) {
+    return "".concat(prefix, "--action-list");
+  }
 });
 var TableActionList$1 = TableActionList;
 

package/lib/components/DataTable/TableToolbarContent.js

@@ -14,7 +14,9 @@ var wrapComponent = require('../../tools/wrapComponent.js');
 var TableToolbarContent = wrapComponent["default"]({
   name: 'TableToolbarContent',
   type: 'div',
-  className: "cds--toolbar-content"
+  className: function className(prefix) {
+    return "".concat(prefix, "--toolbar-content");
+  }
 });
 var TableToolbarContent$1 = TableToolbarContent;
 

package/lib/components/DatePicker/DatePicker.js

@@ -31,7 +31,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
 
-var _excluded = ["allowInput", "appendTo", "children", "className", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
+var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
 
 index["default"].en.weekdays.shorthand.forEach(function (_day, index$1) {
   var currentDay = index["default"].en.weekdays.shorthand;
@@ -163,6 +163,8 @@ function DatePicker(_ref) {
       appendTo = _ref.appendTo,
       children = _ref.children,
       className = _ref.className,
+      _ref$closeOnSelect = _ref.closeOnSelect,
+      closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
       _ref$dateFormat = _ref.dateFormat,
       dateFormat = _ref$dateFormat === void 0 ? 'm/d/Y' : _ref$dateFormat,
       datePickerType = _ref.datePickerType,
@@ -262,6 +264,7 @@ function DatePicker(_ref) {
       inline: inline !== null && inline !== void 0 ? inline : false,
       disableMobile: true,
       defaultDate: value,
+      closeOnSelect: closeOnSelect,
       mode: datePickerType,
       allowInput: allowInput !== null && allowInput !== void 0 ? allowInput : true,
       dateFormat: dateFormat,
@@ -322,7 +325,7 @@ function DatePicker(_ref) {
       // error with IBM Equal Access Accessibility Checker so we add an aria
       // role to the container div.
 
-      calendar.calendarContainer.setAttribute('role', 'region'); // IBM EAAC requires an aria-label on a role='region'
+      calendar.calendarContainer.setAttribute('role', 'application'); // IBM EAAC requires an aria-label on a role='region'
 
       calendar.calendarContainer.setAttribute('aria-label', 'calendar-container');
     }
@@ -386,9 +389,10 @@ function DatePicker(_ref) {
   }, [inline]);
   React.useEffect(function () {
     if (calendarRef.current) {
-      calendarRef.current.set({
-        value: value
-      });
+      if (value !== undefined) {
+        calendarRef.current.setDate(value);
+      }
+
       updateClassNames(calendarRef.current, prefix); //for simple date picker w/o calendar; initial mount may not have value
     } else if (!calendarRef.current && value) {
       startInputField.current.value = value;
@@ -423,6 +427,11 @@ DatePicker.propTypes = {
    */
   className: PropTypes__default["default"].string,
 
+  /**
+   * flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
+   */
+  closeOnSelect: PropTypes__default["default"].bool,
+
   /**
    * The date format.
    */

package/lib/components/FileUploader/FileUploader.js

@@ -253,7 +253,7 @@ _rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
   iconDescription: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].string.isRequired : PropTypes__default["default"].string,
 
   /**
-   * Specify the description text of this <FileUploader>
+   * Specify the description text of this `<FileUploader>`
    */
   labelDescription: PropTypes__default["default"].string,
 

package/lib/components/FileUploader/FileUploaderButton.js

@@ -175,7 +175,7 @@ FileUploaderButton.propTypes = {
   disabled: PropTypes__default["default"].bool,
 
   /**
-   * Provide a unique id for the underlying <input> node
+   * Provide a unique id for the underlying `<input>` node
    */
   id: PropTypes__default["default"].string,
 

package/lib/components/FileUploader/Filename.js

@@ -78,7 +78,7 @@ Filename.propTypes = {
   status: PropTypes__default["default"].oneOf(['edit', 'complete', 'uploading']),
 
   /**
-   * Provide a custom tabIndex value for the <Filename>
+   * Provide a custom tabIndex value for the `<Filename>`
    */
   tabIndex: PropTypes__default["default"].string
 };

package/lib/components/Link/Link.js

@@ -28,9 +28,12 @@ var Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_ref,
   var children = _ref.children,
       customClassName = _ref.className,
       href = _ref.href,
-      disabled = _ref.disabled,
-      inline = _ref.inline,
-      visited = _ref.visited,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      _ref$visited = _ref.visited,
+      visited = _ref$visited === void 0 ? false : _ref$visited,
       Icon = _ref.renderIcon,
       size = _ref.size,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);

package/lib/components/ListBox/ListBoxPropTypes.js

@@ -10,33 +10,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var PropTypes = require('prop-types');
-var FeatureFlags = require('@carbon/feature-flags');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
 var ListBoxType = PropTypes__default["default"].oneOf(['default', 'inline']);
-var ListBoxSize = FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl']);
+var ListBoxSize = PropTypes__default["default"].oneOf(['sm', 'md', 'lg']);
 
 exports.ListBoxSize = ListBoxSize;
 exports.ListBoxType = ListBoxType;

package/lib/components/ListBox/ListBoxSelection.js

@@ -31,7 +31,7 @@ var _Close, _Close2, _defaultTranslations;
  * selection.
  */
 
-var ListBoxSelection = function ListBoxSelection(_ref) {
+function ListBoxSelection(_ref) {
   var _cx;
 
   var clearSelection = _ref.clearSelection,
@@ -98,7 +98,7 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
     "aria-label": description,
     title: description
   }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
-};
+}
 
 var translationIds = {
   'clear.all': 'clear.all',
@@ -153,7 +153,6 @@ ListBoxSelection.defaultProps = {
     return defaultTranslations[id];
   }
 };
-var ListBoxSelection$1 = ListBoxSelection;
 
-exports["default"] = ListBoxSelection$1;
+exports["default"] = ListBoxSelection;
 exports.translationIds = translationIds;

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -386,7 +386,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         "aria-label": ariaLabel,
         id: id,
         ref: mergeRefs["default"](this._triggerRef, ref)
-      }), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps, iconDescription && /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription)), open && wrappedMenuBody));
+      }), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps), open && wrappedMenuBody));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -63,8 +63,6 @@ function ProgressStep(_ref) {
 
 
   var SVGIcon = function SVGIcon(_ref2) {
-    var _title;
-
     var complete = _ref2.complete,
         current = _ref2.current,
         description = _ref2.description,
@@ -74,7 +72,7 @@ function ProgressStep(_ref) {
     if (invalid) {
       return /*#__PURE__*/React__default["default"].createElement(iconsReact.Warning, {
         className: "".concat(prefix, "--progress__warning")
-      }, _title || (_title = /*#__PURE__*/React__default["default"].createElement("title", null, description)));
+      }, /*#__PURE__*/React__default["default"].createElement("title", null, description));
     }
 
     if (current) {

package/lib/components/RadioButton/next/RadioButton.js

@@ -60,7 +60,8 @@ var RadioButton = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     id: uniqueId,
     ref: ref,
     disabled: disabled,
-    value: value
+    value: value,
+    name: name
   })), /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: uniqueId,
     className: "".concat(prefix, "--radio-button__label")

package/lib/components/Search/next/Search.js

@@ -153,6 +153,7 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
     className: clearClasses,
     disabled: disabled,
     onClick: clearInput,
+    title: closeButtonLabelText,
     type: "button"
   }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
 });

package/lib/components/Tabs/next/Tabs.js

@@ -608,6 +608,11 @@ var TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPan
       tabIndex = _useState8[0],
       setTabIndex = _useState8[1];
 
+  var _useState9 = React.useState(false),
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      interactiveContent = _useState10[0],
+      setInteractiveContent = _useState10[1];
+
   var _React$useContext3 = React__default["default"].useContext(TabsContext),
       selectedIndex = _React$useContext3.selectedIndex,
       baseId = _React$useContext3.baseId;
@@ -615,14 +620,47 @@ var TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPan
   var index = React__default["default"].useContext(TabPanelContext);
   var id = "".concat(baseId, "-tabpanel-").concat(index);
   var tabId = "".concat(baseId, "-tab-").concat(index);
-  var className = cx__default["default"]("".concat(prefix, "--tab-content"), customClassName); // tabindex should only be 0 if no interactive content in children
+  var className = cx__default["default"]("".concat(prefix, "--tab-content"), customClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tab-content--interactive"), interactiveContent));
+  useEffectOnce.useEffectOnce(function () {
+    if (!panel.current) {
+      return;
+    }
 
-  React.useEffect(function () {
-    var interactiveContent = useNoInteractiveChildren.getInteractiveContent(panel.current);
+    var content = useNoInteractiveChildren.getInteractiveContent(panel.current);
 
-    if (interactiveContent) {
+    if (content) {
+      setInteractiveContent(true);
       setTabIndex('-1');
     }
+  }); // tabindex should only be 0 if no interactive content in children
+
+  React.useEffect(function () {
+    if (!panel.current) {
+      return;
+    }
+
+    var node = panel.current;
+
+    function callback() {
+      var content = useNoInteractiveChildren.getInteractiveContent(node);
+
+      if (content) {
+        setInteractiveContent(true);
+        setTabIndex('-1');
+      } else {
+        setInteractiveContent(false);
+        setTabIndex('0');
+      }
+    }
+
+    var observer = new MutationObserver(callback);
+    observer.observe(node, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      observer.disconnect(node);
+    };
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-labelledby": tabId,