@carbon/ibm-products 1.22.0 → 1.23.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/components/Datagrid/styles/datagrid.css +4 -0
- package/css/components/Datagrid/styles/datagrid.css.map +1 -1
- package/css/components/Datagrid/styles/index.css +15 -0
- package/css/components/Datagrid/styles/index.css.map +1 -1
- package/css/components/Datagrid/styles/useExpandedRow.css +12 -0
- package/css/components/Datagrid/styles/useExpandedRow.css.map +1 -0
- package/css/index-full-carbon.css +46 -143
- 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 +25 -16
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +41 -16
- 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 +44 -139
- 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/AddSelect/AddSelect.js +57 -422
- package/es/components/AddSelect/AddSelectBody.js +349 -0
- package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -31
- package/es/components/AddSelect/AddSelectColumn.js +91 -41
- package/es/components/AddSelect/AddSelectFilter.js +1 -2
- package/es/components/AddSelect/AddSelectList.js +10 -61
- package/es/components/AddSelect/AddSelectMetaPanel.js +1 -1
- package/es/components/AddSelect/AddSelectSidebar.js +20 -13
- package/es/components/AddSelect/AddSelectSort.js +2 -2
- package/es/components/AddSelect/add-select-utils.js +85 -59
- package/es/components/AddSelect/hooks/useParentSelect.js +16 -0
- package/es/components/AddSelect/hooks/usePath.js +66 -0
- package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +1 -5
- package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +1 -5
- package/es/components/Datagrid/Datagrid/Datagrid.js +1 -1
- package/es/components/Datagrid/useExpandedRow.js +12 -4
- package/es/components/PageHeader/PageHeaderUtils.js +5 -0
- package/es/components/TagSet/TagSet.js +15 -5
- package/lib/components/AddSelect/AddSelect.js +54 -430
- package/lib/components/AddSelect/AddSelectBody.js +384 -0
- package/lib/components/AddSelect/AddSelectBreadcrumbs.js +11 -30
- package/lib/components/AddSelect/AddSelectColumn.js +90 -39
- package/lib/components/AddSelect/AddSelectFilter.js +1 -2
- package/lib/components/AddSelect/AddSelectList.js +11 -60
- package/lib/components/AddSelect/AddSelectMetaPanel.js +1 -1
- package/lib/components/AddSelect/AddSelectSidebar.js +20 -13
- package/lib/components/AddSelect/AddSelectSort.js +2 -2
- package/lib/components/AddSelect/add-select-utils.js +88 -64
- package/lib/components/AddSelect/hooks/useParentSelect.js +27 -0
- package/lib/components/AddSelect/hooks/usePath.js +75 -0
- package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +1 -5
- package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +1 -5
- package/lib/components/Datagrid/Datagrid/Datagrid.js +1 -1
- package/lib/components/Datagrid/useExpandedRow.js +20 -4
- package/lib/components/PageHeader/PageHeaderUtils.js +5 -0
- package/lib/components/TagSet/TagSet.js +15 -5
- package/package.json +16 -16
- package/scss/components/Cascade/_cascade.scss +2 -1
- package/scss/components/CreateInfluencer/_create-influencer.scss +0 -2
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -1
- package/scss/components/Datagrid/_storybook-styles.scss +4 -0
- package/scss/components/Datagrid/styles/datagrid.scss +4 -0
- package/scss/components/Datagrid/styles/index.scss +1 -0
- package/scss/components/Datagrid/styles/useExpandedRow.scss +13 -0
- package/scss/components/InlineEdit/_inline-edit.scss +2 -1
- package/scss/components/OptionsTile/_options-tile.scss +1 -0
- package/scss/components/PageHeader/_page-header.scss +9 -4
- package/scss/components/SidePanel/_side-panel.scss +1 -2
- package/scss/components/TagSet/_tag-set.scss +4 -0
@@ -39,7 +39,7 @@ var _propsHelper = require("../../global/js/utils/props-helper");
|
|
39
39
|
|
40
40
|
var _settings = require("../../settings");
|
41
41
|
|
42
|
-
var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
|
42
|
+
var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
|
43
43
|
_excluded2 = ["label", "id"],
|
44
44
|
_excluded3 = ["label"];
|
45
45
|
|
@@ -68,6 +68,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
68
68
|
allTagsModalTargetIn = _ref.allTagsModalTarget,
|
69
69
|
className = _ref.className,
|
70
70
|
maxVisible = _ref.maxVisible,
|
71
|
+
multiline = _ref.multiline,
|
71
72
|
_ref$overflowAlign = _ref.overflowAlign,
|
72
73
|
overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
|
73
74
|
overflowClassName = _ref.overflowClassName,
|
@@ -184,7 +185,11 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
184
185
|
setDisplayedTags(newDisplayedTags);
|
185
186
|
}, [displayCount, overflowAlign, overflowClassName, overflowDirection, showAllTagsLabel, tags]);
|
186
187
|
var checkFullyVisibleTags = (0, _react.useCallback)(function () {
|
187
|
-
|
188
|
+
if (multiline) {
|
189
|
+
return setDisplayCount(maxVisible);
|
190
|
+
} // how many will fit?
|
191
|
+
|
192
|
+
|
188
193
|
var willFit = 0;
|
189
194
|
|
190
195
|
if (sizingTags.length > 0) {
|
@@ -216,10 +221,10 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
216
221
|
} else {
|
217
222
|
setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
|
218
223
|
}
|
219
|
-
}, [maxVisible, sizingTags, tagSetRef]);
|
224
|
+
}, [maxVisible, multiline, sizingTags, tagSetRef]);
|
220
225
|
(0, _react.useEffect)(function () {
|
221
226
|
checkFullyVisibleTags();
|
222
|
-
}, [checkFullyVisibleTags, maxVisible, sizingTags]);
|
227
|
+
}, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
|
223
228
|
/* don't know how to test resize */
|
224
229
|
|
225
230
|
/* istanbul ignore next */
|
@@ -262,7 +267,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
262
267
|
"aria-hidden": true,
|
263
268
|
ref: sizingContainerRef
|
264
269
|
}, hiddenSizingTags), /*#__PURE__*/_react.default.createElement("div", {
|
265
|
-
className: "".concat(blockClass, "__tag-container"),
|
270
|
+
className: (0, _classnames.default)(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
|
266
271
|
ref: displayedArea
|
267
272
|
}, displayedTags)), (allTagsModalTarget ? _reactDom.createPortal : function (children) {
|
268
273
|
return children;
|
@@ -342,6 +347,11 @@ TagSet.propTypes = {
|
|
342
347
|
*/
|
343
348
|
maxVisible: _propTypes.default.number,
|
344
349
|
|
350
|
+
/**
|
351
|
+
* display tags in multiple lines
|
352
|
+
*/
|
353
|
+
multiline: _propTypes.default.bool,
|
354
|
+
|
345
355
|
/**
|
346
356
|
* overflowAlign from the standard tooltip. Default center.
|
347
357
|
*/
|
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.23.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -50,33 +50,33 @@
|
|
50
50
|
"upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
|
51
51
|
},
|
52
52
|
"devDependencies": {
|
53
|
-
"@babel/cli": "^7.
|
54
|
-
"@babel/core": "^7.
|
55
|
-
"babel-preset-ibm-cloud-cognitive": "^0.14.
|
53
|
+
"@babel/cli": "^7.18.6",
|
54
|
+
"@babel/core": "^7.18.6",
|
55
|
+
"babel-preset-ibm-cloud-cognitive": "^0.14.16",
|
56
56
|
"chalk": "^4.1.2",
|
57
57
|
"change-case": "^4.1.2",
|
58
58
|
"copyfiles": "^2.4.1",
|
59
59
|
"cross-env": "^7.0.3",
|
60
60
|
"fs-extra": "^10.1.0",
|
61
61
|
"glob": "^8.0.3",
|
62
|
-
"jest": "^28.1.
|
63
|
-
"jest-config-ibm-cloud-cognitive": "^0.24.
|
64
|
-
"jest-environment-jsdom": "^28.1.
|
62
|
+
"jest": "^28.1.2",
|
63
|
+
"jest-config-ibm-cloud-cognitive": "^0.24.1",
|
64
|
+
"jest-environment-jsdom": "^28.1.2",
|
65
65
|
"namor": "^1.1.2",
|
66
|
-
"npm-check-updates": "^
|
66
|
+
"npm-check-updates": "^15.0.1",
|
67
67
|
"npm-run-all": "^4.1.5",
|
68
68
|
"rimraf": "^3.0.2",
|
69
|
-
"sass": "^1.
|
70
|
-
"yargs": "^17.5.
|
69
|
+
"sass": "^1.53.0",
|
70
|
+
"yargs": "^17.5.1"
|
71
71
|
},
|
72
72
|
"dependencies": {
|
73
|
-
"@babel/runtime": "^7.
|
73
|
+
"@babel/runtime": "^7.18.6",
|
74
74
|
"@carbon/telemetry": "^0.1.0",
|
75
75
|
"immutability-helper": "^3.1.1",
|
76
76
|
"react-dnd": "^15.1.2",
|
77
77
|
"react-dnd-html5-backend": "^15.1.3",
|
78
|
-
"react-resize-detector": "^7.
|
79
|
-
"react-table": "^7.
|
78
|
+
"react-resize-detector": "^7.1.2",
|
79
|
+
"react-table": "^7.8.0",
|
80
80
|
"react-window": "^1.8.7"
|
81
81
|
},
|
82
82
|
"peerDependencies": {
|
@@ -87,11 +87,11 @@
|
|
87
87
|
"@carbon/motion": "^10.29.0",
|
88
88
|
"@carbon/themes": "^10.54.0",
|
89
89
|
"@carbon/type": "^10.44.0",
|
90
|
-
"carbon-components": "^10.57.
|
91
|
-
"carbon-components-react": "^7.57.
|
90
|
+
"carbon-components": "^10.57.2",
|
91
|
+
"carbon-components-react": "^7.57.2",
|
92
92
|
"carbon-icons": "^7.0.7",
|
93
93
|
"react": "^16.8.6 || ^17.0.1",
|
94
94
|
"react-dom": "^16.8.6 || ^17.0.1"
|
95
95
|
},
|
96
|
-
"gitHead": "
|
96
|
+
"gitHead": "106f29b7c8ca8bf729d0c08d12c3f818cebc7995"
|
97
97
|
}
|
@@ -30,7 +30,8 @@
|
|
30
30
|
.#{$block-class}__element,
|
31
31
|
.#{$block-class}__col {
|
32
32
|
@media (prefers-reduced-motion: no-preference) {
|
33
|
-
|
33
|
+
// stylelint-disable-next-line carbon/motion-token-use
|
34
|
+
animation: $animationProps fade; // stylelint note animation duration declared in $animationProps
|
34
35
|
animation-fill-mode: forwards;
|
35
36
|
opacity: 0;
|
36
37
|
}
|
@@ -61,7 +61,6 @@
|
|
61
61
|
}
|
62
62
|
.#{$block-class}__side-nav-opening,
|
63
63
|
.#{$block-class}__progress-indicator-opening {
|
64
|
-
// stylelint-disable-next-line carbon/motion-token-use
|
65
64
|
animation: influencer-menu-entrance $duration--moderate-02 1;
|
66
65
|
animation-fill-mode: forwards;
|
67
66
|
@include carbon--motion(entrance, productive);
|
@@ -69,7 +68,6 @@
|
|
69
68
|
|
70
69
|
.#{$block-class}__side-nav-closing,
|
71
70
|
.#{$block-class}__progress-indicator-closing {
|
72
|
-
// stylelint-disable-next-line carbon/motion-token-use
|
73
71
|
animation: influencer-menu-exit $duration--moderate-02 1;
|
74
72
|
animation-fill-mode: forwards;
|
75
73
|
@include carbon--motion(exit, productive);
|
@@ -51,7 +51,7 @@
|
|
51
51
|
}
|
52
52
|
|
53
53
|
.#{$block-class} .#{$step-block-class}__step--visible-step {
|
54
|
-
animation: $duration--slow-01
|
54
|
+
animation: step-content-entrance $duration--slow-01;
|
55
55
|
animation-fill-mode: forwards;
|
56
56
|
animation-timing-function: $carbon--standard-easing;
|
57
57
|
opacity: 0;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/*
|
2
|
+
* Licensed Materials - Property of IBM
|
3
|
+
* 5724-Q36
|
4
|
+
* (c) Copyright IBM Corp. 2022
|
5
|
+
* US Government Users Restricted Rights - Use, duplication or disclosure
|
6
|
+
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
7
|
+
*/
|
8
|
+
|
9
|
+
@import './variables';
|
10
|
+
|
11
|
+
.#{$block-class}__expanded-row-content {
|
12
|
+
padding: $spacing-05 $spacing-05 $spacing-06 $spacing-10;
|
13
|
+
}
|
@@ -20,6 +20,7 @@
|
|
20
20
|
|
21
21
|
// cut down version borrowed from 'carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/utilities/focus-outline';
|
22
22
|
@mixin input-outline($color: $focus) {
|
23
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
23
24
|
outline: $spacing-01 solid $color;
|
24
25
|
outline-offset: calc(-1 * $spacing-01);
|
25
26
|
|
@@ -110,6 +111,7 @@
|
|
110
111
|
100% - var(--#{$block-class}--toolbar-width) - $spacing-05
|
111
112
|
);
|
112
113
|
min-height: var(--#{$block-class}--size);
|
114
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
113
115
|
margin-right: var(--#{$block-class}--toolbar-width);
|
114
116
|
// room for toolbar
|
115
117
|
margin-left: $spacing-05;
|
@@ -277,7 +279,6 @@
|
|
277
279
|
padding-left: 0;
|
278
280
|
border-right: 0;
|
279
281
|
border-left: 0;
|
280
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
281
282
|
margin-right: calc(-1 * var(--#{$block-class}--size));
|
282
283
|
|
283
284
|
svg {
|
@@ -39,21 +39,27 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
39
39
|
|
40
40
|
@keyframes background-appear {
|
41
41
|
from {
|
42
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
42
43
|
background-color: var(--from-color);
|
43
44
|
}
|
44
45
|
|
45
46
|
to {
|
47
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
46
48
|
background-color: var(--to-color);
|
47
49
|
}
|
48
50
|
}
|
49
51
|
@keyframes background-and-shadow-appear {
|
50
52
|
from {
|
53
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
51
54
|
background-color: var(--from-color);
|
55
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
52
56
|
box-shadow: 0 1px 0 var(--from-color);
|
53
57
|
}
|
54
58
|
|
55
59
|
to {
|
60
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
56
61
|
background-color: var(--to-color);
|
62
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
57
63
|
box-shadow: 0 1px 0 var(--to-color-shadow);
|
58
64
|
}
|
59
65
|
}
|
@@ -86,6 +92,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
86
92
|
$animation: background-and-shadow-appear;
|
87
93
|
}
|
88
94
|
|
95
|
+
/* stylelint-disable-next-line carbon/motion-token-use */
|
89
96
|
animation: $animation $duration linear paused forwards;
|
90
97
|
// Added separately for clarity
|
91
98
|
animation-delay: calc(
|
@@ -102,6 +109,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
102
109
|
/* z-index used to raise above any position relative content as per Carbon header */
|
103
110
|
/* dropped 1 below Carbon header so as not to overlay the side panel */
|
104
111
|
z-index: $z-index-header-minus;
|
112
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
105
113
|
top: var(--#{$block-class}--header-top);
|
106
114
|
display: inline-block; /* cause top/bottom margin to reserve space */
|
107
115
|
width: 100%;
|
@@ -329,10 +337,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
329
337
|
&:not(.#{$block-class}__breadcrumb-title--pre-collapsed) {
|
330
338
|
opacity: var(--#{$block-class}--breadcrumb-title-opacity);
|
331
339
|
|
332
|
-
|
333
|
-
transform: translateY(
|
334
|
-
var(--#{$block-class}--breadcrumb-title-top)
|
335
|
-
); /* token linter does not support this form */
|
340
|
+
transform: translateY(var(--#{$block-class}--breadcrumb-title-top));
|
336
341
|
|
337
342
|
visibility: var(--#{$block-class}--breadcrumb-title-visibility);
|
338
343
|
}
|
@@ -241,7 +241,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
241
241
|
z-index: 4;
|
242
242
|
background-color: $ui-01;
|
243
243
|
opacity: var(--#{$block-class}--subtitle-opacity);
|
244
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
245
244
|
transform: translateY(var(--#{$block-class}--title-y-position));
|
246
245
|
}
|
247
246
|
.#{$block-class}__label-text {
|
@@ -251,7 +250,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
251
250
|
padding-right: $spacing-05;
|
252
251
|
opacity: var(--#{$block-class}--subtitle-opacity);
|
253
252
|
text-overflow: ellipsis;
|
254
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
255
253
|
transform: translateY(var(--#{$block-class}--title-y-position));
|
256
254
|
white-space: nowrap;
|
257
255
|
}
|
@@ -377,6 +375,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
|
|
377
375
|
.#{$block-class}__action-toolbar {
|
378
376
|
position: sticky;
|
379
377
|
z-index: 4;
|
378
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
380
379
|
top: var(--#{$block-class}--title-height);
|
381
380
|
display: flex;
|
382
381
|
align-items: center;
|
@@ -48,6 +48,10 @@ $block-class-modal: #{$block-class}-modal;
|
|
48
48
|
white-space: nowrap;
|
49
49
|
}
|
50
50
|
|
51
|
+
.#{$block-class}__tag-container--multiline {
|
52
|
+
flex-wrap: wrap;
|
53
|
+
}
|
54
|
+
|
51
55
|
.#{$block-class}__tag-container--hidden {
|
52
56
|
// This tag container is used to measure the width of all displayable tags
|
53
57
|
@include measuring-container;
|