@carbon/ibm-products 2.0.0-rc.18 → 2.0.0-rc.19
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +135 -20
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +135 -20
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +134 -20
- 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/Datagrid/Datagrid/Datagrid.js +4 -4
- package/es/components/Datagrid/Datagrid/DatagridContent.js +46 -16
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +3 -21
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +120 -60
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +514 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +10 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +9 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +9 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +4 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +38 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +25 -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 +53 -19
- package/es/components/Datagrid/Datagrid.stories/index.js +0 -1
- package/es/components/Datagrid/useFiltering.js +11 -4
- package/es/components/Datagrid/utils/DatagridActions.js +41 -13
- package/es/components/OptionsTile/OptionsTile.js +3 -3
- package/es/components/Tearsheet/Tearsheet.js +5 -0
- package/es/components/Tearsheet/TearsheetNarrow.js +5 -0
- package/es/components/Tearsheet/TearsheetShell.js +1 -1
- package/lib/components/Datagrid/Datagrid/Datagrid.js +4 -4
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +48 -15
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +2 -23
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +113 -51
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +538 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +9 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +15 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +31 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +5 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +50 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +35 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +23 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +67 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +53 -18
- package/lib/components/Datagrid/Datagrid.stories/index.js +0 -8
- package/lib/components/Datagrid/useFiltering.js +11 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +41 -11
- package/lib/components/OptionsTile/OptionsTile.js +2 -2
- package/lib/components/Tearsheet/Tearsheet.js +5 -0
- package/lib/components/Tearsheet/TearsheetNarrow.js +5 -0
- package/lib/components/Tearsheet/TearsheetShell.js +1 -1
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +16 -17
- package/scss/components/Datagrid/styles/_index.scss +1 -0
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +129 -0
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +3 -3
- 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
@@ -4082,6 +4082,7 @@
|
|
4082
4082
|
.c4p--filter-summary {
|
4083
4083
|
display: flex;
|
4084
4084
|
width: 100%;
|
4085
|
+
height: rem(48px);
|
4085
4086
|
align-items: center;
|
4086
4087
|
padding: 0.5rem;
|
4087
4088
|
border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
|
@@ -10586,39 +10587,35 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10586
10587
|
flex-direction: row;
|
10587
10588
|
}
|
10588
10589
|
|
10589
|
-
.c4p--
|
10590
|
-
|
10591
|
-
|
10592
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
10593
|
-
}
|
10594
|
-
|
10595
|
-
.c4p--datagrid__leftPanel-position {
|
10596
|
-
display: inherit;
|
10590
|
+
.c4p--datagrid__table-container-inner {
|
10591
|
+
overflow: hidden;
|
10592
|
+
flex: 1;
|
10597
10593
|
}
|
10598
10594
|
|
10599
10595
|
.c4p--datagrid__datagridWithPanel {
|
10600
10596
|
position: relative;
|
10601
10597
|
display: flex;
|
10602
|
-
width: 100%;
|
10603
10598
|
height: 100%;
|
10604
10599
|
flex-direction: column;
|
10605
10600
|
}
|
10606
10601
|
.c4p--datagrid__datagridWithPanel .c4p--datagrid__grid-container {
|
10607
10602
|
display: flex;
|
10608
|
-
overflow:
|
10603
|
+
overflow: visible;
|
10609
10604
|
flex-direction: column;
|
10610
10605
|
}
|
10611
10606
|
.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-toolbar {
|
10612
10607
|
width: 100%;
|
10613
10608
|
}
|
10614
|
-
.c4p--datagrid__datagridWithPanel .c4p--
|
10615
|
-
|
10609
|
+
.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
|
10610
|
+
display: flex;
|
10611
|
+
overflow: visible;
|
10612
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
10616
10613
|
}
|
10617
|
-
.c4p--datagrid__datagridWithPanel .
|
10618
|
-
|
10614
|
+
.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
|
10615
|
+
border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
|
10619
10616
|
}
|
10620
|
-
.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-
|
10621
|
-
|
10617
|
+
.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
|
10618
|
+
height: 100%;
|
10622
10619
|
}
|
10623
10620
|
|
10624
10621
|
.c4p--datagrid__table-container {
|
@@ -10627,6 +10624,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10627
10624
|
overflow: auto;
|
10628
10625
|
width: 100%;
|
10629
10626
|
max-height: 100%;
|
10627
|
+
overflow-y: auto;
|
10630
10628
|
}
|
10631
10629
|
|
10632
10630
|
.c4p--datagrid__carbon-row-expanded {
|
@@ -10660,7 +10658,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10660
10658
|
padding-bottom: 1rem;
|
10661
10659
|
}
|
10662
10660
|
.c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
|
10663
|
-
flex:
|
10661
|
+
flex: 1 0 auto;
|
10664
10662
|
}
|
10665
10663
|
.c4p--datagrid__dense-header .cds--table-toolbar {
|
10666
10664
|
background: transparent;
|
@@ -11117,12 +11115,12 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11117
11115
|
*/
|
11118
11116
|
.c4p--datagrid__row-size-dropdown {
|
11119
11117
|
padding: 1rem;
|
11120
|
-
background-color: var(--cds-
|
11118
|
+
background-color: var(--cds-layer-02, #ffffff);
|
11121
11119
|
box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
11122
11120
|
}
|
11123
11121
|
|
11124
|
-
.c4p--datagrid__row-size-button--open {
|
11125
|
-
background-color: var(--cds-
|
11122
|
+
.cds--btn--ghost.c4p--datagrid__row-size-button--open {
|
11123
|
+
background-color: var(--cds-layer-02, #ffffff);
|
11126
11124
|
box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
11127
11125
|
}
|
11128
11126
|
|
@@ -11206,6 +11204,123 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11206
11204
|
margin-bottom: 0;
|
11207
11205
|
}
|
11208
11206
|
|
11207
|
+
/*
|
11208
|
+
* Licensed Materials - Property of IBM
|
11209
|
+
* 5724-Q36
|
11210
|
+
* (c) Copyright IBM Corp. 2022
|
11211
|
+
* US Government Users Restricted Rights - Use, duplication or disclosure
|
11212
|
+
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
11213
|
+
*/
|
11214
|
+
.c4p--datagrid-filter-panel__container {
|
11215
|
+
position: relative;
|
11216
|
+
width: rem(320px);
|
11217
|
+
height: clamp(var(--filter-panel-min-height), 100%, 100vh);
|
11218
|
+
border-top: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
|
11219
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
11220
|
+
}
|
11221
|
+
|
11222
|
+
.c4p--datagrid-filter-panel--open {
|
11223
|
+
border-right: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
|
11224
|
+
}
|
11225
|
+
|
11226
|
+
.c4p--datagrid-filter-panel__container::before {
|
11227
|
+
position: absolute;
|
11228
|
+
top: -1px;
|
11229
|
+
left: 0;
|
11230
|
+
display: block;
|
11231
|
+
width: rem(47px);
|
11232
|
+
height: 1px;
|
11233
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
11234
|
+
content: "";
|
11235
|
+
}
|
11236
|
+
|
11237
|
+
.c4p--datagrid-filter-panel__inner-container {
|
11238
|
+
position: relative;
|
11239
|
+
z-index: 0;
|
11240
|
+
overflow: auto;
|
11241
|
+
padding: 0 1rem;
|
11242
|
+
overscroll-behavior: contain;
|
11243
|
+
}
|
11244
|
+
|
11245
|
+
.c4p--datagrid-filter-panel__inner-container .c4p--datagrid-filter-panel__category:last-of-type {
|
11246
|
+
padding-bottom: 5rem;
|
11247
|
+
}
|
11248
|
+
|
11249
|
+
.c4p--datagrid-filter-panel {
|
11250
|
+
position: sticky;
|
11251
|
+
top: 0;
|
11252
|
+
}
|
11253
|
+
|
11254
|
+
.c4p--datagrid-filter-panel__heading {
|
11255
|
+
display: flex;
|
11256
|
+
justify-content: space-between;
|
11257
|
+
padding-left: 1rem;
|
11258
|
+
border-bottom: 1px solid transparent;
|
11259
|
+
}
|
11260
|
+
|
11261
|
+
.c4p--datagrid-filter-panel__heading--with-divider {
|
11262
|
+
border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
|
11263
|
+
}
|
11264
|
+
|
11265
|
+
.c4p--datagrid-filter-panel__title {
|
11266
|
+
padding: 1rem 0;
|
11267
|
+
font-size: var(--cds-heading-compact-02-font-size, 1rem);
|
11268
|
+
font-weight: var(--cds-heading-compact-02-font-weight, 600);
|
11269
|
+
line-height: var(--cds-heading-compact-02-line-height, 1.375);
|
11270
|
+
letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
|
11271
|
+
}
|
11272
|
+
|
11273
|
+
.c4p--datagrid-filter-panel__search {
|
11274
|
+
padding: 0 1rem 1.5rem;
|
11275
|
+
}
|
11276
|
+
|
11277
|
+
.c4p--datagrid-filter-panel__category-title {
|
11278
|
+
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
11279
|
+
font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
11280
|
+
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
11281
|
+
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
11282
|
+
margin-bottom: 1rem;
|
11283
|
+
color: var(--cds-text-secondary, #525252);
|
11284
|
+
}
|
11285
|
+
|
11286
|
+
.c4p--datagrid-filter-panel__category {
|
11287
|
+
padding-bottom: 1.5rem;
|
11288
|
+
}
|
11289
|
+
|
11290
|
+
.c4p--datagrid-filter-panel__category > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
|
11291
|
+
margin-bottom: 1rem;
|
11292
|
+
}
|
11293
|
+
|
11294
|
+
.c4p--datagrid-filter-panel__action-set {
|
11295
|
+
position: sticky;
|
11296
|
+
z-index: 1;
|
11297
|
+
bottom: 0;
|
11298
|
+
height: rem(64px);
|
11299
|
+
margin-top: auto;
|
11300
|
+
}
|
11301
|
+
|
11302
|
+
.c4p--datagrid-filter-panel__container .cds--accordion__title {
|
11303
|
+
margin: 0;
|
11304
|
+
}
|
11305
|
+
|
11306
|
+
.c4p--datagrid-filter-panel__container .cds--accordion__arrow {
|
11307
|
+
margin: 0.125rem 0 0;
|
11308
|
+
}
|
11309
|
+
|
11310
|
+
.c4p--datagrid-filter-panel__container .cds--accordion__content {
|
11311
|
+
padding-right: 0;
|
11312
|
+
padding-left: 0;
|
11313
|
+
}
|
11314
|
+
|
11315
|
+
.c4p--datagrid-filter-panel__container .cds--accordion__content > *:not(:last-child) {
|
11316
|
+
margin-bottom: 1rem;
|
11317
|
+
}
|
11318
|
+
|
11319
|
+
.cds--btn.c4p--datagrid-filter-panel-open-button {
|
11320
|
+
border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
|
11321
|
+
border-bottom: none;
|
11322
|
+
}
|
11323
|
+
|
11209
11324
|
/*
|
11210
11325
|
* Licensed Materials - Property of IBM
|
11211
11326
|
* 5724-Q36
|