@carbon/ibm-products 1.32.1 → 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 +132 -13
- 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 +132 -13
- 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 +132 -13
- 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 +4 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +29 -6
- 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/utils/getInlineEditColumns.js +25 -7
- package/es/components/Datagrid/utils/makeData.js +10 -1
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +4 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +28 -4
- 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/utils/getInlineEditColumns.js +25 -7
- package/lib/components/Datagrid/utils/makeData.js +10 -1
- package/package.json +2 -2
- 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 +177 -2
- package/scss/components/InlineEdit/_inline-edit.scss +4 -2
@@ -19131,8 +19131,12 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
19131
19131
|
.c4p--inline-edit .c4p--inline-edit__input {
|
19132
19132
|
display: inline-block;
|
19133
19133
|
overflow: hidden;
|
19134
|
-
width: calc(
|
19135
|
-
|
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
|
+
);
|
19136
19140
|
min-height: var(--c4p--inline-edit--size);
|
19137
19141
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
19138
19142
|
margin-right: var(--c4p--inline-edit--toolbar-width);
|
@@ -19968,11 +19972,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
19968
19972
|
height: var(--cds-spacing-09, 3rem);
|
19969
19973
|
}
|
19970
19974
|
|
19971
|
-
.c4p--datagrid .c4p--datagrid__table-grid-active {
|
19972
|
-
border: 2px solid var(--cds-inverse-link, #78a9ff);
|
19973
|
-
outline: 0;
|
19974
|
-
}
|
19975
|
-
|
19976
19975
|
/*
|
19977
19976
|
* Licensed Materials - Property of IBM
|
19978
19977
|
* 5724-Q36
|
@@ -20464,7 +20463,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20464
20463
|
|
20465
20464
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::before,
|
20466
20465
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::after {
|
20467
|
-
height: 1.25rem;
|
20466
|
+
height: calc(1.5rem - 0.25rem);
|
20468
20467
|
}
|
20469
20468
|
|
20470
20469
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs.bx--list-box {
|
@@ -20480,7 +20479,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20480
20479
|
|
20481
20480
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::before,
|
20482
20481
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::after {
|
20483
|
-
height:
|
20482
|
+
height: calc(2rem - 0.25rem);
|
20484
20483
|
}
|
20485
20484
|
|
20486
20485
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm.bx--list-box {
|
@@ -20496,7 +20495,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20496
20495
|
|
20497
20496
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::before,
|
20498
20497
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::after {
|
20499
|
-
height: 2.25rem;
|
20498
|
+
height: calc(2.5rem - 0.25rem);
|
20500
20499
|
}
|
20501
20500
|
|
20502
20501
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md.bx--list-box {
|
@@ -20512,7 +20511,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20512
20511
|
|
20513
20512
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::before,
|
20514
20513
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::after {
|
20515
|
-
height:
|
20514
|
+
height: calc(3rem - 0.25rem);
|
20516
20515
|
}
|
20517
20516
|
|
20518
20517
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg.bx--list-box {
|
@@ -20528,13 +20527,17 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20528
20527
|
|
20529
20528
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::before,
|
20530
20529
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::after {
|
20531
|
-
height:
|
20530
|
+
height: calc(4rem - 0.25rem);
|
20532
20531
|
}
|
20533
20532
|
|
20534
20533
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl.bx--list-box {
|
20535
20534
|
max-height: none;
|
20536
20535
|
}
|
20537
20536
|
|
20537
|
+
.c4p--datagrid {
|
20538
|
+
--c4p--datagrid--grid-header-height: 0;
|
20539
|
+
}
|
20540
|
+
|
20538
20541
|
.c4p--datagrid__inline-edit-cell {
|
20539
20542
|
display: flex;
|
20540
20543
|
height: 100%;
|
@@ -20553,6 +20556,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20553
20556
|
|
20554
20557
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
|
20555
20558
|
position: relative;
|
20559
|
+
z-index: 2;
|
20556
20560
|
display: flex;
|
20557
20561
|
width: 100%;
|
20558
20562
|
height: 100%;
|
@@ -20569,6 +20573,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20569
20573
|
}
|
20570
20574
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
|
20571
20575
|
padding-left: 0;
|
20576
|
+
cursor: default;
|
20572
20577
|
}
|
20573
20578
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
|
20574
20579
|
height: var(--cds-spacing-05, 1rem);
|
@@ -20678,11 +20683,125 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20678
20683
|
white-space: nowrap;
|
20679
20684
|
}
|
20680
20685
|
|
20681
|
-
.bx--data-table .c4p--datagrid__carbon-row-hover-active td {
|
20686
|
+
.c4p--datagrid .bx--data-table .c4p--datagrid__carbon-row-hover-active td {
|
20682
20687
|
border-top-color: var(--cds-hover-ui, #e5e5e5);
|
20683
20688
|
background-color: var(--cds-hover-ui, #e5e5e5);
|
20684
20689
|
}
|
20685
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
|
+
|
20686
20805
|
.c4p--datagrid__datagridWrap {
|
20687
20806
|
display: block;
|
20688
20807
|
width: 100%;
|