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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/es/components/DataSpreadsheet/DataSpreadsheet.js +11 -2
  2. package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.d.ts +2 -1
  3. package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +4 -3
  4. package/es/components/DataSpreadsheet/types/index.d.ts +1 -0
  5. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +11 -2
  6. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.d.ts +2 -1
  7. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +4 -3
  8. package/lib/components/DataSpreadsheet/types/index.d.ts +1 -0
  9. package/package.json +2 -2
package/es/components/DataSpreadsheet/DataSpreadsheet.js CHANGED
@@ -112,6 +112,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
112
112
  _useState18 = _slicedToArray(_useState17, 2),
113
113
  headerCellHoldActive = _useState18[0],
114
114
  setHeaderCellHoldActive = _useState18[1];
115
+ var isBlurSpreadsheet = useRef(false);
115
116
  var _useState19 = useState(false),
116
117
  _useState20 = _slicedToArray(_useState19, 2),
117
118
  isActiveHeaderCellChanged = _useState20[0],
@@ -122,7 +123,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
122
123
  setActiveCellInsideSelectionArea = _useState22[1];
123
124
  var previousState = usePreviousValue({
124
125
  activeCellCoordinates: activeCellCoordinates,
125
- isEditing: isEditing
126
+ isEditing: isEditing,
127
+ cellEditorValue: cellEditorValue
126
128
  }) || {};
127
129
  var cellSizeValue = getCellSize(cellSize);
128
130
  var cellEditorRef = useRef();
@@ -216,7 +218,13 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
216
218
  });
217
219
  }
218
220
  }
219
- }, [activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
221
+ // For when we edit and focus out of data spreadsheet
222
+ if (isEditing && previousState.activeCellCoordinates && isBlurSpreadsheet.current) {
223
+ setActiveCellContent(previousState.cellEditorValue);
224
+ isBlurSpreadsheet.current = false;
225
+ removeCellEditor();
226
+ }
227
+ }, [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]);
220
228
  var createActiveCell = useCallback(function (_ref3) {
221
229
  var placementElement = _ref3.placementElement,
222
230
  coords = _ref3.coords,
@@ -243,6 +251,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
243
251
  setContainerHasFocus: setContainerHasFocus
244
252
  });
245
253
  useSpreadsheetOutsideClick({
254
+ isBlurSpreadsheet: isBlurSpreadsheet,
246
255
  spreadsheetRef: spreadsheetRef,
247
256
  setActiveCellCoordinates: setActiveCellCoordinates,
248
257
  setSelectionAreas: setSelectionAreas,
package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- export function useSpreadsheetOutsideClick({ spreadsheetRef, blockClass, setActiveCellCoordinates, setSelectionAreas, removeActiveCell, setContainerHasFocus, removeCellEditor, }: {
1
+ export function useSpreadsheetOutsideClick({ isBlurSpreadsheet, spreadsheetRef, blockClass, setActiveCellCoordinates, setSelectionAreas, removeActiveCell, setContainerHasFocus, removeCellEditor, }: {
2
+ isBlurSpreadsheet: any;
2
3
  spreadsheetRef: any;
3
4
  blockClass?: string | undefined;
4
5
  setActiveCellCoordinates: any;
package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js CHANGED
@@ -11,7 +11,8 @@ import { removeCellSelections } from '../utils/removeCellSelections.js';
11
11
 
12
12
  // Click outside useEffect for spreadsheet
13
13
  var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
14
- var spreadsheetRef = _ref.spreadsheetRef,
14
+ var isBlurSpreadsheet = _ref.isBlurSpreadsheet,
15
+ spreadsheetRef = _ref.spreadsheetRef,
15
16
  _ref$blockClass = _ref.blockClass,
16
17
  blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
17
18
  setActiveCellCoordinates = _ref.setActiveCellCoordinates,
@@ -24,6 +25,7 @@ var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
24
25
  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"))) {
25
26
  return;
26
27
  }
28
+ isBlurSpreadsheet.current = true;
27
29
  setActiveCellCoordinates(null);
28
30
  setSelectionAreas([]);
29
31
  removeActiveCell();
@@ -31,13 +33,12 @@ var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
31
33
  spreadsheetRef: spreadsheetRef
32
34
  });
33
35
  setContainerHasFocus(false);
34
- removeCellEditor();
35
36
  };
36
37
  document.addEventListener('click', handleOutsideClick);
37
38
  return function () {
38
39
  document.removeEventListener('click', handleOutsideClick);
39
40
  };
40
- }, [spreadsheetRef, removeActiveCell, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
41
+ }, [isBlurSpreadsheet, spreadsheetRef, removeActiveCell, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
41
42
  };
42
43
 
43
44
  export { useSpreadsheetOutsideClick };
package/es/components/DataSpreadsheet/types/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface ActiveCellCoordinates {
10
10
  column?: number | string;
11
11
  }
12
12
  export interface PrevState {
13
+ cellEditorValue?: string;
13
14
  activeCellCoordinates?: ActiveCellCoordinates;
14
15
  isEditing?: boolean;
15
16
  selectionAreaData?: object[];
package/lib/components/DataSpreadsheet/DataSpreadsheet.js CHANGED
@@ -121,6 +121,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
121
121
  _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
122
122
  headerCellHoldActive = _useState18[0],
123
123
  setHeaderCellHoldActive = _useState18[1];
124
+ var isBlurSpreadsheet = React.useRef(false);
124
125
  var _useState19 = React.useState(false),
125
126
  _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
126
127
  isActiveHeaderCellChanged = _useState20[0],
@@ -131,7 +132,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
131
132
  setActiveCellInsideSelectionArea = _useState22[1];
132
133
  var previousState = usePreviousValue.usePreviousValue({
133
134
  activeCellCoordinates: activeCellCoordinates,
134
- isEditing: isEditing
135
+ isEditing: isEditing,
136
+ cellEditorValue: cellEditorValue
135
137
  }) || {};
136
138
  var cellSizeValue = getCellSize.getCellSize(cellSize);
137
139
  var cellEditorRef = React.useRef();
@@ -225,7 +227,13 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
225
227
  });
226
228
  }
227
229
  }
228
- }, [activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
230
+ // For when we edit and focus out of data spreadsheet
231
+ if (isEditing && previousState.activeCellCoordinates && isBlurSpreadsheet.current) {
232
+ setActiveCellContent(previousState.cellEditorValue);
233
+ isBlurSpreadsheet.current = false;
234
+ removeCellEditor();
235
+ }
236
+ }, [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]);
229
237
  var createActiveCell = React.useCallback(function (_ref3) {
230
238
  var placementElement = _ref3.placementElement,
231
239
  coords = _ref3.coords,
@@ -252,6 +260,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
252
260
  setContainerHasFocus: setContainerHasFocus
253
261
  });
254
262
  useSpreadsheetOutsideClick.useSpreadsheetOutsideClick({
263
+ isBlurSpreadsheet: isBlurSpreadsheet,
255
264
  spreadsheetRef: spreadsheetRef,
256
265
  setActiveCellCoordinates: setActiveCellCoordinates,
257
266
  setSelectionAreas: setSelectionAreas,
package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- export function useSpreadsheetOutsideClick({ spreadsheetRef, blockClass, setActiveCellCoordinates, setSelectionAreas, removeActiveCell, setContainerHasFocus, removeCellEditor, }: {
1
+ export function useSpreadsheetOutsideClick({ isBlurSpreadsheet, spreadsheetRef, blockClass, setActiveCellCoordinates, setSelectionAreas, removeActiveCell, setContainerHasFocus, removeCellEditor, }: {
2
+ isBlurSpreadsheet: any;
2
3
  spreadsheetRef: any;
3
4
  blockClass?: string | undefined;
4
5
  setActiveCellCoordinates: any;
package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js CHANGED
@@ -15,7 +15,8 @@ var removeCellSelections = require('../utils/removeCellSelections.js');
15
15
 
16
16
  // Click outside useEffect for spreadsheet
17
17
  var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
18
- var spreadsheetRef = _ref.spreadsheetRef,
18
+ var isBlurSpreadsheet = _ref.isBlurSpreadsheet,
19
+ spreadsheetRef = _ref.spreadsheetRef,
19
20
  _ref$blockClass = _ref.blockClass,
20
21
  blockClass = _ref$blockClass === void 0 ? "".concat(settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
21
22
  setActiveCellCoordinates = _ref.setActiveCellCoordinates,
@@ -28,6 +29,7 @@ var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
28
29
  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"))) {
29
30
  return;
30
31
  }
32
+ isBlurSpreadsheet.current = true;
31
33
  setActiveCellCoordinates(null);
32
34
  setSelectionAreas([]);
33
35
  removeActiveCell();
@@ -35,13 +37,12 @@ var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
35
37
  spreadsheetRef: spreadsheetRef
36
38
  });
37
39
  setContainerHasFocus(false);
38
- removeCellEditor();
39
40
  };
40
41
  document.addEventListener('click', handleOutsideClick);
41
42
  return function () {
42
43
  document.removeEventListener('click', handleOutsideClick);
43
44
  };
44
- }, [spreadsheetRef, removeActiveCell, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
45
+ }, [isBlurSpreadsheet, spreadsheetRef, removeActiveCell, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
45
46
  };
46
47
 
47
48
  exports.useSpreadsheetOutsideClick = useSpreadsheetOutsideClick;
package/lib/components/DataSpreadsheet/types/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface ActiveCellCoordinates {
10
10
  column?: number | string;
11
11
  }
12
12
  export interface PrevState {
13
+ cellEditorValue?: string;
13
14
  activeCellCoordinates?: ActiveCellCoordinates;
14
15
  isEditing?: boolean;
15
16
  selectionAreaData?: object[];
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.43.1-canary.8+aeae85013",
4
+ "version": "2.43.2-canary.1+de3a8306c",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -119,5 +119,5 @@
119
119
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
120
120
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
121
121
  },
122
- "gitHead": "aeae85013da0cda71273ccdf66a7fd125708f18c"
122
+ "gitHead": "de3a8306cc6ad34d09a642e11530a0c038610b63"
123
123
  }