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

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

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InlineEditButton = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _settings = require("../../../../../../settings");
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -24,22 +17,21 @@ var _settings = require("../../../../../../settings");
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var InlineEditButton = function InlineEditButton(_ref) {
   var _cx, _cx2;
-
   var label = _ref.label,
-      Icon = _ref.renderIcon,
-      disabled = _ref.disabled,
-      LabelIcon = _ref.labelIcon,
-      placeholder = _ref.placeholder,
-      nonEditCell = _ref.nonEditCell,
-      isActiveCell = _ref.isActiveCell,
-      columnConfig = _ref.columnConfig,
-      totalInlineEditColumns = _ref.totalInlineEditColumns,
-      totalColumns = _ref.totalColumns,
-      type = _ref.type;
+    Icon = _ref.renderIcon,
+    disabled = _ref.disabled,
+    LabelIcon = _ref.labelIcon,
+    placeholder = _ref.placeholder,
+    nonEditCell = _ref.nonEditCell,
+    isActiveCell = _ref.isActiveCell,
+    columnConfig = _ref.columnConfig,
+    totalInlineEditColumns = _ref.totalInlineEditColumns,
+    totalColumns = _ref.totalColumns,
+    type = _ref.type;
   var inlineEditColsLessThanHalfOfTotal = totalInlineEditColumns < totalColumns / 2;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--edit-less-than-half-of-total-cols"), inlineEditColsLessThanHalfOfTotal), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
@@ -58,7 +50,6 @@ var InlineEditButton = function InlineEditButton(_ref) {
     className: "".concat(blockClass, "__inline-edit-button-icon")
   }, /*#__PURE__*/_react.default.createElement(Icon, null)));
 };
-
 exports.InlineEditButton = InlineEditButton;
 InlineEditButton.propTypes = {
   columnConfig: _propTypes.default.object,

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

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "InlineEditButton", {
     return _InlineEditButton.InlineEditButton;
   }
 });
-
 var _InlineEditButton = require("./InlineEditButton");

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

@@ -1,104 +1,80 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
+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 || _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 _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; }
-
+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;
-
+  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 = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
-      state = _useContext.state,
-      dispatch = _useContext.dispatch;
-
+    state = _useContext.state,
+    dispatch = _useContext.dispatch;
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      inEditMode = _useState2[0],
-      setInEditMode = _useState2[1];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    cellLabel = _useState8[0],
+    setCellLabel = _useState8[1];
   var activeCellId = state.activeCellId,
-      editId = state.editId;
+    editId = state.editId;
   var previousState = (0, _hooks.usePreviousValue)({
     editId: editId,
     activeCellId: activeCellId
   });
-
   var _ref2 = config || {},
-      inputProps = _ref2.inputProps;
-
+    inputProps = _ref2.inputProps;
   var textInputRef = (0, _react.useRef)();
   var numberInputRef = (0, _react.useRef)();
   var dropdownRef = (0, _react.useRef)();
@@ -110,38 +86,37 @@ 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
-
   (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;
-
+        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
   (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
@@ -149,20 +124,18 @@ 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
   (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({
@@ -180,27 +153,28 @@ 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
   (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
+  }, [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
+  }, [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;
@@ -209,27 +183,22 @@ var InlineEditCell = function InlineEditCell(_ref) {
         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':
@@ -240,17 +209,14 @@ 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);
@@ -261,10 +227,8 @@ var InlineEditCell = function InlineEditCell(_ref) {
             setInEditMode(false);
             sendFocusBackToGrid();
           }
-
           break;
         }
-
       case 'Escape':
         {
           if (inEditMode) {
@@ -277,33 +241,32 @@ 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.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;
-
+      inputProps = _ref5.inputProps;
     return /*#__PURE__*/_react.default.createElement(_react2.Dropdown, (0, _extends2.default)({
       id: cellId,
       label: cellLabel || 'Dropdown menu options',
@@ -316,15 +279,10 @@ var InlineEditCell = function InlineEditCell(_ref) {
       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);
-      },
+      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);
@@ -339,10 +297,9 @@ 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',
@@ -356,7 +313,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
       ref: dropdownRef
     }));
   };
-
   var setRenderIcon = function setRenderIcon() {
     if (type === 'text') {
       return function (props) {
@@ -365,7 +321,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
         }, props));
       };
     }
-
     if (type === 'number') {
       return function (props) {
         return /*#__PURE__*/_react.default.createElement(_icons.CaretSort, (0, _extends2.default)({
@@ -373,7 +328,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
         }, props));
       };
     }
-
     if (type === 'selection') {
       return function (props) {
         return /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, (0, _extends2.default)({
@@ -381,7 +335,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
         }, props));
       };
     }
-
     if (type === 'date') {
       return function (props) {
         return /*#__PURE__*/_react.default.createElement(_icons.Calendar, (0, _extends2.default)({
@@ -390,10 +343,8 @@ var InlineEditCell = function InlineEditCell(_ref) {
       };
     }
   };
-
   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, {
@@ -406,13 +357,12 @@ var InlineEditCell = function InlineEditCell(_ref) {
       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
-
+        setCellValue(newDateObj);
+        // To handle the interaction of the masked input when the DatePicker and updating
         setTimeout(function () {
           setInEditMode(false);
           sendFocusBackToGrid();
@@ -432,37 +382,33 @@ 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.default.createElement(_react2.NumberInput, (0, _extends2.default)({
       placeholder: placeholder,
       label: cellLabel
@@ -475,7 +421,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
       onChange: function onChange(event, _ref8) {
         var value = _ref8.value;
         setCellValue(value);
-
         if (inputProps.onChange) {
           inputProps.onChange(value);
         }
@@ -483,11 +428,9 @@ 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.default.createElement(_react2.TextInput, (0, _extends2.default)({
       labelText: cellLabel,
@@ -500,7 +443,6 @@ 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);
         }
@@ -508,7 +450,6 @@ 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
@@ -525,7 +466,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
     }, !inEditMode && /*#__PURE__*/_react.default.createElement(_InlineEditButton.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,
@@ -537,7 +478,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
     }), !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,

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

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "InlineEditCell", {
     return _InlineEditCell.InlineEditCell;
   }
 });
-
 var _InlineEditCell = require("./InlineEditCell");