diff --git a/packages/ui/src/components/Floating/Floating.tsx b/packages/ui/src/components/Floating/Floating.tsx index 5f8facfe3..7c8a8edef 100644 --- a/packages/ui/src/components/Floating/Floating.tsx +++ b/packages/ui/src/components/Floating/Floating.tsx @@ -3,7 +3,7 @@ import type { Placement } from "@floating-ui/core"; import { autoUpdate, useFocus } from "@floating-ui/react"; import type { ComponentProps, FC, ReactNode } from "react"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { twMerge } from "tailwind-merge"; import { useBaseFLoating, useFloatingInteractions } from "../../hooks/use-floating"; import { getArrowPlacement } from "./helpers"; @@ -43,6 +43,7 @@ export interface FloatingProps extends Omit, "content" | " theme: FlowbiteFloatingTheme; trigger?: "hover" | "click"; minWidth?: number; + isOpen: boolean | null; } /** @@ -59,10 +60,17 @@ export const Floating: FC = ({ theme, trigger = "hover", minWidth, + isOpen = null, ...props }) => { const arrowRef = useRef(null); - const [open, setOpen] = useState(false); + const [innerOpen, setOpen] = useState(false); + + const open = useMemo(() => { + if (isOpen === null) return innerOpen; + + return isOpen; + }, [innerOpen, isOpen]); const floatingProperties = useBaseFLoating({ open, diff --git a/packages/ui/src/components/Tooltip/Tooltip.stories.tsx b/packages/ui/src/components/Tooltip/Tooltip.stories.tsx index 1f9b9d858..6f07e3761 100644 --- a/packages/ui/src/components/Tooltip/Tooltip.stories.tsx +++ b/packages/ui/src/components/Tooltip/Tooltip.stories.tsx @@ -36,6 +36,24 @@ NoArrow.args = { children: , }; +export const StillOpen = Template.bind({}); +StillOpen.storyName = "Still open"; +StillOpen.args = { + content: "Tooltip content", + isOpen: true, + placement: "bottom", + children: , +}; + +export const StillClosed = Template.bind({}); +StillClosed.storyName = "Still closed"; +StillClosed.args = { + content: "Tooltip content", + isOpen: false, + placement: "bottom", + children: , +}; + export const SlowAnimation = Template.bind({}); SlowAnimation.storyName = "Slow animation"; SlowAnimation.args = { diff --git a/packages/ui/src/components/Tooltip/Tooltip.tsx b/packages/ui/src/components/Tooltip/Tooltip.tsx index 74e2d3c5e..eb8770967 100644 --- a/packages/ui/src/components/Tooltip/Tooltip.tsx +++ b/packages/ui/src/components/Tooltip/Tooltip.tsx @@ -15,6 +15,7 @@ export interface TooltipProps extends Omit, "content" | "s style?: "dark" | "light" | "auto"; theme?: DeepPartial; trigger?: "hover" | "click"; + isOpen?: boolean | null; } /** @@ -30,6 +31,7 @@ export const Tooltip: FC = ({ style = "dark", theme: customTheme = {}, trigger = "hover", + isOpen = null, ...props }) => { const theme = mergeDeep(getTheme().tooltip, customTheme); @@ -44,6 +46,7 @@ export const Tooltip: FC = ({ theme={theme} trigger={trigger} className={className} + isOpen={isOpen} {...props} > {children}