@carbon/ibm-products 2.23.0 → 2.24.0

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CoachmarkStackHome = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _iconsReact = require("@carbon/icons-react");
+var _react2 = require("@carbon/react");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _reactDom = require("react-dom");
+var _CoachmarkHeader = require("../Coachmark/CoachmarkHeader");
+var _SteppedAnimatedMedia = require("../SteppedAnimatedMedia");
+var _excluded = ["className", "description", "isOpen", "media", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */ // The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--coachmark-stacked-home");
+var overlayClass = "".concat(_settings.pkg.prefix, "--coachmark-overlay");
+var componentName = 'CoachmarkStackHome';
+
+/**
+ * DO NOT USE. This component is for the exclusive use
+ * of other Novice to Pro components.
+ */
+var CoachmarkStackHome = exports.CoachmarkStackHome = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _document$querySelect;
+  var className = _ref.className,
+    description = _ref.description,
+    isOpen = _ref.isOpen,
+    media = _ref.media,
+    navLinkLabels = _ref.navLinkLabels,
+    onClickNavItem = _ref.onClickNavItem,
+    _onClose = _ref.onClose,
+    portalTarget = _ref.portalTarget,
+    closeButtonLabel = _ref.closeButtonLabel,
+    title = _ref.title,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var buttonFocusRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    linkFocusIndex = _useState2[0],
+    setLinkFocusIndex = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      if (isOpen && buttonFocusRef.current) {
+        buttonFocusRef.current.focus();
+      }
+    }, 100);
+  }, [isOpen]);
+  if (!navLinkLabels) {
+    return _pconsole.default.warn("".concat(componentName, " is a Novice to Pro internal component and is not intended for general use."));
+  }
+  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className),
+    ref: ref,
+    role: "main"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_CoachmarkHeader.CoachmarkHeader, {
+    onClose: function onClose() {
+      setLinkFocusIndex(0);
+      _onClose();
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(overlayClass, "__body")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(overlayClass, "-element")
+  }, !media && /*#__PURE__*/_react.default.createElement(_iconsReact.Idea, {
+    size: 20,
+    className: "".concat(blockClass, "__icon-idea")
+  }), media && (media.render ? media.render() : /*#__PURE__*/_react.default.createElement(_SteppedAnimatedMedia.SteppedAnimatedMedia, {
+    className: "".concat(overlayClass, "__element-stepped-media"),
+    filePaths: media.filePaths,
+    playStep: 0
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(overlayClass, "-element__content")
+  }, title && /*#__PURE__*/_react.default.createElement("h2", {
+    className: "".concat(overlayClass, "-element__title")
+  }, title), description && /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(overlayClass, "-element__body")
+  }, description)), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "".concat(blockClass, "__nav-links")
+  }, navLinkLabels.map(function (label, index) {
+    if (index === linkFocusIndex) {
+      return renderNavLink(index, label, buttonFocusRef);
+    } else {
+      return renderNavLink(index, label);
+    }
+  })), closeButtonLabel && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(overlayClass, "__footer")
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    size: "sm",
+    onClick: function onClick() {
+      setLinkFocusIndex(0);
+      _onClose();
+    }
+  }, closeButtonLabel))))), portalNode);
+  function renderNavLink(index, label) {
+    var ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+      kind: "ghost",
+      size: "sm",
+      onClick: function onClick() {
+        setLinkFocusIndex(index);
+        onClickNavItem(index + 1);
+      },
+      ref: ref
+    }, label));
+  }
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.CoachmarkStackHome = CoachmarkStackHome = _settings.pkg.checkComponentEnabled(CoachmarkStackHome, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+CoachmarkStackHome.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.
+CoachmarkStackHome.propTypes = {
+  /**
+   * Optional class name for this component.
+   */
+  className: _propTypes.default.string,
+  /**
+   * The label for the button that will close the stack
+   */
+  closeButtonLabel: _propTypes.default.string,
+  /**
+   * The description of the Coachmark.
+   */
+  description: _propTypes.default.node.isRequired,
+  /**
+   * If the stack home is open.
+   */
+  isOpen: _propTypes.default.bool.isRequired,
+  /**
+   * The object describing an image in one of two shapes.
+   *
+   * If a single media element is required, use `{render}`.
+   *
+   * If a stepped animation is required, use `{filePaths}`.
+   *
+   * @see {@link MEDIA_PROP_TYPE}.
+   */
+  media: _propTypes.default.oneOfType([_propTypes.default.shape({
+    render: _propTypes.default.func
+  }), _propTypes.default.shape({
+    filePaths: _propTypes.default.arrayOf(_propTypes.default.string)
+  })]),
+  /**
+   * The labels used to link to the stackable Coachmarks.
+   */
+  navLinkLabels: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  /**
+   * For internal use only by CoachmarkStack and CoachmarkStackHome.
+   */
+  onClickNavItem: _propTypes.default.func.isRequired,
+  /**
+   * Function to call when the stack closes.
+   */
+  onClose: _propTypes.default.func.isRequired,
+  /**
+   * By default, the CoachmarkStackHome will be appended to the end of `document.body`.
+   * The CoachmarkStackHome will remain persistent as the user navigates the app until
+   * the user closes the CoachmarkStackHome.
+   *
+   * Alternatively, the app developer can tightly couple the CoachmarkStackHome to a DOM
+   * element or other component by specifying a CSS selector. The CoachmarkStackHome will
+   * remain visible as long as that element remains visible or mounted. When the
+   * element is hidden or component is unmounted, the CoachmarkStackHome will disappear.
+   */
+  portalTarget: _propTypes.default.string,
+  /**
+   * The title of the Coachmark.
+   */
+  title: _propTypes.default.string.isRequired
+};

package/lib/components/CoachmarkStack/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CoachmarkStack", {
+  enumerable: true,
+  get: function get() {
+    return _CoachmarkStack.CoachmarkStack;
+  }
+});
+var _CoachmarkStack = require("./CoachmarkStack");

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -53,7 +53,8 @@ var SelectAll = exports.SelectAll = function SelectAll(datagridState) {
     dispatch = datagridState.dispatch,
     rows = datagridState.rows,
     getRowId = datagridState.getRowId,
-    toggleAllRowsSelected = datagridState.toggleAllRowsSelected;
+    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
+    onAllRowSelect = datagridState.onAllRowSelect;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -75,6 +76,7 @@ var SelectAll = exports.SelectAll = function SelectAll(datagridState) {
         indeterminate: true
       });
       toggleAllRowsSelected(false);
+      onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
       return onChange === null || onChange === void 0 ? void 0 : onChange({
         target: {
           checked: false
@@ -87,6 +89,7 @@ var SelectAll = exports.SelectAll = function SelectAll(datagridState) {
       getRowId: getRowId,
       isChecked: event.target.checked
     });
+    onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
   return /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -52,7 +52,7 @@ var DraggableElement = function DraggableElement(_ref) {
     size: 16
   })), children);
   var style = {
-    transform: _utilities.CSS.Transform.toString(transform),
+    transform: !disabled ? _utilities.CSS.Transform.toString(transform) : {},
     transition: transition
   };
   return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -37,7 +37,7 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
       }, props));
     },
     iconDescription: iconTooltipLabel,
-    tooltipPosition: "left",
+    tooltipPosition: "bottom",
     kind: "ghost",
     hasIconOnly: true,
     "test-id": "".concat(blockClass, "__customize-columns-trigger"),

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -48,6 +48,9 @@ var Columns = function Columns(_ref) {
       $splice: [[from, 1], [to, 0, fromCol]]
     }));
   }, [columns, setColumnsObject]);
+  var filteredStickyColumn = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
+    return !item.sticky;
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-column-list"),
     ref: listRef
@@ -71,7 +74,7 @@ var Columns = function Columns(_ref) {
     checked: getVisibleColumnsCount() === columns.length,
     indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
     onChange: function onChange() {
-      onSelectColumn(columns, getVisibleColumnsCount() !== columns.length);
+      onSelectColumn(filteredStickyColumn, getVisibleColumnsCount() !== columns.length);
     },
     id: "".concat(blockClass, "__customization-column-select-all"),
     labelText: selectAllLabel

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -97,7 +97,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   };
   var onCheckboxCheck = function onCheckboxCheck(col, value) {
     var changedDefinitions = columnObjects.map(function (definition) {
-      if (Array.isArray(col) && col.indexOf(definition) != null || definition.id === col.id) {
+      if (Array.isArray(col) && col.indexOf(definition) != -1 || definition.id === col.id) {
         return _objectSpread(_objectSpread({}, definition), {}, {
           isVisible: value
         });

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

@@ -114,9 +114,9 @@ var DocsPage = exports.DocsPage = function DocsPage() {
       }
     }, {
       title: 'Selecting rows',
-      description: "When building a Datagrid that requires selectable rows, use the `useSelectRows` hook.\n- Include `useSelectRows` hook\n- Add `onRowSelect` to the `useDatagrid` hook, this is a callback function called when on a row's selection checkbox onChange, and sends back the row object and the event\n        ",
+      description: "When building a Datagrid that requires selectable rows, use the `useSelectRows` hook.\n- Include `useSelectRows` hook\n- Add `onRowSelect` to the `useDatagrid` hook, this is a callback function called when on a row's selection checkbox onChange, and sends back the row object and the event\n- Add `onAllRowSelect` to the `useDatagrid` hook, this is a callback function called when on all rows selection checkbox onChange, and sends back all rows object and the event\n        ",
       source: {
-        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    onRowSelect: (row, event) => console.log(row, event),\n    batchActionMenuButtonLabel: 'More',\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    onRowSelect: (row, event) => console.log(row, event),\n    onAllRowSelect: (rows, event) => console.log(rows, event),\n    batchActionMenuButtonLabel: 'More',\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
       }
     }, {
       description: "The select all checkbox can be optionally hidden by settings the `hideSelectAll` property to `true` in the `useDatagrid` hook.",

package/lib/components/Datagrid/useActionsColumn.js

@@ -12,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@carbon/react");
 var _settings = require("../../settings");
+var _propsHelper = require("../../global/js/utils/props-helper");
 var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuItem"],
   _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
 /**
@@ -55,25 +56,28 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 display: 'flex'
               }
             }, rowActions.map(function (action, index) {
-              var align = action.align,
-                id = action.id,
-                itemText = action.itemText,
-                _onClick = action.onClick,
-                icon = action.icon,
-                shouldHideMenuItem = action.shouldHideMenuItem,
-                rest = (0, _objectWithoutProperties2.default)(action, _excluded);
+              var preparedActionProps = (0, _propsHelper.prepareProps)(action, ['isDelete']);
+              var align = preparedActionProps.align,
+                id = preparedActionProps.id,
+                itemText = preparedActionProps.itemText,
+                _onClick = preparedActionProps.onClick,
+                icon = preparedActionProps.icon,
+                shouldHideMenuItem = preparedActionProps.shouldHideMenuItem,
+                rest = (0, _objectWithoutProperties2.default)(preparedActionProps, _excluded);
               var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
               if (hidden) {
                 return null;
               }
+              var Icon = icon;
               return /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)("".concat(blockClass, "__actions-column-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action-button"), getDisabledState(row.index))),
                 key: "".concat(itemText, "__").concat(index)
-              }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, (0, _extends2.default)({}, rest, {
+              }, /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({}, rest, {
                 align: align || 'top',
-                renderIcon: icon,
-                iconDescription: itemText,
+                label: itemText,
                 kind: "ghost",
+                name: itemText //for test use
+                ,
                 className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action"), getDisabledState(row.index))),
                 onClick: function onClick(e) {
                   if (getDisabledState(row.index)) {
@@ -83,7 +87,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                   e.stopPropagation();
                   _onClick(id, row, e);
                 }
-              })));
+              }), /*#__PURE__*/_react.default.createElement(Icon, null)));
             })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
               align: "left",
               size: "sm",

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -18,7 +18,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable react/prop-types */ /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             * Copyright IBM Corp. 2020, 2023
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             * Copyright IBM Corp. 2020, 2024
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              *
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              * This source code is licensed under the Apache-2.0 license found in the
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              * LICENSE file in the root directory of this source tree.
@@ -34,7 +34,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
     instance: tempState === null || tempState === void 0 ? void 0 : tempState.current,
     lastExpandedRowIndex: lastExpandedRowIndex === null || lastExpandedRowIndex === void 0 ? void 0 : lastExpandedRowIndex.current,
     blockClass: blockClass,
-    activeElement: document.activeElement
+    activeElement: typeof document !== 'undefined' && document.activeElement
   });
   var visibleColumns = function visibleColumns(columns) {
     var expanderColumn = {

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

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _ErrorIllustration = require("../assets/ErrorIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationDescription", "illustrationTheme", "link", "size", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -40,6 +40,7 @@ var ErrorEmptyState = exports.ErrorEmptyState = /*#__PURE__*/_react.default.forw
     className = _ref.className,
     _ref$illustrationPosi = _ref.illustrationPosition,
     illustrationPosition = _ref$illustrationPosi === void 0 ? _EmptyState.defaults.position : _ref$illustrationPosi,
+    illustrationDescription = _ref.illustrationDescription,
     illustrationTheme = _ref.illustrationTheme,
     link = _ref.link,
     _ref$size = _ref.size,
@@ -53,7 +54,7 @@ var ErrorEmptyState = exports.ErrorEmptyState = /*#__PURE__*/_react.default.forw
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ErrorIllustration.ErrorIllustration, {
     theme: illustrationTheme,
     size: size,
-    title: title
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -87,6 +88,10 @@ ErrorEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Designates the position of the illustration relative to the content
    */

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

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NoDataIllustration = require("../assets/NoDataIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -41,6 +41,7 @@ var NoDataEmptyState = exports.NoDataEmptyState = /*#__PURE__*/_react.default.fo
     _ref$illustrationPosi = _ref.illustrationPosition,
     illustrationPosition = _ref$illustrationPosi === void 0 ? _EmptyState.defaults.position : _ref$illustrationPosi,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -51,9 +52,9 @@ var NoDataEmptyState = exports.NoDataEmptyState = /*#__PURE__*/_react.default.fo
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-position--").concat(illustrationPosition), "".concat(blockClass, "-type--noData")),
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NoDataIllustration.NoDataIllustration, {
-    title: title,
     theme: illustrationTheme,
-    size: size
+    size: size,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -87,6 +88,10 @@ NoDataEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Designates the position of the illustration relative to the content
    */

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

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NoTagsIllustration = require("../assets/NoTagsIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -41,6 +41,7 @@ var NoTagsEmptyState = exports.NoTagsEmptyState = /*#__PURE__*/_react.default.fo
     _ref$illustrationPosi = _ref.illustrationPosition,
     illustrationPosition = _ref$illustrationPosi === void 0 ? _EmptyState.defaults.position : _ref$illustrationPosi,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -53,7 +54,7 @@ var NoTagsEmptyState = exports.NoTagsEmptyState = /*#__PURE__*/_react.default.fo
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NoTagsIllustration.NoTagsIllustration, {
     theme: illustrationTheme,
     size: size,
-    title: title
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -87,6 +88,10 @@ NoTagsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Designates the position of the illustration relative to the content
    */

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

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NotFoundIllustration = require("../assets/NotFoundIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -41,6 +41,7 @@ var NotFoundEmptyState = exports.NotFoundEmptyState = /*#__PURE__*/_react.defaul
     _ref$illustrationPosi = _ref.illustrationPosition,
     illustrationPosition = _ref$illustrationPosi === void 0 ? _EmptyState.defaults.position : _ref$illustrationPosi,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -53,7 +54,7 @@ var NotFoundEmptyState = exports.NotFoundEmptyState = /*#__PURE__*/_react.defaul
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotFoundIllustration.NotFoundIllustration, {
     theme: illustrationTheme,
     size: size,
-    title: title
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -87,6 +88,10 @@ NotFoundEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Designates the position of the illustration relative to the content
    */

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

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NotificationsIllustration = require("../assets/NotificationsIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -41,6 +41,7 @@ var NotificationsEmptyState = exports.NotificationsEmptyState = /*#__PURE__*/_re
     _ref$illustrationPosi = _ref.illustrationPosition,
     illustrationPosition = _ref$illustrationPosi === void 0 ? _EmptyState.defaults.position : _ref$illustrationPosi,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -53,7 +54,7 @@ var NotificationsEmptyState = exports.NotificationsEmptyState = /*#__PURE__*/_re
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotificationsIllustration.NotificationsIllustration, {
     size: size,
     theme: illustrationTheme,
-    title: title
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -87,6 +88,10 @@ NotificationsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Designates the position of the illustration relative to the content
    */

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

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _UnauthorizedIllustration = require("../assets/UnauthorizedIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -41,6 +41,7 @@ var UnauthorizedEmptyState = exports.UnauthorizedEmptyState = /*#__PURE__*/_reac
     _ref$illustrationPosi = _ref.illustrationPosition,
     illustrationPosition = _ref$illustrationPosi === void 0 ? _EmptyState.defaults.position : _ref$illustrationPosi,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -53,7 +54,7 @@ var UnauthorizedEmptyState = exports.UnauthorizedEmptyState = /*#__PURE__*/_reac
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_UnauthorizedIllustration.UnauthorizedIllustration, {
     size: size,
     theme: illustrationTheme,
-    title: title
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -87,6 +88,10 @@ UnauthorizedEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Designates the position of the illustration relative to the content
    */