@thecb/components 11.11.0-beta.8 → 11.11.0

package/dist/index.cjs.js

@@ -51524,7 +51524,13 @@ var Tooltip = function Tooltip(_ref) {
     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),
@@ -51552,6 +51558,7 @@ var Tooltip = function Tooltip(_ref) {
   };
 
   /**
+   * @function renderTrigger
    * Renders the tooltip trigger element.
    *
    * When `hasCustomTrigger` is true, the provided child element is cloned and
@@ -51576,14 +51583,21 @@ var Tooltip = function Tooltip(_ref) {
     if (hasCustomTrigger && children) {
       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
+      /**
+       * 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,
         childOnTouchStart = _ref2.onTouchStart;
+
+      /**
+       * Clone the child element and add the necessary event handlers
+       */
       return /*#__PURE__*/React__default.cloneElement(child, {
         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,
+        ariaDescribedby: tooltipID,
         style: _objectSpread2({
           cursor: "pointer"
         }, (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.style),
@@ -51614,7 +51628,7 @@ var Tooltip = function Tooltip(_ref) {
         variant: triggerButtonVariant,
         text: triggerText,
         tabIndex: 0,
-        ariaDescribedby: tooltipID,
+        "aria-describedby": tooltipID,
         onFocus: function onFocus() {
           return handleToggleTooltip(true);
         },
@@ -51629,6 +51643,12 @@ var Tooltip = function Tooltip(_ref) {
       });
     }
   };
+
+  /**
+   * @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);
@@ -51636,13 +51656,22 @@ var Tooltip = function Tooltip(_ref) {
     }
     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);
-    }, 300);
+    }, 200);
   };
 
-  // Touch listener effect
+  /**
+   * 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) {
@@ -51656,10 +51685,12 @@ var Tooltip = function Tooltip(_ref) {
     };
   }, [tooltipOpen]);
 
-  // Unmount cleanup only
+  /**
+   * Cleans up the timeout when the component unmounts.
+   */
   React.useEffect(function () {
     return function () {
-      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+      if (closeTimeoutRef !== null && closeTimeoutRef !== void 0 && closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
     };
   }, []);
   return /*#__PURE__*/React__default.createElement(Box, {