@carbon/ibm-products 2.43.1 → 2.43.2-canary.1
Sign up to get free protection for your applications and to get access to all the features.
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +11 -2
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.d.ts +2 -1
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +4 -3
- package/es/components/DataSpreadsheet/types/index.d.ts +1 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +11 -2
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.d.ts +2 -1
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +4 -3
- package/lib/components/DataSpreadsheet/types/index.d.ts +1 -0
- package/package.json +2 -2
@@ -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
|
-
|
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,
|
@@ -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;
|
@@ -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
|
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 };
|
@@ -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
|
-
|
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,
|
@@ -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;
|
@@ -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
|
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/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",
|
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": "
|
122
|
+
"gitHead": "de3a8306cc6ad34d09a642e11530a0c038610b63"
|
123
123
|
}
|