@carbon/ibm-products 1.32.0 → 1.33.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +145 -12
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +5 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +6 -2
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +5 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +141 -12
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +5 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +141 -12
- package/css/index.css.map +1 -1
- package/css/index.min.css +5 -1
- package/css/index.min.css.map +1 -1
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
- package/es/components/Datagrid/Datagrid/DatagridContent.js +57 -30
- package/es/components/Datagrid/Datagrid/DatagridRow.js +10 -2
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +84 -38
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +21 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
- package/es/components/Datagrid/utils/getInlineEditColumns.js +25 -7
- package/es/components/Datagrid/utils/makeData.js +34 -5
- package/es/components/InlineEdit/InlineEdit.js +7 -7
- package/es/components/OptionsTile/OptionsTile.js +4 -2
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +56 -28
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +19 -2
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +84 -38
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +22 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
- package/lib/components/Datagrid/utils/getInlineEditColumns.js +25 -7
- package/lib/components/Datagrid/utils/makeData.js +35 -5
- package/lib/components/InlineEdit/InlineEdit.js +7 -7
- package/lib/components/OptionsTile/OptionsTile.js +4 -2
- package/package.json +12 -12
- package/scss/components/Datagrid/_storybook-styles.scss +7 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +0 -5
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +182 -1
- package/scss/components/InlineEdit/_inline-edit.scss +4 -2
- package/scss/components/OptionsTile/_options-tile.scss +4 -0
@@ -18938,6 +18938,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
18938
18938
|
}
|
18939
18939
|
|
18940
18940
|
.c4p--options-tile__heading {
|
18941
|
+
overflow: hidden;
|
18941
18942
|
grid-column: 2;
|
18942
18943
|
}
|
18943
18944
|
|
@@ -18946,7 +18947,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
18946
18947
|
font-weight: var(--cds-productive-heading-01-font-weight, 600);
|
18947
18948
|
line-height: var(--cds-productive-heading-01-line-height, 1.28572);
|
18948
18949
|
letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
|
18950
|
+
overflow: hidden;
|
18949
18951
|
color: var(--cds-text-01, #161616);
|
18952
|
+
text-overflow: ellipsis;
|
18953
|
+
white-space: nowrap;
|
18950
18954
|
}
|
18951
18955
|
|
18952
18956
|
.c4p--options-tile__summary {
|
@@ -19127,8 +19131,12 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
19127
19131
|
.c4p--inline-edit .c4p--inline-edit__input {
|
19128
19132
|
display: inline-block;
|
19129
19133
|
overflow: hidden;
|
19130
|
-
width: calc(
|
19131
|
-
|
19134
|
+
width: calc(
|
19135
|
+
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
19136
|
+
);
|
19137
|
+
max-width: calc(
|
19138
|
+
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
19139
|
+
);
|
19132
19140
|
min-height: var(--c4p--inline-edit--size);
|
19133
19141
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
19134
19142
|
margin-right: var(--c4p--inline-edit--toolbar-width);
|
@@ -19964,11 +19972,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
19964
19972
|
height: var(--cds-spacing-09, 3rem);
|
19965
19973
|
}
|
19966
19974
|
|
19967
|
-
.c4p--datagrid .c4p--datagrid__table-grid-active {
|
19968
|
-
border: 2px solid var(--cds-inverse-link, #78a9ff);
|
19969
|
-
outline: 0;
|
19970
|
-
}
|
19971
|
-
|
19972
19975
|
/*
|
19973
19976
|
* Licensed Materials - Property of IBM
|
19974
19977
|
* 5724-Q36
|
@@ -20460,7 +20463,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20460
20463
|
|
20461
20464
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::before,
|
20462
20465
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::after {
|
20463
|
-
height: 1.25rem;
|
20466
|
+
height: calc(1.5rem - 0.25rem);
|
20464
20467
|
}
|
20465
20468
|
|
20466
20469
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs.bx--list-box {
|
@@ -20476,7 +20479,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20476
20479
|
|
20477
20480
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::before,
|
20478
20481
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::after {
|
20479
|
-
height:
|
20482
|
+
height: calc(2rem - 0.25rem);
|
20480
20483
|
}
|
20481
20484
|
|
20482
20485
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm.bx--list-box {
|
@@ -20492,7 +20495,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20492
20495
|
|
20493
20496
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::before,
|
20494
20497
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::after {
|
20495
|
-
height: 2.25rem;
|
20498
|
+
height: calc(2.5rem - 0.25rem);
|
20496
20499
|
}
|
20497
20500
|
|
20498
20501
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md.bx--list-box {
|
@@ -20508,7 +20511,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20508
20511
|
|
20509
20512
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::before,
|
20510
20513
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::after {
|
20511
|
-
height:
|
20514
|
+
height: calc(3rem - 0.25rem);
|
20512
20515
|
}
|
20513
20516
|
|
20514
20517
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg.bx--list-box {
|
@@ -20524,13 +20527,17 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20524
20527
|
|
20525
20528
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::before,
|
20526
20529
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::after {
|
20527
|
-
height:
|
20530
|
+
height: calc(4rem - 0.25rem);
|
20528
20531
|
}
|
20529
20532
|
|
20530
20533
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl.bx--list-box {
|
20531
20534
|
max-height: none;
|
20532
20535
|
}
|
20533
20536
|
|
20537
|
+
.c4p--datagrid {
|
20538
|
+
--c4p--datagrid--grid-header-height: 0;
|
20539
|
+
}
|
20540
|
+
|
20534
20541
|
.c4p--datagrid__inline-edit-cell {
|
20535
20542
|
display: flex;
|
20536
20543
|
height: 100%;
|
@@ -20549,6 +20556,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20549
20556
|
|
20550
20557
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
|
20551
20558
|
position: relative;
|
20559
|
+
z-index: 2;
|
20552
20560
|
display: flex;
|
20553
20561
|
width: 100%;
|
20554
20562
|
height: 100%;
|
@@ -20560,10 +20568,12 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20560
20568
|
outline: 0;
|
20561
20569
|
}
|
20562
20570
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
|
20571
|
+
height: var(--cds-spacing-05, 1rem);
|
20563
20572
|
padding-right: var(--cds-spacing-05, 1rem);
|
20564
20573
|
}
|
20565
20574
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
|
20566
20575
|
padding-left: 0;
|
20576
|
+
cursor: default;
|
20567
20577
|
}
|
20568
20578
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
|
20569
20579
|
height: var(--cds-spacing-05, 1rem);
|
@@ -20673,6 +20683,125 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20673
20683
|
white-space: nowrap;
|
20674
20684
|
}
|
20675
20685
|
|
20686
|
+
.c4p--datagrid .bx--data-table .c4p--datagrid__carbon-row-hover-active td {
|
20687
|
+
border-top-color: var(--cds-hover-ui, #e5e5e5);
|
20688
|
+
background-color: var(--cds-hover-ui, #e5e5e5);
|
20689
|
+
}
|
20690
|
+
|
20691
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
|
20692
|
+
position: absolute;
|
20693
|
+
z-index: 2;
|
20694
|
+
bottom: 0;
|
20695
|
+
left: 0;
|
20696
|
+
width: 2px;
|
20697
|
+
height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
|
20698
|
+
background-color: var(--cds-inverse-link, #78a9ff);
|
20699
|
+
content: "";
|
20700
|
+
}
|
20701
|
+
|
20702
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
|
20703
|
+
position: absolute;
|
20704
|
+
z-index: 2;
|
20705
|
+
right: 0;
|
20706
|
+
bottom: 0;
|
20707
|
+
width: 2px;
|
20708
|
+
height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
|
20709
|
+
background-color: var(--cds-inverse-link, #78a9ff);
|
20710
|
+
content: "";
|
20711
|
+
}
|
20712
|
+
|
20713
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active .bx--data-table-content::before {
|
20714
|
+
position: absolute;
|
20715
|
+
z-index: 2;
|
20716
|
+
top: 0;
|
20717
|
+
right: 0;
|
20718
|
+
left: 0;
|
20719
|
+
width: var(--c4p--datagrid--grid-width);
|
20720
|
+
height: 2px;
|
20721
|
+
background-color: var(--cds-inverse-link, #78a9ff);
|
20722
|
+
}
|
20723
|
+
|
20724
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
|
20725
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
|
20726
|
+
height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
|
20727
|
+
}
|
20728
|
+
|
20729
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
|
20730
|
+
outline: 2px solid var(--cds-inverse-link, #78a9ff);
|
20731
|
+
outline-offset: -2px;
|
20732
|
+
}
|
20733
|
+
|
20734
|
+
.c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
|
20735
|
+
padding-top: var(--cds-spacing-01, 0.125rem);
|
20736
|
+
}
|
20737
|
+
|
20738
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .bx--form-requirement,
|
20739
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .bx--form-requirement {
|
20740
|
+
position: absolute;
|
20741
|
+
z-index: 3;
|
20742
|
+
top: calc(100% - var(--cds-spacing-01, 0.125rem));
|
20743
|
+
width: 100%;
|
20744
|
+
padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-06, 1.5rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-03, 0.5rem);
|
20745
|
+
margin: 0;
|
20746
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
20747
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-danger-02, #da1e28);
|
20748
|
+
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
20749
|
+
}
|
20750
|
+
|
20751
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--list-box[data-invalid]:focus-within ~ .bx--form-requirement {
|
20752
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
|
20753
|
+
}
|
20754
|
+
|
20755
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--list-box__invalid-icon,
|
20756
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--text-input__invalid-icon,
|
20757
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__invalid {
|
20758
|
+
z-index: 4;
|
20759
|
+
top: calc(100% + var(--cds-spacing-04, 0.75rem) + var(--cds-spacing-01, 0.125rem));
|
20760
|
+
right: var(--cds-spacing-03, 0.5rem);
|
20761
|
+
}
|
20762
|
+
|
20763
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__invalid {
|
20764
|
+
top: calc(100% + var(--cds-spacing-02, 0.25rem) + var(--cds-spacing-01, 0.125rem));
|
20765
|
+
}
|
20766
|
+
|
20767
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::before {
|
20768
|
+
position: absolute;
|
20769
|
+
top: 0;
|
20770
|
+
left: var(--cds-spacing-01, 0.125rem);
|
20771
|
+
width: calc(100% - (var(--cds-spacing-01, 0.125rem) * 2));
|
20772
|
+
height: var(--cds-spacing-01, 0.125rem);
|
20773
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
20774
|
+
content: "";
|
20775
|
+
}
|
20776
|
+
|
20777
|
+
.c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::after {
|
20778
|
+
position: absolute;
|
20779
|
+
top: var(--cds-spacing-01, 0.125rem);
|
20780
|
+
left: var(--cds-spacing-03, 0.5rem);
|
20781
|
+
width: calc(100% - (var(--cds-spacing-03, 0.5rem) * 2));
|
20782
|
+
height: 1px;
|
20783
|
+
background-color: var(--cds-ui-03, #e0e0e0);
|
20784
|
+
content: "";
|
20785
|
+
}
|
20786
|
+
|
20787
|
+
.c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::before {
|
20788
|
+
background-color: var(--cds-ui-03, #e0e0e0);
|
20789
|
+
}
|
20790
|
+
.c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::after {
|
20791
|
+
background-color: transparent;
|
20792
|
+
}
|
20793
|
+
|
20794
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--text-input:focus,
|
20795
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number]:focus,
|
20796
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number]:focus ~ .bx--number__controls .bx--number__control-btn:hover,
|
20797
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__control-btn:focus {
|
20798
|
+
outline-color: var(--cds-support-01, #da1e28);
|
20799
|
+
}
|
20800
|
+
|
20801
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number][data-invalid]:focus ~ .bx--number__controls .bx--number__control-btn.up-icon::after {
|
20802
|
+
background-color: var(--cds-support-01, #da1e28);
|
20803
|
+
}
|
20804
|
+
|
20676
20805
|
.c4p--datagrid__datagridWrap {
|
20677
20806
|
display: block;
|
20678
20807
|
width: 100%;
|
@@ -27452,6 +27581,10 @@ button.bx--dropdown-text:focus {
|
|
27452
27581
|
background-color: transparent;
|
27453
27582
|
}
|
27454
27583
|
|
27584
|
+
.bx--multi-select:not(.bx--list-box--expanded) .bx--list-box__menu {
|
27585
|
+
visibility: hidden;
|
27586
|
+
}
|
27587
|
+
|
27455
27588
|
.bx--inline-notification {
|
27456
27589
|
position: relative;
|
27457
27590
|
display: flex;
|