@carbon/ibm-products 1.10.0 → 1.11.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +76 -30
- 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 +10 -4
- 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 +76 -30
- 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 +76 -30
- 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 +88 -87
- package/es/components/AddSelect/AddSelectColumn.js +143 -6
- package/es/components/AddSelect/AddSelectSidebar.js +1 -14
- package/es/components/AddSelect/add-select-utils.js +64 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +255 -140
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +37 -38
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +55 -6
- package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +27 -0
- package/es/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +28 -0
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +41 -0
- package/es/components/DataSpreadsheet/{checkActiveHeaderCell.js → utils/checkActiveHeaderCell.js} +1 -1
- package/es/components/DataSpreadsheet/{createActiveCellFn.js → utils/createActiveCellFn.js} +20 -9
- package/es/components/DataSpreadsheet/{createCellSelectionArea.js → utils/createCellSelectionArea.js} +8 -4
- package/es/components/DataSpreadsheet/{generateData.js → utils/generateData.js} +6 -0
- package/es/components/DataSpreadsheet/{getCellSize.js → utils/getCellSize.js} +0 -0
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +46 -0
- package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +82 -0
- package/es/components/DataSpreadsheet/utils/removeCellSelections.js +30 -0
- package/es/components/InlineEdit/InlineEdit.js +49 -8
- package/es/components/OptionsTile/OptionsTile.js +20 -20
- package/es/components/OptionsTile/index.js +1 -1
- package/es/components/PageHeader/PageHeader.js +35 -32
- package/es/components/PageHeader/PageHeaderTitle.js +2 -1
- package/es/components/PageHeader/PageHeaderUtils.js +21 -22
- package/lib/components/AddSelect/AddSelect.js +91 -87
- package/lib/components/AddSelect/AddSelectColumn.js +144 -4
- package/lib/components/AddSelect/AddSelectSidebar.js +7 -14
- package/lib/components/AddSelect/add-select-utils.js +78 -0
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +263 -142
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +39 -36
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +62 -8
- package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +37 -0
- package/lib/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +39 -0
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +52 -0
- package/lib/components/DataSpreadsheet/{checkActiveHeaderCell.js → utils/checkActiveHeaderCell.js} +1 -1
- package/lib/components/DataSpreadsheet/{createActiveCellFn.js → utils/createActiveCellFn.js} +20 -9
- package/lib/components/DataSpreadsheet/{createCellSelectionArea.js → utils/createCellSelectionArea.js} +8 -4
- package/lib/components/DataSpreadsheet/{generateData.js → utils/generateData.js} +6 -0
- package/lib/components/DataSpreadsheet/{getCellSize.js → utils/getCellSize.js} +0 -0
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +59 -0
- package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +92 -0
- package/lib/components/DataSpreadsheet/utils/removeCellSelections.js +41 -0
- package/lib/components/InlineEdit/InlineEdit.js +52 -10
- package/lib/components/OptionsTile/OptionsTile.js +19 -19
- package/lib/components/PageHeader/PageHeader.js +35 -32
- package/lib/components/PageHeader/PageHeaderTitle.js +2 -1
- package/lib/components/PageHeader/PageHeaderUtils.js +21 -22
- package/package.json +2 -2
- package/scss/components/AddSelect/_add-select.scss +16 -0
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +7 -3
- package/scss/components/CreateSidePanel/_create-side-panel.scss +1 -1
- package/scss/components/CreateSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +14 -1
- package/scss/components/EditSidePanel/_edit-side-panel.scss +9 -0
- package/scss/components/EditSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/InlineEdit/_inline-edit.scss +31 -37
- package/scss/components/OptionsTile/_index.scss +1 -1
- package/scss/components/OptionsTile/_options-tile.scss +17 -17
- package/scss/components/OptionsTile/_storybook-styles.scss +4 -4
- package/scss/components/PageHeader/_page-header.scss +3 -2
- package/scss/components/SidePanel/_side-panel.scss +8 -8
@@ -14426,6 +14426,18 @@ a.bx--side-nav__link--current::before {
|
|
14426
14426
|
border-top: 1px solid var(--cds-ui-03, #e0e0e0);
|
14427
14427
|
border-right: 1px solid var(--cds-ui-03, #e0e0e0);
|
14428
14428
|
}
|
14429
|
+
.c4p--add-select__column-search-bar {
|
14430
|
+
display: flex;
|
14431
|
+
}
|
14432
|
+
.c4p--add-select__column-search-bar label {
|
14433
|
+
display: none;
|
14434
|
+
}
|
14435
|
+
.c4p--add-select__column-sort-filter {
|
14436
|
+
display: flex;
|
14437
|
+
}
|
14438
|
+
.c4p--add-select__column .bx--overflow-menu {
|
14439
|
+
border-bottom: 1px solid var(--cds-ui-04, #8d8d8d);
|
14440
|
+
}
|
14429
14441
|
|
14430
14442
|
.c4p--add-select__tag-container {
|
14431
14443
|
display: flex;
|
@@ -15782,6 +15794,9 @@ a.bx--side-nav__link--current::before {
|
|
15782
15794
|
display: inline-flex;
|
15783
15795
|
vertical-align: middle;
|
15784
15796
|
}
|
15797
|
+
.c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
|
15798
|
+
max-width: calc(100% - var(--cds-spacing-07, 2rem));
|
15799
|
+
}
|
15785
15800
|
}
|
15786
15801
|
.c4p--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
|
15787
15802
|
display: inline-flex;
|
@@ -15796,8 +15811,9 @@ a.bx--side-nav__link--current::before {
|
|
15796
15811
|
width: 100%;
|
15797
15812
|
text-overflow: ellipsis;
|
15798
15813
|
}
|
15799
|
-
|
15800
|
-
|
15814
|
+
|
15815
|
+
.c4p--breadcrumb-with-overflow__overflow-menu-options.c4p--breadcrumb-with-overflow__overflow-menu-options {
|
15816
|
+
z-index: 8000;
|
15801
15817
|
}
|
15802
15818
|
|
15803
15819
|
.bx--search {
|
@@ -16454,8 +16470,8 @@ a.bx--side-nav__link--current::before {
|
|
16454
16470
|
display: none;
|
16455
16471
|
}
|
16456
16472
|
.c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs .c4p--page-header__action-bar-column {
|
16457
|
-
max-width:
|
16458
|
-
flex: 0 1
|
16473
|
+
max-width: 25%;
|
16474
|
+
flex: 0 1 25%;
|
16459
16475
|
}
|
16460
16476
|
@media (min-width: 42rem) {
|
16461
16477
|
.c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs .c4p--page-header__action-bar-column {
|
@@ -16493,6 +16509,8 @@ a.bx--side-nav__link--current::before {
|
|
16493
16509
|
visibility: visible;
|
16494
16510
|
}
|
16495
16511
|
.c4p--page-header .c4p--page-header__breadcrumb-column {
|
16512
|
+
overflow: hidden;
|
16513
|
+
/* required for ellipsis in title, title not visible in breadcrumb with back arrow */
|
16496
16514
|
max-width: 100%;
|
16497
16515
|
flex: 0 0 100%;
|
16498
16516
|
}
|
@@ -18761,6 +18779,14 @@ a.bx--side-nav__link--current::before {
|
|
18761
18779
|
width: 100%;
|
18762
18780
|
margin-bottom: 0;
|
18763
18781
|
}
|
18782
|
+
.c4p--edit-side-panel .c4p--edit-side-panel__actions-container {
|
18783
|
+
position: absolute;
|
18784
|
+
z-index: 4;
|
18785
|
+
right: 0;
|
18786
|
+
bottom: 0;
|
18787
|
+
width: 100%;
|
18788
|
+
margin-bottom: 0;
|
18789
|
+
}
|
18764
18790
|
|
18765
18791
|
.c4p--options-tile {
|
18766
18792
|
border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
|
@@ -18786,7 +18812,7 @@ a.bx--side-nav__link--current::before {
|
|
18786
18812
|
box-sizing: border-box;
|
18787
18813
|
align-items: center;
|
18788
18814
|
padding-right: var(--cds-spacing-05, 1rem);
|
18789
|
-
grid-template-columns: 3rem 1fr
|
18815
|
+
grid-template-columns: 3rem 1fr 2rem;
|
18790
18816
|
}
|
18791
18817
|
|
18792
18818
|
.c4p--options-tile__header {
|
@@ -18795,6 +18821,10 @@ a.bx--side-nav__link--current::before {
|
|
18795
18821
|
transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
18796
18822
|
}
|
18797
18823
|
|
18824
|
+
.c4p--options-tile__header::-webkit-details-marker {
|
18825
|
+
display: none;
|
18826
|
+
}
|
18827
|
+
|
18798
18828
|
.c4p--options-tile__header:hover {
|
18799
18829
|
background-color: var(--cds-hover-ui, #e5e5e5);
|
18800
18830
|
}
|
@@ -18809,11 +18839,11 @@ a.bx--side-nav__link--current::before {
|
|
18809
18839
|
}
|
18810
18840
|
}
|
18811
18841
|
|
18812
|
-
.c4p--options-
|
18842
|
+
.c4p--options-tile__heading {
|
18813
18843
|
grid-column: 2;
|
18814
18844
|
}
|
18815
18845
|
|
18816
|
-
.c4p--options-
|
18846
|
+
.c4p--options-tile__title {
|
18817
18847
|
font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
|
18818
18848
|
font-weight: var(--cds-productive-heading-01-font-weight, 600);
|
18819
18849
|
line-height: var(--cds-productive-heading-01-line-height, 1.28572);
|
@@ -18861,11 +18891,13 @@ a.bx--side-nav__link--current::before {
|
|
18861
18891
|
.c4p--options-tile__summary-text {
|
18862
18892
|
overflow: hidden;
|
18863
18893
|
height: max-content;
|
18894
|
+
padding-right: calc(var(--cds-spacing-05, 1rem) + 2rem);
|
18864
18895
|
text-overflow: ellipsis;
|
18865
18896
|
white-space: nowrap;
|
18866
18897
|
}
|
18867
18898
|
|
18868
18899
|
.c4p--options-tile__chevron {
|
18900
|
+
display: block;
|
18869
18901
|
justify-self: center;
|
18870
18902
|
transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
18871
18903
|
}
|
@@ -18936,14 +18968,6 @@ a.bx--side-nav__link--current::before {
|
|
18936
18968
|
margin-top: var(--cds-spacing-01, 0.125rem);
|
18937
18969
|
}
|
18938
18970
|
|
18939
|
-
.c4p--options-tile--lg .c4p--options-tile__summary-text {
|
18940
|
-
padding-right: calc(var(--cds-spacing-05, 1rem) + 1rem);
|
18941
|
-
}
|
18942
|
-
|
18943
|
-
.c4p--options-tile--xl .c4p--options-tile__summary-text {
|
18944
|
-
padding-right: calc(var(--cds-spacing-05, 1rem) + 2rem);
|
18945
|
-
}
|
18946
|
-
|
18947
18971
|
@media (prefers-reduced-motion: reduce) {
|
18948
18972
|
.c4p--options-tile__summary,
|
18949
18973
|
.c4p--options-tile__chevron {
|
@@ -18954,6 +18978,7 @@ a.bx--side-nav__link--current::before {
|
|
18954
18978
|
--c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
|
18955
18979
|
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
18956
18980
|
--c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
|
18981
|
+
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
18957
18982
|
position: relative;
|
18958
18983
|
display: inline-block;
|
18959
18984
|
min-width: calc(4 * var(--c4p--inline-edit--size));
|
@@ -19001,10 +19026,10 @@ a.bx--side-nav__link--current::before {
|
|
19001
19026
|
.c4p--inline-edit .c4p--inline-edit__input {
|
19002
19027
|
display: inline-block;
|
19003
19028
|
overflow: hidden;
|
19004
|
-
width: calc(100% -
|
19005
|
-
max-width: calc(100% -
|
19029
|
+
width: calc(100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem));
|
19030
|
+
max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem));
|
19006
19031
|
min-height: var(--c4p--inline-edit--size);
|
19007
|
-
margin-right:
|
19032
|
+
margin-right: var(--c4p--inline-edit--toolbar-width);
|
19008
19033
|
margin-left: var(--cds-spacing-05, 1rem);
|
19009
19034
|
line-height: var(--c4p--inline-edit--size);
|
19010
19035
|
}
|
@@ -19012,9 +19037,7 @@ a.bx--side-nav__link--current::before {
|
|
19012
19037
|
outline: none;
|
19013
19038
|
}
|
19014
19039
|
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
|
19015
|
-
width: calc(
|
19016
|
-
max-width: calc(100% - 3 * var(--c4p--inline-edit--size) - var(--cds-spacing-05, 1rem));
|
19017
|
-
margin-right: calc(3 * var(--c4p--inline-edit--size));
|
19040
|
+
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
19018
19041
|
}
|
19019
19042
|
.c4p--inline-edit .c4p--inline-edit__input::after {
|
19020
19043
|
position: absolute;
|
@@ -19062,20 +19085,18 @@ a.bx--side-nav__link--current::before {
|
|
19062
19085
|
visibility: visible;
|
19063
19086
|
}
|
19064
19087
|
.c4p--inline-edit .c4p--inline-edit__after-input-elements {
|
19088
|
+
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
19065
19089
|
position: absolute;
|
19066
19090
|
top: 0;
|
19067
19091
|
right: 0;
|
19068
19092
|
display: flex;
|
19069
|
-
width:
|
19093
|
+
width: var(--c4p--inline-edit--toolbar-width);
|
19070
19094
|
height: 100%;
|
19071
19095
|
justify-content: space-between;
|
19072
19096
|
cursor: text;
|
19073
19097
|
}
|
19074
19098
|
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
19075
|
-
width: calc(3 * var(--c4p--inline-edit--size));
|
19076
|
-
}
|
19077
|
-
.c4p--inline-edit .c4p--inline-edit__toolbar--animation {
|
19078
|
-
clip-path: polygon(0 0, -100vw 0, -100vw -100vh, 100vw -100vh, 100vw 0, 100% 0, 100% 100%, 100vw 100%, 100vw 100vh, -100vw 100vh, -100vw 100%, 0 100%);
|
19099
|
+
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
19079
19100
|
}
|
19080
19101
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
|
19081
19102
|
position: absolute;
|
@@ -19119,11 +19140,23 @@ a.bx--side-nav__link--current::before {
|
|
19119
19140
|
border-color: transparent;
|
19120
19141
|
}
|
19121
19142
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
19143
|
+
margin-right: 0;
|
19144
|
+
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
19145
|
+
transition-property: margin, padding;
|
19146
|
+
}
|
19147
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
|
19148
|
+
transition: width 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
19149
|
+
}
|
19150
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
19151
|
+
padding-right: 0;
|
19152
|
+
padding-left: 0;
|
19153
|
+
border-right: 0;
|
19154
|
+
border-left: 0;
|
19122
19155
|
margin-right: calc(-1 * var(--c4p--inline-edit--size));
|
19123
|
-
transition: margin-right 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
19124
19156
|
}
|
19125
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--saveable .c4p--inline-edit__save {
|
19126
|
-
|
19157
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save svg {
|
19158
|
+
overflow: hidden;
|
19159
|
+
width: 0;
|
19127
19160
|
}
|
19128
19161
|
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
|
19129
19162
|
display: inline-flex;
|
@@ -19218,7 +19251,7 @@ a.bx--side-nav__link--current::before {
|
|
19218
19251
|
border-right: 1px solid var(--cds-ui-03, #e0e0e0);
|
19219
19252
|
border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
|
19220
19253
|
margin: 0;
|
19221
|
-
background-color:
|
19254
|
+
background-color: var(--cds-ui-background, #ffffff);
|
19222
19255
|
cursor: cell;
|
19223
19256
|
text-align: left;
|
19224
19257
|
}
|
@@ -19230,9 +19263,22 @@ a.bx--side-nav__link--current::before {
|
|
19230
19263
|
color: var(--cds-text-01, #161616);
|
19231
19264
|
text-align: left;
|
19232
19265
|
}
|
19266
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__cell-editor {
|
19267
|
+
position: absolute;
|
19268
|
+
z-index: 4;
|
19269
|
+
display: none;
|
19270
|
+
padding: 0 var(--cds-spacing-03, 0.5rem);
|
19271
|
+
background-color: var(--cds-ui-background, #ffffff);
|
19272
|
+
resize: none;
|
19273
|
+
}
|
19274
|
+
.c4p--data-spreadsheet .c4p--data-spreadsheet__cell-editor.bx--text-area {
|
19275
|
+
min-width: initial;
|
19276
|
+
min-height: initial;
|
19277
|
+
}
|
19233
19278
|
.c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight {
|
19234
19279
|
position: absolute;
|
19235
19280
|
z-index: 3;
|
19281
|
+
display: none;
|
19236
19282
|
border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
|
19237
19283
|
background-color: transparent;
|
19238
19284
|
}
|