{"version":3,"file":"use-scroll-overflow.cjs","names":[],"sources":["../../src/hooks/use-scroll-overflow.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\n/** Which axis to watch for overflow. */\nexport type ScrollOverflowAxis = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * Track whether an element's content currently overflows its box.\n *\n * The use this exists for is keyboard access. A scroll container holding no\n * focusable content is unreachable by keyboard: the user can see there is more\n * content past the edge and has no way to get to it, because focus never lands\n * anywhere the arrow keys would scroll. Giving the container `tabIndex={0}`\n * fixes it — but doing that unconditionally puts a tab stop on every such\n * container on the page, including the ones whose content fits and have nothing\n * to scroll. The stop is only wanted while the overflow is real, which is what\n * this reports. (It is also what axe checks as `scrollable-region-focusable`.)\n *\n * Both the container and its content are observed: content can outgrow a box\n * whose own dimensions never change, and a box can shrink around content that\n * never changes. Watching one alone misses half the transitions.\n *\n * A one-pixel difference is ignored — that is layout rounding, not overflow.\n *\n * @param ref - The scroll container.\n * @param axis - Which axis to measure. Defaults to `\"both\"`.\n * @returns `true` while the content is larger than the box on that axis.\n *\n * @example\n * const ref = useRef<HTMLDivElement>(null);\n * const scrollable = useScrollOverflow(ref, \"horizontal\");\n *\n * <div\n *   ref={ref}\n *   tabIndex={scrollable ? 0 : undefined}\n *   role={scrollable ? \"group\" : undefined}\n *   aria-label={scrollable ? \"Tabela rolável\" : undefined}\n * >\n */\nexport function useScrollOverflow(\n    ref: RefObject<HTMLElement | null>,\n    axis: ScrollOverflowAxis = \"both\",\n): boolean {\n    const [overflowing, setOverflowing] = useState(false);\n\n    useEffect(() => {\n        const element = ref.current;\n        if (!element) return;\n\n        const measure = () => {\n            const horizontal = element.scrollWidth - element.clientWidth > 1;\n            const vertical = element.scrollHeight - element.clientHeight > 1;\n            if (axis === \"horizontal\") setOverflowing(horizontal);\n            else if (axis === \"vertical\") setOverflowing(vertical);\n            else setOverflowing(horizontal || vertical);\n        };\n        measure();\n\n        if (typeof ResizeObserver === \"undefined\") return;\n\n        const observer = new ResizeObserver(measure);\n        observer.observe(element);\n        const content = element.firstElementChild;\n        if (content) observer.observe(content);\n        return () => observer.disconnect();\n    }, [ref, axis]);\n\n    return overflowing;\n}\n"],"mappings":"uBAuCA,SAAgB,EACZ,EACA,EAA2B,OACpB,CACP,GAAM,CAAC,EAAa,IAAA,EAAkB,EAAA,SAAA,CAAS,EAAK,EAwBpD,OAtBA,EAAA,EAAA,UAAA,KAAgB,CACZ,IAAM,EAAU,EAAI,QACpB,GAAI,CAAC,EAAS,OAEd,IAAM,MAAgB,CAClB,IAAM,EAAa,EAAQ,YAAc,EAAQ,YAAc,EACzD,EAAW,EAAQ,aAAe,EAAQ,aAAe,EACpC,EAAvB,IAAS,aAA6B,EACjC,IAAS,WAA2B,EACzB,GAAc,CAAQ,CAC9C,EAGA,GAFA,EAAQ,EAEJ,OAAO,eAAmB,IAAa,OAE3C,IAAM,EAAW,IAAI,eAAe,CAAO,EAC3C,EAAS,QAAQ,CAAO,EACxB,IAAM,EAAU,EAAQ,kBAExB,OADI,GAAS,EAAS,QAAQ,CAAO,MACxB,EAAS,WAAW,CACrC,EAAG,CAAC,EAAK,CAAI,CAAC,EAEP,CACX"}