@carbon/ibm-products 2.13.0 → 2.15.0

package/lib/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -4,36 +4,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stateReducer = exports.handleColumnResizingEvent = exports.handleColumnResizeStartEvent = exports.handleColumnResizeEndEvent = void 0;
+exports.stateReducer = exports.handleColumnResizingEvent = exports.handleColumnResizeEndEvent = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _settings = require("../../../../settings");
 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) { (0, _defineProperty2.default)(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; }
-/**
- * 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.
- */
-
+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) { (0, _defineProperty2.default)(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; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * 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.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       */
 var COLUMN_RESIZE_START = 'columnStartResizing';
 var COLUMN_RESIZING = 'columnResizing';
 var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
-var handleColumnResizeStartEvent = exports.handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
-  dispatch({
-    type: COLUMN_RESIZE_START,
-    payload: {
-      headerId: headerId
-    }
-  });
-};
-var handleColumnResizeEndEvent = exports.handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var handleColumnResizeEndEvent = exports.handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
     type: COLUMN_RESIZE_END,
     payload: {
       onColResizeEnd: onColResizeEnd,
-      headerId: headerId
+      headerId: headerId,
+      isKeyEvent: isKeyEvent
     }
   });
 };
@@ -67,42 +61,45 @@ var stateReducer = exports.stateReducer = function stateReducer(newState, action
       }
     case COLUMN_RESIZE_START:
       {
-        var headerId = action.payload.headerId;
+        var _ref = action.payload || {},
+          headerId = _ref.headerId;
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: headerId
         });
       }
     case COLUMN_RESIZING:
       {
-        var _ref = action.payload || {},
-          _headerId = _ref.headerId,
-          newWidth = _ref.newWidth,
-          defaultWidth = _ref.defaultWidth;
+        var _ref2 = action.payload || {},
+          _headerId = _ref2.headerId,
+          newWidth = _ref2.newWidth,
+          defaultWidth = _ref2.defaultWidth;
         var newColumnWidth = {};
         if (typeof _headerId === 'undefined') {
           return _objectSpread({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref2) {
-          var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-            _ = _ref3[0],
-            value = _ref3[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref3) {
+          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+            _ = _ref4[0],
+            value = _ref4[1];
           return !isNaN(value);
         }));
+        var headerIdArray = newState.columnResizing.headerIdWidths || [];
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: _headerId,
           columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
             columnWidth: defaultWidth,
             columnWidths: _objectSpread(_objectSpread({}, cleanedWidths), newColumnWidth),
-            headerIdWidths: [_headerId, newWidth]
+            headerIdWidths: [].concat((0, _toConsumableArray2.default)(headerIdArray), [[_headerId, newWidth]])
           })
         });
       }
     case COLUMN_RESIZE_END:
       {
-        var _action$payload = action.payload,
-          onColResizeEnd = _action$payload.onColResizeEnd,
-          _headerId2 = _action$payload.headerId;
+        var _ref5 = action.payload || {},
+          onColResizeEnd = _ref5.onColResizeEnd,
+          _headerId2 = _ref5.headerId,
+          isKeyEvent = _ref5.isKeyEvent;
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;
@@ -110,8 +107,22 @@ var stateReducer = exports.stateReducer = function stateReducer(newState, action
         if (isResizing) {
           onColResizeEnd === null || onColResizeEnd === void 0 || onColResizeEnd(currentColumn, allChangedColumns);
         }
+        if (!isKeyEvent) {
+          if (typeof isKeyEvent === 'undefined') {
+            // Blur resizer input if it has focus and is not from a key event resize
+            if (document.activeElement.classList.contains("".concat(blockClass, "__col-resizer-range"))) {
+              var _document;
+              (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 || _document.blur();
+            }
+            return;
+          }
+        }
         return _objectSpread(_objectSpread({}, newState), {}, {
-          isResizing: false
+          isResizing: false,
+          columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
+            isResizingColumn: false,
+            startX: null
+          })
         });
       }
   }

package/lib/components/Datagrid/useActionsColumn.js

@@ -91,7 +91,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 }
               })));
             })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
-              align: "top-right",
+              align: "left",
               size: "sm",
               flipped: true,
               onClick: function onClick(e) {

package/lib/components/Datagrid/useSortableColumns.js

@@ -116,7 +116,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 : (0, _toConsumableArray2.default)(sortableColumns);

package/lib/components/EditTearsheet/EditTearsheet.js

@@ -16,7 +16,7 @@ var _react2 = require("@carbon/react");
 var _settings = require("../../settings");
 var _devtools = require("../../global/js/utils/devtools");
 var _TearsheetShell = require("../Tearsheet/TearsheetShell");
-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
  *
@@ -61,7 +61,7 @@ var EditTearsheet = exports.EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(
     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,
@@ -101,13 +101,15 @@ var EditTearsheet = exports.EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(
   }
   return /*#__PURE__*/_react.default.createElement(_TearsheetShell.TearsheetShell, (0, _extends2.default)({}, rest, (0, _devtools.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: (0, _classnames.default)(blockClass, className),
     description: description,
@@ -187,9 +189,9 @@ EditTearsheet.propTypes = {
    */
   onFormChange: _propTypes.default.func,
   /**
-   * Specifies whether the tearsheet is currently open.
+   * Specify a handler for submitting the tearsheet.
    */
-  onHandleModalClick: _propTypes.default.func,
+  onRequestSubmit: _propTypes.default.func.isRequired,
   /**
    * Specifies whether the tearsheet is currently open.
    */

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

@@ -80,14 +80,21 @@ var MultiFormEditTearsheet = exports.MultiFormEditTearsheet = function MultiForm
     setIsInvalid(false);
     setOpen(false);
   };
-  var handleModalClick = function handleModalClick() {
-    setOpen(!open);
+  var onClose = function onClose() {
+    clearCreateData();
+    (0, _addonActions.action)('onClose')();
+  };
+  var onSubmit = function onSubmit() {
+    setOpen(false);
+    (0, _addonActions.action)('onSubmit')();
   };
   var handleFormChange = function handleFormChange() {
     (0, _addonActions.action)('handleFormChange')();
   };
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    onClick: handleModalClick
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
   }, open ? 'Close EditTearsheet' : 'Open EditTearsheet'), /*#__PURE__*/_react.default.createElement(_EditTearsheet.EditTearsheet, {
     influencerWidth: influencerWidth,
     label: label,
@@ -97,8 +104,8 @@ var MultiFormEditTearsheet = exports.MultiFormEditTearsheet = function MultiForm
     description: description,
     title: title,
     open: open,
-    onHandleModalClick: handleModalClick,
-    onClose: clearCreateData,
+    onRequestSubmit: onSubmit,
+    onClose: onClose,
     onFormChange: handleFormChange
   }, /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
     title: "Topic name",

package/lib/components/FilterSummary/FilterSummary.js

@@ -33,7 +33,9 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
     _ref$filters = _ref.filters,
     filters = _ref$filters === void 0 ? [] : _ref$filters,
     _ref$renderLabel = _ref.renderLabel,
-    renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel;
+    renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel,
+    _ref$overflowType = _ref.overflowType,
+    overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType;
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
@@ -52,7 +54,8 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",
     showAllTagsLabel: "View all tags",
-    tags: tagFilters
+    tags: tagFilters,
+    overflowType: overflowType
   }), /*#__PURE__*/_react2.default.createElement(_react.Button, {
     kind: "ghost",
     size: "sm",
@@ -66,6 +69,7 @@ FilterSummary.propTypes = {
   clearFilters: _propTypes.default.func.isRequired,
   clearFiltersText: _propTypes.default.string,
   filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  overflowType: _propTypes.default.oneOf(['default', 'tag']),
   renderLabel: _propTypes.default.func
 };
 var _default = exports.default = FilterSummary;

package/lib/components/TagSet/TagSet.js

@@ -20,7 +20,7 @@ var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _devtools = require("../../global/js/utils/devtools");
 var _propsHelper = require("../../global/js/utils/props-helper");
 var _settings = require("../../settings");
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label"]; //
 // Copyright IBM Corp. 2020, 2022
@@ -39,7 +39,8 @@ var allTagsModalSearchThreshold = 10;
 // Default values for props
 var defaults = {
   align: 'start',
-  overflowAlign: 'bottom'
+  overflowAlign: 'bottom',
+  overflowType: 'default'
 };
 var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
@@ -51,6 +52,8 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
     overflowClassName = _ref.overflowClassName,
+    _ref$overflowType = _ref.overflowType,
+    overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
     allTagsModalTitle = _ref.allTagsModalTitle,
     allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
@@ -131,12 +134,13 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
       onShowAllClick: handleShowAllClick,
       overflowTags: newOverflowTags,
       overflowAlign: overflowAlign,
+      overflowType: overflowType,
       showAllTagsLabel: showAllTagsLabel,
       key: "displayed-tag-overflow",
       ref: overflowTag
     }));
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, showAllTagsLabel, tags]);
+  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags]);
   var checkFullyVisibleTags = (0, _react.useCallback)(function () {
     if (multiline) {
       return setDisplayCount(maxVisible);
@@ -285,6 +289,10 @@ TagSet.propTypes = {
    * overflowClassName for the tooltip popup
    */
   overflowClassName: _propTypes.default.string,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: _propTypes.default.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link.
    *

package/lib/components/TagSet/TagSetOverflow.js

@@ -16,7 +16,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@carbon/react");
 var _hooks = require("../../global/js/hooks");
 var _settings = require("../../settings");
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "showAllTagsLabel"]; //
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel"]; //
 // Copyright IBM Corp. 2021, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
@@ -40,6 +40,7 @@ var TagSetOverflow = exports.TagSetOverflow = /*#__PURE__*/_react.default.forwar
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
     overflowTags = _ref.overflowTags,
+    overflowType = _ref.overflowType,
     showAllTagsLabel = _ref.showAllTagsLabel,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
@@ -89,12 +90,18 @@ var TagSetOverflow = exports.TagSetOverflow = /*#__PURE__*/_react.default.forwar
   }, overflowTags.filter(function (_, index) {
     return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
   }).map(function (tag, index) {
+    var _cx2;
+    var tagProps = {};
+    if (overflowType === 'tag') {
+      tagProps.type = 'high-contrast';
+    }
+    if (overflowType === 'default') {
+      tagProps.filter = false;
+    }
     return /*#__PURE__*/_react.default.createElement("li", {
-      className: "".concat(blockClass, "__tag-item"),
+      className: (0, _classnames.default)("".concat(blockClass, "__tag-item"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag'), _cx2)),
       key: index
-    }, /*#__PURE__*/_react.default.cloneElement(tag, {
-      filter: false
-    }));
+    }, /*#__PURE__*/_react.default.cloneElement(tag, tagProps));
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/_react.default.createElement(_react2.Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
@@ -124,6 +131,10 @@ TagSetOverflow.propTypes = {
    * tags shown in overflow
    */
   overflowTags: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: _propTypes.default.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link
    */

package/lib/global/js/hooks/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "useNearestScroll", {
     return _useWindowScroll.useNearestScroll;
   }
 });
+Object.defineProperty(exports, "usePrefix", {
+  enumerable: true,
+  get: function get() {
+    return _usePrefix.usePrefix;
+  }
+});
 Object.defineProperty(exports, "usePreviousValue", {
   enumerable: true,
   get: function get() {
@@ -85,4 +91,5 @@ var _usePreviousValue = require("./usePreviousValue");
 var _useResetCreateComponent = require("./useResetCreateComponent");
 var _useRetrieveStepData = require("./useRetrieveStepData");
 var _useValidCreateStepCount = require("./useValidCreateStepCount");
-var _useControllableState = require("./useControllableState");
+var _useControllableState = require("./useControllableState");
+var _usePrefix = require("./usePrefix");

package/lib/global/js/hooks/usePrefix.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePrefix = void 0;
+var _packageSettings = _interopRequireDefault(require("../package-settings"));
+/**
+ * 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.
+ */
+
+var usePrefix = exports.usePrefix = function usePrefix() {
+  return _packageSettings.default.prefix;
+};

package/lib/global/js/hooks/useRetrieveStepData.js

@@ -16,11 +16,12 @@ var _react = require("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
@@ -29,6 +30,7 @@ var useRetrieveStepData = exports.useRetrieveStepData = function useRetrieveStep
   var stepsContext = _ref.stepsContext,
     stepNumber = _ref.stepNumber,
     introStep = _ref.introStep,
+    invalid = _ref.invalid,
     shouldIncludeStep = _ref.shouldIncludeStep,
     secondaryLabel = _ref.secondaryLabel,
     title = _ref.title;
@@ -39,10 +41,11 @@ var useRetrieveStepData = exports.useRetrieveStepData = function useRetrieveStep
           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 = (0, _toConsumableArray2.default)(prev);
           clone[stepNumber - 1] = stepItem;
           return clone;
@@ -50,5 +53,5 @@ var useRetrieveStepData = exports.useRetrieveStepData = function useRetrieveStep
         return prev;
       });
     }
-  }, [shouldIncludeStep, title, secondaryLabel, introStep, stepsContext, stepNumber]);
+  }, [shouldIncludeStep, title, secondaryLabel, introStep, invalid, stepsContext, stepNumber]);
 };

package/lib/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  pkg: true
+  pkg: true,
+  usePrefix: true
 };
 Object.defineProperty(exports, "pkg", {
   enumerable: true,
@@ -12,7 +13,14 @@ Object.defineProperty(exports, "pkg", {
     return _settings.pkg;
   }
 });
+Object.defineProperty(exports, "usePrefix", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.usePrefix;
+  }
+});
 var _settings = require("./settings");
+var _hooks = require("./global/js/hooks");
 var _components = require("./components");
 Object.keys(_components).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.13.0",
+  "version": "2.15.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -87,14 +87,14 @@
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.20.0",
-    "@carbon/layout": "^11.19.0",
-    "@carbon/motion": "^11.15.0",
-    "@carbon/react": "^1.40.0",
-    "@carbon/themes": "^11.25.0",
-    "@carbon/type": "^11.24.0",
+    "@carbon/grid": "^11.21.1",
+    "@carbon/layout": "^11.20.1",
+    "@carbon/motion": "^11.16.1",
+    "@carbon/react": "^1.41.1",
+    "@carbon/themes": "^11.26.1",
+    "@carbon/type": "^11.25.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "0f226a6af5fd9c21aa5d39f26266f561895385b9"
+  "gitHead": "71e9863315eb75b25df98cf9989f7bca88a10718"
 }

package/scss/components/Checklist/_checklist.scss

@@ -25,10 +25,10 @@
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 
-// .#{$block-class} {
 .#{$block-class}__header {
   display: flex;
   padding: $spacing-05;
+  border-bottom: 1px solid $border-subtle-01;
   background-color: $layer-01;
   gap: $spacing-03;
 }
@@ -78,8 +78,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 }
 
 // TOGGLE
-// The <iconbutton> itself (class="...__toggle") is embedded inside two more tags,
-// which do not accept any classnames passed via the <iconbutton>.
+// The <IconButton> itself (class="...__toggle") is embedded inside two more tags,
+// which do not accept any class names passed via the <IconButton>.
 // So, we have to refer to it via it's "tooltip" wrapper element. :/
 .#{$block-class}__header .#{c4p-settings.$carbon-prefix}--tooltip {
   height: 2rem;
@@ -107,6 +107,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 // Override Primary button styling to appear more like a link.
 // "Unset" some settings to allow an inner div to enable multiple lines and an ellipsis if req'd.
 .#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary {
+  @include type-style('body-short-01');
+
   max-width: none;
   min-height: auto;
   // override bx--btn to allow two-line ellipsis
@@ -117,8 +119,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   background-color: transparent;
   color: $link-primary;
 }
-// The CSS for the Carbon button's label
-// is incompatible with two-line ellipsis,
+// The CSS for the Carbon button's label is incompatible with two-line ellipsis,
 // but a div inside a Carbon button works.
 .#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary div {
   @include ellipsis-2-lines();
@@ -136,11 +137,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   text-decoration: underline;
 }
 
-.#{$block-class}__button--error {
-  /* stylelint-disable-next-line declaration-no-important */
-  color: $text-error !important;
-}
-
 // container for animated content
 .#{$block-class}__content-outer {
   overflow: hidden;
@@ -167,6 +163,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   padding: $spacing-05;
   border-top: 1px solid $border-subtle-01;
 }
+.#{$block-class}__list-group:first-of-type {
+  border-top: none;
+}
 
 .#{$block-class}__list-title {
   @include type-style('body-short-01');
@@ -185,9 +184,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 }
 
 .#{$block-class}__icon {
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  /* stylelint-disable-next-line */
   margin: to-rem(1px) $spacing-03 0 0;
-  color: $link-primary;
+  color: $icon-primary;
+}
+
+.#{$block-class}__icon--checked,
+.#{$block-class}__icon--indeterminate {
+  color: $interactive;
 }
 
 .#{$block-class}__icon--error {
@@ -203,9 +207,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   @include ellipsis-2-lines();
 }
 
-.#{$block-class}__label--checked,
-.#{$block-class}__label--disabled,
-.#{$block-class}__label--error {
+.#{$block-class}__label--disabled {
   color: $text-disabled;
 }
 
@@ -213,5 +215,5 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   @include ellipsis-2-lines();
 
   padding: $spacing-03 $spacing-05;
-  border-top: 1px solid $border-subtle;
+  border-top: 1px solid $border-subtle-01;
 }

package/scss/components/Datagrid/_storybook-styles.scss

@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/tooltip';
 
 @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
@@ -141,3 +142,16 @@ div[data-story-title*='#{$story-anchor}']
   overflow: auto;
   width: 100%;
 }
+
+.sb--tooltip-trigger {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+}