@carbon/ibm-products 1.61.1 → 1.62.0

package/lib/components/Datagrid/useSelectRows.js

@@ -17,12 +17,14 @@ var _carbonComponentsReact = require("carbon-components-react");
 var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
 var _commonColumnIds = require("./common-column-ids");
 var _settings = require("../../settings");
-var _excluded = ["onChange"];
+var _stateReducer = require("./Datagrid/addons/stateReducer");
+var _excluded = ["onChange", "title"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var checkboxClass = "".concat(blockClass, "__checkbox-cell");
 var useSelectRows = function useSelectRows(hooks) {
   useHighlightSelection(hooks);
   var useInstance = function useInstance(instance) {
@@ -56,9 +58,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: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
+      className: (0, _classnames.default)(["".concat(blockClass, "__carbon-row"), (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(_settings.carbon.prefix, "--data-table--selected"), checked), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__active-row"), checked), _ref2)])
     }];
   };
   hooks.getRowProps.push(getRowProps);
@@ -75,7 +80,8 @@ var SelectRow = function SelectRow(datagridState) {
     onRadioSelect = datagridState.onRadioSelect,
     onRowSelect = datagridState.onRowSelect,
     columns = datagridState.columns,
-    withStickyColumn = datagridState.withStickyColumn;
+    withStickyColumn = datagridState.withStickyColumn,
+    dispatch = datagridState.dispatch;
   var _useState = (0, _react.useState)(window.innerWidth),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     windowSize = _useState2[0],
@@ -90,28 +96,32 @@ var SelectRow = function SelectRow(datagridState) {
     };
   }, []);
   var selectDisabled = isFetching || row.getRowProps().selectDisabled;
-  var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
-    onChange = _row$getToggleRowSele.onChange,
-    selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele, _excluded);
+  var _row$getToggleRowSele2 = row.getToggleRowSelectedProps(),
+    onChange = _row$getToggleRowSele2.onChange,
+    title = _row$getToggleRowSele2.title,
+    selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele2, _excluded);
   var cellProps = cell.getCellProps();
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
+  var onSelectHandler = function onSelectHandler(event) {
+    event.stopPropagation(); // avoid triggering onRowClick
+    if (radio) {
+      toggleAllRowsSelected(false);
+      if (onRadioSelect) {
+        onRadioSelect(row);
+      }
+    }
+    onChange(event);
+    onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row, event);
+    (0, _stateReducer.handleToggleRowSelected)(dispatch, row, event.target.checked);
+  };
+  var rowId = "".concat(tableId, "-").concat(row.index);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TableSelectRow, (0, _extends2.default)({}, 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 ? void 0 : onRowSelect(row, e);
-    },
-    id: "".concat(tableId, "-").concat(row.index),
-    name: "".concat(tableId, "-").concat(row.index, "-name"),
-    className: (0, _classnames.default)("".concat(blockClass, "__checkbox-cell"), cellProps.className, (0, _defineProperty2.default)({}, "".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: (0, _classnames.default)(["".concat(checkboxClass, "__checkbox-cell"), cellProps.className, (0, _defineProperty2.default)({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)]),
+    ariaLabel: title // TODO: aria label should be i18n'ed
     ,
     disabled: selectDisabled
   }));

package/lib/components/Datagrid/useSkeletonRows.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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.
  */
+
 var useSkeletons = function useSkeletons(hooks) {
   var useInstance = function useInstance(instance) {
     var isFetching = instance.isFetching,

package/lib/components/Datagrid/useSortableColumns.js

@@ -28,9 +28,8 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
   if (!col) {
     return;
   }
-  var _ref2 = col || {},
-    isSorted = _ref2.isSorted,
-    isSortedDesc = _ref2.isSortedDesc;
+  var isSorted = col.isSorted,
+    isSortedDesc = col.isSortedDesc;
   if (!isSorted) {
     return defaultSortableLabelText;
   }
@@ -42,9 +41,9 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
   }
 };
 var useSortableColumns = function useSortableColumns(hooks) {
-  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref3) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
     var _instance$customizeCo;
-    var instance = _ref3.instance;
+    var instance = _ref2.instance;
     var onSort = instance.onSort,
       ascendingSortableLabelText = instance.ascendingSortableLabelText,
       descendingSortableLabelText = instance.descendingSortableLabelText,

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/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,
@@ -98,7 +98,6 @@ var defaults = {
     '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.0",
   "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": "89c6e18fc0a426f7a6835947561210242824fb07"
 }

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;
       }
     }