@carbon/ibm-products 1.60.0 → 1.61.1

package/lib/components/TagSet/TagSetOverflow.js

@@ -16,7 +16,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _carbonComponentsReact = require("carbon-components-react");
 var _settings = require("../../settings");
 var _pconsole = require("../../global/js/utils/pconsole");
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "showAllTagsLabel"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "overflowType", "showAllTagsLabel"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var componentName = 'TagSetOverflow';
@@ -38,6 +38,7 @@ var TagSetOverflow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     _ref$overflowDirectio = _ref.overflowDirection,
     overflowDirection = _ref$overflowDirectio === void 0 ? defaults.overflowDirection : _ref$overflowDirectio,
     overflowTags = _ref.overflowTags,
+    overflowType = _ref.overflowType,
     showAllTagsLabel = _ref.showAllTagsLabel,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
@@ -81,12 +82,18 @@ var TagSetOverflow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, overflowTags.filter(function (_, index) {
     return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
   }).map(function (tag, index) {
+    var _cx2;
+    var tagProps = {};
+    if (overflowType === 'tag') {
+      tagProps.type = 'high-contrast';
+    }
+    if (overflowType === 'default') {
+      tagProps.filter = false;
+    }
     return /*#__PURE__*/_react.default.createElement("li", {
-      className: "".concat(blockClass, "__tag-item"),
+      className: (0, _classnames.default)("".concat(blockClass, "__tag-item"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag'), _cx2)),
       key: index
-    }, /*#__PURE__*/_react.default.cloneElement(tag, {
-      filter: false
-    }));
+    }, /*#__PURE__*/_react.default.cloneElement(tag, tagProps));
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
@@ -121,6 +128,10 @@ TagSetOverflow.propTypes = {
    * tags shown in overflow
    */
   overflowTags: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: _propTypes.default.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link
    */

package/lib/components/index.js

@@ -207,6 +207,24 @@ Object.defineProperty(exports, "Guidebanner", {
     return _Guidebanner.Guidebanner;
   }
 });
+Object.defineProperty(exports, "GuidebannerElement", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.GuidebannerElement;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementButton", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.GuidebannerElementButton;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementLink", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.GuidebannerElementLink;
+  }
+});
 Object.defineProperty(exports, "HTTPError403", {
   enumerable: true,
   get: function get() {
@@ -243,6 +261,18 @@ Object.defineProperty(exports, "InlineTip", {
     return _InlineTip.InlineTip;
   }
 });
+Object.defineProperty(exports, "InlineTipButton", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTip.InlineTipButton;
+  }
+});
+Object.defineProperty(exports, "InlineTipLink", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTip.InlineTipLink;
+  }
+});
 Object.defineProperty(exports, "ModifiedTabs", {
   enumerable: true,
   get: function get() {

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

@@ -73,7 +73,12 @@ var defaults = {
     ButtonMenu: false,
     // Novice to pro components not yet reviewed and released:
     InlineTip: false,
+    InlineTipButton: false,
+    InlineTipLink: false,
     Guidebanner: false,
+    GuidebannerElement: false,
+    GuidebannerElementButton: false,
+    GuidebannerElementLink: false,
     NonLinearReading: false,
     Checklist: false,
     Coachmark: false,

package/lib/global/js/utils/getNodeTextContent.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNodeTextContent = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Returns a compiled string of all the text content of a React node and any of its child nodes.
+ * This is meant to be used in a limited fashion to convert a "styled" sentence into a single string:
+ *   e.g. <p>Title <b>Page</b>.</p> --> "Title Page."
+ * This will likely not work for arrays of nodes due to the lack of word spacing:
+ *   e.g. <ul>
+ *          <li>Item 1</li>
+ *          <li>Item 2</li>
+ *          <li>Item 3</li>
+ *        </ul>
+ *        --> "Item 1Item 2Item 3"
+ * @param {Node} node A React node
+ * @returns {string}
+ */
+var getNodeTextContent = function getNodeTextContent(node) {
+  if (node == null) {
+    return '';
+  }
+  switch ((0, _typeof2.default)(node)) {
+    case 'string':
+    case 'number':
+      return node.toString();
+    case 'object':
+      {
+        if (node instanceof Array) {
+          return node.map(getNodeTextContent).join('');
+        }
+        if ('props' in node) {
+          return getNodeTextContent(node.props.children);
+        }
+
+        // Ignore any other JavaScript 'object' types.
+        return '';
+      }
+    case 'function':
+      {
+        return getNodeTextContent(node());
+      }
+    default:
+      // Ignore all other JavaScript types.
+      return '';
+  }
+};
+exports.getNodeTextContent = getNodeTextContent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.60.0",
+  "version": "1.61.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -91,11 +91,11 @@
     "@carbon/motion": "^10.29.2",
     "@carbon/themes": "^10.55.3",
     "@carbon/type": "^10.45.3",
-    "carbon-components": "^10.58.10",
-    "carbon-components-react": "^7.59.14",
+    "carbon-components": "^10.58.12",
+    "carbon-components-react": "^7.59.16",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "60db5711e16835785348a1fc148a7c346bad5bde"
+  "gitHead": "9c214f67bed9419967e0d865ab4fec31f923c64c"
 }

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -46,21 +46,6 @@
       }
     }
 
-    &-ring {
-      .#{$block-class}__center {
-        -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
-        mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
-
-        circle {
-          /* stylelint-disable-next-line carbon/motion-easing-use */
-          animation: ring-ripple $beaconAnimationTime infinite;
-          @media (prefers-reduced-motion) {
-            animation: none;
-          }
-        }
-      }
-    }
-
     .#{$block-class}__target {
       // the hit area
       position: absolute;

package/scss/components/Datagrid/_datagrid.scss

@@ -19,6 +19,7 @@
 
 // Datagrid uses the following Carbon for IBM Products components:
 // TODO: @import(s) of IBM Products component styles used by Datagrid
+@import '../FilterSummary/filter-summary';
 
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.

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

@@ -147,3 +147,18 @@ $block-class: #{$pkg-prefix}--datagrid;
     width: 100vw;
   }
 }
+
+.#{$carbon-prefix}--tooltip__trigger:hover
+  .#{$pkg-prefix}--status-icon--light.#{$pkg-prefix}--status-icon--light-minor-warning {
+  fill: $support-03;
+}
+
+.#{$carbon-prefix}--tooltip__trigger:hover
+  .#{$pkg-prefix}--status-icon--light.#{$pkg-prefix}--status-icon--light-normal {
+  fill: $support-02;
+}
+
+.#{$carbon-prefix}--tooltip__trigger:hover
+  .#{$pkg-prefix}--status-icon--light.#{$pkg-prefix}--status-icon--light-critical {
+  fill: $support-01;
+}

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

@@ -108,18 +108,14 @@ $row-heights: (
     justify-content: flex-start;
   }
   // Always show renderIcon if inline edit columns are less than half of total columns
-  &:not(
-      .#{$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
-    ) {
-    .#{$block-class}__inline-edit-button-icon {
-      display: none;
-    }
+  .#{$block-class}__inline-edit-button-icon {
+    display: none;
+  }
 
-    /* stylelint-disable-next-line */
-    &:hover {
-      .#{$block-class}__inline-edit-button-icon {
-        display: block;
-      }
+  &:hover,
+  &.#{$block-class}__inline-edit-button--active {
+    .#{$block-class}__inline-edit-button-icon {
+      display: block;
     }
   }
 }

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -22,7 +22,48 @@
 }
 
 .#{$carbon-prefix}--btn--ghost.#{$block-class}__row-size-button--open {
-  background-color: $ui-background;
+  background-color: $ui-02;
 
   box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
 }
+
+// Top align cell content for xl row size
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-center
+  td,
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-top
+  td {
+  align-items: flex-start;
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-05;
+
+  &.#{$block-class}__actions-column-cell {
+    padding-left: $spacing-03;
+  }
+}
+
+// Top align header content for xl row size
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-center
+  th,
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-top
+  th {
+  .#{$carbon-prefix}--table-header-label {
+    align-items: flex-start;
+  }
+}
+
+// Top align checkbox row header for xl row size
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-center
+  .#{$block-class}__checkbox-cell
+  th.#{$carbon-prefix}--table-column-checkbox {
+  align-items: flex-start;
+  padding-top: $spacing-04;
+}
+
+.#{$block-class}__row-size__row-settings-trigger--open.#{$carbon-prefix}--btn--ghost {
+  background-color: $ui-02;
+}

package/scss/components/TagSet/_tag-set.scss

@@ -70,7 +70,7 @@ $block-class-modal: #{$block-class}-modal;
   }
 
   .#{$block-class-overflow}__tooltip
-    .#{$block-class-overflow}__tag-item
+    .#{$block-class-overflow}__tag-item--default
     .#{$carbon-prefix}--tag {
     border-radius: 0;
   }
@@ -127,13 +127,23 @@ $block-class-modal: #{$block-class}-modal;
       text-align: left;
     }
 
+    &.#{$carbon-prefix}--tooltip button {
+      padding-right: 0;
+    }
+
     .#{$block-class-overflow}__show-all-tags-link {
       display: inline-block;
       margin: $spacing-03 0 $spacing-02; // to match the tags
     }
 
-    .#{$block-class-overflow}__tag-item,
-    .#{$block-class-overflow}__tag-item .#{$carbon-prefix}--tag {
+    .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
+      .#{$carbon-prefix}--tag {
+      background-color: $inverse-hover-ui;
+    }
+
+    .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
+    .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
+      .#{$carbon-prefix}--tag {
       @include carbon--type-style('body-short-01');
 
       display: block;

package/es/components/Datagrid/utils/getColTitle.js

@@ -1,25 +0,0 @@
-// This function recursively looks for the nested header element until we can find the key which contains the title.
-// This can happen if multiple hooks are used together that manipulate the rendering of the column
-// header, such as `useColumnCenterAlign` and `useSortableColumns`.
-var getNestedTitle = function getNestedTitle(component) {
-  if (component && !component.key) {
-    return getNestedTitle(component.children);
-  }
-  if (component && component.key && typeof component.key === 'string') {
-    return component.key;
-  }
-};
-var getColTitle = function getColTitle(col) {
-  var _col$Header, _col$Header$props;
-  if (!col) {
-    return;
-  }
-  var checkTitle = function checkTitle() {
-    if (col.Header().props.children.props && col.Header().props.children.props.title) {
-      return col.Header().props.children.props.title;
-    }
-    return getNestedTitle(col.Header().props.children.props);
-  };
-  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 ? void 0 : (_col$Header = col.Header) === null || _col$Header === void 0 ? void 0 : (_col$Header$props = _col$Header.props) === null || _col$Header$props === void 0 ? void 0 : _col$Header$props.title;
-};
-export default getColTitle;

package/lib/components/Datagrid/utils/getColTitle.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-// This function recursively looks for the nested header element until we can find the key which contains the title.
-// This can happen if multiple hooks are used together that manipulate the rendering of the column
-// header, such as `useColumnCenterAlign` and `useSortableColumns`.
-var getNestedTitle = function getNestedTitle(component) {
-  if (component && !component.key) {
-    return getNestedTitle(component.children);
-  }
-  if (component && component.key && typeof component.key === 'string') {
-    return component.key;
-  }
-};
-var getColTitle = function getColTitle(col) {
-  var _col$Header, _col$Header$props;
-  if (!col) {
-    return;
-  }
-  var checkTitle = function checkTitle() {
-    if (col.Header().props.children.props && col.Header().props.children.props.title) {
-      return col.Header().props.children.props.title;
-    }
-    return getNestedTitle(col.Header().props.children.props);
-  };
-  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 ? void 0 : (_col$Header = col.Header) === null || _col$Header === void 0 ? void 0 : (_col$Header$props = _col$Header.props) === null || _col$Header$props === void 0 ? void 0 : _col$Header$props.title;
-};
-var _default = getColTitle;
-exports.default = _default;