@carbon/ibm-products 2.1.2 → 2.2.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 (109) hide show
  1. package/css/index-full-carbon.css +58 -216
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +11 -59
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +30 -92
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +28 -114
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AboutModal/AboutModal.js +3 -1
  18. package/es/components/ActionBar/ActionBar.js +6 -2
  19. package/es/components/AddSelect/AddSelectFormControl.js +6 -6
  20. package/es/components/AddSelect/AddSelectRow.js +5 -15
  21. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -5
  22. package/es/components/ButtonMenu/ButtonMenu.js +4 -4
  23. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +9 -3
  24. package/es/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
  25. package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  26. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
  27. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
  28. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +47 -39
  29. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +24 -20
  30. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +1 -0
  31. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +15 -44
  32. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +21 -0
  33. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +17 -17
  34. package/es/components/Datagrid/useActionsColumn.js +7 -10
  35. package/es/components/Datagrid/useCustomizeColumns.js +7 -9
  36. package/es/components/Datagrid/useExpandedRow.js +7 -11
  37. package/es/components/Datagrid/useFiltering.js +8 -12
  38. package/es/components/Datagrid/useInlineEdit.js +0 -3
  39. package/es/components/Datagrid/useNestedRows.js +6 -10
  40. package/es/components/Datagrid/useStickyColumn.js +3 -10
  41. package/es/components/Datagrid/utils/DatagridActions.js +14 -6
  42. package/es/components/ImportModal/ImportModal.js +6 -13
  43. package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +17 -2
  44. package/es/components/PageHeader/PageHeader.js +6 -2
  45. package/es/components/PageHeader/PageHeaderUtils.js +2 -2
  46. package/es/components/SidePanel/SidePanel.js +3 -1
  47. package/es/components/TagSet/TagSet.js +7 -4
  48. package/es/components/Tearsheet/TearsheetShell.js +5 -4
  49. package/es/components/UserProfileImage/UserProfileImage.js +2 -13
  50. package/es/global/js/hooks/useCreateComponentStepChange.js +15 -16
  51. package/es/global/js/hooks/useResizeObserver.js +28 -14
  52. package/es/global/js/package-settings.js +1 -14
  53. package/es/global/js/utils/story-helper.js +1 -1
  54. package/lib/components/AboutModal/AboutModal.js +3 -1
  55. package/lib/components/ActionBar/ActionBar.js +6 -2
  56. package/lib/components/AddSelect/AddSelectFormControl.js +6 -6
  57. package/lib/components/AddSelect/AddSelectRow.js +5 -15
  58. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -5
  59. package/lib/components/ButtonMenu/ButtonMenu.js +4 -4
  60. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +9 -3
  61. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
  62. package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  63. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
  64. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
  65. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +45 -37
  66. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +24 -20
  67. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +7 -0
  68. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +13 -42
  69. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +30 -0
  70. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +17 -17
  71. package/lib/components/Datagrid/useActionsColumn.js +7 -12
  72. package/lib/components/Datagrid/useCustomizeColumns.js +8 -10
  73. package/lib/components/Datagrid/useExpandedRow.js +6 -9
  74. package/lib/components/Datagrid/useFiltering.js +7 -10
  75. package/lib/components/Datagrid/useInlineEdit.js +0 -3
  76. package/lib/components/Datagrid/useNestedRows.js +6 -9
  77. package/lib/components/Datagrid/useStickyColumn.js +3 -10
  78. package/lib/components/Datagrid/utils/DatagridActions.js +13 -5
  79. package/lib/components/ImportModal/ImportModal.js +6 -13
  80. package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +17 -2
  81. package/lib/components/PageHeader/PageHeader.js +6 -2
  82. package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
  83. package/lib/components/SidePanel/SidePanel.js +3 -1
  84. package/lib/components/TagSet/TagSet.js +7 -4
  85. package/lib/components/Tearsheet/TearsheetShell.js +5 -4
  86. package/lib/components/UserProfileImage/UserProfileImage.js +2 -13
  87. package/lib/global/js/hooks/useCreateComponentStepChange.js +15 -16
  88. package/lib/global/js/hooks/useResizeObserver.js +27 -13
  89. package/lib/global/js/package-settings.js +1 -14
  90. package/lib/global/js/utils/story-helper.js +1 -1
  91. package/package.json +10 -10
  92. package/scss/components/AddSelect/_add-select.scss +0 -4
  93. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +1 -0
  94. package/scss/components/ButtonMenu/_button-menu.scss +1 -32
  95. package/scss/components/DataSpreadsheet/_storybook-styles.scss +0 -6
  96. package/scss/components/Datagrid/_datagrid.scss +2 -4
  97. package/scss/components/Datagrid/_storybook-styles.scss +1 -15
  98. package/scss/components/Datagrid/styles/_datagrid.scss +13 -12
  99. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +0 -7
  100. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +0 -4
  101. package/scss/components/HTTPErrors/_storybook-styles.scss +2 -16
  102. package/scss/components/NotificationsPanel/_notifications-panel.scss +1 -1
  103. package/scss/components/NotificationsPanel/_storybook-styles.scss +4 -0
  104. package/scss/components/PageHeader/_page-header.scss +1 -0
  105. package/scss/components/PageHeader/_storybook-styles.scss +14 -42
  106. package/scss/components/SidePanel/_side-panel.scss +2 -0
  107. package/scss/components/Tearsheet/_tearsheet.scss +6 -7
  108. package/scss/components/WebTerminal/_storybook-styles.scss +1 -16
  109. package/scss/global/styles/_display-box.scss +0 -1
@@ -82,7 +82,7 @@ export var DatagridContent = function DatagridContent(_ref) {
82
82
  return /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
83
83
  className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
84
84
  role: withInlineEdit && 'grid',
85
- tabIndex: withInlineEdit ? 0 : -1,
85
+ tabIndex: withInlineEdit && 0,
86
86
  onKeyDown: withInlineEdit ? function (event) {
87
87
  return handleGridKeyPress({
88
88
  event: event,
@@ -50,7 +50,9 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
50
50
  var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
51
51
  gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
52
52
  };
53
- useResizeObserver(gridRef, handleVirtualGridResize);
53
+ useResizeObserver(gridRef, {
54
+ callback: handleVirtualGridResize
55
+ });
54
56
  var syncScroll = function syncScroll(e) {
55
57
  var virtualBody = e.target;
56
58
  document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
@@ -20,7 +20,7 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
20
20
  rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
21
21
  return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
22
22
  isOpen: isTearsheetOpen,
23
- isTableSortable: (instance === null || instance === void 0 ? void 0 : instance.isTableSortable) || false,
23
+ isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
24
24
  setIsTearsheetOpen: setIsTearsheetOpen,
25
25
  columnDefinitions: instance.allColumns,
26
26
  originalColumnDefinitions: instance.columns,
@@ -9,10 +9,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
9
9
  */
10
10
 
11
11
  import { Filter } from '@carbon/react/icons';
12
- import { IconButton, usePrefix } from '@carbon/react';
12
+ import { Button, usePrefix } from '@carbon/react';
13
13
  import cx from 'classnames';
14
14
  import PropTypes from 'prop-types';
15
- import React, { useRef, useState, useEffect } from 'react';
15
+ import React, { useRef, useState } from 'react';
16
16
  import { useClickOutside } from '../../../../../global/js/hooks';
17
17
  import { pkg } from '../../../../../settings';
18
18
  import { ActionSet } from '../../../../ActionSet';
@@ -45,8 +45,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
45
45
  setAllFilters = _ref.setAllFilters,
46
46
  _ref$data = _ref.data,
47
47
  data = _ref$data === void 0 ? [] : _ref$data,
48
- _ref$reactTableFilter = _ref.reactTableFiltersState,
49
- reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
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
+
50
53
  /** State */
51
54
  var _useState = useState(false),
52
55
  _useState2 = _slicedToArray(_useState, 2),
@@ -57,17 +60,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
57
60
  filters: filters,
58
61
  setAllFilters: setAllFilters,
59
62
  variation: FLYOUT,
60
- reactTableFiltersState: reactTableFiltersState,
61
- onCancel: onCancel
63
+ initialFilters: initialFiltersRef.current
62
64
  }),
63
65
  filtersState = _useFilters.filtersState,
64
66
  prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
65
67
  prevFiltersRef = _useFilters.prevFiltersRef,
66
- cancel = _useFilters.cancel,
68
+ revertToPreviousFilters = _useFilters.revertToPreviousFilters,
67
69
  reset = _useFilters.reset,
68
70
  renderFilter = _useFilters.renderFilter,
69
- filtersObjectArray = _useFilters.filtersObjectArray,
70
- lastAppliedFilters = _useFilters.lastAppliedFilters;
71
+ filtersObjectArray = _useFilters.filtersObjectArray;
71
72
 
72
73
  /** Refs */
73
74
  var filterFlyoutRef = useRef(null);
@@ -106,10 +107,26 @@ var FilterFlyout = function FilterFlyout(_ref) {
106
107
  // updates the ref so next time the flyout opens we have records of the previous filters
107
108
  prevFiltersRef.current = JSON.stringify(filtersState);
108
109
  prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
109
-
110
- // Update the last applied filters
111
- lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
112
110
  };
111
+ var cancel = function cancel() {
112
+ // Reverting to previous filters only applies when using batch actions
113
+ if (updateMethod === BATCH) {
114
+ revertToPreviousFilters();
115
+ onCancel();
116
+ }
117
+ closeFlyout();
118
+ };
119
+
120
+ /** Effects */
121
+ useClickOutside(filterFlyoutRef, function (target) {
122
+ var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
123
+ var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
124
+ if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
125
+ return;
126
+ }
127
+ cancel();
128
+ });
129
+ useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
113
130
 
114
131
  /** Renders all filters */
115
132
  var renderFilters = function renderFilters() {
@@ -136,31 +153,22 @@ var FilterFlyout = function FilterFlyout(_ref) {
136
153
  buttonSize: "md"
137
154
  });
138
155
  };
139
-
140
- /** Effects */
141
- useClickOutside(filterFlyoutRef, function (target) {
142
- var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
143
- var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
144
- if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
145
- return;
146
- }
147
- closeFlyout();
148
- cancel();
149
- });
150
- useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
151
- useEffect(function reflectLastAppliedFiltersWhenReactTableUpdates() {
152
- lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
153
- }, [reactTableFiltersState, lastAppliedFilters]);
154
156
  return /*#__PURE__*/React.createElement("div", {
155
157
  className: "".concat(componentClass, "__container")
156
- }, /*#__PURE__*/React.createElement(IconButton, {
157
- label: flyoutIconDescription,
158
+ }, /*#__PURE__*/React.createElement(Button, {
158
159
  kind: "ghost",
159
- align: "bottom",
160
+ hasIconOnly: true,
161
+ tooltipPosition: "bottom",
162
+ renderIcon: function renderIcon() {
163
+ return /*#__PURE__*/React.createElement(Filter, {
164
+ size: 16
165
+ });
166
+ },
167
+ iconDescription: flyoutIconDescription,
160
168
  onClick: open ? closeFlyout : openFlyout,
161
169
  className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
162
170
  disabled: data.length === 0
163
- }, /*#__PURE__*/React.createElement(Filter, null)), /*#__PURE__*/React.createElement("div", {
171
+ }), /*#__PURE__*/React.createElement("div", {
164
172
  ref: filterFlyoutRef,
165
173
  className: cx(componentClass, (_cx2 = {}, _defineProperty(_cx2, "".concat(componentClass, "--open"), open), _defineProperty(_cx2, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
166
174
  }, /*#__PURE__*/React.createElement("div", {
@@ -188,6 +196,14 @@ FilterFlyout.propTypes = {
188
196
  * Icon description for the filter flyout button
189
197
  */
190
198
  flyoutIconDescription: PropTypes.string,
199
+ /**
200
+ * Filters that should be applied on load
201
+ */
202
+ initialFilters: PropTypes.arrayOf(PropTypes.shape({
203
+ id: PropTypes.string.isRequired,
204
+ type: PropTypes.string.isRequired,
205
+ value: PropTypes.any.isRequired
206
+ })),
191
207
  /**
192
208
  * Callback when the apply button is clicked
193
209
  */
@@ -208,14 +224,6 @@ FilterFlyout.propTypes = {
208
224
  * Label text of the primary action in the flyout
209
225
  */
210
226
  primaryActionLabel: PropTypes.string,
211
- /**
212
- * Filters from react table's state
213
- */
214
- reactTableFiltersState: PropTypes.arrayOf(PropTypes.shape({
215
- id: PropTypes.string.isRequired,
216
- type: PropTypes.string.isRequired,
217
- value: PropTypes.any.isRequired
218
- })),
219
227
  /**
220
228
  * Label text of the secondary action in the flyout
221
229
  */
@@ -56,8 +56,11 @@ var FilterPanel = function FilterPanel(_ref) {
56
56
  searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
57
57
  _ref$searchPlaceholde = _ref.searchPlaceholder,
58
58
  searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
59
- _ref$reactTableFilter = _ref.reactTableFiltersState,
60
- reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
59
+ _ref$initialFilters = _ref.initialFilters,
60
+ initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
61
+ // Save the initial filters we only need the filters once
62
+ var initialFiltersRef = useRef(initialFilters);
63
+
61
64
  /** State */
62
65
  var _useState = useState(false),
63
66
  _useState2 = _slicedToArray(_useState, 2),
@@ -68,17 +71,15 @@ var FilterPanel = function FilterPanel(_ref) {
68
71
  filters: filterSections,
69
72
  setAllFilters: setAllFilters,
70
73
  variation: PANEL,
71
- reactTableFiltersState: reactTableFiltersState,
72
- onCancel: onCancel
74
+ initialFilters: initialFiltersRef.current
73
75
  }),
74
76
  filtersState = _useFilters.filtersState,
75
77
  prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
76
78
  prevFiltersRef = _useFilters.prevFiltersRef,
77
- cancel = _useFilters.cancel,
79
+ revertToPreviousFilters = _useFilters.revertToPreviousFilters,
78
80
  reset = _useFilters.reset,
79
81
  renderFilter = _useFilters.renderFilter,
80
- filtersObjectArray = _useFilters.filtersObjectArray,
81
- lastAppliedFilters = _useFilters.lastAppliedFilters;
82
+ filtersObjectArray = _useFilters.filtersObjectArray;
82
83
 
83
84
  /** Refs */
84
85
  var filterPanelRef = useRef();
@@ -108,8 +109,14 @@ var FilterPanel = function FilterPanel(_ref) {
108
109
 
109
110
  /** Methods */
110
111
  var closePanel = function closePanel() {
111
- cancel();
112
- setPanelOpen(false);
112
+ return setPanelOpen(false);
113
+ };
114
+ var cancel = function cancel() {
115
+ // Reverting to previous filters only applies when using batch actions
116
+ if (updateMethod === BATCH) {
117
+ revertToPreviousFilters();
118
+ onCancel();
119
+ }
113
120
  };
114
121
  var apply = function apply() {
115
122
  setAllFilters(filtersObjectArray);
@@ -121,9 +128,6 @@ var FilterPanel = function FilterPanel(_ref) {
121
128
  // updates the ref so next time the flyout opens we have records of the previous filters
122
129
  prevFiltersRef.current = JSON.stringify(filtersState);
123
130
  prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
124
-
125
- // Update the last applied filters
126
- lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
127
131
  };
128
132
  var renderActionSet = function renderActionSet() {
129
133
  return showActionSet && /*#__PURE__*/React.createElement(MotionActionSet, {
@@ -240,20 +244,20 @@ FilterPanel.propTypes = {
240
244
  closeIconDescription: PropTypes.string,
241
245
  filterPanelMinHeight: PropTypes.number,
242
246
  filterSections: PropTypes.array,
243
- onApply: PropTypes.func,
244
- onCancel: PropTypes.func,
245
- onPanelClose: PropTypes.func,
246
- onPanelOpen: PropTypes.func,
247
- open: PropTypes.bool,
248
- primaryActionLabel: PropTypes.string,
249
247
  /**
250
- * Filters from react table's state
248
+ * Filters that should be applied on load
251
249
  */
252
- reactTableFiltersState: PropTypes.arrayOf(PropTypes.shape({
250
+ initialFilters: PropTypes.arrayOf(PropTypes.shape({
253
251
  id: PropTypes.string.isRequired,
254
252
  type: PropTypes.string.isRequired,
255
253
  value: PropTypes.any.isRequired
256
254
  })),
255
+ onApply: PropTypes.func,
256
+ onCancel: PropTypes.func,
257
+ onPanelClose: PropTypes.func,
258
+ onPanelOpen: PropTypes.func,
259
+ open: PropTypes.bool,
260
+ primaryActionLabel: PropTypes.string,
257
261
  searchLabelText: PropTypes.string,
258
262
  searchPlaceholder: PropTypes.string,
259
263
  secondaryActionLabel: PropTypes.string,
@@ -5,6 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
+ export { default as useInitialStateFromFilters } from './useInitialStateFromFilters';
8
9
  export { default as useSubscribeToEventEmitter } from './useSubscribeToEventEmitter';
9
10
  export { default as useFilters } from './useFilters';
10
11
  export { default as useShouldDisableButtons } from './useShouldDisableButtons';
@@ -11,9 +11,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
11
11
  * US Government Users Restricted Rights - Use, duplication or disclosure
12
12
  * restricted by GSA ADP Schedule Contract with IBM Corp.
13
13
  */
14
- import React, { useState, useRef, useEffect } from 'react';
14
+ import React, { useState, useRef } from 'react';
15
15
  import { Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, NumberInput, RadioButton, RadioButtonGroup, Layer } from '@carbon/react';
16
- import { INSTANT, BATCH, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
16
+ import { INSTANT, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
17
+ import useInitialStateFromFilters from './useInitialStateFromFilters';
17
18
  import { getInitialStateFromFilters } from '../utils';
18
19
  var useFilters = function useFilters(_ref) {
19
20
  var updateMethod = _ref.updateMethod,
@@ -21,22 +22,19 @@ var useFilters = function useFilters(_ref) {
21
22
  filters = _ref$filters === void 0 ? [] : _ref$filters,
22
23
  setAllFilters = _ref.setAllFilters,
23
24
  variation = _ref.variation,
24
- reactTableFiltersState = _ref.reactTableFiltersState,
25
- _ref$onCancel = _ref.onCancel,
26
- onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
25
+ initialFilters = _ref.initialFilters;
27
26
  /** State */
28
- var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
27
+ var _useInitialStateFromF = useInitialStateFromFilters(filters, variation, initialFilters),
28
+ _useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
29
+ filtersState = _useInitialStateFromF2[0],
30
+ setFiltersState = _useInitialStateFromF2[1];
31
+ var _useState = useState(initialFilters),
29
32
  _useState2 = _slicedToArray(_useState, 2),
30
- filtersState = _useState2[0],
31
- setFiltersState = _useState2[1];
32
- var _useState3 = useState(reactTableFiltersState),
33
- _useState4 = _slicedToArray(_useState3, 2),
34
- filtersObjectArray = _useState4[0],
35
- setFiltersObjectArray = _useState4[1];
33
+ filtersObjectArray = _useState2[0],
34
+ setFiltersObjectArray = _useState2[1];
36
35
 
37
36
  // When using batch actions we have to store the filters to then apply them later
38
37
  var prevFiltersRef = useRef(JSON.stringify(filtersState));
39
- var lastAppliedFilters = useRef(JSON.stringify(reactTableFiltersState));
40
38
  var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
41
39
 
42
40
  /** Methods */
@@ -45,7 +43,6 @@ var useFilters = function useFilters(_ref) {
45
43
  var revertToPreviousFilters = function revertToPreviousFilters() {
46
44
  setFiltersState(JSON.parse(prevFiltersRef.current));
47
45
  setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
48
- setAllFilters(JSON.parse(lastAppliedFilters.current));
49
46
  };
50
47
  var reset = function reset() {
51
48
  // When we reset we want the "initialFilters" to be an empty array
@@ -157,11 +154,8 @@ var useFilters = function useFilters(_ref) {
157
154
  var type = _ref3.type,
158
155
  column = _ref3.column,
159
156
  components = _ref3.props;
160
- var filter;
161
157
  var isPanel = variation === PANEL;
162
- if (!type) {
163
- return console.error("type: ".concat(type, "; does not exist as a type of filter."));
164
- }
158
+ var filter;
165
159
  switch (type) {
166
160
  case DATE:
167
161
  filter = /*#__PURE__*/React.createElement(DatePicker, _extends({}, components.DatePicker, {
@@ -287,31 +281,10 @@ var useFilters = function useFilters(_ref) {
287
281
  break;
288
282
  }
289
283
  if (isPanel) {
290
- return /*#__PURE__*/React.createElement(Layer, {
291
- key: column
292
- }, filter);
284
+ return /*#__PURE__*/React.createElement(Layer, null, filter);
293
285
  }
294
- return /*#__PURE__*/React.createElement(React.Fragment, {
295
- key: column
296
- }, filter);
286
+ return filter;
297
287
  };
298
- var cancel = function cancel() {
299
- // Reverting to previous filters only applies when using batch actions
300
- if (updateMethod === BATCH) {
301
- revertToPreviousFilters();
302
- onCancel();
303
- }
304
- };
305
-
306
- /** The purpose of this function is to sync any changes in react-tables state.filters array and reflect
307
- those new filter changes in the panel/flyout state. The external change is triggered if setAllFilters is called outside of the Datagrid */
308
- useEffect(function updateStateAndFiltersToReflectExternalFilterChanges() {
309
- var newFiltersState = getInitialStateFromFilters(filters, variation, reactTableFiltersState);
310
- setFiltersState(newFiltersState);
311
- prevFiltersRef.current = JSON.stringify(newFiltersState);
312
- prevFiltersObjectArrayRef.current = JSON.stringify(reactTableFiltersState);
313
- setFiltersObjectArray(reactTableFiltersState);
314
- }, [filters, reactTableFiltersState, variation]);
315
288
  return {
316
289
  filtersState: filtersState,
317
290
  setFiltersState: setFiltersState,
@@ -320,9 +293,7 @@ var useFilters = function useFilters(_ref) {
320
293
  revertToPreviousFilters: revertToPreviousFilters,
321
294
  reset: reset,
322
295
  renderFilter: renderFilter,
323
- filtersObjectArray: filtersObjectArray,
324
- lastAppliedFilters: lastAppliedFilters,
325
- cancel: cancel
296
+ filtersObjectArray: filtersObjectArray
326
297
  };
327
298
  };
328
299
  export default useFilters;
@@ -0,0 +1,21 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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.
8
+ */
9
+ import { useState } from 'react';
10
+ import { FLYOUT } from '../constants';
11
+ import { getInitialStateFromFilters } from '../utils';
12
+ var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
13
+ var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
14
+ var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
15
+ var _useState = useState(getInitialStateFromFilters(filters, variation, initialFilters)),
16
+ _useState2 = _slicedToArray(_useState, 2),
17
+ state = _useState2[0],
18
+ setState = _useState2[1];
19
+ return [state, setState];
20
+ };
21
+ export default useInitialStateFromFilters;
@@ -72,23 +72,6 @@ export var InlineEditCell = function InlineEditCell(_ref) {
72
72
  var dropdownRef = useRef();
73
73
  var datePickerRef = useRef();
74
74
  var outerButtonElement = useRef();
75
- var rowSize = instance.rowSize,
76
- onDataUpdate = instance.onDataUpdate;
77
-
78
- // Saves the new cell data, onDataUpdate is a required function to be
79
- // passed to useDatagrid when using useInlineEdit
80
- var saveCellData = useCallback(function (newValue) {
81
- var columnId = cell.column.id;
82
- var rowIndex = cell.row.index;
83
- onDataUpdate(function (prev) {
84
- return prev.map(function (row, index) {
85
- if (index === rowIndex) {
86
- return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, _defineProperty({}, columnId, newValue));
87
- }
88
- return row;
89
- });
90
- });
91
- }, [cell, onDataUpdate]);
92
75
  useEffect(function () {
93
76
  setInitialValue(value);
94
77
  var columnId = cell.column.id;
@@ -162,6 +145,8 @@ export var InlineEditCell = function InlineEditCell(_ref) {
162
145
  }, 1);
163
146
  }
164
147
  };
148
+ var rowSize = instance.rowSize,
149
+ onDataUpdate = instance.onDataUpdate;
165
150
 
166
151
  // Auto focus text input when entering edit mode
167
152
  useEffect(function () {
@@ -179,6 +164,21 @@ export var InlineEditCell = function InlineEditCell(_ref) {
179
164
  useEffect(function () {
180
165
  setCellValue(value);
181
166
  }, [value]);
167
+
168
+ // Saves the new cell data, onDataUpdate is a required function to be
169
+ // passed to useDatagrid when using useInlineEdit
170
+ var saveCellData = useCallback(function (newValue) {
171
+ var columnId = cell.column.id;
172
+ var rowIndex = cell.row.index;
173
+ onDataUpdate(function (prev) {
174
+ return prev.map(function (row, index) {
175
+ if (index === rowIndex) {
176
+ return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, _defineProperty({}, columnId, newValue));
177
+ }
178
+ return row;
179
+ });
180
+ });
181
+ }, [cell, onDataUpdate]);
182
182
  var sendFocusBackToGrid = function sendFocusBackToGrid() {
183
183
  // Allows the onKeyDown listener to go back to the entire grid area
184
184
  var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
@@ -5,22 +5,19 @@ var _excluded = ["id", "itemText", "onClick", "icon", "shouldHideMenuItem"],
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
- * 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.
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.
13
14
  */
14
-
15
- import React, { useEffect } from 'react';
15
+ import React from 'react';
16
16
  import cx from 'classnames';
17
17
  import { IconSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/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
- }, []);
24
21
  var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
25
22
  var rowActions = instance.rowActions,
26
23
  isFetching = instance.isFetching,
@@ -3,20 +3,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  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
- /**
7
- * Copyright IBM Corp. 2021, 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.
6
+ // @flow
7
+ /*
8
+ * Licensed Materials - Property of IBM
9
+ * 5724-Q36
10
+ * (c) Copyright IBM Corp. 2021
11
+ * US Government Users Restricted Rights - Use, duplication or disclosure
12
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11
13
  */
12
14
 
13
15
  import * as React from 'react';
14
- import { pkg } from '../../settings';
15
16
  import { CustomizeColumnsTearsheetWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
16
17
  var useCustomizeColumns = function useCustomizeColumns(hooks) {
17
- React.useEffect(function () {
18
- pkg.checkReportFeatureEnabled('Datagrid.useCustomizeColumns');
19
- }, []);
20
18
  var _React$useState = React.useState(false),
21
19
  _React$useState2 = _slicedToArray(_React$useState, 2),
22
20
  isTearsheetOpen = _React$useState2[0],
@@ -2,21 +2,17 @@ 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
- * 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.
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.
10
11
  */
11
-
12
- import { useEffect, useState } from 'react';
13
- import { pkg } from '../../settings';
12
+ import { useState } from 'react';
14
13
  import DatagridExpandedRow from './Datagrid/DatagridExpandedRow';
15
14
  import useRowExpander from './useRowExpander';
16
15
  var useExpandedRow = function useExpandedRow(hooks) {
17
- useEffect(function () {
18
- pkg.checkReportFeatureEnabled('Datagrid.useExpandedRow');
19
- }, []);
20
16
  useRowExpander(hooks);
21
17
  var useInstance = function useInstance(instance) {
22
18
  var rows = instance.rows,
@@ -2,21 +2,17 @@ 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
- * 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.
5
+ /*
6
+ * Licensed Materials - Property of IBM
7
+ * 5724-Q36
8
+ * (c) Copyright IBM Corp. 2023
9
+ * US Government Users Restricted Rights - Use, duplication or disclosure
10
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
10
11
  */
11
-
12
- import { useMemo, useEffect } from 'react';
13
- import { pkg } from '../../settings';
12
+ import { useMemo } from 'react';
14
13
  import { FilterFlyout } from './Datagrid/addons/Filtering';
15
14
  import { BATCH } from './Datagrid/addons/Filtering/constants';
16
15
  var useFiltering = function useFiltering(hooks) {
17
- useEffect(function () {
18
- pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
19
- }, []);
20
16
  var filterTypes = useMemo(function () {
21
17
  return {
22
18
  date: function date(rows, id, _ref) {
@@ -74,7 +70,7 @@ var useFiltering = function useFiltering(hooks) {
74
70
  variation: 'flyout',
75
71
  updateMethod: BATCH,
76
72
  panelIconDescription: 'Open filter panel',
77
- reactTableFiltersState: state.filters
73
+ initialFilters: state.filters
78
74
  };
79
75
  var getFilterFlyoutProps = function getFilterFlyoutProps() {
80
76
  return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
@@ -16,9 +16,6 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
16
16
  if (!usingEditableCell) {
17
17
  pkg.checkReportFeatureEnabled('Datagrid.useInlineEdit');
18
18
  }
19
- if (usingEditableCell) {
20
- pkg.checkReportFeatureEnabled('Datagrid.useEditableCell');
21
- }
22
19
  }, [usingEditableCell]);
23
20
  var addInlineEdit = function addInlineEdit(props, _ref) {
24
21
  var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
@@ -1,20 +1,16 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
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.
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.
7
8
  */
8
-
9
- import { useEffect } from 'react';
10
9
  import { pkg } from '../../settings';
11
10
  import cx from 'classnames';
12
11
  import useNestedRowExpander from './useNestedRowExpander';
13
12
  var blockClass = "".concat(pkg.prefix, "--datagrid");
14
13
  var useNestedRows = function useNestedRows(hooks) {
15
- useEffect(function () {
16
- pkg.checkReportFeatureEnabled('Datagrid.useNestedRows');
17
- }, []);
18
14
  useNestedRowExpander(hooks);
19
15
  var marginLeft = 24;
20
16
  var getRowProps = function getRowProps(props, _ref) {