@carbon/ibm-products 1.42.1 → 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 +154 -24
- 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.css +154 -24
- 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 +154 -24
- 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 +2 -18
- 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 +2 -17
- 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 +2 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +18 -18
- package/scss/components/Datagrid/styles/_draggableElement.scss +12 -4
- package/scss/components/Datagrid/styles/_index.scss +1 -0
- 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/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -6
- package/lib/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -13
@@ -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 {
|
@@ -21774,7 +21773,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
21774
21773
|
.c4p--datagrid__customize-columns-checkbox-wrapper {
|
21775
21774
|
display: flex;
|
21776
21775
|
justify-content: center;
|
21777
|
-
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 {
|
21778
21780
|
margin-bottom: 0;
|
21779
21781
|
}
|
21780
21782
|
|
@@ -21903,6 +21905,123 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
21903
21905
|
margin-bottom: 0;
|
21904
21906
|
}
|
21905
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
|
+
|
21906
22025
|
/*
|
21907
22026
|
* Licensed Materials - Property of IBM
|
21908
22027
|
* 5724-Q36
|
@@ -21992,13 +22111,12 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
21992
22111
|
}
|
21993
22112
|
|
21994
22113
|
.c4p--datagrid__draggable-handleStyle.disabled svg {
|
21995
|
-
fill: var(--cds-disabled-
|
22114
|
+
fill: var(--cds-disabled-03, #8d8d8d);
|
21996
22115
|
}
|
21997
22116
|
|
21998
22117
|
.c4p--datagrid__draggable-handleHolder {
|
21999
22118
|
display: flex;
|
22000
22119
|
height: var(--cds-spacing-09, 3rem);
|
22001
|
-
padding-left: var(--cds-spacing-05, 1rem);
|
22002
22120
|
border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
|
22003
22121
|
background-color: var(--cds-layer, #f4f4f4);
|
22004
22122
|
}
|
@@ -22010,7 +22128,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
22010
22128
|
.c4p--datagrid__draggable-handleHolder-selected {
|
22011
22129
|
display: flex;
|
22012
22130
|
height: var(--cds-spacing-09, 3rem);
|
22013
|
-
padding-left: var(--cds-spacing-05, 1rem);
|
22014
22131
|
border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
|
22015
22132
|
background-color: var(--cds-layer-selected, #e0e0e0);
|
22016
22133
|
}
|
@@ -22021,13 +22138,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
22021
22138
|
|
22022
22139
|
.c4p--datagrid__draggable-handleHolder-isOver {
|
22023
22140
|
border: 2px dashed var(--cds-focus, #0f62fe);
|
22024
|
-
|
22141
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
22142
|
+
background-color: #edf5ff;
|
22025
22143
|
}
|
22026
22144
|
|
22027
22145
|
.c4p--datagrid__draggable-handleHolder-droppable {
|
22028
22146
|
display: flex;
|
22029
22147
|
width: 100%;
|
22030
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);
|
22031
22158
|
}
|
22032
22159
|
|
22033
22160
|
.c4p--datagrid__draggable-handleHolder-grabbed {
|
@@ -22200,14 +22327,17 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
22200
22327
|
color: var(--cds-text-01, #161616);
|
22201
22328
|
}
|
22202
22329
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
|
22203
|
-
|
22330
|
+
color: var(--cds-icon-01, #161616);
|
22204
22331
|
}
|
22205
22332
|
|
22206
22333
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
|
22207
|
-
background-color: var(--cds-
|
22208
|
-
color: var(--cds-text-
|
22334
|
+
background-color: var(--cds-field-01, #f4f4f4);
|
22335
|
+
color: var(--cds-text-02, #525252);
|
22209
22336
|
cursor: text;
|
22210
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
|
+
}
|
22211
22341
|
|
22212
22342
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
|
22213
22343
|
/* stylelint-disable-next-line carbon/theme-token-use */
|