@carbon/ibm-products 1.42.0 → 1.43.0
Sign up to get free protection for your applications and to get access to all the features.
- 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 */
|