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

package/package.json

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

package/src/components/molecules/editable-list/EditableList.js

@@ -23,6 +23,7 @@ const EditableList = ({
   titleWeight = "400",
   canAdd = true,
   addItem,
+  addItemDestination,
   removeItem,
   editItem,
   itemName,
@@ -168,6 +169,8 @@ const EditableList = ({
           <Box padding={items.length === 0 ? "0" : "1rem 0 0"}>
             <Placeholder
               text={addText}
+              isLink={!!addItemDestination}
+              destination={addItemDestination}
               action={addItem}
               dataQa={"Add " + qaPrefix}
               aria-label={addText}

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

@@ -8,6 +8,8 @@ import ButtonWithAction from "../../atoms/button-with-action";
 import { noop, arrowBorder } from "../../../util/general";
 import { fallbackValues } from "./Tooltip.theme";
 
+const TOOLTIP_THEME_SOURCE = "Popover";
+
 const Tooltip = ({
   tooltipID,
   children,
@@ -33,15 +35,24 @@ const Tooltip = ({
     arrowBottom: "-8px",
     arrowLeft: "auto"
   },
+  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);
   const themeContext = useContext(ThemeContext);
   const themeValues = createThemeValues(
     themeContext,
     fallbackValues,
-    "Tooltip"
+    TOOLTIP_THEME_SOURCE
   );
 
   const { top, right, bottom, left } = contentPosition;
@@ -59,38 +70,50 @@ const Tooltip = ({
     }
   };
 
-  const handleMouseEnter = () => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
+  /**
+   * @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`.
+   */
+  const renderTrigger = () => {
+    if (hasCustomTrigger && !children) {
+      console.warn(
+        "Tooltip: children prop is required when hasCustomTrigger is true"
+      );
     }
-    handleToggleTooltip(true);
-  };
-
-  const handleMouseLeave = () => {
-    closeTimeoutRef.current = setTimeout(() => {
-      handleToggleTooltip(false);
-    }, 300);
-  };
 
-  useEffect(() => {
-    return () => {
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const renderTrigger = () => {
     if (hasCustomTrigger && children) {
       const child = React.Children.only(children);
+      /**
+       * Capture the child's existing handlers before overwriting
+       */
       const {
         onFocus: childOnFocus,
         onBlur: childOnBlur,
-        onKeyDown: childOnKeyDown
+        onKeyDown: childOnKeyDown,
+        onTouchStart: childOnTouchStart
       } = child.props ?? {};
+
+      /**
+       * Clone the child element and add the necessary event handlers
+       */
       return React.cloneElement(child, {
-        "aria-describedby": tooltipID,
+        tabIndex: child.props?.tabIndex ?? 0,
+        style: { cursor: `pointer`, ...child.props?.style },
         onFocus: e => {
           childOnFocus?.(e);
           handleToggleTooltip(true);
@@ -103,35 +126,90 @@ const Tooltip = ({
           childOnKeyDown?.(e);
           handleKeyDown(e);
         },
-        tabIndex: "0",
-        style: { ...child.props?.style, cursor: "pointer" }
+        onTouchStart: e => {
+          childOnTouchStart?.(e);
+          handleToggleTooltip(true);
+        },
+        role: customTriggerRole || child.props?.role,
+        "aria-describedby": tooltipID,
+        "data-qa": `tooltip-trigger-${tooltipID}`
       });
+    } else {
+      return (
+        <ButtonWithAction
+          action={noop}
+          onKeyDown={handleKeyDown}
+          variant={triggerButtonVariant}
+          text={triggerText}
+          tabIndex={0}
+          ariaDescribedby={tooltipID}
+          onFocus={() => handleToggleTooltip(true)}
+          onBlur={() => handleToggleTooltip(false)}
+          onTouchStart={() => handleToggleTooltip(true)}
+          dataQa={`tooltip-trigger-${tooltipID}`}
+          extraStyles={`
+            color: ${themeValues.linkColor};
+            &:hover { color: ${themeValues.hoverColor}; text-decoration: none;}
+            &:active, &:focus { color: ${themeValues.activeColor};text-decoration: none;}
+            button, span, &:hover span { text-decoration: none; }
+          `}
+        />
+      );
     }
+  };
 
-    return (
-      <ButtonWithAction
-        action={noop}
-        aria-describedby={tooltipID}
-        onKeyDown={handleKeyDown}
-        variant={triggerButtonVariant}
-        onFocus={() => handleToggleTooltip(true)}
-        onBlur={() => handleToggleTooltip(false)}
-        onTouchStart={() => handleToggleTooltip(true)}
-        data-qa={`tooltip-trigger-${tooltipID}`}
-        text={triggerText}
-        tabIndex="0"
-        extraStyles={`
-          color: ${themeValues.linkColor};
-          &:hover { color: ${themeValues.hoverColor}; text-decoration: none;}
-          &:active, &:focus { color: ${themeValues.activeColor};text-decoration: none;}
-          button, span, &:hover span { text-decoration: none; }
-        `}
-      />
-    );
+  /**
+   * @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);
+      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.
+   */
+  const handleMouseLeave = () => {
+    closeTimeoutRef.current = setTimeout(() => {
+      handleToggleTooltip(false);
+    }, 200);
   };
 
+  /**
+   * Handles the touch start event for the tooltip container.
+   * It closes the tooltip if the touch is outside the container.
+   */
+  useEffect(() => {
+    if (!tooltipOpen) return;
+
+    const handleOutsideTouch = e => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setTooltipOpen(false);
+      }
+    };
+    document.addEventListener("touchstart", handleOutsideTouch);
+    return () => document.removeEventListener("touchstart", handleOutsideTouch);
+  }, [tooltipOpen]);
+
+  /**
+   * Cleans up the timeout when the component unmounts.
+   */
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef?.current) clearTimeout(closeTimeoutRef.current);
+    };
+  }, []);
+
   return (
     <Box
+      ref={containerRef}
       padding="0"
       extraStyles={`position: relative; ${containerExtraStyles}`}
       onMouseEnter={handleMouseEnter}
@@ -162,11 +240,11 @@ const Tooltip = ({
         minWidth={minWidth}
         maxWidth={maxWidth}
       >
-        {typeof content === "string" ? (
+        {typeof content === "string" && content !== "" ? (
           <Text color={themeValues.textColor}>{content}</Text>
-        ) : (
+        ) : content !== undefined && content !== null ? (
           content
-        )}
+        ) : null}
         <Box
           padding="0"
           extraStyles={`

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

@@ -52,6 +52,15 @@ const meta = {
         defaultValue: { summary: false }
       }
     },
+    customTriggerRole: {
+      description:
+        "Role for the custom trigger element for accessibility purposes. Defaults to undefined.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
     children: {
       description:
         "Optional trigger element. When provided, it replaces the default ButtonWithAction trigger. The child element will receive aria-describedby, focus, blur, and keydown handlers.",
@@ -135,7 +144,7 @@ const meta = {
       description: "Maximum width of the tooltip content box.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "300px" }
+        defaultValue: { summary: "100%" }
       }
     },
     height: {
@@ -222,14 +231,16 @@ export const RichTooltipContent = {
       bottom: "auto",
       left: "-225px"
     },
-    content: (
-      <div style={{ padding: "8px" }}>
-        <strong>Bold title</strong>
-        <p>
-          With <em>an italic text detail</em> below.
-        </p>
-      </div>
-    )
+    content: React.createElement("div", { style: { padding: "8px" } }, [
+      React.createElement("strong", null, "Bold title"),
+      React.createElement(
+        "p",
+        null,
+        "With ",
+        React.createElement("em", null, "an italic text detail"),
+        " below."
+      )
+    ])
   }
 };
 

package/src/components/molecules/tooltip/index.d.ts

@@ -3,7 +3,7 @@ import Expand from "../../../util/expand";
 
 export interface TooltipProps {
   children?: React.ReactNode;
-  content: string | React.ReactNode;
+  content: React.ReactNode;
   tooltipID: string;
   hasCustomTrigger?: boolean;
   triggerText?: string;
@@ -27,6 +27,7 @@ export interface TooltipProps {
   containerExtraStyles?: string;
   contentExtraStyles?: string;
   backgroundColor?: string;
+  customTriggerRole?: string;
 }
 
 export const Tooltip: React.FC<Expand<TooltipProps> &