@carbon/ibm-products 2.14.0 → 2.15.1

package/es/components/Datagrid/useRowExpander.js

@@ -1,5 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /* eslint-disable react/prop-types */
 /**
  * Copyright IBM Corp. 2020, 2023
@@ -23,6 +26,13 @@ var useRowExpander = function useRowExpander(hooks) {
       id: 'expander',
       Cell: function Cell(_ref) {
         var row = _ref.row;
+        var expanderButtonProps = _objectSpread(_objectSpread({}, row.getToggleRowExpandedProps()), {}, {
+          onClick: function onClick(event) {
+            // Prevents `onRowClick` from being called if `useOnRowClick` is included
+            event.stopPropagation();
+            row.toggleRowExpanded();
+          }
+        });
         var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
           _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
           expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
@@ -33,7 +43,7 @@ var useRowExpander = function useRowExpander(hooks) {
           type: "button",
           "aria-label": expanderTitle,
           className: cx("".concat(blockClass, "__row-expander"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--ghost"))
-        }, row.getToggleRowExpandedProps(), {
+        }, expanderButtonProps, {
           title: expanderTitle
         }), row.isExpanded ? /*#__PURE__*/React.createElement(ChevronUp, {
           className: "".concat(blockClass, "__row-expander--icon")

package/es/components/Datagrid/useSelectAllToggle.js

@@ -13,7 +13,7 @@ import cx from 'classnames';
 import { selectionColumnId } from './common-column-ids';
 import SelectAllWithToggle from './Datagrid/DatagridSelectAllWithToggle';
 import { pkg } from '../../settings';
-var blockClass = "".concat(pkg.prefix, "--datagrid");
+var blockClass = "".concat(pkg.prefix, "--datagrid__select-all");
 var useSelectAllToggle = function useSelectAllToggle(hooks) {
   useSelectAllWithToggleComponent(hooks);
   useAddClassNameToSelectRow(hooks);
@@ -60,7 +60,7 @@ var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
     var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
     if (column.id === selectionColumnId && DatagridPagination) {
       return [props, {
-        className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+        className: cx("".concat(blockClass, "-toggle-on"), _defineProperty({}, "".concat(blockClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
       }];
     }
     return [props];

package/es/components/Datagrid/useSelectRows.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["onChange"];
+var _excluded = ["onChange", "title"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -21,6 +21,7 @@ import { SelectAll } from './Datagrid/DatagridSelectAll';
 import { selectionColumnId } from './common-column-ids';
 import { pkg, carbon } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
+var checkboxClass = "".concat(pkg.prefix, "--datagrid__checkbox-cell");
 var useSelectRows = function useSelectRows(hooks) {
   useHighlightSelection(hooks);
   var useInstance = function useInstance(instance) {
@@ -54,9 +55,12 @@ var useSelectRows = function useSelectRows(hooks) {
 };
 var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
+    var _ref2;
     var row = _ref.row;
+    var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
+      checked = _row$getToggleRowSele.checked;
     return [props, {
-      className: cx("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
+      className: cx(["".concat(blockClass, "__carbon-row"), (_ref2 = {}, _defineProperty(_ref2, "".concat(carbon.prefix, "--data-table--selected"), checked), _defineProperty(_ref2, "".concat(blockClass, "__active-row"), checked), _ref2)])
     }];
   };
   hooks.getRowProps.push(getRowProps);
@@ -87,30 +91,32 @@ var SelectRow = function SelectRow(datagridState) {
       return window.removeEventListener('resize', updateSize);
     };
   }, []);
+  var onSelectHandler = function onSelectHandler(e) {
+    e.stopPropagation(); // avoid triggering onRowClick
+    if (radio) {
+      toggleAllRowsSelected(false);
+      if (onRadioSelect) {
+        onRadioSelect(row);
+      }
+    }
+    onChange(e);
+    onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, e);
+  };
   var selectDisabled = isFetching || row.getRowProps().disabled;
-  var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
-    onChange = _row$getToggleRowSele.onChange,
-    selectProps = _objectWithoutProperties(_row$getToggleRowSele, _excluded);
+  var _row$getToggleRowSele2 = row.getToggleRowSelectedProps(),
+    onChange = _row$getToggleRowSele2.onChange,
+    title = _row$getToggleRowSele2.title,
+    selectProps = _objectWithoutProperties(_row$getToggleRowSele2, _excluded);
   var cellProps = cell.getCellProps();
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
+  var rowId = "".concat(tableId, "-").concat(row.index);
   return /*#__PURE__*/React.createElement(TableSelectRow, _extends({}, cellProps, selectProps, {
     radio: radio,
-    onSelect: function onSelect(e) {
-      e.stopPropagation(); // avoid triggering onRowClick
-      if (radio) {
-        toggleAllRowsSelected(false);
-        if (onRadioSelect) {
-          onRadioSelect(row);
-        }
-      }
-      onChange(e);
-      onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, e);
-    },
-    id: "".concat(tableId, "-").concat(row.index),
-    name: "".concat(tableId, "-").concat(row.index, "-name"),
-    className: cx("".concat(blockClass, "__checkbox-cell"), cellProps.className, _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)),
-    ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
-    ,
+    onSelect: onSelectHandler,
+    id: rowId,
+    name: "".concat(rowId, "-name"),
+    className: cx([checkboxClass, cellProps.className, _defineProperty({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)]),
+    ariaLabel: title,
     disabled: selectDisabled
   }));
 };

package/es/components/Datagrid/useSortableColumns.js

@@ -111,7 +111,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       };
       return _objectSpread(_objectSpread({}, column), {}, {
         Header: Header,
-        minWidth: column.disableSortBy === true ? 0 : 90
+        minWidth: column.disableSortBy === true ? 0 : column.minWidth ? column.minWidth : 90
       });
     });
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _toConsumableArray(sortableColumns);

package/es/components/EditTearsheet/EditTearsheet.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onHandleModalClick", "onFormChange", "sideNavAriaLabel"];
+var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onRequestSubmit", "onFormChange", "sideNavAriaLabel"];
 /**
  * Copyright IBM Corp. 2022, 2023
  *
@@ -52,7 +52,7 @@ export var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title = _ref.title,
     _ref$verticalPosition = _ref.verticalPosition,
     verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
-    onHandleModalClick = _ref.onHandleModalClick,
+    onRequestSubmit = _ref.onRequestSubmit,
     onFormChange = _ref.onFormChange,
     _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
     sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
@@ -92,13 +92,15 @@ export var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }
   return /*#__PURE__*/React.createElement(TearsheetShell, _extends({}, rest, getDevtoolsProps(componentName), {
     actions: [{
+      key: 'edit-action-button-submit',
       label: submitButtonText,
-      onClick: onHandleModalClick,
+      onClick: onRequestSubmit,
       kind: 'primary'
     }, {
+      key: 'edit-action-button-cancel',
       label: cancelButtonText,
-      onClick: onHandleModalClick,
-      kind: 'secondary'
+      onClick: onClose,
+      kind: 'ghost'
     }],
     className: cx(blockClass, className),
     description: description,
@@ -178,9 +180,9 @@ EditTearsheet.propTypes = {
    */
   onFormChange: PropTypes.func,
   /**
-   * Specifies whether the tearsheet is currently open.
+   * Specify a handler for submitting the tearsheet.
    */
-  onHandleModalClick: PropTypes.func,
+  onRequestSubmit: PropTypes.func.isRequired,
   /**
    * Specifies whether the tearsheet is currently open.
    */

package/es/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js

@@ -70,14 +70,21 @@ export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     setIsInvalid(false);
     setOpen(false);
   };
-  var handleModalClick = function handleModalClick() {
-    setOpen(!open);
+  var onClose = function onClose() {
+    clearCreateData();
+    action('onClose')();
+  };
+  var onSubmit = function onSubmit() {
+    setOpen(false);
+    action('onSubmit')();
   };
   var handleFormChange = function handleFormChange() {
     action('handleFormChange')();
   };
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/React.createElement(Button, {
-    onClick: handleModalClick
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
   }, open ? 'Close EditTearsheet' : 'Open EditTearsheet'), /*#__PURE__*/React.createElement(EditTearsheet, {
     influencerWidth: influencerWidth,
     label: label,
@@ -87,8 +94,8 @@ export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     description: description,
     title: title,
     open: open,
-    onHandleModalClick: handleModalClick,
-    onClose: clearCreateData,
+    onRequestSubmit: onSubmit,
+    onClose: onClose,
     onFormChange: handleFormChange
   }, /*#__PURE__*/React.createElement(EditTearsheetForm, {
     title: "Topic name",

package/es/global/js/hooks/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,4 +15,5 @@ export { usePreviousValue } from './usePreviousValue';
 export { useResetCreateComponent } from './useResetCreateComponent';
 export { useRetrieveStepData } from './useRetrieveStepData';
 export { useValidCreateStepCount } from './useValidCreateStepCount';
-export { useControllableState } from './useControllableState';
+export { useControllableState } from './useControllableState';
+export { usePrefix } from './usePrefix';

package/es/global/js/hooks/usePrefix.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import pkg from '../package-settings';
+export var usePrefix = function usePrefix() {
+  return pkg.prefix;
+};

package/es/global/js/hooks/useRetrieveStepData.js

@@ -10,11 +10,12 @@ import { useEffect } from 'react';
 
 /**
  * This useEffect makes sure that every CreateTearsheetStep/CreateFullPageStep reports back it's
- * title, secondaryLabel, introStep, and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
+ * title, secondaryLabel, introStep, invalid and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
  * @param {object} useResetCreateComponent
  * @param {object} useResetCreateComponent.stepsContext
  * @param {number} useResetCreateComponent.stepNumber
  * @param {boolean} useResetCreateComponent.introStep
+ * @param {boolean} useResetCreateComponent.invalid
  * @param {boolean} useResetCreateComponent.shouldIncludeStep
  * @param {string} useResetCreateComponent.secondaryLabel
  * @param {string} useResetCreateComponent.title
@@ -23,6 +24,7 @@ export var useRetrieveStepData = function useRetrieveStepData(_ref) {
   var stepsContext = _ref.stepsContext,
     stepNumber = _ref.stepNumber,
     introStep = _ref.introStep,
+    invalid = _ref.invalid,
     shouldIncludeStep = _ref.shouldIncludeStep,
     secondaryLabel = _ref.secondaryLabel,
     title = _ref.title;
@@ -33,10 +35,11 @@ export var useRetrieveStepData = function useRetrieveStepData(_ref) {
           title: title,
           secondaryLabel: secondaryLabel,
           introStep: introStep,
+          invalid: invalid,
           shouldIncludeStep: shouldIncludeStep
         };
         var previousItem = prev[stepNumber - 1];
-        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep) {
+        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.invalid) !== stepItem.invalid) {
           var clone = _toConsumableArray(prev);
           clone[stepNumber - 1] = stepItem;
           return clone;
@@ -44,5 +47,5 @@ export var useRetrieveStepData = function useRetrieveStepData(_ref) {
         return prev;
       });
     }
-  }, [shouldIncludeStep, title, secondaryLabel, introStep, stepsContext, stepNumber]);
+  }, [shouldIncludeStep, title, secondaryLabel, introStep, invalid, stepsContext, stepNumber]);
 };

package/es/index.js

@@ -1,9 +1,10 @@
 /**
- * Copyright IBM Corp. 2020, 2020
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 export { pkg } from './settings';
+export { usePrefix } from './global/js/hooks';
 export * from './components';

package/lib/components/AddSelect/AddSelectRow.js

@@ -153,6 +153,7 @@ var AddSelectRow = exports.AddSelectRow = function AddSelectRow(_ref) {
     selected: selected,
     onClick: handleMultiSelection
   }), hasModifiers && /*#__PURE__*/_react.default.createElement(_react2.Layer, null, /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+    titleText: modifiers.label,
     id: "add-select-modifier-".concat(item.id),
     type: "inline",
     items: modifiers.options,

package/lib/components/CreateFullPage/CreateFullPage.docs-page.js

@@ -34,6 +34,12 @@ var DocsPage = function DocsPage() {
       source: {
         code: "<CreateFullPage\n  title='Page title'\n  breadcrumbsOverflowAriaLabel='Open and close additional breadcrumb item list.'\n  breadcrumbs={[\n    { key: '0', label: 'Breadcrumb 1', href: '/', title: 'home page' },\n    { key: '1', label: 'Breadcrumb 2', href: '/', },\n    { key: '2', label: 'Breadcrumb 3', href:'/' },\n    { key: '3', label: 'Breadcrumb 4', isCurrentPage: true }\n  ]}\n  maxVisibleBreadcrumbs={3}\n  {...props}\n>\n    <CreateFullPageStep {...createFullPageStepProps}>...</CreateFullPageStep>\n</CreateFullPage>"
       }
+    }, {
+      story: stories.createFullPageWithStepInErrorState,
+      description: "Passing an invalid prop to the step will show up an error icon on the progress indicator step indicating an error state in that step",
+      source: {
+        code: "<CreateFullPage {...createFullPageProps}>\n  <CreateFullPageStep\n    title=\"Topic name\"\n    invalid={true}\n  >\n    Step content\n  </CreateFullPageStep>\n</CreateFullPage>"
+      }
     }, {
       title: 'Using custom components',
       description: "It is possible to use custom components that return `CreateFullPageStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateFullPage`. _It is required that each child of the `CreateFullPage` either\nbe a custom step or a `CreateFullPageStep`_. An example of this could look like\nthe following:",

package/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -18,7 +18,7 @@ var _react2 = require("@carbon/react");
 var _CreateFullPage = require("./CreateFullPage");
 var _hooks = require("../../global/js/hooks");
 var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
-var _excluded = ["children", "className", "subtitle", "description", "disableSubmit", "includeStep", "introStep", "title", "hasFieldset", "fieldsetLegendText", "onNext", "onMount", "secondaryLabel"];
+var _excluded = ["children", "className", "subtitle", "description", "disableSubmit", "includeStep", "introStep", "invalid", "title", "hasFieldset", "fieldsetLegendText", "onNext", "onMount", "secondaryLabel"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -44,6 +44,7 @@ var CreateFullPageStep = exports.CreateFullPageStep = /*#__PURE__*/(0, _react.fo
     _ref$includeStep = _ref.includeStep,
     includeStep = _ref$includeStep === void 0 ? defaults.includeStep : _ref$includeStep,
     introStep = _ref.introStep,
+    invalid = _ref.invalid,
     title = _ref.title,
     hasFieldset = _ref.hasFieldset,
     fieldsetLegendText = _ref.fieldsetLegendText,
@@ -61,6 +62,7 @@ var CreateFullPageStep = exports.CreateFullPageStep = /*#__PURE__*/(0, _react.fo
     currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
   });
   (0, _hooks.useRetrieveStepData)({
+    invalid: invalid,
     stepsContext: stepsContext,
     stepNumber: stepNumber,
     introStep: introStep,
@@ -149,6 +151,10 @@ CreateFullPageStep.propTypes = {
    * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
    */
   introStep: _propTypes.default.bool,
+  /**
+   * This optional prop will indicate an error icon on the progress indicator step item
+   */
+  invalid: _propTypes.default.bool,
   /**
    * Optional function to be called on initial mount of a step.
    * For example, this can be used to fetch data that is required on a particular step.

package/lib/components/CreateInfluencer/CreateInfluencer.js

@@ -69,7 +69,8 @@ var CreateInfluencer = exports.CreateInfluencer = function CreateInfluencer(_ref
       return /*#__PURE__*/_react.default.createElement(_react2.ProgressStep, {
         label: step.title,
         key: stepIndex,
-        secondaryLabel: step.secondaryLabel
+        secondaryLabel: step.secondaryLabel,
+        invalid: step.invalid
       });
     })));
   };

package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js

@@ -30,6 +30,13 @@ var DocsPage = function DocsPage() {
       title: 'Using dynamic steps',
       description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
       code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n  const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n    useState(false);\n  return (\n    <CreateTearsheet {...createTearsheetProps}>\n      <CreateTearsheetStep {...step1Props}>\n        Step 1 content\n        <Checkbox\n          labelText={`Include additional step`}\n          id=\"include-additional-step-checkbox\"\n          onChange={(value) => setShouldIncludeAdditionalStep(value)}\n          checked={shouldIncludeAdditionalStep}\n        />\n      </CreateTearsheetStep>\n      <CreateTearsheetStep\n        {...step2Props}\n        includeStep={shouldIncludeAdditionalStep}\n      >\n        Dynamic step content\n      </CreateTearsheetStep>\n      <CreateTearsheetStep {...step3Props}>\n        Final step content\n      </CreateTearsheetStep>\n    </CreateTearsheet>\n  );\n};"
+    }, {
+      story: stories.withErrorState,
+      title: 'Create tearsheet with step in error state',
+      description: 'Passing an invalid prop to the step will show up an error icon on the progress indicator step indicating an error state in that step',
+      source: {
+        code: "<CreateTearsheet {...createTearsheetProps}>\n      <CreateTearsheetStep\n      {...stepProps}\n      invalid={true}\n    >\n      Step in error state\n    </CreateTearsheetStep>\n  </CreateTearsheet>\n  );\n};"
+      }
     }, {
       title: 'Class names',
       description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name                                            | Element     | Features                                                   |\n| ----------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-tearsheet__step--title`       | title       | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-tearsheet__step--subtitle`    | subtitle    | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-tearsheet__step--description` | description | `body-long-01` & `margin-bottom` of `$spacing-06`          |\n| `#{$pkg-prefix}--create-tearsheet__step--fieldset`    | fieldset    | `margin-bottom` of `$spacing-05` to all children elements  |\n| `#{$pkg-prefix}--create-tearsheet__section--divider`  | divider     | Includes a `1px` divider line inside the `main` content    |\n"

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -18,7 +18,7 @@ var _CreateTearsheet = require("./CreateTearsheet");
 var _settings = require("../../settings");
 var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
 var _hooks = require("../../global/js/hooks");
-var _excluded = ["children", "className", "description", "disableSubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
+var _excluded = ["children", "className", "description", "disableSubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "invalid", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -47,6 +47,7 @@ var CreateTearsheetStep = exports.CreateTearsheetStep = /*#__PURE__*/(0, _react.
     _ref$includeStep = _ref.includeStep,
     includeStep = _ref$includeStep === void 0 ? defaults.includeStep : _ref$includeStep,
     introStep = _ref.introStep,
+    invalid = _ref.invalid,
     onMount = _ref.onMount,
     onNext = _ref.onNext,
     onPrevious = _ref.onPrevious,
@@ -69,7 +70,8 @@ var CreateTearsheetStep = exports.CreateTearsheetStep = /*#__PURE__*/(0, _react.
     introStep: introStep,
     shouldIncludeStep: shouldIncludeStep,
     secondaryLabel: secondaryLabel,
-    title: title
+    title: title,
+    invalid: invalid
   });
 
   // This useEffect reports back the onMount value so that they can be used
@@ -172,6 +174,10 @@ CreateTearsheetStep.propTypes = {
    * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
    */
   introStep: _propTypes.default.bool,
+  /**
+   * This optional prop will indicate an error icon on the progress indicator step item
+   */
+  invalid: _propTypes.default.bool,
   /**
    * Optional function to be called on initial mount of a step.
    * For example, this can be used to fetch data that is required on a particular step.

package/lib/components/CreateTearsheet/preview-components/MultiStepWithStepInErrorState.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiStepWithStepInErrorState = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@carbon/react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../../settings");
+var _CreateTearsheet = require("../CreateTearsheet");
+var _CreateTearsheetStep = require("../CreateTearsheetStep");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable react/prop-types */
+/**
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step");
+var MultiStepWithStepInErrorState = exports.MultiStepWithStepInErrorState = function MultiStepWithStepInErrorState(_ref) {
+  var backButtonText = _ref.backButtonText,
+    cancelButtonText = _ref.cancelButtonText,
+    className = _ref.className,
+    description = _ref.description,
+    influencerWidth = _ref.influencerWidth,
+    label = _ref.label,
+    nextButtonText = _ref.nextButtonText,
+    submitButtonText = _ref.submitButtonText,
+    title = _ref.title;
+  var _useState = (0, _react.useState)(750),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    simulatedDelay = _useState2[0];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    stepOneTextInputValue = _useState6[0],
+    setStepOneTextInputValue = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    topicDescriptionValue = _useState8[0],
+    setTopicDescriptionValue = _useState8[1];
+  var _useState9 = (0, _react.useState)(1),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    stepTwoTextInputValue = _useState10[0],
+    setStepTwoTextInputValue = _useState10[1];
+  (0, _react.useState)('one-day');
+  var _useState11 = (0, _react.useState)(true),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    stepOneIsInvalid = _useState12[0],
+    setStepOneIsInvalid = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    stepTwoIsInvalid = _useState14[0],
+    setStepTwoIsInvalid = _useState14[1];
+  var clearCreateData = function clearCreateData() {
+    setStepOneTextInputValue('');
+    setTopicDescriptionValue('');
+    setStepTwoTextInputValue(1);
+    setStepOneIsInvalid(true);
+    setStepTwoIsInvalid(true);
+    setOpen(false);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  }, open ? 'Close CreateTearsheet' : 'Open CreateTearsheet'), /*#__PURE__*/_react.default.createElement(_CreateTearsheet.CreateTearsheet, {
+    influencerWidth: influencerWidth,
+    label: label,
+    className: (0, _classnames.default)(blockClass, className),
+    submitButtonText: submitButtonText,
+    cancelButtonText: cancelButtonText,
+    backButtonText: backButtonText,
+    nextButtonText: nextButtonText,
+    description: description,
+    title: title,
+    open: open,
+    onClose: clearCreateData,
+    onRequestSubmit: function onRequestSubmit() {
+      return new Promise(function (resolve) {
+        setTimeout(function () {
+          clearCreateData();
+          resolve();
+        }, simulatedDelay);
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    title: "Topic name",
+    fieldsetLegendText: "Topic information",
+    disableSubmit: stepOneIsInvalid,
+    subtitle: "This is the unique name used to recognize your topic",
+    invalid: stepOneIsInvalid
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
+    labelText: "Topic name",
+    id: "tearsheet-multi-step-story-text-input-multi-step-1",
+    value: stepOneTextInputValue,
+    placeholder: "Enter topic name",
+    onChange: function onChange(event) {
+      setStepOneIsInvalid(!event.target.value.length);
+      setStepOneTextInputValue(event.target.value);
+    },
+    invalid: stepOneIsInvalid,
+    invalidText: "This is a required field",
+    onBlur: function onBlur() {}
+  }), /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
+    labelText: "Topic description (optional)",
+    id: "tearsheet-multi-step-story-text-input-multi-step-1-input-2",
+    value: topicDescriptionValue,
+    placeholder: "Enter topic description",
+    onChange: function onChange(event) {
+      return setTopicDescriptionValue(event.target.value);
+    }
+  })))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    title: "Partitions",
+    disableSubmit: stepTwoIsInvalid,
+    subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",
+    description: "Partitions are distributed across the brokers in order to increase the scalability of your topic. You can also use them to distribute messages across the members of a consumer group.",
+    fieldsetLegendText: "Partition information",
+    invalid: stepTwoIsInvalid
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+    xlg: 3,
+    lg: 3,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/_react.default.createElement(_react2.NumberInput, {
+    iconDescription: "Choose a number",
+    id: "carbon-number",
+    min: 1,
+    max: 100,
+    value: stepTwoTextInputValue,
+    label: "Partitions",
+    helperText: "1 partition is sufficient for getting started but, production systems often have more.",
+    invalidText: "Max partitions is 100, min is 1",
+    hideSteppers: true,
+    onChange: function onChange(event) {
+      event.target.value > 0 && event.target.value <= 100 ? setStepTwoIsInvalid(false) : setStepTwoIsInvalid(true);
+      setStepTwoTextInputValue(event.target.value);
+    }
+  }))))));
+};

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -37,6 +37,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var gcClass = "".concat(blockClass, "__grid-container");
 var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   var _cx4;
   var datagridState = _ref.datagridState,
@@ -152,7 +153,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
     });
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
-    className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
+    className: (0, _classnames.default)("".concat(gcClass), (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__with-pagination"), DatagridPagination), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__dense-header"), useDenseHeader), _cx4)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
@@ -162,7 +163,8 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
     updateMethod: "batch"
   }, getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
-    filterSections: filterProps.sections
+    filterSections: filterProps.sections,
+    autoHideFilters: filterProps.autoHideFilters
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__table-container-inner")
   }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {