@carbon/ibm-products 2.15.2 → 2.16.0

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -3,14 +3,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["onChange"];
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2023
- * 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.
  */
-// @flow
+
 import React, { useLayoutEffect, useState } from 'react';
 import { TableSelectAll } from '@carbon/react';
 import cx from 'classnames';
@@ -23,6 +22,7 @@ var SelectAll = function SelectAll(datagridState) {
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useLayoutEffect(function () {
+    /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -43,15 +43,15 @@ var SelectAll = function SelectAll(datagridState) {
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
     return /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__head-hidden-select-all"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+      className: cx("".concat(blockClass, "__head-hidden-select-all"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), /* istanbul ignore next */
+      isFirstColumnStickyLeft && windowSize > 671))
     });
   }
   var getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
   var _getProps = getProps(),
     onChange = _getProps.onChange,
     selectProps = _objectWithoutProperties(_getProps, _excluded);
-  var _ref = selectProps || {},
-    indeterminate = _ref.indeterminate;
+  var indeterminate = selectProps.indeterminate;
   var handleSelectAllChange = function handleSelectAllChange(event) {
     if (indeterminate) {
       return onChange === null || onChange === void 0 ? void 0 : onChange({
@@ -63,7 +63,8 @@ var SelectAll = function SelectAll(datagridState) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
+    isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/React.createElement(TableSelectAll, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: handleSelectAllChange,

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
@@ -9,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { VariableSizeList } from 'react-window';
 import { TableBody } from '@carbon/react';
 import { pkg } from '../../../settings';
@@ -40,19 +39,15 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     DatagridPagination = datagridState.DatagridPagination,
     page = datagridState.page,
     handleResize = datagridState.handleResize,
-    gridRef = datagridState.gridRef;
+    gridRef = datagridState.gridRef,
+    tableId = datagridState.tableId;
+
+  /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
     gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
   };
   useResizeObserver(gridRef, handleVirtualGridResize);
-  var syncScroll = function syncScroll(event) {
-    var virtualBody = event.target;
-    document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
-    var spacerColumn = document.querySelector(".".concat(blockClass, "__head-wrap thead th:last-child"));
-    spacerColumn.style.width = px(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
-  };
-
   useEffect(function () {
     handleResize();
   }, [handleResize]);
@@ -61,15 +56,30 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     listRef.current.resetAfterIndex(0);
   }
   var visibleRows = DatagridPagination && page || rows;
+  var testRef = useRef();
+
+  // Sync the scrollLeft position of the virtual body to the table header
+  useEffect(function () {
+    function handleScroll(event) {
+      var virtualBody = event.target;
+      document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
+      var spacerColumn = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap thead th:last-child"));
+      spacerColumn.style.width = px(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
+    }
+
+    var testRefValue = testRef.current;
+    testRefValue.addEventListener('scroll', handleScroll);
+    return function () {
+      testRefValue.removeEventListener('scroll', handleScroll);
+    };
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__head-wrap"),
     style: {
       width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
-    onScroll: syncScroll
-  }), /*#__PURE__*/React.createElement(VariableSizeList, {
+  }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, getTableBodyProps(), /*#__PURE__*/React.createElement(VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
     itemSize: function itemSize(index) {
@@ -78,6 +88,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     estimatedItemSize: rowHeight,
     onScroll: onScroll,
     innerRef: innerListRef,
+    outerRef: testRef,
     ref: listRef,
     className: "".concat(blockClass, "__virtual-scrollbar"),
     style: {

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -66,10 +66,10 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     if (destOverCol !== null && destOverCol !== void 0 && destOverCol.length && (_destOverCol$ = destOverCol[0]) !== null && _destOverCol$ !== void 0 && _destOverCol$.disabled) {
       return;
     }
-    var fromVisibleIndex = columns.findIndex(function (col) {
+    var fromVisibleIndex = updatedDragCols.findIndex(function (col) {
       return matchedColsById(col, active);
     });
-    var toVisibleIndex = columns.findIndex(function (col) {
+    var toVisibleIndex = updatedDragCols.findIndex(function (col) {
       return matchedColsById(col, over);
     });
     var colTitle = getNodeTextContent(updatedDragCols[fromVisibleIndex].Header);

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

@@ -15,6 +15,7 @@ var COLUMN_RESIZE_START = 'columnStartResizing';
 var COLUMN_RESIZING = 'columnResizing';
 var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
+var TOGGLE_ROW_SELECTED = 'toggleRowSelected';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
@@ -46,8 +47,43 @@ export var handleColumnResizingEvent = function handleColumnResizingEvent(dispat
     }
   });
 };
+export var handleToggleRowSelected = function handleToggleRowSelected(dispatch, rowData, isChecked) {
+  return dispatch({
+    type: TOGGLE_ROW_SELECTED,
+    payload: {
+      rowData: rowData,
+      isChecked: isChecked
+    }
+  });
+};
 export var stateReducer = function stateReducer(newState, action) {
   switch (action.type) {
+    case TOGGLE_ROW_SELECTED:
+      {
+        var _ref = action.payload || {},
+          rowData = _ref.rowData,
+          isChecked = _ref.isChecked;
+        if (!rowData) {
+          return;
+        }
+        if (isChecked) {
+          return _objectSpread(_objectSpread({}, newState), {}, {
+            selectedRowData: _objectSpread(_objectSpread({}, newState.selectedRowData), {}, _defineProperty({}, rowData.index, rowData))
+          });
+        }
+        if (rowData && !isChecked) {
+          var newData = _objectSpread({}, newState.selectedRowData);
+          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref2) {
+            var _ref3 = _slicedToArray(_ref2, 1),
+              key = _ref3[0];
+            return parseInt(key) !== parseInt(rowData.index);
+          }));
+          return _objectSpread(_objectSpread({}, newState), {}, {
+            selectedRowData: dataWithRemovedRow
+          });
+        }
+        return _objectSpread({}, newState);
+      }
     case INIT:
       {
         return _objectSpread(_objectSpread({}, newState), {}, {
@@ -56,27 +92,27 @@ export var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_START:
       {
-        var _ref = action.payload || {},
-          headerId = _ref.headerId;
+        var _ref4 = action.payload || {},
+          headerId = _ref4.headerId;
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: headerId
         });
       }
     case COLUMN_RESIZING:
       {
-        var _ref2 = action.payload || {},
-          _headerId = _ref2.headerId,
-          newWidth = _ref2.newWidth,
-          defaultWidth = _ref2.defaultWidth;
+        var _ref5 = action.payload || {},
+          _headerId = _ref5.headerId,
+          newWidth = _ref5.newWidth,
+          defaultWidth = _ref5.defaultWidth;
         var newColumnWidth = {};
         if (typeof _headerId === 'undefined') {
           return _objectSpread({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2),
-            _ = _ref4[0],
-            value = _ref4[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref6) {
+          var _ref7 = _slicedToArray(_ref6, 2),
+            _ = _ref7[0],
+            value = _ref7[1];
           return !isNaN(value);
         }));
         var headerIdArray = newState.columnResizing.headerIdWidths || [];
@@ -91,10 +127,10 @@ export var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_END:
       {
-        var _ref5 = action.payload || {},
-          onColResizeEnd = _ref5.onColResizeEnd,
-          _headerId2 = _ref5.headerId,
-          isKeyEvent = _ref5.isKeyEvent;
+        var _ref8 = action.payload || {},
+          onColResizeEnd = _ref8.onColResizeEnd,
+          _headerId2 = _ref8.headerId,
+          isKeyEvent = _ref8.isKeyEvent;
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;

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

@@ -45,13 +45,13 @@ export var DocsPage = function DocsPage() {
       description: "There is also an optional resize callback when resizing columns, allowing you to save the widths of columns that have been resized. The resize callback returns the column that was just resized and it's width, in addition to all of the columns that have been resized and their widths.",
       source: {
         language: 'jsx',
-        code: "\nuseDatagrid({\n  columns,\n  data,\n  onColResizeEnd: (currentColumn, allColumns) =>\n      console.log(currentColumn, allColumns),\n});\n          "
+        code: "\nuseDatagrid({\n  columns,\n  data,\n  onColResizeEnd: (currentColumn, allColumns) =>\n      console.log(currentColumn, allColumns),\n  resizerAriaLabel: 'Resize column',\n});\n          "
       }
     }, {
-      description: 'Disabling the resizable columns is possible by specifying `disableResizing: true` within the `useDatagrid` hook.',
+      description: 'Disabling the resizable columns is possible by specifying `disableResizing: true` within the `useDatagrid` hook. To pass in your own translated label for the column resizer, add the `resizerAriaLabel` property',
       source: {
         language: 'jsx',
-        code: "\nuseDatagrid({\n  columns,\n  data,\n  disableResizing: true,\n});\n          "
+        code: "\nuseDatagrid({\n  columns,\n  data,\n  disableResizing: true,\n  resizerAriaLabel: 'Resize column',\n});\n          "
       }
     }, {
       title: 'Rendering the table toolbar',

package/es/components/Datagrid/useDatagrid.js

@@ -32,6 +32,9 @@ var useDatagrid = function useDatagrid(params) {
   }
   var defaultEndPlugins = [usePagination, useRowSelect, useFlexResize, useFloatingScroll];
   var clientEndPlugins = params.endPlugins || [];
+  var defaultColumn = {
+    minWidth: 50
+  };
   var tableId = useMemo(function () {
     return uniqueId('datagrid-table-id');
   }, []);
@@ -41,7 +44,8 @@ var useDatagrid = function useDatagrid(params) {
   var tableState = useTable.apply(void 0, [_objectSpread(_objectSpread({
     tableId: tableId
   }, params), {}, {
-    stateReducer: stateReducer
+    stateReducer: stateReducer,
+    defaultColumn: defaultColumn
   })].concat(defaultPlugins, plugins, defaultEndPlugins, _toConsumableArray(clientEndPlugins)));
   return tableState;
 };

package/es/components/Datagrid/useOnRowClick.js

@@ -1,9 +1,8 @@
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020, 2023
- * 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.
  */
 
 import { pkg, carbon } from '../../settings';
@@ -43,7 +42,7 @@ var useOnRowClick = function useOnRowClick(hooks) {
       var onKeyDown = function onKeyDown(event) {
         var key = event.key;
         if (key === 'Enter') {
-          onClick();
+          onClick(event);
         }
       };
       return [props, {

package/es/components/Datagrid/useSelectRows.js

@@ -20,6 +20,7 @@ import { TableSelectRow } from '@carbon/react';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
 import { selectionColumnId } from './common-column-ids';
 import { pkg, carbon } from '../../settings';
+import { handleToggleRowSelected } from './Datagrid/addons/stateReducer';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var checkboxClass = "".concat(pkg.prefix, "--datagrid__checkbox-cell");
 var useSelectRows = function useSelectRows(hooks) {
@@ -77,7 +78,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 = useState(window.innerWidth),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
@@ -91,16 +93,17 @@ var SelectRow = function SelectRow(datagridState) {
       return window.removeEventListener('resize', updateSize);
     };
   }, []);
-  var onSelectHandler = function onSelectHandler(e) {
-    e.stopPropagation(); // avoid triggering onRowClick
+  var onSelectHandler = function onSelectHandler(event) {
+    event.stopPropagation(); // avoid triggering onRowClick
     if (radio) {
       toggleAllRowsSelected(false);
       if (onRadioSelect) {
         onRadioSelect(row);
       }
     }
-    onChange(e);
-    onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, e);
+    onChange(event);
+    onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, event);
+    handleToggleRowSelected(dispatch, row, event.target.checked);
   };
   var selectDisabled = isFetching || row.getRowProps().disabled;
   var _row$getToggleRowSele2 = row.getToggleRowSelectedProps(),

package/es/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;
   }
@@ -45,17 +44,16 @@ var getAriaPressedValue = function getAriaPressedValue(col) {
   if (!col) {
     return;
   }
-  var _ref3 = col || {},
-    isSorted = _ref3.isSorted;
+  var isSorted = col.isSorted;
   if (isSorted) {
     return 'true';
   }
   return 'false';
 };
 var useSortableColumns = function useSortableColumns(hooks) {
-  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref4) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
     var _instance$customizeCo;
-    var instance = _ref4.instance;
+    var instance = _ref2.instance;
     var onSort = instance.onSort,
       ascendingSortableLabelText = instance.ascendingSortableLabelText,
       descendingSortableLabelText = instance.descendingSortableLabelText,

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

@@ -48,7 +48,8 @@ export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ErrorIllustration, {
     theme: illustrationTheme,
-    size: size
+    size: size,
+    title: title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,

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

@@ -48,7 +48,8 @@ export var NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoTagsIllustration, {
     theme: illustrationTheme,
-    size: size
+    size: size,
+    title: title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,

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

@@ -48,7 +48,8 @@ export var NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, re
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotFoundIllustration, {
     theme: illustrationTheme,
-    size: size
+    size: size,
+    title: title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -48,7 +48,8 @@ export var NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_re
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotificationsIllustration, {
     size: size,
-    theme: illustrationTheme
+    theme: illustrationTheme,
+    title: title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -48,7 +48,8 @@ export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(UnauthorizedIllustration, {
     size: size,
-    theme: illustrationTheme
+    theme: illustrationTheme,
+    title: title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var ErrorIllustration = function ErrorIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
@@ -31,7 +32,7 @@ export var ErrorIllustration = function ErrorIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 38.9,
     y1: 77.08,
@@ -209,5 +210,6 @@ export var ErrorIllustration = function ErrorIllustration(_ref) {
 };
 ErrorIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark'])
+  theme: PropTypes.oneOf(['light', 'dark']),
+  title: PropTypes.string
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NoDataIllustration = function NoDataIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
@@ -31,7 +32,7 @@ export var NoDataIllustration = function NoDataIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 11.12,
     y1: 43.34,
@@ -172,5 +173,6 @@ export var NoDataIllustration = function NoDataIllustration(_ref) {
 };
 NoDataIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark'])
+  theme: PropTypes.oneOf(['light', 'dark']),
+  title: PropTypes.string
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NoTagsIllustration = function NoTagsIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
@@ -32,7 +33,7 @@ export var NoTagsIllustration = function NoTagsIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__c_dark_".concat(svgId),
     x1: 34.96,
     y1: 5.37,
@@ -479,5 +480,6 @@ export var NoTagsIllustration = function NoTagsIllustration(_ref) {
 };
 NoTagsIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark'])
+  theme: PropTypes.oneOf(['light', 'dark']),
+  title: PropTypes.string
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NotFoundIllustration = function NotFoundIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
@@ -31,7 +32,7 @@ export var NotFoundIllustration = function NotFoundIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 2.6,
     y1: -12.81,
@@ -356,5 +357,6 @@ export var NotFoundIllustration = function NotFoundIllustration(_ref) {
 };
 NotFoundIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark'])
+  theme: PropTypes.oneOf(['light', 'dark']),
+  title: PropTypes.string
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NotificationsIllustration = function NotificationsIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
@@ -31,7 +32,7 @@ export var NotificationsIllustration = function NotificationsIllustration(_ref)
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 30.05,
     y1: 54.31,
@@ -327,5 +328,6 @@ export var NotificationsIllustration = function NotificationsIllustration(_ref)
 };
 NotificationsIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark'])
+  theme: PropTypes.oneOf(['light', 'dark']),
+  title: PropTypes.string
 };