@carbon/ibm-products 1.15.0 → 1.18.0

package/lib/components/WebTerminal/index.js

@@ -9,5 +9,13 @@ Object.defineProperty(exports, "WebTerminal", {
     return _WebTerminal.WebTerminal;
   }
 });
+Object.defineProperty(exports, "WebTerminalContentWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _WebTerminalContentWrapper.WebTerminalContentWrapper;
+  }
+});
+
+var _WebTerminal = require("./WebTerminal");
 
-var _WebTerminal = require("./WebTerminal");
+var _WebTerminalContentWrapper = require("./WebTerminalContentWrapper");

package/lib/components/index.js

@@ -297,6 +297,12 @@ Object.defineProperty(exports, "WebTerminal", {
     return _WebTerminal.WebTerminal;
   }
 });
+Object.defineProperty(exports, "WebTerminalContentWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _WebTerminal.WebTerminalContentWrapper;
+  }
+});
 
 var _AboutModal = require("./AboutModal");
 

package/lib/global/js/package-settings.js

@@ -64,6 +64,7 @@ var defaults = {
     ToolbarButton: false,
     ToolbarGroup: false,
     WebTerminal: false,
+    WebTerminalContentWrapper: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
     InlineEdit: false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.15.0",
+  "version": "1.18.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,22 +50,23 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.9",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.13",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.15",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "fs-extra": "^10.0.1",
+    "fs-extra": "^10.1.0",
     "glob": "^8.0.1",
-    "jest": "^27.5.1",
-    "jest-config-ibm-cloud-cognitive": "^0.23.15",
+    "jest": "^28.0.3",
+    "jest-config-ibm-cloud-cognitive": "^0.23.18",
+    "jest-environment-jsdom": "^28.1.0",
     "namor": "^1.1.2",
-    "npm-check-updates": "^12.5.9",
+    "npm-check-updates": "^12.5.11",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.50.0",
+    "sass": "^1.51.0",
     "yargs": "^17.4.1"
   },
   "dependencies": {
@@ -76,7 +77,7 @@
     "react-dnd-html5-backend": "^15.1.3",
     "react-resize-detector": "^7.0.0",
     "react-table": "^7.7.0",
-    "react-window": "^1.8.6"
+    "react-window": "^1.8.7"
   },
   "peerDependencies": {
     "@carbon/colors": "^10.37.1",
@@ -86,11 +87,11 @@
     "@carbon/motion": "^10.29.0",
     "@carbon/themes": "^10.54.0",
     "@carbon/type": "^10.44.0",
-    "carbon-components": "^10.56.0",
-    "carbon-components-react": "^7.56.0",
+    "carbon-components": "^10.57.1",
+    "carbon-components-react": "^7.57.1",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "202e15e26448cefc31d5ea1796b4d4b8b126a246"
+  "gitHead": "6bf1f85853417a8b5142207318b12290254201bf"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -100,6 +100,12 @@
     }
   }
 
+  .#{$block-class}__sub-header {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+  }
+
   // sidebar
 
   .#{$block-class}__sidebar-header {
@@ -228,6 +234,13 @@
       grid-gap: $spacing-05 2rem;
       grid-template-columns: repeat(2, 1fr);
     }
+
+    &-applied {
+      display: flex;
+      align-items: center;
+      padding: $spacing-03;
+      background: $ui-01;
+    }
   }
 
   .#{$block-class}__global-filter-button-set
@@ -248,7 +261,7 @@
   }
 
   // the influencer sidebar needs to be even with the buttons
-  .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__influencer {
+  .#{$block-class} .#{$tearsheet-class}__influencer {
     max-width: 29rem;
     flex: 0 0 50%;
   }
@@ -257,7 +270,7 @@
     color: $text-02;
   }
 
-  .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__content {
+  .#{$block-class} .#{$tearsheet-class}__content {
     display: flex;
     flex-direction: column;
   }

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -81,7 +81,13 @@
       }
     }
     .#{$block-class}__th--select-all {
-      min-width: calc(#{$spacing-10} - #{$spacing-02});
+      width: $spacing-10;
+    }
+    .#{$block-class}__td-th--cell-container,
+    .#{$block-class}__select-all-cell-container {
+      position: sticky;
+      z-index: 4;
+      left: 0;
     }
     .#{$block-class}__td-th.#{$block-class}__td {
       @include carbon--font-weight('semibold');
@@ -165,6 +171,7 @@
 
       &[data-active-row-index='header'],
       &[data-active-column-index='header'] {
+        z-index: 4;
         background-color: transparent;
       }
 
@@ -173,19 +180,6 @@
         outline: 0;
       }
     }
-    .#{$block-class}__active-cell--highlight.#{$block-class}__active-cell--with-selection {
-      &::before {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: block;
-        width: 100%;
-        height: 100%;
-        background-color: $interactive-01;
-        content: '';
-        opacity: 0.25;
-      }
-    }
     .#{$block-class}__selection-area--element {
       position: absolute;
       z-index: 2;
@@ -203,11 +197,41 @@
         content: '';
         opacity: 0.2;
       }
+      &.#{$block-class}__selection-area--element-cloned {
+        z-index: 4;
+
+        &::before {
+          background-color: $ui-05;
+          opacity: 0.25;
+        }
+      }
+    }
+    .#{$block-class}__reorder-indicator-line {
+      position: absolute;
+      z-index: 4;
+      width: $spacing-01;
+      background-color: $interactive-01;
     }
     .#{$block-class}__th--active-header,
     .#{$block-class}__td-th--active-header.#{$block-class}__td {
       background-color: $hover-selected-ui;
     }
+    .#{$block-class}__th--selected-header,
+    .#{$block-class}__td-th--selected-header.#{$block-class}__td {
+      background-color: $inverse-02;
+      color: $text-04;
+
+      &:focus,
+      &:hover {
+        background-color: $inverse-02;
+      }
+    }
+    .#{$block-class}__th--selected-header.#{$block-class}__th {
+      cursor: grab;
+    }
+    .#{$block-class}__th--selected-header-reorder-active.#{$block-class}__th {
+      cursor: grabbing;
+    }
     .#{$block-class}__list--container {
       overscroll-behavior: none;
     }

package/scss/components/Datagrid/styles/datagrid.scss

@@ -316,3 +316,11 @@
   width: 100%;
   flex-direction: column;
 }
+
+.#{$block-class}__carbon-row-expanded {
+  // Border applied to nested rows only on open chevron hover
+  &.#{$block-class}__carbon-row-expanded-hover-active
+    ~ .#{$block-class}__carbon-nested-row {
+    border-left: 1px solid $interactive-01;
+  }
+}

package/scss/components/Datagrid/styles/useNestedRows.scss

@@ -9,7 +9,7 @@
 @import './variables';
 
 .#{$carbon-prefix}--data-table tr.#{$block-class}__carbon-nested-row {
-  border-left: 2px solid $interactive-01;
+  border-left: 1px solid transparent;
 
   .#{$block-class}__cell {
     border-bottom: 1px solid $ui-03;

package/scss/components/SidePanel/_side-panel.scss

@@ -278,7 +278,10 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       position: fixed;
       z-index: 2;
       // stylelint-disable-next-line carbon/layout-token-use
-      top: calc(var(--#{$block-class}--title-text-height) + #{$spacing-09});
+      top: calc(
+        var(--#{$block-class}--title-text-height) +
+          var(--#{$block-class}--label-text-height) + #{$spacing-09}
+      );
       background-color: $ui-01;
     }
 
@@ -298,7 +301,10 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation {
       position: fixed;
       top: $spacing-09;
-      height: var(--#{$block-class}--title-text-height);
+      height: calc(
+        var(--#{$block-class}--title-text-height) +
+          var(--#{$block-class}--label-text-height)
+      );
     }
 
     .#{$block-class}__inner-content {
@@ -308,7 +314,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       margin-top: calc(
         var(--#{$block-class}--title-text-height) +
           var(--#{$block-class}--subtitle-container-height) +
-          var(--#{$block-class}--action-bar-container-height)
+          var(--#{$block-class}--action-bar-container-height) +
+          var(--#{$block-class}--label-text-height)
       );
       overflow-x: hidden;
     }
@@ -331,6 +338,18 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       padding-top: $spacing-05;
     }
 
+    .#{$block-class}__inner-content.#{$block-class}__static-inner-content-no-actions {
+      height: calc(
+        100vh -
+          calc(
+            var(--#{$block-class}--title-text-height) +
+              var(--#{$block-class}--subtitle-container-height) +
+              var(--#{$block-class}--action-bar-container-height) +
+              var(--#{$block-class}--label-text-height)
+          )
+      );
+    }
+
     .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation {
       position: fixed;
       // stylelint-disable-next-line carbon/layout-token-use

package/scss/components/WebTerminal/_storybook-styles.scss

@@ -2,6 +2,11 @@
 
 @import '../../global/styles/project-settings';
 
+.sb-show-main.sb-main-centered #root {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
 .example-terminal {
   padding: $spacing-05;
   color: $gray-10;

package/scss/components/WebTerminal/_web-terminal.scss

@@ -5,25 +5,25 @@ $web-terminal-width: 36.5rem;
 $block-class: #{$pkg-prefix}--web-terminal;
 
 @keyframes web-terminal-entrance {
-  0% {
+  from {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-token-use
     transform: translateX(#{$web-terminal-width});
   }
 
-  100% {
+  to {
     opacity: 1;
     transform: translateX(0);
   }
 }
 
 @keyframes web-terminal-exit {
-  0% {
+  from {
     opacity: 1;
     transform: translateX(0);
   }
 
-  100% {
+  to {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-token-use
     transform: translateX(#{$web-terminal-width});
@@ -70,3 +70,13 @@ $block-class: #{$pkg-prefix}--web-terminal;
 .#{$block-class}__body {
   height: 100%;
 }
+
+// Terminal wrapper styles
+.#{$block-class}-content-wrapper {
+  width: 100vw;
+  height: 100%;
+}
+
+.#{$block-class}-content-wrapper--open {
+  width: calc(100vw - #{$web-terminal-width});
+}