@carbon/ibm-products 1.27.0 → 1.31.0

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

@@ -0,0 +1,483 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineEditCell = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _InlineEditButton = require("../InlineEditButton");
+
+var _settings = require("../../../../../../settings");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _InlineEditContext = require("../InlineEditContext");
+
+var _hooks = require("../../../../../../global/js/hooks");
+
+var _propsHelper = require("../../../../../../global/js/utils/props-helper");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+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,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Inline edit type text label' : _ref$label,
+      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 = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
+      state = _useContext.state,
+      dispatch = _useContext.dispatch;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      inEditMode = _useState2[0],
+      setInEditMode = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(value),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      cellValue = _useState4[0],
+      setCellValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      initialValue = _useState6[0],
+      setInitialValue = _useState6[1];
+
+  var activeCellId = state.activeCellId,
+      editId = state.editId;
+  var previousState = (0, _hooks.usePreviousValue)({
+    editId: editId,
+    activeCellId: activeCellId
+  });
+
+  var _ref2 = config || {},
+      inputProps = _ref2.inputProps;
+
+  var textInputRef = (0, _react.useRef)();
+  var numberInputRef = (0, _react.useRef)();
+  var dropdownRef = (0, _react.useRef)();
+  var datePickerRef = (0, _react.useRef)();
+  var outerButtonElement = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    setInitialValue(value); // 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
+
+  (0, _react.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
+
+
+  (0, _react.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
+
+  (0, _react.useEffect)(function () {
+    if (inEditMode) {
+      if (type === 'text') {
+        textInputRef.current.focus();
+      }
+
+      if (type === 'number') {
+        numberInputRef.current.focus();
+      }
+    }
+  }, [inEditMode, type]); // Initialize cellValue from value prop
+
+  (0, _react.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 = (0, _react.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]), {}, (0, _defineProperty2.default)({}, 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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(item.icon), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)("".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.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({
+      id: cellId,
+      label: "Dropdown menu options"
+    }, inputProps, {
+      hideLabel: true,
+      style: {
+        width: cell.column.totalWidth
+      },
+      className: (0, _classnames.default)("".concat(blockClass, "__inline-edit--select"), (0, _defineProperty2.default)({}, "".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 _iconsReact.Edit16;
+    }
+
+    if (type === 'number') {
+      return _iconsReact.CaretSort16;
+    }
+
+    if (type === 'selection') {
+      return _iconsReact.ChevronDown16;
+    }
+
+    if (type === 'date') {
+      return _iconsReact.Calendar16;
+    }
+  };
+
+  var renderDateCell = function renderDateCell() {
+    var _config$inputProps, _outerButtonElement$c;
+
+    var datePickerPreparedProps = (0, _propsHelper.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.default.createElement(_carbonComponentsReact.DatePicker, (0, _extends2.default)({}, 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: (0, _classnames.default)("".concat(blockClass, "__inline-edit--date"), (0, _defineProperty2.default)({}, "".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.default.createElement(_carbonComponentsReact.DatePickerInput, (0, _extends2.default)({}, 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) || '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.default.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: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), _cx3))
+    }, !inEditMode && /*#__PURE__*/_react.default.createElement(_InlineEditButton.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.default.createElement(_react.default.Fragment, null, type === 'text' && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, (0, _extends2.default)({
+      labelText: label,
+      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.default.createElement(_carbonComponentsReact.NumberInput, (0, _extends2.default)({
+      placeholder: placeholder,
+      label: label
+    }, 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()))
+  );
+};
+
+exports.InlineEditCell = InlineEditCell;
+InlineEditCell.propTypes = {
+  cell: _propTypes.default.object,
+  config: _propTypes.default.object,
+  instance: _propTypes.default.shape({
+    columns: _propTypes.default.arrayOf(_propTypes.default.object),
+    onDataUpdate: _propTypes.default.func,
+    rows: _propTypes.default.arrayOf(_propTypes.default.object),
+    rowSize: _propTypes.default.string,
+    tableId: _propTypes.default.string
+  }),
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  nonEditCell: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  tabIndex: _propTypes.default.number,
+  totalInlineEditColumns: _propTypes.default.number,
+  type: _propTypes.default.oneOf(['text', 'number', 'selection', 'date']),
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.object])
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InlineEditCell", {
+  enumerable: true,
+  get: function get() {
+    return _InlineEditCell.InlineEditCell;
+  }
+});
+
+var _InlineEditCell = require("./InlineEditCell");

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

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineEditProvider = exports.InlineEditContext = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _returnUpdatedActiveCell = require("./returnUpdatedActiveCell");
+
+var _getCellIdAsObject = require("./getCellIdAsObject");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var InlineEditContext = /*#__PURE__*/(0, _react.createContext)();
+exports.InlineEditContext = InlineEditContext;
+
+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 = (0, _getCellIdAsObject.getCellIdAsObject)(oldId);
+          var totalVisibleColumns = instance.visibleColumns.filter(function (item) {
+            return item.id !== 'spacer';
+          });
+          return (0, _returnUpdatedActiveCell.returnUpdatedActiveCell)({
+            activeCellCoords: activeCellCoords,
+            direction: direction,
+            totalVisibleColumns: totalVisibleColumns,
+            state: state,
+            instance: instance
+          });
+        }
+
+        break;
+      }
+
+    default:
+      return state;
+  }
+};
+
+var InlineEditProvider = function InlineEditProvider(_ref) {
+  var children = _ref.children;
+  var initialState = {};
+
+  var _useReducer = (0, _react.useReducer)(inlineEditReducer, initialState),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  return /*#__PURE__*/_react.default.createElement(InlineEditContext.Provider, {
+    value: {
+      state: state,
+      dispatch: dispatch
+    }
+  }, children);
+};
+
+exports.InlineEditProvider = InlineEditProvider;
+InlineEditProvider.propTypes = {
+  children: _propTypes.default.element
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCellIdAsObject = void 0;
+
+/**
+ * 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
+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;
+};
+
+exports.getCellIdAsObject = getCellIdAsObject;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InlineEditContext", {
+  enumerable: true,
+  get: function get() {
+    return _InlineEditContext.InlineEditContext;
+  }
+});
+Object.defineProperty(exports, "InlineEditProvider", {
+  enumerable: true,
+  get: function get() {
+    return _InlineEditContext.InlineEditProvider;
+  }
+});
+
+var _InlineEditContext = require("./InlineEditContext");