@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.
Files changed (67) hide show
  1. package/css/index-full-carbon.css +161 -26
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +1 -1
  6. package/css/index-without-carbon-released-only.min.css +1 -1
  7. package/css/index-without-carbon-released-only.min.css.map +1 -1
  8. package/css/index-without-carbon.css +161 -26
  9. package/css/index-without-carbon.css.map +1 -1
  10. package/css/index-without-carbon.min.css +2 -2
  11. package/css/index-without-carbon.min.css.map +1 -1
  12. package/css/index.css +161 -26
  13. package/css/index.css.map +1 -1
  14. package/css/index.min.css +2 -2
  15. package/css/index.min.css.map +1 -1
  16. package/es/components/AddSelect/AddSelect.js +1 -1
  17. package/es/components/AddSelect/AddSelectBody.js +1 -1
  18. package/es/components/AddSelect/AddSelectColumn.js +1 -1
  19. package/es/components/Datagrid/Datagrid/Datagrid.js +3 -3
  20. package/es/components/Datagrid/Datagrid/DatagridContent.js +43 -15
  21. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -19
  22. package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
  23. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +65 -34
  24. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +436 -0
  25. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +8 -2
  26. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +9 -1
  27. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +2 -0
  28. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +3 -1
  29. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +23 -0
  30. package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +3 -1
  31. package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +55 -0
  32. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +49 -17
  33. package/es/components/Datagrid/Datagrid.stories/index.js +0 -1
  34. package/es/components/Datagrid/useFiltering.js +10 -3
  35. package/es/components/Datagrid/utils/DatagridActions.js +59 -6
  36. package/lib/components/AddSelect/AddSelect.js +1 -1
  37. package/lib/components/AddSelect/AddSelectBody.js +1 -1
  38. package/lib/components/AddSelect/AddSelectColumn.js +1 -1
  39. package/lib/components/Datagrid/Datagrid/Datagrid.js +3 -3
  40. package/lib/components/Datagrid/Datagrid/DatagridContent.js +43 -15
  41. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +5 -18
  42. package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -1
  43. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +64 -31
  44. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +445 -0
  45. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +7 -1
  46. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +15 -3
  47. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +20 -0
  48. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +3 -1
  49. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +30 -0
  50. package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +21 -1
  51. package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +64 -0
  52. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +48 -17
  53. package/lib/components/Datagrid/Datagrid.stories/index.js +0 -7
  54. package/lib/components/Datagrid/useFiltering.js +10 -3
  55. package/lib/components/Datagrid/utils/DatagridActions.js +57 -4
  56. package/package.json +14 -14
  57. package/scss/components/Datagrid/styles/_datagrid.scss +25 -18
  58. package/scss/components/Datagrid/styles/_draggableElement.scss +12 -4
  59. package/scss/components/Datagrid/styles/_index.scss +1 -0
  60. package/scss/components/Datagrid/styles/_useExpandedRow.scss +1 -1
  61. package/scss/components/Datagrid/styles/_useInlineEdit.scss +7 -3
  62. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +5 -1
  63. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +123 -0
  64. package/scss/components/FilterSummary/_filter-summary.scss +1 -0
  65. package/scss/components/Tearsheet/_tearsheet.scss +1 -1
  66. package/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -6
  67. 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-all;
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: hidden;
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-03, 0.5rem);
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-09, 3rem);
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-02, #c6c6c6);
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
- background-color: var(--cds-hover-selected-ui, #cacaca);
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
- fill: var(--cds-icon-01, #161616);
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-active-ui, #c6c6c6);
22203
- color: var(--cds-text-01, #161616);
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 */