@thecb/components 11.11.0-beta.7 → 11.11.0-beta.9

package/dist/index.cjs.js

@@ -40896,6 +40896,7 @@ var EditableList = function EditableList(_ref) {
     _ref$canAdd = _ref.canAdd,
     canAdd = _ref$canAdd === void 0 ? true : _ref$canAdd,
     addItem = _ref.addItem,
+    addItemDestination = _ref.addItemDestination,
     removeItem = _ref.removeItem,
     editItem = _ref.editItem,
     itemName = _ref.itemName,
@@ -41003,6 +41004,8 @@ var EditableList = function EditableList(_ref) {
     padding: items.length === 0 ? "0" : "1rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Placeholder$1, {
     text: addText,
+    isLink: !!addItemDestination,
+    destination: addItemDestination,
     action: addItem,
     dataQa: "Add " + qaPrefix,
     "aria-label": addText,
@@ -51480,6 +51483,7 @@ var fallbackValues$12 = {
   textColor: textColor$5
 };
 
+var TOOLTIP_THEME_SOURCE = "Popover";
 var Tooltip = function Tooltip(_ref) {
   var tooltipID = _ref.tooltipID,
     children = _ref.children,
@@ -51517,15 +51521,23 @@ var Tooltip = function Tooltip(_ref) {
       arrowBottom: "-8px",
       arrowLeft: "auto"
     } : _ref$arrowPosition,
+    customTriggerRole = _ref.customTriggerRole,
     _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? WHITE : _ref$backgroundColor;
+  /**
+   * closeTimeoutRef is used internally to store a timer ID for delaying tooltip close. It will have a `.current` property (the timer ID) when the effect or event handlers set it.
+   */
   var closeTimeoutRef = React.useRef(null);
+  /**
+   * containerRef is used to store a reference to the container element. It will have a `.current` property (the container element) when the effect or event handlers set it.
+   */
+  var containerRef = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     tooltipOpen = _useState2[0],
     setTooltipOpen = _useState2[1];
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$12, "Tooltip");
+  var themeValues = createThemeValues(themeContext, fallbackValues$12, TOOLTIP_THEME_SOURCE);
   var top = contentPosition.top,
     right = contentPosition.right,
     bottom = contentPosition.bottom,
@@ -51544,35 +51556,50 @@ var Tooltip = function Tooltip(_ref) {
       handleToggleTooltip(false);
     }
   };
-  var handleMouseEnter = function handleMouseEnter() {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-    handleToggleTooltip(true);
-  };
-  var handleMouseLeave = function handleMouseLeave() {
-    closeTimeoutRef.current = setTimeout(function () {
-      handleToggleTooltip(false);
-    }, 300);
-  };
-  React.useEffect(function () {
-    return function () {
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-    };
-  }, []);
+
+  /**
+   * @function renderTrigger
+   * Renders the tooltip trigger element.
+   *
+   * When `hasCustomTrigger` is true, the provided child element is cloned and
+   * injected with the event handlers needed to control tooltip visibility:
+   *  - onFocus/onBlur: open and close for keyboard users
+   *  - onKeyDown: allows Escape to dismiss the tooltip
+   *  - onTouchStart: open on tap for touch/mobile users (onFocus is unreliable on touch)
+   *
+   * Mouse interactions (hover) are handled at the container level via
+   * onMouseEnter/onMouseLeave, so they do not need to be injected here.
+   *
+   * Any existing event handlers on the child are preserved and called first,
+   * so the child's own behavior is not overridden.
+   *
+   * When no custom trigger is provided, a default ButtonWithAction is rendered
+   * using `triggerText` and `triggerButtonVariant`.
+   */
   var renderTrigger = function renderTrigger() {
+    if (hasCustomTrigger && !children) {
+      console.warn("Tooltip: children prop is required when hasCustomTrigger is true");
+    }
     if (hasCustomTrigger && children) {
-      var _child$props, _child$props2;
+      var _child$props, _child$props$tabIndex, _child$props2, _child$props3, _child$props4;
       var child = React__default.Children.only(children);
+      /**
+       * Capture the child's existing handlers before overwriting
+       */
       var _ref2 = (_child$props = child.props) !== null && _child$props !== void 0 ? _child$props : {},
         childOnFocus = _ref2.onFocus,
         childOnBlur = _ref2.onBlur,
-        childOnKeyDown = _ref2.onKeyDown;
+        childOnKeyDown = _ref2.onKeyDown,
+        childOnTouchStart = _ref2.onTouchStart;
+
+      /**
+       * Clone the child element and add the necessary event handlers
+       */
       return /*#__PURE__*/React__default.cloneElement(child, {
-        "aria-describedby": tooltipID,
+        tabIndex: (_child$props$tabIndex = (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tabIndex) !== null && _child$props$tabIndex !== void 0 ? _child$props$tabIndex : 0,
+        style: _objectSpread2({
+          cursor: "pointer"
+        }, (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.style),
         onFocus: function onFocus(e) {
           childOnFocus === null || childOnFocus === void 0 || childOnFocus(e);
           handleToggleTooltip(true);
@@ -51585,33 +51612,88 @@ var Tooltip = function Tooltip(_ref) {
           childOnKeyDown === null || childOnKeyDown === void 0 || childOnKeyDown(e);
           handleKeyDown(e);
         },
-        tabIndex: "0",
-        style: _objectSpread2(_objectSpread2({}, (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.style), {}, {
-          cursor: "pointer"
-        })
+        onTouchStart: function onTouchStart(e) {
+          childOnTouchStart === null || childOnTouchStart === void 0 || childOnTouchStart(e);
+          handleToggleTooltip(true);
+        },
+        role: customTriggerRole || ((_child$props4 = child.props) === null || _child$props4 === void 0 ? void 0 : _child$props4.role),
+        "aria-describedby": tooltipID,
+        "data-qa": "tooltip-trigger-".concat(tooltipID)
+      });
+    } else {
+      return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+        action: noop$1,
+        onKeyDown: handleKeyDown,
+        variant: triggerButtonVariant,
+        text: triggerText,
+        tabIndex: 0,
+        ariaDescribedby: tooltipID,
+        onFocus: function onFocus() {
+          return handleToggleTooltip(true);
+        },
+        onBlur: function onBlur() {
+          return handleToggleTooltip(false);
+        },
+        onTouchStart: function onTouchStart() {
+          return handleToggleTooltip(true);
+        },
+        dataQa: "tooltip-trigger-".concat(tooltipID),
+        extraStyles: "\n            color: ".concat(themeValues.linkColor, ";\n            &:hover { color: ").concat(themeValues.hoverColor, "; text-decoration: none;}\n            &:active, &:focus { color: ").concat(themeValues.activeColor, ";text-decoration: none;}\n            button, span, &:hover span { text-decoration: none; }\n          ")
       });
     }
-    return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-      action: noop$1,
-      "aria-describedby": tooltipID,
-      onKeyDown: handleKeyDown,
-      variant: triggerButtonVariant,
-      onFocus: function onFocus() {
-        return handleToggleTooltip(true);
-      },
-      onBlur: function onBlur() {
-        return handleToggleTooltip(false);
-      },
-      onTouchStart: function onTouchStart() {
-        return handleToggleTooltip(true);
-      },
-      "data-qa": "tooltip-trigger-".concat(tooltipID),
-      text: triggerText,
-      tabIndex: "0",
-      extraStyles: "\n          color: ".concat(themeValues.linkColor, ";\n          &:hover { color: ").concat(themeValues.hoverColor, "; text-decoration: none;}\n          &:active, &:focus { color: ").concat(themeValues.activeColor, ";text-decoration: none;}\n          button, span, &:hover span { text-decoration: none; }\n        ")
-    });
   };
+
+  /**
+   * @function handleMouseEnter
+   * Handles the mouse enter event for the tooltip container.
+   * It clears any existing timeout and opens the tooltip.
+   */
+  var handleMouseEnter = function handleMouseEnter() {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    handleToggleTooltip(true);
+  };
+
+  /**
+   * @function handleMouseLeave
+   * Handles the mouse leave event for the tooltip container.
+   * It sets a timeout to close the tooltip after 200ms.
+   */
+  var handleMouseLeave = function handleMouseLeave() {
+    closeTimeoutRef.current = setTimeout(function () {
+      handleToggleTooltip(false);
+    }, 200);
+  };
+
+  /**
+   * Handles the touch start event for the tooltip container.
+   * It closes the tooltip if the touch is outside the container.
+   */
+  React.useEffect(function () {
+    if (!tooltipOpen) return;
+    var handleOutsideTouch = function handleOutsideTouch(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setTooltipOpen(false);
+      }
+    };
+    document.addEventListener("touchstart", handleOutsideTouch);
+    return function () {
+      return document.removeEventListener("touchstart", handleOutsideTouch);
+    };
+  }, [tooltipOpen]);
+
+  /**
+   * Cleans up the timeout when the component unmounts.
+   */
+  React.useEffect(function () {
+    return function () {
+      if (closeTimeoutRef !== null && closeTimeoutRef !== void 0 && closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    };
+  }, []);
   return /*#__PURE__*/React__default.createElement(Box, {
+    ref: containerRef,
     padding: "0",
     extraStyles: "position: relative; ".concat(containerExtraStyles),
     onMouseEnter: handleMouseEnter,
@@ -51629,9 +51711,9 @@ var Tooltip = function Tooltip(_ref) {
     borderRadius: "4px",
     minWidth: minWidth,
     maxWidth: maxWidth
-  }, typeof content === "string" ? /*#__PURE__*/React__default.createElement(Text$1, {
+  }, typeof content === "string" && content !== "" ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: themeValues.textColor
-  }, content) : content, /*#__PURE__*/React__default.createElement(Box, {
+  }, content) : content !== undefined && content !== null ? content : null, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(backgroundColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
   })));