@carbon/ibm-products 1.61.0 → 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,
@@ -108,7 +107,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/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

@@ -176,12 +176,12 @@ Guidebanner.propTypes = {
       error = new Error('`Guidebanner` requires one or more children of type `GuidebannerElement`.');
     }
     _react.default.Children.forEach(prop, function (child) {
-      if (child.type.name !== 'GuidebannerElement') {
-        var _child$type;
+      if (child.type.displayName !== 'GuidebannerElement') {
+        var _child$type, _child$type2;
         // If not GuidebannerElement, then show:
         // React component name(child.type?.name) or
         // HTML element name(child.type).
-        error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) || child.type, "` instead."));
+        error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) || child.type, "` instead."));
       }
     });
     return error;

package/lib/components/Guidebanner/GuidebannerElement.js

@@ -41,10 +41,17 @@ var GuidebannerElement = function GuidebannerElement(_ref) {
   }, button));
 };
 
+// Return a placeholder if not released and not enabled by feature flag
+exports.GuidebannerElement = GuidebannerElement;
+exports.GuidebannerElement = GuidebannerElement = _settings.pkg.checkComponentEnabled(GuidebannerElement, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+GuidebannerElement.displayName = componentName;
+
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.GuidebannerElement = GuidebannerElement;
 GuidebannerElement.propTypes = {
   /**
    * An optional button can be rendered below the description.

package/lib/components/Guidebanner/GuidebannerElementButton.js

@@ -48,10 +48,17 @@ var GuidebannerElementButton = function GuidebannerElementButton(_ref) {
   }, (0, _devtools.getDevtoolsProps)(componentName)), children);
 };
 
+// Return a placeholder if not released and not enabled by feature flag
+exports.GuidebannerElementButton = GuidebannerElementButton;
+exports.GuidebannerElementButton = GuidebannerElementButton = _settings.pkg.checkComponentEnabled(GuidebannerElementButton, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+GuidebannerElementButton.displayName = componentName;
+
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.GuidebannerElementButton = GuidebannerElementButton;
 GuidebannerElementButton.propTypes = {
   /**
    * Provide the contents of the GuidebannerElementButton.

package/lib/components/Guidebanner/GuidebannerElementLink.js

@@ -36,10 +36,17 @@ var GuidebannerElementLink = function GuidebannerElementLink(_ref) {
   }, (0, _devtools.getDevtoolsProps)(componentName)), children);
 };
 
+// Return a placeholder if not released and not enabled by feature flag
+exports.GuidebannerElementLink = GuidebannerElementLink;
+exports.GuidebannerElementLink = GuidebannerElementLink = _settings.pkg.checkComponentEnabled(GuidebannerElementLink, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+GuidebannerElementLink.displayName = componentName;
+
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.GuidebannerElementLink = GuidebannerElementLink;
 GuidebannerElementLink.propTypes = {
   /**
    * Provide the contents of the GuidebannerElementLink.

package/lib/components/InlineTip/InlineTipButton.js

@@ -61,10 +61,17 @@ var InlineTipButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   }), children);
 });
 
+// Return a placeholder if not released and not enabled by feature flag
+exports.InlineTipButton = InlineTipButton;
+exports.InlineTipButton = InlineTipButton = _settings.pkg.checkComponentEnabled(InlineTipButton, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InlineTipButton.displayName = componentName;
+
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.InlineTipButton = InlineTipButton;
 InlineTipButton.propTypes = {
   /**
    * Provide the contents of the InlineTipButton.

package/lib/components/InlineTip/InlineTipLink.js

@@ -61,10 +61,17 @@ var InlineTipLink = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }), children);
 });
 
+// Return a placeholder if not released and not enabled by feature flag
+exports.InlineTipLink = InlineTipLink;
+exports.InlineTipLink = InlineTipLink = _settings.pkg.checkComponentEnabled(InlineTipLink, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InlineTipLink.displayName = componentName;
+
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.InlineTipLink = InlineTipLink;
 InlineTipLink.propTypes = {
   /**
    * Provide the contents of the InlineTipLink.

package/lib/components/index.js

@@ -207,6 +207,24 @@ Object.defineProperty(exports, "Guidebanner", {
     return _Guidebanner.Guidebanner;
   }
 });
+Object.defineProperty(exports, "GuidebannerElement", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.GuidebannerElement;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementButton", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.GuidebannerElementButton;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementLink", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.GuidebannerElementLink;
+  }
+});
 Object.defineProperty(exports, "HTTPError403", {
   enumerable: true,
   get: function get() {
@@ -243,6 +261,18 @@ Object.defineProperty(exports, "InlineTip", {
     return _InlineTip.InlineTip;
   }
 });
+Object.defineProperty(exports, "InlineTipButton", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTip.InlineTipButton;
+  }
+});
+Object.defineProperty(exports, "InlineTipLink", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTip.InlineTipLink;
+  }
+});
 Object.defineProperty(exports, "ModifiedTabs", {
   enumerable: true,
   get: function get() {

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");