@carbon/ibm-products 1.69.0 → 1.71.0

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js

@@ -1,10 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * Copyright IBM Corp. 2023, 2023
+ * 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.
  */
+
 /* eslint-disable jsdoc/check-param-names */
 
 import { useState, useEffect } from 'react';
@@ -18,8 +19,7 @@ import isEqual from 'lodash/isEqual';
  * @returns {Array} returns a tuple of the state and setter function
  */
 var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
-  var _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === void 0 ? true : _ref$initialValue,
+  var initialValue = _ref.initialValue,
     filtersState = _ref.filtersState,
     prevFiltersRef = _ref.prevFiltersRef;
   var _useState = useState(initialValue),

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import { useEffect, useContext } from 'react';
 import { FilterContext } from '../FilterProvider';
 

package/es/components/Datagrid/Datagrid/addons/Filtering/index.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 export { default as FilterFlyout } from './FilterFlyout';
 export { default as FilterPanel } from './FilterPanel';
 export { FilterProvider, FilterContext } from './FilterProvider';

package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 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.
@@ -18,9 +18,7 @@ var applyInitialFilters = function applyInitialFilters(filterState, initialFilte
 };
 
 // This functions takes the filters passed in and makes an object to track it's state
-export var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
-  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
-  var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+export var getInitialStateFromFilters = function getInitialStateFromFilters(filters, variation, initialFilters) {
   var initialFilterState = {};
   var setInitialState = function setInitialState(_ref) {
     var type = _ref.type,
@@ -74,8 +72,6 @@ export var getInitialStateFromFilters = function getInitialStateFromFilters(filt
         return setInitialState(filter);
       });
     });
-  } else {
-    console.error('No variation passed into useInitialStateFromFilters');
   }
   if (initialFilters.length > 0) {
     applyInitialFilters(initialFilterState, initialFilters);

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

@@ -92,7 +92,7 @@ export var stateReducer = function stateReducer(newState, action) {
         if (rows) {
           var newSelectedRowData = {};
           rows.forEach(function (row) {
-            newSelectedRowData[getRowId(row, row.index)] = row;
+            newSelectedRowData[getRowId(row.original, row.index)] = row.original;
           });
           return _objectSpread(_objectSpread({}, newState), {}, {
             selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
@@ -111,7 +111,7 @@ export var stateReducer = function stateReducer(newState, action) {
         }
         if (_isChecked) {
           return _objectSpread(_objectSpread({}, newState), {}, {
-            selectedRowData: _objectSpread(_objectSpread({}, newState.selectedRowData), {}, _defineProperty({}, _getRowId(rowData, rowData.index), rowData))
+            selectedRowData: _objectSpread(_objectSpread({}, newState.selectedRowData), {}, _defineProperty({}, _getRowId(rowData.original, rowData.index), rowData.original))
           });
         }
         if (rowData && !_isChecked) {
@@ -119,7 +119,7 @@ export var stateReducer = function stateReducer(newState, action) {
           var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref5) {
             var _ref6 = _slicedToArray(_ref5, 1),
               key = _ref6[0];
-            return parseInt(key) !== parseInt(rowData.index);
+            return parseInt(key) !== parseInt(_getRowId(rowData.original, rowData.index));
           }));
           return _objectSpread(_objectSpread({}, newState), {}, {
             selectedRowData: dataWithRemovedRow
@@ -177,10 +177,7 @@ export var stateReducer = function stateReducer(newState, action) {
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;
-        var isResizing = newState.isResizing;
-        if (isResizing) {
-          onColResizeEnd === null || onColResizeEnd === void 0 ? void 0 : onColResizeEnd(currentColumn, allChangedColumns);
-        }
+        onColResizeEnd === null || onColResizeEnd === void 0 ? void 0 : onColResizeEnd(currentColumn, allChangedColumns);
         if (!isKeyEvent) {
           if (typeof isKeyEvent === 'undefined') {
             // Blur resizer input if it has focus and is not from a key event resize

package/es/components/Datagrid/useActionsColumn.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "itemText", "onClick", "icon", "shouldHideMenuItem"],
+var _excluded = ["id", "itemText", "onClick", "shouldHideMenuItem", "align", "icon"],
   _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
 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) { _defineProperty(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; }
@@ -14,8 +14,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import cx from 'classnames';
-import { IconSkeleton, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { IconSkeleton, OverflowMenu, OverflowMenuItem, Button } from 'carbon-components-react';
 import { pkg } from '../../settings';
+import { prepareProps } from '../../global/js/utils/props-helper';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useActionsColumn = function useActionsColumn(hooks) {
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
@@ -50,12 +51,14 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 display: 'flex'
               }
             }, rowActions.map(function (action, index) {
-              var id = action.id,
-                itemText = action.itemText,
-                _onClick = action.onClick,
-                icon = action.icon,
-                shouldHideMenuItem = action.shouldHideMenuItem,
-                rest = _objectWithoutProperties(action, _excluded);
+              var preparedActionProps = prepareProps(action, ['isDelete']);
+              var id = preparedActionProps.id,
+                itemText = preparedActionProps.itemText,
+                _onClick = preparedActionProps.onClick,
+                shouldHideMenuItem = preparedActionProps.shouldHideMenuItem,
+                align = preparedActionProps.align,
+                icon = preparedActionProps.icon,
+                rest = _objectWithoutProperties(preparedActionProps, _excluded);
               var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
               if (hidden) {
                 return null;
@@ -63,13 +66,13 @@ var useActionsColumn = function useActionsColumn(hooks) {
               return /*#__PURE__*/React.createElement("div", {
                 className: cx("".concat(blockClass, "__actions-column-button"), _defineProperty({}, "".concat(blockClass, "__disabled-row-action-button"), getDisabledState(row.index))),
                 key: "".concat(itemText, "__").concat(index)
-              }, /*#__PURE__*/React.createElement(OverflowMenu, _extends({}, rest, {
+              }, /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+                tooltipPosition: align || 'top',
+                kind: "ghost",
+                name: itemText //for test use
+                ,
                 renderIcon: icon,
-                hasIconOnly: true,
-                light: true,
                 iconDescription: itemText,
-                ariaLabel: itemText,
-                kind: "ghost",
                 className: cx(_defineProperty({}, "".concat(blockClass, "__disabled-row-action"), getDisabledState(row.index))),
                 onClick: function onClick(e) {
                   if (getDisabledState(row.index)) {
@@ -78,7 +81,8 @@ var useActionsColumn = function useActionsColumn(hooks) {
                   }
                   e.stopPropagation();
                   _onClick(id, row, e);
-                }
+                },
+                hasIconOnly: true
               })));
             })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OverflowMenu, {
               size: "sm",

package/es/components/Datagrid/useFiltering.js

@@ -4,20 +4,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2022, 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.
  */
 
-import { useMemo, useEffect } from 'react';
-import { pkg } from '../../settings';
+import { useMemo } from 'react';
 import { FilterFlyout } from './Datagrid/addons/Filtering';
 import { BATCH } from './Datagrid/addons/Filtering/constants';
 var useFiltering = function useFiltering(hooks) {
-  useEffect(function () {
-    pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
-  }, []);
+  /* istanbul ignore next */
   var filterTypes = useMemo(function () {
     return {
       date: function date(rows, id, _ref) {

package/es/components/Datagrid/useInfiniteScroll.js

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -13,14 +13,18 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
   useParentDimensions(hooks);
   useResizeTable(hooks);
   var useInstance = function useInstance(instance) {
+    var _tableElement;
     var isFetching = instance.isFetching,
       tableHeight = instance.tableHeight,
       innerListRef = instance.innerListRef,
       fetchMoreData = instance.fetchMoreData,
       tableId = instance.tableId,
       loadMoreThreshold = instance.loadMoreThreshold;
-    var tableElement = document.querySelector("#".concat(tableId));
-    var totalTableHeight = tableHeight || (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight);
+    var tableElement;
+    if (typeof document !== 'undefined') {
+      tableElement = document.querySelector("#".concat(tableId));
+    }
+    var totalTableHeight = tableHeight || ((_tableElement = tableElement) === null || _tableElement === void 0 ? void 0 : _tableElement.clientHeight);
     var loadMoreThresholdValue = typeof loadMoreThreshold === 'number' ? loadMoreThreshold : 200;
     var emptyFetchData = function emptyFetchData() {};
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/es/components/Datagrid/useNestedRowExpander.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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; }
 /* 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.
@@ -27,7 +27,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/es/components/Datagrid/useRowIsMouseOver.js

@@ -37,7 +37,9 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
       });
     });
     Object.assign(instance, {
-      rows: rowsWithMouseOver
+      rows: rowsWithMouseOver,
+      withMouseHover: true,
+      setMouseOverRowIndex: setMouseOverRowIndex
     });
     hooks.getRowProps.push(getRowProps);
   };

package/es/components/Datagrid/useSelectAllToggle.js

@@ -1,18 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2021, 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.
  */
-// @flow
-import React, { useLayoutEffect, useState } from 'react';
+
+import React, { useState } from 'react';
 import cx from 'classnames';
 import { selectionColumnId } from './common-column-ids';
 import SelectAllWithToggle from './Datagrid/DatagridSelectAllWithToggle';
 import { pkg } from '../../settings';
+import { useIsomorphicEffect } from '../../global/js/hooks';
 var blockClass = "".concat(pkg.prefix, "--datagrid__select-all");
 var useSelectAllToggle = function useSelectAllToggle(hooks) {
   useSelectAllWithToggleComponent(hooks);
@@ -37,11 +37,12 @@ var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(h
   hooks.useInstance.push(useInstance);
 };
 var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
-  var _useState = useState(window.innerWidth),
+  var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
-  useLayoutEffect(function () {
+  useIsomorphicEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }

package/es/components/Datagrid/useSelectRows.js

@@ -7,7 +7,7 @@ var _excluded = ["onChange", "title"];
 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) { _defineProperty(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; }
 /**
- * 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.
@@ -87,7 +87,7 @@ var SelectRow = function SelectRow(datagridState) {
     withStickyColumn = datagridState.withStickyColumn,
     dispatch = datagridState.dispatch,
     getRowId = datagridState.getRowId;
-  var _useState = useState(window.innerWidth),
+  var _useState = useState(typeof window !== 'undefined' ? window.innerWidth : ''),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];

package/es/components/Datagrid/utils/filterPropsForTesting.js

@@ -0,0 +1,150 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+
+import { handleFilterTagLabelText } from './handleFilterTagLabelText';
+export var generateDummyCheckboxes = Array(25).fill(null).map(function (_, index) {
+  return {
+    id: "".concat(index),
+    labelText: "Dummy checkbox ".concat(index + 1),
+    value: 'dummy-checkbox',
+    disabled: true
+  };
+});
+export var filterProps = function filterProps() {
+  var _Dropdown;
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$includeManyCheck = _ref.includeManyCheckboxes,
+    includeManyCheckboxes = _ref$includeManyCheck === void 0 ? false : _ref$includeManyCheck,
+    _ref$dropdownOnChange = _ref.dropdownOnChange,
+    dropdownOnChange = _ref$dropdownOnChange === void 0 ? function () {} : _ref$dropdownOnChange;
+  var checkboxList = [{
+    id: 'normal',
+    labelText: 'Normal',
+    value: 'normal'
+  }, {
+    id: 'minor-warning',
+    labelText: 'Minor warning',
+    value: 'minor-warning'
+  }, {
+    id: 'critical',
+    labelText: 'Critical',
+    value: 'critical'
+  }].concat(_toConsumableArray(includeManyCheckboxes ? generateDummyCheckboxes : []));
+  return {
+    autoHideFilters: includeManyCheckboxes ? false : true,
+    variation: 'panel',
+    panelIconDescription: 'Open filters',
+    sections: [{
+      categoryTitle: 'Category title',
+      hasAccordion: true,
+      filters: [{
+        filterLabel: 'Joined',
+        filter: {
+          type: 'date',
+          column: 'joined',
+          props: {
+            DatePicker: {
+              datePickerType: 'range'
+            },
+            DatePickerInput: {
+              start: {
+                id: 'date-picker-input-id-start',
+                placeholder: 'mm/dd/yyyy',
+                labelText: 'Joined start date'
+              },
+              end: {
+                id: 'date-picker-input-id-end',
+                placeholder: 'mm/dd/yyyy',
+                labelText: 'Joined end date'
+              }
+            }
+          }
+        }
+      }, {
+        filterLabel: 'Status',
+        filter: {
+          type: 'dropdown',
+          column: 'status',
+          props: {
+            Dropdown: (_Dropdown = {
+              id: 'marital-status-dropdown'
+            }, _defineProperty(_Dropdown, 'aria-label', 'Marital status dropdown'), _defineProperty(_Dropdown, "items", ['relationship', 'complicated', 'single']), _defineProperty(_Dropdown, "label", 'Marital status'), _defineProperty(_Dropdown, "titleText", 'Marital status'), _defineProperty(_Dropdown, "onChange", dropdownOnChange), _Dropdown)
+          }
+        }
+      }]
+    }, {
+      categoryTitle: 'Category title',
+      filters: [{
+        filterLabel: 'Role',
+        filter: {
+          type: 'radio',
+          column: 'role',
+          props: {
+            FormGroup: {
+              legendText: 'Role'
+            },
+            RadioButtonGroup: {
+              orientation: 'vertical',
+              legend: 'Role legend',
+              name: 'role-radio-button-group'
+            },
+            RadioButton: [{
+              id: 'developer',
+              labelText: 'Developer',
+              value: 'developer'
+            }, {
+              id: 'designer',
+              labelText: 'Designer',
+              value: 'designer'
+            }, {
+              id: 'researcher',
+              labelText: 'Researcher',
+              value: 'researcher'
+            }]
+          }
+        }
+      }, {
+        filterLabel: 'Visits',
+        filter: {
+          type: 'number',
+          column: 'visits',
+          props: {
+            NumberInput: {
+              min: 0,
+              id: 'visits-number-input',
+              invalidText: 'A valid value is required',
+              label: 'Visits',
+              placeholder: 'Type a number amount of visits'
+            }
+          }
+        }
+      }, {
+        filterLabel: 'Password strength',
+        filter: {
+          type: 'checkbox',
+          column: 'passwordStrength',
+          props: {
+            FormGroup: {
+              legendText: 'Password strength'
+            },
+            Checkbox: checkboxList
+          }
+        }
+      }]
+    }],
+    renderLabel: function renderLabel(key, value) {
+      return handleFilterTagLabelText(key, value);
+    },
+    renderDateLabel: function renderDateLabel(start, end) {
+      var startDateObj = new Date(start);
+      var endDateObj = new Date(end);
+      return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
+    }
+  };
+};

package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationDescription", "illustrationTheme", "link", "size", "subtitle", "title"];
 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) { _defineProperty(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; }
 /**
@@ -30,6 +30,7 @@ var componentName = 'ErrorEmptyState';
 export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,
+    illustrationDescription = _ref.illustrationDescription,
     illustrationTheme = _ref.illustrationTheme,
     link = _ref.link,
     _ref$size = _ref.size,
@@ -41,9 +42,9 @@ export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: cx(blockClass, className, "".concat(blockClass, "-type--error")),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ErrorIllustration, {
-    title: title,
     theme: illustrationTheme,
-    size: size
+    size: size,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,
@@ -77,6 +78,11 @@ ErrorEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 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) { _defineProperty(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; }
 /**
@@ -31,6 +31,7 @@ export var NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   var action = _ref.action,
     className = _ref.className,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -41,9 +42,9 @@ export var NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: cx(blockClass, className, "".concat(blockClass, "-type--noData")),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoDataIllustration, {
-    title: title,
     theme: illustrationTheme,
-    size: size
+    size: size,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,
@@ -77,6 +78,10 @@ NoDataEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * The alt text for empty state svg images.If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 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) { _defineProperty(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; }
 /**
@@ -31,6 +31,7 @@ export var NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   var action = _ref.action,
     className = _ref.className,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -41,9 +42,9 @@ export var NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: cx(blockClass, className, "".concat(blockClass, "-type--noTags")),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoTagsIllustration, {
-    title: title,
     theme: illustrationTheme,
-    size: size
+    size: size,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,
@@ -77,6 +78,10 @@ NoTagsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * The alt text for empty state svg images.If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 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) { _defineProperty(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; }
 /**
@@ -31,6 +31,7 @@ export var NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, re
   var action = _ref.action,
     className = _ref.className,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -41,9 +42,9 @@ export var NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, re
     className: cx(blockClass, className, "".concat(blockClass, "-type--notFound")),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotFoundIllustration, {
-    title: title,
     theme: illustrationTheme,
-    size: size
+    size: size,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,
@@ -77,6 +78,10 @@ NotFoundEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * The alt text for empty state svg images.If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark