@carbon/ibm-products 1.16.0 → 1.18.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.16.0",
+  "version": "1.18.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,33 +50,34 @@
     "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.1.0",
-    "glob": "^8.0.1",
-    "jest": "^27.5.1",
-    "jest-config-ibm-cloud-cognitive": "^0.23.16",
+    "glob": "^8.0.3",
+    "jest": "^28.1.0",
+    "jest-config-ibm-cloud-cognitive": "^0.23.19",
+    "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.1",
-    "yargs": "^17.4.1"
+    "sass": "^1.51.0",
+    "yargs": "^17.5.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "@carbon/telemetry": "^0.1.0",
     "immutability-helper": "^3.1.1",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd": "^15.1.2",
+    "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": "c9d83ac8cb5d738772533f2ea93b854a1f4d711f"
+  "gitHead": "af43f7248a6bf9c65da17758b2345aad9808c317"
 }

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

@@ -52,11 +52,11 @@
       color: $text-02;
     }
 
-    &-cell:hover .#{$block-class}__selections-dropdown {
+    &-cell:hover .#{$block-class}__selections-hidden-hover {
       visibility: visible;
     }
 
-    &-dropdown {
+    &-hidden-hover {
       visibility: hidden;
     }
 
@@ -64,7 +64,7 @@
       background: #e5e5e5;
     }
 
-    &-row-selected .#{$block-class}__selections-dropdown {
+    &-row-selected .#{$block-class}__selections-hidden-hover {
       visibility: visible;
     }
 
@@ -100,6 +100,12 @@
     }
   }
 
+  .#{$block-class}__sub-header {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+
   // sidebar
 
   .#{$block-class}__sidebar-header {
@@ -163,7 +169,11 @@
     overflow-x: auto;
   }
 
-  .#{$block-class}__columns .#{$block-class}__selections-cell {
+  // table override
+  .#{$block-class}
+    .#{$block-class}__columns
+    .#{$carbon-prefix}--structured-list-td {
+    height: 0;
     // stylelint-disable-next-line
     padding: 0 !important;
   }
@@ -248,6 +258,34 @@
     background: $field-01;
   }
 
+  // meta panel
+  .#{$block-class}__meta-panel {
+    padding: $spacing-05;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: $spacing-05;
+    }
+
+    &-entry {
+      margin-bottom: $spacing-05;
+    }
+  }
+
+  .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-title {
+    @include carbon--type-style('productive-heading-03');
+  }
+
+  .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-title {
+    @include carbon--type-style('productive-heading-01');
+  }
+
+  .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-body {
+    @include carbon--type-style('body-short-01');
+  }
+
   // overrides
 
   .#{$block-class}__tag-container .#{$carbon-prefix}--tag {
@@ -281,7 +319,9 @@
   }
 
   .#{$block-class} .#{$carbon-prefix}--structured-list-td {
-    padding-bottom: $spacing-05;
+    height: 4rem;
+    padding: $spacing-05;
+    vertical-align: middle;
   }
 
   .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {

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

@@ -171,6 +171,7 @@
 
       &[data-active-row-index='header'],
       &[data-active-column-index='header'] {
+        z-index: 4;
         background-color: transparent;
       }
 
@@ -179,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;
@@ -209,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: $inverse-01;
+
+      &: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/_storybook-styles.scss

@@ -14,9 +14,14 @@ $block-class: #{$pkg-prefix}--datagrid;
 
 .sb-show-main.sb-main-centered #root {
   width: 100%;
+  height: 100vh;
   padding: 0;
 }
 
+.preview-position-fix {
+  height: 100%;
+}
+
 .carbon-nested-table {
   border-bottom: 1px solid $ui-03;
 

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

@@ -26,6 +26,7 @@
 .#{$block-class}__grid-container table {
   /* Removes additional scroll introduced by Carbon table */
   overflow: hidden;
+
   &.#{$block-class}__vertical-align-center {
     .#{$block-class}__head {
       .#{$carbon-prefix}--table-header-label {
@@ -46,12 +47,14 @@
     th.#{$carbon-prefix}--table-column-checkbox {
       /* stylelint-disable-next-line carbon/layout-token-use */
       padding-top: 0.6875rem;
+
       &.#{$block-class}__checkbox-cell {
         display: flex;
         align-items: center;
         padding-top: 0;
       }
     }
+
     .#{$block-class}__checkbox-cell {
       th.#{$carbon-prefix}--table-column-checkbox {
         display: flex;
@@ -60,6 +63,7 @@
         padding-top: 0;
       }
     }
+
     &.#{$block-class}__variable-row-height {
       &.#{$carbon-prefix}--data-table--compact,
       &.#{$carbon-prefix}--data-table--xs {
@@ -68,6 +72,7 @@
           padding-bottom: $spacing-01;
         }
       }
+
       &.#{$carbon-prefix}--data-table--short,
       &.#{$carbon-prefix}--data-table--sm,
       &.#{$carbon-prefix}--data-table--md {
@@ -78,6 +83,7 @@
           padding-bottom: rem(6px);
         }
       }
+
       &.#{$carbon-prefix}--data-table--tall,
       &.#{$carbon-prefix}--data-table--lg,
       &.#{$carbon-prefix}--data-table--xl {
@@ -88,6 +94,7 @@
       }
     }
   }
+
   &.#{$block-class}__vertical-align-top {
     &.#{$carbon-prefix}--data-table--tall,
     &.#{$carbon-prefix}--data-table--lg,
@@ -95,14 +102,17 @@
       .#{$block-class}__cell {
         padding-top: $spacing-05;
       }
+
       .#{$carbon-prefix}--table-header-label {
         padding-top: $spacing-05;
       }
+
       .#{$carbon-prefix}--table-column-checkbox {
         /* stylelint-disable-next-line carbon/layout-token-use */
         padding-top: rem(13px);
       }
     }
+
     &.#{$block-class}__variable-row-height {
       &.#{$carbon-prefix}--data-table--tall,
       &.#{$carbon-prefix}--data-table--lg,
@@ -110,12 +120,14 @@
         .#{$block-class}__cell {
           padding-bottom: $spacing-05;
         }
+
         .#{$carbon-prefix}--table-header-label {
           padding-bottom: $spacing-05;
         }
       }
     }
   }
+
   &.#{$block-class}__variable-row-height {
     tr.#{$block-class}__carbon-row {
       height: auto;
@@ -150,17 +162,13 @@
   .#{$block-class}__head {
     display: flex;
   }
+
   .#{$block-class}__head .header {
     /* Each cell should grow equally */
     width: 1%;
     align-items: center;
   }
 
-  .#{$block-class}__empty-state-body {
-    display: flex;
-    width: 100%;
-  }
-
   .#{$block-class}__virtual-scrollbar {
     //makes thin scrollbar in chrome and firefox
     scrollbar-width: thin;
@@ -195,9 +203,11 @@
     height: 100%;
     flex-direction: column;
   }
+
   .#{$block-class}__carbon-row {
     /* stylelint-disable-next-line declaration-no-important */
     flex: none !important;
+
     .#{$block-class}__carbon-row:hover a {
       /* stylelint-disable-next-line declaration-no-important */
       color: $hover-primary-text !important;
@@ -219,6 +229,31 @@
   }
 }
 
+.#{$block-class}__empty-state .#{$block-class}__table-simple {
+  display: table;
+  height: 100%;
+
+  .#{$pkg-prefix}--empty-state {
+    max-width: 280px;
+  }
+}
+
+.#{$block-class}__empty-state .#{$block-class}__table-simple tr:hover {
+  background: transparent;
+}
+
+.#{$block-class}__empty-state .#{$block-class}__table-simple tr:hover td {
+  background: transparent;
+}
+
+.#{$block-class}__empty-state .#{$block-class}__table-simple td {
+  padding: $spacing-11;
+}
+
+.#{$block-class}__empty-state .#{$block-class}__grid-container {
+  flex: 1 1 auto;
+}
+
 .#{$block-class}__resizer {
   position: absolute;
   z-index: 1;
@@ -239,12 +274,14 @@
 .#{$block-class}__sortableColumn:hover {
   background-color: $hover-selected-ui;
 }
+
 .#{$block-class}__resizableColumn {
   &.#{$block-class}__isResizing {
     .#{$block-class}__resizer {
       border-right: $spacing-01 solid $hover-secondary;
     }
   }
+
   &.#{$block-class}__isSorted {
     background-color: $hover-selected-ui;
   }
@@ -252,6 +289,7 @@
 
 .#{$block-class}__resizableColumn:hover {
   background-color: $hover-selected-ui;
+
   .#{$block-class}__resizer {
     border-right: $spacing-01 solid $ui-04;
     background-color: $hover-selected-ui;

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});
+}