@thecb/components 11.11.0-beta.8 → 11.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.11.0-beta.8",
+  "version": "11.11.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/tooltip/Tooltip.js

@@ -38,7 +38,13 @@ const Tooltip = ({
   customTriggerRole,
   backgroundColor = WHITE
 }) => {
+  /**
+   * 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.
+   */
   const closeTimeoutRef = 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.
+   */
   const containerRef = useRef(null);
 
   const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -65,6 +71,7 @@ const Tooltip = ({
   };
 
   /**
+   * @function renderTrigger
    * Renders the tooltip trigger element.
    *
    * When `hasCustomTrigger` is true, the provided child element is cloned and
@@ -91,7 +98,9 @@ const Tooltip = ({
 
     if (hasCustomTrigger && children) {
       const child = React.Children.only(children);
-      // Capture the child's existing handlers before overwriting
+      /**
+       * Capture the child's existing handlers before overwriting
+       */
       const {
         onFocus: childOnFocus,
         onBlur: childOnBlur,
@@ -99,8 +108,12 @@ const Tooltip = ({
         onTouchStart: childOnTouchStart
       } = child.props ?? {};
 
+      /**
+       * Clone the child element and add the necessary event handlers
+       */
       return React.cloneElement(child, {
         tabIndex: child.props?.tabIndex ?? 0,
+        ariaDescribedby: tooltipID,
         style: { cursor: `pointer`, ...child.props?.style },
         onFocus: e => {
           childOnFocus?.(e);
@@ -130,7 +143,7 @@ const Tooltip = ({
           variant={triggerButtonVariant}
           text={triggerText}
           tabIndex={0}
-          ariaDescribedby={tooltipID}
+          aria-describedby={tooltipID}
           onFocus={() => handleToggleTooltip(true)}
           onBlur={() => handleToggleTooltip(false)}
           onTouchStart={() => handleToggleTooltip(true)}
@@ -145,6 +158,12 @@ const Tooltip = ({
       );
     }
   };
+
+  /**
+   * @function handleMouseEnter
+   * Handles the mouse enter event for the tooltip container.
+   * It clears any existing timeout and opens the tooltip.
+   */
   const handleMouseEnter = () => {
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current);
@@ -152,13 +171,22 @@ const Tooltip = ({
     }
     handleToggleTooltip(true);
   };
+
+  /**
+   * @function handleMouseLeave
+   * Handles the mouse leave event for the tooltip container.
+   * It sets a timeout to close the tooltip after 200ms.
+   */
   const handleMouseLeave = () => {
     closeTimeoutRef.current = setTimeout(() => {
       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.
+   */
   useEffect(() => {
     if (!tooltipOpen) return;
 
@@ -171,10 +199,12 @@ const Tooltip = ({
     return () => document.removeEventListener("touchstart", handleOutsideTouch);
   }, [tooltipOpen]);
 
-  // Unmount cleanup only
+  /**
+   * Cleans up the timeout when the component unmounts.
+   */
   useEffect(() => {
     return () => {
-      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+      if (closeTimeoutRef?.current) clearTimeout(closeTimeoutRef.current);
     };
   }, []);