@carbon/ibm-products 1.50.0 → 1.52.0
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.
- package/README.md +10 -5
- package/css/index-full-carbon.css +131 -82
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +38 -11
- 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 +131 -82
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +131 -82
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/AboutModal/AboutModal.js +3 -4
- package/es/components/ActionBar/ActionBar.js +9 -18
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +8 -13
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +8 -8
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -5
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +14 -0
- package/es/components/Datagrid/index.js +1 -0
- package/es/components/Datagrid/useActionsColumn.js +10 -7
- package/es/components/Datagrid/useCustomizeColumns.js +5 -1
- package/es/components/Datagrid/useEditableCell.js +12 -0
- package/es/components/Datagrid/useExpandedRow.js +11 -7
- package/es/components/Datagrid/useFiltering.js +15 -10
- package/es/components/Datagrid/useInlineEdit.js +17 -8
- package/es/components/Datagrid/useNestedRows.js +10 -6
- package/es/components/Datagrid/useOnRowClick.js +9 -1
- package/es/components/Datagrid/useSelectRows.js +2 -0
- package/es/components/EditInPlace/EditInPlace.js +43 -0
- package/es/components/EditInPlace/index.js +8 -0
- package/es/components/ExampleComponent/ExampleComponent.js +32 -4
- package/es/components/ExampleComponent/useExample.js +49 -0
- package/es/components/InlineEdit/InlineEdit.js +5 -1
- package/es/components/InlineEditV1/InlineEditV1.js +7 -2
- package/es/components/InlineEditV2/InlineEditV2.js +51 -15
- package/es/components/NonLinearReading/NonLinearReading.js +7 -7
- package/es/components/PageHeader/PageHeader.js +28 -31
- package/es/components/SidePanel/SidePanel.js +25 -26
- package/es/components/TagSet/TagSet.js +5 -7
- package/es/components/Tearsheet/TearsheetShell.js +4 -6
- package/es/components/index.js +2 -1
- package/es/global/js/hooks/useResizeObserver.js +74 -0
- package/es/global/js/package-settings.js +35 -4
- package/es/global/js/utils/test-helper.js +34 -3
- package/es/settings.js +40 -29
- package/lib/components/AboutModal/AboutModal.js +3 -4
- package/lib/components/ActionBar/ActionBar.js +9 -18
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +8 -13
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -4
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +15 -0
- package/lib/components/Datagrid/index.js +7 -0
- package/lib/components/Datagrid/useActionsColumn.js +7 -1
- package/lib/components/Datagrid/useCustomizeColumns.js +4 -0
- package/lib/components/Datagrid/useEditableCell.js +20 -0
- package/lib/components/Datagrid/useExpandedRow.js +4 -0
- package/lib/components/Datagrid/useFiltering.js +8 -2
- package/lib/components/Datagrid/useInlineEdit.js +19 -8
- package/lib/components/Datagrid/useNestedRows.js +9 -6
- package/lib/components/Datagrid/useOnRowClick.js +9 -1
- package/lib/components/Datagrid/useSelectRows.js +2 -0
- package/lib/components/EditInPlace/EditInPlace.js +46 -0
- package/lib/components/EditInPlace/index.js +12 -0
- package/lib/components/ExampleComponent/ExampleComponent.js +35 -4
- package/lib/components/ExampleComponent/useExample.js +58 -0
- package/lib/components/InlineEdit/InlineEdit.js +5 -1
- package/lib/components/InlineEditV1/InlineEditV1.js +7 -2
- package/lib/components/InlineEditV2/InlineEditV2.js +53 -16
- package/lib/components/NonLinearReading/NonLinearReading.js +6 -6
- package/lib/components/PageHeader/PageHeader.js +28 -31
- package/lib/components/SidePanel/SidePanel.js +25 -26
- package/lib/components/TagSet/TagSet.js +5 -7
- package/lib/components/Tearsheet/TearsheetShell.js +4 -6
- package/lib/components/index.js +13 -0
- package/lib/global/js/hooks/useResizeObserver.js +83 -0
- package/lib/global/js/package-settings.js +34 -3
- package/lib/global/js/utils/test-helper.js +37 -5
- package/lib/settings.js +41 -30
- package/package.json +2 -3
- package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +10 -7
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +52 -11
- package/scss/components/InlineEditV2/_storybook-styles.scss +9 -2
- package/scss/components/NonLinearReading/_non-linear-reading.scss +76 -67
- package/scss/components/NonLinearReading/_storybook-styles.scss +16 -0
|
@@ -23,7 +23,7 @@ import PropTypes from 'prop-types';
|
|
|
23
23
|
import cx from 'classnames';
|
|
24
24
|
import { Link, TooltipIcon } from 'carbon-components-react';
|
|
25
25
|
import { pkg, carbon } from '../../settings';
|
|
26
|
-
import {
|
|
26
|
+
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
|
|
27
27
|
import { ArrowLeft16 } from '@carbon/icons-react';
|
|
28
28
|
|
|
29
29
|
// Carbon and package components we use.
|
|
@@ -238,24 +238,19 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
|
238
238
|
/* istanbul ignore next */ // not sure how to test resize
|
|
239
239
|
checkFullyVisibleBreadcrumbItems();
|
|
240
240
|
};
|
|
241
|
-
|
|
242
|
-
/* istanbul ignore next */ // not sure how to test resize
|
|
243
|
-
var handleBreadcrumbItemsResize = function handleBreadcrumbItemsResize() {
|
|
244
|
-
/* istanbul ignore next */ // not sure how to test resize
|
|
245
|
-
checkFullyVisibleBreadcrumbItems();
|
|
246
|
-
};
|
|
247
241
|
var backItem = breadcrumbs[breadcrumbs.length - 1];
|
|
248
242
|
/* istanbul ignore if */ // not sure how to test media queries
|
|
249
243
|
if (backItem.isCurrentPage) {
|
|
250
244
|
backItem = breadcrumbs[breadcrumbs.length - 2];
|
|
251
245
|
}
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
246
|
+
|
|
247
|
+
// container resize
|
|
248
|
+
useResizeObserver(sizingContainerRef, {
|
|
249
|
+
callback: handleResize
|
|
255
250
|
});
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
251
|
+
// item resize
|
|
252
|
+
useResizeObserver(breadcrumbItemWithOverflow, {
|
|
253
|
+
callback: handleResize
|
|
259
254
|
});
|
|
260
255
|
return /*#__PURE__*/React.createElement("div", {
|
|
261
256
|
className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),
|
|
@@ -21,7 +21,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
21
21
|
import React, { useEffect, useState, useRef } from 'react';
|
|
22
22
|
import PropTypes from 'prop-types';
|
|
23
23
|
import cx from 'classnames';
|
|
24
|
-
import {
|
|
24
|
+
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
|
|
25
25
|
import { ButtonSet, Button } from 'carbon-components-react';
|
|
26
26
|
import { ButtonMenu, ButtonMenuItem } from '../ButtonMenu';
|
|
27
27
|
import { pkg, carbon } from '../../settings';
|
|
@@ -135,18 +135,14 @@ export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
|
|
|
135
135
|
}, prepareProps(other, ['iconDescription', 'renderIcon'])));
|
|
136
136
|
}).reverse());
|
|
137
137
|
});
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
targetRef: sizingContainerRefSet
|
|
138
|
+
useResizeObserver(sizingContainerRefSet, {
|
|
139
|
+
callback: checkFullyVisibleItems
|
|
141
140
|
});
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
targetRef: sizingContainerRefCombo
|
|
141
|
+
useResizeObserver(sizingContainerRefCombo, {
|
|
142
|
+
callback: checkFullyVisibleItems
|
|
145
143
|
});
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
targetRef: spaceAvailableRef,
|
|
149
|
-
handleWidth: true
|
|
144
|
+
useResizeObserver(spaceAvailableRef, {
|
|
145
|
+
callback: checkFullyVisibleItems
|
|
150
146
|
});
|
|
151
147
|
return /*#__PURE__*/React.createElement("div", {
|
|
152
148
|
className: cx([blockClass, className, _defineProperty({}, "".concat(blockClass, "--right"), rightAlign)]),
|
|
@@ -3,14 +3,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
5
|
var _excluded = ["onChange"];
|
|
6
|
-
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
6
|
+
/**
|
|
7
|
+
* Copyright IBM Corp. 2020, 2023
|
|
8
|
+
*
|
|
9
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
10
|
+
* LICENSE file in the root directory of this source tree.
|
|
12
11
|
*/
|
|
13
|
-
|
|
12
|
+
|
|
14
13
|
import React, { useEffect, useState, useLayoutEffect } from 'react';
|
|
15
14
|
import PropTypes from 'prop-types';
|
|
16
15
|
import cx from 'classnames';
|
|
@@ -84,7 +83,8 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
|
|
|
84
83
|
id: "".concat(tableId, "-select-all-checkbox-id")
|
|
85
84
|
}))), /*#__PURE__*/React.createElement(OverflowMenu, {
|
|
86
85
|
renderIcon: CaretDown16,
|
|
87
|
-
size: "sm"
|
|
86
|
+
size: "sm",
|
|
87
|
+
menuOptionsClass: "".concat(blockClass, "__select-all-toggle-overflow")
|
|
88
88
|
}, /*#__PURE__*/React.createElement(OverflowMenuItem, {
|
|
89
89
|
itemText: allPageRowsLabel,
|
|
90
90
|
requireTitle: true,
|
|
@@ -7,10 +7,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
import React, { useEffect, useState } from 'react';
|
|
10
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
11
11
|
import { Add16, OverflowMenuVertical16 } from '@carbon/icons-react';
|
|
12
12
|
import { DataTable, TableBatchActions, TableBatchAction } from 'carbon-components-react';
|
|
13
|
-
import {
|
|
13
|
+
import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
|
|
14
14
|
import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
|
|
15
15
|
import { pkg, carbon } from '../../../settings';
|
|
16
16
|
import cx from 'classnames';
|
|
@@ -124,9 +124,9 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
|
124
124
|
})), renderBatchActionOverflow());
|
|
125
125
|
};
|
|
126
126
|
var DatagridToolbar = function DatagridToolbar(datagridState) {
|
|
127
|
-
var
|
|
128
|
-
|
|
129
|
-
|
|
127
|
+
var ref = useRef(null);
|
|
128
|
+
var _useResizeObserver = useResizeObserver(ref),
|
|
129
|
+
width = _useResizeObserver.width;
|
|
130
130
|
var DatagridActions = datagridState.DatagridActions,
|
|
131
131
|
DatagridBatchActions = datagridState.DatagridBatchActions,
|
|
132
132
|
batchActions = datagridState.batchActions,
|
|
@@ -13,7 +13,7 @@ import React, { useEffect } from 'react';
|
|
|
13
13
|
import { VariableSizeList } from 'react-window';
|
|
14
14
|
import { DataTable } from 'carbon-components-react';
|
|
15
15
|
import { px } from '@carbon/layout';
|
|
16
|
-
import {
|
|
16
|
+
import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
|
|
17
17
|
import { pkg } from '../../../settings';
|
|
18
18
|
import DatagridHead from './DatagridHead';
|
|
19
19
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
@@ -51,9 +51,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
|
51
51
|
var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
|
|
52
52
|
gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
|
|
53
53
|
};
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
targetRef: gridRef
|
|
54
|
+
useResizeObserver(gridRef, {
|
|
55
|
+
callback: handleVirtualGridResize
|
|
57
56
|
});
|
|
58
57
|
var syncScroll = function syncScroll(e) {
|
|
59
58
|
var virtualBody = e.target;
|
|
@@ -44,7 +44,12 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
|
44
44
|
secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
|
|
45
45
|
setAllFilters = _ref.setAllFilters,
|
|
46
46
|
_ref$data = _ref.data,
|
|
47
|
-
data = _ref$data === void 0 ? [] : _ref$data
|
|
47
|
+
data = _ref$data === void 0 ? [] : _ref$data,
|
|
48
|
+
_ref$initialFilters = _ref.initialFilters,
|
|
49
|
+
initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
|
|
50
|
+
// Save the initial filters we only need the filters once when it loads
|
|
51
|
+
var initialFiltersRef = useRef(initialFilters);
|
|
52
|
+
|
|
48
53
|
/** State */
|
|
49
54
|
var _useState = useState(false),
|
|
50
55
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -54,7 +59,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
|
54
59
|
updateMethod: updateMethod,
|
|
55
60
|
filters: filters,
|
|
56
61
|
setAllFilters: setAllFilters,
|
|
57
|
-
variation: FLYOUT
|
|
62
|
+
variation: FLYOUT,
|
|
63
|
+
initialFilters: initialFiltersRef.current
|
|
58
64
|
}),
|
|
59
65
|
filtersState = _useFilters.filtersState,
|
|
60
66
|
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
|
@@ -179,11 +185,19 @@ FilterFlyout.propTypes = {
|
|
|
179
185
|
type: PropTypes.string.isRequired,
|
|
180
186
|
column: PropTypes.string.isRequired,
|
|
181
187
|
props: PropTypes.object.isRequired
|
|
182
|
-
}))
|
|
188
|
+
})),
|
|
183
189
|
/**
|
|
184
190
|
* Icon description for the filter flyout button
|
|
185
191
|
*/
|
|
186
192
|
flyoutIconDescription: PropTypes.string,
|
|
193
|
+
/**
|
|
194
|
+
* Filters that should be applied on load
|
|
195
|
+
*/
|
|
196
|
+
initialFilters: PropTypes.arrayOf(PropTypes.shape({
|
|
197
|
+
id: PropTypes.string.isRequired,
|
|
198
|
+
type: PropTypes.string.isRequired,
|
|
199
|
+
value: PropTypes.any.isRequired
|
|
200
|
+
})),
|
|
187
201
|
/**
|
|
188
202
|
* Callback when the apply button is clicked
|
|
189
203
|
*/
|
|
@@ -53,7 +53,12 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
|
53
53
|
_ref$searchLabelText = _ref.searchLabelText,
|
|
54
54
|
searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
|
|
55
55
|
_ref$searchPlaceholde = _ref.searchPlaceholder,
|
|
56
|
-
searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde
|
|
56
|
+
searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
|
|
57
|
+
_ref$initialFilters = _ref.initialFilters,
|
|
58
|
+
initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
|
|
59
|
+
// Save the initial filters we only need the filters once
|
|
60
|
+
var initialFiltersRef = useRef(initialFilters);
|
|
61
|
+
|
|
57
62
|
/** State */
|
|
58
63
|
var _useState = useState(false),
|
|
59
64
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -63,7 +68,8 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
|
63
68
|
updateMethod: updateMethod,
|
|
64
69
|
filters: filterSections,
|
|
65
70
|
setAllFilters: setAllFilters,
|
|
66
|
-
variation: PANEL
|
|
71
|
+
variation: PANEL,
|
|
72
|
+
initialFilters: initialFiltersRef.current
|
|
67
73
|
}),
|
|
68
74
|
filtersState = _useFilters.filtersState,
|
|
69
75
|
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
|
@@ -214,6 +220,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
|
214
220
|
filters = _ref2$filters === void 0 ? [] : _ref2$filters,
|
|
215
221
|
hasAccordion = _ref2.hasAccordion;
|
|
216
222
|
return /*#__PURE__*/React.createElement("div", {
|
|
223
|
+
key: categoryTitle,
|
|
217
224
|
className: "".concat(componentClass, "__category")
|
|
218
225
|
}, categoryTitle && /*#__PURE__*/React.createElement("div", {
|
|
219
226
|
className: "".concat(componentClass, "__category-title")
|
|
@@ -234,6 +241,14 @@ FilterPanel.propTypes = {
|
|
|
234
241
|
closeIconDescription: PropTypes.string,
|
|
235
242
|
filterPanelMinHeight: PropTypes.number,
|
|
236
243
|
filterSections: PropTypes.array,
|
|
244
|
+
/**
|
|
245
|
+
* Filters that should be applied on load
|
|
246
|
+
*/
|
|
247
|
+
initialFilters: PropTypes.arrayOf(PropTypes.shape({
|
|
248
|
+
id: PropTypes.string.isRequired,
|
|
249
|
+
type: PropTypes.string.isRequired,
|
|
250
|
+
value: PropTypes.any.isRequired
|
|
251
|
+
})),
|
|
237
252
|
onApply: PropTypes.func,
|
|
238
253
|
onCancel: PropTypes.func,
|
|
239
254
|
onPanelClose: PropTypes.func,
|
|
@@ -21,13 +21,14 @@ var useFilters = function useFilters(_ref) {
|
|
|
21
21
|
_ref$filters = _ref.filters,
|
|
22
22
|
filters = _ref$filters === void 0 ? [] : _ref$filters,
|
|
23
23
|
setAllFilters = _ref.setAllFilters,
|
|
24
|
-
variation = _ref.variation
|
|
24
|
+
variation = _ref.variation,
|
|
25
|
+
initialFilters = _ref.initialFilters;
|
|
25
26
|
/** State */
|
|
26
|
-
var _useInitialStateFromF = useInitialStateFromFilters(filters, variation),
|
|
27
|
+
var _useInitialStateFromF = useInitialStateFromFilters(filters, variation, initialFilters),
|
|
27
28
|
_useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
|
|
28
29
|
filtersState = _useInitialStateFromF2[0],
|
|
29
30
|
setFiltersState = _useInitialStateFromF2[1];
|
|
30
|
-
var _useState = useState(
|
|
31
|
+
var _useState = useState(initialFilters),
|
|
31
32
|
_useState2 = _slicedToArray(_useState, 2),
|
|
32
33
|
filtersObjectArray = _useState2[0],
|
|
33
34
|
setFiltersObjectArray = _useState2[1];
|
|
@@ -44,8 +45,11 @@ var useFilters = function useFilters(_ref) {
|
|
|
44
45
|
setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
|
|
45
46
|
};
|
|
46
47
|
var reset = function reset() {
|
|
48
|
+
// When we reset we want the "initialFilters" to be an empty array
|
|
49
|
+
var resetFiltersArray = [];
|
|
50
|
+
|
|
47
51
|
// Get the initial values for the filters
|
|
48
|
-
var initialFiltersState = getInitialStateFromFilters(filters, variation);
|
|
52
|
+
var initialFiltersState = getInitialStateFromFilters(filters, variation, resetFiltersArray);
|
|
49
53
|
var initialFiltersObjectArray = [];
|
|
50
54
|
|
|
51
55
|
// Set the state to the initial values
|
package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js
CHANGED
|
@@ -11,7 +11,8 @@ import { FLYOUT } from '../constants';
|
|
|
11
11
|
import { getInitialStateFromFilters } from '../utils';
|
|
12
12
|
var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
|
|
13
13
|
var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
|
|
14
|
-
var
|
|
14
|
+
var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
15
|
+
var _useState = useState(getInitialStateFromFilters(filters, variation, initialFilters)),
|
|
15
16
|
_useState2 = _slicedToArray(_useState, 2),
|
|
16
17
|
state = _useState2[0],
|
|
17
18
|
setState = _useState2[1];
|
|
@@ -6,10 +6,21 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { CHECKBOX, DATE, DROPDOWN, FLYOUT, NUMBER, PANEL, RADIO } from './constants';
|
|
9
|
+
var applyInitialFilters = function applyInitialFilters(filterState, initialFilters) {
|
|
10
|
+
Object.keys(filterState).forEach(function (key) {
|
|
11
|
+
var hasInitialFilter = initialFilters.find(function (filter) {
|
|
12
|
+
return filter.id === key;
|
|
13
|
+
});
|
|
14
|
+
if (hasInitialFilter) {
|
|
15
|
+
filterState[key].value = hasInitialFilter.value;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
};
|
|
9
19
|
|
|
10
20
|
// This functions takes the filters passed in and makes an object to track it's state
|
|
11
21
|
export var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
|
|
12
22
|
var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
|
|
23
|
+
var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
13
24
|
var initialFilterState = {};
|
|
14
25
|
var setInitialState = function setInitialState(_ref) {
|
|
15
26
|
var type = _ref.type,
|
|
@@ -66,5 +77,8 @@ export var getInitialStateFromFilters = function getInitialStateFromFilters(filt
|
|
|
66
77
|
} else {
|
|
67
78
|
console.error('No variation passed into useInitialStateFromFilters');
|
|
68
79
|
}
|
|
80
|
+
if (initialFilters.length > 0) {
|
|
81
|
+
applyInitialFilters(initialFilterState, initialFilters);
|
|
82
|
+
}
|
|
69
83
|
return initialFilterState;
|
|
70
84
|
};
|
|
@@ -23,5 +23,6 @@ export { default as useSelectAllWithToggle } from './useSelectAllToggle';
|
|
|
23
23
|
export { default as useColumnCenterAlign } from './useColumnCenterAlign';
|
|
24
24
|
export { default as useColumnOrder } from './useColumnOrder';
|
|
25
25
|
export { default as useInlineEdit } from './useInlineEdit';
|
|
26
|
+
export { default as useEditableCell } from './useEditableCell';
|
|
26
27
|
export { default as useFiltering } from './useFiltering';
|
|
27
28
|
export { getAutoSizedColumnWidth } from './utils/getAutoSizedColumnWidth';
|
|
@@ -5,19 +5,22 @@ var _excluded = ["id", "itemText", "onClick", "icon"],
|
|
|
5
5
|
_excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
|
|
6
6
|
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; }
|
|
7
7
|
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) { _defineProperty(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; }
|
|
8
|
-
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
8
|
+
/**
|
|
9
|
+
* Copyright IBM Corp. 2021, 2023
|
|
10
|
+
*
|
|
11
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
|
14
13
|
*/
|
|
15
|
-
|
|
14
|
+
|
|
15
|
+
import React, { useEffect } from 'react';
|
|
16
16
|
import cx from 'classnames';
|
|
17
17
|
import { IconSkeleton, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
|
|
18
18
|
import { pkg } from '../../settings';
|
|
19
19
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
20
20
|
var useActionsColumn = function useActionsColumn(hooks) {
|
|
21
|
+
useEffect(function () {
|
|
22
|
+
pkg.checkReportFeatureEnabled('Datagrid.useActionsColumn');
|
|
23
|
+
}, []);
|
|
21
24
|
var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
|
|
22
25
|
var rowActions = instance.rowActions,
|
|
23
26
|
isFetching = instance.isFetching,
|
|
@@ -4,15 +4,19 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
4
4
|
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; }
|
|
5
5
|
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) { _defineProperty(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; }
|
|
6
6
|
/**
|
|
7
|
-
* Copyright IBM Corp. 2022,
|
|
7
|
+
* Copyright IBM Corp. 2022, 2023
|
|
8
8
|
*
|
|
9
9
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import * as React from 'react';
|
|
14
|
+
import { pkg } from '../../settings';
|
|
14
15
|
import { CustomizeColumnsTearsheetWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
|
|
15
16
|
var useCustomizeColumns = function useCustomizeColumns(hooks) {
|
|
17
|
+
React.useEffect(function () {
|
|
18
|
+
pkg.checkReportFeatureEnabled('Datagrid.useCustomizeColumns');
|
|
19
|
+
}, []);
|
|
16
20
|
var _React$useState = React.useState(false),
|
|
17
21
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
18
22
|
isTearsheetOpen = _React$useState2[0],
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2023, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import useInlineEdit from './useInlineEdit';
|
|
9
|
+
var useEditableCell = function useEditableCell(hooks) {
|
|
10
|
+
useInlineEdit(hooks, 'usingEditableCell');
|
|
11
|
+
};
|
|
12
|
+
export default useEditableCell;
|
|
@@ -2,17 +2,21 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
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; }
|
|
4
4
|
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) { _defineProperty(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; }
|
|
5
|
-
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
5
|
+
/**
|
|
6
|
+
* Copyright IBM Corp. 2020, 2023
|
|
7
|
+
*
|
|
8
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
9
|
+
* LICENSE file in the root directory of this source tree.
|
|
11
10
|
*/
|
|
12
|
-
|
|
11
|
+
|
|
12
|
+
import { useEffect, useState } from 'react';
|
|
13
|
+
import { pkg } from '../../settings';
|
|
13
14
|
import DatagridExpandedRow from './Datagrid/DatagridExpandedRow';
|
|
14
15
|
import useRowExpander from './useRowExpander';
|
|
15
16
|
var useExpandedRow = function useExpandedRow(hooks) {
|
|
17
|
+
useEffect(function () {
|
|
18
|
+
pkg.checkReportFeatureEnabled('Datagrid.useExpandedRow');
|
|
19
|
+
}, []);
|
|
16
20
|
useRowExpander(hooks);
|
|
17
21
|
var useInstance = function useInstance(instance) {
|
|
18
22
|
var rows = instance.rows,
|
|
@@ -2,18 +2,21 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
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; }
|
|
4
4
|
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) { _defineProperty(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; }
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* US Government Users Restricted Rights - Use, duplication or disclosure
|
|
11
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
5
|
+
/**
|
|
6
|
+
* Copyright IBM Corp. 2022, 2023
|
|
7
|
+
*
|
|
8
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
9
|
+
* LICENSE file in the root directory of this source tree.
|
|
12
10
|
*/
|
|
13
|
-
|
|
11
|
+
|
|
12
|
+
import { useMemo, useEffect } from 'react';
|
|
13
|
+
import { pkg } from '../../settings';
|
|
14
14
|
import { FilterFlyout } from './Datagrid/addons/Filtering';
|
|
15
15
|
import { BATCH } from './Datagrid/addons/Filtering/constants';
|
|
16
16
|
var useFiltering = function useFiltering(hooks) {
|
|
17
|
+
useEffect(function () {
|
|
18
|
+
pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
|
|
19
|
+
}, []);
|
|
17
20
|
var filterTypes = useMemo(function () {
|
|
18
21
|
return {
|
|
19
22
|
date: function date(rows, id, _ref) {
|
|
@@ -65,11 +68,13 @@ var useFiltering = function useFiltering(hooks) {
|
|
|
65
68
|
setAllFilters = instance.setAllFilters,
|
|
66
69
|
setFilter = instance.setFilter,
|
|
67
70
|
headers = instance.headers,
|
|
68
|
-
data = instance.data
|
|
71
|
+
data = instance.data,
|
|
72
|
+
state = instance.state;
|
|
69
73
|
var defaultProps = {
|
|
70
74
|
variation: 'flyout',
|
|
71
75
|
updateMethod: BATCH,
|
|
72
|
-
panelIconDescription: 'Open filter panel'
|
|
76
|
+
panelIconDescription: 'Open filter panel',
|
|
77
|
+
initialFilters: state.filters
|
|
73
78
|
};
|
|
74
79
|
var getFilterFlyoutProps = function getFilterFlyoutProps() {
|
|
75
80
|
return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
|
|
@@ -1,17 +1,26 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
2
|
+
/**
|
|
3
|
+
* Copyright IBM Corp. 2022, 2023
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
8
7
|
*/
|
|
9
|
-
|
|
8
|
+
|
|
9
|
+
import React, { useEffect } from 'react';
|
|
10
10
|
import { pkg } from '../../settings';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { InlineEditCell } from './Datagrid/addons/InlineEdit/InlineEditCell';
|
|
13
|
+
import { warn } from '../../global/js/utils/pconsole';
|
|
13
14
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
14
|
-
var useInlineEdit = function useInlineEdit(hooks) {
|
|
15
|
+
var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
|
|
16
|
+
useEffect(function () {
|
|
17
|
+
pkg.checkReportFeatureEnabled('Datagrid.useInlineEdit');
|
|
18
|
+
}, []);
|
|
19
|
+
useEffect(function () {
|
|
20
|
+
if (!usingEditableCell) {
|
|
21
|
+
warn("The 'useInlineEdit' hook is being renamed in Carbon for IBM Products v2 to 'useEditableCell'. You can use this newly renamed hook now or upgrade when moving to v2.");
|
|
22
|
+
}
|
|
23
|
+
}, [usingEditableCell]);
|
|
15
24
|
var addInlineEdit = function addInlineEdit(props, _ref) {
|
|
16
25
|
var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
|
|
17
26
|
var cell = _ref.cell,
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
2
|
+
/**
|
|
3
|
+
* Copyright IBM Corp. 2020, 2023
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
8
7
|
*/
|
|
8
|
+
|
|
9
|
+
import { useEffect } from 'react';
|
|
9
10
|
import { pkg } from '../../settings';
|
|
10
11
|
import cx from 'classnames';
|
|
11
12
|
import useNestedRowExpander from './useNestedRowExpander';
|
|
12
13
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
13
14
|
var useNestedRows = function useNestedRows(hooks) {
|
|
15
|
+
useEffect(function () {
|
|
16
|
+
pkg.checkReportFeatureEnabled('Datagrid.useNestedRows');
|
|
17
|
+
}, []);
|
|
14
18
|
useNestedRowExpander(hooks);
|
|
15
19
|
var marginLeft = 24;
|
|
16
20
|
var getRowProps = function getRowProps(props, _ref) {
|
|
@@ -24,9 +24,17 @@ var useOnRowClick = function useOnRowClick(hooks) {
|
|
|
24
24
|
toggleRowSelected(id, true);
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
|
+
var onKeyDown = function onKeyDown(event) {
|
|
28
|
+
var key = event.key;
|
|
29
|
+
if (key === 'Enter') {
|
|
30
|
+
onClick();
|
|
31
|
+
}
|
|
32
|
+
};
|
|
27
33
|
return [props, {
|
|
28
|
-
onClick: onClick
|
|
34
|
+
onClick: onClick,
|
|
35
|
+
onKeyDown: onKeyDown
|
|
29
36
|
}, {
|
|
37
|
+
tabIndex: 0,
|
|
30
38
|
style: {
|
|
31
39
|
cursor: 'pointer'
|
|
32
40
|
}
|
|
@@ -71,6 +71,7 @@ var SelectRow = function SelectRow(datagridState) {
|
|
|
71
71
|
radio = datagridState.radio,
|
|
72
72
|
toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
|
|
73
73
|
onRadioSelect = datagridState.onRadioSelect,
|
|
74
|
+
onRowSelect = datagridState.onRowSelect,
|
|
74
75
|
columns = datagridState.columns,
|
|
75
76
|
withStickyColumn = datagridState.withStickyColumn;
|
|
76
77
|
var _useState = useState(window.innerWidth),
|
|
@@ -103,6 +104,7 @@ var SelectRow = function SelectRow(datagridState) {
|
|
|
103
104
|
}
|
|
104
105
|
}
|
|
105
106
|
onChange(e);
|
|
107
|
+
onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row, e);
|
|
106
108
|
},
|
|
107
109
|
id: "".concat(tableId, "-").concat(row.index),
|
|
108
110
|
name: "".concat(tableId, "-").concat(row.index, "-name"),
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["v2"];
|
|
4
|
+
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; }
|
|
5
|
+
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) { _defineProperty(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; }
|
|
6
|
+
/**
|
|
7
|
+
* Copyright IBM Corp. 2022, 2022
|
|
8
|
+
*
|
|
9
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
10
|
+
* LICENSE file in the root directory of this source tree.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import React, { forwardRef } from 'react';
|
|
14
|
+
import PropTypes from 'prop-types';
|
|
15
|
+
import { pkg } from '../../settings';
|
|
16
|
+
import { InlineEditV1 } from '../InlineEditV1';
|
|
17
|
+
import { InlineEditV2 } from '../InlineEditV2';
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* this is a wrapper component that will allow us to support the rename of InlineEdit to EditInPlace
|
|
21
|
+
*
|
|
22
|
+
* if the user passes in the v2 feature flag the v2 version of the component will be rendered
|
|
23
|
+
* since this is a temporary solution the named export should just remain InlineEdit unlike how
|
|
24
|
+
* Card works as a base layer for Productive and Expressive cards.
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
var componentName = 'EditInPlace';
|
|
28
|
+
export var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
29
|
+
var v2 = _ref.v2,
|
|
30
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
31
|
+
var props = _objectSpread(_objectSpread({}, rest), {}, {
|
|
32
|
+
ref: ref
|
|
33
|
+
});
|
|
34
|
+
if (v2 === true) {
|
|
35
|
+
return /*#__PURE__*/React.createElement(InlineEditV2, props);
|
|
36
|
+
}
|
|
37
|
+
return /*#__PURE__*/React.createElement(InlineEditV1, props);
|
|
38
|
+
});
|
|
39
|
+
EditInPlace = pkg.checkComponentEnabled(EditInPlace, componentName);
|
|
40
|
+
EditInPlace.displayName = componentName;
|
|
41
|
+
EditInPlace.propTypes = {
|
|
42
|
+
v2: PropTypes.bool
|
|
43
|
+
};
|