@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -23,191 +23,192 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseMove = require('./hooks/useSpreadsheetMouseMove.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
-var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var activeCellCoordinates = _ref.activeCellCoordinates,
-    cellSize = _ref.cellSize,
-    columns = _ref.columns,
-    currentMatcher = _ref.currentMatcher,
-    defaultColumn = _ref.defaultColumn,
-    headerGroups = _ref.headerGroups,
-    scrollBarSize = _ref.scrollBarSize,
-    selectionAreas = _ref.selectionAreas,
-    selectedHeaderReorderActive = _ref.selectedHeaderReorderActive,
-    setSelectedHeaderReorderActive = _ref.setSelectedHeaderReorderActive,
-    setActiveCellCoordinates = _ref.setActiveCellCoordinates,
-    setCurrentMatcher = _ref.setCurrentMatcher,
-    setSelectionAreas = _ref.setSelectionAreas,
-    readOnlyTable = _ref.readOnlyTable,
-    disableColumnSwapping = _ref.disableColumnSwapping,
-    setSelectionAreaData = _ref.setSelectionAreaData,
-    rows = _ref.rows,
-    totalVisibleColumns = _ref.totalVisibleColumns,
-    updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
-    setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
-    headerCellHoldActive = _ref.headerCellHoldActive,
-    selectAllAriaLabel = _ref.selectAllAriaLabel,
-    visibleColumns = _ref.visibleColumns;
-  var _useState = React.useState(0),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    scrollBarSizeValue = _useState2[0],
-    setScrollBarSizeValue = _useState2[1];
-  var previousState = usePreviousValue.usePreviousValue({
-    cellSize: cellSize
+const blockClass = `${settings.pkg.prefix}--data-spreadsheet`;
+const DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    activeCellCoordinates,
+    cellSize,
+    columns,
+    currentMatcher,
+    defaultColumn,
+    headerGroups,
+    scrollBarSize,
+    selectionAreas,
+    selectedHeaderReorderActive,
+    setSelectedHeaderReorderActive,
+    setActiveCellCoordinates,
+    setCurrentMatcher,
+    setSelectionAreas,
+    readOnlyTable,
+    disableColumnSwapping,
+    setSelectionAreaData,
+    rows,
+    totalVisibleColumns,
+    updateActiveCellCoordinates,
+    setHeaderCellHoldActive,
+    headerCellHoldActive,
+    selectAllAriaLabel,
+    visibleColumns
+  } = _ref;
+  const [scrollBarSizeValue, setScrollBarSizeValue] = React.useState(0);
+  const previousState = usePreviousValue.usePreviousValue({
+    cellSize
   }) || {};
-  React.useEffect(function () {
-    if ((previousState === null || previousState === void 0 ? void 0 : previousState.cellSize) !== cellSize) {
-      var _current;
-      var scrollContainer = ref === null || ref === void 0 || (_current = ref.current) === null || _current === void 0 ? void 0 : _current.querySelector(".".concat(blockClass, "__list--container"));
-      var hasScrollBar = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) && (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight) && (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) > (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight);
-      var scrollBarValue = hasScrollBar ? 0 : scrollBarSize;
+  React.useEffect(() => {
+    if (previousState?.cellSize !== cellSize) {
+      const scrollContainer = ref?.current?.querySelector(`.${blockClass}__list--container`);
+      const hasScrollBar = scrollContainer?.scrollHeight && scrollContainer?.clientHeight && scrollContainer?.scrollHeight > scrollContainer?.clientHeight;
+      const scrollBarValue = hasScrollBar ? 0 : scrollBarSize;
 
       // fix for a11y violation element_scrollable_tabbable
-      if (!(scrollContainer !== null && scrollContainer !== void 0 && scrollContainer.getAttribute('tabIndex'))) {
-        scrollContainer === null || scrollContainer === void 0 || scrollContainer.setAttribute('tabIndex', '0');
+      if (!scrollContainer?.getAttribute('tabIndex')) {
+        scrollContainer?.setAttribute('tabIndex', '0');
       }
       setScrollBarSizeValue(scrollBarValue);
     }
-  }, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
-  var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
-    return function (event) {
-      var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
-      var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(event, 'shiftKey');
+  }, [cellSize, ref, scrollBarSize, previousState?.cellSize]);
+  const handleColumnHeaderClick = index => {
+    return event => {
+      const isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
+      const isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(event, 'shiftKey');
       handleHeaderCellSelection.handleHeaderCellSelection({
         type: 'column',
-        activeCellCoordinates: activeCellCoordinates,
-        rows: rows,
-        columns: columns,
-        currentMatcher: currentMatcher,
-        setActiveCellCoordinates: setActiveCellCoordinates,
-        setCurrentMatcher: setCurrentMatcher,
-        setSelectionAreas: setSelectionAreas,
+        activeCellCoordinates,
+        rows,
+        columns,
+        currentMatcher,
+        setActiveCellCoordinates,
+        setCurrentMatcher,
+        setSelectionAreas,
         spreadsheetRef: ref,
-        index: index,
+        index,
         isKeyboard: undefined,
-        setSelectionAreaData: setSelectionAreaData,
-        isHoldingCommandKey: isHoldingCommandKey,
-        isHoldingShiftKey: isHoldingShiftKey
+        setSelectionAreaData,
+        isHoldingCommandKey,
+        isHoldingShiftKey
       });
     };
   };
-  var handleSelectAllClick = function handleSelectAllClick() {
+  const handleSelectAllClick = () => {
     selectAllCells.selectAllCells({
-      ref: ref,
-      setCurrentMatcher: setCurrentMatcher,
-      setSelectionAreas: setSelectionAreas,
-      rows: rows,
-      columns: columns,
-      activeCellCoordinates: activeCellCoordinates,
-      updateActiveCellCoordinates: updateActiveCellCoordinates
+      ref,
+      setCurrentMatcher,
+      setSelectionAreas,
+      rows,
+      columns,
+      activeCellCoordinates,
+      updateActiveCellCoordinates
     });
   };
-  var handleHeaderMouseDown = function handleHeaderMouseDown(index) {
-    return function (event) {
-      var _selectionAreaToClone, _selectionAreaToClone2, _selectionAreaToClone3, _document;
+  const handleHeaderMouseDown = index => {
+    return event => {
       if (event.shiftKey) {
         // Remove columns, need to call handleHeaderCellSelection
         return;
       }
-      var selectionAreaToClone = selectionAreas === null || selectionAreas === void 0 ? void 0 : selectionAreas.filter(function (item) {
-        return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
-      });
-      var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat(selectionAreaToClone === null || selectionAreaToClone === void 0 || (_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
+      const selectionAreaToClone = selectionAreas?.filter(item => item?.matcher === currentMatcher);
+      const selectionAreaElement = ref.current.querySelector(`[data-matcher-id="${selectionAreaToClone?.[0]?.matcher}"]`);
       if (selectionAreaElement) {
-        selectionAreaElement.classList.add("".concat(blockClass, "__selection-area--element"));
+        selectionAreaElement.classList.add(`${blockClass}__selection-area--element`);
       }
       if (typeof setSelectedHeaderReorderActive === 'function') {
         setSelectedHeaderReorderActive(true);
       }
-      var clickXPosition = event.clientX;
-      var headerButtonCoords = event.target.getBoundingClientRect();
-      var headerIndex = event.target.getAttribute('data-column-index');
-      var offsetXValue = clickXPosition - headerButtonCoords.left;
-      var lowestColumnIndexFromSelectionArea = Math.min((selectionAreaToClone === null || selectionAreaToClone === void 0 || (_selectionAreaToClone2 = selectionAreaToClone[0]) === null || _selectionAreaToClone2 === void 0 || (_selectionAreaToClone2 = _selectionAreaToClone2.point1) === null || _selectionAreaToClone2 === void 0 ? void 0 : _selectionAreaToClone2.column) || 0, (selectionAreaToClone === null || selectionAreaToClone === void 0 || (_selectionAreaToClone3 = selectionAreaToClone[0]) === null || _selectionAreaToClone3 === void 0 || (_selectionAreaToClone3 = _selectionAreaToClone3.point2) === null || _selectionAreaToClone3 === void 0 ? void 0 : _selectionAreaToClone3.column) || 0);
-      var selectionAreaCoords = (selectionAreaElement === null || selectionAreaElement === void 0 ? void 0 : selectionAreaElement.getBoundingClientRect()) || new DOMRect();
-      var updatedOffsetDifference = lowestColumnIndexFromSelectionArea < parseInt(headerIndex) ? offsetXValue + (headerButtonCoords.left - (selectionAreaCoords === null || selectionAreaCoords === void 0 ? void 0 : selectionAreaCoords.left)) : offsetXValue;
-      var bodyContainer = (_document = document) === null || _document === void 0 || (_document = _document.querySelector(".".concat(blockClass, "__list--container"))) === null || _document === void 0 ? void 0 : _document.firstElementChild;
-      var selectionAreaClonedElement = selectionAreaElement === null || selectionAreaElement === void 0 ? void 0 : selectionAreaElement.cloneNode();
-      var reorderIndicatorLine = selectionAreaElement === null || selectionAreaElement === void 0 ? void 0 : selectionAreaElement.cloneNode();
+      const clickXPosition = event.clientX;
+      const headerButtonCoords = event.target.getBoundingClientRect();
+      const headerIndex = event.target.getAttribute('data-column-index');
+      const offsetXValue = clickXPosition - headerButtonCoords.left;
+      const lowestColumnIndexFromSelectionArea = Math.min(selectionAreaToClone?.[0]?.point1?.column || 0, selectionAreaToClone?.[0]?.point2?.column || 0);
+      const selectionAreaCoords = selectionAreaElement?.getBoundingClientRect() || new DOMRect();
+      const updatedOffsetDifference = lowestColumnIndexFromSelectionArea < parseInt(headerIndex) ? offsetXValue + (headerButtonCoords.left - selectionAreaCoords?.left) : offsetXValue;
+      const bodyContainer = document?.querySelector(`.${blockClass}__list--container`)?.firstElementChild;
+      const selectionAreaClonedElement = selectionAreaElement?.cloneNode();
+      const reorderIndicatorLine = selectionAreaElement?.cloneNode();
       if (reorderIndicatorLine) {
-        reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
+        reorderIndicatorLine.className = `${blockClass}__reorder-indicator-line`;
         reorderIndicatorLine.style.width = layout.px(2);
       }
-      selectionAreaClonedElement.classList.add("".concat(blockClass, "__selection-area--element-cloned"));
-      selectionAreaClonedElement.setAttribute('data-clone-offset-x', "".concat(updatedOffsetDifference));
+      selectionAreaClonedElement.classList.add(`${blockClass}__selection-area--element-cloned`);
+      selectionAreaClonedElement.setAttribute('data-clone-offset-x', `${updatedOffsetDifference}`);
       selectionAreaClonedElement.setAttribute('data-column-index-original', index);
-      bodyContainer === null || bodyContainer === void 0 || bodyContainer.appendChild(selectionAreaClonedElement);
-      bodyContainer === null || bodyContainer === void 0 || bodyContainer.appendChild(reorderIndicatorLine);
-      setHeaderCellHoldActive === null || setHeaderCellHoldActive === void 0 || setHeaderCellHoldActive(true);
+      bodyContainer?.appendChild(selectionAreaClonedElement);
+      bodyContainer?.appendChild(reorderIndicatorLine);
+      setHeaderCellHoldActive?.(true);
     };
   };
   useSpreadsheetMouseMove.useSpreadsheetMouseMove({
-    ref: ref,
-    headerCellHoldActive: headerCellHoldActive,
-    defaultColumn: defaultColumn
+    ref,
+    headerCellHoldActive,
+    defaultColumn
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__header--container")),
+    className: cx(`${blockClass}__header--container`),
     role: "rowgroup"
-  }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(function (headerGroup, index) {
-    var headerProps = propsHelper.prepareProps(headerGroup.getHeaderGroupProps(), 'key');
+  }, headerGroups?.map((headerGroup, index) => {
+    const headerProps = propsHelper.prepareProps(headerGroup.getHeaderGroupProps(), 'key');
     return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-      key: "header_".concat(index)
+      key: `header_${index}`
     }, headerProps, {
-      style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, headerGroup.getHeaderGroupProps().style), {}, {
+      style: {
+        ...headerGroup.getHeaderGroupProps().style,
         width: getSpreadsheetWidth.getSpreadsheetWidth({
           type: 'header',
-          headerGroup: headerGroup,
-          scrollBarSizeValue: scrollBarSizeValue,
-          totalVisibleColumns: totalVisibleColumns,
-          defaultColumn: defaultColumn,
+          headerGroup,
+          scrollBarSizeValue,
+          totalVisibleColumns,
+          defaultColumn,
           totalColumnsWidth: undefined,
-          visibleColumns: visibleColumns
+          visibleColumns
         }),
         overflow: 'hidden'
-      }),
-      className: "".concat(blockClass, "__tr")
+      },
+      className: `${blockClass}__tr`
     }), /*#__PURE__*/React.createElement("div", {
       role: "columnheader",
-      className: "".concat(blockClass, "__select-all-cell-container"),
+      className: `${blockClass}__select-all-cell-container`,
       style: {
-        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
-        height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
+        width: defaultColumn?.rowHeaderWidth,
+        height: defaultColumn?.rowHeight
       }
     }, /*#__PURE__*/React.createElement("button", {
-      id: "".concat(blockClass, "__cell--header--header"),
+      id: `${blockClass}__cell--header--header`,
       "data-row-index": "header",
       "data-column-index": "header",
       type: "button",
       style: {
-        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+        width: defaultColumn?.rowHeaderWidth
       },
       tabIndex: -1,
       "aria-label": selectAllAriaLabel,
       onClick: handleSelectAllClick,
-      className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _rollupPluginBabelHelpers.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) {
-      var colProps = propsHelper.prepareProps(column.getHeaderProps(), 'key');
-      var selectedHeader = checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
+      className: cx(`${blockClass}__th`, `${blockClass}--interactive-cell-element`, `${blockClass}__th--select-all`, {
+        [`${blockClass}__th--active-header`]: activeCellCoordinates?.column === 'header' && activeCellCoordinates?.row === 'header'
+      })
+    }, "\xA0")), headerGroup.headers.map((column, index) => {
+      const colProps = propsHelper.prepareProps(column.getHeaderProps(), 'key');
+      const selectedHeader = checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-        key: "column_".concat(index),
+        key: `column_${index}`,
         role: "columnheader",
-        className: "".concat(blockClass, "__columnheader")
+        className: `${blockClass}__columnheader`
       }, colProps), /*#__PURE__*/React.createElement("button", {
-        id: "".concat(blockClass, "__cell--header--").concat(index),
+        id: `${blockClass}__cell--header--${index}`,
         "data-row-index": "header",
         "data-column-index": index,
         tabIndex: -1,
         onMouseDown: selectedHeader && !readOnlyTable && !disableColumnSwapping ? handleHeaderMouseDown(index) : undefined,
-        onMouseUp: selectedHeader && !readOnlyTable && !disableColumnSwapping && typeof setSelectedHeaderReorderActive === 'function' ? function () {
-          return setSelectedHeaderReorderActive(false);
-        } : undefined,
+        onMouseUp: selectedHeader && !readOnlyTable && !disableColumnSwapping && typeof setSelectedHeaderReorderActive === 'function' ? () => setSelectedHeaderReorderActive(false) : undefined,
         onClick: !selectedHeader ? handleColumnHeaderClick(index) : undefined,
         style: {
-          height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
-          width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
+          height: defaultColumn?.rowHeight,
+          width: column?.width || defaultColumn?.width
         },
-        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--active-header-disabledSwapping"), disableColumnSwapping || readOnlyTable), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
+        className: cx(`${blockClass}__th`, `${blockClass}--interactive-cell-element`, {
+          [`${blockClass}__th--active-header`]: activeCellCoordinates?.column === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'column'),
+          [`${blockClass}__th--active-header-disabledSwapping`]: disableColumnSwapping || readOnlyTable,
+          [`${blockClass}__th--selected-header`]: selectedHeader,
+          [`${blockClass}__th--selected-header-reorder-active`]: selectedHeaderReorderActive
+        }),
         type: "button"
       }, column.render('Header')));
     }));

package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js

@@ -10,23 +10,25 @@
 var React = require('react');
 
 // Moves the placement of the active cell
-var useMoveActiveCell = function useMoveActiveCell(_ref) {
-  var spreadsheetRef = _ref.spreadsheetRef,
-    activeCellCoordinates = _ref.activeCellCoordinates,
-    containerHasFocus = _ref.containerHasFocus,
-    createActiveCell = _ref.createActiveCell,
-    activeCellContent = _ref.activeCellContent,
-    isActiveHeaderCellChanged = _ref.isActiveHeaderCellChanged;
-  var performCreateActiveCell;
+const useMoveActiveCell = _ref => {
+  let {
+    spreadsheetRef,
+    activeCellCoordinates,
+    containerHasFocus,
+    createActiveCell,
+    activeCellContent,
+    isActiveHeaderCellChanged
+  } = _ref;
+  let performCreateActiveCell;
   //new active cell is created when the activeCellContent changes or navigate through headers
   // Otherwise new active cell will display the old value in a glance
-  React.useEffect(function () {
+  React.useEffect(() => {
     performCreateActiveCell();
   }, [activeCellContent, performCreateActiveCell, isActiveHeaderCellChanged]);
-  performCreateActiveCell = React.useCallback(function () {
-    var activeCellPlacementElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column, "\"]"));
-    var shouldPlaceActiveCellInHeader = (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && true;
-    var selectAllElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"header\"][data-column-index=\"header\"]");
+  performCreateActiveCell = React.useCallback(() => {
+    const activeCellPlacementElement = spreadsheetRef?.current.querySelector(`[data-row-index="${activeCellCoordinates?.row}"][data-column-index="${activeCellCoordinates?.column}"]`);
+    const shouldPlaceActiveCellInHeader = activeCellCoordinates?.row === 'header' && true;
+    const selectAllElement = spreadsheetRef?.current.querySelector(`[data-row-index="header"][data-column-index="header"]`);
     if (containerHasFocus) {
       createActiveCell({
         placementElement: activeCellCoordinates ? activeCellPlacementElement : selectAllElement,

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

@@ -7,62 +7,48 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var handleMultipleKeys = require('../utils/handleMultipleKeys.js');
 var usePreviousValue = require('../../../global/js/hooks/usePreviousValue.js');
 
-var hasFocus = function hasFocus() {
-  return typeof document !== 'undefined' && document.hasFocus();
-};
-var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
-  var ref = _ref.ref,
-    containerHasFocus = _ref.containerHasFocus,
-    isEditing = _ref.isEditing;
-  var _useState = React.useState(''),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    usingMac = _useState2[0],
-    setUsingMac = _useState2[1];
-  var _useState3 = React.useState(hasFocus),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    windowFocused = _useState4[0],
-    setWindowFocused = _useState4[1];
-  var _useState5 = React.useState([]),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    keysPressedList = _useState6[0],
-    setKeysPressedList = _useState6[1];
-  var previousState = usePreviousValue.usePreviousValue({
-    isEditing: isEditing,
-    windowFocused: windowFocused,
-    containerHasFocus: containerHasFocus
+const hasFocus = () => typeof document !== 'undefined' && document.hasFocus();
+const useMultipleKeyTracking = _ref => {
+  let {
+    ref,
+    containerHasFocus,
+    isEditing
+  } = _ref;
+  const [usingMac, setUsingMac] = React.useState('');
+  const [windowFocused, setWindowFocused] = React.useState(hasFocus);
+  const [keysPressedList, setKeysPressedList] = React.useState([]);
+  const previousState = usePreviousValue.usePreviousValue({
+    isEditing,
+    windowFocused,
+    containerHasFocus
   });
 
   // useEffect to check for window focus, if window loses focus
   // we need to clear out the keysPressedList
-  React.useEffect(function () {
-    var userAgentString = window.navigator.userAgent;
+  React.useEffect(() => {
+    const userAgentString = window.navigator.userAgent;
     if (userAgentString.includes('Macintosh')) {
       setUsingMac(true);
     } else {
       setUsingMac(false);
     }
     setWindowFocused(hasFocus());
-    var onWindowFocus = function onWindowFocus() {
-      return setWindowFocused(true);
-    };
-    var onWindowBlur = function onWindowBlur() {
-      return setWindowFocused(false);
-    };
+    const onWindowFocus = () => setWindowFocused(true);
+    const onWindowBlur = () => setWindowFocused(false);
     window.addEventListener('focus', onWindowFocus);
     window.addEventListener('blur', onWindowBlur);
-    return function () {
+    return () => {
       window.removeEventListener('focus', onWindowFocus);
       window.removeEventListener('blur', onWindowBlur);
     };
   }, []);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (ref && containerHasFocus && !isEditing) {
-      ref.current.onkeydown = ref.current.onkeyup = function (event) {
+      ref.current.onkeydown = ref.current.onkeyup = 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
@@ -73,34 +59,30 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
           // we need to remove the previously pressed keys so that we
           // do not have keys in the pressed list that should not be
           if (handleMultipleKeys.includesResourceKey(keysPressedList, usingMac) && keysPressedList.length > 1) {
-            var clonedKeys = _rollupPluginBabelHelpers.toConsumableArray(keysPressedList);
-            var filteredClonedKeys = clonedKeys.filter(function (item) {
-              return item === 'MetaLeft' || item === 'MetaRight';
-            });
+            const clonedKeys = [...keysPressedList];
+            const filteredClonedKeys = clonedKeys.filter(item => item === 'MetaLeft' || item === 'MetaRight');
             filteredClonedKeys.push(event.code);
-            return setKeysPressedList(_rollupPluginBabelHelpers.toConsumableArray(new Set(filteredClonedKeys)));
+            return setKeysPressedList([...new Set(filteredClonedKeys)]);
           }
-          var tempKeys = _rollupPluginBabelHelpers.toConsumableArray(keysPressedList);
+          const tempKeys = [...keysPressedList];
           tempKeys.push(event.code);
-          setKeysPressedList(_rollupPluginBabelHelpers.toConsumableArray(new Set(tempKeys)));
+          setKeysPressedList([...new Set(tempKeys)]);
         }
         // If keyup, we will remove the key from the keysPressedList array
         if (event.type === 'keyup') {
-          var _tempKeys = _rollupPluginBabelHelpers.toConsumableArray(keysPressedList);
-          var filteredClone = _tempKeys.filter(function (item) {
-            return item !== event.code;
-          });
+          const tempKeys = [...keysPressedList];
+          const filteredClone = tempKeys.filter(item => 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(_rollupPluginBabelHelpers.toConsumableArray(new Set(filteredClone)));
+          setKeysPressedList([...new Set(filteredClone)]);
         }
       };
     }
-    if (previousState !== null && previousState !== void 0 && previousState.windowFocused && !windowFocused) {
+    if (previousState?.windowFocused && !windowFocused) {
       setKeysPressedList([]);
     }
     // Remove handlers if the spreadsheet container loses focus
@@ -108,15 +90,15 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
     if (ref && !containerHasFocus || isEditing) {
       ref.current.onkeydown = undefined;
       ref.current.onkeyup = undefined;
-      if (!(previousState !== null && previousState !== void 0 && previousState.isEditing) && isEditing || previousState !== null && previousState !== void 0 && previousState.containerHasFocus && !containerHasFocus) {
+      if (!previousState?.isEditing && isEditing || previousState?.containerHasFocus && !containerHasFocus) {
         setKeysPressedList([]);
       }
     }
-  }, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.containerHasFocus, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused, usingMac]);
+  }, [keysPressedList, containerHasFocus, ref, isEditing, previousState?.isEditing, previousState?.containerHasFocus, windowFocused, previousState?.windowFocused, usingMac]);
   return {
-    keysPressedList: keysPressedList,
-    windowFocused: windowFocused,
-    usingMac: usingMac
+    keysPressedList,
+    windowFocused,
+    usingMac
   };
 };
 

package/lib/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js

@@ -10,19 +10,20 @@
 var React = require('react');
 var settings = require('../../../settings.js');
 
-var useResetSpreadsheetFocus = function useResetSpreadsheetFocus(_ref) {
-  var _ref$blockClass = _ref.blockClass,
-    blockClass = _ref$blockClass === void 0 ? "".concat(settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
-    focusedElement = _ref.focusedElement,
-    removeActiveCell = _ref.removeActiveCell,
-    setContainerHasFocus = _ref.setContainerHasFocus;
+const useResetSpreadsheetFocus = _ref => {
+  let {
+    blockClass = `${settings.pkg.prefix}--data-spreadsheet`,
+    focusedElement,
+    removeActiveCell,
+    setContainerHasFocus
+  } = _ref;
   // Reset everything when spreadsheet loses focus
-  React.useEffect(function () {
-    if (!focusedElement.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
+  React.useEffect(() => {
+    if (!focusedElement.classList.contains(`${blockClass}--interactive-cell-element`)) {
       setContainerHasFocus(false);
       removeActiveCell();
     }
-    if (focusedElement.classList.contains(blockClass) || focusedElement.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
+    if (focusedElement.classList.contains(blockClass) || focusedElement.classList.contains(`${blockClass}--interactive-cell-element`)) {
       setContainerHasFocus(true);
     }
   }, [focusedElement, removeActiveCell, blockClass, setContainerHasFocus]);