@carbon/ibm-products 1.46.0 → 1.46.2

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 (39) hide show
  1. package/README.md +17 -0
  2. package/css/index-full-carbon.css +40 -12
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +4 -2
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon.css +40 -12
  7. package/css/index-without-carbon.css.map +1 -1
  8. package/css/index-without-carbon.min.css +4 -2
  9. package/css/index-without-carbon.min.css.map +1 -1
  10. package/css/index.css +40 -12
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +4 -2
  13. package/css/index.min.css.map +1 -1
  14. package/es/components/Card/CardFooter.js +2 -2
  15. package/es/components/Datagrid/Datagrid/DatagridRow.js +37 -10
  16. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +18 -4
  17. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +15 -2
  18. package/es/components/Datagrid/useActionsColumn.js +22 -1
  19. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
  20. package/es/components/Datagrid/useNestedRows.js +2 -4
  21. package/es/components/Datagrid/useSelectAllToggle.js +16 -2
  22. package/es/components/Datagrid/useSelectRows.js +17 -3
  23. package/es/components/Datagrid/useStickyColumn.js +19 -5
  24. package/lib/components/Card/CardFooter.js +2 -2
  25. package/lib/components/Datagrid/Datagrid/DatagridRow.js +37 -10
  26. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +20 -3
  27. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +14 -1
  28. package/lib/components/Datagrid/useActionsColumn.js +22 -1
  29. package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -1
  30. package/lib/components/Datagrid/useNestedRows.js +2 -4
  31. package/lib/components/Datagrid/useSelectAllToggle.js +19 -2
  32. package/lib/components/Datagrid/useSelectRows.js +19 -2
  33. package/lib/components/Datagrid/useStickyColumn.js +18 -4
  34. package/package.json +2 -2
  35. package/scss/components/Datagrid/styles/_datagrid.scss +24 -7
  36. package/scss/components/Datagrid/styles/_useNestedRows.scss +17 -0
  37. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +11 -8
  38. package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
  39. package/scss/components/OptionsTile/_options-tile.scss +8 -1
package/README.md CHANGED
@@ -41,6 +41,23 @@ Then you can import the component styles in your `index.js`.
41
41
  import '@carbon/ibm-products/css/index.min.css';
42
42
  ```
43
43
 
44
+ ### Webpack 4
45
+
46
+ Our package requires support for ES modules (see
47
+ [#2378](https://github.com/carbon-design-system/ibm-cloud-cognitive/issues/2378#issuecomment-1319276192)).
48
+ In Webpack 5, these are supported by default. In Webpack 4, you will need to add
49
+ the [following rule](https://stackoverflow.com/a/72149467) to your config.
50
+
51
+ ```js
52
+ rules: [
53
+ {
54
+ test: /\.mjs$/,
55
+ include: /node_modules/,
56
+ type: 'javascript/auto',
57
+ },
58
+ ],
59
+ ```
60
+
44
61
  ### Peer dependencies
45
62
 
46
63
  `@carbon/ibm-products` is built on top of Carbon components and has a number of
@@ -20594,12 +20594,19 @@ button.c4p--add-select__global-filter-toggle--open {
20594
20594
  }
20595
20595
 
20596
20596
  .c4p--options-tile {
20597
+ position: relative;
20597
20598
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
20598
20599
  background-color: var(--cds-ui-01, #f4f4f4);
20599
20600
  }
20600
20601
 
20601
20602
  .c4p--options-tile__toggle-container {
20602
- position: relative;
20603
+ position: absolute;
20604
+ top: 0;
20605
+ right: 0;
20606
+ bottom: 0;
20607
+ width: calc(
20608
+ var(--cds-spacing-05, 1rem) + 2rem + var(--cds-spacing-05, 1rem)
20609
+ );
20603
20610
  }
20604
20611
 
20605
20612
  .c4p--options-tile__toggle {
@@ -21189,7 +21196,9 @@ button.c4p--add-select__global-filter-toggle--open {
21189
21196
  .c4p--datagrid__grid-container td.bx--table-column-checkbox,
21190
21197
  .c4p--datagrid__grid-container th.bx--table-column-checkbox {
21191
21198
  /* stylelint-disable-next-line declaration-no-important */
21192
- padding-right: var(--cds-spacing-06, 1.5rem) !important;
21199
+ width: var(--cds-spacing-09, 3rem) !important;
21200
+ /* stylelint-disable-next-line declaration-no-important */
21201
+ padding-right: var(--cds-spacing-05, 1rem) !important;
21193
21202
  }
21194
21203
 
21195
21204
  .c4p--datagrid__empty-state .c4p--datagrid__table-simple {
@@ -21253,7 +21262,7 @@ button.c4p--add-select__global-filter-toggle--open {
21253
21262
  }
21254
21263
 
21255
21264
  .c4p--datagrid__head-hidden-select-all {
21256
- padding-right: var(--cds-spacing-08, 2.5rem);
21265
+ padding-right: var(--cds-spacing-09, 3rem);
21257
21266
  }
21258
21267
  .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
21259
21268
  position: sticky;
@@ -21294,6 +21303,13 @@ button.c4p--add-select__global-filter-toggle--open {
21294
21303
  width: 100% !important;
21295
21304
  }
21296
21305
 
21306
+ .c4p--datagrid__sticky thead {
21307
+ display: flex;
21308
+ }
21309
+ .c4p--datagrid__sticky thead tr.c4p--datagrid__sticky {
21310
+ width: auto;
21311
+ }
21312
+
21297
21313
  .block-class__displayFlex {
21298
21314
  position: relative;
21299
21315
  display: flex;
@@ -21357,7 +21373,7 @@ button.c4p--add-select__global-filter-toggle--open {
21357
21373
  );
21358
21374
  width: 1px;
21359
21375
  height: var(--c4p--datagrid--indicator-height);
21360
- border-left: 1px solid var(--cds-interactive-01, #0f62fe);
21376
+ border-left: 1px solid var(--cds-active-ui, #c6c6c6);
21361
21377
  content: "";
21362
21378
  }
21363
21379
 
@@ -21374,7 +21390,9 @@ button.c4p--add-select__global-filter-toggle--open {
21374
21390
  padding-bottom: var(--cds-spacing-05, 1rem);
21375
21391
  }
21376
21392
  .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
21393
+ display: flex;
21377
21394
  flex: 1 0 auto;
21395
+ align-items: flex-end;
21378
21396
  }
21379
21397
  .c4p--datagrid__dense-header .bx--table-toolbar {
21380
21398
  background: transparent;
@@ -21382,9 +21400,6 @@ button.c4p--add-select__global-filter-toggle--open {
21382
21400
  .c4p--datagrid__dense-header .bx__table-container {
21383
21401
  flex: 1 1 100%;
21384
21402
  }
21385
- .c4p--datagrid__dense-header .bx--table-toolbar {
21386
- padding-top: var(--cds-spacing-07, 2rem);
21387
- }
21388
21403
  .c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
21389
21404
  position: relative;
21390
21405
  }
@@ -21548,6 +21563,19 @@ button.c4p--add-select__global-filter-toggle--open {
21548
21563
  content: "";
21549
21564
  }
21550
21565
 
21566
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row td:first-child:empty,
21567
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row .c4p--datagrid__expandable-row-cell {
21568
+ border-bottom: none;
21569
+ }
21570
+
21571
+ .bx--data-table td.c4p--datagrid__expandable-row-cell {
21572
+ padding-left: var(--cds-spacing-03, 0.5rem);
21573
+ }
21574
+
21575
+ .c4p--datagrid__carbon-row-expanded .c4p--datagrid__expandable-row-cell {
21576
+ border-bottom: none;
21577
+ }
21578
+
21551
21579
  /*
21552
21580
  * Licensed Materials - Property of IBM
21553
21581
  * 5724-Q36
@@ -21689,7 +21717,7 @@ button.c4p--add-select__global-filter-toggle--open {
21689
21717
  right: 0;
21690
21718
  display: flex;
21691
21719
  align-items: center;
21692
- border-left: 1px solid var(--cds-ui-03, #e0e0e0);
21720
+ border-left: 1px solid var(--cds-active-light-ui, #c6c6c6);
21693
21721
  }
21694
21722
 
21695
21723
  .c4p--datagrid__right-sticky-column-header {
@@ -21704,7 +21732,7 @@ button.c4p--add-select__global-filter-toggle--open {
21704
21732
  left: 0;
21705
21733
  display: flex;
21706
21734
  align-items: center;
21707
- border-right: 1px solid var(--cds-ui-03, #e0e0e0);
21735
+ border-right: 1px solid var(--cds-active-light-ui, #c6c6c6);
21708
21736
  }
21709
21737
 
21710
21738
  .c4p--datagrid__left-sticky-column-header {
@@ -21716,7 +21744,7 @@ button.c4p--add-select__global-filter-toggle--open {
21716
21744
 
21717
21745
  .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
21718
21746
  .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
21719
- left: var(--cds-spacing-08, 2.5rem);
21747
+ left: var(--cds-spacing-09, 3rem);
21720
21748
  }
21721
21749
 
21722
21750
  .c4p--datagrid__sticky-noShadow {
@@ -22040,8 +22068,8 @@ button.c4p--add-select__global-filter-toggle--open {
22040
22068
  * US Government Users Restricted Rights - Use, duplication or disclosure
22041
22069
  * restricted by GSA ADP Schedule Contract with IBM Corp.
22042
22070
  */
22043
- th.c4p--datagrid__select-all-toggle-on,
22044
- td.c4p--datagrid__select-all-toggle-on {
22071
+ .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
22072
+ .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
22045
22073
  /* stylelint-disable-next-line declaration-no-important */
22046
22074
  width: 4.5rem !important;
22047
22075
  /* stylelint-disable-next-line declaration-no-important */