"use client" import React, { useCallback, useEffect, useMemo, useRef, useState, type RefObject, } from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { AnimatePresence, motion, MotionConfig } from "motion/react" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" const transition = { type: "spring" as const, bounce: 0.1, duration: 0.25, } interface DynamicStep { id: string title: string description: string icon: | React.ComponentType<{ className?: string }> | React.ReactElement<{ className?: string }> content: React.ReactNode } interface DynamicToolbarExpandableProps { steps: DynamicStep[] badgeText?: string className?: string expanded?: boolean onExpandedChange?: (expanded: boolean) => void activeStep?: string | null onActiveStepChange?: (stepId: string | null) => void } const DynamicToolbarExpandable = React.memo( function DynamicToolbarExpandable({ steps, badgeText, className, expanded: controlledExpanded, onExpandedChange, activeStep: controlledActiveStep, onActiveStepChange, }) { const [internalActive, setInternalActive] = useState(null) const [internalIsOpen, setInternalIsOpen] = useState(false) const active = controlledActiveStep !== undefined ? controlledActiveStep : internalActive const isOpen = controlledExpanded !== undefined ? controlledExpanded : internalIsOpen const setActive = useCallback( (value: string | null) => { if (onActiveStepChange) { onActiveStepChange(value) } else { setInternalActive(value) } }, [onActiveStepChange] ) const setIsOpen = useCallback( (value: boolean) => { if (onExpandedChange) { onExpandedChange(value) } else { setInternalIsOpen(value) } }, [onExpandedChange] ) const [previousIndex, setPreviousIndex] = useState(null) const [contentRef, contentBounds] = useMeasure() const [menuRef, menuBounds] = useMeasure() const menuContainerRef = useRef(null) const ref = useRef(null) const [maxWidth, setMaxWidth] = useState(0) const heightContent = contentBounds.height const widthContainer = menuBounds.width const handleClickOutside = useCallback(() => { setIsOpen(false) setActive(null) }, [setIsOpen, setActive]) useClickOutside(ref, handleClickOutside) useEffect(() => { if (!widthContainer || maxWidth > 0) return setMaxWidth(widthContainer) }, [widthContainer, maxWidth]) const scrollButtonIntoView = useCallback( (currentIndex: number, previousIndex: number | null) => { if (!menuContainerRef.current) return const isMovingForward = previousIndex !== null && currentIndex > previousIndex const isMovingBackward = previousIndex !== null && currentIndex < previousIndex let targetIndex = currentIndex if (isMovingForward) { const nextIndex = currentIndex + 1 if (nextIndex < steps.length) { targetIndex = nextIndex } } else if (isMovingBackward) { const prevIndex = currentIndex - 1 if (prevIndex >= 0) { targetIndex = prevIndex } } const targetButton = menuContainerRef.current.querySelector( `[data-step-index="${targetIndex}"]` ) as HTMLElement if (targetButton) { targetButton.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center", }) } }, [steps.length] ) const handleNavClick = useCallback( (item: string) => { if (active === item && isOpen) { setIsOpen(false) setActive(null) return } const currentIndex = steps.findIndex((step) => step.id === item) setActive(item) setIsOpen(true) if (currentIndex >= 0) { setTimeout(() => { scrollButtonIntoView(currentIndex, previousIndex) }, 100) setPreviousIndex(currentIndex) } }, [ active, isOpen, steps, scrollButtonIntoView, previousIndex, setActive, setIsOpen, ] ) const renderContent = useCallback(() => { if (!active) return null const step = steps.find((s) => s.id === active) if (!step) return null return (

{step.title}

{step.description}

{step.content}

) }, [active, steps]) const activeTitle = useMemo(() => { if (!active) return "" const step = steps.find((s) => s.id === active) return step?.title || "" }, [active, steps]) const navigationButtons = useMemo( () => steps.map((step, index) => ({ id: step.id, label: step.title, step: (index + 1).toString(), onClick: () => handleNavClick(step.id), isActive: active === step.id, isFirst: index === 0, isLast: index === steps.length - 1, })), [steps, active, handleNavClick] ) return (

{badgeText && ( {badgeText} )}

{isOpen ? (

{activeTitle}

{renderContent()}

) : null}

{/* Navigation bar */}

{ if (element) { menuContainerRef.current = element menuRef(element) } }} >

{navigationButtons.map((button, index) => ( ))}

) } ) DynamicToolbarExpandable.displayName = "DynamicToolbarExpandable" // ________________________ HOOKS ________________________ interface Bounds { left: number top: number width: number height: number } function useMeasure(): [ (node: HTMLElement | null) => void, Bounds, () => void, ] { const [bounds, setBounds] = useState({ left: 0, top: 0, width: 0, height: 0, }) const [node, setNode] = useState(null) const observer = useRef(null) const disconnect = useCallback(() => { if (observer.current) { observer.current.disconnect() } }, []) const ref = useCallback((node: HTMLElement | null) => { setNode(node) }, []) useEffect(() => { if (!node) return if (observer.current) { observer.current.disconnect() } observer.current = new ResizeObserver(([entry]) => { if (entry && entry.contentRect) { const { left, top, width, height } = entry.contentRect setBounds({ left, top, width, height }) } }) observer.current.observe(node) return () => { if (observer.current) { observer.current.disconnect() } } }, [node]) return [ref, bounds, disconnect] } function useClickOutside( ref: RefObject, handler: (event: MouseEvent | TouchEvent) => void ) { useEffect(() => { const listener = (event: MouseEvent | TouchEvent) => { const el = ref?.current if (!el || el.contains((event?.target as Node) || null)) { return } handler(event) } document.addEventListener("mousedown", listener) document.addEventListener("touchstart", listener) return () => { document.removeEventListener("mousedown", listener) document.removeEventListener("touchstart", listener) } }, [ref, handler]) } function useTouchPrimary() { const [isTouchPrimary, setIsTouchPrimary] = useState(false) useEffect(() => { if (typeof window === "undefined") return const controller = new AbortController() const { signal } = controller const handleTouch = () => { const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0 const prefersTouch = window.matchMedia("(pointer: coarse)").matches setIsTouchPrimary(hasTouch && prefersTouch) } const mq = window.matchMedia("(pointer: coarse)") mq.addEventListener("change", handleTouch, { signal }) window.addEventListener("pointerdown", handleTouch, { signal }) handleTouch() return () => controller.abort() }, []) return isTouchPrimary } // ________________________ MODIFIED SCROLL AREA ________________________ // https://lina.sameer.sh/ const ScrollAreaContext = React.createContext(false) type Mask = { top: boolean bottom: boolean left: boolean right: boolean } const ScrollArea = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef & { viewportClassName?: string /** * `maskHeight` is the height of the mask in pixels. * pass `0` to disable the mask * @default 30 */ maskHeight?: number maskClassName?: string } >( ( { className, children, scrollHideDelay = 0, viewportClassName, maskClassName, maskHeight = 30, ...props }, ref ) => { const [showMask, setShowMask] = React.useState({ top: false, bottom: false, left: false, right: false, }) const viewportRef = React.useRef(null) const isTouch = useTouchPrimary() const checkScrollability = React.useCallback(() => { const element = viewportRef.current if (!element) return const { scrollTop, scrollLeft, scrollWidth, clientWidth, scrollHeight, clientHeight, } = element setShowMask((prev) => ({ ...prev, top: scrollTop > 0, bottom: scrollTop + clientHeight < scrollHeight - 1, left: scrollLeft > 0, right: scrollLeft + clientWidth < scrollWidth - 1, })) }, []) React.useEffect(() => { if (typeof window === "undefined") return const element = viewportRef.current if (!element) return const controller = new AbortController() const { signal } = controller const resizeObserver = new ResizeObserver(checkScrollability) resizeObserver.observe(element) element.addEventListener("scroll", checkScrollability, { signal }) window.addEventListener("resize", checkScrollability, { signal }) checkScrollability() return () => { controller.abort() resizeObserver.disconnect() } }, [checkScrollability, isTouch]) return ( {isTouch ? (

{children}

{maskHeight > 0 && ( )}

) : ( {children} {maskHeight > 0 && ( )} )} ) } ) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => { const isTouch = React.useContext(ScrollAreaContext) if (isTouch) return null return ( ) }) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName const ScrollMask = ({ showMask, maskHeight, className, ...props }: React.ComponentProps<"div"> & { showMask: Mask maskHeight: number }) => { return ( <>

Toolbar Expandable

Instalação

Dependências

Registry dependencies