@carbon/ibm-products 1.32.0 → 1.33.0

package/lib/components/InlineEdit/InlineEdit.js

@@ -56,7 +56,7 @@ var buttons = ['cancel', 'edit', 'save'];
  */
 
 var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
-  var _cx, _refInput$current, _refInput$current$inn, _cx3;
+  var _cx, _refInput$current, _refInput$current$tex, _cx3;
 
   var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
       buttonTooltipPosition = _ref.buttonTooltipPosition,
@@ -81,7 +81,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       value = _ref.value,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var refInput = (0, _react.useRef)({
-    innerText: value
+    textContent: value
   });
   var localRef = (0, _react.useRef)(null);
   var ref = refIn || localRef;
@@ -163,15 +163,15 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
     document.getSelection().removeAllRanges();
 
     if (onSave) {
-      onSave(refInput.current.innerText);
+      onSave(refInput.current.textContent);
     }
   };
 
   var handleInput = function handleInput() {
-    setInternalValue(refInput.current.innerText);
+    setInternalValue(refInput.current.textContent);
 
     if (onChange) {
-      onChange(refInput.current.innerText);
+      onChange(refInput.current.textContent);
     }
   }; // pasting into contentEditable not supported by userEvent
 
@@ -206,7 +206,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
   };
 
   var handleCancel = function handleCancel() {
-    refInput.current.innerText = value;
+    refInput.current.textContent = value;
     handleInput(value);
     doSetEditing(false);
     document.getSelection().removeAllRanges();
@@ -274,7 +274,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
     }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, (0, _devtools.getDevtoolsProps)(componentName), {
       id: id,
       size: size,
-      className: (0, _classnames.default)("".concat(blockClass, "__input"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$inn = _refInput$current.innerText) === null || _refInput$current$inn === void 0 ? void 0 : _refInput$current$inn.length) === 0)),
+      className: (0, _classnames.default)("".concat(blockClass, "__input"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$tex = _refInput$current.textContent) === null || _refInput$current$tex === void 0 ? void 0 : _refInput$current$tex.length) === 0)),
       contentEditable: true,
       "aria-label": labelText,
       role: "textbox",

package/lib/components/OptionsTile/OptionsTile.js

@@ -221,12 +221,14 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__heading")
     }, /*#__PURE__*/_react.default.createElement("h6", {
       id: titleId,
-      className: "".concat(blockClass, "__title")
+      className: "".concat(blockClass, "__title"),
+      title: title
     }, title), text && /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)(summaryClasses),
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/_react.default.createElement(Icon, null), /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(blockClass, "__summary-text")
+      className: "".concat(blockClass, "__summary-text"),
+      title: text
     }, text)));
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,26 +51,26 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.13",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.19",
+    "@babel/core": "^7.19.1",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.20",
     "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.1",
-    "jest-config-ibm-cloud-cognitive": "^0.24.5",
-    "jest-environment-jsdom": "^29.0.1",
+    "jest": "^29.0.3",
+    "jest-config-ibm-cloud-cognitive": "^0.24.6",
+    "jest-environment-jsdom": "^29.0.3",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.0.6",
+    "npm-check-updates": "^16.1.3",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.8",
+    "sass": "^1.54.9",
     "yargs": "^17.5.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.9",
+    "@babel/runtime": "^7.19.0",
     "@carbon/telemetry": "^0.1.0",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
@@ -87,11 +87,11 @@
     "@carbon/motion": "^10.29.0",
     "@carbon/themes": "^10.55.0",
     "@carbon/type": "^10.45.0",
-    "carbon-components": "^10.58.0",
-    "carbon-components-react": "^7.59.0",
+    "carbon-components": "^10.58.1",
+    "carbon-components-react": "^7.59.1",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "07980288bb0aeea68a7b884846fb675e9bba82bd"
+  "gitHead": "1ac4bda25833dab9426808f9d397d0ea4c5534e4"
 }

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

@@ -86,3 +86,10 @@ $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;
+}

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%;
@@ -85,10 +90,12 @@ $row-heights: (
   cursor: pointer;
   outline: 0; // handled by active class
   .#{$block-class}__label-icon {
+    height: $spacing-05;
     padding-right: $spacing-05;
   }
   &.#{$block-class}__inline-edit-button--non-edit {
     padding-left: 0;
+    cursor: default;
   }
   .#{$block-class}__inline-edit-button-icon {
     height: $spacing-05;
@@ -209,3 +216,177 @@ $row-heights: (
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.#{$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/OptionsTile/_options-tile.scss

@@ -70,13 +70,17 @@
   }
 
   .#{$block-class}__heading {
+    overflow: hidden;
     grid-column: 2;
   }
 
   .#{$block-class}__title {
     @include carbon--type-style('productive-heading-01');
 
+    overflow: hidden;
     color: $text-01;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .#{$block-class}__summary {