{"version":3,"file":"ScrollArea.cjs","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef } from \"react\";\nimport type { CSSProperties, HTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { useScrollOverflow } from \"@/hooks/use-scroll-overflow\";\nimport styles from \"./ScrollArea.module.css\";\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\nexport interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n    /** Caps the container height; numbers are treated as pixels. */\n    maxHeight?: number | string;\n    /** Which axis scrolls. Default `\"vertical\"`. */\n    orientation?: ScrollAreaOrientation;\n    /**\n     * Accessible name used while the content actually overflows, when the area\n     * takes a tab stop of its own. Defaults to a generic one; name it when the\n     * page holds several scroll areas.\n     */\n    scrollLabel?: string;\n}\n\n/**\n * A styled scroll container that overflows on the chosen axis and renders a\n * thin custom scrollbar (WebKit) while staying fully functional in browsers\n * without scrollbar styling. Forwards `className`, `style` and the ref to the\n * underlying `<div>`.\n *\n * While the content overflows, the container becomes a named, focusable group.\n * A scroll area whose children are plain text holds nothing focusable, so\n * without that a keyboard user can see the scrollbar and has no way to move it.\n * The tab stop disappears again once the content fits, so an area that does not\n * scroll never adds one. Callers may still override `tabIndex` or `role`.\n */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n    {\n        maxHeight,\n        orientation = \"vertical\",\n        scrollLabel = \"Área rolável\",\n        className,\n        style,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const innerRef = useRef<HTMLDivElement>(null);\n    const scrollable = useScrollOverflow(innerRef, orientation);\n\n    /**\n     * Keep the forwarded ref working while measuring internally: the caller's\n     * ref is the public contract, the inner one is what the observer needs.\n     */\n    const setRefs = useCallback(\n        (node: HTMLDivElement | null) => {\n            innerRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n        },\n        [ref],\n    );\n\n    const mergedStyle: CSSProperties = {\n        overflowX: orientation === \"vertical\" ? \"hidden\" : \"auto\",\n        overflowY: orientation === \"horizontal\" ? \"hidden\" : \"auto\",\n        ...(maxHeight !== undefined ? { maxHeight } : {}),\n        ...style,\n    };\n\n    return (\n        <div\n            ref={setRefs}\n            className={cn(styles.root, className)}\n            style={mergedStyle}\n            tabIndex={scrollable ? 0 : undefined}\n            role={scrollable ? \"group\" : undefined}\n            aria-label={scrollable ? scrollLabel : undefined}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n});\n"],"mappings":"kLAiCA,IAAa,GAAA,EAAa,EAAA,WAAA,CAA4C,SAClE,CACI,YACA,cAAc,WACd,cAAc,eACd,YACA,QACA,WACA,GAAG,GAEP,EACF,CACE,IAAM,GAAA,EAAW,EAAA,OAAA,CAAuB,IAAI,EACtC,EAAa,EAAA,kBAAkB,EAAU,CAAW,EAMpD,GAAA,EAAU,EAAA,YAAA,CACX,GAAgC,CAC7B,EAAS,QAAU,EACf,OAAO,GAAQ,WAAY,EAAI,CAAI,EAC9B,IAAK,EAAI,QAAU,EAChC,EACA,CAAC,CAAG,CACR,EAEM,EAA6B,CAC/B,UAAW,IAAgB,WAAa,SAAW,OACnD,UAAW,IAAgB,aAAe,SAAW,OACrD,GAAI,IAAc,IAAA,GAA4B,CAAC,EAAjB,CAAE,WAAU,EAC1C,GAAG,CACP,EAEA,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,IAAK,EACL,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,CAAS,EACpC,MAAO,EACP,SAAU,EAAa,EAAI,IAAA,GAC3B,KAAM,EAAa,QAAU,IAAA,GAC7B,aAAY,EAAa,EAAc,IAAA,GACvC,GAAI,EAEH,UACA,CAAA,CAEb,CAAC"}