@carbon/ibm-products 2.0.0-rc.9 → 2.0.1

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

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _typeof from "@babel/runtime/helpers/typeof";
 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';
@@ -24,59 +23,50 @@ 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 _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;
+    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;
-
+    state = _useContext.state,
+    dispatch = _useContext.dispatch;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      inEditMode = _useState2[0],
-      setInEditMode = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    inEditMode = _useState2[0],
+    setInEditMode = _useState2[1];
   var _useState3 = useState(value),
-      _useState4 = _slicedToArray(_useState3, 2),
-      cellValue = _useState4[0],
-      setCellValue = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    cellValue = _useState4[0],
+    setCellValue = _useState4[1];
   var _useState5 = useState(),
-      _useState6 = _slicedToArray(_useState5, 2),
-      initialValue = _useState6[0],
-      setInitialValue = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    initialValue = _useState6[0],
+    setInitialValue = _useState6[1];
   var _useState7 = useState(),
-      _useState8 = _slicedToArray(_useState7, 2),
-      cellLabel = _useState8[0],
-      setCellLabel = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    cellLabel = _useState8[0],
+    setCellLabel = _useState8[1];
   var activeCellId = state.activeCellId,
-      editId = state.editId;
+    editId = state.editId;
   var previousState = usePreviousValue({
     editId: editId,
     activeCellId: activeCellId
   });
-
   var _ref2 = config || {},
-      inputProps = _ref2.inputProps;
-
+    inputProps = _ref2.inputProps;
   var textInputRef = useRef();
   var numberInputRef = useRef();
   var dropdownRef = useRef();
@@ -88,38 +78,37 @@ export var InlineEditCell = function InlineEditCell(_ref) {
     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
+    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;
-
+        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
+  }, [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
@@ -127,20 +116,18 @@ export var InlineEditCell = function InlineEditCell(_ref) {
     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
-
+  };
 
+  // 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({
@@ -158,27 +145,28 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       }, 1);
     }
   };
-
   var rowSize = instance.rowSize,
-      onDataUpdate = instance.onDataUpdate; // Auto focus text input when entering edit mode
+    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
+  }, [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
+  }, [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;
@@ -187,27 +175,22 @@ export var InlineEditCell = function InlineEditCell(_ref) {
         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':
@@ -218,17 +201,14 @@ export var InlineEditCell = function InlineEditCell(_ref) {
             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
+              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);
@@ -239,10 +219,8 @@ export var InlineEditCell = function InlineEditCell(_ref) {
             setInEditMode(false);
             sendFocusBackToGrid();
           }
-
           break;
         }
-
       case 'Escape':
         {
           if (inEditMode) {
@@ -255,33 +233,32 @@ export var InlineEditCell = function InlineEditCell(_ref) {
             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 handleTransformedItem = function handleTransformedItem(items) {
+    return items !== null && items !== void 0 && items.length && _typeof(items[0]) === 'object' ? function (item) {
+      return renderDropdownItem(item);
+    } : null;
+  };
   var renderSelectCell = function renderSelectCell() {
     var _ref5 = config || {},
-        inputProps = _ref5.inputProps;
-
+      inputProps = _ref5.inputProps;
     return /*#__PURE__*/React.createElement(Dropdown, _extends({
       id: cellId,
       label: cellLabel || 'Dropdown menu options',
@@ -294,15 +271,10 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       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);
-      },
+      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);
@@ -317,10 +289,9 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       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
+            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',
@@ -334,7 +305,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       ref: dropdownRef
     }));
   };
-
   var setRenderIcon = function setRenderIcon() {
     if (type === 'text') {
       return function (props) {
@@ -343,7 +313,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
         }, props));
       };
     }
-
     if (type === 'number') {
       return function (props) {
         return /*#__PURE__*/React.createElement(CaretSort, _extends({
@@ -351,7 +320,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
         }, props));
       };
     }
-
     if (type === 'selection') {
       return function (props) {
         return /*#__PURE__*/React.createElement(ChevronDown, _extends({
@@ -359,7 +327,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
         }, props));
       };
     }
-
     if (type === 'date') {
       return function (props) {
         return /*#__PURE__*/React.createElement(Calendar, _extends({
@@ -368,10 +335,8 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       };
     }
   };
-
   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, {
@@ -384,13 +349,12 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       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
-
+        setCellValue(newDateObj);
+        // To handle the interaction of the masked input when the DatePicker and updating
         setTimeout(function () {
           setInEditMode(false);
           sendFocusBackToGrid();
@@ -410,37 +374,33 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       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
-
+  };
 
+  // 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 _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') {
+      if (dateFormat === 'm/d/Y' || value === 'm/d/y') {
         return [maskedMonth, maskedDay, maskedFullYear].join('/');
       }
-
-      if (dateFormat === 'd/m/Y' || dateFormat === 'd/m/y') {
+      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;
-
+      validator = _ref7.validator;
     return /*#__PURE__*/React.createElement(NumberInput, _extends({
       placeholder: placeholder,
       label: cellLabel
@@ -453,7 +413,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       onChange: function onChange(event, _ref8) {
         var value = _ref8.value;
         setCellValue(value);
-
         if (inputProps.onChange) {
           inputProps.onChange(value);
         }
@@ -461,11 +420,9 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       ref: numberInputRef
     }));
   };
-
   var renderTextInput = function renderTextInput() {
     var _ref9 = config || {},
-        validator = _ref9.validator;
-
+      validator = _ref9.validator;
     var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
     return /*#__PURE__*/React.createElement(TextInput, _extends({
       labelText: cellLabel,
@@ -478,7 +435,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       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);
         }
@@ -486,7 +442,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       ref: textInputRef
     }));
   };
-
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -503,7 +458,7 @@ export var InlineEditCell = function InlineEditCell(_ref) {
     }, !inEditMode && /*#__PURE__*/React.createElement(InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),
-      label: type === 'selection' ? value.text : type === 'date' ? buildDate(value) : value,
+      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,

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

@@ -1,22 +1,19 @@
 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':
@@ -28,7 +25,6 @@ var inlineEditReducer = function inlineEditReducer(state, action) {
           previousActiveCellId: null
         });
       }
-
     case 'REMOVE_GRID_ACTIVE_FOCUS':
       {
         return _objectSpread(_objectSpread({}, state), {}, {
@@ -38,7 +34,6 @@ var inlineEditReducer = function inlineEditReducer(state, action) {
           previousActiveCellId: action.payload
         });
       }
-
     case 'ENTER_EDIT_MODE':
       {
         return _objectSpread(_objectSpread({}, state), {}, {
@@ -46,7 +41,6 @@ var inlineEditReducer = function inlineEditReducer(state, action) {
           editId: action.payload.editId
         });
       }
-
     case 'EXIT_EDIT_MODE':
       {
         return _objectSpread(_objectSpread({}, state), {}, {
@@ -54,21 +48,18 @@ var inlineEditReducer = function inlineEditReducer(state, action) {
           editId: null
         });
       }
-
     case 'UPDATE_ACTIVE_CELL_ID':
       {
         var _action$payload = action.payload,
-            direction = _action$payload.direction,
-            oldId = _action$payload.oldId,
-            instance = _action$payload.instance;
-
+          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) {
@@ -82,24 +73,19 @@ var inlineEditReducer = function inlineEditReducer(state, action) {
             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];
-
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
   return /*#__PURE__*/React.createElement(InlineEditContext.Provider, {
     value: {
       state: state,

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

@@ -4,6 +4,7 @@
  * 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) {
@@ -12,7 +13,6 @@ export var getCellIdAsObject = function getCellIdAsObject(oldId) {
     if (isNaN(item)) {
       return item;
     }
-
     return Number(item);
   });
   var indexArray = updatedOldValuesArray.filter(Number.isFinite);

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

@@ -1,38 +1,33 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * Copyright IBM Corp. 2022, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import { pkg } from '../../../../../../settings';
-var blockClass = "".concat(pkg.prefix, "--datagrid"); // This function returns the state back to the reducer after
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+// This function returns the state back to the reducer after
 // determining the new active cell value
-
 export var returnUpdatedActiveCell = function returnUpdatedActiveCell(_ref) {
   var activeCellCoords = _ref.activeCellCoords,
-      direction = _ref.direction,
-      totalVisibleColumns = _ref.totalVisibleColumns,
-      state = _ref.state,
-      instance = _ref.instance;
-
+    direction = _ref.direction,
+    totalVisibleColumns = _ref.totalVisibleColumns,
+    state = _ref.state,
+    instance = _ref.instance;
   var newActiveCoords = _objectSpread(_objectSpread({}, activeCellCoords), {}, {
     column: direction === 'right' ? activeCellCoords.column < totalVisibleColumns.length - 1 ? activeCellCoords.column + 1 : activeCellCoords.column : direction === 'left' ? activeCellCoords.column === 0 ? 0 : activeCellCoords.column - 1 : activeCellCoords.column,
     row: direction === 'up' ? activeCellCoords.row === 0 ? 0 : activeCellCoords.row - 1 : direction === 'down' ? activeCellCoords.row < instance.rows.length - 1 ? activeCellCoords.row + 1 : activeCellCoords.row : activeCellCoords.row
   });
-
   var newActiveCellId = "column-".concat(newActiveCoords.column, "-row-").concat(newActiveCoords.row);
-  var newCellIdButton = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit [data-cell-id=\"").concat(newActiveCellId, "\"] .").concat(blockClass, "__inline-edit-button")); // Allows scrollable area to keep focused/active cell id visible
-
+  var newCellIdButton = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit [data-cell-id=\"").concat(newActiveCellId, "\"] .").concat(blockClass, "__inline-edit-button"));
+  // Allows scrollable area to keep focused/active cell id visible
   if (newCellIdButton) {
     newCellIdButton === null || newCellIdButton === void 0 ? void 0 : newCellIdButton.focus();
   }
-
   return _objectSpread(_objectSpread({}, state), {}, {
     activeCellId: newActiveCellId
   });

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

@@ -4,16 +4,15 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 export var handleGridFocus = function handleGridFocus(state, dispatch) {
   var gridActive = state.gridActive,
-      previousActiveCellId = state.previousActiveCellId;
-
+    previousActiveCellId = state.previousActiveCellId;
   if (!gridActive) {
     // Initialize grid active state
     dispatch({
       type: 'ADD_GRID_ACTIVE_FOCUS',
       payload: previousActiveCellId || 'column-0-row-0' // If there is a previous active cell id that is found use that, otherwise use the first cell in the grid area
-
     });
   }
 };