@carbon/ibm-products 2.43.2-canary.278 → 2.43.2-canary.282

package/es/components/TagSet/TagSet.d.ts

@@ -54,6 +54,10 @@ export interface TagSetProps extends PropsWithChildren {
      * display tags in multiple lines
      */
     multiline?: boolean;
+    /**
+     * An optional click handler that overrides the default functionality of displaying all tags in a modal
+     */
+    onOverflowClick?: ((overFlowTags: ReactNode[]) => void) | undefined;
     /**
      * Handler to get overflow tags
      */

package/es/components/TagSet/TagSet.js

@@ -17,7 +17,7 @@ import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalAriaLabel", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalAriaLabel", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "onOverflowClick", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label", "onClose"];
 var componentName = 'TagSet';
@@ -54,6 +54,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     allTagsModalSearchPlaceholderText = _ref$allTagsModalSear2 === void 0 ? 'Search all tags' : _ref$allTagsModalSear2,
     _ref$showAllTagsLabel = _ref.showAllTagsLabel,
     showAllTagsLabel = _ref$showAllTagsLabel === void 0 ? 'View all tags' : _ref$showAllTagsLabel,
+    onOverflowClick = _ref.onOverflowClick,
     tags = _ref.tags,
     containingElementRef = _ref.containingElementRef,
     _ref$measurementOffse = _ref.measurementOffset,
@@ -170,11 +171,12 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       key: "displayed-tag-overflow",
       ref: overflowTag,
       popoverOpen: popoverOpen,
+      onOverflowClick: onOverflowClick,
       setPopoverOpen: setPopoverOpen
     }));
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(newOverflowTags);
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
+  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, onOverflowClick, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
   var checkFullyVisibleTags = useCallback(function () {
     if (multiline) {
       return setDisplayCount(maxVisibleCount);
@@ -245,12 +247,12 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, hiddenSizingTags), /*#__PURE__*/React__default.createElement("div", {
     className: cx(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
     ref: displayedArea
-  }, displayedTags)), /*#__PURE__*/React__default.createElement(TagSetModal, {
+  }, displayedTags)), !onOverflowClick && /*#__PURE__*/React__default.createElement(TagSetModal, {
     allTags: tags,
     open: showAllModalOpen,
     title: allTagsModalTitle,
-    modalAriaLabel: allTagsModalAriaLabel,
     onClose: handleModalClose,
+    modalAriaLabel: allTagsModalAriaLabel,
     searchLabel: allTagsModalSearchLabel,
     searchPlaceholder: allTagsModalSearchPlaceholderText,
     portalTarget: allTagsModalTarget
@@ -334,6 +336,10 @@ TagSet.propTypes = {
    * display tags in multiple lines
    */
   multiline: PropTypes.bool,
+  /**
+   * An optional click handler that overrides the default functionality of displaying all tags in a modal
+   */
+  onOverflowClick: PropTypes.func,
   /**
    * Handler to get overflow tags
    */

package/es/components/TagSet/TagSetOverflow.d.ts

@@ -10,6 +10,10 @@ interface TagSetOverflowProps {
      * className
      */
     className?: string;
+    /**
+     * An optional click handler that overrides the default functionality of displaying all tags in a modal
+     */
+    onOverflowClick?: ((overFlowTags: ReactNode[]) => void) | undefined;
     /**
      * function to execute on clicking show all
      */
@@ -37,7 +41,7 @@ interface TagSetOverflowProps {
     /**
      * Setter function for the popoverOpen state value
      */
-    setPopoverOpen?: ((value: boolean) => void) | undefined;
+    setPopoverOpen: (value: boolean) => void;
     /**
      * label for the overflow show all tags link
      */

package/es/components/TagSet/TagSetOverflow.js

@@ -9,11 +9,11 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import React__default, { useRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { Popover, OperationalTag, PopoverContent, Link } from '@carbon/react';
+import { OperationalTag, Popover, PopoverContent, Link } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen", "size"];
+var _excluded = ["allTagsModalSearchThreshold", "onOverflowClick", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen", "size"];
 var componentName = 'TagSetOverflow';
 var blockClass = "".concat(pkg.prefix, "--tag-set-overflow");
 
@@ -24,6 +24,7 @@ var defaults = {
 var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
     allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
+    onOverflowClick = _ref.onOverflowClick,
     className = _ref.className,
     onShowAllClick = _ref.onShowAllClick,
     _ref$overflowAlign = _ref.overflowAlign,
@@ -40,21 +41,44 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var overflowTagContent = useRef(null);
   useClickOutside(ref || localRef, function () {
     if (popoverOpen) {
-      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+      setPopoverOpen(false);
     }
   });
   var handleShowAllTagsClick = function handleShowAllTagsClick(ev) {
     ev.stopPropagation();
     ev.preventDefault();
-    setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+    setPopoverOpen(false);
     onShowAllClick();
   };
   var handleEscKeyPress = function handleEscKeyPress(event) {
     var key = event.key;
     if (key === 'Escape') {
-      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+      setPopoverOpen(false);
     }
   };
+  var handleOverflowClick = function handleOverflowClick() {
+    // If a custom overflow function is provided then trigger that function
+    // on clicking the overflow
+    if (onOverflowClick) {
+      onOverflowClick(overflowTags);
+    } else {
+      setPopoverOpen(!popoverOpen);
+    }
+  };
+  if (onOverflowClick) {
+    return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
+      "aria-hidden": overflowTags.length === 0,
+      className: cx("".concat(blockClass), _defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
+      ref: ref || localRef
+    }), /*#__PURE__*/React__default.createElement(OperationalTag, {
+      onClick: function onClick() {
+        return handleOverflowClick();
+      },
+      className: "".concat(blockClass, "__popover-trigger"),
+      size: size,
+      text: "+".concat(overflowTags.length)
+    }));
+  }
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
     "aria-hidden": overflowTags.length === 0,
     className: cx("".concat(blockClass), _defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
@@ -69,7 +93,7 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     autoAlign: overflowAutoAlign
   }, /*#__PURE__*/React__default.createElement(OperationalTag, {
     onClick: function onClick() {
-      return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
+      return setPopoverOpen(!popoverOpen);
     },
     className: cx("".concat(blockClass, "__popover-trigger")),
     size: size,
@@ -112,6 +136,10 @@ TagSetOverflow.propTypes = {
    * className
    */
   className: PropTypes.string,
+  /**
+   * An optional click handler that overrides the default functionality of displaying all tags in a modal
+   */
+  onOverflowClick: PropTypes.func,
   /**
    * function to execute on clicking show all
    */
@@ -140,7 +168,7 @@ TagSetOverflow.propTypes = {
   /**
    * Setter function for the popoverOpen state value
    */
-  setPopoverOpen: PropTypes.func,
+  setPopoverOpen: PropTypes.func.isRequired,
   /**
    * label for the overflow show all tags link
    */

package/lib/components/TagSet/TagSet.d.ts

@@ -54,6 +54,10 @@ export interface TagSetProps extends PropsWithChildren {
      * display tags in multiple lines
      */
     multiline?: boolean;
+    /**
+     * An optional click handler that overrides the default functionality of displaying all tags in a modal
+     */
+    onOverflowClick?: ((overFlowTags: ReactNode[]) => void) | undefined;
     /**
      * Handler to get overflow tags
      */

package/lib/components/TagSet/TagSet.js

@@ -19,7 +19,7 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalAriaLabel", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalAriaLabel", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "onOverflowClick", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label", "onClose"];
 var componentName = 'TagSet';
@@ -56,6 +56,7 @@ exports.TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     allTagsModalSearchPlaceholderText = _ref$allTagsModalSear2 === void 0 ? 'Search all tags' : _ref$allTagsModalSear2,
     _ref$showAllTagsLabel = _ref.showAllTagsLabel,
     showAllTagsLabel = _ref$showAllTagsLabel === void 0 ? 'View all tags' : _ref$showAllTagsLabel,
+    onOverflowClick = _ref.onOverflowClick,
     tags = _ref.tags,
     containingElementRef = _ref.containingElementRef,
     _ref$measurementOffse = _ref.measurementOffset,
@@ -172,11 +173,12 @@ exports.TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       key: "displayed-tag-overflow",
       ref: overflowTag,
       popoverOpen: popoverOpen,
+      onOverflowClick: onOverflowClick,
       setPopoverOpen: setPopoverOpen
     }));
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(newOverflowTags);
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
+  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, onOverflowClick, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
   var checkFullyVisibleTags = React.useCallback(function () {
     if (multiline) {
       return setDisplayCount(maxVisibleCount);
@@ -247,12 +249,12 @@ exports.TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, hiddenSizingTags), /*#__PURE__*/React.createElement("div", {
     className: cx(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
     ref: displayedArea
-  }, displayedTags)), /*#__PURE__*/React.createElement(TagSetModal.TagSetModal, {
+  }, displayedTags)), !onOverflowClick && /*#__PURE__*/React.createElement(TagSetModal.TagSetModal, {
     allTags: tags,
     open: showAllModalOpen,
     title: allTagsModalTitle,
-    modalAriaLabel: allTagsModalAriaLabel,
     onClose: handleModalClose,
+    modalAriaLabel: allTagsModalAriaLabel,
     searchLabel: allTagsModalSearchLabel,
     searchPlaceholder: allTagsModalSearchPlaceholderText,
     portalTarget: allTagsModalTarget
@@ -336,6 +338,10 @@ exports.TagSet.propTypes = {
    * display tags in multiple lines
    */
   multiline: index.default.bool,
+  /**
+   * An optional click handler that overrides the default functionality of displaying all tags in a modal
+   */
+  onOverflowClick: index.default.func,
   /**
    * Handler to get overflow tags
    */

package/lib/components/TagSet/TagSetOverflow.d.ts

@@ -10,6 +10,10 @@ interface TagSetOverflowProps {
      * className
      */
     className?: string;
+    /**
+     * An optional click handler that overrides the default functionality of displaying all tags in a modal
+     */
+    onOverflowClick?: ((overFlowTags: ReactNode[]) => void) | undefined;
     /**
      * function to execute on clicking show all
      */
@@ -37,7 +41,7 @@ interface TagSetOverflowProps {
     /**
      * Setter function for the popoverOpen state value
      */
-    setPopoverOpen?: ((value: boolean) => void) | undefined;
+    setPopoverOpen: (value: boolean) => void;
     /**
      * label for the overflow show all tags link
      */

package/lib/components/TagSet/TagSetOverflow.js

@@ -15,7 +15,7 @@ var react = require('@carbon/react');
 var settings = require('../../settings.js');
 var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
 
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen", "size"];
+var _excluded = ["allTagsModalSearchThreshold", "onOverflowClick", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen", "size"];
 var componentName = 'TagSetOverflow';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-set-overflow");
 
@@ -26,6 +26,7 @@ var defaults = {
 var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
     allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
+    onOverflowClick = _ref.onOverflowClick,
     className = _ref.className,
     onShowAllClick = _ref.onShowAllClick,
     _ref$overflowAlign = _ref.overflowAlign,
@@ -42,21 +43,44 @@ var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var overflowTagContent = React.useRef(null);
   useClickOutside.useClickOutside(ref || localRef, function () {
     if (popoverOpen) {
-      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+      setPopoverOpen(false);
     }
   });
   var handleShowAllTagsClick = function handleShowAllTagsClick(ev) {
     ev.stopPropagation();
     ev.preventDefault();
-    setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+    setPopoverOpen(false);
     onShowAllClick();
   };
   var handleEscKeyPress = function handleEscKeyPress(event) {
     var key = event.key;
     if (key === 'Escape') {
-      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
+      setPopoverOpen(false);
     }
   };
+  var handleOverflowClick = function handleOverflowClick() {
+    // If a custom overflow function is provided then trigger that function
+    // on clicking the overflow
+    if (onOverflowClick) {
+      onOverflowClick(overflowTags);
+    } else {
+      setPopoverOpen(!popoverOpen);
+    }
+  };
+  if (onOverflowClick) {
+    return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
+      "aria-hidden": overflowTags.length === 0,
+      className: cx("".concat(blockClass), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
+      ref: ref || localRef
+    }), /*#__PURE__*/React.createElement(react.OperationalTag, {
+      onClick: function onClick() {
+        return handleOverflowClick();
+      },
+      className: "".concat(blockClass, "__popover-trigger"),
+      size: size,
+      text: "+".concat(overflowTags.length)
+    }));
+  }
   return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-hidden": overflowTags.length === 0,
     className: cx("".concat(blockClass), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
@@ -71,7 +95,7 @@ var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     autoAlign: overflowAutoAlign
   }, /*#__PURE__*/React.createElement(react.OperationalTag, {
     onClick: function onClick() {
-      return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
+      return setPopoverOpen(!popoverOpen);
     },
     className: cx("".concat(blockClass, "__popover-trigger")),
     size: size,
@@ -114,6 +138,10 @@ TagSetOverflow.propTypes = {
    * className
    */
   className: index.default.string,
+  /**
+   * An optional click handler that overrides the default functionality of displaying all tags in a modal
+   */
+  onOverflowClick: index.default.func,
   /**
    * function to execute on clicking show all
    */
@@ -142,7 +170,7 @@ TagSetOverflow.propTypes = {
   /**
    * Setter function for the popoverOpen state value
    */
-  setPopoverOpen: index.default.func,
+  setPopoverOpen: index.default.func.isRequired,
   /**
    * label for the overflow show all tags link
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.278+459109d08",
+  "version": "2.43.2-canary.282+30596f136",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -81,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.10.0-rc.0",
+    "jest-config-ibm-cloud-cognitive": "^1.10.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.22.0",
-    "@carbon/ibm-products-styles": "^2.39.1-canary.288+459109d08",
+    "@carbon/ibm-products-styles": "^2.47.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "459109d08ca6baf6a66954dd6fa49360dc553dc6"
+  "gitHead": "30596f136ad0ee274e0b4f55bd5fc1f1e4c40530"
 }

package/telemetry.yml

@@ -18,6 +18,7 @@ collect:
         - align
         - allPageRowsLabel
         - allRowsLabel
+        - allTagsModalAriaLabel
         - allTagsModalSearchLabel
         - allTagsModalSearchPlaceholderText
         - allTagsModalSearchThreshold
@@ -131,6 +132,7 @@ collect:
         - hasCloseIcon
         - hasCustomRowHeader
         - hasFieldset
+        - headerActions
         - headerGroups
         - HeaderRow
         - headers
@@ -227,6 +229,7 @@ collect:
         - onMouseEnter
         - onMouseLeave
         - onNext
+        - onOverflowClick
         - onOverflowTagChange
         - onPrimaryButtonClick
         - onRemove
@@ -357,6 +360,7 @@ collect:
         - totalVisibleColumns
         - translateWithId
         - translateWithIdBatchActions
+        - triggerButtonRef
         - truncate
         - truncateValue
         - type
@@ -768,7 +772,6 @@ collect:
         - secondsAgoText
         - settingsIconDescription
         - todayLabel
-        - triggerButtonRef
         - yearAgoText
         - yearsAgoText
         - yesterdayAtText
@@ -883,8 +886,6 @@ collect:
         - width
         # TagOverflow
         - tagComponent
-        # TearsheetShell
-        - headerActions
         # Toolbar
         - vertical
         # ToolbarButton