@carbon/ibm-products 2.0.1 → 2.1.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 (28) hide show
  1. package/css/index-full-carbon.css +1 -1
  2. package/css/index-full-carbon.min.css +1 -1
  3. package/css/index-full-carbon.min.css.map +1 -1
  4. package/css/index-without-carbon-released-only.css +1 -1
  5. package/css/index-without-carbon-released-only.min.css +1 -1
  6. package/css/index-without-carbon-released-only.min.css.map +1 -1
  7. package/css/index-without-carbon.css +1 -1
  8. package/css/index-without-carbon.min.css +1 -1
  9. package/css/index-without-carbon.min.css.map +1 -1
  10. package/css/index.css +1 -1
  11. package/css/index.min.css +1 -1
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +34 -36
  14. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
  15. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +0 -1
  16. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +44 -15
  17. package/es/components/Datagrid/useFiltering.js +1 -1
  18. package/es/components/UserProfileImage/UserProfileImage.js +13 -2
  19. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +33 -35
  20. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
  21. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +0 -7
  22. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +42 -13
  23. package/lib/components/Datagrid/useFiltering.js +1 -1
  24. package/lib/components/UserProfileImage/UserProfileImage.js +13 -2
  25. package/package.json +2 -2
  26. package/scss/components/NotificationsPanel/_notifications-panel.scss +1 -1
  27. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -21
  28. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -30
@@ -11,10 +11,9 @@ 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 } from 'react';
14
+ import React, { useState, useRef, useEffect } from 'react';
15
15
  import { Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, NumberInput, RadioButton, RadioButtonGroup, Layer } from '@carbon/react';
16
- import { INSTANT, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
17
- import useInitialStateFromFilters from './useInitialStateFromFilters';
16
+ import { INSTANT, BATCH, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
18
17
  import { getInitialStateFromFilters } from '../utils';
19
18
  var useFilters = function useFilters(_ref) {
20
19
  var updateMethod = _ref.updateMethod,
@@ -22,19 +21,22 @@ var useFilters = function useFilters(_ref) {
22
21
  filters = _ref$filters === void 0 ? [] : _ref$filters,
23
22
  setAllFilters = _ref.setAllFilters,
24
23
  variation = _ref.variation,
25
- initialFilters = _ref.initialFilters;
24
+ reactTableFiltersState = _ref.reactTableFiltersState,
25
+ _ref$onCancel = _ref.onCancel,
26
+ onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
26
27
  /** State */
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),
28
+ var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
32
29
  _useState2 = _slicedToArray(_useState, 2),
33
- filtersObjectArray = _useState2[0],
34
- setFiltersObjectArray = _useState2[1];
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];
35
36
 
36
37
  // When using batch actions we have to store the filters to then apply them later
37
38
  var prevFiltersRef = useRef(JSON.stringify(filtersState));
39
+ var lastAppliedFilters = useRef(JSON.stringify(reactTableFiltersState));
38
40
  var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
39
41
 
40
42
  /** Methods */
@@ -43,6 +45,7 @@ var useFilters = function useFilters(_ref) {
43
45
  var revertToPreviousFilters = function revertToPreviousFilters() {
44
46
  setFiltersState(JSON.parse(prevFiltersRef.current));
45
47
  setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
48
+ setAllFilters(JSON.parse(lastAppliedFilters.current));
46
49
  };
47
50
  var reset = function reset() {
48
51
  // When we reset we want the "initialFilters" to be an empty array
@@ -154,8 +157,11 @@ var useFilters = function useFilters(_ref) {
154
157
  var type = _ref3.type,
155
158
  column = _ref3.column,
156
159
  components = _ref3.props;
157
- var isPanel = variation === PANEL;
158
160
  var filter;
161
+ var isPanel = variation === PANEL;
162
+ if (!type) {
163
+ return console.error("type: ".concat(type, "; does not exist as a type of filter."));
164
+ }
159
165
  switch (type) {
160
166
  case DATE:
161
167
  filter = /*#__PURE__*/React.createElement(DatePicker, _extends({}, components.DatePicker, {
@@ -281,10 +287,31 @@ var useFilters = function useFilters(_ref) {
281
287
  break;
282
288
  }
283
289
  if (isPanel) {
284
- return /*#__PURE__*/React.createElement(Layer, null, filter);
290
+ return /*#__PURE__*/React.createElement(Layer, {
291
+ key: column
292
+ }, filter);
285
293
  }
286
- return filter;
294
+ return /*#__PURE__*/React.createElement(React.Fragment, {
295
+ key: column
296
+ }, filter);
287
297
  };
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]);
288
315
  return {
289
316
  filtersState: filtersState,
290
317
  setFiltersState: setFiltersState,
@@ -293,7 +320,9 @@ var useFilters = function useFilters(_ref) {
293
320
  revertToPreviousFilters: revertToPreviousFilters,
294
321
  reset: reset,
295
322
  renderFilter: renderFilter,
296
- filtersObjectArray: filtersObjectArray
323
+ filtersObjectArray: filtersObjectArray,
324
+ lastAppliedFilters: lastAppliedFilters,
325
+ cancel: cancel
297
326
  };
298
327
  };
299
328
  export default useFilters;
@@ -74,7 +74,7 @@ var useFiltering = function useFiltering(hooks) {
74
74
  variation: 'flyout',
75
75
  updateMethod: BATCH,
76
76
  panelIconDescription: 'Open filter panel',
77
- initialFilters: state.filters
77
+ reactTableFiltersState: state.filters
78
78
  };
79
79
  var getFilterFlyoutProps = function getFilterFlyoutProps() {
80
80
  return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
3
+ var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2021, 2021
6
6
  *
@@ -28,6 +28,10 @@ var componentName = 'UserProfileImage';
28
28
 
29
29
  // NOTE: the component SCSS is not imported here: it is rolled up separately.
30
30
 
31
+ // Default values for props
32
+ var defaults = {
33
+ tooltipAlignment: 'bottom'
34
+ };
31
35
  /**
32
36
  * This is a user profile image component which displays an image, or initials or icon for a user.
33
37
  */
@@ -42,6 +46,8 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
42
46
  size = _ref.size,
43
47
  theme = _ref.theme,
44
48
  tooltipText = _ref.tooltipText,
49
+ _ref$tooltipAlignment = _ref.tooltipAlignment,
50
+ tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
45
51
  rest = _objectWithoutProperties(_ref, _excluded);
46
52
  var icons = {
47
53
  user: {
@@ -121,7 +127,8 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
121
127
  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(IconButton, {
122
128
  label: tooltipText,
123
129
  className: "".concat(blockClass, "__tooltip"),
124
- kind: "ghost"
130
+ kind: "ghost",
131
+ align: tooltipAlignment
125
132
  }, renderUserProfileImage()) : renderUserProfileImage());
126
133
  });
127
134
 
@@ -169,6 +176,10 @@ UserProfileImage.propTypes = {
169
176
  * Set theme in which the component will be rendered
170
177
  */
171
178
  theme: PropTypes.oneOf(['light', 'dark']).isRequired,
179
+ /**
180
+ * Specify how the trigger should align with the tooltip
181
+ */
182
+ tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
172
183
  /**
173
184
  * Pass in the display name to have it shown on hover
174
185
  */
@@ -55,11 +55,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
55
55
  setAllFilters = _ref.setAllFilters,
56
56
  _ref$data = _ref.data,
57
57
  data = _ref$data === void 0 ? [] : _ref$data,
58
- _ref$initialFilters = _ref.initialFilters,
59
- initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
60
- // Save the initial filters we only need the filters once when it loads
61
- var initialFiltersRef = (0, _react2.useRef)(initialFilters);
62
-
58
+ _ref$reactTableFilter = _ref.reactTableFiltersState,
59
+ reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
63
60
  /** State */
64
61
  var _useState = (0, _react2.useState)(false),
65
62
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -70,15 +67,17 @@ var FilterFlyout = function FilterFlyout(_ref) {
70
67
  filters: filters,
71
68
  setAllFilters: setAllFilters,
72
69
  variation: _constants.FLYOUT,
73
- initialFilters: initialFiltersRef.current
70
+ reactTableFiltersState: reactTableFiltersState,
71
+ onCancel: onCancel
74
72
  }),
75
73
  filtersState = _useFilters.filtersState,
76
74
  prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
77
75
  prevFiltersRef = _useFilters.prevFiltersRef,
78
- revertToPreviousFilters = _useFilters.revertToPreviousFilters,
76
+ cancel = _useFilters.cancel,
79
77
  reset = _useFilters.reset,
80
78
  renderFilter = _useFilters.renderFilter,
81
- filtersObjectArray = _useFilters.filtersObjectArray;
79
+ filtersObjectArray = _useFilters.filtersObjectArray,
80
+ lastAppliedFilters = _useFilters.lastAppliedFilters;
82
81
 
83
82
  /** Refs */
84
83
  var filterFlyoutRef = (0, _react2.useRef)(null);
@@ -117,26 +116,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
117
116
  // updates the ref so next time the flyout opens we have records of the previous filters
118
117
  prevFiltersRef.current = JSON.stringify(filtersState);
119
118
  prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
120
- };
121
- var cancel = function cancel() {
122
- // Reverting to previous filters only applies when using batch actions
123
- if (updateMethod === _constants.BATCH) {
124
- revertToPreviousFilters();
125
- onCancel();
126
- }
127
- closeFlyout();
128
- };
129
119
 
130
- /** Effects */
131
- (0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
132
- var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
133
- var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
134
- if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
135
- return;
136
- }
137
- cancel();
138
- });
139
- (0, _hooks2.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
120
+ // Update the last applied filters
121
+ lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
122
+ };
140
123
 
141
124
  /** Renders all filters */
142
125
  var renderFilters = function renderFilters() {
@@ -163,6 +146,21 @@ var FilterFlyout = function FilterFlyout(_ref) {
163
146
  buttonSize: "md"
164
147
  });
165
148
  };
149
+
150
+ /** Effects */
151
+ (0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
152
+ var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
153
+ var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
154
+ if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
155
+ return;
156
+ }
157
+ closeFlyout();
158
+ cancel();
159
+ });
160
+ (0, _hooks2.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
161
+ (0, _react2.useEffect)(function reflectLastAppliedFiltersWhenReactTableUpdates() {
162
+ lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
163
+ }, [reactTableFiltersState, lastAppliedFilters]);
166
164
  return /*#__PURE__*/_react2.default.createElement("div", {
167
165
  className: "".concat(componentClass, "__container")
168
166
  }, /*#__PURE__*/_react2.default.createElement(_react.Button, {
@@ -206,14 +204,6 @@ FilterFlyout.propTypes = {
206
204
  * Icon description for the filter flyout button
207
205
  */
208
206
  flyoutIconDescription: _propTypes.default.string,
209
- /**
210
- * Filters that should be applied on load
211
- */
212
- initialFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
213
- id: _propTypes.default.string.isRequired,
214
- type: _propTypes.default.string.isRequired,
215
- value: _propTypes.default.any.isRequired
216
- })),
217
207
  /**
218
208
  * Callback when the apply button is clicked
219
209
  */
@@ -234,6 +224,14 @@ FilterFlyout.propTypes = {
234
224
  * Label text of the primary action in the flyout
235
225
  */
236
226
  primaryActionLabel: _propTypes.default.string,
227
+ /**
228
+ * Filters from react table's state
229
+ */
230
+ reactTableFiltersState: _propTypes.default.arrayOf(_propTypes.default.shape({
231
+ id: _propTypes.default.string.isRequired,
232
+ type: _propTypes.default.string.isRequired,
233
+ value: _propTypes.default.any.isRequired
234
+ })),
237
235
  /**
238
236
  * Label text of the secondary action in the flyout
239
237
  */
@@ -66,11 +66,8 @@ var FilterPanel = function FilterPanel(_ref) {
66
66
  searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
67
67
  _ref$searchPlaceholde = _ref.searchPlaceholder,
68
68
  searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
69
- _ref$initialFilters = _ref.initialFilters,
70
- initialFilters = _ref$initialFilters === void 0 ? [] : _ref$initialFilters;
71
- // Save the initial filters we only need the filters once
72
- var initialFiltersRef = (0, _react.useRef)(initialFilters);
73
-
69
+ _ref$reactTableFilter = _ref.reactTableFiltersState,
70
+ reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
74
71
  /** State */
75
72
  var _useState = (0, _react.useState)(false),
76
73
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -81,15 +78,17 @@ var FilterPanel = function FilterPanel(_ref) {
81
78
  filters: filterSections,
82
79
  setAllFilters: setAllFilters,
83
80
  variation: _constants.PANEL,
84
- initialFilters: initialFiltersRef.current
81
+ reactTableFiltersState: reactTableFiltersState,
82
+ onCancel: onCancel
85
83
  }),
86
84
  filtersState = _useFilters.filtersState,
87
85
  prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
88
86
  prevFiltersRef = _useFilters.prevFiltersRef,
89
- revertToPreviousFilters = _useFilters.revertToPreviousFilters,
87
+ cancel = _useFilters.cancel,
90
88
  reset = _useFilters.reset,
91
89
  renderFilter = _useFilters.renderFilter,
92
- filtersObjectArray = _useFilters.filtersObjectArray;
90
+ filtersObjectArray = _useFilters.filtersObjectArray,
91
+ lastAppliedFilters = _useFilters.lastAppliedFilters;
93
92
 
94
93
  /** Refs */
95
94
  var filterPanelRef = (0, _react.useRef)();
@@ -119,14 +118,8 @@ var FilterPanel = function FilterPanel(_ref) {
119
118
 
120
119
  /** Methods */
121
120
  var closePanel = function closePanel() {
122
- return setPanelOpen(false);
123
- };
124
- var cancel = function cancel() {
125
- // Reverting to previous filters only applies when using batch actions
126
- if (updateMethod === _constants.BATCH) {
127
- revertToPreviousFilters();
128
- onCancel();
129
- }
121
+ cancel();
122
+ setPanelOpen(false);
130
123
  };
131
124
  var apply = function apply() {
132
125
  setAllFilters(filtersObjectArray);
@@ -138,6 +131,9 @@ var FilterPanel = function FilterPanel(_ref) {
138
131
  // updates the ref so next time the flyout opens we have records of the previous filters
139
132
  prevFiltersRef.current = JSON.stringify(filtersState);
140
133
  prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
134
+
135
+ // Update the last applied filters
136
+ lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
141
137
  };
142
138
  var renderActionSet = function renderActionSet() {
143
139
  return showActionSet && /*#__PURE__*/_react.default.createElement(MotionActionSet, {
@@ -254,20 +250,20 @@ FilterPanel.propTypes = {
254
250
  closeIconDescription: _propTypes.default.string,
255
251
  filterPanelMinHeight: _propTypes.default.number,
256
252
  filterSections: _propTypes.default.array,
257
- /**
258
- * Filters that should be applied on load
259
- */
260
- initialFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
261
- id: _propTypes.default.string.isRequired,
262
- type: _propTypes.default.string.isRequired,
263
- value: _propTypes.default.any.isRequired
264
- })),
265
253
  onApply: _propTypes.default.func,
266
254
  onCancel: _propTypes.default.func,
267
255
  onPanelClose: _propTypes.default.func,
268
256
  onPanelOpen: _propTypes.default.func,
269
257
  open: _propTypes.default.bool,
270
258
  primaryActionLabel: _propTypes.default.string,
259
+ /**
260
+ * Filters from react table's state
261
+ */
262
+ reactTableFiltersState: _propTypes.default.arrayOf(_propTypes.default.shape({
263
+ id: _propTypes.default.string.isRequired,
264
+ type: _propTypes.default.string.isRequired,
265
+ value: _propTypes.default.any.isRequired
266
+ })),
271
267
  searchLabelText: _propTypes.default.string,
272
268
  searchPlaceholder: _propTypes.default.string,
273
269
  secondaryActionLabel: _propTypes.default.string,
@@ -10,12 +10,6 @@ Object.defineProperty(exports, "useFilters", {
10
10
  return _useFilters.default;
11
11
  }
12
12
  });
13
- Object.defineProperty(exports, "useInitialStateFromFilters", {
14
- enumerable: true,
15
- get: function get() {
16
- return _useInitialStateFromFilters.default;
17
- }
18
- });
19
13
  Object.defineProperty(exports, "useShouldDisableButtons", {
20
14
  enumerable: true,
21
15
  get: function get() {
@@ -28,7 +22,6 @@ Object.defineProperty(exports, "useSubscribeToEventEmitter", {
28
22
  return _useSubscribeToEventEmitter.default;
29
23
  }
30
24
  });
31
- var _useInitialStateFromFilters = _interopRequireDefault(require("./useInitialStateFromFilters"));
32
25
  var _useSubscribeToEventEmitter = _interopRequireDefault(require("./useSubscribeToEventEmitter"));
33
26
  var _useFilters = _interopRequireDefault(require("./useFilters"));
34
27
  var _useShouldDisableButtons = _interopRequireDefault(require("./useShouldDisableButtons"));
@@ -13,7 +13,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
13
13
  var _react = _interopRequireWildcard(require("react"));
14
14
  var _react2 = require("@carbon/react");
15
15
  var _constants = require("../constants");
16
- var _useInitialStateFromFilters = _interopRequireDefault(require("./useInitialStateFromFilters"));
17
16
  var _utils = require("../utils");
18
17
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
18
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -31,19 +30,22 @@ var useFilters = function useFilters(_ref) {
31
30
  filters = _ref$filters === void 0 ? [] : _ref$filters,
32
31
  setAllFilters = _ref.setAllFilters,
33
32
  variation = _ref.variation,
34
- initialFilters = _ref.initialFilters;
33
+ reactTableFiltersState = _ref.reactTableFiltersState,
34
+ _ref$onCancel = _ref.onCancel,
35
+ onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
35
36
  /** State */
36
- var _useInitialStateFromF = (0, _useInitialStateFromFilters.default)(filters, variation, initialFilters),
37
- _useInitialStateFromF2 = (0, _slicedToArray2.default)(_useInitialStateFromF, 2),
38
- filtersState = _useInitialStateFromF2[0],
39
- setFiltersState = _useInitialStateFromF2[1];
40
- var _useState = (0, _react.useState)(initialFilters),
37
+ var _useState = (0, _react.useState)((0, _utils.getInitialStateFromFilters)(filters, variation, reactTableFiltersState)),
41
38
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
42
- filtersObjectArray = _useState2[0],
43
- setFiltersObjectArray = _useState2[1];
39
+ filtersState = _useState2[0],
40
+ setFiltersState = _useState2[1];
41
+ var _useState3 = (0, _react.useState)(reactTableFiltersState),
42
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
43
+ filtersObjectArray = _useState4[0],
44
+ setFiltersObjectArray = _useState4[1];
44
45
 
45
46
  // When using batch actions we have to store the filters to then apply them later
46
47
  var prevFiltersRef = (0, _react.useRef)(JSON.stringify(filtersState));
48
+ var lastAppliedFilters = (0, _react.useRef)(JSON.stringify(reactTableFiltersState));
47
49
  var prevFiltersObjectArrayRef = (0, _react.useRef)(JSON.stringify(filtersObjectArray));
48
50
 
49
51
  /** Methods */
@@ -52,6 +54,7 @@ var useFilters = function useFilters(_ref) {
52
54
  var revertToPreviousFilters = function revertToPreviousFilters() {
53
55
  setFiltersState(JSON.parse(prevFiltersRef.current));
54
56
  setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
57
+ setAllFilters(JSON.parse(lastAppliedFilters.current));
55
58
  };
56
59
  var reset = function reset() {
57
60
  // When we reset we want the "initialFilters" to be an empty array
@@ -163,8 +166,11 @@ var useFilters = function useFilters(_ref) {
163
166
  var type = _ref3.type,
164
167
  column = _ref3.column,
165
168
  components = _ref3.props;
166
- var isPanel = variation === _constants.PANEL;
167
169
  var filter;
170
+ var isPanel = variation === _constants.PANEL;
171
+ if (!type) {
172
+ return console.error("type: ".concat(type, "; does not exist as a type of filter."));
173
+ }
168
174
  switch (type) {
169
175
  case _constants.DATE:
170
176
  filter = /*#__PURE__*/_react.default.createElement(_react2.DatePicker, (0, _extends2.default)({}, components.DatePicker, {
@@ -290,10 +296,31 @@ var useFilters = function useFilters(_ref) {
290
296
  break;
291
297
  }
292
298
  if (isPanel) {
293
- return /*#__PURE__*/_react.default.createElement(_react2.Layer, null, filter);
299
+ return /*#__PURE__*/_react.default.createElement(_react2.Layer, {
300
+ key: column
301
+ }, filter);
294
302
  }
295
- return filter;
303
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
304
+ key: column
305
+ }, filter);
296
306
  };
307
+ var cancel = function cancel() {
308
+ // Reverting to previous filters only applies when using batch actions
309
+ if (updateMethod === _constants.BATCH) {
310
+ revertToPreviousFilters();
311
+ onCancel();
312
+ }
313
+ };
314
+
315
+ /** The purpose of this function is to sync any changes in react-tables state.filters array and reflect
316
+ those new filter changes in the panel/flyout state. The external change is triggered if setAllFilters is called outside of the Datagrid */
317
+ (0, _react.useEffect)(function updateStateAndFiltersToReflectExternalFilterChanges() {
318
+ var newFiltersState = (0, _utils.getInitialStateFromFilters)(filters, variation, reactTableFiltersState);
319
+ setFiltersState(newFiltersState);
320
+ prevFiltersRef.current = JSON.stringify(newFiltersState);
321
+ prevFiltersObjectArrayRef.current = JSON.stringify(reactTableFiltersState);
322
+ setFiltersObjectArray(reactTableFiltersState);
323
+ }, [filters, reactTableFiltersState, variation]);
297
324
  return {
298
325
  filtersState: filtersState,
299
326
  setFiltersState: setFiltersState,
@@ -302,7 +329,9 @@ var useFilters = function useFilters(_ref) {
302
329
  revertToPreviousFilters: revertToPreviousFilters,
303
330
  reset: reset,
304
331
  renderFilter: renderFilter,
305
- filtersObjectArray: filtersObjectArray
332
+ filtersObjectArray: filtersObjectArray,
333
+ lastAppliedFilters: lastAppliedFilters,
334
+ cancel: cancel
306
335
  };
307
336
  };
308
337
  var _default = useFilters;
@@ -79,7 +79,7 @@ var useFiltering = function useFiltering(hooks) {
79
79
  variation: 'flyout',
80
80
  updateMethod: _constants.BATCH,
81
81
  panelIconDescription: 'Open filter panel',
82
- initialFilters: state.filters
82
+ reactTableFiltersState: state.filters
83
83
  };
84
84
  var getFilterFlyoutProps = function getFilterFlyoutProps() {
85
85
  return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
@@ -15,7 +15,7 @@ require("../../global/js/utils/props-helper");
15
15
  var _settings = require("../../settings");
16
16
  var _icons = require("@carbon/react/icons");
17
17
  var _react2 = require("@carbon/react");
18
- var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
18
+ var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
19
19
  /**
20
20
  * Copyright IBM Corp. 2021, 2021
21
21
  *
@@ -31,6 +31,10 @@ var componentName = 'UserProfileImage';
31
31
 
32
32
  // NOTE: the component SCSS is not imported here: it is rolled up separately.
33
33
 
34
+ // Default values for props
35
+ var defaults = {
36
+ tooltipAlignment: 'bottom'
37
+ };
34
38
  /**
35
39
  * This is a user profile image component which displays an image, or initials or icon for a user.
36
40
  */
@@ -45,6 +49,8 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
45
49
  size = _ref.size,
46
50
  theme = _ref.theme,
47
51
  tooltipText = _ref.tooltipText,
52
+ _ref$tooltipAlignment = _ref.tooltipAlignment,
53
+ tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
48
54
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
49
55
  var icons = {
50
56
  user: {
@@ -124,7 +130,8 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
124
130
  return FillItem && (tooltipText ? /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
125
131
  label: tooltipText,
126
132
  className: "".concat(blockClass, "__tooltip"),
127
- kind: "ghost"
133
+ kind: "ghost",
134
+ align: tooltipAlignment
128
135
  }, renderUserProfileImage()) : renderUserProfileImage());
129
136
  });
130
137
 
@@ -173,6 +180,10 @@ UserProfileImage.propTypes = {
173
180
  * Set theme in which the component will be rendered
174
181
  */
175
182
  theme: _propTypes.default.oneOf(['light', 'dark']).isRequired,
183
+ /**
184
+ * Specify how the trigger should align with the tooltip
185
+ */
186
+ tooltipAlignment: _propTypes.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
176
187
  /**
177
188
  * Pass in the display name to have it shown on hover
178
189
  */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.0.1",
4
+ "version": "2.1.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -94,5 +94,5 @@
94
94
  "react": "^16.8.6 || ^17.0.1",
95
95
  "react-dom": "^16.8.6 || ^17.0.1"
96
96
  },
97
- "gitHead": "54e21d74eb1784d7d20149f19fc106eee92a69b2"
97
+ "gitHead": "7d5b5013039a6d98e3aab8375a7ea249c44ee4ae"
98
98
  }
@@ -54,7 +54,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
54
54
  top: $spacing-09;
55
55
  right: 0;
56
56
  overflow: auto;
57
- min-width: 22.75rem;
57
+ min-width: 20rem;
58
58
  max-width: 22.75rem;
59
59
  min-height: 38.5rem;
60
60
  max-height: 38.5rem;
@@ -1,21 +0,0 @@
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;
@@ -1,30 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _react = require("react");
10
- var _constants = require("../constants");
11
- var _utils = require("../utils");
12
- /*
13
- * Licensed Materials - Property of IBM
14
- * 5724-Q36
15
- * (c) Copyright IBM Corp. 2022
16
- * US Government Users Restricted Rights - Use, duplication or disclosure
17
- * restricted by GSA ADP Schedule Contract with IBM Corp.
18
- */
19
-
20
- var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
21
- var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.FLYOUT;
22
- var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
23
- var _useState = (0, _react.useState)((0, _utils.getInitialStateFromFilters)(filters, variation, initialFilters)),
24
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
25
- state = _useState2[0],
26
- setState = _useState2[1];
27
- return [state, setState];
28
- };
29
- var _default = useInitialStateFromFilters;
30
- exports.default = _default;