@carbon/ibm-products 1.13.0 → 1.14.0

package/es/components/AddSelect/AddSelectFilter.js

@@ -0,0 +1,129 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+//
+// Copyright IBM Corp. 2022
+//
+// 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 React, { useState } from 'react';
+import { Button, ButtonSet, Dropdown, TextInput } from 'carbon-components-react';
+import PropTypes from 'prop-types';
+import { Filter16 } from '@carbon/icons-react';
+import { pkg } from '../../settings';
+var componentName = 'AddSelectFilter';
+export var AddSelectFilter = function AddSelectFilter(_ref) {
+  var filterOpts = _ref.filterOpts,
+      handleFilter = _ref.handleFilter,
+      handleSearch = _ref.handleSearch,
+      iconDescription = _ref.iconDescription,
+      inputPlaceholder = _ref.inputPlaceholder,
+      multi = _ref.multi,
+      placeholder = _ref.placeholder,
+      primaryButtonText = _ref.primaryButtonText,
+      searchTerm = _ref.searchTerm,
+      secondaryButtonText = _ref.secondaryButtonText,
+      textInputLabel = _ref.textInputLabel;
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      filters = _useState2[0],
+      setFilters = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
+
+  var blockClass = "".concat(pkg.prefix, "--add-select__global-filter");
+
+  var searchHandler = function searchHandler(e) {
+    handleSearch(e.target.value);
+  };
+
+  var onchangeHandler = function onchangeHandler(_ref2, id) {
+    var selectedItem = _ref2.selectedItem;
+    setFilters(_objectSpread(_objectSpread({}, filters), {}, _defineProperty({}, id, selectedItem)));
+  };
+
+  var applyFilters = function applyFilters() {
+    handleFilter(filters);
+  };
+
+  var resetFilters = function resetFilters() {
+    setFilters({});
+  };
+
+  var getSelectedItem = function getSelectedItem(id) {
+    return filters[id] || '';
+  };
+
+  var showFilter = multi && (filterOpts === null || filterOpts === void 0 ? void 0 : filterOpts.length) > 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-search")
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    id: "temp-id",
+    labelText: textInputLabel,
+    placeholder: inputPlaceholder,
+    value: searchTerm,
+    onChange: searchHandler
+  }), showFilter && /*#__PURE__*/React.createElement(Button, {
+    renderIcon: Filter16,
+    hasIconOnly: true,
+    kind: "ghost",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    iconDescription: iconDescription,
+    className: "".concat(blockClass, "-toggle"),
+    size: "md"
+  }), open && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-content")
+  }, /*#__PURE__*/React.createElement("p", null, "Filters"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-opts")
+  }, filterOpts.map(function (filterOpts) {
+    return /*#__PURE__*/React.createElement(Dropdown, {
+      id: filterOpts.id,
+      key: filterOpts.id,
+      titleText: filterOpts.label,
+      items: filterOpts.opts,
+      light: true,
+      onChange: function onChange(value) {
+        return onchangeHandler(value, filterOpts.id);
+      },
+      selectedItem: getSelectedItem(filterOpts.id),
+      label: placeholder
+    });
+  }))), /*#__PURE__*/React.createElement(ButtonSet, {
+    className: "".concat(blockClass, "-button-set")
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "secondary",
+    onClick: resetFilters,
+    className: "".concat(blockClass, "-button")
+  }, secondaryButtonText), /*#__PURE__*/React.createElement(Button, {
+    kind: "primary",
+    onClick: applyFilters,
+    className: "".concat(blockClass, "-button")
+  }, primaryButtonText))));
+};
+AddSelectFilter.propTypes = {
+  filterOpts: PropTypes.array,
+  handleFilter: PropTypes.func,
+  handleSearch: PropTypes.func,
+  iconDescription: PropTypes.string,
+  inputPlaceholder: PropTypes.string,
+  multi: PropTypes.bool,
+  placeholder: PropTypes.string,
+  primaryButtonText: PropTypes.string,
+  searchTerm: PropTypes.string,
+  secondaryButtonText: PropTypes.string,
+  textInputLabel: PropTypes.string
+};
+AddSelectFilter.displayName = componentName;

package/es/components/AddSelect/add-select-utils.js

@@ -61,4 +61,34 @@ export var flatten = function flatten(entries) {
 
     return prev.concat(item).concat(children ? flatten(children.entries) : []);
   }, []);
+};
+/**
+ * takes in a global filters array and a flat list of items
+ * it then searches through the items and finds any with the matching filter properties
+ * and adds those values to the array
+ * globalFilters looks like [{ id: someProperty }]
+ * the returned array would look like [{ id: someProperty, opts: [value, value]}]
+ * @param {Array} globalFilters - list of filter properties
+ * @param {Array} items - items to search through
+ * @returns an array of filter values
+ */
+
+export var getGlobalFilterValues = function getGlobalFilterValues(globalFilters, items) {
+  var filterOpts = globalFilters.reduce(function (prevFilter, curFilter) {
+    var filterId = curFilter.id;
+    var opts = items.reduce(function (prevItem, curItem) {
+      var value = curItem[filterId];
+
+      if (value && !prevItem.includes(value)) {
+        prevItem.push(value);
+      }
+
+      return prevItem;
+    }, []);
+    prevFilter.push(_objectSpread({
+      opts: opts
+    }, curFilter));
+    return prevFilter;
+  }, []);
+  return filterOpts;
 };

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
@@ -30,12 +29,10 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { getScrollbarWidth } from '../../global/js/utils/getScrollbarWidth';
 import { useActiveElement, usePreviousValue } from '../../global/js/hooks';
 import uuidv4 from '../../global/js/utils/uuidv4';
-import { useResetSpreadsheetFocus } from './hooks/useResetSpreadsheetFocus';
-import { useSpreadsheetOutsideClick } from './hooks/useSpreadsheetOutsideClick';
-import { useMoveActiveCell } from './hooks/useMoveActiveCell';
+import { useResetSpreadsheetFocus, useSpreadsheetOutsideClick, useMoveActiveCell, useMultipleKeyTracking } from './hooks';
 import { createActiveCellFn } from './utils/createActiveCellFn';
 import { getCellSize } from './utils/getCellSize';
-import { handleMultipleKeys } from './utils/handleMultipleKeys';
+import { handleMultipleKeys, includesShift } from './utils/handleMultipleKeys';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
 import { removeCellSelections } from './utils/removeCellSelections'; // cspell:words rowcount colcount
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -75,6 +72,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var multiKeyTrackingRef = useRef();
   var localRef = useRef();
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement();
@@ -120,7 +118,8 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       setCellEditorValue = _useState16[1];
 
   var previousState = usePreviousValue({
-    activeCellCoordinates: activeCellCoordinates
+    activeCellCoordinates: activeCellCoordinates,
+    isEditing: isEditing
   });
   var cellSizeValue = getCellSize(cellSize);
   var cellEditorRef = useRef();
@@ -130,7 +129,6 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       activeCellContent = _useState18[0],
       setActiveCellContent = _useState18[1];
 
-  var activeKeys = useRef([]);
   var activeCellRef = useRef();
   var cellEditorRulerRef = useRef();
   var defaultColumn = useMemo(function () {
@@ -140,6 +138,14 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       rowHeight: cellSizeValue
     };
   }, [cellSizeValue]);
+
+  var _useMultipleKeyTracki = useMultipleKeyTracking({
+    ref: multiKeyTrackingRef,
+    containerHasFocus: containerHasFocus,
+    isEditing: isEditing
+  }),
+      keysPressedList = _useMultipleKeyTracki.keysPressedList;
+
   var scrollBarSize = useMemo(function () {
     return getScrollbarWidth();
   }, []);
@@ -229,7 +235,6 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }
   }, [spreadsheetRef, rows, onActiveCellChange, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, defaultColumn]);
   useResetSpreadsheetFocus({
-    activeKeys: activeKeys,
     focusedElement: focusedElement,
     removeActiveCell: removeActiveCell,
     setContainerHasFocus: setContainerHasFocus
@@ -241,7 +246,6 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     removeActiveCell: removeActiveCell,
     removeCellSelections: removeCellSelections,
     setContainerHasFocus: setContainerHasFocus,
-    activeKeys: activeKeys,
     removeCellEditor: removeCellEditor
   });
   useMoveActiveCell({
@@ -281,10 +285,28 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       setCurrentMatcher(tempMatcher);
     }
   }, []);
+  var handleHomeEndKey = useCallback(function (_ref4) {
+    var type = _ref4.type;
+
+    var coordinatesClone = _objectSpread({}, activeCellCoordinates);
+
+    updateActiveCellCoordinates({
+      coords: coordinatesClone,
+      updatedValue: {
+        column: type === 'home' ? 0 : columns.length - 1
+      }
+    });
+    removeCellSelections({
+      spreadsheetRef: spreadsheetRef
+    });
+  }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
   var handleKeyPress = useCallback(function (event) {
-    var _activeKeys$current, _activeKeys$current2;
+    var key = event.key;
+
+    if (isEditing) {
+      return;
+    } // Command keys need to be returned as there is default browser behavior with these keys
 
-    var key = event.key; // Command keys need to be returned as there is default browser behavior with these keys
 
     if (key === 'Meta' || key === 'Control') {
       return;
@@ -301,29 +323,20 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 
 
     if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
-      if (isEditing) {
-        return;
-      }
-
-      if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && key !== 'Shift' && !activeKeys.current.includes('Shift')) {
+      if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && keysPressedList.length < 2 && !includesShift(keysPressedList)) {
         setSelectionAreas([]);
         setSelectionAreaData([]);
         removeCellSelections({
           spreadsheetRef: spreadsheetRef
         });
       }
-    } // Update list of activeKeys
-
-
-    if (!((_activeKeys$current = activeKeys.current) !== null && _activeKeys$current !== void 0 && _activeKeys$current.includes(key))) {
-      var activeClone = _toConsumableArray(activeKeys.current);
-
-      activeKeys.current = [].concat(_toConsumableArray(activeClone), [key]);
     }
 
-    if (((_activeKeys$current2 = activeKeys.current) === null || _activeKeys$current2 === void 0 ? void 0 : _activeKeys$current2.length) > 1) {
+    if (!isEditing && (keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
       handleMultipleKeys({
-        activeKeys: activeKeys,
+        activeCellCoordinates: activeCellCoordinates,
+        event: event,
+        keysPressedList: keysPressedList,
         selectionAreas: selectionAreas,
         currentMatcher: currentMatcher,
         rows: rows,
@@ -334,9 +347,26 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     // if one of the activeCellCoordinates is in a header position
 
 
-    if (!activeKeys.current.includes('Shift') || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
+    if (keysPressedList.length < 2 && !includesShift(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
       switch (key) {
+        // HOME
+        case 'Home':
+          {
+            handleHomeEndKey({
+              type: 'home'
+            });
+            break;
+          }
+
+        case 'End':
+          {
+            handleHomeEndKey({
+              type: 'end'
+            });
+            break;
+          }
         // Tab
+
         case 'Tab':
           {
             setSelectionAreas([]);
@@ -485,7 +515,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
           }
       }
     }
-  }, [updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, selectionAreas]);
+  }, [updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList]);
 
   var startEditMode = function startEditMode() {
     setIsEditing(true);
@@ -493,7 +523,16 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     var activeCellValue = activeCellFullData ? Object.values(activeCellFullData.row.values)[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
     setCellEditorValue(activeCellValue);
     cellEditorRulerRef.current.textContent = activeCellValue;
-  };
+  }; // Sets the initial placement of the cell editor cursor at the end of the text area
+  // this is not done for us by default in Safari
+
+
+  useEffect(function () {
+    if (isEditing && !(previousState !== null && previousState !== void 0 && previousState.isEditing)) {
+      cellEditorRef.current.setSelectionRange(cellEditorRulerRef.current.textContent.length, cellEditorRulerRef.current.textContent.length);
+      cellEditorRef.current.focus();
+    }
+  }, [isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing]);
 
   var handleActiveCellClick = function handleActiveCellClick() {
     if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
@@ -524,10 +563,10 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }
   };
 
-  var handleRowColumnHeaderClick = function handleRowColumnHeaderClick(_ref4) {
-    var isKeyboard = _ref4.isKeyboard,
-        _ref4$index = _ref4.index,
-        index = _ref4$index === void 0 ? null : _ref4$index;
+  var handleRowColumnHeaderClick = function handleRowColumnHeaderClick(_ref5) {
+    var isKeyboard = _ref5.isKeyboard,
+        _ref5$index = _ref5.index,
+        index = _ref5$index === void 0 ? null : _ref5$index;
     var handleHeaderCellProps = {
       activeCellCoordinates: activeCellCoordinates,
       rows: rows,
@@ -560,8 +599,8 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     startEditMode();
   };
 
-  var updateSelectionAreaOnCellEditSubmit = function updateSelectionAreaOnCellEditSubmit(_ref5) {
-    var type = _ref5.type;
+  var updateSelectionAreaOnCellEditSubmit = function updateSelectionAreaOnCellEditSubmit(_ref6) {
+    var type = _ref6.type;
 
     var submitEditChanges = function submitEditChanges() {
       var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
@@ -670,22 +709,6 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       activeCellRef.current.focus();
     }
   }, [isEditing, activeCellCoordinates, rows, cellEditorValue, columns.length, defaultColumn]);
-
-  var handleKeyUp = function handleKeyUp(event) {
-    var _activeKeys$current3;
-
-    var key = event.key; // Remove key from active keys array on key up
-
-    if ((_activeKeys$current3 = activeKeys.current) !== null && _activeKeys$current3 !== void 0 && _activeKeys$current3.includes(key)) {
-      var activeKeysClone = _toConsumableArray(activeKeys.current);
-
-      var filteredKeysClone = activeKeysClone.filter(function (item) {
-        return item !== key;
-      });
-      activeKeys.current = filteredKeysClone;
-    }
-  };
-
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, getTableProps(), getDevtoolsProps(componentName), {
     className: cx(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
     ref: spreadsheetRef,
@@ -694,11 +717,12 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     "aria-rowcount": (rows === null || rows === void 0 ? void 0 : rows.length) || 0,
     "aria-colcount": (columns === null || columns === void 0 ? void 0 : columns.length) || 0,
     onKeyDown: handleKeyPress,
-    onKeyUp: handleKeyUp,
     onFocus: function onFocus() {
       return setContainerHasFocus(true);
     }
-  }), /*#__PURE__*/React.createElement(DataSpreadsheetHeader, {
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: multiKeyTrackingRef
+  }, /*#__PURE__*/React.createElement(DataSpreadsheetHeader, {
     ref: spreadsheetRef,
     activeCellCoordinates: activeCellCoordinates,
     cellSize: cellSize,
@@ -761,7 +785,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     "aria-hidden": true,
     ref: cellEditorRulerRef,
     className: "".concat(blockClass, "__cell-editor-ruler")
-  }));
+  })));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 DataSpreadsheet = pkg.checkComponentEnabled(DataSpreadsheet, componentName); // The display name of the component, used by React. Note that displayName

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -2,6 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -323,8 +327,11 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         style: style
       }), {
         className: cx("".concat(blockClass, "__tr")),
-        "data-row-index": index
-      }), /*#__PURE__*/React.createElement("button", {
+        "data-row-index": index,
+        "aria-rowindex": index
+      }), /*#__PURE__*/React.createElement("div", {
+        role: "rowheader"
+      }, /*#__PURE__*/React.createElement("button", {
         tabIndex: -1,
         "data-row-index": index,
         "data-column-index": "header",
@@ -332,21 +339,27 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         onClick: handleRowHeaderClick(index),
         className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row'))),
         style: {
-          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+          width: (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth) - 4
         }
-      }, index + 1), row.cells.map(function (cell, index) {
-        return /*#__PURE__*/React.createElement("button", _extends({
+      }, index + 1)), row.cells.map(function (cell, index) {
+        return /*#__PURE__*/React.createElement("div", _extends({
+          key: "cell_".concat(index),
+          "aria-colindex": index
+        }, cell.getCellProps(), {
+          role: "gridcell",
+          style: _objectSpread(_objectSpread({}, cell.getCellProps().style), {}, {
+            display: 'grid'
+          })
+        }), /*#__PURE__*/React.createElement("button", {
           tabIndex: -1,
           "data-row-index": cell.row.index,
-          "data-column-index": index
-        }, cell.getCellProps(), {
+          "data-column-index": index,
           className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
-          key: "cell_".concat(index),
           onMouseDown: handleBodyCellClick(cell, index),
           onMouseOver: handleBodyCellHover(cell, index),
           onFocus: function onFocus() {},
           type: "button"
-        }), cell.render('Cell'));
+        }, cell.render('Cell')));
       }));
     }
   }, [prepareRow, rows, defaultColumn.rowHeaderWidth, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover]);

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -81,30 +81,34 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
         width: px(parseInt(headerGroup.getHeaderGroupProps().style.width) + scrollBarSizeValue)
       }),
       className: "".concat(blockClass, "__tr")
-    }), /*#__PURE__*/React.createElement("button", {
+    }), /*#__PURE__*/React.createElement("div", {
+      role: "columnheader",
+      style: {
+        width: (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth) - 4,
+        height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
+      }
+    }, /*#__PURE__*/React.createElement("button", {
       "data-row-index": "header",
       "data-column-index": "header",
       type: "button",
       tabIndex: -1,
-      className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header')),
-      style: {
-        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
-        height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
-      }
-    }, "\xA0"), headerGroup.headers.map(function (column, index) {
-      return /*#__PURE__*/React.createElement("button", _extends({
+      className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
+    }, "\xA0")), headerGroup.headers.map(function (column, index) {
+      return /*#__PURE__*/React.createElement("div", _extends({
         key: "column_".concat(index),
+        role: "columnheader",
+        className: "".concat(blockClass, "__columnheader")
+      }, column.getHeaderProps()), /*#__PURE__*/React.createElement("button", {
         "data-row-index": "header",
         "data-column-index": index,
         tabIndex: -1,
         onClick: handleColumnHeaderClick(index),
         style: {
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
-        }
-      }, column.getHeaderProps(), {
+        },
         className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column'))),
         type: "button"
-      }), column.render('Header'));
+      }, column.render('Header')));
     }));
   }));
 });

package/es/components/DataSpreadsheet/hooks/index.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { useMoveActiveCell } from './useMoveActiveCell';
+export { useMultipleKeyTracking } from './useMultipleKeyTracking';
+export { useResetSpreadsheetFocus } from './useResetSpreadsheetFocus';
+export { useSpreadsheetOutsideClick } from './useSpreadsheetOutsideClick';

package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js

@@ -0,0 +1,111 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useEffect, useState } from 'react';
+import { usePreviousValue } from '../../../global/js/hooks';
+
+var hasFocus = function hasFocus() {
+  return typeof document !== 'undefined' && document.hasFocus();
+};
+
+export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
+  var ref = _ref.ref,
+      containerHasFocus = _ref.containerHasFocus,
+      isEditing = _ref.isEditing;
+
+  var _useState = useState(hasFocus),
+      _useState2 = _slicedToArray(_useState, 2),
+      windowFocused = _useState2[0],
+      setWindowFocused = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      keysPressedList = _useState4[0],
+      setKeysPressedList = _useState4[1];
+
+  var previousState = usePreviousValue({
+    isEditing: isEditing,
+    windowFocused: windowFocused
+  }); // useEffect to check for window focus, if window loses focus
+  // we need to clear out the keysPressedList
+
+  useEffect(function () {
+    setWindowFocused(hasFocus());
+
+    var onWindowFocus = function onWindowFocus() {
+      return setWindowFocused(true);
+    };
+
+    var onWindowBlur = function onWindowBlur() {
+      return setWindowFocused(false);
+    };
+
+    window.addEventListener('focus', onWindowFocus);
+    window.addEventListener('blur', onWindowBlur);
+    return function () {
+      window.removeEventListener('focus', onWindowFocus);
+      window.removeEventListener('blur', onWindowBlur);
+    };
+  }, []);
+  useEffect(function () {
+    if (containerHasFocus && !isEditing) {
+      ref.current.onkeydown = ref.current.onkeyup = function (event) {
+        // If keydown, we will add the new key to the keysPressedList array
+        if (event.type === 'keydown') {
+          // Prevent multiple keys of the same type being added to our keysPressedList array
+          if (keysPressedList.includes(event.code)) {
+            return;
+          }
+
+          var tempKeys = _toConsumableArray(keysPressedList);
+
+          tempKeys.push(event.code);
+          setKeysPressedList(_toConsumableArray(new Set(tempKeys)));
+        } // If keyup, we will remove the key from the keysPressedList array
+
+
+        if (event.type === 'keyup') {
+          var _tempKeys = _toConsumableArray(keysPressedList);
+
+          var filteredClone = _tempKeys.filter(function (item) {
+            return item !== event.code;
+          }); // Keyup events are lost on all other keys if a Meta key is used
+          // so to work around this behavior, we empty out all other keys
+          // from the keysPressedList array if we detect a Meta keyup event
+
+
+          if (event.code === 'MetaLeft' || event.code === 'MetaRight') {
+            return setKeysPressedList([]);
+          }
+
+          setKeysPressedList(_toConsumableArray(new Set(filteredClone)));
+        }
+      };
+    }
+
+    if (previousState !== null && previousState !== void 0 && previousState.windowFocused && !windowFocused) {
+      setKeysPressedList([]);
+    } // Remove handlers if the spreadsheet container loses focus
+    // or is currently in edit mode
+
+
+    if (!containerHasFocus || isEditing) {
+      ref.current.onkeydown = undefined;
+      ref.current.onkeyup = undefined;
+
+      if (!(previousState !== null && previousState !== void 0 && previousState.isEditing) && isEditing) {
+        setKeysPressedList([]);
+      }
+    }
+  }, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused]);
+  return {
+    keysPressedList: keysPressedList,
+    windowFocused: windowFocused
+  };
+};