@carbon/ibm-products 1.44.0 → 1.45.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 +2 -2
  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.css +2 -2
  5. package/css/index-without-carbon.min.css +1 -1
  6. package/css/index-without-carbon.min.css.map +1 -1
  7. package/css/index.css +2 -2
  8. package/css/index.min.css +1 -1
  9. package/css/index.min.css.map +1 -1
  10. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +43 -11
  11. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +47 -15
  12. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +9 -1
  13. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +34 -0
  14. package/es/components/Datagrid/utils/DatagridActions.js +4 -36
  15. package/es/components/Tearsheet/Tearsheet.js +4 -0
  16. package/es/components/Tearsheet/TearsheetNarrow.js +4 -0
  17. package/es/components/Tearsheet/TearsheetShell.js +1 -1
  18. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +36 -4
  19. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +40 -14
  20. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +8 -1
  21. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +41 -0
  22. package/lib/components/Datagrid/utils/DatagridActions.js +4 -36
  23. package/lib/components/Tearsheet/Tearsheet.js +4 -0
  24. package/lib/components/Tearsheet/TearsheetNarrow.js +4 -0
  25. package/lib/components/Tearsheet/TearsheetShell.js +1 -1
  26. package/package.json +2 -2
  27. package/scss/components/Datagrid/styles/_datagrid.scss +1 -1
  28. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +1 -1
@@ -10,6 +10,12 @@ Object.defineProperty(exports, "useInitialStateFromFilters", {
10
10
  return _useInitialStateFromFilters.default;
11
11
  }
12
12
  });
13
+ Object.defineProperty(exports, "useShouldDisableButtons", {
14
+ enumerable: true,
15
+ get: function get() {
16
+ return _useShouldDisableButtons.default;
17
+ }
18
+ });
13
19
  Object.defineProperty(exports, "useSubscribeToEventEmitter", {
14
20
  enumerable: true,
15
21
  get: function get() {
@@ -17,4 +23,5 @@ Object.defineProperty(exports, "useSubscribeToEventEmitter", {
17
23
  }
18
24
  });
19
25
  var _useInitialStateFromFilters = _interopRequireDefault(require("./useInitialStateFromFilters"));
20
- var _useSubscribeToEventEmitter = _interopRequireDefault(require("./useSubscribeToEventEmitter"));
26
+ var _useSubscribeToEventEmitter = _interopRequireDefault(require("./useSubscribeToEventEmitter"));
27
+ var _useShouldDisableButtons = _interopRequireDefault(require("./useShouldDisableButtons"));
@@ -0,0 +1,41 @@
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 _isEqual = _interopRequireDefault(require("lodash/isEqual"));
11
+ /**
12
+ * Copyright IBM Corp. 2023, 2023
13
+ *
14
+ * This source code is licensed under the Apache-2.0 license found in the
15
+ * LICENSE file in the root directory of this source tree.
16
+ */
17
+ /* eslint-disable jsdoc/check-param-names */
18
+
19
+ /**
20
+ * Keeps track of the button disabled state
21
+ * @param {string} initialValue - the initial value if the buttons should be enabled or disabled
22
+ * @param {object} filtersState - the filter state from the filter panel or flyout
23
+ * @param {object} prevFiltersRef - reference of the prev filterState
24
+ * @returns {Array} returns a tuple of the state and setter function
25
+ */
26
+ var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
27
+ var _ref$initialValue = _ref.initialValue,
28
+ initialValue = _ref$initialValue === void 0 ? true : _ref$initialValue,
29
+ filtersState = _ref.filtersState,
30
+ prevFiltersRef = _ref.prevFiltersRef;
31
+ var _useState = (0, _react.useState)(initialValue),
32
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
33
+ shouldDisableButtons = _useState2[0],
34
+ setShouldDisableButtons = _useState2[1];
35
+ (0, _react.useEffect)(function updateDisabledButtonsState() {
36
+ setShouldDisableButtons((0, _isEqual.default)(filtersState, JSON.parse(prevFiltersRef.current)));
37
+ }, [filtersState, prevFiltersRef]);
38
+ return [shouldDisableButtons, setShouldDisableButtons];
39
+ };
40
+ var _default = useShouldDisableButtons;
41
+ exports.default = _default;
@@ -150,7 +150,7 @@ var DatagridActions = function DatagridActions(datagridState) {
150
150
  onChange: function onChange(e) {
151
151
  return setGlobalFilter(e.target.value);
152
152
  }
153
- }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
153
+ }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement("div", {
154
154
  style: style
155
155
  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
156
156
  kind: "ghost",
@@ -170,7 +170,7 @@ var DatagridActions = function DatagridActions(datagridState) {
170
170
  onClick: downloadCsv
171
171
  })), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
172
172
  style: style
173
- }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
173
+ }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
174
174
  label: "Primary button",
175
175
  size: "lg",
176
176
  light: true,
@@ -184,7 +184,7 @@ var DatagridActions = function DatagridActions(datagridState) {
184
184
  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
185
185
  itemText: "Option 3",
186
186
  onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
187
- }))) : /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
187
+ }))) : /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
188
188
  size: "xl",
189
189
  id: "columnSearch",
190
190
  persistent: true,
@@ -192,39 +192,7 @@ var DatagridActions = function DatagridActions(datagridState) {
192
192
  onChange: function onChange(e) {
193
193
  return setGlobalFilter(e.target.value);
194
194
  }
195
- }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
196
- style: style
197
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
198
- kind: "ghost",
199
- hasIconOnly: true,
200
- tooltipPosition: "bottom",
201
- renderIcon: _iconsReact.Restart16,
202
- iconDescription: 'Refresh',
203
- onClick: refreshColumns
204
- })), /*#__PURE__*/_react.default.createElement("div", {
205
- style: style
206
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
207
- kind: "ghost",
208
- hasIconOnly: true,
209
- tooltipPosition: "bottom",
210
- renderIcon: _iconsReact.Download16,
211
- iconDescription: 'Download CSV',
212
- onClick: downloadCsv
213
- })), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
214
- style: style
215
- }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
216
- label: "Primary button",
217
- renderIcon: _iconsReact.Add16
218
- }, /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
219
- itemText: "Option 1",
220
- onClick: (0, _addonActions.action)("Click on ButtonMenu Option 1")
221
- }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
222
- itemText: "Option 2",
223
- onClick: (0, _addonActions.action)("Click on ButtonMenu Option 2")
224
- }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
225
- itemText: "Option 3",
226
- onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
227
- })), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
195
+ }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
228
196
  ariaLabel: "Tools",
229
197
  size: "lg",
230
198
  flipped: true,
@@ -172,6 +172,10 @@ Tearsheet.propTypes = _objectSpread({
172
172
  * Specifies whether the tearsheet is currently open.
173
173
  */
174
174
  open: _propTypes.default.bool,
175
+ /**
176
+ * The DOM node the tearsheet should be rendered within. Defaults to document.body.
177
+ */
178
+ portalTarget: _propTypes.default.node,
175
179
  /**
176
180
  * The main title of the tearsheet, displayed in the header area.
177
181
  */
@@ -138,6 +138,10 @@ TearsheetNarrow.propTypes = _objectSpread({
138
138
  * Specifies whether the tearsheet is currently open.
139
139
  */
140
140
  open: _propTypes.default.bool,
141
+ /**
142
+ * The DOM node the tearsheet should be rendered within. Defaults to document.body.
143
+ */
144
+ portalTarget: _propTypes.default.node,
141
145
  /**
142
146
  * The main title of the tearsheet, displayed in the header area.
143
147
  */
@@ -390,7 +390,7 @@ TearsheetShell.propTypes = _objectSpread({
390
390
  */
391
391
  open: _propTypes.default.bool,
392
392
  /**
393
- * portal target for the all tags modal
393
+ * The DOM node the tearsheet should be rendered within. Defaults to document.body.
394
394
  */
395
395
  portalTarget: _propTypes.default.node,
396
396
  /**
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": "1.44.0",
4
+ "version": "1.45.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -95,5 +95,5 @@
95
95
  "react": "^16.8.6 || ^17.0.1",
96
96
  "react-dom": "^16.8.6 || ^17.0.1"
97
97
  },
98
- "gitHead": "7a190362168c0c36b5d34269e75adb9c122286a6"
98
+ "gitHead": "68d8819759209ba30005c751ca0b49ce5e22ed56"
99
99
  }
@@ -447,7 +447,7 @@
447
447
  }
448
448
 
449
449
  .#{$block-class}__table-toolbar {
450
- flex: 0 0 auto;
450
+ flex: 1 0 auto;
451
451
  }
452
452
  .#{$carbon-prefix}--table-toolbar {
453
453
  background: transparent;
@@ -16,7 +16,7 @@
16
16
  box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
17
17
  }
18
18
 
19
- .#{$block-class}__row-size-button--open {
19
+ .#{$carbon-prefix}--btn--ghost.#{$block-class}__row-size-button--open {
20
20
  background-color: $ui-background;
21
21
 
22
22
  box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;