@carbon/ibm-products 2.43.1-canary.8 → 2.43.2-canary.1

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -112,6 +112,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     _useState18 = _slicedToArray(_useState17, 2),
     headerCellHoldActive = _useState18[0],
     setHeaderCellHoldActive = _useState18[1];
+  var isBlurSpreadsheet = useRef(false);
   var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
     isActiveHeaderCellChanged = _useState20[0],
@@ -122,7 +123,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setActiveCellInsideSelectionArea = _useState22[1];
   var previousState = usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
-    isEditing: isEditing
+    isEditing: isEditing,
+    cellEditorValue: cellEditorValue
   }) || {};
   var cellSizeValue = getCellSize(cellSize);
   var cellEditorRef = useRef();
@@ -216,7 +218,13 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
         });
       }
     }
-  }, [activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
+    // For when we edit and focus out of data spreadsheet
+    if (isEditing && previousState.activeCellCoordinates && isBlurSpreadsheet.current) {
+      setActiveCellContent(previousState.cellEditorValue);
+      isBlurSpreadsheet.current = false;
+      removeCellEditor();
+    }
+  }, [isBlurSpreadsheet, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.cellEditorValue, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
   var createActiveCell = useCallback(function (_ref3) {
     var placementElement = _ref3.placementElement,
       coords = _ref3.coords,
@@ -243,6 +251,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setContainerHasFocus: setContainerHasFocus
   });
   useSpreadsheetOutsideClick({
+    isBlurSpreadsheet: isBlurSpreadsheet,
     spreadsheetRef: spreadsheetRef,
     setActiveCellCoordinates: setActiveCellCoordinates,
     setSelectionAreas: setSelectionAreas,

package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.d.ts

@@ -1,4 +1,5 @@
-export function useSpreadsheetOutsideClick({ spreadsheetRef, blockClass, setActiveCellCoordinates, setSelectionAreas, removeActiveCell, setContainerHasFocus, removeCellEditor, }: {
+export function useSpreadsheetOutsideClick({ isBlurSpreadsheet, spreadsheetRef, blockClass, setActiveCellCoordinates, setSelectionAreas, removeActiveCell, setContainerHasFocus, removeCellEditor, }: {
+    isBlurSpreadsheet: any;
     spreadsheetRef: any;
     blockClass?: string | undefined;
     setActiveCellCoordinates: any;

package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js

@@ -11,7 +11,8 @@ import { removeCellSelections } from '../utils/removeCellSelections.js';
 
 // Click outside useEffect for spreadsheet
 var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
-  var spreadsheetRef = _ref.spreadsheetRef,
+  var isBlurSpreadsheet = _ref.isBlurSpreadsheet,
+    spreadsheetRef = _ref.spreadsheetRef,
     _ref$blockClass = _ref.blockClass,
     blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
     setActiveCellCoordinates = _ref.setActiveCellCoordinates,
@@ -24,6 +25,7 @@ var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
       if (!spreadsheetRef.current || spreadsheetRef.current.contains(event.target) || event.target.classList.contains("".concat(blockClass, "__active-cell--highlight")) || event.target.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
         return;
       }
+      isBlurSpreadsheet.current = true;
       setActiveCellCoordinates(null);
       setSelectionAreas([]);
       removeActiveCell();
@@ -31,13 +33,12 @@ var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
         spreadsheetRef: spreadsheetRef
       });
       setContainerHasFocus(false);
-      removeCellEditor();
     };
     document.addEventListener('click', handleOutsideClick);
     return function () {
       document.removeEventListener('click', handleOutsideClick);
     };
-  }, [spreadsheetRef, removeActiveCell, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
+  }, [isBlurSpreadsheet, spreadsheetRef, removeActiveCell, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
 };
 
 export { useSpreadsheetOutsideClick };

package/es/components/DataSpreadsheet/types/index.d.ts

@@ -10,6 +10,7 @@ export interface ActiveCellCoordinates {
     column?: number | string;
 }
 export interface PrevState {
+    cellEditorValue?: string;
     activeCellCoordinates?: ActiveCellCoordinates;
     isEditing?: boolean;
     selectionAreaData?: object[];

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -121,6 +121,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
     headerCellHoldActive = _useState18[0],
     setHeaderCellHoldActive = _useState18[1];
+  var isBlurSpreadsheet = React.useRef(false);
   var _useState19 = React.useState(false),
     _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
     isActiveHeaderCellChanged = _useState20[0],
@@ -131,7 +132,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     setActiveCellInsideSelectionArea = _useState22[1];
   var previousState = usePreviousValue.usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
-    isEditing: isEditing
+    isEditing: isEditing,
+    cellEditorValue: cellEditorValue
   }) || {};
   var cellSizeValue = getCellSize.getCellSize(cellSize);
   var cellEditorRef = React.useRef();
@@ -225,7 +227,13 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
         });
       }
     }
-  }, [activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
+    // For when we edit and focus out of data spreadsheet
+    if (isEditing && previousState.activeCellCoordinates && isBlurSpreadsheet.current) {
+      setActiveCellContent(previousState.cellEditorValue);
+      isBlurSpreadsheet.current = false;
+      removeCellEditor();
+    }
+  }, [isBlurSpreadsheet, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.cellEditorValue, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
   var createActiveCell = React.useCallback(function (_ref3) {
     var placementElement = _ref3.placementElement,
       coords = _ref3.coords,
@@ -252,6 +260,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     setContainerHasFocus: setContainerHasFocus
   });
   useSpreadsheetOutsideClick.useSpreadsheetOutsideClick({
+    isBlurSpreadsheet: isBlurSpreadsheet,
     spreadsheetRef: spreadsheetRef,
     setActiveCellCoordinates: setActiveCellCoordinates,
     setSelectionAreas: setSelectionAreas,

package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.d.ts

@@ -1,4 +1,5 @@
-export function useSpreadsheetOutsideClick({ spreadsheetRef, blockClass, setActiveCellCoordinates, setSelectionAreas, removeActiveCell, setContainerHasFocus, removeCellEditor, }: {
+export function useSpreadsheetOutsideClick({ isBlurSpreadsheet, spreadsheetRef, blockClass, setActiveCellCoordinates, setSelectionAreas, removeActiveCell, setContainerHasFocus, removeCellEditor, }: {
+    isBlurSpreadsheet: any;
     spreadsheetRef: any;
     blockClass?: string | undefined;
     setActiveCellCoordinates: any;

package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js

@@ -15,7 +15,8 @@ var removeCellSelections = require('../utils/removeCellSelections.js');
 
 // Click outside useEffect for spreadsheet
 var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
-  var spreadsheetRef = _ref.spreadsheetRef,
+  var isBlurSpreadsheet = _ref.isBlurSpreadsheet,
+    spreadsheetRef = _ref.spreadsheetRef,
     _ref$blockClass = _ref.blockClass,
     blockClass = _ref$blockClass === void 0 ? "".concat(settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
     setActiveCellCoordinates = _ref.setActiveCellCoordinates,
@@ -28,6 +29,7 @@ var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
       if (!spreadsheetRef.current || spreadsheetRef.current.contains(event.target) || event.target.classList.contains("".concat(blockClass, "__active-cell--highlight")) || event.target.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
         return;
       }
+      isBlurSpreadsheet.current = true;
       setActiveCellCoordinates(null);
       setSelectionAreas([]);
       removeActiveCell();
@@ -35,13 +37,12 @@ var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
         spreadsheetRef: spreadsheetRef
       });
       setContainerHasFocus(false);
-      removeCellEditor();
     };
     document.addEventListener('click', handleOutsideClick);
     return function () {
       document.removeEventListener('click', handleOutsideClick);
     };
-  }, [spreadsheetRef, removeActiveCell, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
+  }, [isBlurSpreadsheet, spreadsheetRef, removeActiveCell, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
 };
 
 exports.useSpreadsheetOutsideClick = useSpreadsheetOutsideClick;

package/lib/components/DataSpreadsheet/types/index.d.ts

@@ -10,6 +10,7 @@ export interface ActiveCellCoordinates {
     column?: number | string;
 }
 export interface PrevState {
+    cellEditorValue?: string;
     activeCellCoordinates?: ActiveCellCoordinates;
     isEditing?: boolean;
     selectionAreaData?: object[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.1-canary.8+aeae85013",
+  "version": "2.43.2-canary.1+de3a8306c",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -119,5 +119,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "aeae85013da0cda71273ccdf66a7fd125708f18c"
+  "gitHead": "de3a8306cc6ad34d09a642e11530a0c038610b63"
 }