@carbon/ibm-products 1.35.2 → 1.37.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 (49) hide show
  1. package/README.md +3 -3
  2. package/css/index-full-carbon.css +288 -265
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +3 -3
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +65 -68
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +3 -3
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +90 -70
  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 +257 -237
  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/ActionSet/ActionSet.js +6 -3
  19. package/es/components/AddSelect/add-select-utils.js +2 -2
  20. package/es/components/DataSpreadsheet/DataSpreadsheet.js +2 -1
  21. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +8 -1
  22. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +88 -0
  23. package/es/components/Datagrid/useNestedRowExpander.js +8 -3
  24. package/es/components/FilterSummary/FilterSummary.js +54 -0
  25. package/es/components/FilterSummary/index.js +7 -0
  26. package/es/components/OptionsTile/OptionsTile.js +25 -10
  27. package/es/components/PageHeader/PageHeaderTitle.js +2 -4
  28. package/es/global/js/hooks/index.js +2 -1
  29. package/es/global/js/hooks/useControllableState.js +74 -0
  30. package/lib/components/ActionSet/ActionSet.js +6 -3
  31. package/lib/components/AddSelect/add-select-utils.js +2 -2
  32. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +2 -1
  33. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +8 -1
  34. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +101 -0
  35. package/lib/components/Datagrid/useNestedRowExpander.js +7 -2
  36. package/lib/components/FilterSummary/FilterSummary.js +63 -0
  37. package/lib/components/FilterSummary/index.js +13 -0
  38. package/lib/components/OptionsTile/OptionsTile.js +25 -10
  39. package/lib/components/PageHeader/PageHeaderTitle.js +2 -4
  40. package/lib/global/js/hooks/index.js +8 -1
  41. package/lib/global/js/hooks/useControllableState.js +80 -0
  42. package/package.json +15 -15
  43. package/scss/components/ActionSet/_action-set.scss +9 -4
  44. package/scss/components/Datagrid/styles/_useNestedRows.scss +17 -0
  45. package/scss/components/FilterSummary/_filter-summary.scss +17 -0
  46. package/scss/components/FilterSummary/_index.scss +10 -0
  47. package/scss/components/FilterSummary/_storybook-styles.scss +14 -0
  48. package/scss/components/PageHeader/_page-header.scss +0 -4
  49. package/scss/components/_index.scss +1 -0
@@ -16,10 +16,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
16
16
  var _devtools = require("../../global/js/utils/devtools");
17
17
  var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
18
18
  var _settings = require("../../settings");
19
+ var _hooks = require("../../global/js/hooks");
19
20
  var _carbonComponentsReact = require("carbon-components-react");
20
21
  var _iconsReact = require("@carbon/icons-react");
21
22
  var carbonMotion = _interopRequireWildcard(require("@carbon/motion"));
22
- var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
23
+ var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onChange", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
23
24
  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); }
24
25
  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; }
25
26
  // The block part of our conventional BEM class names (blockClass__E--M).
@@ -30,6 +31,7 @@ var componentName = 'OptionsTile';
30
31
 
31
32
  // Default values for props
32
33
  var defaults = {
34
+ onChange: function onChange() {},
33
35
  size: 'xl'
34
36
  };
35
37
 
@@ -44,6 +46,8 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
44
46
  invalidText = _ref.invalidText,
45
47
  locked = _ref.locked,
46
48
  lockedText = _ref.lockedText,
49
+ _ref$onChange = _ref.onChange,
50
+ _onChange = _ref$onChange === void 0 ? defaults.onChange : _ref$onChange,
47
51
  onToggle = _ref.onToggle,
48
52
  open = _ref.open,
49
53
  _ref$size = _ref.size,
@@ -56,16 +60,22 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
56
60
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
57
61
  var _useState = (0, _react.useState)(open),
58
62
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
59
- isOpen = _useState2[0],
60
- setIsOpen = _useState2[1];
61
- var _useState3 = (0, _react.useState)(open),
63
+ prevIsOpen = _useState2[0],
64
+ setPrevIsOpen = _useState2[1];
65
+ var _useState3 = (0, _react.useState)(false),
62
66
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
63
- prevIsOpen = _useState4[0],
64
- setPrevIsOpen = _useState4[1];
65
- var _useState5 = (0, _react.useState)(false),
66
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
67
- closing = _useState6[0],
68
- setClosing = _useState6[1];
67
+ closing = _useState4[0],
68
+ setClosing = _useState4[1];
69
+ var _useControllableState = (0, _hooks.useControllableState)({
70
+ value: open,
71
+ defaultValue: open || null,
72
+ onChange: function onChange(value) {
73
+ return _onChange(value);
74
+ }
75
+ }),
76
+ _useControllableState2 = (0, _slicedToArray2.default)(_useControllableState, 2),
77
+ isOpen = _useControllableState2[0],
78
+ setIsOpen = _useControllableState2[1];
69
79
  var detailsRef = (0, _react.useRef)(null);
70
80
  var contentRef = (0, _react.useRef)(null);
71
81
  var id = (0, _uuidv.default)();
@@ -270,6 +280,11 @@ OptionsTile.propTypes = {
270
280
  * Provide a text explaining why the OptionsTile is in locked state.
271
281
  */
272
282
  lockedText: _propTypes.default.string,
283
+ /**
284
+ * Provide a function which will be called each time the user
285
+ * toggles the open state of the OptionsTile.
286
+ */
287
+ onChange: _propTypes.default.func,
273
288
  /**
274
289
  * Provide a function which will be called each time the user
275
290
  * interacts with the toggle.
@@ -68,12 +68,10 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
68
68
  titleInnards = content;
69
69
  titleText = asText;
70
70
  }
71
- return /*#__PURE__*/_react.default.createElement("div", {
71
+ return /*#__PURE__*/_react.default.createElement("h1", {
72
72
  className: (0, _classnames.default)("".concat(blockClass, "__title"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__title--editable"), isEditable), (0, _defineProperty2.default)({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
73
73
  title: titleText
74
- }, /*#__PURE__*/_react.default.createElement("h1", {
75
- className: "".concat(blockClass, "__title-wrapper")
76
- }, titleInnards));
74
+ }, titleInnards);
77
75
  };
78
76
  exports.PageHeaderTitle = PageHeaderTitle;
79
77
  var inlineEditRequired = function inlineEditRequired(_ref2) {
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "useClickOutside", {
15
15
  return _useClickOutside.useClickOutside;
16
16
  }
17
17
  });
18
+ Object.defineProperty(exports, "useControllableState", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _useControllableState.useControllableState;
22
+ }
23
+ });
18
24
  Object.defineProperty(exports, "useCreateComponentFocus", {
19
25
  enumerable: true,
20
26
  get: function get() {
@@ -78,4 +84,5 @@ var _useCreateComponentStepChange = require("./useCreateComponentStepChange");
78
84
  var _usePreviousValue = require("./usePreviousValue");
79
85
  var _useResetCreateComponent = require("./useResetCreateComponent");
80
86
  var _useRetrieveStepData = require("./useRetrieveStepData");
81
- var _useValidCreateStepCount = require("./useValidCreateStepCount");
87
+ var _useValidCreateStepCount = require("./useValidCreateStepCount");
88
+ var _useControllableState = require("./useControllableState");
@@ -0,0 +1,80 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.useControllableState = useControllableState;
8
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
+ var _react = require("react");
10
+ var _pconsole = _interopRequireDefault(require("../utils/pconsole"));
11
+ /**
12
+ * Copyright IBM Corp. 2016, 2022
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
+
18
+ /**
19
+ * This custom hook simplifies the behavior of a component if it has state that
20
+ * can be both controlled and uncontrolled. It functions identical to a
21
+ * useState() hook and provides [state, setState] for you to use. You can use
22
+ * the `onChange` argument to allow updates to the `state` to be communicated to
23
+ * owners of controlled components.
24
+ *
25
+ * Note: this hook will warn if a component is switching from controlled to
26
+ * uncontrolled, or vice-versa.
27
+ *
28
+ * @param {object} config
29
+ * @param {string} config.name - the name of the custom component
30
+ * @param {any} config.defaultValue - the default value used for the state. This will be
31
+ * the fallback value used if `value` is not defined.
32
+ * @param {Function} config.onChange - an optional function that is called when
33
+ * the value of the state changes. This is useful for communicating to parents of
34
+ * controlled components that the value is requesting to be changed.
35
+ * @param {any} config.value - a controlled value. Omitting this means that the state is
36
+ * uncontrolled
37
+ * @returns {[any, Function]}
38
+ */
39
+ function useControllableState(_ref) {
40
+ var defaultValue = _ref.defaultValue,
41
+ _ref$name = _ref.name,
42
+ name = _ref$name === void 0 ? 'custom' : _ref$name,
43
+ onChange = _ref.onChange,
44
+ value = _ref.value;
45
+ var _useState = (0, _react.useState)(value !== null && value !== void 0 ? value : defaultValue),
46
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
47
+ state = _useState2[0],
48
+ internalSetState = _useState2[1];
49
+ var controlled = (0, _react.useRef)(null);
50
+ if (controlled.current === null) {
51
+ controlled.current = value !== undefined;
52
+ }
53
+ function setState(stateOrUpdater) {
54
+ var value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
55
+ if (controlled.current === false) {
56
+ internalSetState(value);
57
+ }
58
+ if (onChange) {
59
+ onChange(value);
60
+ }
61
+ }
62
+ (0, _react.useEffect)(function () {
63
+ var controlledValue = value !== undefined;
64
+ // Uncontrolled -> Controlled
65
+ // If the component prop is uncontrolled, the prop value should be undefined
66
+ if (controlled.current === false && controlledValue) {
67
+ _pconsole.default.warn("A component is changing an uncontrolled %s component to be controlled.\n This is likely caused by the value changing to a defined value\n from undefined. Decide between using a controlled or uncontrolled\n value for the lifetime of the component.\n More info: https://reactjs.org/link/controlled-components");
68
+ }
69
+
70
+ // Controlled -> Uncontrolled
71
+ // If the component prop is controlled, the prop value should be defined
72
+ if (controlled.current === true && !controlledValue) {
73
+ _pconsole.default.warn("A component is changing a controlled %s component to be uncontrolled.\n 'This is likely caused by the value changing to an undefined value\n 'from a defined one. Decide between using a controlled or\n 'uncontrolled value for the lifetime of the component.\n 'More info: https://reactjs.org/link/controlled-components");
74
+ }
75
+ }, [name, value]);
76
+ if (controlled.current === true) {
77
+ return [value, setState];
78
+ }
79
+ return [state, setState];
80
+ }
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.35.2",
4
+ "version": "1.37.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -52,26 +52,26 @@
52
52
  },
53
53
  "devDependencies": {
54
54
  "@babel/cli": "^7.19.3",
55
- "@babel/core": "^7.19.6",
56
- "babel-preset-ibm-cloud-cognitive": "^0.14.23",
55
+ "@babel/core": "^7.20.2",
56
+ "babel-preset-ibm-cloud-cognitive": "^0.14.24",
57
57
  "chalk": "^4.1.2",
58
58
  "change-case": "^4.1.2",
59
59
  "copyfiles": "^2.4.1",
60
60
  "cross-env": "^7.0.3",
61
61
  "fs-extra": "^10.1.0",
62
62
  "glob": "^8.0.3",
63
- "jest": "^29.2.2",
64
- "jest-config-ibm-cloud-cognitive": "^0.24.9",
65
- "jest-environment-jsdom": "^29.2.2",
63
+ "jest": "^29.3.1",
64
+ "jest-config-ibm-cloud-cognitive": "^0.24.10",
65
+ "jest-environment-jsdom": "^29.3.1",
66
66
  "namor": "^1.1.2",
67
- "npm-check-updates": "^16.3.16",
67
+ "npm-check-updates": "^16.4.1",
68
68
  "npm-run-all": "^4.1.5",
69
69
  "rimraf": "^3.0.2",
70
- "sass": "^1.55.0",
71
- "yargs": "^17.6.0"
70
+ "sass": "^1.56.1",
71
+ "yargs": "^17.6.2"
72
72
  },
73
73
  "dependencies": {
74
- "@babel/runtime": "^7.20.0",
74
+ "@babel/runtime": "^7.20.1",
75
75
  "@carbon/telemetry": "^0.1.0",
76
76
  "framer-motion": "^6.5.1",
77
77
  "immutability-helper": "^3.1.1",
@@ -87,13 +87,13 @@
87
87
  "@carbon/import-once": "^10.7.0",
88
88
  "@carbon/layout": "^10.37.1",
89
89
  "@carbon/motion": "^10.29.0",
90
- "@carbon/themes": "^10.55.0",
91
- "@carbon/type": "^10.45.0",
92
- "carbon-components": "^10.58.4",
93
- "carbon-components-react": "^7.59.4",
90
+ "@carbon/themes": "^10.55.1",
91
+ "@carbon/type": "^10.45.1",
92
+ "carbon-components": "^10.58.5",
93
+ "carbon-components-react": "^7.59.5",
94
94
  "carbon-icons": "^7.0.7",
95
95
  "react": "^16.8.6 || ^17.0.1",
96
96
  "react-dom": "^16.8.6 || ^17.0.1"
97
97
  },
98
- "gitHead": "36dbe6575fb43b86043dae507ae9f31f680254e4"
98
+ "gitHead": "ca62a989688c857c323564d91b01d6828eb369fa"
99
99
  }
@@ -25,15 +25,20 @@
25
25
  .#{$block-class} .#{$block-class}__action-button {
26
26
  @include carbon--type-style('body-short-01');
27
27
 
28
- height: $spacing-10;
29
28
  align-items: center;
30
- padding-top: $spacing-05;
31
- padding-bottom: $spacing-07;
32
29
  margin: 0;
30
+
31
+ &.#{$block-class}__action-button--expressive {
32
+ height: $spacing-10;
33
+ padding-top: $spacing-05;
34
+ padding-bottom: $spacing-07;
35
+ }
33
36
  }
34
37
 
35
38
  .#{$block-class}.#{$carbon-prefix}--btn-set
36
- .#{$block-class}__action-button.#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--expressive {
39
+ .#{$block-class}__action-button.#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--expressive,
40
+ .#{$block-class}.#{$carbon-prefix}--btn-set
41
+ .#{$block-class}__action-button.#{$carbon-prefix}--btn {
37
42
  max-width: none;
38
43
  }
39
44
 
@@ -29,3 +29,20 @@
29
29
  td:first-child {
30
30
  border-bottom: none;
31
31
  }
32
+
33
+ .#{$block-class} .#{$block-class}__carbon-row-expandable {
34
+ position: relative;
35
+ }
36
+
37
+ .#{$block-class}
38
+ tr.#{$block-class}__carbon-nested-row
39
+ + :not(tr.#{$block-class}__carbon-nested-row)::before {
40
+ position: absolute;
41
+ /* stylelint-disable-next-line carbon/layout-token-use */
42
+ top: -1px;
43
+ left: 0;
44
+ width: 100%;
45
+ height: 1px;
46
+ background-color: $border-subtle;
47
+ content: '';
48
+ }
@@ -0,0 +1,17 @@
1
+ //
2
+ // Copyright IBM Corp. 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
+ @import '../../global/styles/project-settings';
8
+
9
+ $block-class: #{$pkg-prefix}--filter-summary;
10
+
11
+ .#{$block-class} {
12
+ display: flex;
13
+ width: 100%;
14
+ align-items: center;
15
+ padding: $spacing-03;
16
+ background: $ui-01;
17
+ }
@@ -0,0 +1,10 @@
1
+ //
2
+ // Copyright IBM Corp. 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
+ // An index file is most useful when you have multiple components
9
+
10
+ @import './filter-summary';
@@ -0,0 +1,14 @@
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
+ #root {
8
+ width: 100%;
9
+ }
10
+
11
+ .preview-position-fix {
12
+ max-width: 700px;
13
+ margin: 0 auto;
14
+ }
@@ -471,10 +471,6 @@ $right-section-alt-width: 100% - $left-section-alt-width;
471
471
  vertical-align: middle;
472
472
  }
473
473
 
474
- .#{$block-class}__title-wrapper {
475
- @include carbon--type-style('productive-heading-04');
476
- }
477
-
478
474
  .#{$block-class}__page-actions {
479
475
  flex: 0 0 100%;
480
476
  margin-top: $spacing-05;
@@ -23,6 +23,7 @@
23
23
  @import './EmptyStates/index';
24
24
  @import './ExportModal/index';
25
25
  @import './ExpressiveCard/index';
26
+ @import './FilterSummary/index';
26
27
  @import './HTTPErrors/index';
27
28
  @import './ImportModal/index';
28
29
  @import './ModifiedTabs/index';