@carbon/ibm-products 2.25.0 → 2.27.0

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -6,7 +6,7 @@
  */
 
 import { slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useEffect, useState } from 'react';
+import React__default, { useEffect, useState, isValidElement } from 'react';
 import cx from '../../../node_modules/classnames/index.js';
 import { TableRow, TableHeader } from '@carbon/react';
 import { px } from '@carbon/layout';
@@ -14,8 +14,9 @@ import { selectionColumnId } from '../common-column-ids.js';
 import { pkg } from '../../../settings.js';
 import { handleColumnResizeEndEvent, handleColumnResizingEvent } from './addons/stateReducer.js';
 import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent.js';
-import { ColumnHeaderSlug } from './addons/Slug/ColumnHeaderSlug.js';
+import { DatagridSlug } from './addons/Slug/DatagridSlug.js';
 
+var _th;
 var _excluded = ["role"],
   _excluded2 = ["className", "role"],
   _excluded3 = ["role", "className"];
@@ -41,7 +42,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
     minWidth = _ref.minWidth,
     dispatch = _ref.dispatch,
     onColResizeEnd = _ref.onColResizeEnd,
-    resizerAriaLabel = _ref.resizerAriaLabel;
+    resizerAriaLabel = _ref.resizerAriaLabel,
+    isFetching = _ref.isFetching;
   // eslint-disable-next-line no-unused-vars
   resizerProps.role;
     var headerProps = _objectWithoutProperties(resizerProps, _excluded);
@@ -79,14 +81,17 @@ var ResizeHeader = function ResizeHeader(_ref) {
     className: "".concat(blockClass, "__col-resizer-range"),
     type: "range",
     defaultValue: originalCol.width,
-    "aria-label": resizerAriaLabel || 'Resize column'
+    "aria-label": resizerAriaLabel || 'Resize column',
+    disabled: isFetching
   })), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(blockClass, "__col-resize-indicator")
   }));
 };
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var resizerAriaLabel = datagridState.resizerAriaLabel,
-    isTableSortable = datagridState.isTableSortable;
+    isTableSortable = datagridState.isTableSortable,
+    rows = datagridState.rows,
+    isFetching = datagridState.isFetching;
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   useEffect(function () {
@@ -132,14 +137,21 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     if (isTableSortable) {
       return;
     }
-    return /*#__PURE__*/React__default.createElement(ColumnHeaderSlug, {
+    return /*#__PURE__*/React__default.createElement(DatagridSlug, {
       slug: slug
     });
   };
+  var foundAIRow = rows.some(function (r) {
+    var _r$original;
+    return /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
+  });
   return /*#__PURE__*/React__default.createElement(TableRow, _extends({}, headerGroupProps, {
     className: cx("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
-  }), datagridState.headers.filter(function (_ref3) {
+  }), foundAIRow ? _th || (_th = /*#__PURE__*/React__default.createElement("th", {
+    scope: "col",
+    "aria-hidden": "false"
+  })) : null, datagridState.headers.filter(function (_ref3) {
     var isVisible = _ref3.isVisible;
     return isVisible;
   }).map(function (header, index) {
@@ -180,7 +192,8 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       minWidth: minWidth,
       dispatch: dispatch,
       onColResizeEnd: onColResizeEnd,
-      resizerAriaLabel: resizerAriaLabel
+      resizerAriaLabel: resizerAriaLabel,
+      isFetching: isFetching
     }));
   }));
 };

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -6,12 +6,13 @@
  */
 
 import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { isValidElement } from 'react';
 import { TableRow, SkeletonText, TableCell } from '@carbon/react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids.js';
 import cx from '../../../node_modules/classnames/index.js';
 import { pkg, carbon } from '../../../settings.js';
+import { DatagridSlug } from './addons/Slug/DatagridSlug.js';
 
 var _SkeletonText;
 var _excluded = ["role"],
@@ -27,7 +28,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,
@@ -109,6 +112,10 @@ var DatagridRow = function DatagridRow(datagridState) {
   var _row$getRowProps = row.getRowProps();
     _row$getRowProps.role;
     var rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
+  var foundAIRow = rows.some(function (r) {
+    var _r$original;
+    return /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
+  });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
     key: key
   }, /*#__PURE__*/React__default.createElement(TableRow, _extends({
@@ -120,7 +127,13 @@ var DatagridRow = function DatagridRow(datagridState) {
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }, setAdditionalRowProps()), row.cells.map(function (cell, index) {
+  }, setAdditionalRowProps()), foundAIRow ? row !== null && row !== void 0 && (_row$original = row.original) !== null && _row$original !== void 0 && _row$original.slug ? /*#__PURE__*/React__default.createElement("td", {
+    className: "".concat(blockClass, "__table-row-ai-enabled")
+  }, /*#__PURE__*/React__default.createElement(DatagridSlug, {
+    slug: row === null || row === void 0 || (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.slug
+  })) : /*#__PURE__*/React__default.createElement("td", {
+    className: "".concat(blockClass, "__table-row-ai-spacer")
+  }) : null, row.cells.map(function (cell, index) {
     var _cell$column, _content$props;
     var cellProps = cell.getCellProps();
     // eslint-disable-next-line no-unused-vars

package/es/components/Datagrid/Datagrid/DatagridToolbar.d.ts

@@ -1,2 +1,11 @@
 export default DatagridToolbar;
-declare function DatagridToolbar(datagridState: any): import("react/jsx-runtime").JSX.Element | null;
+declare function DatagridToolbar({ ariaToolbarLabel, ...datagridState }: {
+    [x: string]: any;
+    ariaToolbarLabel: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace DatagridToolbar {
+    namespace propTypes {
+        let ariaToolbarLabel: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -5,14 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useEffect } from 'react';
+import PropTypes from '../../../node_modules/prop-types/index.js';
 import { TableToolbar, TableBatchActions, TableBatchAction, MenuButton, MenuItem } from '@carbon/react';
 import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver.js';
 import { pkg, carbon } from '../../../settings.js';
 import cx from '../../../node_modules/classnames/index.js';
 import { handleSelectAllRowData } from './addons/stateReducer.js';
 
+var _excluded = ["ariaToolbarLabel"];
 var blockClass = "".concat(pkg.prefix, "--datagrid__table-toolbar");
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
   var _useState = useState(false),
@@ -107,6 +109,12 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     }
   };
   var onCancelHandler = function onCancelHandler() {
+    handleSelectAllRowData({
+      dispatch: dispatch,
+      rows: [],
+      getRowId: getRowId,
+      isChecked: false
+    });
     toggleAllRowsSelected(false);
     setGlobalFilter(null);
   };
@@ -144,7 +152,9 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     }
   })), renderBatchActionOverflow());
 };
-var DatagridToolbar = function DatagridToolbar(datagridState) {
+var DatagridToolbar = function DatagridToolbar(_ref2) {
+  var ariaToolbarLabel = _ref2.ariaToolbarLabel,
+    datagridState = _objectWithoutProperties(_ref2, _excluded);
   var ref = useRef(null);
   var _useResizeObserver = useResizeObserver(ref),
     width = _useResizeObserver.width;
@@ -156,9 +166,16 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   return batchActions && DatagridActions ? /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     className: cx([blockClass, "".concat(blockClass, "--").concat(getRowHeight)])
-  }, /*#__PURE__*/React__default.createElement(TableToolbar, null, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(TableToolbar, {
+    "aria-label": ariaToolbarLabel
+  }, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React__default.createElement("div", {
     className: blockClass
-  }, /*#__PURE__*/React__default.createElement(TableToolbar, null, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+  }, /*#__PURE__*/React__default.createElement(TableToolbar, {
+    "aria-label": ariaToolbarLabel
+  }, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+};
+DatagridToolbar.propTypes = {
+  ariaToolbarLabel: PropTypes.string
 };
 var DatagridToolbar$1 = DatagridToolbar;
 

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

@@ -6,9 +6,9 @@
  */
 
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { createContext, useState } from 'react';
+import React__default, { createContext, useState, useReducer } from 'react';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
-import { DROPDOWN, RADIO, NUMBER, DATE, CHECKBOX, CLEAR_SINGLE_FILTER } from './constants.js';
+import { DROPDOWN, RADIO, NUMBER, DATE, CHECKBOX, SAVED_FILTERS, CLEAR_SINGLE_FILTER } from './constants.js';
 
 var FilterContext = /*#__PURE__*/createContext();
 var EventEmitter = {
@@ -139,22 +139,45 @@ var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLa
   });
   return tags;
 };
-var FilterProvider = function FilterProvider(_ref3) {
-  var children = _ref3.children,
-    filters = _ref3.filters,
-    filterProps = _ref3.filterProps;
-  var _ref4 = filterProps || {},
-    renderDateLabel = _ref4.renderDateLabel;
+var filteringReducer = function filteringReducer(state, action) {
+  switch (action.type) {
+    case SAVED_FILTERS:
+      {
+        var _ref3 = action.payload || {},
+          savedFilters = _ref3.savedFilters;
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          savedFilters: savedFilters
+        });
+      }
+    default:
+      return state;
+  }
+};
+var FilterProvider = function FilterProvider(_ref4) {
+  var children = _ref4.children,
+    filters = _ref4.filters,
+    filterProps = _ref4.filterProps;
+  var _ref5 = filterProps || {},
+    renderDateLabel = _ref5.renderDateLabel;
   var filterTags = prepareFiltersForTags(filters, renderDateLabel);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     panelOpen = _useState2[0],
     setPanelOpen = _useState2[1];
+  var initialState = {
+    savedFilters: []
+  };
+  var _useReducer = useReducer(filteringReducer, initialState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
   var value = {
     filterTags: filterTags,
     EventEmitter: EventEmitter,
     panelOpen: panelOpen,
-    setPanelOpen: setPanelOpen
+    setPanelOpen: setPanelOpen,
+    state: state,
+    dispatch: dispatch
   };
   return /*#__PURE__*/React__default.createElement(FilterContext.Provider, {
     value: value

package/es/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts

@@ -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.
@@ -22,3 +22,5 @@ export const CLEAR_SINGLE_FILTER: "clearSingleFilter";
 /** Constants for panel dimensions */
 export const PANEL_WIDTH: 320;
 export const ACTION_SET_HEIGHT: 64;
+/** Constants for local reducer */
+export const SAVED_FILTERS: "savedFilters";

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

@@ -28,4 +28,7 @@ var CLEAR_SINGLE_FILTER = 'clearSingleFilter';
 var PANEL_WIDTH = 320;
 var ACTION_SET_HEIGHT = 64;
 
-export { ACTION_SET_HEIGHT, BATCH, CHECKBOX, CLEAR_FILTERS, CLEAR_SINGLE_FILTER, DATE, DROPDOWN, FLYOUT, INSTANT, NUMBER, PANEL, PANEL_WIDTH, RADIO };
+/** Constants for local reducer */
+var SAVED_FILTERS = 'savedFilters';
+
+export { ACTION_SET_HEIGHT, BATCH, CHECKBOX, CLEAR_FILTERS, CLEAR_SINGLE_FILTER, DATE, DROPDOWN, FLYOUT, INSTANT, NUMBER, PANEL, PANEL_WIDTH, RADIO, SAVED_FILTERS };

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

@@ -6,11 +6,12 @@
  */
 
 import { slicedToArray as _slicedToArray, extends as _extends, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { DROPDOWN, RADIO, CHECKBOX, NUMBER, DATE, BATCH, INSTANT, PANEL } from '../constants.js';
+import { DROPDOWN, RADIO, CHECKBOX, NUMBER, DATE, BATCH, SAVED_FILTERS, INSTANT, PANEL } from '../constants.js';
 import { Dropdown, FormGroup, RadioButtonGroup, RadioButton, NumberInput, DatePicker, DatePickerInput, Layer, Checkbox } from '@carbon/react';
-import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useContext, useState, useRef, useCallback, useEffect } from 'react';
 import OverflowCheckboxes from '../OverflowCheckboxes.js';
 import { getInitialStateFromFilters } from '../utils.js';
+import { FilterContext } from '../FilterProvider.js';
 import { handleCheckboxChange } from '../handleCheckboxChange.js';
 import { usePreviousValue } from '../../../../../../global/js/hooks/usePreviousValue.js';
 
@@ -25,6 +26,10 @@ var useFilters = function useFilters(_ref) {
     panelOpen = _ref.panelOpen,
     autoHideFilters = _ref.autoHideFilters,
     isFetching = _ref.isFetching;
+  var _useContext = useContext(FilterContext),
+    state = _useContext.state,
+    localDispatch = _useContext.dispatch;
+  var savedFilters = state.savedFilters;
   /** State */
   var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -122,6 +127,16 @@ var useFilters = function useFilters(_ref) {
       filterCopy.splice(index, 1);
     }
     setFiltersObjectArray(filterCopy);
+
+    // Dispatch action from local filter context to track filters in order
+    // to keep history if `isFetching` becomes true. If so, react-table
+    // clears all filter history
+    localDispatch({
+      type: SAVED_FILTERS,
+      payload: {
+        savedFilters: filterCopy
+      }
+    });
     if (updateMethod === INSTANT) {
       setAllFilters(filterCopy);
     }
@@ -312,10 +327,27 @@ var useFilters = function useFilters(_ref) {
       setAllFilters(JSON.parse(prevFiltersObjectArrayRef.current));
       setFetchingReset(true);
     }
+    if (isFetching && fetchingReset) {
+      var cleanFilters = function cleanFilters(originalFilterState) {
+        var copy = _objectSpread2({}, originalFilterState);
+        var updatedFilters = savedFilters.map(function (f) {
+          if (Object.hasOwn(copy, f.id)) {
+            copy[f.id] = f;
+            return copy;
+          }
+          return copy;
+        });
+        return updatedFilters[0];
+      };
+      setFiltersObjectArray(savedFilters);
+      var filterStateCopy = cleanFilters(filtersState);
+      setFiltersState(filterStateCopy);
+    }
     if (!isFetching) {
       setFetchingReset(false);
     }
-  }, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset, savedFilters, filtersObjectArray]);
   var cancel = function cancel() {
     // Reverting to previous filters only applies when using batch actions
     if (updateMethod === BATCH) {

package/es/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/es/components/Datagrid/Datagrid/addons/Slug/{ColumnHeaderSlug.js → DatagridSlug.js}

@@ -8,7 +8,7 @@
 import React__default, { forwardRef, isValidElement } from 'react';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
 
-var ColumnHeaderSlug = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var DatagridSlug = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var slug = _ref.slug;
   if (slug && /*#__PURE__*/isValidElement(slug)) {
     var normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
@@ -17,13 +17,13 @@ var ColumnHeaderSlug = /*#__PURE__*/forwardRef(function (_ref, ref) {
     });
     return normalizedSlug;
   }
-  return;
+  return null;
 });
-ColumnHeaderSlug.propTypes = {
+DatagridSlug.propTypes = {
   /**
    * Specify the AI slug to be displayed
    */
   slug: PropTypes.node
 };
 
-export { ColumnHeaderSlug };
+export { DatagridSlug };

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

@@ -89,7 +89,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 _objectSpread2(_objectSpread2({}, newState), {}, {
             selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
@@ -108,7 +108,7 @@ var stateReducer = function stateReducer(newState, action) {
         }
         if (_isChecked) {
           return _objectSpread2(_objectSpread2({}, newState), {}, {
-            selectedRowData: _objectSpread2(_objectSpread2({}, newState.selectedRowData), {}, _defineProperty({}, _getRowId(rowData, rowData.index), rowData))
+            selectedRowData: _objectSpread2(_objectSpread2({}, newState.selectedRowData), {}, _defineProperty({}, _getRowId(rowData.original, rowData.index), rowData.original))
           });
         }
         if (rowData && !_isChecked) {
@@ -116,7 +116,7 @@ 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 _objectSpread2(_objectSpread2({}, newState), {}, {
             selectedRowData: dataWithRemovedRow

package/es/components/Datagrid/useSelectAllToggle.js

@@ -6,11 +6,12 @@
  */
 
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useState } from 'react';
 import cx from '../../node_modules/classnames/index.js';
 import { selectionColumnId } from './common-column-ids.js';
 import SelectAllWithToggle from './Datagrid/DatagridSelectAllWithToggle.js';
 import { pkg } from '../../settings.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid__select-all");
 var useSelectAllToggle = function useSelectAllToggle(hooks) {
@@ -36,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/useSortableColumns.js

@@ -12,7 +12,7 @@ import { pkg, carbon } from '../../settings.js';
 import { Button } from '@carbon/react';
 import { ArrowsVertical, ArrowDown, ArrowUp } from '@carbon/react/icons';
 import { SelectAll } from './Datagrid/DatagridSelectAll.js';
-import { ColumnHeaderSlug } from './Datagrid/addons/Slug/ColumnHeaderSlug.js';
+import { DatagridSlug } from './Datagrid/addons/Slug/DatagridSlug.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var ordering = {
@@ -107,7 +107,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
           kind: "ghost",
           renderIcon: function renderIcon(props) {
             var _headerProp$column;
-            return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColumnHeaderSlug, {
+            return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(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/es/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/es/components/FullPageError/FullPageError.js

@@ -13,9 +13,10 @@ import { Grid, Column } from '@carbon/react';
 import { ErrorGenericSVG } from './assets/ErrorGenericSVG.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
+import { Error404SVG } from './assets/Error404SVG.js';
+import { Error403SVG } from './assets/Error403SVG.js';
 
-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. */
@@ -36,9 +37,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.
@@ -48,8 +49,33 @@ var FullPageError = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     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 = _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.createElement(Error403SVG, {
+        className: cx("".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.createElement(Error404SVG, {
+        className: cx("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-404"))
+      })
+    },
+    custom: {
+      title: title,
+      description: description,
+      svg: /*#__PURE__*/React__default.createElement(ErrorGenericSVG, {
+        className: cx("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-custom"))
+      })
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -75,20 +101,15 @@ var FullPageError = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__error-title")
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(blockClass, "__error-label")
-  }, "\u21B3 ", errorLabel), _br || (_br = /*#__PURE__*/React__default.createElement("br", null)), /*#__PURE__*/React__default.createElement("span", null, title)), /*#__PURE__*/React__default.createElement("p", {
+  }, "\u21B3 ", kind === 'custom' ? errorLabel : "Error ".concat(kind)), /*#__PURE__*/React__default.createElement("span", null, errorData[kind].title)), /*#__PURE__*/React__default.createElement("p", {
     className: "".concat(blockClass, "__description")
-  }, description), children), /*#__PURE__*/React__default.createElement(Column, {
+  }, description || errorData[kind].description), children), /*#__PURE__*/React__default.createElement(Column, {
     sm: 4,
     md: 5,
     lg: 10
   }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'flex',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(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
@@ -111,13 +132,18 @@ FullPageError.propTypes = {
    */
   className: PropTypes.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: PropTypes.string.isRequired,
   /**
    * String that will describe the error that occurred
    */
   errorLabel: PropTypes.string.isRequired,
+  /**
+   * The kind of error page to be displayed, default is custom
+   */
+  kind: PropTypes.oneOf(['custom', '403', '404']),
   /**
    * This will be for the main title of the FullPageError component
    */

package/es/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';