@carbon/ibm-products 1.27.0 → 1.32.0

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -0,0 +1,467 @@
+import _extends from "@babel/runtime/helpers/extends";
+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, 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, useRef, useEffect, useContext, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { TextInput, NumberInput, Dropdown, DatePicker, DatePickerInput } from 'carbon-components-react';
+import { Edit16, CaretSort16, ChevronDown16, Calendar16 } from '@carbon/icons-react';
+import { InlineEditButton } from '../InlineEditButton';
+import { pkg } from '../../../../../../settings';
+import cx from 'classnames';
+import { InlineEditContext } from '../InlineEditContext';
+import { usePreviousValue } from '../../../../../../global/js/hooks';
+import { prepareProps } from '../../../../../../global/js/utils/props-helper';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var InlineEditCell = function InlineEditCell(_ref) {
+  var _cx3;
+
+  var cell = _ref.cell,
+      config = _ref.config,
+      instance = _ref.instance,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+      tabIndex = _ref.tabIndex,
+      value = _ref.value,
+      nonEditCell = _ref.nonEditCell,
+      totalInlineEditColumns = _ref.totalInlineEditColumns,
+      type = _ref.type;
+  var columnId = cell.column.id;
+  var columnIndex = instance.columns.findIndex(function (col) {
+    return col.id === columnId;
+  });
+  var cellId = "column-".concat(columnIndex, "-row-").concat(cell.row.index);
+  var totalColumns = instance.columns.length;
+
+  var _useContext = useContext(InlineEditContext),
+      state = _useContext.state,
+      dispatch = _useContext.dispatch;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      inEditMode = _useState2[0],
+      setInEditMode = _useState2[1];
+
+  var _useState3 = useState(value),
+      _useState4 = _slicedToArray(_useState3, 2),
+      cellValue = _useState4[0],
+      setCellValue = _useState4[1];
+
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      initialValue = _useState6[0],
+      setInitialValue = _useState6[1];
+
+  var _useState7 = useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      cellLabel = _useState8[0],
+      setCellLabel = _useState8[1];
+
+  var activeCellId = state.activeCellId,
+      editId = state.editId;
+  var previousState = usePreviousValue({
+    editId: editId,
+    activeCellId: activeCellId
+  });
+
+  var _ref2 = config || {},
+      inputProps = _ref2.inputProps;
+
+  var textInputRef = useRef();
+  var numberInputRef = useRef();
+  var dropdownRef = useRef();
+  var datePickerRef = useRef();
+  var outerButtonElement = useRef();
+  useEffect(function () {
+    setInitialValue(value);
+    var columnId = cell.column.id;
+    var columnLabel = instance.columns.find(function (item) {
+      return item.id === columnId;
+    });
+    setCellLabel(typeof columnLabel.Header === 'string' ? columnLabel.Header : 'Inline edit cell label'); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // If you are in edit mode and click outside of the cell,
+  // this changes the cell back to the InlineEditButton
+
+  useEffect(function () {
+    if (activeCellId !== cellId || !editId) {
+      setInEditMode(false);
+    }
+
+    if (activeCellId === cellId && editId === cellId && !nonEditCell) {
+      setInEditMode(true);
+      saveCellData(cellValue);
+    }
+  }, [activeCellId, cellId, nonEditCell, editId, cellValue, saveCellData]);
+
+  var openDropdown = function openDropdown(type) {
+    var _datePickerRef$curren;
+
+    var dropdownTrigger = type === 'selection' ? dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current : datePickerRef === null || datePickerRef === void 0 ? void 0 : (_datePickerRef$curren = datePickerRef.current) === null || _datePickerRef$curren === void 0 ? void 0 : _datePickerRef$curren.inputField;
+    dropdownTrigger.click();
+
+    if (type === 'date') {
+      // datePickerRef.current.cal.calendarContainer.focus();
+      dropdownTrigger === null || dropdownTrigger === void 0 ? void 0 : dropdownTrigger.focus();
+    }
+  }; // Re-initializes initialValue if clicking outside of a cell that was previously
+  // in edit mode, otherwise `initialValue` becomes stale
+
+
+  useEffect(function () {
+    if ((previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && (previousState === null || previousState === void 0 ? void 0 : previousState.activeCellId) === cellId && activeCellId !== cellId) {
+      setInitialValue(cellValue);
+    }
+  }, [previousState, cellId, cellValue, activeCellId]);
+
+  var handleInlineCellClick = function handleInlineCellClick() {
+    if (!inEditMode) {
+      dispatch({
+        type: 'ENTER_EDIT_MODE',
+        payload: {
+          activeCellId: cellId,
+          editId: cellId
+        }
+      });
+      setInEditMode(true);
+      setTimeout(function () {
+        if (type === 'selection' || type === 'date') {
+          openDropdown(type);
+        }
+      }, 1);
+    }
+  };
+
+  var rowSize = instance.rowSize,
+      onDataUpdate = instance.onDataUpdate; // Auto focus text input when entering edit mode
+
+  useEffect(function () {
+    if (inEditMode) {
+      if (type === 'text') {
+        textInputRef.current.focus();
+      }
+
+      if (type === 'number') {
+        numberInputRef.current.focus();
+      }
+    }
+  }, [inEditMode, type]); // Initialize cellValue from value prop
+
+  useEffect(function () {
+    setCellValue(value);
+  }, [value]); // Saves the new cell data, onDataUpdate is a required function to be
+  // passed to useDatagrid when using useInlineEdit
+
+  var saveCellData = useCallback(function (newValue) {
+    var columnId = cell.column.id;
+    var rowIndex = cell.row.index;
+    onDataUpdate(function (prev) {
+      return prev.map(function (row, index) {
+        if (index === rowIndex) {
+          return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, _defineProperty({}, columnId, newValue));
+        }
+
+        return row;
+      });
+    });
+  }, [cell, onDataUpdate]);
+
+  var sendFocusBackToGrid = function sendFocusBackToGrid() {
+    // Allows the onKeyDown listener to go back to the entire grid area
+    var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
+    inlineEditArea.focus();
+  };
+
+  var getNewCellId = function getNewCellId(key) {
+    var totalRows = instance.rows.length;
+    var newCellId = key === 'Enter' ? "column-".concat(columnIndex, "-row-").concat(cell.row.index < totalRows - 1 ? cell.row.index + 1 : cell.row.index) : "column-".concat(columnIndex < instance.columns.length - 1 ? columnIndex + 1 : columnIndex, "-row-").concat(cell.row.index);
+    return newCellId;
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    var key = event.key;
+
+    switch (key) {
+      // Save cell contents to data
+      case 'Tab':
+      case 'Enter':
+        {
+          if (inEditMode) {
+            // Dropdown saves are handled in the Dropdown's/DatePicker's onChange prop
+            if (type === 'selection' || type === 'date') {
+              return;
+            }
+
+            var newCellId = getNewCellId(key);
+            saveCellData(cellValue);
+            setInitialValue(cellValue);
+            dispatch({
+              type: 'EXIT_EDIT_MODE',
+              payload: newCellId
+            });
+            setInEditMode(false);
+            sendFocusBackToGrid();
+          }
+
+          break;
+        }
+
+      case 'Escape':
+        {
+          if (inEditMode) {
+            dispatch({
+              type: 'EXIT_EDIT_MODE',
+              payload: cellId
+            });
+            setCellValue(initialValue);
+            saveCellData(initialValue);
+            setInEditMode(false);
+            sendFocusBackToGrid();
+          }
+
+          break;
+        }
+
+      default:
+        return;
+    }
+  };
+
+  var addActiveState = function addActiveState() {
+    dispatch({
+      type: 'UPDATE_ACTIVE_CELL_ID',
+      payload: cellId
+    });
+  };
+
+  var renderDropdownItem = function renderDropdownItem(item) {
+    var includesIcon = !!(item !== null && item !== void 0 && item.icon);
+    return includesIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(item.icon), /*#__PURE__*/React.createElement("span", {
+      className: cx("".concat(blockClass, "__inline-edit--select-item"))
+    }, item === null || item === void 0 ? void 0 : item.text)) : item === null || item === void 0 ? void 0 : item.text;
+  };
+
+  var renderSelectCell = function renderSelectCell() {
+    var _ref3 = config || {},
+        inputProps = _ref3.inputProps;
+
+    return /*#__PURE__*/React.createElement(Dropdown, _extends({
+      id: cellId,
+      label: cellLabel || 'Dropdown menu options',
+      ariaLabel: cellLabel || 'Dropdown menu options'
+    }, inputProps, {
+      hideLabel: true,
+      style: {
+        width: cell.column.totalWidth
+      },
+      className: cx("".concat(blockClass, "__inline-edit--select"), _defineProperty({}, "".concat(blockClass, "__inline-edit--select-").concat(rowSize), rowSize)),
+      items: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.items) || [],
+      initialSelectedItem: cell.value,
+      itemToElement: function itemToElement(item) {
+        return renderDropdownItem(item);
+      },
+      renderSelectedItem: function renderSelectedItem(item) {
+        return renderDropdownItem(item);
+      },
+      onChange: function onChange(item) {
+        var _inputProps$onChange;
+
+        var newCellId = getNewCellId('Enter');
+        saveCellData(item.selectedItem);
+        setCellValue(item.selectedItem);
+        dispatch({
+          type: 'EXIT_EDIT_MODE',
+          payload: newCellId
+        });
+        setInEditMode(false);
+        sendFocusBackToGrid();
+        inputProps === null || inputProps === void 0 ? void 0 : (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, item.selectedItem);
+      },
+      downshiftProps: {
+        onStateChange: function onStateChange(downshiftState) {
+          var _ref4 = downshiftState || {},
+              isOpen = _ref4.isOpen; // !isOpen does not work in this case because a state change occurs on hover of the
+          // menu items and isOpen is changed to undefined which causes dispatch to be called unexpectedly
+
+
+          if (isOpen === false) {
+            dispatch({
+              type: 'EXIT_EDIT_MODE',
+              payload: cellId
+            });
+            setInEditMode(false);
+            sendFocusBackToGrid();
+          }
+        }
+      },
+      ref: dropdownRef
+    }));
+  };
+
+  var setRenderIcon = function setRenderIcon() {
+    if (type === 'text') {
+      return Edit16;
+    }
+
+    if (type === 'number') {
+      return CaretSort16;
+    }
+
+    if (type === 'selection') {
+      return ChevronDown16;
+    }
+
+    if (type === 'date') {
+      return Calendar16;
+    }
+  };
+
+  var renderDateCell = function renderDateCell() {
+    var _config$inputProps, _outerButtonElement$c;
+
+    var datePickerPreparedProps = prepareProps(config.inputProps, ['datePickerInputProps']);
+    var datePickerInputProps = config === null || config === void 0 ? void 0 : (_config$inputProps = config.inputProps) === null || _config$inputProps === void 0 ? void 0 : _config$inputProps.datePickerInputProps;
+    return /*#__PURE__*/React.createElement(DatePicker, _extends({}, datePickerPreparedProps, {
+      appendTo: outerButtonElement === null || outerButtonElement === void 0 ? void 0 : (_outerButtonElement$c = outerButtonElement.current) === null || _outerButtonElement$c === void 0 ? void 0 : _outerButtonElement$c.parentElement,
+      ref: datePickerRef,
+      style: {
+        width: cell.column.totalWidth
+      },
+      datePickerType: "single",
+      className: cx("".concat(blockClass, "__inline-edit--date"), _defineProperty({}, "".concat(blockClass, "__inline-edit--date-").concat(rowSize), rowSize)),
+      onChange: function onChange(newDate) {
+        var _datePickerPreparedPr;
+
+        var newDateObj = newDate[0];
+        datePickerPreparedProps === null || datePickerPreparedProps === void 0 ? void 0 : (_datePickerPreparedPr = datePickerPreparedProps.onChange) === null || _datePickerPreparedPr === void 0 ? void 0 : _datePickerPreparedPr.call(datePickerPreparedProps, newDateObj, cell);
+        var newCellId = getNewCellId('Enter');
+        saveCellData(newDateObj);
+        setCellValue(newDateObj);
+        setInEditMode(false);
+        sendFocusBackToGrid();
+        dispatch({
+          type: 'EXIT_EDIT_MODE',
+          payload: newCellId
+        });
+      },
+      value: cell.value
+    }), /*#__PURE__*/React.createElement(DatePickerInput, _extends({}, datePickerInputProps, {
+      style: {
+        position: 'static'
+      },
+      placeholder: (datePickerInputProps === null || datePickerInputProps === void 0 ? void 0 : datePickerInputProps.placeholder) || 'mm/dd/yyyy',
+      labelText: (datePickerInputProps === null || datePickerInputProps === void 0 ? void 0 : datePickerInputProps.labelText) || cellLabel || 'Set date',
+      id: datePickerInputProps.id || "".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index),
+      hideLabel: true
+    })));
+  }; // Ensures that months and days are all 2 digits, prefixes 0 if `num` is a single digit
+
+
+  var padTo2Digits = function padTo2Digits(num) {
+    return num.toString().padStart(2, '0');
+  };
+
+  var buildDate = function buildDate(value) {
+    if (value instanceof Date) {
+      var _config$dateFormat = config.dateFormat,
+          dateFormat = _config$dateFormat === void 0 ? 'm/d/Y' : _config$dateFormat;
+      var maskedFullYear = value.getFullYear();
+      var maskedMonth = padTo2Digits(value.getMonth() + 1);
+      var maskedDay = padTo2Digits(value.getDate());
+
+      if (dateFormat === 'm/d/Y' || dateFormat === 'm/d/y') {
+        return [maskedMonth, maskedDay, maskedFullYear].join('/');
+      }
+
+      if (dateFormat === 'd/m/Y' || dateFormat === 'd/m/y') {
+        return [maskedDay, maskedMonth, maskedFullYear].join('/');
+      }
+    }
+
+    return null;
+  };
+
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React.createElement("div", {
+      ref: outerButtonElement,
+      "data-cell-id": cellId,
+      "data-column-index": columnIndex,
+      "data-row-index": cell.row.index,
+      "data-disabled": nonEditCell,
+      "data-inline-type": type,
+      onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
+      onKeyDown: !nonEditCell ? handleKeyDown : null,
+      className: cx("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), _cx3))
+    }, !inEditMode && /*#__PURE__*/React.createElement(InlineEditButton, {
+      isActiveCell: cellId === activeCellId,
+      renderIcon: setRenderIcon(),
+      label: type === 'selection' ? value.text : type === 'date' ? buildDate(value) : value,
+      labelIcon: (value === null || value === void 0 ? void 0 : value.icon) || null,
+      placeholder: placeholder,
+      tabIndex: tabIndex,
+      nonEditCell: nonEditCell,
+      columnConfig: cell.column,
+      totalInlineEditColumns: totalInlineEditColumns,
+      totalColumns: totalColumns,
+      type: type
+    }), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/React.createElement(React.Fragment, null, type === 'text' && /*#__PURE__*/React.createElement(TextInput, _extends({
+      labelText: cellLabel,
+      placeholder: placeholder
+    }, inputProps, {
+      id: cellId,
+      hideLabel: true,
+      defaultValue: cellValue,
+      onChange: function onChange(event) {
+        setCellValue(event.target.value);
+
+        if (inputProps.onChange) {
+          inputProps.onChange(event.target.value);
+        }
+      },
+      ref: textInputRef
+    })), type === 'number' && /*#__PURE__*/React.createElement(NumberInput, _extends({
+      placeholder: placeholder,
+      label: cellLabel
+    }, inputProps, {
+      id: cellId,
+      hideLabel: true,
+      defaultValue: cellValue,
+      onChange: function onChange(event) {
+        setCellValue(event.imaginaryTarget.value);
+
+        if (inputProps.onChange) {
+          inputProps.onChange(event.imaginaryTarget.value);
+        }
+      },
+      ref: numberInputRef
+    })), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
+  );
+};
+InlineEditCell.propTypes = {
+  cell: PropTypes.object,
+  config: PropTypes.object,
+  instance: PropTypes.shape({
+    columns: PropTypes.arrayOf(PropTypes.object),
+    onDataUpdate: PropTypes.func,
+    rows: PropTypes.arrayOf(PropTypes.object),
+    rowSize: PropTypes.string,
+    tableId: PropTypes.string
+  }),
+  nonEditCell: PropTypes.bool,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.number,
+  totalInlineEditColumns: PropTypes.number,
+  type: PropTypes.oneOf(['text', 'number', 'selection', 'date']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.object])
+};

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js

@@ -0,0 +1 @@
+export { InlineEditCell } from './InlineEditCell';

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

@@ -0,0 +1,112 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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
+ *
+ * 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, { createContext, useReducer } from 'react';
+import PropTypes from 'prop-types';
+import { returnUpdatedActiveCell } from './returnUpdatedActiveCell';
+import { getCellIdAsObject } from './getCellIdAsObject';
+export var InlineEditContext = /*#__PURE__*/createContext();
+
+var inlineEditReducer = function inlineEditReducer(state, action) {
+  switch (action.type) {
+    case 'ADD_GRID_ACTIVE_FOCUS':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          gridActive: true,
+          activeCellId: action.payload,
+          // set default active cell when grid receives focus
+          previousActiveCellId: null
+        });
+      }
+
+    case 'REMOVE_GRID_ACTIVE_FOCUS':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          gridActive: false,
+          editId: null,
+          activeCellId: null,
+          previousActiveCellId: action.payload
+        });
+      }
+
+    case 'ENTER_EDIT_MODE':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          activeCellId: action.payload.activeCellId,
+          editId: action.payload.editId
+        });
+      }
+
+    case 'EXIT_EDIT_MODE':
+      {
+        return _objectSpread(_objectSpread({}, 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;
+
+        if (!action.payload.direction) {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            activeCellId: action.payload,
+            editId: null
+          });
+        }
+
+        if (direction && typeof direction === 'string') {
+          var activeCellCoords = getCellIdAsObject(oldId);
+          var totalVisibleColumns = instance.visibleColumns.filter(function (item) {
+            return item.id !== 'spacer';
+          });
+          return returnUpdatedActiveCell({
+            activeCellCoords: activeCellCoords,
+            direction: direction,
+            totalVisibleColumns: totalVisibleColumns,
+            state: state,
+            instance: instance
+          });
+        }
+
+        break;
+      }
+
+    default:
+      return state;
+  }
+};
+
+export var InlineEditProvider = function InlineEditProvider(_ref) {
+  var children = _ref.children;
+  var initialState = {};
+
+  var _useReducer = useReducer(inlineEditReducer, initialState),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  return /*#__PURE__*/React.createElement(InlineEditContext.Provider, {
+    value: {
+      state: state,
+      dispatch: dispatch
+    }
+  }, children);
+};
+InlineEditProvider.propTypes = {
+  children: PropTypes.element
+};

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

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+// Turns activeCellId into an object to be able to
+// update cell coordinates more easily
+export var getCellIdAsObject = function getCellIdAsObject(oldId) {
+  var oldIdArr = oldId.split('-');
+  var updatedOldValuesArray = oldIdArr.map(function (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) {
+    activeCellCoords[element] = indexArray[index];
+  });
+  return activeCellCoords;
+};

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js

@@ -0,0 +1 @@
+export { InlineEditProvider, InlineEditContext } from './InlineEditContext';

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

@@ -0,0 +1,39 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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
+ *
+ * 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 { pkg } from '../../../../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid"); // This function returns the state back to the reducer after
+// determining the new active cell value
+
+export var returnUpdatedActiveCell = function returnUpdatedActiveCell(_ref) {
+  var activeCellCoords = _ref.activeCellCoords,
+      direction = _ref.direction,
+      totalVisibleColumns = _ref.totalVisibleColumns,
+      state = _ref.state,
+      instance = _ref.instance;
+
+  var newActiveCoords = _objectSpread(_objectSpread({}, 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")); // Allows scrollable area to keep focused/active cell id visible
+
+  if (newCellIdButton) {
+    newCellIdButton === null || newCellIdButton === void 0 ? void 0 : newCellIdButton.focus();
+  }
+
+  return _objectSpread(_objectSpread({}, state), {}, {
+    activeCellId: newActiveCellId
+  });
+};

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

@@ -0,0 +1,19 @@
+/**
+ * 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 var handleGridFocus = function handleGridFocus(state, dispatch) {
+  var gridActive = state.gridActive,
+      previousActiveCellId = state.previousActiveCellId;
+
+  if (!gridActive) {
+    // Initialize grid active state
+    dispatch({
+      type: 'ADD_GRID_ACTIVE_FOCUS',
+      payload: previousActiveCellId || 'column-0-row-0' // If there is a previous active cell id that is found use that, otherwise use the first cell in the grid area
+
+    });
+  }
+};