@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js

@@ -7,96 +7,98 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../../../../../_virtual/index.js');
 var returnUpdatedActiveCell = require('./returnUpdatedActiveCell.js');
 var getCellIdAsObject = require('./getCellIdAsObject.js');
 
-var InlineEditContext = /*#__PURE__*/React.createContext();
-var inlineEditReducer = function inlineEditReducer(state, action) {
+const InlineEditContext = /*#__PURE__*/React.createContext();
+const inlineEditReducer = (state, action) => {
   switch (action.type) {
     case 'ADD_GRID_ACTIVE_FOCUS':
       {
-        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        return {
+          ...state,
           gridActive: true,
           activeCellId: action.payload,
           // set default active cell when grid receives focus
           previousActiveCellId: null
-        });
+        };
       }
     case 'REMOVE_GRID_ACTIVE_FOCUS':
       {
-        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        return {
+          ...state,
           gridActive: false,
           editId: null,
           activeCellId: null,
           previousActiveCellId: action.payload
-        });
+        };
       }
     case 'ENTER_EDIT_MODE':
       {
-        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        return {
+          ...state,
           activeCellId: action.payload.activeCellId,
           editId: action.payload.editId
-        });
+        };
       }
     case 'EXIT_EDIT_MODE':
       {
-        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        return {
+          ...state,
           activeCellId: action.payload,
           editId: null
-        });
+        };
       }
     case 'UPDATE_ACTIVE_CELL_ID':
       {
-        var _action$payload = action.payload,
-          direction = _action$payload.direction,
-          oldId = _action$payload.oldId,
-          instance = _action$payload.instance;
+        const {
+          direction,
+          oldId,
+          instance
+        } = action.payload;
         if (!action.payload.direction) {
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+          return {
+            ...state,
             activeCellId: action.payload,
             editId: null
-          });
+          };
         }
         if (direction && typeof direction === 'string') {
-          var activeCellCoords = getCellIdAsObject.getCellIdAsObject(oldId);
-          var totalVisibleColumns = instance.visibleColumns.filter(function (item) {
-            return item.id !== 'spacer';
-          });
+          const activeCellCoords = getCellIdAsObject.getCellIdAsObject(oldId);
+          const totalVisibleColumns = instance.visibleColumns.filter(item => item.id !== 'spacer');
           return returnUpdatedActiveCell.returnUpdatedActiveCell({
-            activeCellCoords: activeCellCoords,
-            direction: direction,
-            totalVisibleColumns: totalVisibleColumns,
-            state: state,
-            instance: instance
+            activeCellCoords,
+            direction,
+            totalVisibleColumns,
+            state,
+            instance
           });
         }
         break;
       }
     case 'SET_FEATURE_FLAGS':
       {
-        var _action$payload2;
-        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-          featureFlags: (_action$payload2 = action.payload) !== null && _action$payload2 !== void 0 ? _action$payload2 : {}
-        });
+        return {
+          ...state,
+          featureFlags: action.payload ?? {}
+        };
       }
     default:
       return state;
   }
 };
-var InlineEditProvider = function InlineEditProvider(_ref) {
-  var children = _ref.children;
-  var initialState = {};
-  var _useReducer = React.useReducer(inlineEditReducer, initialState),
-    _useReducer2 = _rollupPluginBabelHelpers.slicedToArray(_useReducer, 2),
-    state = _useReducer2[0],
-    dispatch = _useReducer2[1];
+const InlineEditProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  const initialState = {};
+  const [state, dispatch] = React.useReducer(inlineEditReducer, initialState);
   return /*#__PURE__*/React.createElement(InlineEditContext.Provider, {
     value: {
-      state: state,
-      dispatch: dispatch
+      state,
+      dispatch
     }
   }, children);
 };

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js

@@ -9,20 +9,18 @@
 
 // Turns activeCellId into an object to be able to
 // update cell coordinates more easily
-var getCellIdAsObject = function getCellIdAsObject(oldId) {
-  var oldIdArr = oldId.split('-');
-  var updatedOldValuesArray = oldIdArr.map(function (item) {
+const getCellIdAsObject = oldId => {
+  const oldIdArr = oldId.split('-');
+  const updatedOldValuesArray = oldIdArr.map(item => {
     if (isNaN(item)) {
       return item;
     }
     return Number(item);
   });
-  var indexArray = updatedOldValuesArray.filter(Number.isFinite);
-  var keyArray = updatedOldValuesArray.filter(function (item) {
-    return typeof item === 'string';
-  });
-  var activeCellCoords = {};
-  keyArray.forEach(function (element, index) {
+  const indexArray = updatedOldValuesArray.filter(Number.isFinite);
+  const keyArray = updatedOldValuesArray.filter(item => typeof item === 'string');
+  const activeCellCoords = {};
+  keyArray.forEach((element, index) => {
     activeCellCoords[element] = indexArray[index];
   });
   return activeCellCoords;

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js

@@ -7,31 +7,34 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var settings = require('../../../../../../settings.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
+const blockClass = `${settings.pkg.prefix}--datagrid`;
 // This function returns the state back to the reducer after
 // determining the new active cell value
-var returnUpdatedActiveCell = function returnUpdatedActiveCell(_ref) {
-  var activeCellCoords = _ref.activeCellCoords,
-    direction = _ref.direction,
-    totalVisibleColumns = _ref.totalVisibleColumns,
-    state = _ref.state,
-    instance = _ref.instance;
-  var newActiveCoords = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, activeCellCoords), {}, {
+const returnUpdatedActiveCell = _ref => {
+  let {
+    activeCellCoords,
+    direction,
+    totalVisibleColumns,
+    state,
+    instance
+  } = _ref;
+  const newActiveCoords = {
+    ...activeCellCoords,
     column: direction === 'right' ? activeCellCoords.column < totalVisibleColumns.length - 1 ? activeCellCoords.column + 1 : activeCellCoords.column : direction === 'left' ? activeCellCoords.column === 0 ? 0 : activeCellCoords.column - 1 : activeCellCoords.column,
     row: direction === 'up' ? activeCellCoords.row === 0 ? 0 : activeCellCoords.row - 1 : direction === 'down' ? activeCellCoords.row < instance.rows.length - 1 ? activeCellCoords.row + 1 : activeCellCoords.row : activeCellCoords.row
-  });
-  var newActiveCellId = "column-".concat(newActiveCoords.column, "-row-").concat(newActiveCoords.row);
-  var newCellIdButton = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit [data-cell-id=\"").concat(newActiveCellId, "\"] .").concat(blockClass, "__inline-edit-button"));
+  };
+  const newActiveCellId = `column-${newActiveCoords.column}-row-${newActiveCoords.row}`;
+  const newCellIdButton = document.querySelector(`#${instance.tableId} .${blockClass}__table-with-inline-edit [data-cell-id="${newActiveCellId}"] .${blockClass}__inline-edit-button`);
   // Allows scrollable area to keep focused/active cell id visible
   if (newCellIdButton) {
-    newCellIdButton === null || newCellIdButton === void 0 || newCellIdButton.focus();
+    newCellIdButton?.focus();
   }
-  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+  return {
+    ...state,
     activeCellId: newActiveCellId
-  });
+  };
 };
 
 exports.returnUpdatedActiveCell = returnUpdatedActiveCell;

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js

@@ -7,9 +7,11 @@
 
 'use strict';
 
-var handleGridFocus = function handleGridFocus(state, dispatch) {
-  var gridActive = state.gridActive,
-    previousActiveCellId = state.previousActiveCellId;
+const handleGridFocus = (state, dispatch) => {
+  const {
+    gridActive,
+    previousActiveCellId
+  } = state;
   if (!gridActive) {
     // Initialize grid active state
     dispatch({

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js

@@ -7,25 +7,30 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var settings = require('../../../../../settings.js');
 var handleMultipleKeys = require('./handleMultipleKeys.js');
 var getCellIdAsObject = require('./InlineEditContext/getCellIdAsObject.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var handleGridKeyPress = function handleGridKeyPress(_ref) {
-  var event = _ref.event,
-    dispatch = _ref.dispatch,
-    state = _ref.state,
-    instance = _ref.instance,
-    keysPressedList = _ref.keysPressedList,
-    usingMac = _ref.usingMac,
-    ref = _ref.ref;
-  var key = event.key;
-  var gridActive = state.gridActive,
-    activeCellId = state.activeCellId,
-    editId = state.editId;
-  var focusedCell = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit [data-cell-id=\"").concat(activeCellId, "\"]"));
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const handleGridKeyPress = _ref => {
+  let {
+    event,
+    dispatch,
+    state,
+    instance,
+    keysPressedList,
+    usingMac,
+    ref
+  } = _ref;
+  const {
+    key
+  } = event;
+  const {
+    gridActive,
+    activeCellId,
+    editId
+  } = state;
+  const focusedCell = document.querySelector(`#${instance.tableId} .${blockClass}__table-with-inline-edit [data-cell-id="${activeCellId}"]`);
 
   // If we reach this it means that tab was pressed while in
   // edit mode which should not remove the focus from the grid
@@ -36,7 +41,7 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
         type: 'EXIT_EDIT_MODE',
         payload: activeCellId
       });
-      var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
+      const inlineEditArea = document.querySelector(`#${instance.tableId} .${blockClass}__table-with-inline-edit`);
       inlineEditArea.focus();
     }
     event.preventDefault();
@@ -49,15 +54,17 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
         payload: activeCellId
       });
       event.preventDefault();
-      var _inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
-      _inlineEditArea.focus();
+      const inlineEditArea = document.querySelector(`#${instance.tableId} .${blockClass}__table-with-inline-edit`);
+      inlineEditArea.focus();
       return;
     }
   }
 
   // Checks if the dropdown menu is open
-  var dropdownIsActive = function dropdownIsActive() {
-    var selectedDropdown = ref === null || ref === void 0 ? void 0 : ref.current.querySelector("\n      #".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit [data-cell-id=\"").concat(activeCellId, "\"] button[role='combobox']\n    "));
+  const dropdownIsActive = () => {
+    const selectedDropdown = ref?.current.querySelector(`
+      #${instance.tableId} .${blockClass}__table-with-inline-edit [data-cell-id="${activeCellId}"] button[role='combobox']
+    `);
     if (selectedDropdown) {
       // Prevents arrow keys from scrolling any other content when dropdown menu is open
       event.preventDefault();
@@ -67,16 +74,16 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
   };
 
   // Checks if the date picker is open
-  var datePickerIsActive = function datePickerIsActive() {
-    var focusedCalendarElement = document.querySelector(".".concat(settings.carbon.prefix, "--date-picker__input.flatpickr-input.active"));
-    if (focusedCalendarElement || document.activeElement.classList.contains("flatpickr-day")) {
+  const datePickerIsActive = () => {
+    const focusedCalendarElement = document.querySelector(`.${settings.carbon.prefix}--date-picker__input.flatpickr-input.active`);
+    if (focusedCalendarElement || document.activeElement.classList.contains(`flatpickr-day`)) {
       return true;
     }
     return false;
   };
 
   // Stop grid key listener when in edit mode
-  var isEditing = focusedCell.getAttribute('data-inline-type') !== 'checkbox' && document.activeElement.id === activeCellId && document.activeElement.id === editId || dropdownIsActive() || datePickerIsActive();
+  const isEditing = focusedCell.getAttribute('data-inline-type') !== 'checkbox' && document.activeElement.id === activeCellId && document.activeElement.id === editId || dropdownIsActive() || datePickerIsActive();
   if (isEditing || !gridActive) {
     return;
   }
@@ -88,19 +95,19 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
   if (['End', 'Home', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1 && !isEditing && keysPressedList.length < 2) {
     event.preventDefault();
   }
-  var isDisabledCell = focusedCell.getAttribute('data-disabled') === 'false' ? false : true;
-  var isEditableCell = !event.target.classList.contains("".concat(blockClass, "__inline-edit-button--non-edit"));
-  var sharedUpdateParams = {
+  const isDisabledCell = focusedCell.getAttribute('data-disabled') === 'false' ? false : true;
+  const isEditableCell = !event.target.classList.contains(`${blockClass}__inline-edit-button--non-edit`);
+  const sharedUpdateParams = {
     oldId: activeCellId,
-    instance: instance
+    instance
   };
   if (keysPressedList.length > 1) {
     handleMultipleKeys.handleMultipleKeys({
-      usingMac: usingMac,
-      keysPressedList: keysPressedList,
-      dispatch: dispatch,
-      activeCellId: activeCellId,
-      instance: instance
+      usingMac,
+      keysPressedList,
+      dispatch,
+      activeCellId,
+      instance
     });
   }
   if (keysPressedList.length < 2) {
@@ -119,9 +126,10 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
         {
           dispatch({
             type: 'UPDATE_ACTIVE_CELL_ID',
-            payload: _rollupPluginBabelHelpers.objectSpread2({
-              direction: 'right'
-            }, sharedUpdateParams)
+            payload: {
+              direction: 'right',
+              ...sharedUpdateParams
+            }
           });
           break;
         }
@@ -129,9 +137,10 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
         {
           dispatch({
             type: 'UPDATE_ACTIVE_CELL_ID',
-            payload: _rollupPluginBabelHelpers.objectSpread2({
-              direction: 'left'
-            }, sharedUpdateParams)
+            payload: {
+              direction: 'left',
+              ...sharedUpdateParams
+            }
           });
           break;
         }
@@ -139,9 +148,10 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
         {
           dispatch({
             type: 'UPDATE_ACTIVE_CELL_ID',
-            payload: _rollupPluginBabelHelpers.objectSpread2({
-              direction: 'up'
-            }, sharedUpdateParams)
+            payload: {
+              direction: 'up',
+              ...sharedUpdateParams
+            }
           });
           break;
         }
@@ -149,21 +159,23 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
         {
           dispatch({
             type: 'UPDATE_ACTIVE_CELL_ID',
-            payload: _rollupPluginBabelHelpers.objectSpread2({
-              direction: 'down'
-            }, sharedUpdateParams)
+            payload: {
+              direction: 'down',
+              ...sharedUpdateParams
+            }
           });
           break;
         }
       // Move active cell to first column in current row
       case 'Home':
         {
-          var activeCellObject = getCellIdAsObject.getCellIdAsObject(activeCellId);
-          var newActiveCellCoords = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, activeCellObject), {}, {
+          const activeCellObject = getCellIdAsObject.getCellIdAsObject(activeCellId);
+          const newActiveCellCoords = {
+            ...activeCellObject,
             column: 0
-          });
-          var newActiveCellId = "column-".concat(newActiveCellCoords.column, "-row-").concat(newActiveCellCoords.row);
-          var scrollElement = document.querySelector("#".concat(instance.tableId, " .").concat(settings.pkg.prefix, "--datagrid__table-container"));
+          };
+          const newActiveCellId = `column-${newActiveCellCoords.column}-row-${newActiveCellCoords.row}`;
+          const scrollElement = document.querySelector(`#${instance.tableId} .${settings.pkg.prefix}--datagrid__table-container`);
           // Scroll table container to the furthest left position
           scrollElement.scrollLeft = 0;
           dispatch({
@@ -175,20 +187,19 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
       // Move active cell to last column in current row
       case 'End':
         {
-          var _activeCellObject = getCellIdAsObject.getCellIdAsObject(activeCellId);
-          var totalVisibleColumns = instance.visibleColumns.filter(function (item) {
-            return item.id !== 'spacer';
-          });
-          var _newActiveCellCoords = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, _activeCellObject), {}, {
+          const activeCellObject = getCellIdAsObject.getCellIdAsObject(activeCellId);
+          const totalVisibleColumns = instance.visibleColumns.filter(item => item.id !== 'spacer');
+          const newActiveCellCoords = {
+            ...activeCellObject,
             column: totalVisibleColumns.length - 1
-          });
-          var _newActiveCellId = "column-".concat(_newActiveCellCoords.column, "-row-").concat(_newActiveCellCoords.row);
-          var _scrollElement = document.querySelector("#".concat(instance.tableId, " .").concat(settings.pkg.prefix, "--datagrid__table-container"));
+          };
+          const newActiveCellId = `column-${newActiveCellCoords.column}-row-${newActiveCellCoords.row}`;
+          const scrollElement = document.querySelector(`#${instance.tableId} .${settings.pkg.prefix}--datagrid__table-container`);
           // Scroll table container to the furthest right position
-          _scrollElement.scrollLeft = _scrollElement.scrollWidth;
+          scrollElement.scrollLeft = scrollElement.scrollWidth;
           dispatch({
             type: 'UPDATE_ACTIVE_CELL_ID',
-            payload: _newActiveCellId
+            payload: newActiveCellId
           });
           break;
         }
@@ -202,32 +213,32 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
           }
           // Only go into edit mode if there is no editId, meaning that we're not already in edit mode
           if (!editId) {
-            var focusedType = focusedCell.getAttribute('data-inline-type');
+            const focusedType = focusedCell.getAttribute('data-inline-type');
             // Open dropdown immediately after entering edit mode for selection type
             if (focusedType === 'selection') {
-              setTimeout(function () {
-                var dropdownTrigger = focusedCell.querySelector('button');
-                dropdownTrigger === null || dropdownTrigger === void 0 || dropdownTrigger.click();
+              setTimeout(() => {
+                const dropdownTrigger = focusedCell.querySelector('button');
+                dropdownTrigger?.click();
               }, 1);
             }
             if (focusedType === 'checkbox') {
-              setTimeout(function () {
-                var checkboxTrigger = focusedCell.querySelector('input');
-                checkboxTrigger === null || checkboxTrigger === void 0 || checkboxTrigger.click();
-                checkboxTrigger === null || checkboxTrigger === void 0 || checkboxTrigger.focus();
+              setTimeout(() => {
+                const checkboxTrigger = focusedCell.querySelector('input');
+                checkboxTrigger?.click();
+                checkboxTrigger?.focus();
               }, 1);
             }
             if (focusedType === 'date') {
-              setTimeout(function () {
-                var dateInputTrigger = focusedCell.querySelector('input');
-                dateInputTrigger === null || dateInputTrigger === void 0 || dateInputTrigger.click();
-                dateInputTrigger === null || dateInputTrigger === void 0 || dateInputTrigger.focus();
+              setTimeout(() => {
+                const dateInputTrigger = focusedCell.querySelector('input');
+                dateInputTrigger?.click();
+                dateInputTrigger?.focus();
               }, 1);
             }
             dispatch({
               type: 'ENTER_EDIT_MODE',
               payload: {
-                activeCellId: activeCellId,
+                activeCellId,
                 editId: activeCellId
               }
             });

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js

@@ -11,17 +11,19 @@ var handleMultipleKeys$1 = require('../../../../DataSpreadsheet/utils/handleMult
 var settings = require('../../../../../settings.js');
 var getFocusableElements = require('../../../../../global/js/utils/getFocusableElements.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var handleMultipleKeys = function handleMultipleKeys(_ref) {
-  var usingMac = _ref.usingMac,
-    keysPressedList = _ref.keysPressedList,
-    dispatch = _ref.dispatch,
-    activeCellId = _ref.activeCellId,
-    instance = _ref.instance;
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const handleMultipleKeys = _ref => {
+  let {
+    usingMac,
+    keysPressedList,
+    dispatch,
+    activeCellId,
+    instance
+  } = _ref;
   // Resource key and Home
   // Move active cell to first cell in first row and column
   if (handleMultipleKeys$1.includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('Home')) {
-    var scrollElement = document.querySelector("#".concat(instance.tableId, " .").concat(settings.pkg.prefix, "--datagrid__table-container"));
+    const scrollElement = document.querySelector(`#${instance.tableId} .${settings.pkg.prefix}--datagrid__table-container`);
     // Scroll table container to the furthest top left position
     scrollElement.scrollTop = 0;
     scrollElement.scrollLeft = 0;
@@ -34,17 +36,14 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
   // Resource key and End
   // Move active cell to last cell in in the last row and column
   if (handleMultipleKeys$1.includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('End')) {
-    var _instance$rows;
-    var totalVisibleColumns = instance.visibleColumns.filter(function (item) {
-      return item.id !== 'spacer';
-    }).length;
-    var totalRows = (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.length;
-    var lastCellDataId = "column-".concat(totalVisibleColumns - 1, "-row-").concat(totalRows - 1);
-    var lastCellElement = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit [data-cell-id=\"").concat(activeCellId, "\"]"));
-    var _scrollElement = document.querySelector("#".concat(instance.tableId, " .").concat(settings.pkg.prefix, "--datagrid__table-container"));
+    const totalVisibleColumns = instance.visibleColumns.filter(item => item.id !== 'spacer').length;
+    const totalRows = instance.rows?.length;
+    const lastCellDataId = `column-${totalVisibleColumns - 1}-row-${totalRows - 1}`;
+    const lastCellElement = document.querySelector(`#${instance.tableId} .${blockClass}__table-with-inline-edit [data-cell-id="${activeCellId}"]`);
+    const scrollElement = document.querySelector(`#${instance.tableId} .${settings.pkg.prefix}--datagrid__table-container`);
     // Scroll table container to the furthest bottom right position
-    _scrollElement.scrollTop = _scrollElement.scrollHeight;
-    _scrollElement.scrollLeft = _scrollElement.scrollWidth;
+    scrollElement.scrollTop = scrollElement.scrollHeight;
+    scrollElement.scrollLeft = scrollElement.scrollWidth;
     if (lastCellElement) {
       dispatch({
         type: 'UPDATE_ACTIVE_CELL_ID',
@@ -55,7 +54,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
       // has not yet been rendered. In this case, we simply need to wait until the scrollable
       // container has scrolled to the bottom/right most position, then we can dispatch the
       // update active cell id action
-      setTimeout(function () {
+      setTimeout(() => {
         dispatch({
           type: 'UPDATE_ACTIVE_CELL_ID',
           payload: lastCellDataId
@@ -70,14 +69,11 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
       type: 'REMOVE_GRID_ACTIVE_FOCUS',
       payload: activeCellId
     });
-    var tableElement = document.querySelector("#".concat(instance.tableId));
-    var datagridFocusableElements = getFocusableElements.getFocusableElements(tableElement);
-    var indexOfTable = datagridFocusableElements.findIndex(function (item) {
-      return item instanceof HTMLTableElement;
-    });
+    const tableElement = document.querySelector(`#${instance.tableId}`);
+    const datagridFocusableElements = getFocusableElements.getFocusableElements(tableElement);
+    const indexOfTable = datagridFocusableElements.findIndex(item => item instanceof HTMLTableElement);
     if (indexOfTable && Number.isFinite(indexOfTable)) {
-      var _datagridFocusableEle;
-      (_datagridFocusableEle = datagridFocusableElements[indexOfTable]) === null || _datagridFocusableEle === void 0 || _datagridFocusableEle.focus();
+      datagridFocusableElements[indexOfTable]?.focus();
     }
   }
 };