@carbon/ibm-products 1.13.0 → 1.14.0

package/lib/components/AddSelect/AddSelect.js

@@ -41,7 +41,9 @@ var _AddSelectColumn = require("./AddSelectColumn");
 
 var _addSelectUtils = require("./add-select-utils");
 
-var _excluded = ["className", "columnInputPlaceholder", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "searchResultsLabel", "textInputLabel", "title"];
+var _AddSelectFilter = require("./AddSelectFilter");
+
+var _excluded = ["className", "columnInputPlaceholder", "description", "globalFilters", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "searchResultsLabel", "textInputLabel", "title"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -54,6 +56,11 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
       columnInputPlaceholder = _ref.columnInputPlaceholder,
       description = _ref.description,
+      globalFilters = _ref.globalFilters,
+      globalFiltersIconDescription = _ref.globalFiltersIconDescription,
+      globalFiltersPlaceholderText = _ref.globalFiltersPlaceholderText,
+      globalFiltersPrimaryButtonText = _ref.globalFiltersPrimaryButtonText,
+      globalFiltersSecondaryButtonText = _ref.globalFiltersSecondaryButtonText,
       influencerTitle = _ref.influencerTitle,
       inputPlaceholder = _ref.inputPlaceholder,
       items = _ref.items,
@@ -111,19 +118,39 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       flatItems = _useState14[0],
       setFlatItems = _useState14[1];
 
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      globalFilterOpts = _useState16[0],
+      setGlobalFilterOpts = _useState16[1];
+
+  var _useState17 = (0, _react.useState)({}),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      appliedGlobalFilters = _useState18[0],
+      setAppliedGlobalFilters = _useState18[1];
+
   (0, _react.useEffect)(function () {
     var entries = items.entries; // flatItems is just a single array of all entries including children
 
-    setFlatItems((0, _addSelectUtils.flatten)(entries)); // multi select with nested data needs to be normalized
+    var flattenedItems = (0, _addSelectUtils.flatten)(entries);
 
-    if (multi && entries.find(function (entry) {
-      return entry.children;
-    })) {
-      var newItems = (0, _addSelectUtils.normalize)(items);
-      setNormalizedItems(newItems);
-      setUsedNormalizedItems(true);
+    if (multi) {
+      if (globalFilters !== null && globalFilters !== void 0 && globalFilters.length) {
+        var globalFilterValues = (0, _addSelectUtils.getGlobalFilterValues)(globalFilters, flattenedItems);
+        setGlobalFilterOpts(globalFilterValues);
+      } // multi select with nested data needs to be normalized
+
+
+      if (entries.find(function (entry) {
+        return entry.children;
+      })) {
+        var newItems = (0, _addSelectUtils.normalize)(items);
+        setNormalizedItems(newItems);
+        setUsedNormalizedItems(true);
+      }
     }
-  }, [items, multi]); // used to generate columns of results for multi select with hierarchy
+
+    setFlatItems(flattenedItems);
+  }, [items, multi, globalFilters]); // used to generate columns of results for multi select with hierarchy
 
   var getPages = function getPages() {
     var pages = [];
@@ -197,11 +224,18 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var getDisplayItems = function getDisplayItems() {
     if (useNormalizedItems) {
-      // when global search is in use the results are not in column format
-      if (searchTerm) {
-        return flatItems.filter(function (item) {
+      // when global search or filter is in use the results are not in column format
+      var filters = Object.keys(appliedGlobalFilters);
+
+      if (searchTerm || filters.length) {
+        var results = flatItems.filter(function (item) {
           return item.title.toLowerCase().includes(searchTerm);
+        }).filter(function (item) {
+          return filters.every(function (filter) {
+            return item[filter] === appliedGlobalFilters[filter];
+          });
         });
+        return results;
       }
 
       return getPages();
@@ -222,8 +256,12 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     singleSelection: singleSelection
   }; // handlers
 
-  var handleSearch = function handleSearch(e) {
-    setSearchTerm(e.target.value);
+  var handleSearch = function handleSearch(term) {
+    setSearchTerm(term);
+  };
+
+  var handleFilter = function handleFilter(filters) {
+    setAppliedGlobalFilters(filters);
   };
 
   var submitHandler = function submitHandler() {
@@ -282,16 +320,23 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   };
 
   var showBreadsCrumbs = setShowBreadsCrumbs();
-  var showTags = setShowTags(); // main content
+  var showTags = setShowTags();
+  var globalFiltersApplied = Object.keys(appliedGlobalFilters).length > 0; // main content
 
   var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__header")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
-    id: "temp-id",
-    labelText: textInputLabel,
-    placeholder: inputPlaceholder,
-    value: searchTerm,
-    onChange: handleSearch
+  }, /*#__PURE__*/_react.default.createElement(_AddSelectFilter.AddSelectFilter, {
+    textInputLabel: textInputLabel,
+    inputPlaceholder: inputPlaceholder,
+    searchTerm: searchTerm,
+    handleSearch: handleSearch,
+    multi: multi,
+    filterOpts: globalFilterOpts,
+    handleFilter: handleFilter,
+    primaryButtonText: globalFiltersPrimaryButtonText,
+    secondaryButtonText: globalFiltersSecondaryButtonText,
+    placeholder: globalFiltersPlaceholderText,
+    iconDescription: globalFiltersIconDescription
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tag-container")
   }, showBreadsCrumbs ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
@@ -303,7 +348,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
     type: "gray",
     size: "sm"
-  }, itemsToDisplay.length))), useNormalizedItems && !searchTerm ? /*#__PURE__*/_react.default.createElement("div", {
+  }, itemsToDisplay.length))), useNormalizedItems && !searchTerm && !globalFiltersApplied ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__columns")
   }, itemsToDisplay.map(function (page, idx) {
     var _path;
@@ -337,6 +382,14 @@ AddSelect.propTypes = {
   className: _propTypes.default.string,
   columnInputPlaceholder: _propTypes.default.string,
   description: _propTypes.default.string,
+  globalFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    label: _propTypes.default.string
+  })),
+  globalFiltersIconDescription: _propTypes.default.string,
+  globalFiltersPlaceholderText: _propTypes.default.string,
+  globalFiltersPrimaryButtonText: _propTypes.default.string,
+  globalFiltersSecondaryButtonText: _propTypes.default.string,
   influencerTitle: _propTypes.default.string,
   inputPlaceholder: _propTypes.default.string,
   items: _propTypes.default.shape({

package/lib/components/AddSelect/AddSelectFilter.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddSelectFilter = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _settings = require("../../settings");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+var componentName = 'AddSelectFilter';
+
+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 = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      filters = _useState2[0],
+      setFilters = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
+
+  var blockClass = "".concat(_settings.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), {}, (0, _defineProperty2.default)({}, 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.default.createElement("div", {
+    className: "".concat(blockClass, "-search")
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+    id: "temp-id",
+    labelText: textInputLabel,
+    placeholder: inputPlaceholder,
+    value: searchTerm,
+    onChange: searchHandler
+  }), showFilter && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    renderIcon: _iconsReact.Filter16,
+    hasIconOnly: true,
+    kind: "ghost",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    iconDescription: iconDescription,
+    className: "".concat(blockClass, "-toggle"),
+    size: "md"
+  }), open && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-content")
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Filters"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-opts")
+  }, filterOpts.map(function (filterOpts) {
+    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.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.default.createElement(_carbonComponentsReact.ButtonSet, {
+    className: "".concat(blockClass, "-button-set")
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "secondary",
+    onClick: resetFilters,
+    className: "".concat(blockClass, "-button")
+  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "primary",
+    onClick: applyFilters,
+    className: "".concat(blockClass, "-button")
+  }, primaryButtonText))));
+};
+
+exports.AddSelectFilter = AddSelectFilter;
+AddSelectFilter.propTypes = {
+  filterOpts: _propTypes.default.array,
+  handleFilter: _propTypes.default.func,
+  handleSearch: _propTypes.default.func,
+  iconDescription: _propTypes.default.string,
+  inputPlaceholder: _propTypes.default.string,
+  multi: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  primaryButtonText: _propTypes.default.string,
+  searchTerm: _propTypes.default.string,
+  secondaryButtonText: _propTypes.default.string,
+  textInputLabel: _propTypes.default.string
+};
+AddSelectFilter.displayName = componentName;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.normalize = exports.flatten = void 0;
+exports.normalize = exports.getGlobalFilterValues = exports.flatten = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -74,5 +74,38 @@ 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
+ */
+
+
+exports.flatten = flatten;
+
+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;
+};
 
-exports.flatten = flatten;
+exports.getGlobalFilterValues = getGlobalFilterValues;

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -11,8 +11,6 @@ exports.DataSpreadsheet = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -45,11 +43,7 @@ var _hooks = require("../../global/js/hooks");
 
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
-var _useResetSpreadsheetFocus = require("./hooks/useResetSpreadsheetFocus");
-
-var _useSpreadsheetOutsideClick = require("./hooks/useSpreadsheetOutsideClick");
-
-var _useMoveActiveCell = require("./hooks/useMoveActiveCell");
+var _hooks2 = require("./hooks");
 
 var _createActiveCellFn = require("./utils/createActiveCellFn");
 
@@ -107,6 +101,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
       onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var multiKeyTrackingRef = (0, _react.useRef)();
   var localRef = (0, _react.useRef)();
   var spreadsheetRef = ref || localRef;
   var focusedElement = (0, _hooks.useActiveElement)();
@@ -152,7 +147,8 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       setCellEditorValue = _useState16[1];
 
   var previousState = (0, _hooks.usePreviousValue)({
-    activeCellCoordinates: activeCellCoordinates
+    activeCellCoordinates: activeCellCoordinates,
+    isEditing: isEditing
   });
   var cellSizeValue = (0, _getCellSize.getCellSize)(cellSize);
   var cellEditorRef = (0, _react.useRef)();
@@ -162,7 +158,6 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       activeCellContent = _useState18[0],
       setActiveCellContent = _useState18[1];
 
-  var activeKeys = (0, _react.useRef)([]);
   var activeCellRef = (0, _react.useRef)();
   var cellEditorRulerRef = (0, _react.useRef)();
   var defaultColumn = (0, _react.useMemo)(function () {
@@ -172,6 +167,14 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       rowHeight: cellSizeValue
     };
   }, [cellSizeValue]);
+
+  var _useMultipleKeyTracki = (0, _hooks2.useMultipleKeyTracking)({
+    ref: multiKeyTrackingRef,
+    containerHasFocus: containerHasFocus,
+    isEditing: isEditing
+  }),
+      keysPressedList = _useMultipleKeyTracki.keysPressedList;
+
   var scrollBarSize = (0, _react.useMemo)(function () {
     return (0, _getScrollbarWidth.getScrollbarWidth)();
   }, []);
@@ -260,23 +263,21 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       });
     }
   }, [spreadsheetRef, rows, onActiveCellChange, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, defaultColumn]);
-  (0, _useResetSpreadsheetFocus.useResetSpreadsheetFocus)({
-    activeKeys: activeKeys,
+  (0, _hooks2.useResetSpreadsheetFocus)({
     focusedElement: focusedElement,
     removeActiveCell: removeActiveCell,
     setContainerHasFocus: setContainerHasFocus
   });
-  (0, _useSpreadsheetOutsideClick.useSpreadsheetOutsideClick)({
+  (0, _hooks2.useSpreadsheetOutsideClick)({
     spreadsheetRef: spreadsheetRef,
     setActiveCellCoordinates: setActiveCellCoordinates,
     setSelectionAreas: setSelectionAreas,
     removeActiveCell: removeActiveCell,
     removeCellSelections: _removeCellSelections.removeCellSelections,
     setContainerHasFocus: setContainerHasFocus,
-    activeKeys: activeKeys,
     removeCellEditor: removeCellEditor
   });
-  (0, _useMoveActiveCell.useMoveActiveCell)({
+  (0, _hooks2.useMoveActiveCell)({
     spreadsheetRef: spreadsheetRef,
     activeCellCoordinates: activeCellCoordinates,
     containerHasFocus: containerHasFocus,
@@ -313,10 +314,28 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       setCurrentMatcher(tempMatcher);
     }
   }, []);
+  var handleHomeEndKey = (0, _react.useCallback)(function (_ref4) {
+    var type = _ref4.type;
+
+    var coordinatesClone = _objectSpread({}, activeCellCoordinates);
+
+    updateActiveCellCoordinates({
+      coords: coordinatesClone,
+      updatedValue: {
+        column: type === 'home' ? 0 : columns.length - 1
+      }
+    });
+    (0, _removeCellSelections.removeCellSelections)({
+      spreadsheetRef: spreadsheetRef
+    });
+  }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
   var handleKeyPress = (0, _react.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;
@@ -333,28 +352,20 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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 && !(0, _handleMultipleKeys.includesShift)(keysPressedList)) {
         setSelectionAreas([]);
         setSelectionAreaData([]);
         (0, _removeCellSelections.removeCellSelections)({
           spreadsheetRef: spreadsheetRef
         });
       }
-    } // Update list of activeKeys
-
-
-    if (!((_activeKeys$current = activeKeys.current) !== null && _activeKeys$current !== void 0 && _activeKeys$current.includes(key))) {
-      var activeClone = (0, _toConsumableArray2.default)(activeKeys.current);
-      activeKeys.current = [].concat((0, _toConsumableArray2.default)(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) {
       (0, _handleMultipleKeys.handleMultipleKeys)({
-        activeKeys: activeKeys,
+        activeCellCoordinates: activeCellCoordinates,
+        event: event,
+        keysPressedList: keysPressedList,
         selectionAreas: selectionAreas,
         currentMatcher: currentMatcher,
         rows: rows,
@@ -365,9 +376,26 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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 && !(0, _handleMultipleKeys.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([]);
@@ -516,7 +544,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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);
@@ -524,7 +552,16 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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
+
+
+  (0, _react.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') {
@@ -555,10 +592,10 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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,
@@ -591,8 +628,8 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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;
@@ -701,21 +738,6 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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 = (0, _toConsumableArray2.default)(activeKeys.current);
-      var filteredKeysClone = activeKeysClone.filter(function (item) {
-        return item !== key;
-      });
-      activeKeys.current = filteredKeysClone;
-    }
-  };
-
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, getTableProps(), (0, _devtools.getDevtoolsProps)(componentName), {
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
     ref: spreadsheetRef,
@@ -724,11 +746,12 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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.default.createElement(_DataSpreadsheetHeader.DataSpreadsheetHeader, {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: multiKeyTrackingRef
+  }, /*#__PURE__*/_react.default.createElement(_DataSpreadsheetHeader.DataSpreadsheetHeader, {
     ref: spreadsheetRef,
     activeCellCoordinates: activeCellCoordinates,
     cellSize: cellSize,
@@ -791,7 +814,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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