@carbon/react 1.14.0 → 1.15.0

package/es/components/ListBox/ListBox.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { ListBoxSize, ListBoxType } from './ListBoxPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -16,6 +16,7 @@ import ListBoxMenu from './ListBoxMenu.js';
 import ListBoxMenuIcon from './ListBoxMenuIcon.js';
 import ListBoxMenuItem from './ListBoxMenuItem.js';
 import ListBoxSelection from './ListBoxSelection.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 
 var _excluded = ["children", "className", "disabled", "type", "size", "invalid", "invalidText", "warn", "warnText", "light", "isOpen"];
 
@@ -52,15 +53,21 @@ var ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, ref)
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var showWarning = !invalid && warn;
-  var className = cx((_cx = {}, _defineProperty(_cx, containerClassName, !!containerClassName), _defineProperty(_cx, "".concat(prefix, "--list-box"), true), _defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--inline"), type === 'inline'), _defineProperty(_cx, "".concat(prefix, "--list-box--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--list-box--light"), light), _defineProperty(_cx, "".concat(prefix, "--list-box--expanded"), isOpen), _defineProperty(_cx, "".concat(prefix, "--list-box--warning"), showWarning), _cx));
+  var className = cx((_cx = {}, _defineProperty(_cx, containerClassName, !!containerClassName), _defineProperty(_cx, "".concat(prefix, "--list-box"), true), _defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--inline"), type === 'inline'), _defineProperty(_cx, "".concat(prefix, "--list-box--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--list-box--light"), light), _defineProperty(_cx, "".concat(prefix, "--list-box--expanded"), isOpen), _defineProperty(_cx, "".concat(prefix, "--list-box--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--list-box--warning"), showWarning), _cx));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: className,
     ref: ref,
     onKeyDown: handleOnKeyDown,
     onClick: handleClick,
     "data-invalid": invalid || undefined
-  }), children), invalid ? /*#__PURE__*/React__default.createElement("div", {
+  }), children), isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--list-box__divider")
+  }), invalid ? /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--form-requirement")
   }, invalidText) : null, showWarning ? /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--form-requirement")

package/es/components/Loading/Loading.js

@@ -17,11 +17,15 @@ var _excluded = ["active", "className", "withOverlay", "small", "description"];
 function Loading(_ref) {
   var _cx, _cx2;
 
-  var active = _ref.active,
+  var _ref$active = _ref.active,
+      active = _ref$active === void 0 ? true : _ref$active,
       customClassName = _ref.className,
-      withOverlay = _ref.withOverlay,
-      small = _ref.small,
-      description = _ref.description,
+      _ref$withOverlay = _ref.withOverlay,
+      withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
+      _ref$small = _ref.small,
+      small = _ref$small === void 0 ? false : _ref$small,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? 'loading' : _ref$description,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
@@ -81,11 +85,5 @@ Loading.propTypes = {
    */
   withOverlay: PropTypes.bool
 };
-Loading.defaultProps = {
-  active: true,
-  withOverlay: true,
-  small: false,
-  description: 'loading'
-};
 
 export { Loading as default };

package/es/components/ModalWrapper/ModalWrapper.js

@@ -11,8 +11,10 @@ import React__default from 'react';
 import Modal from '../Modal/Modal.js';
 import Button from '../Button/Button.js';
 import { ButtonKinds } from '../../prop-types/types.js';
+import { warning } from '../../internal/warning.js';
 
 var _excluded = ["children", "onKeyDown", "buttonTriggerText", "buttonTriggerClassName", "renderTriggerButtonIcon", "triggerButtonIconDescription", "triggerButtonKind", "disabled", "handleSubmit", "shouldCloseAfterSubmit", "selectorPrimaryFocus", "preventCloseOnClickOutside"];
+var didWarnAboutDeprecation = false;
 
 var ModalWrapper = /*#__PURE__*/function (_React$Component) {
   _inherits(ModalWrapper, _React$Component);
@@ -76,6 +78,12 @@ var ModalWrapper = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(ModalWrapper, [{
+    key: "if",
+    value: function _if(__DEV__) {
+      process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
+      didWarnAboutDeprecation = true;
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -27,7 +27,7 @@ import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import ListBox from '../ListBox/ListBox.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
-import { Space } from '../../internal/keyboard/keys.js';
+import { Space, Tab } from '../../internal/keyboard/keys.js';
 
 var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   var _cx, _cx2, _cx3, _cx4;
@@ -280,6 +280,10 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
             if (match(event, Space)) {
               event.stopPropagation();
             }
+
+            if (match(event, Tab)) {
+              handleOnMenuChange(false);
+            }
           },
           onFocus: function onFocus() {
             setInputFocused(true);

package/es/components/Search/Search.js

@@ -19,7 +19,7 @@ import { Escape } from '../../internal/keyboard/keys.js';
 
 var _Close;
 
-var _excluded = ["className", "type", "id", "placeHolderText", "placeholder", "labelText", "closeButtonLabelText", "small", "size", "light", "disabled", "onChange", "onKeyDown", "renderIcon", "onClear"];
+var _excluded = ["className", "type", "id", "placeHolderText", "placeholder", "labelText", "closeButtonLabelText", "small", "size", "light", "disabled", "onChange", "onKeyDown", "renderIcon", "onClear", "onExpand"];
 
 var Search = /*#__PURE__*/function (_Component) {
   _inherits(Search, _Component);
@@ -104,6 +104,7 @@ var Search = /*#__PURE__*/function (_Component) {
           onKeyDown = _this$props.onKeyDown,
           renderIcon = _this$props.renderIcon;
           _this$props.onClear;
+          _this$props.onExpand;
           var other = _objectWithoutProperties(_this$props, _excluded);
 
       var hasContent = this.state.hasContent;

package/es/components/Search/next/Search.js

@@ -78,19 +78,19 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
     setPrevValue(value);
   }
 
-  function clearInput(event) {
+  function clearInput() {
     if (!value) {
       inputRef.current.value = '';
-      onChange(event);
-    } else {
-      var clearedEvt = Object.assign({}, event.target, {
-        target: {
-          value: ''
-        }
-      });
-      onChange(clearedEvt);
     }
 
+    var inputTarget = Object.assign({}, inputRef.current, {
+      value: ''
+    });
+    var clearedEvt = {
+      target: inputTarget,
+      type: 'change'
+    };
+    onChange(clearedEvt);
     onClear();
     setHasContent(false);
     focus(inputRef);
@@ -103,7 +103,7 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
   function handleKeyDown(event) {
     if (match(event, Escape)) {
       event.stopPropagation();
-      clearInput(event);
+      clearInput();
     }
   }
 
@@ -114,11 +114,7 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
   }, /*#__PURE__*/React__default.createElement("div", {
     role: onExpand ? 'button' : null,
     className: "".concat(prefix, "--search-magnifier"),
-    onClick: function onClick() {
-      if (onExpand) {
-        onExpand();
-      }
-    }
+    onClick: onExpand
   }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
     icon: renderIcon
   })), /*#__PURE__*/React__default.createElement("label", {

package/es/components/Slider/Slider.js

@@ -206,13 +206,14 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
         _this.setState({
           value: value,
-          left: left,
-          needsOnRelease: true
+          left: left
         });
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (evt) {
+      var _this$props$onBlur, _this$props;
+
       // Do nothing if we have no valid event, target, or value
       if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
         return;
@@ -226,7 +227,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         isValid: validity
       });
 
-      _this.props.onBlur({
+      (_this$props$onBlur = (_this$props = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, {
         value: value
       });
     });
@@ -377,27 +378,27 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props = this.props,
-          ariaLabelInput = _this$props.ariaLabelInput,
-          className = _this$props.className,
-          hideTextInput = _this$props.hideTextInput,
-          _this$props$id = _this$props.id,
-          id = _this$props$id === void 0 ? this.inputId = this.inputId || "__carbon-slider_".concat(Math.random().toString(36).substr(2)) : _this$props$id,
-          min = _this$props.min,
-          minLabel = _this$props.minLabel,
-          max = _this$props.max,
-          maxLabel = _this$props.maxLabel,
-          _this$props$formatLab = _this$props.formatLabel,
-          formatLabel = _this$props$formatLab === void 0 ? defaultFormatLabel : _this$props$formatLab,
-          labelText = _this$props.labelText,
-          step = _this$props.step;
-          _this$props.stepMultiplier;
-          var inputType = _this$props.inputType,
-          required = _this$props.required,
-          disabled = _this$props.disabled,
-          name = _this$props.name,
-          light = _this$props.light,
-          other = _objectWithoutProperties(_this$props, _excluded);
+      var _this$props2 = this.props,
+          ariaLabelInput = _this$props2.ariaLabelInput,
+          className = _this$props2.className,
+          hideTextInput = _this$props2.hideTextInput,
+          _this$props2$id = _this$props2.id,
+          id = _this$props2$id === void 0 ? this.inputId = this.inputId || "__carbon-slider_".concat(Math.random().toString(36).substr(2)) : _this$props2$id,
+          min = _this$props2.min,
+          minLabel = _this$props2.minLabel,
+          max = _this$props2.max,
+          maxLabel = _this$props2.maxLabel,
+          _this$props2$formatLa = _this$props2.formatLabel,
+          formatLabel = _this$props2$formatLa === void 0 ? defaultFormatLabel : _this$props2$formatLa,
+          labelText = _this$props2.labelText,
+          step = _this$props2.step;
+          _this$props2.stepMultiplier;
+          var inputType = _this$props2.inputType,
+          required = _this$props2.required,
+          disabled = _this$props2.disabled,
+          name = _this$props2.name,
+          light = _this$props2.light,
+          other = _objectWithoutProperties(_this$props2, _excluded);
 
       delete other.onRelease;
       delete other.invalid;

package/es/components/TextInput/TextInput.js

@@ -219,7 +219,7 @@ TextInput.propTypes = {
   light: PropTypes.bool,
 
   /**
-   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   * Max character count allowed for the input. This is needed in order for enableCounter to display
    */
   maxCount: PropTypes.number,
 

package/es/index.js

@@ -92,6 +92,7 @@ export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
+import './components/ContainedList/index.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { Heading, Section } from './components/Heading/index.js';
 export { IconButton } from './components/IconButton/index.js';
@@ -120,9 +121,12 @@ export { default as SideNavFooter } from './components/UIShell/SideNavFooter.js'
 export { default as SideNavIcon } from './components/UIShell/SideNavIcon.js';
 export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
 export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
+export { default as unstable_ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as unstable_useContextMenu } from './components/ContextMenu/useContextMenu.js';
-export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
 export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
+export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
+export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
+export { default as unstable__FluidTextInputSkeleton } from './components/FluidTextInput/FluidTextInput.Skeleton.js';
 export { default as unstable_MenuDivider } from './components/Menu/MenuDivider.js';
 export { default as unstable_MenuGroup } from './components/Menu/MenuGroup.js';
 export { default as unstable_MenuItem } from './components/Menu/MenuItem.js';
@@ -134,6 +138,7 @@ export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js'
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
 export { default as TreeView } from './components/TreeView/TreeView.js';
+export { default as unstable_ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as unstable_Menu } from './components/Menu/Menu.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem.js';
@@ -194,6 +199,8 @@ 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__FluidDropdown } from './components/FluidDropdown/FluidDropdown.js';
+export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.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/lib/components/ContainedList/ContainedList.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var useId = require('../../internal/useId.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var variants = ['on-page', 'disclosed'];
+
+function ContainedList(_ref) {
+  var action = _ref.action,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? variants[0] : _ref$kind,
+      label = _ref.label;
+  var labelId = "".concat(useId.useId('contained-list'), "-header");
+  var prefix = usePrefix.usePrefix();
+  var classes = cx__default["default"]("".concat(prefix, "--contained-list"), "".concat(prefix, "--contained-list--").concat(kind), className);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--contained-list__header")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    id: labelId,
+    className: "".concat(prefix, "--contained-list__label")
+  }, label), action && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--contained-list__action")
+  }, action)), /*#__PURE__*/React__default["default"].createElement("ul", {
+    "aria-labelledby": labelId
+  }, children));
+}
+
+ContainedList.propTypes = {
+  /**
+   * A slot for a possible interactive element to render.
+   */
+  action: PropTypes__default["default"].node,
+
+  /**
+   * A collection of ContainedListItems to be rendered in the ContainedList
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * The kind of ContainedList you want to display
+   */
+  kind: PropTypes__default["default"].oneOf(variants),
+
+  /**
+   * A label describing the contained list.
+   */
+  label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]).isRequired
+};
+
+exports["default"] = ContainedList;

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var usePrefix = require('../../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+function ContainedListItem(_ref) {
+  var _classNames;
+
+  var action = _ref.action,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onClick = _ref.onClick,
+      IconElement = _ref.renderIcon;
+  var prefix = usePrefix.usePrefix();
+  var isClickable = onClick !== undefined;
+  var classes = cx__default["default"]("".concat(prefix, "--contained-list-item"), className, (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--contained-list-item--clickable"), isClickable), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--contained-list-item--with-icon"), IconElement), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--contained-list-item--with-action"), action), _classNames));
+  var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, IconElement && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--contained-list-item__icon")
+  }, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("div", null, children));
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: classes
+  }, isClickable ? /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "".concat(prefix, "--contained-list-item__content"),
+    type: "button",
+    disabled: disabled,
+    onClick: onClick
+  }, content) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--contained-list-item__content")
+  }, content), action && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--contained-list-item__action")
+  }, action));
+}
+
+ContainedListItem.propTypes = {
+  /**
+   * A slot for a possible interactive element to render within the item.
+   */
+  action: PropTypes__default["default"].node,
+
+  /**
+   * The content of this item. Must not contain any interactive elements. Use props.action to include those.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Whether this item is disabled.
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an optional function to be called when the item is clicked.
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional icon to render in front of the item's content.
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
+};
+
+exports["default"] = ContainedListItem;

package/lib/components/ContainedList/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ContainedList = require('./ContainedList.js');
+var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
+
+ContainedList["default"].ContainedListItem = ContainedListItem["default"];
+
+exports["default"] = ContainedList["default"];
+exports.ContainedListItem = ContainedListItem["default"];

package/lib/components/DataTable/DataTable.js

@@ -29,7 +29,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 
 var _excluded = ["header", "onClick", "isSortable"],
-    _excluded2 = ["onClick"],
+    _excluded2 = ["onClick", "onExpand"],
     _excluded3 = ["row", "onClick"],
     _excluded4 = ["onClick", "row"];
 
@@ -107,6 +107,7 @@ var DataTable = /*#__PURE__*/function (_React$Component) {
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getExpandHeaderProps", function () {
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           onClick = _ref2.onClick,
+          onExpand = _ref2.onExpand,
           rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
 
       var t = _this.props.translateWithId;
@@ -123,7 +124,7 @@ var DataTable = /*#__PURE__*/function (_React$Component) {
         isExpanded: isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
-        onExpand: events.composeEventHandlers([_this.handleOnExpandAll, onClick ? _this.handleOnExpandHeaderClick(onClick, {
+        onExpand: events.composeEventHandlers([_this.handleOnExpandAll, onExpand, onClick ? _this.handleOnExpandHeaderClick(onClick, {
           isExpanded: isExpanded
         }) : null])
       });

package/lib/components/DataTable/TableExpandHeader.js

@@ -24,13 +24,15 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["ariaLabel", "className", "enableExpando", "enableToggle", "isExpanded", "onExpand", "expandIconDescription", "children"];
+var _excluded = ["ariaLabel", "className", "enableExpando", "enableToggle", "id", "isExpanded", "onExpand", "expandIconDescription", "children"];
 
 var TableExpandHeader = function TableExpandHeader(_ref) {
   var ariaLabel = _ref.ariaLabel,
       headerClassName = _ref.className,
       enableExpando = _ref.enableExpando,
       enableToggle = _ref.enableToggle,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? 'expand' : _ref$id,
       isExpanded = _ref.isExpanded,
       onExpand = _ref.onExpand,
       expandIconDescription = _ref.expandIconDescription,
@@ -43,7 +45,8 @@ var TableExpandHeader = function TableExpandHeader(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("th", _rollupPluginBabelHelpers["extends"]({
     scope: "col",
     className: className,
-    "data-previous-value": previousValue
+    "data-previous-value": previousValue,
+    id: id
   }, rest), enableExpando || enableToggle ? /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     className: "".concat(prefix, "--table-expand__button"),
@@ -80,6 +83,11 @@ TableExpandHeader.propTypes = {
    */
   expandIconDescription: PropTypes__default["default"].string,
 
+  /**
+   * Supply an id to the th element.
+   */
+  id: PropTypes__default["default"].string,
+
   /**
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together

package/lib/components/DataTable/TableExpandRow.js

@@ -35,7 +35,8 @@ var TableExpandRow = function TableExpandRow(_ref) {
       onExpand = _ref.onExpand,
       expandIconDescription = _ref.expandIconDescription,
       isSelected = _ref.isSelected,
-      expandHeader = _ref.expandHeader,
+      _ref$expandHeader = _ref.expandHeader,
+      expandHeader = _ref$expandHeader === void 0 ? 'expand' : _ref$expandHeader,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -95,9 +96,6 @@ TableExpandRow.propTypes = {
    */
   onExpand: PropTypes__default["default"].func.isRequired
 };
-TableExpandRow.defaultProps = {
-  expandHeader: 'expand'
-};
 var TableExpandRow$1 = TableExpandRow;
 
 exports["default"] = TableExpandRow$1;

package/lib/components/DataTable/state/getDerivedStateFromProps.js

@@ -48,6 +48,9 @@ var getDerivedStateFromProps = function getDerivedStateFromProps(props, prevStat
     state.rowIds = _rowIds;
   }
 
+  state.isExpandedAll = state.rowIds.every(function (id) {
+    return state.rowsById[id].isExpanded === true;
+  });
   return state;
 };