Resolved conflicts

dist/force-ui.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '7177c3b6ebd13dd322e4');
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '50f40dd9e876a3025202');

src/components/tooltip/readme.md

@@ -84,6 +84,19 @@ The `Tooltips` are small, interactive pop-up boxes that provide brief, informati
 - **Default:** `""`
 - **Description:** Id of the tooltip portal where the tooltip will be rendered. It's helpful when the tooltip is rendered outside the parent container and scopped Tailwind CSS styles.
 
+### `triggers`
+- **Type:** `string[]`
+- **Default:** `["hover", "focus"]`
+- **Description:** Defines the events that trigger the tooltip. Options include:
+  - `"hover"` 
+  - `"focus"`
+  - `"click"`
+
+### `interactive`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** When true, the tooltip is interactive and will not close when the user hovers away from the tooltip.
+
 ### `children`
 - **Type:** `ReactNode`
 - **Description:** The elements that trigger the tooltip. Typically, this could be buttons, icons, or links.
@@ -100,19 +113,72 @@ The `Tooltips` are small, interactive pop-up boxes that provide brief, informati
 import { Tooltip } from '@bsf/force-ui';
 
 const App = () => (
-    <div>
-        <Tooltip title="Tooltip Title" content={<span><strong>Tooltips</strong> are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.</span>} placement="bottom" variant="dark" arrow>
-            <button>Hover over me</button>
-        </Tooltip>
-
-        <Tooltip title="Tooltip Info" placement="top-start" variant="dark" open={open} onOpen={handleOpen} onClose={handleClose} arrow>
-            <button>Click me</button>
-        </Tooltip>
-
-        <Tooltip title="Tooltip" content={<span><strong>Tooltips</strong> are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.</span>} placement="right" arrow>
-            <button>Focus me</button>
-        </Tooltip>
-    </div>
+	<div>
+		<Tooltip
+			title="Tooltip Title"
+			content={
+				<span>
+					<strong>Tooltips</strong> are used to describe or identify
+					an element. In most scenarios, tooltips help the user
+					understand meaning, function or alt-text.
+				</span>
+			}
+			arrow
+		>
+			<button>Hover over me</button>
+		</Tooltip>
+
+		{/* Click only mode */}
+		<Tooltip
+			title="Tooltip Title"
+			content={
+				<span>
+					<strong>Tooltips</strong> are used to describe or identify
+					an element. In most scenarios, tooltips help the user
+					understand meaning, function or alt-text.
+				</span>
+			}
+			triggers={['click']}
+			arrow
+		>
+			<button>Click me</button>
+		</Tooltip>
+
+		{/* Interactive Tooltip */}
+		<Tooltip
+			title="Tooltip Title"
+			content={
+				<span>
+					<strong>Tooltips</strong> are used to describe or identify
+					an element. In most scenarios, tooltips help the user
+					understand meaning, function or alt-text.
+				</span>
+			}
+			arrow
+			interactive
+		>
+			<button>Hover over me</button>
+		</Tooltip>
+		{/* Controlled tooltip */}
+		<Tooltip
+			title="Tooltip Title"
+			content={
+				<span>
+					<strong>Tooltips</strong> are used to describe or identify
+					an element. In most scenarios, tooltips help the user
+					understand meaning, function or alt-text.
+				</span>
+			}
+			arrow
+			interactive
+			placement="top-start"
+			variant="dark"
+			open={open}
+			setOpen={handleOpen}
+		>
+			<button>Hover over me</button>
+		</Tooltip>
+	</div>
 );
 
 export default App;

src/components/tooltip/tooltip.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState, isValidElement, cloneElement, useMemo } from 'react';
-import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, arrow as floatingArrow, FloatingPortal, FloatingArrow, useInteractions, useTransitionStyles } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useClick, safePolygon, useRole, arrow as floatingArrow, FloatingPortal, FloatingArrow, useInteractions, useTransitionStyles } from '@floating-ui/react';
 import { cn } from '@/utilities/functions';
 import { mergeRefs } from '../toaster/utils';
 
@@ -18,6 +18,8 @@ const Tooltip = ( {
 	boundary = 'clippingAncestors',
 	strategy = 'fixed', // 'fixed' | 'absolute';
 	offset: offsetValue = 8, // Offset option or number value. Default is 8.
+	triggers = [ 'hover', 'focus' ], // 'click' | 'hover' | 'focus';
+	interactive = false,
 } ) => {
 	const isControlled = useMemo( () => typeof open === 'boolean' && typeof setOpen === 'function', [ open, setOpen ] );
 
@@ -42,12 +44,22 @@ const Tooltip = ( {
 		whileElementsMounted: autoUpdate,
 	} );
 
-	const hover = useHover( context, { move: false } );
-	const focus = useFocus( context );
+	const click = useClick( context, {
+		enabled: ! isControlled && triggers.includes( 'click' ),
+	} );
+	const hover = useHover( context, {
+		move: false,
+		enabled: ! isControlled && triggers.includes( 'hover' ),
+		...( interactive && { handleClose: safePolygon() } ),
+	} );
+	const focus = useFocus( context, {
+		enabled: ! isControlled && triggers.includes( 'focus' ),
+	} );
 	const dismiss = useDismiss( context );
 	const role = useRole( context, { role: 'tooltip' } );
 
 	const { getReferenceProps, getFloatingProps } = useInteractions( [
+		click,
 		hover,
 		focus,
 		dismiss,