@carbon/ibm-products 1.42.0 → 1.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/index-full-carbon.css +161 -26
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +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 +161 -26
- 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 +161 -26
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +1 -1
- package/es/components/AddSelect/AddSelectBody.js +1 -1
- package/es/components/AddSelect/AddSelectColumn.js +1 -1
- package/es/components/Datagrid/Datagrid/Datagrid.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +43 -15
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -19
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +65 -34
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +436 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +8 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +9 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +2 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +3 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +23 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +3 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +55 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +49 -17
- package/es/components/Datagrid/Datagrid.stories/index.js +0 -1
- package/es/components/Datagrid/useFiltering.js +10 -3
- package/es/components/Datagrid/utils/DatagridActions.js +59 -6
- package/lib/components/AddSelect/AddSelect.js +1 -1
- package/lib/components/AddSelect/AddSelectBody.js +1 -1
- package/lib/components/AddSelect/AddSelectColumn.js +1 -1
- package/lib/components/Datagrid/Datagrid/Datagrid.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +43 -15
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +5 -18
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +64 -31
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +445 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +7 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +15 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +20 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +3 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +30 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +21 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +64 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +48 -17
- package/lib/components/Datagrid/Datagrid.stories/index.js +0 -7
- package/lib/components/Datagrid/useFiltering.js +10 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +57 -4
- package/package.json +14 -14
- package/scss/components/Datagrid/styles/_datagrid.scss +25 -18
- package/scss/components/Datagrid/styles/_draggableElement.scss +12 -4
- package/scss/components/Datagrid/styles/_index.scss +1 -0
- package/scss/components/Datagrid/styles/_useExpandedRow.scss +1 -1
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +7 -3
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +5 -1
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +123 -0
- package/scss/components/FilterSummary/_filter-summary.scss +1 -0
- package/scss/components/Tearsheet/_tearsheet.scss +1 -1
- package/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -6
- package/lib/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -13
|
@@ -12403,7 +12403,7 @@ a.bx--side-nav__link--current::before {
|
|
|
12403
12403
|
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
|
12404
12404
|
-webkit-box-orient: vertical;
|
|
12405
12405
|
-webkit-line-clamp: 2;
|
|
12406
|
-
word-break: break-
|
|
12406
|
+
word-break: break-word;
|
|
12407
12407
|
}
|
|
12408
12408
|
@media (min-width: 42rem) {
|
|
12409
12409
|
.c4p--tearsheet .c4p--tearsheet__header-description {
|
|
@@ -13222,6 +13222,7 @@ a.bx--side-nav__link--current::before {
|
|
|
13222
13222
|
.c4p--filter-summary {
|
|
13223
13223
|
display: flex;
|
|
13224
13224
|
width: 100%;
|
|
13225
|
+
height: 3rem;
|
|
13225
13226
|
align-items: center;
|
|
13226
13227
|
padding: var(--cds-spacing-03, 0.5rem);
|
|
13227
13228
|
border-top: 1px solid var(--cds-ui-03, #e0e0e0);
|
|
@@ -21301,12 +21302,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
|
21301
21302
|
flex-direction: row;
|
|
21302
21303
|
}
|
|
21303
21304
|
|
|
21304
|
-
.c4p--datagrid__datagridLeftPanel {
|
|
21305
|
-
display: flex;
|
|
21306
|
-
width: 388px;
|
|
21307
|
-
background-color: var(--cds-ui-01, #f4f4f4);
|
|
21308
|
-
}
|
|
21309
|
-
|
|
21310
21305
|
.c4p--datagrid__leftPanel-position {
|
|
21311
21306
|
display: inherit;
|
|
21312
21307
|
}
|
|
@@ -21314,34 +21309,38 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
|
21314
21309
|
.c4p--datagrid__datagridWithPanel {
|
|
21315
21310
|
position: relative;
|
|
21316
21311
|
display: flex;
|
|
21317
|
-
width: 100%;
|
|
21318
21312
|
height: 100%;
|
|
21319
21313
|
flex-direction: column;
|
|
21320
21314
|
}
|
|
21321
21315
|
.c4p--datagrid__datagridWithPanel .c4p--datagrid__grid-container {
|
|
21322
21316
|
display: flex;
|
|
21323
|
-
overflow:
|
|
21317
|
+
overflow: visible;
|
|
21324
21318
|
flex-direction: column;
|
|
21325
21319
|
}
|
|
21326
|
-
.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-toolbar {
|
|
21327
|
-
width: 100%;
|
|
21328
|
-
}
|
|
21329
|
-
.c4p--datagrid__datagridWithPanel .c4p--datagrid__datagridLeftPanel {
|
|
21330
|
-
flex: 0 0 auto;
|
|
21331
|
-
}
|
|
21332
21320
|
.c4p--datagrid__datagridWithPanel .bx--data-table-content {
|
|
21333
21321
|
flex: 1 1 0%;
|
|
21334
21322
|
}
|
|
21335
21323
|
.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
|
|
21324
|
+
display: flex;
|
|
21325
|
+
overflow: visible;
|
|
21326
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
|
21327
|
+
}
|
|
21328
|
+
.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container-inner {
|
|
21336
21329
|
overflow: hidden;
|
|
21330
|
+
flex: 1;
|
|
21331
|
+
}
|
|
21332
|
+
.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
|
|
21333
|
+
border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
|
|
21334
|
+
}
|
|
21335
|
+
.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
|
|
21336
|
+
height: 100%;
|
|
21337
21337
|
}
|
|
21338
21338
|
|
|
21339
21339
|
.c4p--datagrid__table-container {
|
|
21340
21340
|
position: relative;
|
|
21341
|
-
display: flex;
|
|
21342
|
-
overflow: auto;
|
|
21343
21341
|
width: 100%;
|
|
21344
21342
|
max-height: 100%;
|
|
21343
|
+
overflow-y: scroll;
|
|
21345
21344
|
}
|
|
21346
21345
|
|
|
21347
21346
|
.c4p--datagrid__carbon-row-expanded {
|
|
@@ -21503,6 +21502,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
|
21503
21502
|
width: 100%;
|
|
21504
21503
|
}
|
|
21505
21504
|
|
|
21505
|
+
.c4p--datagrid__table-toolbar--sm .c4p--filter-summary,
|
|
21506
|
+
.c4p--datagrid__table-toolbar--xs .c4p--filter-summary {
|
|
21507
|
+
padding: 0 var(--cds-spacing-03, 0.5rem);
|
|
21508
|
+
}
|
|
21509
|
+
|
|
21506
21510
|
/*
|
|
21507
21511
|
* Licensed Materials - Property of IBM
|
|
21508
21512
|
* 5724-Q36
|
|
@@ -21769,7 +21773,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
|
21769
21773
|
.c4p--datagrid__customize-columns-checkbox-wrapper {
|
|
21770
21774
|
display: flex;
|
|
21771
21775
|
justify-content: center;
|
|
21772
|
-
padding-left: var(--cds-spacing-
|
|
21776
|
+
padding-left: var(--cds-spacing-02, 0.25rem);
|
|
21777
|
+
}
|
|
21778
|
+
|
|
21779
|
+
.c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.bx--form-item {
|
|
21773
21780
|
margin-bottom: 0;
|
|
21774
21781
|
}
|
|
21775
21782
|
|
|
@@ -21898,6 +21905,123 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
|
21898
21905
|
margin-bottom: 0;
|
|
21899
21906
|
}
|
|
21900
21907
|
|
|
21908
|
+
/*
|
|
21909
|
+
* Licensed Materials - Property of IBM
|
|
21910
|
+
* 5724-Q36
|
|
21911
|
+
* (c) Copyright IBM Corp. 2022
|
|
21912
|
+
* US Government Users Restricted Rights - Use, duplication or disclosure
|
|
21913
|
+
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
21914
|
+
*/
|
|
21915
|
+
.c4p--datagrid-filter-panel__container {
|
|
21916
|
+
position: relative;
|
|
21917
|
+
width: 20rem;
|
|
21918
|
+
height: clamp(var(--filter-panel-min-height), 100%, 100vh);
|
|
21919
|
+
border-top: 1px var(--cds-ui-03, #e0e0e0) solid;
|
|
21920
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
|
21921
|
+
}
|
|
21922
|
+
|
|
21923
|
+
.c4p--datagrid-filter-panel--open {
|
|
21924
|
+
border-right: 1px var(--cds-ui-03, #e0e0e0) solid;
|
|
21925
|
+
}
|
|
21926
|
+
|
|
21927
|
+
.c4p--datagrid-filter-panel__container::before {
|
|
21928
|
+
position: absolute;
|
|
21929
|
+
top: -1px;
|
|
21930
|
+
left: 0;
|
|
21931
|
+
display: block;
|
|
21932
|
+
width: 2.9375rem;
|
|
21933
|
+
height: 1px;
|
|
21934
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
|
21935
|
+
content: "";
|
|
21936
|
+
}
|
|
21937
|
+
|
|
21938
|
+
.c4p--datagrid-filter-panel__inner-container {
|
|
21939
|
+
position: relative;
|
|
21940
|
+
z-index: 0;
|
|
21941
|
+
overflow: auto;
|
|
21942
|
+
padding: 0 var(--cds-spacing-05, 1rem);
|
|
21943
|
+
overscroll-behavior: contain;
|
|
21944
|
+
}
|
|
21945
|
+
|
|
21946
|
+
.c4p--datagrid-filter-panel__inner-container .c4p--datagrid-filter-panel__category:last-of-type {
|
|
21947
|
+
padding-bottom: var(--cds-spacing-11, 5rem);
|
|
21948
|
+
}
|
|
21949
|
+
|
|
21950
|
+
.c4p--datagrid-filter-panel {
|
|
21951
|
+
position: sticky;
|
|
21952
|
+
top: 0;
|
|
21953
|
+
}
|
|
21954
|
+
|
|
21955
|
+
.c4p--datagrid-filter-panel__heading {
|
|
21956
|
+
display: flex;
|
|
21957
|
+
justify-content: space-between;
|
|
21958
|
+
padding-left: var(--cds-spacing-05, 1rem);
|
|
21959
|
+
border-bottom: 1px solid transparent;
|
|
21960
|
+
}
|
|
21961
|
+
|
|
21962
|
+
.c4p--datagrid-filter-panel__heading--with-divider {
|
|
21963
|
+
border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
|
|
21964
|
+
}
|
|
21965
|
+
|
|
21966
|
+
.c4p--datagrid-filter-panel__title {
|
|
21967
|
+
padding: var(--cds-spacing-05, 1rem) 0;
|
|
21968
|
+
font-size: var(--cds-productive-heading-02-font-size, 1rem);
|
|
21969
|
+
font-weight: var(--cds-productive-heading-02-font-weight, 600);
|
|
21970
|
+
line-height: var(--cds-productive-heading-02-line-height, 1.375);
|
|
21971
|
+
letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
|
|
21972
|
+
}
|
|
21973
|
+
|
|
21974
|
+
.c4p--datagrid-filter-panel__search {
|
|
21975
|
+
padding: 0 var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem);
|
|
21976
|
+
}
|
|
21977
|
+
|
|
21978
|
+
.c4p--datagrid-filter-panel__category-title {
|
|
21979
|
+
font-size: var(--cds-heading-01-font-size, 0.875rem);
|
|
21980
|
+
font-weight: var(--cds-heading-01-font-weight, 600);
|
|
21981
|
+
line-height: var(--cds-heading-01-line-height, 1.42857);
|
|
21982
|
+
letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
|
|
21983
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
|
21984
|
+
color: var(--cds-text-02, #525252);
|
|
21985
|
+
}
|
|
21986
|
+
|
|
21987
|
+
.c4p--datagrid-filter-panel__category {
|
|
21988
|
+
padding-bottom: var(--cds-spacing-06, 1.5rem);
|
|
21989
|
+
}
|
|
21990
|
+
|
|
21991
|
+
.c4p--datagrid-filter-panel__category > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
|
|
21992
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
|
21993
|
+
}
|
|
21994
|
+
|
|
21995
|
+
.c4p--datagrid-filter-panel__action-set {
|
|
21996
|
+
position: sticky;
|
|
21997
|
+
z-index: 1;
|
|
21998
|
+
bottom: 0;
|
|
21999
|
+
height: 4rem;
|
|
22000
|
+
margin-top: auto;
|
|
22001
|
+
}
|
|
22002
|
+
|
|
22003
|
+
.c4p--datagrid-filter-panel__container .bx--accordion__title {
|
|
22004
|
+
margin: 0;
|
|
22005
|
+
}
|
|
22006
|
+
|
|
22007
|
+
.c4p--datagrid-filter-panel__container .bx--accordion__arrow {
|
|
22008
|
+
margin: var(--cds-spacing-01, 0.125rem) 0 0;
|
|
22009
|
+
}
|
|
22010
|
+
|
|
22011
|
+
.c4p--datagrid-filter-panel__container .bx--accordion__content {
|
|
22012
|
+
padding-right: 0;
|
|
22013
|
+
padding-left: 0;
|
|
22014
|
+
}
|
|
22015
|
+
|
|
22016
|
+
.c4p--datagrid-filter-panel__container .bx--accordion__content > *:not(:last-child) {
|
|
22017
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
|
22018
|
+
}
|
|
22019
|
+
|
|
22020
|
+
.bx--btn.c4p--datagrid-filter-panel-open-button {
|
|
22021
|
+
border-right: 1px solid var(--cds-ui-03, #e0e0e0);
|
|
22022
|
+
border-bottom: none;
|
|
22023
|
+
}
|
|
22024
|
+
|
|
21901
22025
|
/*
|
|
21902
22026
|
* Licensed Materials - Property of IBM
|
|
21903
22027
|
* 5724-Q36
|
|
@@ -21934,7 +22058,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
21934
22058
|
*/
|
|
21935
22059
|
.c4p--datagrid .c4p--datagrid__expanded-row-content {
|
|
21936
22060
|
position: relative;
|
|
21937
|
-
padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem) var(--cds-spacing-
|
|
22061
|
+
padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem) var(--cds-spacing-10, 4rem);
|
|
21938
22062
|
}
|
|
21939
22063
|
|
|
21940
22064
|
.c4p--datagrid .c4p--datagrid__expanded-row-content::before {
|
|
@@ -21987,13 +22111,12 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
21987
22111
|
}
|
|
21988
22112
|
|
|
21989
22113
|
.c4p--datagrid__draggable-handleStyle.disabled svg {
|
|
21990
|
-
fill: var(--cds-disabled-
|
|
22114
|
+
fill: var(--cds-disabled-03, #8d8d8d);
|
|
21991
22115
|
}
|
|
21992
22116
|
|
|
21993
22117
|
.c4p--datagrid__draggable-handleHolder {
|
|
21994
22118
|
display: flex;
|
|
21995
22119
|
height: var(--cds-spacing-09, 3rem);
|
|
21996
|
-
padding-left: var(--cds-spacing-05, 1rem);
|
|
21997
22120
|
border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
|
|
21998
22121
|
background-color: var(--cds-layer, #f4f4f4);
|
|
21999
22122
|
}
|
|
@@ -22005,7 +22128,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
22005
22128
|
.c4p--datagrid__draggable-handleHolder-selected {
|
|
22006
22129
|
display: flex;
|
|
22007
22130
|
height: var(--cds-spacing-09, 3rem);
|
|
22008
|
-
padding-left: var(--cds-spacing-05, 1rem);
|
|
22009
22131
|
border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
|
|
22010
22132
|
background-color: var(--cds-layer-selected, #e0e0e0);
|
|
22011
22133
|
}
|
|
@@ -22016,13 +22138,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
22016
22138
|
|
|
22017
22139
|
.c4p--datagrid__draggable-handleHolder-isOver {
|
|
22018
22140
|
border: 2px dashed var(--cds-focus, #0f62fe);
|
|
22019
|
-
|
|
22141
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
|
22142
|
+
background-color: #edf5ff;
|
|
22020
22143
|
}
|
|
22021
22144
|
|
|
22022
22145
|
.c4p--datagrid__draggable-handleHolder-droppable {
|
|
22023
22146
|
display: flex;
|
|
22024
22147
|
width: 100%;
|
|
22025
22148
|
align-items: center;
|
|
22149
|
+
padding-left: var(--cds-spacing-05, 1rem);
|
|
22150
|
+
/* stylelint-disable-next-line carbon/type-token-use */
|
|
22151
|
+
line-height: 1;
|
|
22152
|
+
transition-property: opacity;
|
|
22153
|
+
}
|
|
22154
|
+
|
|
22155
|
+
.c4p--datagrid__draggable-handleHolder-droppable.c4p--datagrid__draggable-handleHolder-droppable--origin {
|
|
22156
|
+
opacity: 0.5;
|
|
22157
|
+
transition: opacity 150ms cubic-bezier(0, 0, 0.38, 0.9);
|
|
22026
22158
|
}
|
|
22027
22159
|
|
|
22028
22160
|
.c4p--datagrid__draggable-handleHolder-grabbed {
|
|
@@ -22195,14 +22327,17 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
22195
22327
|
color: var(--cds-text-01, #161616);
|
|
22196
22328
|
}
|
|
22197
22329
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
|
|
22198
|
-
|
|
22330
|
+
color: var(--cds-icon-01, #161616);
|
|
22199
22331
|
}
|
|
22200
22332
|
|
|
22201
22333
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
|
|
22202
|
-
background-color: var(--cds-
|
|
22203
|
-
color: var(--cds-text-
|
|
22334
|
+
background-color: var(--cds-field-01, #f4f4f4);
|
|
22335
|
+
color: var(--cds-text-02, #525252);
|
|
22204
22336
|
cursor: text;
|
|
22205
22337
|
}
|
|
22338
|
+
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) .c4p--datagrid__inline-edit-button-icon {
|
|
22339
|
+
color: var(--cds-icon-02, #525252);
|
|
22340
|
+
}
|
|
22206
22341
|
|
|
22207
22342
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
|
|
22208
22343
|
/* stylelint-disable-next-line carbon/theme-token-use */
|