@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.
Files changed (101) hide show
  1. package/README.md +10 -5
  2. package/css/index-full-carbon.css +131 -82
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +2 -2
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +38 -11
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +1 -1
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +131 -82
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +2 -2
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +131 -82
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +2 -2
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/AboutModal/AboutModal.js +3 -4
  19. package/es/components/ActionBar/ActionBar.js +9 -18
  20. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +8 -13
  21. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
  22. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +8 -8
  23. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -5
  24. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
  25. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  26. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
  27. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
  28. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  29. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +14 -0
  30. package/es/components/Datagrid/index.js +1 -0
  31. package/es/components/Datagrid/useActionsColumn.js +10 -7
  32. package/es/components/Datagrid/useCustomizeColumns.js +5 -1
  33. package/es/components/Datagrid/useEditableCell.js +12 -0
  34. package/es/components/Datagrid/useExpandedRow.js +11 -7
  35. package/es/components/Datagrid/useFiltering.js +15 -10
  36. package/es/components/Datagrid/useInlineEdit.js +17 -8
  37. package/es/components/Datagrid/useNestedRows.js +10 -6
  38. package/es/components/Datagrid/useOnRowClick.js +9 -1
  39. package/es/components/Datagrid/useSelectRows.js +2 -0
  40. package/es/components/EditInPlace/EditInPlace.js +43 -0
  41. package/es/components/EditInPlace/index.js +8 -0
  42. package/es/components/ExampleComponent/ExampleComponent.js +32 -4
  43. package/es/components/ExampleComponent/useExample.js +49 -0
  44. package/es/components/InlineEdit/InlineEdit.js +5 -1
  45. package/es/components/InlineEditV1/InlineEditV1.js +7 -2
  46. package/es/components/InlineEditV2/InlineEditV2.js +51 -15
  47. package/es/components/NonLinearReading/NonLinearReading.js +7 -7
  48. package/es/components/PageHeader/PageHeader.js +28 -31
  49. package/es/components/SidePanel/SidePanel.js +25 -26
  50. package/es/components/TagSet/TagSet.js +5 -7
  51. package/es/components/Tearsheet/TearsheetShell.js +4 -6
  52. package/es/components/index.js +2 -1
  53. package/es/global/js/hooks/useResizeObserver.js +74 -0
  54. package/es/global/js/package-settings.js +35 -4
  55. package/es/global/js/utils/test-helper.js +34 -3
  56. package/es/settings.js +40 -29
  57. package/lib/components/AboutModal/AboutModal.js +3 -4
  58. package/lib/components/ActionBar/ActionBar.js +9 -18
  59. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +8 -13
  60. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
  61. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
  62. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -4
  63. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
  64. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  65. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
  66. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
  67. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  68. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +15 -0
  69. package/lib/components/Datagrid/index.js +7 -0
  70. package/lib/components/Datagrid/useActionsColumn.js +7 -1
  71. package/lib/components/Datagrid/useCustomizeColumns.js +4 -0
  72. package/lib/components/Datagrid/useEditableCell.js +20 -0
  73. package/lib/components/Datagrid/useExpandedRow.js +4 -0
  74. package/lib/components/Datagrid/useFiltering.js +8 -2
  75. package/lib/components/Datagrid/useInlineEdit.js +19 -8
  76. package/lib/components/Datagrid/useNestedRows.js +9 -6
  77. package/lib/components/Datagrid/useOnRowClick.js +9 -1
  78. package/lib/components/Datagrid/useSelectRows.js +2 -0
  79. package/lib/components/EditInPlace/EditInPlace.js +46 -0
  80. package/lib/components/EditInPlace/index.js +12 -0
  81. package/lib/components/ExampleComponent/ExampleComponent.js +35 -4
  82. package/lib/components/ExampleComponent/useExample.js +58 -0
  83. package/lib/components/InlineEdit/InlineEdit.js +5 -1
  84. package/lib/components/InlineEditV1/InlineEditV1.js +7 -2
  85. package/lib/components/InlineEditV2/InlineEditV2.js +53 -16
  86. package/lib/components/NonLinearReading/NonLinearReading.js +6 -6
  87. package/lib/components/PageHeader/PageHeader.js +28 -31
  88. package/lib/components/SidePanel/SidePanel.js +25 -26
  89. package/lib/components/TagSet/TagSet.js +5 -7
  90. package/lib/components/Tearsheet/TearsheetShell.js +4 -6
  91. package/lib/components/index.js +13 -0
  92. package/lib/global/js/hooks/useResizeObserver.js +83 -0
  93. package/lib/global/js/package-settings.js +34 -3
  94. package/lib/global/js/utils/test-helper.js +37 -5
  95. package/lib/settings.js +41 -30
  96. package/package.json +2 -3
  97. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +10 -7
  98. package/scss/components/InlineEditV2/_inline-edit-v2.scss +52 -11
  99. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -2
  100. package/scss/components/NonLinearReading/_non-linear-reading.scss +76 -67
  101. 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 { useResizeDetector } from 'react-resize-detector';
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
- useResizeDetector({
253
- onResize: handleBreadcrumbItemsResize,
254
- targetRef: sizingContainerRef
246
+
247
+ // container resize
248
+ useResizeObserver(sizingContainerRef, {
249
+ callback: handleResize
255
250
  });
256
- useResizeDetector({
257
- onResize: handleResize,
258
- targetRef: breadcrumbItemWithOverflow
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 { useResizeDetector } from 'react-resize-detector';
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
- useResizeDetector({
139
- onResize: checkFullyVisibleItems,
140
- targetRef: sizingContainerRefSet
138
+ useResizeObserver(sizingContainerRefSet, {
139
+ callback: checkFullyVisibleItems
141
140
  });
142
- useResizeDetector({
143
- onResize: checkFullyVisibleItems,
144
- targetRef: sizingContainerRefCombo
141
+ useResizeObserver(sizingContainerRefCombo, {
142
+ callback: checkFullyVisibleItems
145
143
  });
146
- useResizeDetector({
147
- onResize: checkFullyVisibleItems,
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
- * Licensed Materials - Property of IBM
8
- * 5724-Q36
9
- * (c) Copyright IBM Corp. 2020, 2021
10
- * US Government Users Restricted Rights - Use, duplication or disclosure
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
- // @flow
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 { useResizeDetector } from 'react-resize-detector';
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 _useResizeDetector = useResizeDetector(),
128
- width = _useResizeDetector.width,
129
- ref = _useResizeDetector.ref;
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 { useResizeDetector } from 'react-resize-detector';
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
- useResizeDetector({
55
- onResize: handleVirtualGridResize,
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
- })).isRequired,
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
@@ -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 _useState = useState(getInitialStateFromFilters(filters, variation)),
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
- * Licensed Materials - Property of IBM
10
- * 5724-Q36
11
- * (c) Copyright IBM Corp. 2021
12
- * US Government Users Restricted Rights - Use, duplication or disclosure
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
- import React from 'react';
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, 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
- * Licensed Materials - Property of IBM
7
- * 5724-Q36
8
- * (c) Copyright IBM Corp. 2020
9
- * US Government Users Restricted Rights - Use, duplication or disclosure
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
- import { useState } from 'react';
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
- // @flow
6
- /*
7
- * Licensed Materials - Property of IBM
8
- * 5724-Q36
9
- * (c) Copyright IBM Corp. 2022
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
- import { useMemo } from 'react';
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
- * Licensed Materials - Property of IBM
4
- * 5724-Q36
5
- * (c) Copyright IBM Corp. 2022
6
- * US Government Users Restricted Rights - Use, duplication or disclosure
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
- import React from 'react';
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
- * Licensed Materials - Property of IBM
4
- * 5724-Q36
5
- * (c) Copyright IBM Corp. 2020
6
- * US Government Users Restricted Rights - Use, duplication or disclosure
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
+ };
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2022, 2022
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
+ export { EditInPlace } from './EditInPlace';