@carbon/ibm-products 2.43.2-canary.153 → 2.43.2-canary.155
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +5 -0
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +5 -0
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +5 -0
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +5 -0
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/APIKeyModal/APIKeyModal.types.d.ts +1 -1
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +19 -10
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +12 -7
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +17 -10
- package/es/components/Datagrid/useActionsColumn.js +1 -4
- package/es/components/Tearsheet/Tearsheet.d.ts +2 -2
- package/lib/components/APIKeyModal/APIKeyModal.types.d.ts +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +18 -9
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +11 -6
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +17 -10
- package/lib/components/Datagrid/useActionsColumn.js +1 -4
- package/lib/components/Tearsheet/Tearsheet.d.ts +2 -2
- package/package.json +3 -3
- package/scss/components/Datagrid/styles/_datagrid.scss +1 -0
- package/scss/components/Datagrid/styles/_useActionsColumn.scss +4 -0
@@ -6,12 +6,13 @@
|
|
6
6
|
*/
|
7
7
|
|
8
8
|
import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
-
import React__default, {
|
9
|
+
import React__default, { useRef, useEffect } from 'react';
|
10
10
|
import { VariableSizeList } from 'react-window';
|
11
11
|
import { TableBody } from '@carbon/react';
|
12
12
|
import { pkg } from '../../../settings.js';
|
13
13
|
import DatagridHead from './DatagridHead.js';
|
14
14
|
import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver.js';
|
15
|
+
import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
|
15
16
|
|
16
17
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
17
18
|
var rowSizeMap = {
|
@@ -23,7 +24,6 @@ var rowSizeMap = {
|
|
23
24
|
};
|
24
25
|
var defaultRowHeight = rowSizeMap.lg;
|
25
26
|
var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
26
|
-
var _gridRef$current, _gridRef$current2;
|
27
27
|
var getTableBodyProps = datagridState.getTableBodyProps,
|
28
28
|
rows = datagridState.rows,
|
29
29
|
prepareRow = datagridState.prepareRow,
|
@@ -40,6 +40,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
40
40
|
gridRef = datagridState.gridRef,
|
41
41
|
tableId = datagridState.tableId,
|
42
42
|
onVirtualScroll = datagridState.onVirtualScroll;
|
43
|
+
var headWrapRef = useRef(null);
|
44
|
+
var innerRef = useRef(null);
|
43
45
|
|
44
46
|
/* istanbul ignore next */
|
45
47
|
var handleVirtualGridResize = function handleVirtualGridResize() {
|
@@ -80,12 +82,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
80
82
|
testRefValue === null || testRefValue === void 0 || testRefValue.removeEventListener('scroll', handleScroll);
|
81
83
|
};
|
82
84
|
});
|
85
|
+
useIsomorphicEffect(function () {
|
86
|
+
if (headWrapRef.current && headWrapRef.current.style) {
|
87
|
+
var _gridRef$current;
|
88
|
+
headWrapRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth, "px");
|
89
|
+
}
|
90
|
+
}, [headWrapRef, gridRef]);
|
91
|
+
useIsomorphicEffect(function () {
|
92
|
+
if (testRef !== null && testRef !== void 0 && testRef.current && testRef.current.style) {
|
93
|
+
var _gridRef$current2;
|
94
|
+
testRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth, "px");
|
95
|
+
}
|
96
|
+
}, [testRef, gridRef]);
|
83
97
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
84
98
|
className: "".concat(blockClass, "__head-wrap"),
|
85
|
-
|
86
|
-
width: gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
|
87
|
-
overflow: 'hidden'
|
88
|
-
}
|
99
|
+
ref: headWrapRef
|
89
100
|
}, /*#__PURE__*/React__default.createElement(DatagridHead, datagridState)), /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
|
90
101
|
role: undefined
|
91
102
|
}), {
|
@@ -105,10 +116,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
105
116
|
innerRef: innerListRef,
|
106
117
|
outerRef: testRef,
|
107
118
|
ref: listRef,
|
108
|
-
className: "".concat(blockClass, "__virtual-scrollbar")
|
109
|
-
style: {
|
110
|
-
width: gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
|
111
|
-
}
|
119
|
+
className: "".concat(blockClass, "__virtual-scrollbar")
|
112
120
|
}, function (_ref) {
|
113
121
|
var _row$RowRenderer;
|
114
122
|
var index = _ref.index,
|
@@ -118,6 +126,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
118
126
|
var _row$getRowProps = row.getRowProps(),
|
119
127
|
key = _row$getRowProps.key;
|
120
128
|
return /*#__PURE__*/React__default.createElement("div", {
|
129
|
+
ref: innerRef,
|
121
130
|
style: _objectSpread2({}, style)
|
122
131
|
}, row === null || row === void 0 || (_row$RowRenderer = row.RowRenderer) === null || _row$RowRenderer === void 0 ? void 0 : _row$RowRenderer.call(row, _objectSpread2(_objectSpread2({}, datagridState), {}, {
|
123
132
|
row: row,
|
@@ -8,7 +8,7 @@
|
|
8
8
|
import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
9
9
|
import { Button, Layer, Search, Accordion, AccordionItem } from '@carbon/react';
|
10
10
|
import { PANEL, BATCH, CLEAR_FILTERS, INSTANT } from './constants.js';
|
11
|
-
import React__default, { useState, useContext, useRef, useMemo, useEffect } from 'react';
|
11
|
+
import React__default, { useState, useContext, useRef, useMemo, useEffect, useCallback } from 'react';
|
12
12
|
import { panelVariants, innerContainerVariants, actionSetVariants } from './motion/variants.js';
|
13
13
|
import { motion, useReducedMotion } from 'framer-motion';
|
14
14
|
import { ActionSet } from '../../../../ActionSet/ActionSet.js';
|
@@ -21,6 +21,7 @@ import { rem } from '@carbon/layout';
|
|
21
21
|
import useFilters from './hooks/useFilters.js';
|
22
22
|
import useShouldDisableButtons from './hooks/useShouldDisableButtons.js';
|
23
23
|
import useSubscribeToEventEmitter from './hooks/useSubscribeToEventEmitter.js';
|
24
|
+
import { useIsomorphicEffect } from '../../../../../global/js/hooks/useIsomorphicEffect.js';
|
24
25
|
|
25
26
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
26
27
|
var componentClass = "".concat(blockClass, "-filter-panel");
|
@@ -102,7 +103,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
102
103
|
var filterHeadingRef = useRef();
|
103
104
|
var filterSearchRef = useRef();
|
104
105
|
var actionSetRef = useRef();
|
105
|
-
|
106
|
+
var innerContainerRef = useRef();
|
106
107
|
/** State from hooks */
|
107
108
|
var _useShouldDisableButt = useShouldDisableButtons({
|
108
109
|
initialValue: true,
|
@@ -189,7 +190,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
189
190
|
useSubscribeToEventEmitter(CLEAR_FILTERS, function (tableId) {
|
190
191
|
reset(tableId);
|
191
192
|
});
|
192
|
-
var getScrollableContainerHeight = function
|
193
|
+
var getScrollableContainerHeight = useCallback(function () {
|
193
194
|
var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;
|
194
195
|
var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
|
195
196
|
var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
|
@@ -197,7 +198,13 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
197
198
|
var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
|
198
199
|
showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === BATCH ? actionSetHeight : 0, "px)") : 0;
|
199
200
|
return height;
|
200
|
-
};
|
201
|
+
}, [filterHeadingRef, filterSearchRef, actionSetRef, panelOpen, showFilterSearch, updateMethod]);
|
202
|
+
useIsomorphicEffect(function () {
|
203
|
+
var height = getScrollableContainerHeight();
|
204
|
+
if (innerContainerRef.current && innerContainerRef.current.style) {
|
205
|
+
innerContainerRef.current.style.height = height;
|
206
|
+
}
|
207
|
+
}, [getScrollableContainerHeight, innerContainerRef]);
|
201
208
|
return /*#__PURE__*/React__default.createElement(motion.div, {
|
202
209
|
ref: filterPanelRef,
|
203
210
|
className: cx(componentClass, "".concat(componentClass, "__container"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
|
@@ -237,9 +244,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
237
244
|
size: "sm"
|
238
245
|
})))), /*#__PURE__*/React__default.createElement("div", {
|
239
246
|
className: "".concat(componentClass, "__inner-container"),
|
240
|
-
|
241
|
-
height: getScrollableContainerHeight()
|
242
|
-
},
|
247
|
+
ref: innerContainerRef,
|
243
248
|
onScroll: onInnerContainerScroll
|
244
249
|
}, filterSections.map(function (_ref2, index) {
|
245
250
|
var _ref2$categoryTitle = _ref2.categoryTitle,
|
@@ -15,6 +15,7 @@ import cx from 'classnames';
|
|
15
15
|
import { prepareProps } from '../../../../../../global/js/utils/props-helper.js';
|
16
16
|
import { InlineEditContext } from '../InlineEditContext/InlineEditContext.js';
|
17
17
|
import { usePreviousValue } from '../../../../../../global/js/hooks/usePreviousValue.js';
|
18
|
+
import { useIsomorphicEffect } from '../../../../../../global/js/hooks/useIsomorphicEffect.js';
|
18
19
|
import { InlineEditButton } from '../InlineEditButton/InlineEditButton.js';
|
19
20
|
|
20
21
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
@@ -69,7 +70,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
69
70
|
var checkboxRef = useRef();
|
70
71
|
var numberInputRef = useRef();
|
71
72
|
var dropdownRef = useRef();
|
72
|
-
var datePickerRef = useRef();
|
73
73
|
var outerButtonElement = useRef();
|
74
74
|
var rowSize = instance.rowSize,
|
75
75
|
onDataUpdate = instance.onDataUpdate;
|
@@ -299,6 +299,13 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
299
299
|
return renderDropdownItem(item);
|
300
300
|
} : null;
|
301
301
|
};
|
302
|
+
useIsomorphicEffect(function () {
|
303
|
+
if (dropdownRef.current && dropdownRef.current.style) {
|
304
|
+
var closestElement = dropdownRef.current.closest(".".concat(blockClass, "__inline-edit--select"));
|
305
|
+
closestElement.style.width = "".concat(cell.column.totalWidth, "px");
|
306
|
+
}
|
307
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
308
|
+
}, [dropdownRef.current, cell.column.totalWidth]);
|
302
309
|
var renderSelectCell = function renderSelectCell() {
|
303
310
|
var _ref6 = config || {},
|
304
311
|
inputProps = _ref6.inputProps;
|
@@ -308,9 +315,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
308
315
|
ariaLabel: cellLabel || 'Dropdown menu options'
|
309
316
|
}, inputProps, {
|
310
317
|
hideLabel: true,
|
311
|
-
style: {
|
312
|
-
width: cell.column.totalWidth
|
313
|
-
},
|
314
318
|
className: cx("".concat(blockClass, "__inline-edit--select"), _defineProperty({}, "".concat(blockClass, "__inline-edit--select-").concat(rowSize), rowSize)),
|
315
319
|
items: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.items) || [],
|
316
320
|
initialSelectedItem: cell.value,
|
@@ -374,9 +378,15 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
374
378
|
var datePickerInputProps = config === null || config === void 0 || (_config$inputProps = config.inputProps) === null || _config$inputProps === void 0 ? void 0 : _config$inputProps.datePickerInputProps;
|
375
379
|
return /*#__PURE__*/React__default.createElement(DatePicker, _extends({}, datePickerPreparedProps, {
|
376
380
|
appendTo: outerButtonElement === null || outerButtonElement === void 0 || (_outerButtonElement$c = outerButtonElement.current) === null || _outerButtonElement$c === void 0 ? void 0 : _outerButtonElement$c.parentElement,
|
377
|
-
ref:
|
378
|
-
|
379
|
-
|
381
|
+
ref: function ref(el) {
|
382
|
+
if (el && el.style) {
|
383
|
+
el.style.width = "".concat(cell.column.totalWidth, "px");
|
384
|
+
var elementId = "".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index);
|
385
|
+
var element = el.querySelector("input#".concat(elementId));
|
386
|
+
if (element) {
|
387
|
+
element.style.position = 'static';
|
388
|
+
}
|
389
|
+
}
|
380
390
|
},
|
381
391
|
datePickerType: "single",
|
382
392
|
className: cx("".concat(blockClass, "__inline-edit--date"), _defineProperty({}, "".concat(blockClass, "__inline-edit--date-").concat(rowSize), rowSize)),
|
@@ -399,9 +409,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
399
409
|
},
|
400
410
|
value: cell.value
|
401
411
|
}), /*#__PURE__*/React__default.createElement(DatePickerInput, _extends({}, datePickerInputProps, {
|
402
|
-
style: {
|
403
|
-
position: 'static'
|
404
|
-
},
|
405
412
|
placeholder: (datePickerInputProps === null || datePickerInputProps === void 0 ? void 0 : datePickerInputProps.placeholder) || 'mm/dd/yyyy',
|
406
413
|
labelText: (datePickerInputProps === null || datePickerInputProps === void 0 ? void 0 : datePickerInputProps.labelText) || cellLabel || 'Set date',
|
407
414
|
id: "".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index),
|
@@ -43,10 +43,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
43
43
|
}, isFetching && /*#__PURE__*/React__default.createElement(IconSkeleton, {
|
44
44
|
className: "".concat(blockClass, "__actions-column-loading")
|
45
45
|
}), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/React__default.createElement("div", {
|
46
|
-
className: "".concat(blockClass, "_actions-column")
|
47
|
-
style: {
|
48
|
-
display: 'flex'
|
49
|
-
}
|
46
|
+
className: "".concat(blockClass, "_actions-column")
|
50
47
|
}, rowActions.map(function (action, index) {
|
51
48
|
var preparedActionProps = prepareProps(action, ['isDelete']);
|
52
49
|
var align = preparedActionProps.align,
|
@@ -35,7 +35,7 @@ export interface TearsheetProps extends PropsWithChildren {
|
|
35
35
|
*
|
36
36
|
* See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
37
37
|
*/
|
38
|
-
actions: ButtonProps[];
|
38
|
+
actions: ButtonProps<'button'>[];
|
39
39
|
/**
|
40
40
|
* The aria-label for the tearsheet, which is optional.
|
41
41
|
* if it is not passed, the title will be used as the aria-label.
|
@@ -97,7 +97,7 @@ export interface TearsheetProps extends PropsWithChildren {
|
|
97
97
|
/**
|
98
98
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
99
99
|
*/
|
100
|
-
portalTarget
|
100
|
+
portalTarget?: ReactNode;
|
101
101
|
/**
|
102
102
|
* Specify a CSS selector that matches the DOM element that should be
|
103
103
|
* focused when the Modal opens.
|
@@ -144,7 +144,7 @@ interface APIKeyModalCommonProps {
|
|
144
144
|
/**
|
145
145
|
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
146
146
|
*/
|
147
|
-
portalTarget
|
147
|
+
portalTarget?: ReactNode;
|
148
148
|
/**
|
149
149
|
* label text that's displayed when hovering over visibility toggler to show key
|
150
150
|
*/
|
@@ -16,6 +16,7 @@ var react = require('@carbon/react');
|
|
16
16
|
var settings = require('../../../settings.js');
|
17
17
|
var DatagridHead = require('./DatagridHead.js');
|
18
18
|
var useResizeObserver = require('../../../global/js/hooks/useResizeObserver.js');
|
19
|
+
var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
|
19
20
|
|
20
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
21
22
|
|
@@ -31,7 +32,6 @@ var rowSizeMap = {
|
|
31
32
|
};
|
32
33
|
var defaultRowHeight = rowSizeMap.lg;
|
33
34
|
var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
34
|
-
var _gridRef$current, _gridRef$current2;
|
35
35
|
var getTableBodyProps = datagridState.getTableBodyProps,
|
36
36
|
rows = datagridState.rows,
|
37
37
|
prepareRow = datagridState.prepareRow,
|
@@ -48,6 +48,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
48
48
|
gridRef = datagridState.gridRef,
|
49
49
|
tableId = datagridState.tableId,
|
50
50
|
onVirtualScroll = datagridState.onVirtualScroll;
|
51
|
+
var headWrapRef = React.useRef(null);
|
52
|
+
var innerRef = React.useRef(null);
|
51
53
|
|
52
54
|
/* istanbul ignore next */
|
53
55
|
var handleVirtualGridResize = function handleVirtualGridResize() {
|
@@ -88,12 +90,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
88
90
|
testRefValue === null || testRefValue === void 0 || testRefValue.removeEventListener('scroll', handleScroll);
|
89
91
|
};
|
90
92
|
});
|
93
|
+
useIsomorphicEffect.useIsomorphicEffect(function () {
|
94
|
+
if (headWrapRef.current && headWrapRef.current.style) {
|
95
|
+
var _gridRef$current;
|
96
|
+
headWrapRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth, "px");
|
97
|
+
}
|
98
|
+
}, [headWrapRef, gridRef]);
|
99
|
+
useIsomorphicEffect.useIsomorphicEffect(function () {
|
100
|
+
if (testRef !== null && testRef !== void 0 && testRef.current && testRef.current.style) {
|
101
|
+
var _gridRef$current2;
|
102
|
+
testRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth, "px");
|
103
|
+
}
|
104
|
+
}, [testRef, gridRef]);
|
91
105
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
92
106
|
className: "".concat(blockClass, "__head-wrap"),
|
93
|
-
|
94
|
-
width: gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
|
95
|
-
overflow: 'hidden'
|
96
|
-
}
|
107
|
+
ref: headWrapRef
|
97
108
|
}, /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState)), /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps({
|
98
109
|
role: undefined
|
99
110
|
}), {
|
@@ -113,10 +124,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
113
124
|
innerRef: innerListRef,
|
114
125
|
outerRef: testRef,
|
115
126
|
ref: listRef,
|
116
|
-
className: "".concat(blockClass, "__virtual-scrollbar")
|
117
|
-
style: {
|
118
|
-
width: gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
|
119
|
-
}
|
127
|
+
className: "".concat(blockClass, "__virtual-scrollbar")
|
120
128
|
}, function (_ref) {
|
121
129
|
var _row$RowRenderer;
|
122
130
|
var index = _ref.index,
|
@@ -126,6 +134,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
126
134
|
var _row$getRowProps = row.getRowProps(),
|
127
135
|
key = _row$getRowProps.key;
|
128
136
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
137
|
+
ref: innerRef,
|
129
138
|
style: _rollupPluginBabelHelpers.objectSpread2({}, style)
|
130
139
|
}, row === null || row === void 0 || (_row$RowRenderer = row.RowRenderer) === null || _row$RowRenderer === void 0 ? void 0 : _row$RowRenderer.call(row, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, datagridState), {}, {
|
131
140
|
row: row,
|
@@ -25,6 +25,7 @@ var layout = require('@carbon/layout');
|
|
25
25
|
var useFilters = require('./hooks/useFilters.js');
|
26
26
|
var useShouldDisableButtons = require('./hooks/useShouldDisableButtons.js');
|
27
27
|
var useSubscribeToEventEmitter = require('./hooks/useSubscribeToEventEmitter.js');
|
28
|
+
var useIsomorphicEffect = require('../../../../../global/js/hooks/useIsomorphicEffect.js');
|
28
29
|
|
29
30
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
30
31
|
|
@@ -111,7 +112,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
111
112
|
var filterHeadingRef = React.useRef();
|
112
113
|
var filterSearchRef = React.useRef();
|
113
114
|
var actionSetRef = React.useRef();
|
114
|
-
|
115
|
+
var innerContainerRef = React.useRef();
|
115
116
|
/** State from hooks */
|
116
117
|
var _useShouldDisableButt = useShouldDisableButtons["default"]({
|
117
118
|
initialValue: true,
|
@@ -198,7 +199,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
198
199
|
useSubscribeToEventEmitter["default"](constants.CLEAR_FILTERS, function (tableId) {
|
199
200
|
reset(tableId);
|
200
201
|
});
|
201
|
-
var getScrollableContainerHeight = function
|
202
|
+
var getScrollableContainerHeight = React.useCallback(function () {
|
202
203
|
var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;
|
203
204
|
var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
|
204
205
|
var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
|
@@ -206,7 +207,13 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
206
207
|
var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
|
207
208
|
showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === constants.BATCH ? actionSetHeight : 0, "px)") : 0;
|
208
209
|
return height;
|
209
|
-
};
|
210
|
+
}, [filterHeadingRef, filterSearchRef, actionSetRef, panelOpen, showFilterSearch, updateMethod]);
|
211
|
+
useIsomorphicEffect.useIsomorphicEffect(function () {
|
212
|
+
var height = getScrollableContainerHeight();
|
213
|
+
if (innerContainerRef.current && innerContainerRef.current.style) {
|
214
|
+
innerContainerRef.current.style.height = height;
|
215
|
+
}
|
216
|
+
}, [getScrollableContainerHeight, innerContainerRef]);
|
210
217
|
return /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
|
211
218
|
ref: filterPanelRef,
|
212
219
|
className: cx__default["default"](componentClass, "".concat(componentClass, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
|
@@ -246,9 +253,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
246
253
|
size: "sm"
|
247
254
|
})))), /*#__PURE__*/React__default["default"].createElement("div", {
|
248
255
|
className: "".concat(componentClass, "__inner-container"),
|
249
|
-
|
250
|
-
height: getScrollableContainerHeight()
|
251
|
-
},
|
256
|
+
ref: innerContainerRef,
|
252
257
|
onScroll: onInnerContainerScroll
|
253
258
|
}, filterSections.map(function (_ref2, index) {
|
254
259
|
var _ref2$categoryTitle = _ref2.categoryTitle,
|
@@ -19,6 +19,7 @@ var cx = require('classnames');
|
|
19
19
|
var propsHelper = require('../../../../../../global/js/utils/props-helper.js');
|
20
20
|
var InlineEditContext = require('../InlineEditContext/InlineEditContext.js');
|
21
21
|
var usePreviousValue = require('../../../../../../global/js/hooks/usePreviousValue.js');
|
22
|
+
var useIsomorphicEffect = require('../../../../../../global/js/hooks/useIsomorphicEffect.js');
|
22
23
|
var InlineEditButton = require('../InlineEditButton/InlineEditButton.js');
|
23
24
|
|
24
25
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
@@ -78,7 +79,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
78
79
|
var checkboxRef = React.useRef();
|
79
80
|
var numberInputRef = React.useRef();
|
80
81
|
var dropdownRef = React.useRef();
|
81
|
-
var datePickerRef = React.useRef();
|
82
82
|
var outerButtonElement = React.useRef();
|
83
83
|
var rowSize = instance.rowSize,
|
84
84
|
onDataUpdate = instance.onDataUpdate;
|
@@ -308,6 +308,13 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
308
308
|
return renderDropdownItem(item);
|
309
309
|
} : null;
|
310
310
|
};
|
311
|
+
useIsomorphicEffect.useIsomorphicEffect(function () {
|
312
|
+
if (dropdownRef.current && dropdownRef.current.style) {
|
313
|
+
var closestElement = dropdownRef.current.closest(".".concat(blockClass, "__inline-edit--select"));
|
314
|
+
closestElement.style.width = "".concat(cell.column.totalWidth, "px");
|
315
|
+
}
|
316
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
317
|
+
}, [dropdownRef.current, cell.column.totalWidth]);
|
311
318
|
var renderSelectCell = function renderSelectCell() {
|
312
319
|
var _ref6 = config || {},
|
313
320
|
inputProps = _ref6.inputProps;
|
@@ -317,9 +324,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
317
324
|
ariaLabel: cellLabel || 'Dropdown menu options'
|
318
325
|
}, inputProps, {
|
319
326
|
hideLabel: true,
|
320
|
-
style: {
|
321
|
-
width: cell.column.totalWidth
|
322
|
-
},
|
323
327
|
className: cx__default["default"]("".concat(blockClass, "__inline-edit--select"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--select-").concat(rowSize), rowSize)),
|
324
328
|
items: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.items) || [],
|
325
329
|
initialSelectedItem: cell.value,
|
@@ -383,9 +387,15 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
383
387
|
var datePickerInputProps = config === null || config === void 0 || (_config$inputProps = config.inputProps) === null || _config$inputProps === void 0 ? void 0 : _config$inputProps.datePickerInputProps;
|
384
388
|
return /*#__PURE__*/React__default["default"].createElement(react.DatePicker, _rollupPluginBabelHelpers["extends"]({}, datePickerPreparedProps, {
|
385
389
|
appendTo: outerButtonElement === null || outerButtonElement === void 0 || (_outerButtonElement$c = outerButtonElement.current) === null || _outerButtonElement$c === void 0 ? void 0 : _outerButtonElement$c.parentElement,
|
386
|
-
ref:
|
387
|
-
|
388
|
-
|
390
|
+
ref: function ref(el) {
|
391
|
+
if (el && el.style) {
|
392
|
+
el.style.width = "".concat(cell.column.totalWidth, "px");
|
393
|
+
var elementId = "".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index);
|
394
|
+
var element = el.querySelector("input#".concat(elementId));
|
395
|
+
if (element) {
|
396
|
+
element.style.position = 'static';
|
397
|
+
}
|
398
|
+
}
|
389
399
|
},
|
390
400
|
datePickerType: "single",
|
391
401
|
className: cx__default["default"]("".concat(blockClass, "__inline-edit--date"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--date-").concat(rowSize), rowSize)),
|
@@ -408,9 +418,6 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
408
418
|
},
|
409
419
|
value: cell.value
|
410
420
|
}), /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, _rollupPluginBabelHelpers["extends"]({}, datePickerInputProps, {
|
411
|
-
style: {
|
412
|
-
position: 'static'
|
413
|
-
},
|
414
421
|
placeholder: (datePickerInputProps === null || datePickerInputProps === void 0 ? void 0 : datePickerInputProps.placeholder) || 'mm/dd/yyyy',
|
415
422
|
labelText: (datePickerInputProps === null || datePickerInputProps === void 0 ? void 0 : datePickerInputProps.labelText) || cellLabel || 'Set date',
|
416
423
|
id: "".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index),
|
@@ -52,10 +52,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
52
52
|
}, isFetching && /*#__PURE__*/React__default["default"].createElement(react.IconSkeleton, {
|
53
53
|
className: "".concat(blockClass, "__actions-column-loading")
|
54
54
|
}), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/React__default["default"].createElement("div", {
|
55
|
-
className: "".concat(blockClass, "_actions-column")
|
56
|
-
style: {
|
57
|
-
display: 'flex'
|
58
|
-
}
|
55
|
+
className: "".concat(blockClass, "_actions-column")
|
59
56
|
}, rowActions.map(function (action, index) {
|
60
57
|
var preparedActionProps = propsHelper.prepareProps(action, ['isDelete']);
|
61
58
|
var align = preparedActionProps.align,
|
@@ -35,7 +35,7 @@ export interface TearsheetProps extends PropsWithChildren {
|
|
35
35
|
*
|
36
36
|
* See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
37
37
|
*/
|
38
|
-
actions: ButtonProps[];
|
38
|
+
actions: ButtonProps<'button'>[];
|
39
39
|
/**
|
40
40
|
* The aria-label for the tearsheet, which is optional.
|
41
41
|
* if it is not passed, the title will be used as the aria-label.
|
@@ -97,7 +97,7 @@ export interface TearsheetProps extends PropsWithChildren {
|
|
97
97
|
/**
|
98
98
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
99
99
|
*/
|
100
|
-
portalTarget
|
100
|
+
portalTarget?: ReactNode;
|
101
101
|
/**
|
102
102
|
* Specify a CSS selector that matches the DOM element that should be
|
103
103
|
* focused when the Modal opens.
|
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.2-canary.
|
4
|
+
"version": "2.43.2-canary.155+73a982421",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -96,7 +96,7 @@
|
|
96
96
|
"dependencies": {
|
97
97
|
"@babel/runtime": "^7.23.9",
|
98
98
|
"@carbon/feature-flags": "^0.20.0",
|
99
|
-
"@carbon/ibm-products-styles": "^2.39.1-canary.
|
99
|
+
"@carbon/ibm-products-styles": "^2.39.1-canary.165+73a982421",
|
100
100
|
"@carbon/telemetry": "^0.1.0",
|
101
101
|
"@dnd-kit/core": "^6.0.8",
|
102
102
|
"@dnd-kit/modifiers": "^7.0.0",
|
@@ -120,5 +120,5 @@
|
|
120
120
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
121
121
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
122
122
|
},
|
123
|
-
"gitHead": "
|
123
|
+
"gitHead": "73a98242150e421a7c414bf7743f453a2234caba"
|
124
124
|
}
|