@carbon/ibm-products 1.35.1 → 1.36.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +278 -240
- 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 +6 -3
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +278 -240
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +278 -240
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- 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/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
- package/es/components/Datagrid/useNestedRowExpander.js +8 -3
- package/es/components/Datagrid/useRowExpander.js +13 -1
- package/es/components/InlineEdit/InlineEdit.js +22 -385
- package/es/components/InlineEditV1/InlineEditV1.js +406 -0
- package/es/components/InlineEditV1/index.js +8 -0
- package/es/components/InlineEditV2/InlineEditV2.js +48 -21
- package/es/components/InlineEditV2/index.js +7 -0
- package/es/components/OptionsTile/OptionsTile.js +25 -10
- package/es/components/index.js +1 -1
- package/es/global/js/hooks/index.js +2 -1
- package/es/global/js/hooks/useControllableState.js +74 -0
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/ActionSet/ActionSet.js +6 -3
- package/lib/components/AddSelect/add-select-utils.js +2 -2
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
- package/lib/components/Datagrid/useColumnOrder.js +2 -1
- package/lib/components/Datagrid/useNestedRowExpander.js +7 -2
- package/lib/components/Datagrid/useRowExpander.js +13 -1
- package/lib/components/InlineEdit/InlineEdit.js +22 -379
- package/lib/components/InlineEditV1/InlineEditV1.js +403 -0
- package/lib/components/InlineEditV1/index.js +12 -0
- package/lib/components/InlineEditV2/InlineEditV2.js +38 -20
- package/lib/components/OptionsTile/OptionsTile.js +25 -10
- package/lib/components/index.js +1 -1
- package/lib/global/js/hooks/index.js +8 -1
- package/lib/global/js/hooks/useControllableState.js +80 -0
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +10 -10
- package/scss/components/ActionSet/_action-set.scss +9 -4
- package/scss/components/Datagrid/styles/_useExpandedRow.scss +18 -0
- package/scss/components/Datagrid/styles/_useNestedRows.scss +17 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
- package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +0 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
- package/scss/components/InlineEditV2/_index.scss +1 -1
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +5 -1
- package/scss/components/InlineEditV2/_storybook-styles.scss +6 -0
- package/scss/components/_index-released-only.scss +1 -1
- package/scss/components/_index.scss +2 -1
@@ -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.36.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.
|
56
|
-
"babel-preset-ibm-cloud-cognitive": "^0.14.
|
55
|
+
"@babel/core": "^7.19.6",
|
56
|
+
"babel-preset-ibm-cloud-cognitive": "^0.14.23",
|
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.
|
64
|
-
"jest-config-ibm-cloud-cognitive": "^0.24.
|
65
|
-
"jest-environment-jsdom": "^29.2.
|
63
|
+
"jest": "^29.2.2",
|
64
|
+
"jest-config-ibm-cloud-cognitive": "^0.24.9",
|
65
|
+
"jest-environment-jsdom": "^29.2.2",
|
66
66
|
"namor": "^1.1.2",
|
67
|
-
"npm-check-updates": "^16.3.
|
67
|
+
"npm-check-updates": "^16.3.16",
|
68
68
|
"npm-run-all": "^4.1.5",
|
69
69
|
"rimraf": "^3.0.2",
|
70
70
|
"sass": "^1.55.0",
|
71
71
|
"yargs": "^17.6.0"
|
72
72
|
},
|
73
73
|
"dependencies": {
|
74
|
-
"@babel/runtime": "^7.
|
74
|
+
"@babel/runtime": "^7.20.0",
|
75
75
|
"@carbon/telemetry": "^0.1.0",
|
76
76
|
"framer-motion": "^6.5.1",
|
77
77
|
"immutability-helper": "^3.1.1",
|
@@ -79,7 +79,7 @@
|
|
79
79
|
"react-dnd-html5-backend": "^15.1.3",
|
80
80
|
"react-resize-detector": "^7.1.2",
|
81
81
|
"react-table": "^7.8.0",
|
82
|
-
"react-window": "^1.8.
|
82
|
+
"react-window": "^1.8.8"
|
83
83
|
},
|
84
84
|
"peerDependencies": {
|
85
85
|
"@carbon/colors": "^10.37.1",
|
@@ -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": "
|
98
|
+
"gitHead": "5d3cd5d3456d537a654f4d5ad010137bf567ca3a"
|
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
|
|
@@ -35,3 +35,21 @@
|
|
35
35
|
width: 100%;
|
36
36
|
@include shared-pseudo-styles();
|
37
37
|
}
|
38
|
+
|
39
|
+
.#{$block-class}__carbon-row.#{$block-class}__carbon-row-expandable
|
40
|
+
.#{$block-class}__cell.#{$block-class}__expandable-row-cell {
|
41
|
+
padding: $spacing-03;
|
42
|
+
padding-right: 0;
|
43
|
+
}
|
44
|
+
|
45
|
+
.#{$block-class}__row-expander.#{$carbon-prefix}--btn {
|
46
|
+
display: flex;
|
47
|
+
width: $spacing-07;
|
48
|
+
height: $spacing-07;
|
49
|
+
min-height: $spacing-07;
|
50
|
+
justify-content: center;
|
51
|
+
padding: 0;
|
52
|
+
.#{$block-class}__row-expander--icon {
|
53
|
+
fill: $ui-05;
|
54
|
+
}
|
55
|
+
}
|
@@ -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
|
+
}
|
File without changes
|
File without changes
|
@@ -1,5 +1,5 @@
|
|
1
1
|
//
|
2
|
-
// Copyright IBM Corp.
|
2
|
+
// Copyright IBM Corp. 2022, 2022
|
3
3
|
//
|
4
4
|
// This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
@@ -45,6 +45,10 @@
|
|
45
45
|
flex: 1;
|
46
46
|
}
|
47
47
|
|
48
|
+
&__text-input-label {
|
49
|
+
display: none;
|
50
|
+
}
|
51
|
+
|
48
52
|
&__warning-icon {
|
49
53
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
50
54
|
margin-right: 0.4375rem;
|
@@ -22,7 +22,7 @@
|
|
22
22
|
@import './ExpressiveCard/index';
|
23
23
|
@import './HTTPErrors/index';
|
24
24
|
@import './ImportModal/index';
|
25
|
-
@import './
|
25
|
+
@import './InlineEditV1/index';
|
26
26
|
@import './NotificationsPanel/index';
|
27
27
|
@import './PageHeader/index';
|
28
28
|
@import './ProductiveCard/index';
|
@@ -42,11 +42,12 @@
|
|
42
42
|
@import './UserProfileImage/index';
|
43
43
|
@import './EditSidePanel/index';
|
44
44
|
@import './OptionsTile/index';
|
45
|
-
@import './InlineEdit/index';
|
46
45
|
@import './DataSpreadsheet/index';
|
47
46
|
@import './Datagrid/index';
|
48
47
|
@import './EditTearsheet/index';
|
49
48
|
@import './EditTearsheetNarrow/index';
|
50
49
|
@import './EditFullPage/index';
|
51
50
|
@import './EditUpdateCards/index';
|
51
|
+
|
52
|
+
@import './InlineEditV1/index';
|
52
53
|
@import './InlineEditV2/index';
|