@carbon/ibm-products 2.43.2-canary.32 → 2.43.2-canary.321

package/es/components/Datagrid/useInlineEdit.js

@@ -40,7 +40,7 @@ var useInlineEdit = function useInlineEdit(hooks) {
     return [props, {
       className: cx("".concat(blockClass, "__cell"), "".concat(blockClass, "__cell-inline-edit")),
       role: 'gridcell',
-      children: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !staticCell && inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), staticCell && /*#__PURE__*/React__default.createElement(InlineEditCell, {
+      children: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !staticCell && inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'checkbox' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), staticCell && /*#__PURE__*/React__default.createElement(InlineEditCell, {
         config: columnInlineEditConfig,
         tabIndex: -1,
         value: (_cell$value3 = cell.value) === null || _cell$value3 === void 0 ? void 0 : _cell$value3.value,
@@ -67,6 +67,5 @@ var useInlineEdit = function useInlineEdit(hooks) {
     });
   });
 };
-var useInlineEdit$1 = useInlineEdit;
 
-export { useInlineEdit$1 as default };
+export { useInlineEdit as default };

package/es/components/Datagrid/useNestedRowExpander.js

@@ -5,17 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef } from 'react';
 import { ChevronRight } from '@carbon/react/icons';
 import cx from 'classnames';
 import { pkg, carbon } from '../../settings.js';
 import { useFocusRowExpander } from './useFocusRowExpander.js';
+import { handleDynamicRowCheck } from './Datagrid/addons/stateReducer.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useNestedRowExpander = function useNestedRowExpander(hooks) {
-  var tempState = useRef();
-  var lastExpandedRowIndex = useRef();
+  var tempState = useRef(undefined);
+  var lastExpandedRowIndex = useRef(undefined);
   var useInstance = function useInstance(instance) {
     tempState.current = instance;
   };
@@ -25,34 +26,84 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
     blockClass: blockClass,
     activeElement: typeof document !== 'undefined' && document.activeElement
   });
-  var visibleColumns = function visibleColumns(columns) {
+  var visibleColumns = function visibleColumns(columns, state) {
+    var _ref = state.instance || {},
+      getAsyncSubRows = _ref.getAsyncSubRows,
+      dispatch = _ref.dispatch,
+      tableState = _ref.state;
+    var fetchingDynamicSubRows = !!tableState.dynamicRowSkeleton;
     var expanderColumn = {
       id: 'expander',
-      Cell: function Cell(_ref) {
-        var row = _ref.row;
+      Cell: function Cell(_ref2) {
+        var row = _ref2.row;
         var expanderButtonProps = _objectSpread2(_objectSpread2({}, row.getToggleRowExpandedProps()), {}, {
-          onClick: function onClick(event) {
-            // Prevents `onRowClick` from being called if `useOnRowClick` is included
-            event.stopPropagation();
-            row.toggleRowExpanded();
-            lastExpandedRowIndex.current = row.id;
-          }
+          disabled: getAsyncSubRows && fetchingDynamicSubRows,
+          onClick: function () {
+            var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    // Prevents `onRowClick` from being called if `useOnRowClick` is included
+                    event.stopPropagation();
+                    row.toggleRowExpanded();
+                    lastExpandedRowIndex.current = row.id;
+                    if (row.isExpanded) {
+                      _context.next = 15;
+                      break;
+                    }
+                    _context.prev = 4;
+                    handleDynamicRowCheck({
+                      dispatch: dispatch,
+                      status: 'start',
+                      rowId: row.id,
+                      depth: row.depth,
+                      index: row.index
+                    });
+                    if (!getAsyncSubRows) {
+                      _context.next = 9;
+                      break;
+                    }
+                    _context.next = 9;
+                    return getAsyncSubRows === null || getAsyncSubRows === void 0 ? void 0 : getAsyncSubRows(row);
+                  case 9:
+                    handleDynamicRowCheck({
+                      dispatch: dispatch,
+                      status: 'finish',
+                      rowId: row.id
+                    });
+                    _context.next = 15;
+                    break;
+                  case 12:
+                    _context.prev = 12;
+                    _context.t0 = _context["catch"](4);
+                    console.log({
+                      error: _context.t0
+                    });
+                  case 15:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[4, 12]]);
+            }));
+            function onClick(_x) {
+              return _onClick.apply(this, arguments);
+            }
+            return onClick;
+          }()
         });
-        var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
-          _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
-          expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
-          _ref2$expanderButtonT2 = _ref2.expanderButtonTitleCollapsed,
-          expanderButtonTitleCollapsed = _ref2$expanderButtonT2 === void 0 ? 'Expand row' : _ref2$expanderButtonT2;
+        var _ref3 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
+          _ref3$expanderButtonT = _ref3.expanderButtonTitleExpanded,
+          expanderButtonTitleExpanded = _ref3$expanderButtonT === void 0 ? 'Collapse row' : _ref3$expanderButtonT,
+          _ref3$expanderButtonT2 = _ref3.expanderButtonTitleCollapsed,
+          expanderButtonTitleCollapsed = _ref3$expanderButtonT2 === void 0 ? 'Expand row' : _ref3$expanderButtonT2;
         var expanderTitle = row.isExpanded ? expanderButtonTitleExpanded : expanderButtonTitleCollapsed;
-        return row.canExpand && /*#__PURE__*/React__default.createElement("button", _extends({
+        return row.canExpand || getAsyncSubRows ? /*#__PURE__*/React__default.createElement("button", _extends({
           type: "button",
           "aria-label": expanderTitle,
           className: cx("".concat(blockClass, "__row-expander"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), /*#__PURE__*/React__default.createElement(ChevronRight, {
+        }, expanderButtonProps), /*#__PURE__*/React__default.createElement(ChevronRight, {
           className: cx("".concat(blockClass, "__expander-icon"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), "".concat(blockClass, "__expander-icon--open"), row.isExpanded))
-        }));
+        })) : null;
       },
       width: 48,
       disableResizing: true,

package/es/components/Datagrid/useNestedRows.js

@@ -94,6 +94,5 @@ var useNestedRows = function useNestedRows(hooks) {
   };
   hooks.useInstance.push(useInstance);
 };
-var useNestedRows$1 = useNestedRows;
 
-export { useNestedRows$1 as default };
+export { useNestedRows as default };

package/es/components/Datagrid/useOnRowClick.js

@@ -61,6 +61,5 @@ var useOnRowClick = function useOnRowClick(hooks) {
   };
   hooks.useInstance.push(useInstance);
 };
-var useOnRowClick$1 = useOnRowClick;
 
-export { useOnRowClick$1 as default };
+export { useOnRowClick as default };

package/es/components/Datagrid/useParentDimensions.js

@@ -9,11 +9,11 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import { useRef, useState } from 'react';
 
 var useParentDimensions = function useParentDimensions(hooks) {
-  var rootRef = useRef();
-  var headRef = useRef();
-  var innerListRef = useRef();
-  var listRef = useRef();
-  var gridRef = useRef();
+  var rootRef = useRef(undefined);
+  var headRef = useRef(undefined);
+  var innerListRef = useRef(undefined);
+  var listRef = useRef(undefined);
+  var gridRef = useRef(undefined);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     tableHeight = _useState2[0],

package/es/components/Datagrid/useRowExpander.js

@@ -14,8 +14,8 @@ import { useFocusRowExpander } from './useFocusRowExpander.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useRowExpander = function useRowExpander(hooks) {
-  var tempState = useRef();
-  var lastExpandedRowIndex = useRef();
+  var tempState = useRef(undefined);
+  var lastExpandedRowIndex = useRef(undefined);
   var useInstance = function useInstance(instance) {
     tempState.current = instance;
   };
@@ -38,21 +38,18 @@ var useRowExpander = function useRowExpander(hooks) {
             row.toggleRowExpanded();
             row === null || row === void 0 || (_row$onClick = row.onClick) === null || _row$onClick === void 0 || _row$onClick.call(row, row, event);
             lastExpandedRowIndex.current = row.id;
-          }
+          },
+          title: null
         });
         var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
-          _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
-          expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
-          _ref2$expanderButtonT2 = _ref2.expanderButtonTitleCollapsed,
-          expanderButtonTitleCollapsed = _ref2$expanderButtonT2 === void 0 ? 'Expand row' : _ref2$expanderButtonT2;
+          expanderButtonTitleExpanded = _ref2.expanderButtonTitleExpanded,
+          expanderButtonTitleCollapsed = _ref2.expanderButtonTitleCollapsed;
         var expanderTitle = row.isExpanded ? expanderButtonTitleExpanded : expanderButtonTitleCollapsed;
         return row.canExpand && /*#__PURE__*/React__default.createElement("button", _extends({
           type: "button",
           "aria-label": expanderTitle,
           className: cx("".concat(blockClass, "__row-expander"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronUp, {
+        }, expanderButtonProps), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronUp, {
           className: "".concat(blockClass, "__row-expander--icon")
         }) : /*#__PURE__*/React__default.createElement(ChevronDown, {
           className: "".concat(blockClass, "__row-expander--icon")

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

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 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 { Hooks } from 'react-table';
 declare const useRowIsMouseOver: (hooks: Hooks) => void;
 export default useRowIsMouseOver;

package/es/components/Datagrid/useRowIsMouseOver.js

@@ -48,6 +48,5 @@ var useDebounce = function useDebounce(fn, wait) {
     useCallback(debounce(fn, wait), [])
   );
 };
-var useRowIsMouseOver$1 = useRowIsMouseOver;
 
-export { useRowIsMouseOver$1 as default };
+export { useRowIsMouseOver as default };

package/es/components/Datagrid/useRowRenderer.js

@@ -5,18 +5,60 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import DatagridRow from './Datagrid/DatagridRow.js';
 
 var useRowRenderer = function useRowRenderer(hooks) {
   var useInstance = function useInstance(instance) {
-    var rows = instance.rows;
+    var _newRows;
+    var rows = instance.rows,
+      state = instance.state;
+    var newRows = null;
+    if (state !== null && state !== void 0 && state.dynamicRowSkeleton) {
+      var _state$dynamicRowSkel;
+      var depthIndexArray = state === null || state === void 0 || (_state$dynamicRowSkel = state.dynamicRowSkeleton) === null || _state$dynamicRowSkel === void 0 ? void 0 : _state$dynamicRowSkel.id.split('').filter(function (r) {
+        return r !== '.';
+      });
+      if (depthIndexArray.length > 1) {
+        var subRows;
+        var finalRow;
+        // This will find the subRow that requested to find dynamic rows
+        // and will apply the skeleton row after that row
+        depthIndexArray.map(function (depthIndex, index) {
+          if (index === 0) {
+            subRows = rows[depthIndex].subRows;
+            return;
+          }
+          if (depthIndexArray.length - 1 === index) {
+            finalRow = subRows.find(function (r) {
+              return r.index === parseInt(depthIndex);
+            });
+            subRows.splice(finalRow.index + 1, 0, state === null || state === void 0 ? void 0 : state.dynamicRowSkeleton); // + 1 because we want to add the skeleton row after the row initiating the dynamic request
+            return;
+          }
+          var foundRow = subRows.find(function (r) {
+            return r.index === parseInt(depthIndex);
+          });
+          subRows = foundRow.subRows;
+        });
+      }
+      var rootRowIndexWithDynamicRow = rows.findIndex(function (r) {
+        var _state$dynamicRowSkel2;
+        return r.id === (state === null || state === void 0 || (_state$dynamicRowSkel2 = state.dynamicRowSkeleton) === null || _state$dynamicRowSkel2 === void 0 ? void 0 : _state$dynamicRowSkel2.id);
+      });
+      if (rootRowIndexWithDynamicRow > -1) {
+        newRows = [].concat(_toConsumableArray(rows.slice(0, rootRowIndexWithDynamicRow + 1)), [// + 1 because we want to add the skeleton row after the row initiating the dynamic request
+        state === null || state === void 0 ? void 0 : state.dynamicRowSkeleton], _toConsumableArray(rows.slice(rootRowIndexWithDynamicRow + 1)));
+      }
+    }
+    newRows = (_newRows = newRows) !== null && _newRows !== void 0 ? _newRows : rows;
     var addRowRenderer = function addRowRenderer(row) {
       return Object.assign(row, {
         RowRenderer: DatagridRow,
         subRows: (row.subRows || []).map(addRowRenderer)
       });
     };
-    var rowsWithRenderer = rows.map(addRowRenderer);
+    var rowsWithRenderer = newRows.map(addRowRenderer);
     Object.assign(instance, {
       rows: rowsWithRenderer
     });

package/es/components/Datagrid/useSelectAllToggle.js

@@ -89,6 +89,5 @@ var Header = function Header(gridState) {
   };
   return /*#__PURE__*/React__default.createElement(SelectAllWithToggle, props);
 };
-var useSelectAllToggle$1 = useSelectAllToggle;
 
-export { useSelectAllToggle$1 as default };
+export { useSelectAllToggle as default };

package/es/components/Datagrid/useSelectRows.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { toConsumableArray as _toConsumableArray, slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { toConsumableArray as _toConsumableArray, slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { TableSelectRow } from '@carbon/react';
@@ -81,11 +81,12 @@ var SelectRow = function SelectRow(datagridState) {
     withStickyColumn = datagridState.withStickyColumn,
     dispatch = datagridState.dispatch,
     getRowId = datagridState.getRowId;
-  var _useState = useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -94,24 +95,45 @@ var SelectRow = function SelectRow(datagridState) {
       return window.removeEventListener('resize', updateSize);
     };
   }, []);
-  var onSelectHandler = function onSelectHandler(event) {
-    event.stopPropagation(); // avoid triggering onRowClick
-    if (radio) {
-      toggleAllRowsSelected(false);
-      if (onRadioSelect) {
-        onRadioSelect(row);
-      }
-    }
-    onChange(event);
-    onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, event);
-    handleToggleRowSelected({
-      dispatch: dispatch,
-      rowData: row,
-      isChecked: event.target.checked,
-      getRowId: getRowId,
-      selectAll: null
-    });
-  };
+  var onSelectHandler = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+      var _document$activeEleme, _document, _document2;
+      var activeElement;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            event.stopPropagation(); // avoid triggering onRowClick
+            if (radio) {
+              toggleAllRowsSelected(false);
+              if (onRadioSelect) {
+                onRadioSelect(row);
+              }
+            }
+            onChange(event);
+            onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, event);
+            handleToggleRowSelected({
+              dispatch: dispatch,
+              rowData: row,
+              isChecked: event.target.checked,
+              getRowId: getRowId,
+              selectAll: null
+            });
+            // focus the radio / checkbox if lost
+            activeElement = (_document$activeEleme = (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 ? void 0 : _document.id) !== null && _document$activeEleme !== void 0 ? _document$activeEleme : '';
+            _context.next = 8;
+            return undefined;
+          case 8:
+            (_document2 = document) === null || _document2 === void 0 || (_document2 = _document2.getElementById(activeElement)) === null || _document2 === void 0 || _document2.focus();
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSelectHandler(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   var selectDisabled = isFetching || row.getRowProps().disabled;
   var _row$getToggleRowSele2 = row.getToggleRowSelectedProps(),
     onChange = _row$getToggleRowSele2.onChange,
@@ -134,6 +156,5 @@ var SelectRow = function SelectRow(datagridState) {
     disabled: selectDisabled
   }));
 };
-var useSelectRows$1 = useSelectRows;
 
-export { useSelectRows$1 as default };
+export { useSelectRows as default };

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

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Hooks } from 'react-table';
-export declare const getNewSortOrder: (sortOrder?: boolean | string) => {
-    newSortDesc: boolean;
-    newOrder: string;
-};
+interface Order {
+    newOrder: 'ASC' | 'DESC' | 'NONE';
+    newSortDesc: undefined | boolean;
+}
+export declare const getNewSortOrder: (currentOrder?: boolean | string) => Order;
 declare const useSortableColumns: (hooks: Hooks) => void;
 export default useSortableColumns;

package/es/components/Datagrid/useSortableColumns.js

@@ -12,26 +12,31 @@ 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 { DatagridSlug } from './Datagrid/addons/Slug/DatagridSlug.js';
+import { DatagridAILabel } from './Datagrid/addons/AiLabel/DatagridAiLabel.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var ordering = {
-  ASC: 'ASC',
-  DESC: 'DESC',
-  NONE: 'NONE'
-};
-var getNewSortOrder = function getNewSortOrder(sortOrder) {
+var getNewSortOrder = function getNewSortOrder(currentOrder) {
   var order = {
-    newSortDesc: false,
-    newOrder: ordering.NONE
+    newOrder: 'NONE',
+    newSortDesc: undefined
   };
-  if (sortOrder === false || sortOrder === ordering.DESC) {
-    order.newOrder = ordering.DESC;
+
+  // NONE => ASC
+  if (currentOrder === undefined) {
+    order.newOrder = 'ASC';
+    order.newSortDesc = false;
+  }
+
+  // ACS => DESC
+  if (currentOrder === false || currentOrder === 'DESC') {
+    order.newOrder = 'DESC';
     order.newSortDesc = true;
   }
-  if (sortOrder === undefined || sortOrder === ordering.ASC) {
-    order.newOrder = ordering.ASC;
-    order.newSortDesc = false;
+
+  // DESC => NONE
+  if (currentOrder === true || currentOrder === 'ASC') {
+    order.newOrder = 'NONE';
+    order.newSortDesc = undefined;
   }
   return order;
 };
@@ -73,9 +78,9 @@ var useSortableColumns = function useSortableColumns(hooks) {
       descendingSortableLabelText = instance.descendingSortableLabelText,
       defaultSortableLabelText = instance.defaultSortableLabelText;
     var onSortClick = function onSortClick(event, column) {
-      var slug = event.target.classList.contains("".concat(carbon.prefix, "--slug")) || event.target.closest(".".concat(carbon.prefix, "--slug"));
+      var aiLabel = event.target.classList.contains("".concat(carbon.prefix, "--slug")) || event.target.closest(".".concat(carbon.prefix, "--slug"));
       // Do not continue with sorting if we find a slug
-      if (slug) {
+      if (aiLabel) {
         event.stopPropagation();
         return;
       }
@@ -90,6 +95,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       instance.toggleSortBy(key, newSortDesc, false);
     };
     var sortableColumns = visibleColumns.map(function (column) {
+      var _column$minWidth;
       var icon = function icon(col, props) {
         var iconProps = _objectSpread2(_objectSpread2({
           size: 16
@@ -108,6 +114,15 @@ var useSortableColumns = function useSortableColumns(hooks) {
         }
         return /*#__PURE__*/React__default.createElement(ArrowsVertical, iconProps);
       };
+      var handleKey = function handleKey(e, columnId) {
+        var key = e.key;
+        if (key === 'Enter') {
+          setTimeout(function () {
+            var _document$getElementB;
+            return (_document$getElementB = document.getElementById(columnId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
+          }, 0);
+        }
+      };
       var Header = function Header(headerProp) {
         return column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default.createElement(SelectAll, instance) : /*#__PURE__*/React__default.createElement(Button, {
           "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
@@ -121,17 +136,21 @@ 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(DatagridSlug, {
-              slug: headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.slug
+            var _headerProp$column, _headerProp$column2;
+            return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DatagridAILabel, {
+              aiLabel: (headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.aiLabel) || (headerProp === null || headerProp === void 0 || (_headerProp$column2 = headerProp.column) === null || _headerProp$column2 === void 0 ? void 0 : _headerProp$column2.slug)
             }), icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props));
           },
-          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _defineProperty(_defineProperty({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false))
+          id: column === null || column === void 0 ? void 0 : column.id,
+          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _defineProperty(_defineProperty({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false)),
+          onKeyDown: function onKeyDown(event) {
+            return handleKey(event, column.id);
+          }
         }, column.Header);
       };
       return _objectSpread2(_objectSpread2({}, column), {}, {
         Header: Header,
-        minWidth: column.disableSortBy === true ? 0 : column.minWidth ? column.minWidth : 90
+        minWidth: column.disableSortBy ? 0 : (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : column.isAction ? 50 : 90
       });
     });
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _toConsumableArray(sortableColumns);
@@ -147,6 +166,5 @@ var useSortableColumns = function useSortableColumns(hooks) {
   hooks.visibleColumns.push(sortableVisibleColumns);
   hooks.useInstance.push(sortInstanceProps);
 };
-var useSortableColumns$1 = useSortableColumns;
 
-export { useSortableColumns$1 as default, getNewSortOrder };
+export { useSortableColumns as default, getNewSortOrder };

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

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2021, 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 { Hooks } from 'react-table';
+declare const useStickyColumn: (hooks: Hooks) => void;
 export default useStickyColumn;
-declare function useStickyColumn(hooks: any): void;

package/es/components/Datagrid/useStickyColumn.js

@@ -16,14 +16,15 @@ var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
 var leftStickyStyleClassPrefix = "".concat(blockClass, "__left-sticky-column");
 var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
 var useStickyColumn = function useStickyColumn(hooks) {
-  var tableBodyRef = useRef();
-  var stickyHeaderCellRef = useRef();
-  var _useState = useState(null),
+  var tableBodyRef = useRef(undefined);
+  var stickyHeaderCellRef = useRef(undefined);
+  var _useState = useState(undefined),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useEffect(function () {
-    setWindowSize(window.innerWidth);
+    var _window;
+    setWindowSize((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth);
   }, []);
   useLayoutEffect(function () {
     /* istanbul ignore next */
@@ -49,10 +50,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
   var useEventListener = function useEventListener(instance) {
     useEffect(function () {
       var tableBodyElement = tableBodyRef.current;
-      var headerCellElement = stickyHeaderCellRef.current;
+      var headerCellElement = stickyHeaderCellRef === null || stickyHeaderCellRef === void 0 ? void 0 : stickyHeaderCellRef.current;
       /* istanbul ignore next */
       if (hasVertScroll(tableBodyElement) && headerCellElement) {
-        headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
+        var _headerCellElement$cl;
+        headerCellElement === null || headerCellElement === void 0 || (_headerCellElement$cl = headerCellElement.classList) === null || _headerCellElement$cl === void 0 || _headerCellElement$cl.add(OFFSET_SCROLL_CLASS);
       }
       var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
       /* istanbul ignore next */
@@ -74,7 +76,7 @@ var useStickyColumn = function useStickyColumn(hooks) {
       };
       toggleStickyShadow(tableBodyElement, headerCellElement);
       if (tableBodyElement) {
-        tableBodyElement.addEventListener('scroll', listener);
+        tableBodyElement === null || tableBodyElement === void 0 || tableBodyElement.addEventListener('scroll', listener);
       }
       return function () {
         if (tableBodyElement) {
@@ -138,18 +140,19 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
   }];
 };
 var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
-  var column = data.column || data.cell.column;
-  if (column.sticky === 'right') {
+  var _data$cell;
+  var column = data.column || ((_data$cell = data.cell) === null || _data$cell === void 0 ? void 0 : _data$cell.column);
+  if ((column === null || column === void 0 ? void 0 : column.sticky) === 'right') {
     return [props, _objectSpread2({
       className: cx(_defineProperty(_defineProperty(_defineProperty({}, "".concat(styleClassPrefix, "-").concat(elementName), true), "".concat(blockClass, "__resizableColumn"), false), "".concat(blockClass, "__sortableColumn"), false))
     }, headerCellRef && {
       ref: headerCellRef
     })];
   }
-  if (column.sticky === 'left') {
+  if ((column === null || column === void 0 ? void 0 : column.sticky) === 'left') {
     var _data$instance;
     return [props, _objectSpread2({
-      className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671))
+      className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize && windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize && windowSize > 671))
     }, headerCellRef && {
       ref: headerCellRef
     })];
@@ -189,6 +192,5 @@ var hasVertScroll = function hasVertScroll(element) {
     clientHeight = element.clientHeight;
   return scrollHeight > clientHeight;
 };
-var useStickyColumn$1 = useStickyColumn;
 
-export { useStickyColumn$1 as default };
+export { useStickyColumn as default };

package/es/components/Decorator/Decorator.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';