@carbon/ibm-products 1.16.0 → 1.17.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 (59) hide show
  1. package/css/index-full-carbon.css +32 -7
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +6 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +9 -3
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +4 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +32 -7
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +6 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +32 -7
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +6 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -0
  18. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +6 -2
  19. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +5 -2
  20. package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +57 -12
  21. package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +16 -0
  22. package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +10 -5
  23. package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +6 -2
  24. package/es/components/Datagrid/Datagrid/Datagrid.js +24 -12
  25. package/es/components/Datagrid/Datagrid/DatagridHead.js +8 -16
  26. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +10 -10
  27. package/es/components/Datagrid/Datagrid/index.js +6 -7
  28. package/es/components/Datagrid/index.js +1 -1
  29. package/es/components/ExportModal/ExportModal.js +10 -5
  30. package/es/components/SidePanel/SidePanel.js +5 -1
  31. package/es/components/WebTerminal/WebTerminal.js +36 -11
  32. package/es/components/WebTerminal/WebTerminalContentWrapper.js +49 -0
  33. package/es/components/WebTerminal/index.js +2 -1
  34. package/es/components/index.js +1 -1
  35. package/es/global/js/package-settings.js +1 -0
  36. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -0
  37. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +7 -2
  38. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +6 -2
  39. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +61 -11
  40. package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +26 -0
  41. package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +10 -5
  42. package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +6 -2
  43. package/lib/components/Datagrid/Datagrid/Datagrid.js +25 -8
  44. package/lib/components/Datagrid/Datagrid/DatagridHead.js +8 -16
  45. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +10 -10
  46. package/lib/components/Datagrid/Datagrid/index.js +3 -5
  47. package/lib/components/Datagrid/index.js +2 -2
  48. package/lib/components/ExportModal/ExportModal.js +9 -4
  49. package/lib/components/SidePanel/SidePanel.js +5 -1
  50. package/lib/components/WebTerminal/WebTerminal.js +36 -10
  51. package/lib/components/WebTerminal/WebTerminalContentWrapper.js +58 -0
  52. package/lib/components/WebTerminal/index.js +9 -1
  53. package/lib/components/index.js +6 -0
  54. package/lib/global/js/package-settings.js +1 -0
  55. package/package.json +9 -9
  56. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +10 -0
  57. package/scss/components/SidePanel/_side-panel.scss +22 -3
  58. package/scss/components/WebTerminal/_storybook-styles.scss +5 -0
  59. package/scss/components/WebTerminal/_web-terminal.scss +14 -4
package/css/index-full-carbon.css CHANGED
@@ -11577,7 +11577,10 @@ a.bx--overflow-menu-options__btn::before {
11577
11577
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
11578
11578
  position: fixed;
11579
11579
  z-index: 2;
11580
- top: calc(var(--c4p--side-panel--title-text-height) + var(--cds-spacing-09, 3rem));
11580
+ top: calc(
11581
+ var(--c4p--side-panel--title-text-height) +
11582
+ var(--c4p--side-panel--label-text-height) + var(--cds-spacing-09, 3rem)
11583
+ );
11581
11584
  background-color: var(--cds-ui-01, #f4f4f4);
11582
11585
  }
11583
11586
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -11593,12 +11596,12 @@ a.bx--overflow-menu-options__btn::before {
11593
11596
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
11594
11597
  position: fixed;
11595
11598
  top: var(--cds-spacing-09, 3rem);
11596
- height: var(--c4p--side-panel--title-text-height);
11599
+ height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
11597
11600
  }
11598
11601
  .c4p--side-panel__container .c4p--side-panel__inner-content {
11599
11602
  overflow: auto;
11600
11603
  height: calc(100vh - 3rem);
11601
- margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height));
11604
+ margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height) + var(--c4p--side-panel--label-text-height));
11602
11605
  overflow-x: hidden;
11603
11606
  }
11604
11607
  .c4p--side-panel__container .c4p--side-panel__inner-content-with-actions {
@@ -11608,6 +11611,9 @@ a.bx--overflow-menu-options__btn::before {
11608
11611
  height: calc(100vh - (var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height)) + -1 * (var(--cds-spacing-09, 3rem) + var(--cds-spacing-10, 4rem)));
11609
11612
  padding-top: var(--cds-spacing-05, 1rem);
11610
11613
  }
11614
+ .c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__static-inner-content-no-actions {
11615
+ height: calc(100vh - (var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height) + var(--c4p--side-panel--label-text-height)));
11616
+ }
11611
11617
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
11612
11618
  position: fixed;
11613
11619
  top: calc(
@@ -17651,21 +17657,21 @@ button.c4p--add-select__global-filter-toggle {
17651
17657
  }
17652
17658
 
17653
17659
  @keyframes web-terminal-entrance {
17654
- 0% {
17660
+ from {
17655
17661
  opacity: 0;
17656
17662
  transform: translateX(36.5rem);
17657
17663
  }
17658
- 100% {
17664
+ to {
17659
17665
  opacity: 1;
17660
17666
  transform: translateX(0);
17661
17667
  }
17662
17668
  }
17663
17669
  @keyframes web-terminal-exit {
17664
- 0% {
17670
+ from {
17665
17671
  opacity: 1;
17666
17672
  transform: translateX(0);
17667
17673
  }
17668
- 100% {
17674
+ to {
17669
17675
  opacity: 0;
17670
17676
  transform: translateX(36.5rem);
17671
17677
  }
@@ -18546,6 +18552,15 @@ button.c4p--add-select__global-filter-toggle {
18546
18552
  height: 100%;
18547
18553
  }
18548
18554
 
18555
+ .c4p--web-terminal-content-wrapper {
18556
+ width: 100vw;
18557
+ height: 100%;
18558
+ }
18559
+
18560
+ .c4p--web-terminal-content-wrapper--open {
18561
+ width: calc(100vw - 36.5rem);
18562
+ }
18563
+
18549
18564
  .c4p--user-profile-image--light {
18550
18565
  color: var(--cds-ui-01, #f4f4f4);
18551
18566
  }
@@ -19395,6 +19410,7 @@ button.c4p--add-select__global-filter-toggle {
19395
19410
  text-align: left;
19396
19411
  }
19397
19412
  .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight[data-active-row-index=header], .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight[data-active-column-index=header] {
19413
+ z-index: 4;
19398
19414
  background-color: transparent;
19399
19415
  }
19400
19416
  .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight:focus {
@@ -19433,6 +19449,15 @@ button.c4p--add-select__global-filter-toggle {
19433
19449
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--active-header.c4p--data-spreadsheet__td {
19434
19450
  background-color: var(--cds-hover-selected-ui, #cacaca);
19435
19451
  }
19452
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header,
19453
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td {
19454
+ background-color: var(--cds-inverse-02, #393939);
19455
+ color: var(--cds-text-04, #ffffff);
19456
+ }
19457
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:hover,
19458
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td:hover {
19459
+ background-color: var(--cds-inverse-02, #393939);
19460
+ }
19436
19461
  .c4p--data-spreadsheet .c4p--data-spreadsheet__list--container {
19437
19462
  overscroll-behavior: none;
19438
19463
  }