"use client"; import { cva, type VariantProps } from "class-variance-authority"; import { Slot as SlotPrimitive } from "radix-ui"; import * as React from "react"; import { useComposedRefs } from "@/lib/compose-refs"; import { cn } from "@/lib/utils"; import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref"; import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect"; import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref"; import { Button } from "@/registry/bases/radix/ui/button"; const ROOT_NAME = "SpeedDial"; const TRIGGER_NAME = "SpeedDialTrigger"; const CONTENT_NAME = "SpeedDialContent"; const ITEM_NAME = "SpeedDialItem"; const ACTION_NAME = "SpeedDialAction"; const LABEL_NAME = "SpeedDialLabel"; const ACTION_SELECT = "speedDial.actionSelect"; const INTERACT_OUTSIDE = "speedDial.interactOutside"; const EVENT_OPTIONS = { bubbles: true, cancelable: true }; const DEFAULT_GAP = 8; const DEFAULT_OFFSET = 8; const DEFAULT_ITEM_DELAY = 50; const DEFAULT_HOVER_CLOSE_DELAY = 100; const DEFAULT_ANIMATION_DURATION = 200; type Side = "top" | "right" | "bottom" | "left"; type ActivationMode = "click" | "hover"; interface DivProps extends React.ComponentProps<"div"> { asChild?: boolean; } type RootElement = React.ComponentRef; type ContentElement = React.ComponentRef; type TriggerElement = React.ComponentRef; type ActionElement = React.ComponentRef; interface InteractOutsideEvent extends CustomEvent { detail: { originalEvent: PointerEvent; }; } function getDataState(open: boolean): string { return open ? "open" : "closed"; } function getTransformOrigin(side: Side): string { switch (side) { case "top": return "bottom center"; case "bottom": return "top center"; case "left": return "right center"; case "right": return "left center"; } } interface StoreState { open: boolean; } interface Store { subscribe: (callback: () => void) => () => void; getState: () => StoreState; setState: (key: K, value: StoreState[K]) => void; notify: () => void; } const StoreContext = React.createContext(null); function useStoreContext(consumerName: string) { const context = React.useContext(StoreContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } function useStore( selector: (state: StoreState) => T, ogStore?: Store | null, ): T { const contextStore = React.useContext(StoreContext); const store = ogStore ?? contextStore; if (!store) { throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``); } const getSnapshot = React.useCallback( () => selector(store.getState()), [store, selector], ); return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot); } interface NodeData { id: string; ref: React.RefObject; disabled: boolean; } interface SpeedDialContextValue { onNodeRegister: (node: NodeData) => void; onNodeUnregister: (id: string) => void; getNodes: () => NodeData[]; contentId: string; rootRef: React.RefObject; triggerRef: React.RefObject; isPointerInsideReactTreeRef: React.RefObject; hoverCloseTimerRef: React.RefObject; side: Side; activationMode: ActivationMode; delay: number; disabled: boolean; } const SpeedDialContext = React.createContext( null, ); function useSpeedDialContext(consumerName: string) { const context = React.useContext(SpeedDialContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } interface SpeedDialProps extends DivProps { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; side?: Side; activationMode?: ActivationMode; delay?: number; disabled?: boolean; } function SpeedDial(props: SpeedDialProps) { const { open: openProp, defaultOpen, onOpenChange, onPointerDownCapture: onPointerDownCaptureProp, side = "top", activationMode = "click", delay = 250, asChild, disabled = false, className, ref, ...rootProps } = props; const contentId = React.useId(); const rootRef = React.useRef(null); const composedRefs = useComposedRefs(ref, rootRef); const triggerRef = React.useRef(null); const nodesRef = React.useRef>(new Map()); const isPointerInsideReactTreeRef = React.useRef(false); const hoverCloseTimerRef = React.useRef(null); const listenersRef = useLazyRef(() => new Set<() => void>()); const stateRef = useLazyRef(() => ({ open: openProp ?? defaultOpen ?? false, })); const propsRef = useAsRef({ onOpenChange, onPointerDownCapture: onPointerDownCaptureProp, }); const store = React.useMemo(() => { return { subscribe: (cb) => { listenersRef.current.add(cb); return () => listenersRef.current.delete(cb); }, getState: () => stateRef.current, setState: (key, value) => { if (Object.is(stateRef.current[key], value)) return; if (key === "open" && typeof value === "boolean") { stateRef.current.open = value; propsRef.current.onOpenChange?.(value); } else { stateRef.current[key] = value; } store.notify(); }, notify: () => { for (const cb of listenersRef.current) { cb(); } }, }; }, [listenersRef, stateRef, propsRef]); const getNodes = React.useCallback(() => { return Array.from(nodesRef.current.values()) .filter((node) => node.ref.current) .sort((a, b) => { const elementA = a.ref.current; const elementB = b.ref.current; if (!elementA || !elementB) return 0; const position = elementA.compareDocumentPosition(elementB); if (position & Node.DOCUMENT_POSITION_FOLLOWING) { return -1; } if (position & Node.DOCUMENT_POSITION_PRECEDING) { return 1; } return 0; }); }, []); const onNodeRegister = React.useCallback((node: NodeData) => { nodesRef.current.set(node.id, node); }, []); const onNodeUnregister = React.useCallback((id: string) => { nodesRef.current.delete(id); }, []); useIsomorphicLayoutEffect(() => { if (openProp !== undefined) { store.setState("open", openProp); } }, [openProp]); const open = useStore((state) => state.open, store); const onPointerDownCapture = React.useCallback( (event: React.PointerEvent) => { propsRef.current?.onPointerDownCapture?.(event); if (event.defaultPrevented) return; const target = event.target as HTMLElement; const nodes = getNodes(); const isInteractiveElement = nodes.some((node) => node.ref.current?.contains(target), ); isPointerInsideReactTreeRef.current = isInteractiveElement; }, [propsRef, getNodes], ); const contextValue = React.useMemo( () => ({ getNodes, onNodeRegister, onNodeUnregister, contentId, rootRef, triggerRef, isPointerInsideReactTreeRef, hoverCloseTimerRef, side, activationMode, delay, disabled, }), [ getNodes, onNodeRegister, onNodeUnregister, contentId, side, activationMode, delay, disabled, ], ); const RootPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( ); } function SpeedDialTrigger(props: React.ComponentProps) { const { onClick: onClickProp, onMouseEnter: onMouseEnterProp, onMouseLeave: onMouseLeaveProp, className, disabled: disabledProp, id, ref, ...triggerProps } = props; const store = useStoreContext(TRIGGER_NAME); const { onNodeRegister, onNodeUnregister, contentId, hoverCloseTimerRef, triggerRef, activationMode, delay, disabled, } = useSpeedDialContext(TRIGGER_NAME); const open = useStore((state) => state.open); const isDisabled = disabledProp || disabled; const instanceId = React.useId(); const triggerId = id ?? instanceId; const composedRef = useComposedRefs(ref, triggerRef); const hoverOpenTimerRef = React.useRef(null); useIsomorphicLayoutEffect(() => { onNodeRegister({ id: triggerId, ref: triggerRef, disabled: isDisabled, }); return () => { onNodeUnregister(triggerId); }; }, [onNodeRegister, onNodeUnregister, triggerId, isDisabled]); React.useEffect(() => { return () => { if (hoverOpenTimerRef.current) { window.clearTimeout(hoverOpenTimerRef.current); } if (hoverCloseTimerRef.current) { window.clearTimeout(hoverCloseTimerRef.current); } }; }, [hoverCloseTimerRef]); const onClick = React.useCallback( (event: React.MouseEvent) => { onClickProp?.(event); if (event.defaultPrevented) return; if (hoverOpenTimerRef.current) { window.clearTimeout(hoverOpenTimerRef.current); hoverOpenTimerRef.current = null; } if (hoverCloseTimerRef.current) { window.clearTimeout(hoverCloseTimerRef.current); hoverCloseTimerRef.current = null; } store.setState("open", !open); }, [onClickProp, store, open, hoverCloseTimerRef], ); const onMouseEnter = React.useCallback( (event: React.MouseEvent) => { onMouseEnterProp?.(event); if (event.defaultPrevented || activationMode !== "hover" || isDisabled) return; if (hoverCloseTimerRef.current) { window.clearTimeout(hoverCloseTimerRef.current); hoverCloseTimerRef.current = null; } if (hoverOpenTimerRef.current) { window.clearTimeout(hoverOpenTimerRef.current); } hoverOpenTimerRef.current = window.setTimeout(() => { store.setState("open", true); }, delay); }, [ onMouseEnterProp, activationMode, isDisabled, store, delay, hoverCloseTimerRef, ], ); const onMouseLeave = React.useCallback( (event: React.MouseEvent) => { onMouseLeaveProp?.(event); if (event.defaultPrevented || activationMode !== "hover" || isDisabled) return; if (hoverOpenTimerRef.current) { window.clearTimeout(hoverOpenTimerRef.current); hoverOpenTimerRef.current = null; } hoverCloseTimerRef.current = window.setTimeout(() => { store.setState("open", false); }, DEFAULT_HOVER_CLOSE_DELAY); }, [onMouseLeaveProp, activationMode, isDisabled, store, hoverCloseTimerRef], ); return (

Speed Dial

Instalação

Dependências

Registry dependencies