@carbon/ibm-products 1.61.1 → 1.62.1

package/lib/components/Datagrid/useStickyColumn.js

@@ -28,9 +28,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
     setWindowSize(window.innerWidth);
   }, []);
   (0, _react.useLayoutEffect)(function () {
+    /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
+    /* istanbul ignore next */
     window.addEventListener('resize', updateSize);
     return function () {
       return window.removeEventListener('resize', updateSize);
@@ -51,14 +53,17 @@ var useStickyColumn = function useStickyColumn(hooks) {
     (0, _react.useEffect)(function () {
       var tableBodyElement = tableBodyRef.current;
       var headerCellElement = stickyHeaderCellRef.current;
+      /* istanbul ignore next */
       if (hasVertScroll(tableBodyElement) && headerCellElement) {
         headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
       }
       var boundListener = (0, _debounce.default)(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
+      /* istanbul ignore next */
       if (typeof window !== 'undefined') {
         window.addEventListener('resize', boundListener);
       }
       return function () {
+        /* istanbul ignore next */
         if (typeof window !== 'undefined') {
           window.removeEventListener('resize', boundListener);
         }
@@ -157,6 +162,7 @@ var changeProps = function changeProps(elementName, headerCellRef, windowSize, p
 };
 var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
   if (headerCellEle) {
+    /* istanbul ignore next */
     if (hasVertScroll(tableBodyEle)) {
       headerCellEle.classList.add(OFFSET_SCROLL_CLASS);
     } else {
@@ -166,6 +172,7 @@ var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
   }
 };
 var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
+  /* istanbul ignore next */
   if (tableBodyEle && headerCellEle) {
     var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
     if (isScrolledToRight) {
@@ -178,6 +185,7 @@ var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle
   }
 };
 var hasVertScroll = function hasVertScroll(element) {
+  /* istanbul ignore next */
   if (!element) {
     return false;
   }

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -37,6 +37,7 @@ var ErrorEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--error")),
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ErrorIllustration.ErrorIllustration, {
+    title: title,
     theme: illustrationTheme,
     size: size
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -37,6 +37,7 @@ var NoDataEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--noData")),
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NoDataIllustration.NoDataIllustration, {
+    title: title,
     theme: illustrationTheme,
     size: size
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -37,6 +37,7 @@ var NoTagsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--noTags")),
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NoTagsIllustration.NoTagsIllustration, {
+    title: title,
     theme: illustrationTheme,
     size: size
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -37,6 +37,7 @@ var NotFoundEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--notFound")),
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotFoundIllustration.NotFoundIllustration, {
+    title: title,
     theme: illustrationTheme,
     size: size
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -38,6 +38,7 @@ var NotificationsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotificationsIllustration.NotificationsIllustration, {
     size: size,
+    title: title,
     theme: illustrationTheme
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -38,6 +38,7 @@ var UnauthorizedEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_r
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_UnauthorizedIllustration.UnauthorizedIllustration, {
     size: size,
+    title: title,
     theme: illustrationTheme
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,

package/lib/components/EmptyStates/assets/ErrorIllustration.js

@@ -12,11 +12,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["title", "theme", "size"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var ErrorIllustration = function ErrorIllustration(_ref) {
-  var theme = _ref.theme,
+  var title = _ref.title,
+    theme = _ref.theme,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -27,7 +28,7 @@ var ErrorIllustration = function ErrorIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 38.9,
     y1: 77.08,
@@ -206,5 +207,6 @@ var ErrorIllustration = function ErrorIllustration(_ref) {
 exports.ErrorIllustration = ErrorIllustration;
 ErrorIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

package/lib/components/EmptyStates/assets/NoDataIllustration.js

@@ -12,11 +12,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["title", "theme", "size"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NoDataIllustration = function NoDataIllustration(_ref) {
-  var theme = _ref.theme,
+  var title = _ref.title,
+    theme = _ref.theme,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -27,7 +28,7 @@ var NoDataIllustration = function NoDataIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 11.12,
     y1: 43.34,
@@ -169,5 +170,6 @@ var NoDataIllustration = function NoDataIllustration(_ref) {
 exports.NoDataIllustration = NoDataIllustration;
 NoDataIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

package/lib/components/EmptyStates/assets/NoTagsIllustration.js

@@ -12,11 +12,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["title", "theme", "size"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NoTagsIllustration = function NoTagsIllustration(_ref) {
-  var theme = _ref.theme,
+  var title = _ref.title,
+    theme = _ref.theme,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -28,7 +29,7 @@ var NoTagsIllustration = function NoTagsIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__c_dark_".concat(svgId),
     x1: 34.96,
     y1: 5.37,
@@ -476,5 +477,6 @@ var NoTagsIllustration = function NoTagsIllustration(_ref) {
 exports.NoTagsIllustration = NoTagsIllustration;
 NoTagsIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

package/lib/components/EmptyStates/assets/NotFoundIllustration.js

@@ -12,11 +12,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["title", "theme", "size"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NotFoundIllustration = function NotFoundIllustration(_ref) {
-  var theme = _ref.theme,
+  var title = _ref.title,
+    theme = _ref.theme,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -27,7 +28,7 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 2.6,
     y1: -12.81,
@@ -353,5 +354,6 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
 exports.NotFoundIllustration = NotFoundIllustration;
 NotFoundIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

package/lib/components/EmptyStates/assets/NotificationsIllustration.js

@@ -12,11 +12,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["title", "theme", "size"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NotificationsIllustration = function NotificationsIllustration(_ref) {
-  var theme = _ref.theme,
+  var title = _ref.title,
+    theme = _ref.theme,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -27,7 +28,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 30.05,
     y1: 54.31,
@@ -324,5 +325,6 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
 exports.NotificationsIllustration = NotificationsIllustration;
 NotificationsIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js

@@ -12,11 +12,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["title", "theme", "size"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
-  var theme = _ref.theme,
+  var title = _ref.title,
+    theme = _ref.theme,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -28,7 +29,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__b_dark_".concat(svgId),
     x1: 17.33,
     y1: 40.68,
@@ -297,5 +298,6 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
 exports.UnauthorizedIllustration = UnauthorizedIllustration;
 UnauthorizedIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

package/lib/components/Guidebanner/Guidebanner.js

@@ -73,9 +73,6 @@ var Guidebanner = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     isCollapsed = _useState6[0],
     setIsCollapsed = _useState6[1];
-  var handleScrollableChange = function handleScrollableChange(value) {
-    setShowNavigation(value);
-  };
   var handleClickToggle = function handleClickToggle() {
     setScrollPosition(0);
     scrollRef.current.scrollToView(0);
@@ -100,9 +97,13 @@ var Guidebanner = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       left: _colors.blue90,
       right: _colors.purple70
     },
-    ref: scrollRef,
-    scrollableChange: handleScrollableChange,
-    scrollTune: -450
+    onChangeIsScrollable: function onChangeIsScrollable(value) {
+      setShowNavigation(value);
+    },
+    onScroll: function onScroll(scrollPercent) {
+      setScrollPosition(scrollPercent);
+    },
+    ref: scrollRef
   }, children), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)([collapsible || showNavigation ? "".concat(blockClass, "__navigation") : null])
   }, collapsible && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
@@ -121,9 +122,7 @@ var Guidebanner = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     tooltipPosition: "top",
     iconDescription: previousIconDescription,
     onClick: function onClick() {
-      scrollRef.current.scrollPrev().then(function (scrollPercentage) {
-        return setScrollPosition(scrollPercentage);
-      });
+      scrollRef.current.scrollPrev();
     }
   }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     kind: "ghost",
@@ -136,9 +135,7 @@ var Guidebanner = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     tooltipAlignment: "end",
     iconDescription: nextIconDescription,
     onClick: function onClick() {
-      scrollRef.current.scrollNext().then(function (scrollPercentage) {
-        return setScrollPosition(scrollPercentage);
-      });
+      scrollRef.current.scrollNext();
     }
   }))), onClose && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     className: "".concat(blockClass, "__close-button"),

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,19 @@
+"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 = function usePrefix() {
+  return _packageSettings.default.prefix;
+};
+exports.usePrefix = usePrefix;

package/lib/global/js/package-settings.js

@@ -25,6 +25,7 @@ var defaults = {
     CreateTearsheet: true,
     CreateTearsheetStep: true,
     CreateTearsheetDivider: true,
+    Datagrid: true,
     EditInPlace: true,
     EmptyState: true,
     ErrorEmptyState: true,
@@ -65,7 +66,6 @@ var defaults = {
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,
-    Datagrid: false,
     EditTearsheet: false,
     EditTearsheetNarrow: false,
     EditFullPage: false,
@@ -95,10 +95,7 @@ var defaults = {
   feature: {
     'a-new-feature': false,
     'default-portal-target-body': true,
-    'Datagrid.useExpandedRow': false,
-    'Datagrid.useNestedRows': false,
     'Datagrid.useInlineEdit': false,
-    'Datagrid.useActionsColumn': false,
     'Datagrid.useFiltering': false,
     'Datagrid.useCustomizeColumns': false,
     'ExampleComponent.secondaryIcon': false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.61.1",
+  "version": "1.62.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -97,5 +97,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "9c214f67bed9419967e0d865ab4fec31f923c64c"
+  "gitHead": "9de0589dad65ac5c559578d5f53c6ee31432717a"
 }

package/scss/components/Carousel/_carousel.scss

@@ -59,9 +59,8 @@
       }
 
       display: flex;
+      overflow: scroll;
       -ms-overflow-style: none;
-      overflow-x: scroll;
-      overflow-y: hidden;
       scroll-behavior: smooth;
       scroll-snap-type: x mandatory;
       scrollbar-width: none;

package/scss/components/Checklist/_checklist.scss

@@ -11,18 +11,6 @@
 @import '../../global/styles/project-settings';
 @import '../../global/styles/mixins';
 
-// Other Carbon settings.
-// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
-
-// Checklist uses the following Carbon components:
-// TODO: @import(s) of Carbon component styles used by Checklist
-
-// Checklist uses the following Carbon for IBM Products components:
-// TODO: @import(s) of IBM Products component styles used by Checklist
-
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-
 @mixin ellipsis-2-lines {
   display: -webkit-box;
   overflow: hidden;
@@ -39,6 +27,7 @@
     &__header {
       display: flex;
       padding: $spacing-05;
+      border-top: 1px solid $ui-03;
       background-color: $ui-01;
       gap: $spacing-03;
     }
@@ -114,7 +103,9 @@
       transform: rotate(-180deg);
     }
 
-    // Button to appear more like a link so it aligns better with the list text
+    // Button to appear more like a link so it aligns better with the list text.
+    // 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.
     &__button {
       max-width: none !important;
       min-height: auto !important;
@@ -126,8 +117,7 @@
       background-color: transparent !important;
       color: $link-01 !important;
 
-      // 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.
       div {
         @include ellipsis-2-lines();
@@ -144,10 +134,6 @@
         color: $text-primary;
         text-decoration: underline;
       }
-
-      &--error {
-        color: $text-error !important;
-      }
     }
 
     // container for animated content
@@ -195,14 +181,18 @@
     &__icon {
       /* stylelint-disable-next-line carbon/layout-token-use */
       margin: rem(1px) $spacing-03 0 0;
-      color: $link-01;
+
+      &--checked,
+      &--indeterminate {
+        color: $link-01;
+      }
 
       &--error {
         color: $support-error;
       }
 
       &--disabled {
-        color: $disabled-03;
+        color: $disabled-02;
       }
     }
 
@@ -210,10 +200,8 @@
       @include carbon--type-style('body-short-01');
       @include ellipsis-2-lines();
 
-      &--checked,
-      &--disabled,
-      &--error {
-        color: $disabled-03;
+      &--disabled {
+        color: $disabled-02;
       }
     }
 

package/scss/components/Coachmark/styles/_coachmark-dragbar.scss

@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable declaration-no-important */
-
 // Standard imports.
 @import '../../../global/styles/project-settings';
 @import '../../../global/styles/mixins';
@@ -16,53 +14,11 @@
 @mixin coachmark-dragbar {
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--coachmark-dragbar;
+  $handle-class: #{$pkg-prefix}--coachmark-dragbar__handle;
 
   .#{$block-class} {
     display: flex;
 
-    &__handle {
-      flex-grow: 1;
-      padding: $spacing-03 0 0 $spacing-03;
-      border: 0;
-      background-color: transparent;
-      text-align: left;
-
-      &:hover {
-        cursor: move;
-      }
-    }
-
-    &--close-btn {
-      width: $spacing-07;
-      height: $spacing-07;
-      margin-left: auto !important;
-
-      svg > path {
-        margin: 0;
-        fill: $inverse-01 !important;
-      }
-
-      &:hover {
-        background-color: $inverse-hover-ui !important;
-      }
-    }
-
-    &__light {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $active-secondary;
-        }
-      }
-    }
-
-    &__dark {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $button-tertiary-active;
-        }
-      }
-    }
-
     svg {
       color: $inverse-01;
     }

package/scss/components/Coachmark/styles/_coachmark-header.scss

@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable declaration-no-important */
-
 // Standard imports.
 @import '../../../global/styles/project-settings';
 @import '../../../global/styles/mixins';
@@ -19,37 +17,6 @@
 
   .#{$block-class} {
     display: flex;
-
-    &--close-btn {
-      width: $spacing-07;
-      height: $spacing-07;
-      margin-left: auto !important;
-
-      svg > path {
-        margin: 0;
-        fill: $inverse-01 !important;
-      }
-
-      &:hover {
-        background-color: $inverse-hover-ui !important;
-      }
-    }
-
-    &__light {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $active-secondary;
-        }
-      }
-    }
-
-    &__dark {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $button-tertiary-active;
-        }
-      }
-    }
   }
 }