@carbon/ibm-products 1.38.0 → 1.39.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (57) hide show
  1. package/css/index-full-carbon.css +123 -3
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css.map +1 -1
  7. package/css/index-without-carbon.css +123 -3
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +3 -1
  10. package/css/index-without-carbon.min.css.map +1 -1
  11. package/css/index.css +123 -3
  12. package/css/index.css.map +1 -1
  13. package/css/index.min.css +3 -1
  14. package/css/index.min.css.map +1 -1
  15. package/es/components/ActionBar/ActionBarOverflowItems.js +1 -0
  16. package/es/components/CreateFullPage/CreateFullPage.js +4 -1
  17. package/es/components/Datagrid/Datagrid/Datagrid.js +7 -3
  18. package/es/components/Datagrid/Datagrid/DatagridRow.js +35 -2
  19. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +19 -3
  20. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +384 -0
  21. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +35 -46
  22. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +19 -0
  23. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +18 -0
  24. package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +7 -0
  25. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +38 -0
  26. package/es/components/Datagrid/index.js +2 -1
  27. package/es/components/Datagrid/useFiltering.js +83 -0
  28. package/es/components/Datagrid/useNestedRows.js +11 -2
  29. package/es/components/Datagrid/utils/DatagridActions.js +134 -33
  30. package/es/components/Datagrid/utils/makeData.js +23 -16
  31. package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
  32. package/lib/components/CreateFullPage/CreateFullPage.js +4 -1
  33. package/lib/components/Datagrid/Datagrid/Datagrid.js +7 -3
  34. package/lib/components/Datagrid/Datagrid/DatagridRow.js +35 -2
  35. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +18 -3
  36. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +385 -0
  37. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +35 -46
  38. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +33 -0
  39. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +27 -0
  40. package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +13 -0
  41. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +45 -0
  42. package/lib/components/Datagrid/index.js +8 -1
  43. package/lib/components/Datagrid/useFiltering.js +83 -0
  44. package/lib/components/Datagrid/useNestedRows.js +11 -2
  45. package/lib/components/Datagrid/utils/DatagridActions.js +135 -31
  46. package/lib/components/Datagrid/utils/makeData.js +24 -17
  47. package/package.json +2 -2
  48. package/scss/components/ActionSet/_action-set.scss +3 -1
  49. package/scss/components/AddSelect/_add-select.scss +3 -1
  50. package/scss/components/Datagrid/_datagrid.scss +0 -1
  51. package/scss/components/Datagrid/_storybook-styles.scss +4 -0
  52. package/scss/components/Datagrid/styles/_datagrid.scss +47 -4
  53. package/scss/components/Datagrid/styles/_index.scss +1 -0
  54. package/scss/components/Datagrid/styles/_useInlineEdit.scss +9 -3
  55. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +80 -0
  56. package/scss/components/InlineEditV1/_inline-edit-v1.scss +3 -1
  57. package/scss/components/PageHeader/_page-header.scss +6 -2
@@ -21349,8 +21349,22 @@ button.c4p--add-select__global-filter-toggle--open {
21349
21349
  max-height: 100%;
21350
21350
  }
21351
21351
 
21352
- .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
21352
+ .c4p--datagrid__carbon-row-expanded {
21353
+ position: relative;
21354
+ }
21355
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
21356
+ position: absolute;
21357
+ z-index: 2;
21358
+ /* stylelint-disable-next-line carbon/layout-token-use */
21359
+ top: var(--c4p--datagrid--row-height);
21360
+ /* stylelint-disable-next-line carbon/layout-token-use */
21361
+ left: calc(
21362
+ var(--c4p--datagrid--indicator-offset-amount) + var(--cds-spacing-05, 1rem)
21363
+ );
21364
+ width: 1px;
21365
+ height: var(--c4p--datagrid--indicator-height);
21353
21366
  border-left: 1px solid var(--cds-interactive-01, #0f62fe);
21367
+ content: "";
21354
21368
  }
21355
21369
 
21356
21370
  .c4p--datagrid .bx--data-table-header {
@@ -21395,7 +21409,7 @@ button.c4p--add-select__global-filter-toggle--open {
21395
21409
  position: relative;
21396
21410
  }
21397
21411
 
21398
- .c4p--datagrid .bx--data-table--selected:not(.c4p--datagrid__active-row)::before {
21412
+ .c4p--datagrid .bx--data-table--selected:not(.c4p--datagrid__active-row) ::before {
21399
21413
  position: absolute;
21400
21414
  left: 0;
21401
21415
  width: var(--cds-spacing-02, 0.25rem);
@@ -21439,6 +21453,38 @@ button.c4p--add-select__global-filter-toggle--open {
21439
21453
  height: var(--cds-spacing-09, 3rem);
21440
21454
  }
21441
21455
 
21456
+ .bx--body--with-modal-open .c4p--datagrid__grid-container {
21457
+ overflow: hidden;
21458
+ height: 100vh;
21459
+ }
21460
+
21461
+ .bx--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
21462
+ flex-shrink: 0;
21463
+ background-color: var(--cds-interactive-01, #0f62fe);
21464
+ }
21465
+
21466
+ .bx--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
21467
+ fill: var(--cds-ui-background, #ffffff);
21468
+ }
21469
+
21470
+ .bx--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
21471
+ .bx--overflow-menu.c4p--datagrid__toolbar-menu__trigger.bx--overflow-menu--open:hover,
21472
+ .bx--overflow-menu.c4p--datagrid__toolbar-menu__trigger.bx--overflow-menu--open {
21473
+ background-color: var(--cds-hover-primary, #0353e9);
21474
+ }
21475
+
21476
+ .c4p--datagrid__toolbar-options.bx--overflow-menu-options::after {
21477
+ background-color: transparent;
21478
+ }
21479
+
21480
+ .c4p--datagrid__mobile-toolbar-modal .bx--modal-container {
21481
+ position: absolute;
21482
+ }
21483
+
21484
+ .c4p--datagrid .bx--modal {
21485
+ width: 100%;
21486
+ }
21487
+
21442
21488
  /*
21443
21489
  * Licensed Materials - Property of IBM
21444
21490
  * 5724-Q36
@@ -21796,6 +21842,81 @@ button.c4p--add-select__global-filter-toggle--open {
21796
21842
  box-shadow: 1px 4px 8px -3px var(--cds-overlay-01, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
21797
21843
  }
21798
21844
 
21845
+ /*
21846
+ * Licensed Materials - Property of IBM
21847
+ * 5724-Q36
21848
+ * (c) Copyright IBM Corp. 2022
21849
+ * US Government Users Restricted Rights - Use, duplication or disclosure
21850
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
21851
+ */
21852
+ .c4p--datagrid-filter-flyout__container {
21853
+ position: relative;
21854
+ }
21855
+
21856
+ .c4p--datagrid-filter-flyout {
21857
+ position: absolute;
21858
+ top: var(--cds-spacing-09, 3rem);
21859
+ right: 0;
21860
+ display: none;
21861
+ width: 40.125rem;
21862
+ background-color: var(--cds-ui-02, #ffffff);
21863
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
21864
+ }
21865
+
21866
+ .c4p--datagrid-filter-flyout--open {
21867
+ display: grid;
21868
+ }
21869
+
21870
+ .c4p--datagrid-filter-flyout--batch {
21871
+ min-height: 21.625rem;
21872
+ grid-template-rows: 1fr 3rem;
21873
+ }
21874
+
21875
+ .c4p--datagrid-filter-flyout--instant {
21876
+ min-height: 17.625rem;
21877
+ grid-template-rows: 1fr;
21878
+ }
21879
+
21880
+ .c4p--datagrid-filter-flyout__inner-container {
21881
+ padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-09, 3rem) var(--cds-spacing-05, 1rem);
21882
+ }
21883
+
21884
+ .c4p--datagrid-filter-flyout__inner-container::before {
21885
+ position: absolute;
21886
+ top: -0.4375rem;
21887
+ right: 1px;
21888
+ display: block;
21889
+ width: 2.875rem;
21890
+ height: 0.9375rem;
21891
+ background-color: var(--cds-ui-02, #ffffff);
21892
+ content: "";
21893
+ }
21894
+
21895
+ .c4p--datagrid-filter-flyout__title {
21896
+ display: block;
21897
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
21898
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
21899
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
21900
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
21901
+ margin-bottom: var(--cds-spacing-06, 1.5rem);
21902
+ }
21903
+
21904
+ .c4p--datagrid-filter-flyout__filters {
21905
+ display: grid;
21906
+ gap: 1rem 2rem;
21907
+ grid-template-columns: 1fr 1fr;
21908
+ }
21909
+
21910
+ .c4p--datagrid-filter-flyout__trigger--open.bx--btn.bx--btn--icon-only {
21911
+ position: relative;
21912
+ background-color: var(--cds-ui-02, #ffffff);
21913
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
21914
+ }
21915
+
21916
+ .c4p--datagrid-filter-flyout .bx--fieldset {
21917
+ margin-bottom: 0;
21918
+ }
21919
+
21799
21920
  /*
21800
21921
  * Licensed Materials - Property of IBM
21801
21922
  * 5724-Q36
@@ -22311,7 +22432,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
22311
22432
 
22312
22433
  .c4p--datagrid__datagridWrap-simple {
22313
22434
  display: flex;
22314
- overflow: hidden;
22315
22435
  width: 100%;
22316
22436
  flex-direction: column;
22317
22437
  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */