@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.3

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

@@ -0,0 +1,534 @@
+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/react';
+import { Edit, CaretSort, ChevronDown, Calendar } from '@carbon/react/icons';
+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 _config$validator, _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
+  }, []); // Reverts cellValue back to initialValue when exiting edit mode via clicking outside
+  // of the cell (either on a regular cell or clicking into another inline edit cell) and the
+  // edit input is in an invalid state
+
+  useEffect(function () {
+    if ((previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && !editId || (previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && cellId !== editId) {
+      var _ref3 = config || {},
+          validator = _ref3.validator;
+
+      var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
+
+      if (isInvalid) {
+        setCellValue(initialValue);
+        saveCellData(initialValue);
+        return;
+      }
+    }
+  }, [previousState === null || previousState === void 0 ? void 0 : previousState.editId, editId, cellId, cellValue, config, initialValue, saveCellData]); // 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) {
+    // *****
+    // Only added this querySelector because v11 Datepicker isn't forwarding the ref which breaks how we were handling this in v10
+    // *****
+    var datePickerInputElement = document.querySelector("#".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index));
+    var dropdownTrigger = type === 'selection' ? dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current : datePickerInputElement;
+    dropdownTrigger.click();
+
+    if (type === 'date') {
+      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 _ref4 = config || {},
+                validator = _ref4.validator;
+
+            var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue); // If an invalid state is detected, Tab/Enter should not do anything
+            // until the input has a valid state once again
+
+            if (isInvalid) {
+              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 _ref5 = config || {},
+        inputProps = _ref5.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 _ref6 = downshiftState || {},
+              isOpen = _ref6.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 function (props) {
+        return /*#__PURE__*/React.createElement(Edit, _extends({
+          size: 16
+        }, props));
+      };
+    }
+
+    if (type === 'number') {
+      return function (props) {
+        return /*#__PURE__*/React.createElement(CaretSort, _extends({
+          size: 16
+        }, props));
+      };
+    }
+
+    if (type === 'selection') {
+      return function (props) {
+        return /*#__PURE__*/React.createElement(ChevronDown, _extends({
+          size: 16
+        }, props));
+      };
+    }
+
+    if (type === 'date') {
+      return function (props) {
+        return /*#__PURE__*/React.createElement(Calendar, _extends({
+          size: 16
+        }, props));
+      };
+    }
+  };
+
+  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); // To handle the interaction of the masked input when the DatePicker and updating
+
+        setTimeout(function () {
+          setInEditMode(false);
+          sendFocusBackToGrid();
+          dispatch({
+            type: 'EXIT_EDIT_MODE',
+            payload: newCellId
+          });
+        }, 1);
+      },
+      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: "".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;
+  };
+
+  var renderNumberInput = function renderNumberInput() {
+    var _ref7 = config || {},
+        validator = _ref7.validator;
+
+    return /*#__PURE__*/React.createElement(NumberInput, _extends({
+      placeholder: placeholder,
+      label: cellLabel
+    }, inputProps, {
+      id: cellId,
+      hideLabel: true,
+      defaultValue: cellValue,
+      invalid: validator === null || validator === void 0 ? void 0 : validator(cellValue),
+      invalidText: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.invalidText) || 'Provide missing invalidText',
+      onChange: function onChange(event, _ref8) {
+        var value = _ref8.value;
+        setCellValue(value);
+
+        if (inputProps.onChange) {
+          inputProps.onChange(value);
+        }
+      },
+      ref: numberInputRef
+    }));
+  };
+
+  var renderTextInput = function renderTextInput() {
+    var _ref9 = config || {},
+        validator = _ref9.validator;
+
+    var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
+    return /*#__PURE__*/React.createElement(TextInput, _extends({
+      labelText: cellLabel,
+      placeholder: placeholder
+    }, inputProps, {
+      id: cellId,
+      hideLabel: true,
+      defaultValue: cellValue,
+      invalid: isInvalid,
+      invalidText: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.invalidText) || 'Provide missing invalidText',
+      onChange: function onChange(event) {
+        setCellValue(event.target.value);
+
+        if (inputProps.onChange) {
+          inputProps.onChange(event.target.value);
+        }
+      },
+      ref: textInputRef
+    }));
+  };
+
+  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), _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 ? void 0 : (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)), _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' && renderTextInput(), type === 'number' && renderNumberInput(), 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';