@carbon/ibm-products 2.0.0-rc.34 → 2.0.0-rc.38

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

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

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

@@ -0,0 +1,498 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineEditCell = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+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 _react2 = require("@carbon/react");
+var _icons = require("@carbon/react/icons");
+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 || _typeof3(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; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 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.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var InlineEditCell = function InlineEditCell(_ref) {
+  var _config$validator, _cx3, _value$text;
+  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 = (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 _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    cellLabel = _useState8[0],
+    setCellLabel = _useState8[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);
+    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
+  (0, _react.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
+  (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) {
+    // *****
+    // 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
+  (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 _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.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 handleTransformedItem = function handleTransformedItem(items) {
+    return items !== null && items !== void 0 && items.length && (0, _typeof2.default)(items[0]) === 'object' ? function (item) {
+      return renderDropdownItem(item);
+    } : null;
+  };
+  var renderSelectCell = function renderSelectCell() {
+    var _ref5 = config || {},
+      inputProps = _ref5.inputProps;
+    return /*#__PURE__*/_react.default.createElement(_react2.Dropdown, (0, _extends2.default)({
+      id: cellId,
+      label: cellLabel || 'Dropdown menu options',
+      ariaLabel: cellLabel || '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: handleTransformedItem(inputProps === null || inputProps === void 0 ? void 0 : inputProps.items),
+      renderSelectedItem: handleTransformedItem(inputProps === null || inputProps === void 0 ? void 0 : inputProps.items),
+      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.default.createElement(_icons.Edit, (0, _extends2.default)({
+          size: 16
+        }, props));
+      };
+    }
+    if (type === 'number') {
+      return function (props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.CaretSort, (0, _extends2.default)({
+          size: 16
+        }, props));
+      };
+    }
+    if (type === 'selection') {
+      return function (props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, (0, _extends2.default)({
+          size: 16
+        }, props));
+      };
+    }
+    if (type === 'date') {
+      return function (props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.Calendar, (0, _extends2.default)({
+          size: 16
+        }, props));
+      };
+    }
+  };
+  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(_react2.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);
+        // 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.default.createElement(_react2.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) || 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) {
+    var _config$inputProps2;
+    var dateFormat = config === null || config === void 0 ? void 0 : (_config$inputProps2 = config.inputProps) === null || _config$inputProps2 === void 0 ? void 0 : _config$inputProps2.dateFormat;
+    if (value instanceof Date) {
+      var maskedFullYear = value.getFullYear();
+      var maskedMonth = padTo2Digits(value.getMonth() + 1);
+      var maskedDay = padTo2Digits(value.getDate());
+      if (dateFormat === 'm/d/Y' || value === 'm/d/y') {
+        return [maskedMonth, maskedDay, maskedFullYear].join('/');
+      }
+      if (dateFormat === 'd/m/Y' || dateFormat === 'd/m/y' || dateFormat === undefined) {
+        return [maskedDay, maskedMonth, maskedFullYear].join('/');
+      }
+    } else {
+      return value;
+    }
+    return null;
+  };
+  var renderNumberInput = function renderNumberInput() {
+    var _ref7 = config || {},
+      validator = _ref7.validator;
+    return /*#__PURE__*/_react.default.createElement(_react2.NumberInput, (0, _extends2.default)({
+      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.default.createElement(_react2.TextInput, (0, _extends2.default)({
+      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.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), (0, _defineProperty2.default)(_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.default.createElement(_InlineEditButton.InlineEditButton, {
+      isActiveCell: cellId === activeCellId,
+      renderIcon: setRenderIcon(),
+      label: type === 'selection' ? (_value$text = value === null || value === void 0 ? void 0 : value.text) !== null && _value$text !== void 0 ? _value$text : value : 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' && renderTextInput(), type === 'number' && renderNumberInput(), 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
+  }),
+  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,12 @@
+"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,108 @@
+"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; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 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.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
+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
+};