@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.
- package/README.md +3 -3
- package/css/index-full-carbon.css +288 -265
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +65 -68
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +90 -70
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +257 -237
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/ActionSet/ActionSet.js +6 -3
- package/es/components/AddSelect/add-select-utils.js +2 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +2 -1
- package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +8 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +88 -0
- package/es/components/Datagrid/useNestedRowExpander.js +8 -3
- package/es/components/FilterSummary/FilterSummary.js +54 -0
- package/es/components/FilterSummary/index.js +7 -0
- package/es/components/OptionsTile/OptionsTile.js +25 -10
- package/es/components/PageHeader/PageHeaderTitle.js +2 -4
- package/es/global/js/hooks/index.js +2 -1
- package/es/global/js/hooks/useControllableState.js +74 -0
- package/lib/components/ActionSet/ActionSet.js +6 -3
- package/lib/components/AddSelect/add-select-utils.js +2 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +2 -1
- package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +8 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +101 -0
- package/lib/components/Datagrid/useNestedRowExpander.js +7 -2
- package/lib/components/FilterSummary/FilterSummary.js +63 -0
- package/lib/components/FilterSummary/index.js +13 -0
- package/lib/components/OptionsTile/OptionsTile.js +25 -10
- package/lib/components/PageHeader/PageHeaderTitle.js +2 -4
- package/lib/global/js/hooks/index.js +8 -1
- package/lib/global/js/hooks/useControllableState.js +80 -0
- package/package.json +15 -15
- package/scss/components/ActionSet/_action-set.scss +9 -4
- package/scss/components/Datagrid/styles/_useNestedRows.scss +17 -0
- package/scss/components/FilterSummary/_filter-summary.scss +17 -0
- package/scss/components/FilterSummary/_index.scss +10 -0
- package/scss/components/FilterSummary/_storybook-styles.scss +14 -0
- package/scss/components/PageHeader/_page-header.scss +0 -4
- 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
|
-
|
60
|
-
|
61
|
-
var _useState3 = (0, _react.useState)(
|
63
|
+
prevIsOpen = _useState2[0],
|
64
|
+
setPrevIsOpen = _useState2[1];
|
65
|
+
var _useState3 = (0, _react.useState)(false),
|
62
66
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
63
|
-
|
64
|
-
|
65
|
-
var
|
66
|
-
|
67
|
-
|
68
|
-
|
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("
|
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
|
-
},
|
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.
|
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.
|
56
|
-
"babel-preset-ibm-cloud-cognitive": "^0.14.
|
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.
|
64
|
-
"jest-config-ibm-cloud-cognitive": "^0.24.
|
65
|
-
"jest-environment-jsdom": "^29.
|
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.
|
67
|
+
"npm-check-updates": "^16.4.1",
|
68
68
|
"npm-run-all": "^4.1.5",
|
69
69
|
"rimraf": "^3.0.2",
|
70
|
-
"sass": "^1.
|
71
|
-
"yargs": "^17.6.
|
70
|
+
"sass": "^1.56.1",
|
71
|
+
"yargs": "^17.6.2"
|
72
72
|
},
|
73
73
|
"dependencies": {
|
74
|
-
"@babel/runtime": "^7.20.
|
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.
|
91
|
-
"@carbon/type": "^10.45.
|
92
|
-
"carbon-components": "^10.58.
|
93
|
-
"carbon-components-react": "^7.59.
|
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": "
|
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;
|