@carbon/ibm-products 2.25.0 → 2.26.0

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -12,10 +12,10 @@ import cx from '../../node_modules/classnames/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { clamp } from 'lodash';
+import { ArrowRight } from '@carbon/react/icons';
 import { ComposedModal, ModalHeader, ProgressIndicator, ProgressStep, ModalBody, ModalFooter, FlexGrid, Row, Column, Button } from '@carbon/react';
 import { Carousel } from '../Carousel/Carousel.js';
 import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia/SteppedAnimatedMedia.js';
-import { ArrowRight } from '../../node_modules/@carbon/icons-react/es/generated/bucket-0.js';
 
 var _excluded = ["children", "className", "closeIconDescription", "domainName", "hideProgressIndicator", "interstitialAriaLabel", "isFullScreen", "isOpen", "media", "nextButtonLabel", "onClose", "previousButtonLabel", "productName", "headerClassName", "headerTitle", "startButtonLabel", "skipButtonLabel"];
 

package/es/components/Tearsheet/TearsheetShell.js

@@ -16,6 +16,7 @@ import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js'
 import { usePrefix, ComposedModal, ModalHeader, Layer, ModalBody, Button } from '@carbon/react';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
+import { useFocus } from '../../global/js/hooks/useFocus.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 
 var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
@@ -81,9 +82,13 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var renderPortalUse = usePortalTarget(portalTargetIn);
   var localRef = useRef();
   var resizer = useRef(null);
+  var modalBodyRef = useRef(null);
   var modalRef = ref || localRef;
   var _useResizeObserver = useResizeObserver(resizer),
     width = _useResizeObserver.width;
+  var _useFocus = useFocus(modalRef),
+    firstElement = _useFocus.firstElement,
+    keyDownListener = _useFocus.keyDownListener;
   var wide = size === 'wide';
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
@@ -121,11 +126,16 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
-    var element = selectorPrimaryFocus ? modalRef.current.querySelector(selectorPrimaryFocus) : modalRef.current;
-    setTimeout(function () {
-      return element.focus();
-    }, 1);
+    firstElement === null || firstElement === void 0 || firstElement.focus();
   };
+  useEffect(function () {
+    if (open) {
+      // Focusing the first element
+      setTimeout(function () {
+        firstElement === null || firstElement === void 0 || firstElement.focus();
+      }, 0);
+    }
+  }, [open, firstElement]);
   useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
@@ -189,6 +199,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
       onFocus: handleFocus,
+      onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
       selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
@@ -216,6 +227,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     }, headerActions)), /*#__PURE__*/React__default.createElement(Wrap, {
       className: "".concat(bc, "__header-navigation")
     }, navigation)), /*#__PURE__*/React__default.createElement(Wrap, {
+      ref: modalBodyRef,
       element: ModalBody,
       className: "".concat(bc, "__body")
     }, /*#__PURE__*/React__default.createElement(Wrap, {

package/es/components/UserAvatar/UserAvatar.js

@@ -89,7 +89,6 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var SetItem = getItem(renderIcon);
   var renderUserAvatar = function renderUserAvatar() {
     return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-      tabIndex: 0,
       className: cx(blockClass,
       // Apply the block class to the main HTML element
       className, // Apply any supplied class names to the main HTML element.
@@ -100,7 +99,7 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         // example: [`${blockClass}__here-if-small`]: size === 'sm',
       }),
       ref: ref,
-      role: "button"
+      role: "img"
     }, getDevtoolsProps(componentName)), _SetItem || (_SetItem = /*#__PURE__*/React__default.createElement(SetItem, null)));
   };
   return SetItem && (tooltipText ? /*#__PURE__*/React__default.createElement(Tooltip, {

package/es/global/js/hooks/index.d.ts

@@ -9,4 +9,5 @@ export { useRetrieveStepData } from "./useRetrieveStepData";
 export { useValidCreateStepCount } from "./useValidCreateStepCount";
 export { useControllableState } from "./useControllableState";
 export { usePrefix } from "./usePrefix";
+export { useFocus } from "./useFocus";
 export { useNearestScroll, useWindowScroll } from "./useWindowScroll";

package/es/global/js/hooks/useFocus.d.ts

@@ -0,0 +1,11 @@
+export function useFocus(modalRef: any): {
+    firstElement: any;
+    lastElement: any;
+    allElements: any;
+    keyDownListener: (event: any) => void;
+    getFocusable: () => {
+        first: any;
+        last: any;
+        all: any;
+    };
+};

package/es/global/js/hooks/useFocus.js

@@ -0,0 +1,76 @@
+/**
+ * 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.
+ */
+
+import { usePrefix } from '@carbon/react';
+import { pkg } from '../../../settings.js';
+import { useCallback, useEffect } from 'react';
+
+var useFocus = function useFocus(modalRef) {
+  var carbonPrefix = usePrefix();
+  var tearsheetBaseClass = "".concat(pkg.prefix, "--tearsheet");
+  // Querying focusable element in the modal
+  // Query to exclude hidden elements in the modal from querySelectorAll() method
+  // feel free to include more if needed :)
+  var notQuery = ":not(.".concat(carbonPrefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbonPrefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"])");
+  // Queries to include element types button, input, select, textarea
+  var queryButton = "button".concat(notQuery);
+  var queryInput = "input".concat(notQuery);
+  var querySelect = "select".concat(notQuery);
+  var queryTextarea = "textarea".concat(notQuery);
+  var queryLink = "[href]".concat(notQuery);
+  // Final query
+  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea);
+  var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
+  var getFocusable = useCallback(function () {
+    // Selecting all focusable elements based on the above conditions
+    var focusableElements = modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelectorAll("".concat(query));
+    var first = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0];
+    var last = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[(focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) - 1];
+    var all = focusableElements;
+    return {
+      first: first,
+      last: last,
+      all: all
+    };
+  }, [modalEl, query]);
+  useEffect(function () {
+    getFocusable();
+  }, [getFocusable]);
+  var handleKeyDown = function handleKeyDown(event) {
+    // Checking whether the key is tab or not
+    if (event.key === 'Tab') {
+      // updating the focusable elements list
+      var _getFocusable = getFocusable(),
+        first = _getFocusable.first,
+        last = _getFocusable.last,
+        all = _getFocusable.all;
+      setTimeout(function () {
+        var _document, _document2;
+        if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
+          // Prevents the default "Tab" behavior
+          event.preventDefault();
+          // if the user press shift+tab and the current element not in focusable items
+          last === null || last === void 0 || last.focus();
+        } else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
+          event.preventDefault();
+          // user pressing tab key only then
+          // focusing the first element if the current element is not in focusable items
+          first === null || first === void 0 || first.focus();
+        }
+      }, 0);
+    }
+  };
+  return {
+    firstElement: getFocusable().first,
+    lastElement: getFocusable().last,
+    allElements: getFocusable().all,
+    keyDownListener: handleKeyDown,
+    getFocusable: getFocusable
+  };
+};
+
+export { useFocus };

package/lib/components/Cascade/Cascade.d.ts

@@ -1,3 +1,18 @@
+import React, { ReactNode } from 'react';
+interface CascadeProps {
+    children: ReactNode;
+    /**
+     * Specify an optional className to be applied to
+     * the container node.
+     */
+    className?: string;
+    /**
+     * Specifies whether or not to wrap the child content in a `<Grid />`.
+     * If this is set to true it's important that the children are being wrapped in rows in columns.
+     * Check the documentation for additional clarification.
+     */
+    grid?: boolean;
+}
 /**
 
 This pattern is intended for use with cards, tiles, or similarly styled
@@ -7,5 +22,7 @@ the page. It should not be used on a page if it is the secondary focus of the
 page as that will distract the user.
 
 */
-export let Cascade: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let Cascade: React.ForwardRefExoticComponent<CascadeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/Cascade/Cascade.js

@@ -61,16 +61,19 @@ exports.Cascade = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   if (grid) {
     var colIdx = 0;
     var gridElm = React__default["default"].Children.map(children, function (row) {
-      var cols = React__default["default"].Children.map(row.props.children, function (col) {
-        colIdx = colIdx + 1;
-        var colClassnames = index["default"](col.props.className, "".concat(blockClass, "__col"), "".concat(blockClass, "__col-").concat(colIdx));
-        return /*#__PURE__*/React__default["default"].cloneElement(col, {
-          className: colClassnames
+      if ( /*#__PURE__*/React__default["default"].isValidElement(row)) {
+        var cols = React__default["default"].Children.map(row === null || row === void 0 ? void 0 : row.props.children, function (col) {
+          colIdx = colIdx + 1;
+          var colClassnames = index["default"](col.props.className, "".concat(blockClass, "__col"), "".concat(blockClass, "__col-").concat(colIdx));
+          return /*#__PURE__*/React__default["default"].cloneElement(col, {
+            className: colClassnames
+          });
         });
-      });
-      return /*#__PURE__*/React__default["default"].cloneElement(row, {
-        children: cols
-      });
+        return /*#__PURE__*/React__default["default"].cloneElement(row, {
+          children: cols
+        });
+      }
+      return children;
     });
     return /*#__PURE__*/React__default["default"].createElement("div", props, /*#__PURE__*/React__default["default"].createElement(react.Grid, null, gridElm));
   }

package/lib/components/Coachmark/CoachmarkTagline.js

@@ -13,12 +13,11 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var index$1 = require('../../node_modules/prop-types/index.js');
 var index = require('../../node_modules/classnames/index.js');
+var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
 var context = require('./utils/context.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
-var bucket8 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-8.js');
-var bucket3 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -59,14 +58,14 @@ exports.CoachmarkTagline = /*#__PURE__*/React__default["default"].forwardRef(fun
     type: "button"
   }, coachmark.buttonProps), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__idea")
-  }, _Idea || (_Idea = /*#__PURE__*/React__default["default"].createElement(bucket8.Idea, {
+  }, _Idea || (_Idea = /*#__PURE__*/React__default["default"].createElement(icons.Idea, {
     size: 16
   }))), /*#__PURE__*/React__default["default"].createElement("div", null, title)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "--close-btn-container")
   }, /*#__PURE__*/React__default["default"].createElement(react.Button, {
     kind: "ghost",
     size: "sm",
-    renderIcon: bucket3.Close,
+    renderIcon: icons.Close,
     iconDescription: closeIconDescription,
     hasIconOnly: true,
     className: "".concat(blockClass, "--close-btn"),

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -14,12 +14,12 @@ var React = require('react');
 var pconsole = require('../../global/js/utils/pconsole.js');
 var index$1 = require('../../node_modules/prop-types/index.js');
 var index = require('../../node_modules/classnames/index.js');
+var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var reactDom = require('react-dom');
 var CoachmarkHeader = require('../Coachmark/CoachmarkHeader.js');
-var bucket8 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-8.js');
 var SteppedAnimatedMedia = require('../SteppedAnimatedMedia/SteppedAnimatedMedia.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -82,7 +82,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: "".concat(overlayClass, "__body")
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(overlayClass, "-element")
-  }, !media && /*#__PURE__*/React__default["default"].createElement(bucket8.Idea, {
+  }, !media && /*#__PURE__*/React__default["default"].createElement(icons.Idea, {
     size: 20,
     className: "".concat(blockClass, "__icon-idea")
   }), media && (media.render ? media.render() : /*#__PURE__*/React__default["default"].createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -18,12 +18,13 @@ var commonColumnIds = require('../common-column-ids.js');
 var settings = require('../../../settings.js');
 var stateReducer = require('./addons/stateReducer.js');
 var getNodeTextContent = require('../../../global/js/utils/getNodeTextContent.js');
-var ColumnHeaderSlug = require('./addons/Slug/ColumnHeaderSlug.js');
+var DatagridSlug = require('./addons/Slug/DatagridSlug.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var _th;
 var _excluded = ["role"],
   _excluded2 = ["className", "role"],
   _excluded3 = ["role", "className"];
@@ -94,7 +95,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
 };
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var resizerAriaLabel = datagridState.resizerAriaLabel,
-    isTableSortable = datagridState.isTableSortable;
+    isTableSortable = datagridState.isTableSortable,
+    rows = datagridState.rows;
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   React.useEffect(function () {
@@ -140,14 +142,21 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     if (isTableSortable) {
       return;
     }
-    return /*#__PURE__*/React__default["default"].createElement(ColumnHeaderSlug.ColumnHeaderSlug, {
+    return /*#__PURE__*/React__default["default"].createElement(DatagridSlug.DatagridSlug, {
       slug: slug
     });
   };
+  var foundAIRow = rows.some(function (r) {
+    var _r$original;
+    return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
+  });
   return /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({}, headerGroupProps, {
     className: index["default"]("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
-  }), datagridState.headers.filter(function (_ref3) {
+  }), foundAIRow ? _th || (_th = /*#__PURE__*/React__default["default"].createElement("th", {
+    scope: "col",
+    "aria-hidden": "false"
+  })) : null, datagridState.headers.filter(function (_ref3) {
     var isVisible = _ref3.isVisible;
     return isVisible;
   }).map(function (header, index$1) {

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -16,6 +16,7 @@ var layout = require('@carbon/layout');
 var commonColumnIds = require('../common-column-ids.js');
 var index = require('../../../node_modules/classnames/index.js');
 var settings = require('../../../settings.js');
+var DatagridSlug = require('./addons/Slug/DatagridSlug.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,7 +36,9 @@ var rowHeights = {
 
 // eslint-disable-next-line react/prop-types
 var DatagridRow = function DatagridRow(datagridState) {
+  var _row$original, _row$original2;
   var row = datagridState.row,
+    rows = datagridState.rows,
     rowSize = datagridState.rowSize,
     withNestedRows = datagridState.withNestedRows,
     prepareRow = datagridState.prepareRow,
@@ -117,6 +120,10 @@ var DatagridRow = function DatagridRow(datagridState) {
   var _row$getRowProps = row.getRowProps();
     _row$getRowProps.role;
     var rowProps = _rollupPluginBabelHelpers.objectWithoutProperties(_row$getRowProps, _excluded);
+  var foundAIRow = rows.some(function (r) {
+    var _r$original;
+    return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
+  });
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
     key: key
   }, /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({
@@ -128,7 +135,13 @@ var DatagridRow = function DatagridRow(datagridState) {
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }, setAdditionalRowProps()), row.cells.map(function (cell, index$1) {
+  }, setAdditionalRowProps()), foundAIRow ? row !== null && row !== void 0 && (_row$original = row.original) !== null && _row$original !== void 0 && _row$original.slug ? /*#__PURE__*/React__default["default"].createElement("td", {
+    className: "".concat(blockClass, "__table-row-ai-enabled")
+  }, /*#__PURE__*/React__default["default"].createElement(DatagridSlug.DatagridSlug, {
+    slug: row === null || row === void 0 || (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.slug
+  })) : /*#__PURE__*/React__default["default"].createElement("td", {
+    className: "".concat(blockClass, "__table-row-ai-spacer")
+  }) : null, row.cells.map(function (cell, index$1) {
     var _cell$column, _content$props;
     var cellProps = cell.getCellProps();
     // eslint-disable-next-line no-unused-vars

package/lib/components/Datagrid/Datagrid/addons/Slug/DatagridSlug.d.ts

@@ -0,0 +1,2 @@
+export const DatagridSlug: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/Datagrid/Datagrid/addons/Slug/{ColumnHeaderSlug.js → DatagridSlug.js}

@@ -16,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ColumnHeaderSlug = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var DatagridSlug = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var slug = _ref.slug;
   if (slug && /*#__PURE__*/React.isValidElement(slug)) {
     var normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
@@ -25,13 +25,13 @@ var ColumnHeaderSlug = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
     return normalizedSlug;
   }
-  return;
+  return null;
 });
-ColumnHeaderSlug.propTypes = {
+DatagridSlug.propTypes = {
   /**
    * Specify the AI slug to be displayed
    */
   slug: index["default"].node
 };
 
-exports.ColumnHeaderSlug = ColumnHeaderSlug;
+exports.DatagridSlug = DatagridSlug;

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

@@ -93,7 +93,7 @@ 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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
             selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
@@ -112,7 +112,7 @@ var stateReducer = function stateReducer(newState, action) {
         }
         if (_isChecked) {
           return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
-            selectedRowData: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState.selectedRowData), {}, _rollupPluginBabelHelpers.defineProperty({}, _getRowId(rowData, rowData.index), rowData))
+            selectedRowData: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState.selectedRowData), {}, _rollupPluginBabelHelpers.defineProperty({}, _getRowId(rowData.original, rowData.index), rowData.original))
           });
         }
         if (rowData && !_isChecked) {

package/lib/components/Datagrid/useSelectAllToggle.js

@@ -44,7 +44,7 @@ var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(h
   hooks.useInstance.push(useInstance);
 };
 var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
-  var _useState = React.useState(window.innerWidth),
+  var _useState = React.useState(typeof window !== 'undefined' ? window.innerWidth : ''),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];

package/lib/components/Datagrid/useSortableColumns.js

@@ -16,7 +16,7 @@ var settings = require('../../settings.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var DatagridSelectAll = require('./Datagrid/DatagridSelectAll.js');
-var ColumnHeaderSlug = require('./Datagrid/addons/Slug/ColumnHeaderSlug.js');
+var DatagridSlug = require('./Datagrid/addons/Slug/DatagridSlug.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -115,7 +115,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
           kind: "ghost",
           renderIcon: function renderIcon(props) {
             var _headerProp$column;
-            return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ColumnHeaderSlug.ColumnHeaderSlug, {
+            return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DatagridSlug.DatagridSlug, {
               slug: headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.slug
             }), icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props));
           },

package/lib/components/EmptyStates/EmptyStateContent.d.ts

@@ -112,7 +112,7 @@ export namespace EmptyStateContent {
             "aria-posinset"?: React.Validator<number | null | undefined> | undefined;
             "aria-pressed"?: React.Validator<boolean | "true" | "false" | "mixed" | null | undefined> | undefined;
             "aria-readonly"?: React.Validator<(boolean | "true" | "false") | null | undefined> | undefined;
-            "aria-relevant"?: React.Validator<"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | null | undefined> | undefined;
+            "aria-relevant"?: React.Validator<"all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | null | undefined> | undefined;
             "aria-required"?: React.Validator<(boolean | "true" | "false") | null | undefined> | undefined;
             "aria-roledescription"?: React.Validator<string | null | undefined> | undefined;
             "aria-rowcount"?: React.Validator<number | null | undefined> | undefined;

package/lib/components/FullPageError/FullPageError.js

@@ -17,13 +17,14 @@ var react = require('@carbon/react');
 var ErrorGenericSVG = require('./assets/ErrorGenericSVG.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
+var Error404SVG = require('./assets/Error404SVG.js');
+var Error403SVG = require('./assets/Error403SVG.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _br;
-var _excluded = ["children", "className", "description", "errorLabel", "title"];
+var _excluded = ["children", "className", "description", "errorLabel", "kind", "title"];
 
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
@@ -44,9 +45,9 @@ var componentName = 'FullPageError';
 // or assumption when a prop is not supplied.
 
 // Default values for props
-// const defaults = {
-//   /* TODO: add defaults for relevant props if needed */
-// };
+var defaults = {
+  kind: 'custom'
+};
 
 /**
  * TODO: A description of the component.
@@ -56,8 +57,33 @@ exports.FullPageError = /*#__PURE__*/React__default["default"].forwardRef(functi
     className = _ref.className,
     description = _ref.description,
     errorLabel = _ref.errorLabel,
+    _ref$kind = _ref.kind,
+    kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var errorData = {
+    403: {
+      title: 'Access denied',
+      description: 'You are not authorized to access the requested page. Please verify that you are logged in to the hosting environment and your access permissions are correct.',
+      svg: /*#__PURE__*/React__default["default"].createElement(Error403SVG.Error403SVG, {
+        className: index["default"]("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-403"))
+      })
+    },
+    404: {
+      title: 'Page not found',
+      description: 'The page you requested has moved or is unavailable, or the specified URL is not valid. Please check the URL or search the site for the requested content.',
+      svg: /*#__PURE__*/React__default["default"].createElement(Error404SVG.Error404SVG, {
+        className: index["default"]("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-404"))
+      })
+    },
+    custom: {
+      title: title,
+      description: description,
+      svg: /*#__PURE__*/React__default["default"].createElement(ErrorGenericSVG.ErrorGenericSVG, {
+        className: index["default"]("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-custom"))
+      })
+    }
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: index["default"](blockClass,
     // Apply the block class to the main HTML element
@@ -83,20 +109,15 @@ exports.FullPageError = /*#__PURE__*/React__default["default"].forwardRef(functi
     className: "".concat(blockClass, "__error-title")
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(blockClass, "__error-label")
-  }, "\u21B3 ", errorLabel), _br || (_br = /*#__PURE__*/React__default["default"].createElement("br", null)), /*#__PURE__*/React__default["default"].createElement("span", null, title)), /*#__PURE__*/React__default["default"].createElement("p", {
+  }, "\u21B3 ", kind === 'custom' ? errorLabel : "Error ".concat(kind)), /*#__PURE__*/React__default["default"].createElement("span", null, errorData[kind].title)), /*#__PURE__*/React__default["default"].createElement("p", {
     className: "".concat(blockClass, "__description")
-  }, description), children), /*#__PURE__*/React__default["default"].createElement(react.Column, {
+  }, description || errorData[kind].description), children), /*#__PURE__*/React__default["default"].createElement(react.Column, {
     sm: 4,
     md: 5,
     lg: 10
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      display: 'flex',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(ErrorGenericSVG.ErrorGenericSVG, {
-    className: "".concat(blockClass, "__error-svg")
-  }))))));
+    className: "".concat(blockClass, "__error-svg-container")
+  }, errorData[kind].svg)))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -119,13 +140,18 @@ exports.FullPageError.propTypes = {
    */
   className: index$1["default"].string,
   /**
-   * String that will provide the description for the error code
+   * String that will provide the description for the error code. <br/>
+   * This is optional for 403 and 404 kinds, and passing this would override their default descriptions.
    */
   description: index$1["default"].string.isRequired,
   /**
    * String that will describe the error that occurred
    */
   errorLabel: index$1["default"].string.isRequired,
+  /**
+   * The kind of error page to be displayed, default is custom
+   */
+  kind: index$1["default"].oneOf(['custom', '403', '404']),
   /**
    * This will be for the main title of the FullPageError component
    */

package/lib/components/FullPageError/assets/Error403SVG.d.ts

@@ -0,0 +1,9 @@
+export function Error403SVG({ className }: {
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace Error403SVG {
+    namespace propTypes {
+        export { string as className };
+    }
+}
+import { string } from 'prop-types';