@carbon/ibm-products 1.20.3 → 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 +32 -0
- package/css/components/Datagrid/styles/index.css.map +1 -1
- package/css/components/Datagrid/styles/useColumnCenterAlign.css +18 -0
- package/css/components/Datagrid/styles/useColumnCenterAlign.css.map +1 -0
- 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 +67 -147
- 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 +62 -20
- 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 +65 -143
- 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/Datagrid.stories/StickyActionsColumnStory.js +92 -92
- package/es/components/Datagrid/index.js +2 -1
- package/es/components/Datagrid/useColumnCenterAlign.js +52 -0
- package/es/components/Datagrid/useExpandedRow.js +12 -4
- package/es/components/Datagrid/utils/makeData.js +155 -0
- 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/Datagrid.stories/StickyActionsColumnStory.js +93 -112
- package/lib/components/Datagrid/index.js +9 -1
- package/lib/components/Datagrid/useColumnCenterAlign.js +59 -0
- package/lib/components/Datagrid/useExpandedRow.js +20 -4
- package/lib/components/Datagrid/utils/makeData.js +167 -0
- 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 +2 -0
- package/scss/components/Datagrid/styles/useColumnCenterAlign.scss +19 -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
- package/scss/components/WebTerminal/_web-terminal.scss +1 -1
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;
|
@@ -10,9 +10,11 @@
|
|
10
10
|
@import './useNestedTable';
|
11
11
|
@import './useSortableColumns';
|
12
12
|
@import './useColumnRightAlign';
|
13
|
+
@import './useColumnCenterAlign';
|
13
14
|
@import './useStickyColumn';
|
14
15
|
@import './useActionsColumn';
|
15
16
|
@import './addons/CustomizeColumnsModal';
|
16
17
|
@import './addons/RowSizeDropdown';
|
17
18
|
@import './useSelectAllToggle';
|
19
|
+
@import './useExpandedRow';
|
18
20
|
@import './draggableElement';
|
@@ -0,0 +1,19 @@
|
|
1
|
+
/*
|
2
|
+
* Licensed Materials - Property of IBM
|
3
|
+
* 5724-Q36
|
4
|
+
* (c) Copyright IBM Corp. 2020
|
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}__center-align-header {
|
12
|
+
width: 100%;
|
13
|
+
text-align: center;
|
14
|
+
}
|
15
|
+
|
16
|
+
.#{$block-class}__center-align-cell-renderer.sortDisabled {
|
17
|
+
margin-right: auto;
|
18
|
+
margin-left: auto;
|
19
|
+
}
|
@@ -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;
|