@carbon/ibm-products 1.32.1 → 1.34.0

package/lib/components/SidePanel/motion/variants.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelVariants = exports.overlayVariants = void 0;
+
+var _motionConstants = require("../../../global/js/utils/motionConstants");
+
+var overlayVariants = {
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: _motionConstants.DURATIONS.moderate02,
+      ease: _motionConstants.EASINGS.productive.standard
+    }
+  },
+  hidden: {
+    opacity: 0
+  },
+  exit: {
+    opacity: 0
+  }
+};
+exports.overlayVariants = overlayVariants;
+var panelVariants = {
+  visible: {
+    x: 0,
+    transition: {
+      duration: _motionConstants.DURATIONS.moderate02,
+      ease: _motionConstants.EASINGS.productive.standard
+    }
+  },
+  hidden: function hidden(placement) {
+    return {
+      x: placement === 'right' ? '100%' : -320
+    };
+  },
+  exit: function exit(placement) {
+    return {
+      x: placement === 'right' ? '100%' : -320,
+      transition: {
+        duration: _motionConstants.DURATIONS.moderate01,
+        ease: _motionConstants.EASINGS.productive.exit
+      }
+    };
+  }
+};
+exports.panelVariants = panelVariants;

package/lib/components/index.js

@@ -171,6 +171,12 @@ Object.defineProperty(exports, "InlineEdit", {
     return _InlineEdit.InlineEdit;
   }
 });
+Object.defineProperty(exports, "InlineEditV2", {
+  enumerable: true,
+  get: function get() {
+    return _InlineEditV.InlineEditV2;
+  }
+});
 Object.defineProperty(exports, "ModifiedTabs", {
   enumerable: true,
   get: function get() {
@@ -502,4 +508,6 @@ var _EditTearsheet = require("./EditTearsheet");
 
 var _EditTearsheetNarrow = require("./EditTearsheetNarrow");
 
-var _EditFullPage = require("./EditFullPage");
+var _EditFullPage = require("./EditFullPage");
+
+var _InlineEditV = require("./InlineEditV2");

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

@@ -73,7 +73,8 @@ var defaults = {
     Datagrid: false,
     EditTearsheet: false,
     EditTearsheetNarrow: false,
-    EditFullPage: false
+    EditFullPage: false,
+    InlineEditV2: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/lib/global/js/utils/getBezierValues.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBezierValues = void 0;
+
+var _motion = require("@carbon/motion");
+
+/**
+ * This function turns a cubic-bezier() string to an
+ * array of values that we can use with framer-motion
+ * @param {string} type - The carbon motion type, either 'standard', 'entrance', or 'exit'
+ * @param {string} mode - The carbon motion mode, either 'productive', or 'expressive'
+ */
+var getBezierValues = function getBezierValues(type, mode) {
+  var cubicBezier = (0, _motion.motion)(type, mode);
+  var extractStringFromParens = /\(([^)]+)\)/;
+  var desiredBezierStrings = extractStringFromParens.exec(cubicBezier)[1];
+  var formattedDesiredBezierStrings = desiredBezierStrings.trim().split(',').map(Number);
+
+  if (Array.isArray(formattedDesiredBezierStrings)) {
+    return formattedDesiredBezierStrings;
+  }
+
+  return [];
+};
+
+exports.getBezierValues = getBezierValues;

package/lib/global/js/utils/motionConstants.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EASINGS = exports.DURATIONS = void 0;
+
+var _getBezierValues = require("./getBezierValues");
+
+var _motion = require("@carbon/motion");
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var cleanMotionValue = function cleanMotionValue(val) {
+  return parseInt(val) / 1000;
+};
+
+var DURATIONS = {
+  // Micro-interactions such as button and toggle
+  fast01: cleanMotionValue(_motion.fast01),
+  // '70ms'
+  // Micro-interactions such as fade
+  fast02: cleanMotionValue(_motion.fast02),
+  // '110ms'
+  // Micro-interactions, small expansion, short distance movements
+  moderate01: cleanMotionValue(_motion.moderate01),
+  // '150ms'
+  // Expansion, system communication, toast
+  moderate02: cleanMotionValue(_motion.moderate02),
+  // '240ms'
+  // Large expansion, important system notifications
+  slow01: cleanMotionValue(_motion.slow01),
+  // '400ms'
+  //  Background dimming
+  slow02: cleanMotionValue(_motion.slow02) // '700ms'
+
+};
+exports.DURATIONS = DURATIONS;
+var EASINGS = {
+  productive: {
+    entrance: (0, _getBezierValues.getBezierValues)('entrance', 'productive'),
+    standard: (0, _getBezierValues.getBezierValues)('standard', 'productive'),
+    exit: (0, _getBezierValues.getBezierValues)('exit', 'productive')
+  },
+  expressive: {
+    entrance: (0, _getBezierValues.getBezierValues)('entrance', 'expressive'),
+    standard: (0, _getBezierValues.getBezierValues)('standard', 'expressive'),
+    exit: (0, _getBezierValues.getBezierValues)('exit', 'expressive')
+  }
+};
+exports.EASINGS = EASINGS;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.32.1",
+  "version": "1.34.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,28 +50,29 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.19.1",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.20",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.19.3",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.21",
     "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.3",
-    "jest": "^29.0.3",
-    "jest-config-ibm-cloud-cognitive": "^0.24.6",
-    "jest-environment-jsdom": "^29.0.3",
+    "jest": "^29.1.2",
+    "jest-config-ibm-cloud-cognitive": "^0.24.7",
+    "jest-environment-jsdom": "^29.1.2",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.1.3",
+    "npm-check-updates": "^16.3.4",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.9",
-    "yargs": "^17.5.1"
+    "sass": "^1.55.0",
+    "yargs": "^17.6.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.19.0",
     "@carbon/telemetry": "^0.1.0",
+    "framer-motion": "^6.5.1",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
@@ -87,11 +88,11 @@
     "@carbon/motion": "^10.29.0",
     "@carbon/themes": "^10.55.0",
     "@carbon/type": "^10.45.0",
-    "carbon-components": "^10.58.1",
-    "carbon-components-react": "^7.59.1",
+    "carbon-components": "^10.58.3",
+    "carbon-components-react": "^7.59.3",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "829c3e97ae9b2412f7fcb1859dc8dd8b019963ee"
+  "gitHead": "4d7381ec5c70fafb0f37ab93673fe6f7ccd85fb0"
 }

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

@@ -86,3 +86,14 @@ $block-class: #{$pkg-prefix}--datagrid;
   .#{$pkg-prefix}--side-panel__inner-content {
   height: 100%;
 }
+
+.#{$block-class}-story__custom-cell-wrapper.#{$carbon-prefix}--link {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}-story__hidden-column-id-snippet {
+  padding-top: $spacing-07;
+}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -523,8 +523,3 @@
 .#{$block-class} .#{$pkg-prefix}--button-menu {
   height: $spacing-09;
 }
-
-.#{$block-class} .#{$block-class}__table-grid-active {
-  border: 2px solid $inverse-link;
-  outline: 0;
-}

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -38,7 +38,7 @@ $row-heights: (
   .#{$block-class}
     .#{$block-class}__inline-edit--outer-cell-button--#{$size}
     .#{$carbon-prefix}--number__control-btn::after {
-    height: calc($size-value - 0.25rem);
+    height: calc(#{$size-value} - 0.25rem);
   }
   .#{$block-class}
     .#{$block-class}__inline-edit--select.#{$block-class}__inline-edit--select-#{$size}.#{$carbon-prefix}--list-box {
@@ -56,6 +56,10 @@ $row-heights: (
   }
 }
 
+.#{$block-class} {
+  --#{$block-class}--grid-header-height: 0;
+}
+
 .#{$block-class}__inline-edit-cell {
   display: flex;
   height: 100%;
@@ -75,6 +79,7 @@ $row-heights: (
 .#{$block-class}__inline-edit--outer-cell-button
   .#{$block-class}__inline-edit-button {
   position: relative;
+  z-index: 2;
   display: flex;
   width: 100%;
   height: 100%;
@@ -90,6 +95,7 @@ $row-heights: (
   }
   &.#{$block-class}__inline-edit-button--non-edit {
     padding-left: 0;
+    cursor: default;
   }
   .#{$block-class}__inline-edit-button-icon {
     height: $spacing-05;
@@ -211,7 +217,176 @@ $row-heights: (
   white-space: nowrap;
 }
 
-.#{$carbon-prefix}--data-table .#{$block-class}__carbon-row-hover-active td {
+.#{$block-class}
+  .#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-row-hover-active
+  td {
   border-top-color: $hover-ui;
   background-color: $hover-ui;
 }
+
+// Custom border/outline for the focus region, because of the scrolling
+// containers, using default border or outline did not
+.#{$block-class} .#{$block-class}__grid-container-grid-active::before {
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+  height: calc(100% - 50px - var(--#{$block-class}--grid-header-height));
+  background-color: $inverse-link;
+  content: '';
+}
+
+.#{$block-class} .#{$block-class}__grid-container-grid-active::after {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  width: 2px;
+  height: calc(100% - 50px - var(--#{$block-class}--grid-header-height));
+  background-color: $inverse-link;
+  content: '';
+}
+
+.#{$block-class}
+  .#{$block-class}__grid-container-grid-active
+  .#{$carbon-prefix}--data-table-content::before {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: var(--#{$block-class}--grid-width);
+  height: 2px;
+  background-color: $inverse-link;
+}
+
+.#{$block-class}
+  .#{$block-class}__grid-container-grid-active.#{$block-class}__grid-container-grid-active--without-toolbar::before,
+.#{$block-class}
+  .#{$block-class}__grid-container-grid-active.#{$block-class}__grid-container-grid-active--without-toolbar::after {
+  height: calc(100% - 2px - var(--#{$block-class}--grid-header-height));
+}
+
+.#{$block-class}
+  .#{$block-class}__grid-container-grid-active
+  .#{$block-class}__table-container {
+  outline: 2px solid $inverse-link;
+  outline-offset: -2px;
+}
+
+.#{$block-class}
+  .#{$block-class}__grid-container-inline-edit
+  .#{$block-class}__table-container {
+  padding-top: $spacing-01;
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  [data-invalid]
+  ~ .#{$carbon-prefix}--form-requirement,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  [data-invalid]
+  .#{$carbon-prefix}--form-requirement {
+  position: absolute;
+  z-index: 3;
+  top: calc(100% - #{$spacing-01});
+  width: 100%;
+  padding: $spacing-03 $spacing-06 $spacing-03 $spacing-03;
+  margin: 0;
+  background-color: $ui-01;
+  outline: $spacing-01 solid $danger-02;
+  outline-offset: calc(-1 * #{$spacing-01});
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--list-box[data-invalid]:focus-within
+  ~ .#{$carbon-prefix}--form-requirement {
+  outline: $spacing-01 solid $focus;
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--list-box__invalid-icon,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--text-input__invalid-icon,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number__invalid {
+  z-index: 4;
+  top: calc(100% + #{$spacing-04} + #{$spacing-01});
+  right: $spacing-03;
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number__invalid {
+  top: calc(100% + #{$spacing-02} + #{$spacing-01});
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--form-requirement::before {
+  position: absolute;
+  top: 0;
+  left: $spacing-01;
+  width: calc(100% - (#{$spacing-01} * 2));
+  height: $spacing-01;
+  background-color: $ui-01;
+  content: '';
+}
+
+.#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--form-requirement::after {
+  position: absolute;
+  top: $spacing-01;
+  left: $spacing-03;
+  width: calc(100% - (#{$spacing-03} * 2));
+  height: 1px;
+  background-color: $ui-03;
+  content: '';
+}
+
+.#{$block-class} tbody tr:hover {
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+    .#{$carbon-prefix}--form-requirement::before {
+    background-color: $ui-03;
+  }
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+    .#{$carbon-prefix}--form-requirement::after {
+    background-color: transparent;
+  }
+}
+
+// Keep input focus states using $support-01 when inline edit cell is invalid
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--text-input:focus,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number
+  input[type='number']:focus,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number
+  input[type='number']:focus
+  ~ .#{$carbon-prefix}--number__controls
+  .#{$carbon-prefix}--number__control-btn:hover,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number__control-btn:focus {
+  outline-color: $support-01;
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number
+  input[type='number'][data-invalid]:focus
+  ~ .#{$carbon-prefix}--number__controls
+  .#{$carbon-prefix}--number__control-btn.up-icon::after {
+  background-color: $support-01;
+}

package/scss/components/InlineEdit/_inline-edit.scss

@@ -105,9 +105,11 @@
       overflow: hidden;
       // positions text and placeholder including when showing placeholder
       // NOTE: Using flex does strange things to a caret in content editable
-      width: calc(100% - var(--#{$block-class}--toolbar-width) - $spacing-05);
+      width: calc(
+        100% - var(--#{$block-class}--toolbar-width) - #{$spacing-05}
+      );
       max-width: calc(
-        100% - var(--#{$block-class}--toolbar-width) - $spacing-05
+        100% - var(--#{$block-class}--toolbar-width) - #{$spacing-05}
       );
       min-height: var(--#{$block-class}--size);
       /* stylelint-disable-next-line carbon/layout-token-use */

package/scss/components/InlineEditV2/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// An index file is most useful when you have multiple components
+
+@import './inline-edit-v2';

package/scss/components/InlineEditV2/_inline-edit-v2.scss

@@ -0,0 +1,81 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import 'carbon-components/scss/components/button/button';
+@import 'carbon-components/scss/components/text-input/text-input';
+
+@mixin inline-edit-v2 {
+  $block-class: #{$pkg-prefix}--inline-edit-v2;
+  $carbon-text-input: #{$carbon-prefix}--text-input;
+
+  .#{$block-class} {
+    display: flex;
+    align-items: center;
+    background: transparent;
+    cursor: pointer;
+
+    &-readonly {
+      cursor: not-allowed;
+    }
+
+    &:hover {
+      background: $hover-ui;
+    }
+
+    &:hover .#{$block-class}__btn-edit {
+      visibility: visible;
+    }
+
+    &__btn-edit {
+      visibility: hidden;
+    }
+
+    &-focused {
+      background: $hover-ui;
+      outline: 2px solid $focus;
+    }
+
+    &__text-input {
+      flex: 1;
+    }
+
+    &__warning-icon {
+      color: $support-01;
+    }
+
+    &__warning-text {
+      @include carbon--type-style('caption-01');
+
+      margin-top: $spacing-03;
+      color: $support-01;
+    }
+  }
+
+  // overrides
+  .#{$block-class}__text-input.#{$carbon-text-input} {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-text-input} {
+    color: $disabled-02;
+    cursor: not-allowed;
+  }
+
+  .#{$block-class}__text-input.#{$carbon-text-input}:focus,
+  .#{$block-class}__text-input.#{$carbon-text-input}:active {
+    outline: none;
+  }
+}
+
+@include exports('inline-edit-v2') {
+  @include inline-edit-v2;
+}

package/scss/components/ModifiedTabs/_modified-tabs.scss

@@ -32,8 +32,8 @@
   height: 2.5rem;
   padding: $spacing-04;
   border: $spacing-01 solid transparent;
-  background-color: transparent;
   border-radius: 0;
+  background-color: transparent;
   cursor: pointer;
   transition: background-color $duration--fast-02 motion(standard, productive);
   // stylelint-disable-next-line max-nesting-depth

package/scss/components/PageHeader/_page-header.scss

@@ -471,6 +471,10 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       vertical-align: middle;
     }
 
+    .#{$block-class}__title-wrapper {
+      @include carbon--type-style('productive-heading-04');
+    }
+
     .#{$block-class}__page-actions {
       flex: 0 0 100%;
       margin-top: $spacing-05;