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

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/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/NumberInput/NumberInput.js

@@ -187,7 +187,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     disabled: disabled,
     onClick: function onClick(event) {
       var state = {
-        value: clamp(max, min, value - step),
+        value: clamp(max, min, parseInt(value) - step),
         direction: 'down'
       };
       setValue(state.value);
@@ -213,7 +213,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     disabled: disabled,
     onClick: function onClick(event) {
       var state = {
-        value: clamp(max, min, value + step),
+        value: clamp(max, min, parseInt(value) + step),
         direction: 'up'
       };
       setValue(state.value);

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext } from 'react';
+import React__default, { useState, useContext } from 'react';
 import cx from 'classnames';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import PasswordInput from './PasswordInput.js';
@@ -18,9 +18,9 @@ import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-var _excluded = ["className", "disabled", "helperText", "hideLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "placeholder", "readOnly", "size", "type", "warn", "warnText"];
+var _excluded = ["className", "disabled", "helperText", "hideLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "placeholder", "readOnly", "size", "type", "warn", "warnText", "enableCounter", "maxCount"];
 var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref, ref) {
-  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7;
+  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
 
   var className = _ref.className,
       _ref$disabled = _ref.disabled,
@@ -49,10 +49,21 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
       _ref$warn = _ref.warn,
       warn = _ref$warn === void 0 ? false : _ref$warn,
       warnText = _ref.warnText,
+      _ref$enableCounter = _ref.enableCounter,
+      enableCounter = _ref$enableCounter === void 0 ? false : _ref$enableCounter,
+      maxCount = _ref.maxCount,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
   var enabled = useFeatureFlag('enable-v11-release');
+  var defaultValue = rest.defaultValue,
+      value = rest.value;
+
+  var _useState = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) || 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      textCount = _useState2[0],
+      setTextCount = _useState2[1];
+
   var normalizedProps = useNormalizedInputProps({
     id: id,
     readOnly: readOnly,
@@ -69,6 +80,10 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
     id: id,
     onChange: function onChange(evt) {
       if (!normalizedProps.disabled) {
+        var _evt$target$value;
+
+        setTextCount((_evt$target$value = evt.target.value) === null || _evt$target$value === void 0 ? void 0 : _evt$target$value.length);
+
         _onChange(evt);
       }
     },
@@ -86,16 +101,27 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
     readOnly: readOnly
   }, 'aria-describedby', helperText && normalizedProps.helperId), rest);
 
+  if (enableCounter) {
+    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 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));
   var fieldWrapperClasses = cx("".concat(prefix, "--text-input__field-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-wrapper--warning"), normalizedProps.warn));
   var iconClasses = cx((_classNames7 = {}, _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _defineProperty(_classNames7, "".concat(prefix, "--text-input__readonly-icon"), readOnly), _classNames7));
+  var counterClasses = cx("".concat(prefix, "--label"), (_classNames8 = {}, _defineProperty(_classNames8, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_classNames8, "".concat(prefix, "--text-input__label-counter"), true), _classNames8));
+  var counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement("div", {
+    className: counterClasses
+  }, "".concat(textCount, "/").concat(maxCount)) : null;
   var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
+  var labelWrapper = /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--text-input__label-wrapper")
+  }, label, counter);
   var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: normalizedProps.helperId,
     className: helperTextClasses
@@ -113,9 +139,9 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
 
   return /*#__PURE__*/React__default.createElement("div", {
     className: inputWrapperClasses
-  }, !inline ? label : /*#__PURE__*/React__default.createElement("div", {
+  }, !inline ? labelWrapper : /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--text-input__label-helper-wrapper")
-  }, label, !isFluid && helper), /*#__PURE__*/React__default.createElement("div", {
+  }, labelWrapper, !isFluid && helper), /*#__PURE__*/React__default.createElement("div", {
     className: fieldOuterWrapperClasses
   }, /*#__PURE__*/React__default.createElement("div", {
     className: fieldWrapperClasses,
@@ -145,6 +171,11 @@ TextInput.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes.bool,
+
   /**
    * Provide text that is used alongside the control label for additional help
    */
@@ -187,6 +218,11 @@ TextInput.propTypes = {
    */
   light: PropTypes.bool,
 
+  /**
+   * Max character count allowed for the input. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes.number,
+
   /**
    * Optionally provide an `onChange` handler that is called whenever `<input>`
    * is updated

package/es/index.js

@@ -50,8 +50,6 @@ export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButt
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
 export { default as RadioButtonGroup } from './components/RadioButtonGroup/RadioButtonGroup.js';
 export { default as Search } from './components/Search/index.js';
-export { default as SearchFilterButton } from './components/SearchFilterButton/SearchFilterButton.js';
-export { default as SearchLayoutButton } from './components/SearchLayoutButton/SearchLayoutButton.js';
 export { default as ExpandableSearch } from './components/ExpandableSearch/ExpandableSearch.js';
 export { default as SecondaryButton } from './components/SecondaryButton/SecondaryButton.js';
 export { default as SelectSkeleton } from './components/Select/Select.Skeleton.js';
@@ -94,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';
@@ -122,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';
@@ -136,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';
@@ -196,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/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;
 };