tempest-react-sdk 0.66.0 → 0.67.0

package/dist/components/ContextMenu/ContextMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.cjs","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines function-lines — the body owns one anchor point and\n * everything that reads from it: the three ways a menu opens (right click, long\n * press, click), the clamp that keeps it inside the viewport, and roving focus\n * for the keyboard path. Splitting them would hand the same geometry to three\n * files.\n */\nimport { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"@/components/Portal\";\nimport styles from \"./ContextMenu.module.css\";\n\nexport type ContextMenuItem =\n    | {\n          label: ReactNode;\n          onSelect?: () => void;\n          disabled?: boolean;\n          danger?: boolean;\n      }\n    | { separator: true };\n\n/** How the menu is opened by a pointer. Touch always gets the long press. */\nexport type ContextMenuTrigger = \"contextmenu\" | \"click\" | \"both\";\n\nexport interface ContextMenuProps {\n    /** Menu entries — selectable items and separators. */\n    items: ContextMenuItem[];\n    /** Trigger area. Right-clicking anywhere within opens the menu at the cursor. */\n    children: ReactNode;\n    /** Extra class names forwarded to the menu element. */\n    className?: string;\n    /**\n     * Which pointer gesture opens the menu. Default `\"contextmenu\"`.\n     *\n     * `\"click\"` is the `⋮` button case, where a right click is the wrong gesture\n     * on the desktop and impossible on touch. `\"both\"` keeps the right click and\n     * adds the left one.\n     */\n    trigger?: ContextMenuTrigger;\n    /**\n     * Hold, in ms, that opens the menu from a coarse pointer. Default `500`.\n     *\n     * Set `0` to turn the long press off. It is on by default because touch has\n     * no right click: measured in Chrome with touch emulation (Pixel 7 and\n     * iPhone 13 profiles), a 900 ms hold fires `pointerdown`, `touchstart`,\n     * `pointerup`, `touchend` and `click` — and no `contextmenu` at all. Every\n     * action behind this menu was unreachable on a phone.\n     */\n    longPressDelay?: number;\n    /**\n     * Gap, in px, kept between the menu and the edge of the viewport. Default `8`.\n     */\n    viewportMargin?: number;\n}\n\ninterface Position {\n    x: number;\n    y: number;\n}\n\n/** Movement, in px, that reads as a scroll rather than a hold. */\nconst LONG_PRESS_MOVE_TOLERANCE = 10;\n\nfunction isSeparator(item: ContextMenuItem): item is { separator: true } {\n    return \"separator\" in item && item.separator === true;\n}\n\n/**\n * Context menu — right click, long press, or click.\n *\n * - Opens at the pointer on `contextmenu`, and on a long press from touch or pen,\n *   which is the gesture those pointers have instead of a right click. `trigger`\n *   adds or replaces the mouse gesture; the long press is independent of it.\n * - Clamped inside the viewport after it mounts, so a menu opened near an edge\n *   moves in rather than overflowing — measured before the clamp: a 180 px menu\n *   opened at `x=235` in a 320 px window ran 95 px off screen, cutting the right\n *   edge off every label.\n * - Rendered through a {@link Portal} so it escapes parent overflow/stacking\n *   contexts.\n * - Closes on outside click, Escape, scroll, resize, or item selection.\n * - Arrow Up/Down move focus across selectable items and wrap; Home/End jump to\n *   the ends; Enter activates the focused item. The menu itself takes focus when\n *   it opens, so a screen reader announces it instead of staying on the trigger.\n *\n * @param props - The context menu props.\n * @returns The trigger wrapper plus the portalled menu when open.\n */\nexport function ContextMenu({\n    items,\n    children,\n    className,\n    trigger = \"contextmenu\",\n    longPressDelay = 500,\n    viewportMargin = 8,\n}: ContextMenuProps) {\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const id = useId();\n    const [menuNode, setMenuNode] = useState<HTMLUListElement | null>(null);\n    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n    const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const longPressOrigin = useRef<Position | null>(null);\n\n    const selectableIndexes = items\n        .map((item, index) => (!isSeparator(item) && !item.disabled ? index : -1))\n        .filter((i) => i !== -1);\n\n    const close = useCallback((): void => {\n        setOpen(false);\n        setActiveIndex(-1);\n    }, []);\n\n    const openAt = useCallback((point: Position): void => {\n        setPosition(point);\n        setActiveIndex(-1);\n        setOpen(true);\n    }, []);\n\n    const cancelLongPress = useCallback((): void => {\n        if (longPressTimer.current !== null) {\n            clearTimeout(longPressTimer.current);\n            longPressTimer.current = null;\n        }\n        longPressOrigin.current = null;\n    }, []);\n\n    useEffect(() => cancelLongPress, [cancelLongPress]);\n\n    const handleContextMenu = (event: React.MouseEvent): void => {\n        if (trigger === \"click\") return;\n        event.preventDefault();\n        openAt({ x: event.clientX, y: event.clientY });\n    };\n\n    const handleClick = (event: React.MouseEvent): void => {\n        if (trigger === \"contextmenu\") return;\n        openAt({ x: event.clientX, y: event.clientY });\n    };\n\n    /**\n     * Start the hold that stands in for a right click on a coarse pointer.\n     *\n     * A mouse is excluded: it has `contextmenu`, and holding the left button is\n     * how a drag starts.\n     */\n    const handlePointerDown = (event: ReactPointerEvent): void => {\n        if (longPressDelay <= 0 || event.pointerType === \"mouse\") return;\n        const point = { x: event.clientX, y: event.clientY };\n        longPressOrigin.current = point;\n        cancelLongPress();\n        longPressOrigin.current = point;\n        longPressTimer.current = setTimeout(() => {\n            longPressTimer.current = null;\n            longPressOrigin.current = null;\n            suppressNextClick();\n            openAt(point);\n        }, longPressDelay);\n    };\n\n    /**\n     * Cancel the hold once the finger travels — otherwise every scroll that\n     * starts on the trigger opens a menu, which is the difference between a\n     * usable long press and an infuriating one.\n     */\n    const handlePointerMove = (event: ReactPointerEvent): void => {\n        const origin = longPressOrigin.current;\n        if (!origin || longPressTimer.current === null) return;\n        if (\n            Math.hypot(event.clientX - origin.x, event.clientY - origin.y) >\n            LONG_PRESS_MOVE_TOLERANCE\n        ) {\n            cancelLongPress();\n        }\n    };\n\n    useEffect(() => {\n        if (!open) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"Escape\") {\n                close();\n                return;\n            }\n            const move = (next: number): void => {\n                event.preventDefault();\n                setActiveIndex(next);\n                itemRefs.current[next]?.focus();\n            };\n            if (selectableIndexes.length === 0) return;\n            const current = selectableIndexes.indexOf(activeIndex);\n            if (event.key === \"ArrowDown\") {\n                move(selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1);\n            }\n            if (event.key === \"ArrowUp\") {\n                move(\n                    selectableIndexes[\n                        (current - 1 + selectableIndexes.length) % selectableIndexes.length\n                    ] ?? -1,\n                );\n            }\n            if (event.key === \"Home\") {\n                move(selectableIndexes[0] ?? -1);\n            }\n            if (event.key === \"End\") {\n                move(selectableIndexes[selectableIndexes.length - 1] ?? -1);\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (menuNode && !menuNode.contains(event.target as Node)) close();\n        };\n        window.addEventListener(\"keydown\", onKey);\n        window.addEventListener(\"mousedown\", onDown);\n        window.addEventListener(\"resize\", close);\n        window.addEventListener(\"scroll\", close, true);\n        return () => {\n            window.removeEventListener(\"keydown\", onKey);\n            window.removeEventListener(\"mousedown\", onDown);\n            window.removeEventListener(\"resize\", close);\n            window.removeEventListener(\"scroll\", close, true);\n        };\n    }, [open, activeIndex, selectableIndexes, close, menuNode]);\n\n    /**\n     * Pull the menu inside the viewport, and take focus.\n     *\n     * Keyed off the node rather than off `open`, because {@link Portal} renders\n     * `null` on its first pass and mounts on an effect — an effect that reads a\n     * ref when `open` flips runs while the menu does not exist yet, measures\n     * nothing and focuses nothing. A callback ref in state is what makes this\n     * run on the render that has the element.\n     *\n     * `useLayoutEffect` runs before paint, so the menu is never painted at the\n     * overflowing position first.\n     *\n     * The size comes from `offsetWidth`/`offsetHeight` rather than from\n     * `getBoundingClientRect`, which reports the **transformed** box: the menu\n     * enters at `scale(0.96)`, so the rect is 4% small and the clamp lets the\n     * grown menu back over the edge. Measured in Chrome at 320 px wide, a 180 px\n     * menu came back at `right: 316` against a margin that asked for 312.\n     */\n    useLayoutEffect(() => {\n        if (!open || !menuNode) return;\n        menuNode.focus({ preventScroll: true });\n        const { offsetWidth, offsetHeight } = menuNode;\n        if (offsetWidth === 0 && offsetHeight === 0) return;\n        const maxLeft = window.innerWidth - offsetWidth - viewportMargin;\n        const maxTop = window.innerHeight - offsetHeight - viewportMargin;\n        const left = Math.max(viewportMargin, Math.min(position.x, maxLeft));\n        const top = Math.max(viewportMargin, Math.min(position.y, maxTop));\n        if (left !== position.x || top !== position.y) setPosition({ x: left, y: top });\n    }, [open, menuNode, position.x, position.y, viewportMargin]);\n\n    const handleSelect = (item: Extract<ContextMenuItem, { label: ReactNode }>): void => {\n        item.onSelect?.();\n        close();\n    };\n\n    return (\n        <>\n            <span\n                className={styles.root}\n                onContextMenu={handleContextMenu}\n                onClick={handleClick}\n                onPointerDown={handlePointerDown}\n                onPointerMove={handlePointerMove}\n                onPointerUp={cancelLongPress}\n                onPointerCancel={cancelLongPress}\n            >\n                {children}\n            </span>\n            {open && (\n                <Portal>\n                    <ul\n                        ref={setMenuNode}\n                        id={id}\n                        role=\"menu\"\n                        aria-orientation=\"vertical\"\n                        tabIndex={-1}\n                        className={cn(styles.menu, className)}\n                        style={{ top: position.y, left: position.x }}\n                    >\n                        {items.map((item, index) => {\n                            if (isSeparator(item)) {\n                                return (\n                                    <li\n                                        key={`separator-${index}`}\n                                        role=\"separator\"\n                                        className={styles.separator}\n                                        aria-hidden\n                                    />\n                                );\n                            }\n                            return (\n                                <li key={`item-${index}`} role=\"none\">\n                                    <button\n                                        ref={(el) => {\n                                            itemRefs.current[index] = el;\n                                        }}\n                                        type=\"button\"\n                                        role=\"menuitem\"\n                                        className={cn(\n                                            styles.item,\n                                            item.danger && styles.danger,\n                                            activeIndex === index && styles.active,\n                                        )}\n                                        disabled={item.disabled}\n                                        onClick={() => handleSelect(item)}\n                                        onMouseEnter={() => setActiveIndex(index)}\n                                    >\n                                        {item.label}\n                                    </button>\n                                </li>\n                            );\n                        })}\n                    </ul>\n                </Portal>\n            )}\n        </>\n    );\n}\n\n/**\n * Swallow the click a finger leaves behind after a long press.\n *\n * The hold fires while the finger is still down, so the browser goes on to\n * deliver `pointerup` and then `click` to whatever is under it — measured, that\n * is the same element the menu was just opened from. Without this, opening the\n * menu on a chat bubble also opens the bubble.\n *\n * Capture phase and `once`, so the listener never outlives the gesture that\n * installed it, and a later genuine click is untouched.\n */\nfunction suppressNextClick(): void {\n    if (typeof window === \"undefined\") return;\n    window.addEventListener(\n        \"click\",\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        },\n        { capture: true, once: true },\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ContextMenu.cjs","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines function-lines — the body owns one anchor point and\n * everything that reads from it: the three ways a menu opens (right click, long\n * press, click), the clamp that keeps it inside the viewport, and roving focus\n * for the keyboard path. Splitting them would hand the same geometry to three\n * files.\n */\nimport { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"@/components/Portal\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport styles from \"./ContextMenu.module.css\";\n\nexport type ContextMenuItem =\n    | {\n          label: ReactNode;\n          onSelect?: () => void;\n          disabled?: boolean;\n          danger?: boolean;\n      }\n    | { separator: true };\n\n/** How the menu is opened by a pointer. Touch always gets the long press. */\nexport type ContextMenuTrigger = \"contextmenu\" | \"click\" | \"both\";\n\nexport interface ContextMenuProps {\n    /** Menu entries — selectable items and separators. */\n    items: ContextMenuItem[];\n    /** Trigger area. Right-clicking anywhere within opens the menu at the cursor. */\n    children: ReactNode;\n    /** Extra class names forwarded to the menu element. */\n    className?: string;\n    /**\n     * Which pointer gesture opens the menu. Default `\"contextmenu\"`.\n     *\n     * `\"click\"` is the `⋮` button case, where a right click is the wrong gesture\n     * on the desktop and impossible on touch. `\"both\"` keeps the right click and\n     * adds the left one.\n     */\n    trigger?: ContextMenuTrigger;\n    /**\n     * Hold, in ms, that opens the menu from a coarse pointer. Default `500`.\n     *\n     * Set `0` to turn the long press off. It is on by default because touch has\n     * no right click: measured in Chrome with touch emulation (Pixel 7 and\n     * iPhone 13 profiles), a 900 ms hold fires `pointerdown`, `touchstart`,\n     * `pointerup`, `touchend` and `click` — and no `contextmenu` at all. Every\n     * action behind this menu was unreachable on a phone.\n     */\n    longPressDelay?: number;\n    /**\n     * Gap, in px, kept between the menu and the edge of the viewport. Default `8`.\n     */\n    viewportMargin?: number;\n}\n\ninterface Position {\n    x: number;\n    y: number;\n}\n\n/** Movement, in px, that reads as a scroll rather than a hold. */\nconst LONG_PRESS_MOVE_TOLERANCE = 10;\n\nfunction isSeparator(item: ContextMenuItem): item is { separator: true } {\n    return \"separator\" in item && item.separator === true;\n}\n\n/**\n * Context menu — right click, long press, or click.\n *\n * - Opens at the pointer on `contextmenu`, and on a long press from touch or pen,\n *   which is the gesture those pointers have instead of a right click. `trigger`\n *   adds or replaces the mouse gesture; the long press is independent of it.\n * - Clamped inside the viewport after it mounts, so a menu opened near an edge\n *   moves in rather than overflowing — measured before the clamp: a 180 px menu\n *   opened at `x=235` in a 320 px window ran 95 px off screen, cutting the right\n *   edge off every label.\n * - Rendered through a {@link Portal} so it escapes parent overflow/stacking\n *   contexts.\n * - Closes on outside click, Escape, scroll, resize, or item selection.\n * - Arrow Up/Down move focus across selectable items and wrap; Home/End jump to\n *   the ends; Enter activates the focused item. The menu itself takes focus when\n *   it opens, so a screen reader announces it instead of staying on the trigger.\n *\n * @param props - The context menu props.\n * @returns The trigger wrapper plus the portalled menu when open.\n */\nexport function ContextMenu({\n    items,\n    children,\n    className,\n    trigger = \"contextmenu\",\n    longPressDelay = 500,\n    viewportMargin = 8,\n}: ContextMenuProps) {\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const id = useId();\n    const [menuNode, setMenuNode] = useState<HTMLUListElement | null>(null);\n    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n    const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const longPressOrigin = useRef<Position | null>(null);\n\n    const selectableIndexes = items\n        .map((item, index) => (!isSeparator(item) && !item.disabled ? index : -1))\n        .filter((i) => i !== -1);\n\n    const close = useCallback((): void => {\n        setOpen(false);\n        setActiveIndex(-1);\n    }, []);\n\n    const openAt = useCallback((point: Position): void => {\n        setPosition(point);\n        setActiveIndex(-1);\n        setOpen(true);\n    }, []);\n\n    const cancelLongPress = useCallback((): void => {\n        if (longPressTimer.current !== null) {\n            clearTimeout(longPressTimer.current);\n            longPressTimer.current = null;\n        }\n        longPressOrigin.current = null;\n    }, []);\n\n    useEffect(() => cancelLongPress, [cancelLongPress]);\n\n    const handleContextMenu = (event: React.MouseEvent): void => {\n        if (trigger === \"click\") return;\n        event.preventDefault();\n        openAt({ x: event.clientX, y: event.clientY });\n    };\n\n    const handleClick = (event: React.MouseEvent): void => {\n        if (trigger === \"contextmenu\") return;\n        openAt({ x: event.clientX, y: event.clientY });\n    };\n\n    /**\n     * Start the hold that stands in for a right click on a coarse pointer.\n     *\n     * A mouse is excluded: it has `contextmenu`, and holding the left button is\n     * how a drag starts.\n     */\n    const handlePointerDown = (event: ReactPointerEvent): void => {\n        if (longPressDelay <= 0 || event.pointerType === \"mouse\") return;\n        const point = { x: event.clientX, y: event.clientY };\n        longPressOrigin.current = point;\n        cancelLongPress();\n        longPressOrigin.current = point;\n        longPressTimer.current = setTimeout(() => {\n            longPressTimer.current = null;\n            longPressOrigin.current = null;\n            suppressNextClick();\n            openAt(point);\n        }, longPressDelay);\n    };\n\n    /**\n     * Cancel the hold once the finger travels — otherwise every scroll that\n     * starts on the trigger opens a menu, which is the difference between a\n     * usable long press and an infuriating one.\n     */\n    const handlePointerMove = (event: ReactPointerEvent): void => {\n        const origin = longPressOrigin.current;\n        if (!origin || longPressTimer.current === null) return;\n        if (\n            Math.hypot(event.clientX - origin.x, event.clientY - origin.y) >\n            LONG_PRESS_MOVE_TOLERANCE\n        ) {\n            cancelLongPress();\n        }\n    };\n\n    useEscapeLayer(open, close);\n\n    useEffect(() => {\n        if (!open) return;\n        const onKey = (event: KeyboardEvent): void => {\n            const move = (next: number): void => {\n                event.preventDefault();\n                setActiveIndex(next);\n                itemRefs.current[next]?.focus();\n            };\n            if (selectableIndexes.length === 0) return;\n            const current = selectableIndexes.indexOf(activeIndex);\n            if (event.key === \"ArrowDown\") {\n                move(selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1);\n            }\n            if (event.key === \"ArrowUp\") {\n                move(\n                    selectableIndexes[\n                        (current - 1 + selectableIndexes.length) % selectableIndexes.length\n                    ] ?? -1,\n                );\n            }\n            if (event.key === \"Home\") {\n                move(selectableIndexes[0] ?? -1);\n            }\n            if (event.key === \"End\") {\n                move(selectableIndexes[selectableIndexes.length - 1] ?? -1);\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (menuNode && !menuNode.contains(event.target as Node)) close();\n        };\n        window.addEventListener(\"keydown\", onKey);\n        window.addEventListener(\"mousedown\", onDown);\n        window.addEventListener(\"resize\", close);\n        window.addEventListener(\"scroll\", close, true);\n        return () => {\n            window.removeEventListener(\"keydown\", onKey);\n            window.removeEventListener(\"mousedown\", onDown);\n            window.removeEventListener(\"resize\", close);\n            window.removeEventListener(\"scroll\", close, true);\n        };\n    }, [open, activeIndex, selectableIndexes, close, menuNode]);\n\n    /**\n     * Pull the menu inside the viewport, and take focus.\n     *\n     * Keyed off the node rather than off `open`, because {@link Portal} renders\n     * `null` on its first pass and mounts on an effect — an effect that reads a\n     * ref when `open` flips runs while the menu does not exist yet, measures\n     * nothing and focuses nothing. A callback ref in state is what makes this\n     * run on the render that has the element.\n     *\n     * `useLayoutEffect` runs before paint, so the menu is never painted at the\n     * overflowing position first.\n     *\n     * The size comes from `offsetWidth`/`offsetHeight` rather than from\n     * `getBoundingClientRect`, which reports the **transformed** box: the menu\n     * enters at `scale(0.96)`, so the rect is 4% small and the clamp lets the\n     * grown menu back over the edge. Measured in Chrome at 320 px wide, a 180 px\n     * menu came back at `right: 316` against a margin that asked for 312.\n     */\n    useLayoutEffect(() => {\n        if (!open || !menuNode) return;\n        menuNode.focus({ preventScroll: true });\n        const { offsetWidth, offsetHeight } = menuNode;\n        if (offsetWidth === 0 && offsetHeight === 0) return;\n        const maxLeft = window.innerWidth - offsetWidth - viewportMargin;\n        const maxTop = window.innerHeight - offsetHeight - viewportMargin;\n        const left = Math.max(viewportMargin, Math.min(position.x, maxLeft));\n        const top = Math.max(viewportMargin, Math.min(position.y, maxTop));\n        if (left !== position.x || top !== position.y) setPosition({ x: left, y: top });\n    }, [open, menuNode, position.x, position.y, viewportMargin]);\n\n    const handleSelect = (item: Extract<ContextMenuItem, { label: ReactNode }>): void => {\n        item.onSelect?.();\n        close();\n    };\n\n    return (\n        <>\n            <span\n                className={styles.root}\n                onContextMenu={handleContextMenu}\n                onClick={handleClick}\n                onPointerDown={handlePointerDown}\n                onPointerMove={handlePointerMove}\n                onPointerUp={cancelLongPress}\n                onPointerCancel={cancelLongPress}\n            >\n                {children}\n            </span>\n            {open && (\n                <Portal>\n                    <ul\n                        ref={setMenuNode}\n                        id={id}\n                        role=\"menu\"\n                        aria-orientation=\"vertical\"\n                        tabIndex={-1}\n                        className={cn(styles.menu, className)}\n                        style={{ top: position.y, left: position.x }}\n                    >\n                        {items.map((item, index) => {\n                            if (isSeparator(item)) {\n                                return (\n                                    <li\n                                        key={`separator-${index}`}\n                                        role=\"separator\"\n                                        className={styles.separator}\n                                        aria-hidden\n                                    />\n                                );\n                            }\n                            return (\n                                <li key={`item-${index}`} role=\"none\">\n                                    <button\n                                        ref={(el) => {\n                                            itemRefs.current[index] = el;\n                                        }}\n                                        type=\"button\"\n                                        role=\"menuitem\"\n                                        className={cn(\n                                            styles.item,\n                                            item.danger && styles.danger,\n                                            activeIndex === index && styles.active,\n                                        )}\n                                        disabled={item.disabled}\n                                        onClick={() => handleSelect(item)}\n                                        onMouseEnter={() => setActiveIndex(index)}\n                                    >\n                                        {item.label}\n                                    </button>\n                                </li>\n                            );\n                        })}\n                    </ul>\n                </Portal>\n            )}\n        </>\n    );\n}\n\n/**\n * Swallow the click a finger leaves behind after a long press.\n *\n * The hold fires while the finger is still down, so the browser goes on to\n * deliver `pointerup` and then `click` to whatever is under it — measured, that\n * is the same element the menu was just opened from. Without this, opening the\n * menu on a chat bubble also opens the bubble.\n *\n * Capture phase and `once`, so the listener never outlives the gesture that\n * installed it, and a later genuine click is untouched.\n */\nfunction suppressNextClick(): void {\n    if (typeof window === \"undefined\") return;\n    window.addEventListener(\n        \"click\",\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        },\n        { capture: true, once: true },\n    );\n}\n"],"mappings":"4MA+DA,IAAM,EAA4B,GAElC,SAAS,EAAY,EAAoD,CACrE,MAAO,cAAe,GAAQ,EAAK,YAAc,EACrD,CAsBA,SAAgB,EAAY,CACxB,QACA,WACA,YACA,UAAU,cACV,iBAAiB,IACjB,iBAAiB,GACA,CACjB,GAAM,CAAC,EAAM,IAAA,EAAW,EAAA,SAAA,CAAS,EAAK,EAChC,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAmB,CAAE,EAAG,EAAG,EAAG,CAAE,CAAC,EAC3D,CAAC,EAAa,IAAA,EAAkB,EAAA,SAAA,CAAiB,EAAE,EACnD,GAAA,EAAK,EAAA,MAAA,CAAM,EACX,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAkC,IAAI,EAChE,GAAA,EAAW,EAAA,OAAA,CAAwC,CAAC,CAAC,EACrD,GAAA,EAAiB,EAAA,OAAA,CAA6C,IAAI,EAClE,GAAA,EAAkB,EAAA,OAAA,CAAwB,IAAI,EAE9C,EAAoB,EACrB,KAAK,EAAM,IAAW,CAAC,EAAY,CAAI,GAAK,CAAC,EAAK,SAAW,EAAQ,EAAG,CAAC,CACzE,OAAQ,GAAM,IAAM,EAAE,EAErB,GAAA,EAAQ,EAAA,YAAA,KAAwB,CAClC,EAAQ,EAAK,EACb,EAAe,EAAE,CACrB,EAAG,CAAC,CAAC,EAEC,GAAA,EAAS,EAAA,YAAA,CAAa,GAA0B,CAClD,EAAY,CAAK,EACjB,EAAe,EAAE,EACjB,EAAQ,EAAI,CAChB,EAAG,CAAC,CAAC,EAEC,GAAA,EAAkB,EAAA,YAAA,KAAwB,CACxC,EAAe,UAAY,OAC3B,aAAa,EAAe,OAAO,EACnC,EAAe,QAAU,MAE7B,EAAgB,QAAU,IAC9B,EAAG,CAAC,CAAC,GAEL,EAAA,EAAA,UAAA,KAAgB,EAAiB,CAAC,CAAe,CAAC,EAElD,IAAM,EAAqB,GAAkC,CACrD,IAAY,UAChB,EAAM,eAAe,EACrB,EAAO,CAAE,EAAG,EAAM,QAAS,EAAG,EAAM,OAAQ,CAAC,EACjD,EAEM,EAAe,GAAkC,CAC/C,IAAY,eAChB,EAAO,CAAE,EAAG,EAAM,QAAS,EAAG,EAAM,OAAQ,CAAC,CACjD,EAQM,EAAqB,GAAmC,CAC1D,GAAI,GAAkB,GAAK,EAAM,cAAgB,QAAS,OAC1D,IAAM,EAAQ,CAAE,EAAG,EAAM,QAAS,EAAG,EAAM,OAAQ,EACnD,EAAgB,QAAU,EAC1B,EAAgB,EAChB,EAAgB,QAAU,EAC1B,EAAe,QAAU,eAAiB,CACtC,EAAe,QAAU,KACzB,EAAgB,QAAU,KAC1B,EAAkB,EAClB,EAAO,CAAK,CAChB,EAAG,CAAc,CACrB,EAOM,EAAqB,GAAmC,CAC1D,IAAM,EAAS,EAAgB,QAC1B,GAAU,EAAe,UAAY,MAEtC,KAAK,MAAM,EAAM,QAAU,EAAO,EAAG,EAAM,QAAU,EAAO,CAAC,EAC7D,GAEA,EAAgB,CAExB,EAEA,EAAA,eAAe,EAAM,CAAK,GAE1B,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAM,OACX,IAAM,EAAS,GAA+B,CAC1C,IAAM,EAAQ,GAAuB,CACjC,EAAM,eAAe,EACrB,EAAe,CAAI,EACnB,EAAS,QAAQ,EAAK,EAAE,MAAM,CAClC,EACA,GAAI,EAAkB,SAAW,EAAG,OACpC,IAAM,EAAU,EAAkB,QAAQ,CAAW,EACjD,EAAM,MAAQ,aACd,EAAK,GAAmB,EAAU,GAAK,EAAkB,SAAW,EAAE,EAEtE,EAAM,MAAQ,WACd,EACI,GACK,EAAU,EAAI,EAAkB,QAAU,EAAkB,SAC5D,EACT,EAEA,EAAM,MAAQ,QACd,EAAK,EAAkB,IAAM,EAAE,EAE/B,EAAM,MAAQ,OACd,EAAK,EAAkB,EAAkB,OAAS,IAAM,EAAE,CAElE,EACM,EAAU,GAA4B,CACpC,GAAY,CAAC,EAAS,SAAS,EAAM,MAAc,GAAG,EAAM,CACpE,EAKA,OAJA,OAAO,iBAAiB,UAAW,CAAK,EACxC,OAAO,iBAAiB,YAAa,CAAM,EAC3C,OAAO,iBAAiB,SAAU,CAAK,EACvC,OAAO,iBAAiB,SAAU,EAAO,EAAI,MAChC,CACT,OAAO,oBAAoB,UAAW,CAAK,EAC3C,OAAO,oBAAoB,YAAa,CAAM,EAC9C,OAAO,oBAAoB,SAAU,CAAK,EAC1C,OAAO,oBAAoB,SAAU,EAAO,EAAI,CACpD,CACJ,EAAG,CAAC,EAAM,EAAa,EAAmB,EAAO,CAAQ,CAAC,GAoB1D,EAAA,EAAA,gBAAA,KAAsB,CAClB,GAAI,CAAC,GAAQ,CAAC,EAAU,OACxB,EAAS,MAAM,CAAE,cAAe,EAAK,CAAC,EACtC,GAAM,CAAE,cAAa,gBAAiB,EACtC,GAAI,IAAgB,GAAK,IAAiB,EAAG,OAC7C,IAAM,EAAU,OAAO,WAAa,EAAc,EAC5C,EAAS,OAAO,YAAc,EAAe,EAC7C,EAAO,KAAK,IAAI,EAAgB,KAAK,IAAI,EAAS,EAAG,CAAO,CAAC,EAC7D,EAAM,KAAK,IAAI,EAAgB,KAAK,IAAI,EAAS,EAAG,CAAM,CAAC,GAC7D,IAAS,EAAS,GAAK,IAAQ,EAAS,IAAG,EAAY,CAAE,EAAG,EAAM,EAAG,CAAI,CAAC,CAClF,EAAG,CAAC,EAAM,EAAU,EAAS,EAAG,EAAS,EAAG,CAAc,CAAC,EAE3D,IAAM,EAAgB,GAA+D,CACjF,EAAK,WAAW,EAChB,EAAM,CACV,EAEA,OACI,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,UAAW,EAAA,QAAO,KAClB,cAAe,EACf,QAAS,EACT,cAAe,EACf,cAAe,EACf,YAAa,EACb,gBAAiB,EAEhB,UACC,CAAA,EACL,IACG,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAA,UACI,EAAA,EAAA,IAAA,CAAC,KAAD,CACI,IAAK,EACD,KACJ,KAAK,OACL,mBAAiB,WACjB,SAAU,GACV,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,CAAS,EACpC,MAAO,CAAE,IAAK,EAAS,EAAG,KAAM,EAAS,CAAE,EAE1C,SAAA,EAAM,KAAK,EAAM,IACV,EAAY,CAAI,GAEZ,EAAA,EAAA,IAAA,CAAC,KAAD,CAEI,KAAK,YACL,UAAW,EAAA,QAAO,UAClB,cAAA,EACH,EAJQ,aAAa,GAIrB,GAIL,EAAA,EAAA,IAAA,CAAC,KAAD,CAA0B,KAAK,OAC3B,UAAA,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,IAAM,GAAO,CACT,EAAS,QAAQ,GAAS,CAC9B,EACA,KAAK,SACL,KAAK,WACL,UAAW,EAAA,GACP,EAAA,QAAO,KACP,EAAK,QAAU,EAAA,QAAO,OACtB,IAAgB,GAAS,EAAA,QAAO,MACpC,EACA,SAAU,EAAK,SACf,YAAe,EAAa,CAAI,EAChC,iBAAoB,EAAe,CAAK,EAEvC,SAAA,EAAK,KACF,CAAA,CACR,EAlBK,QAAQ,GAkBb,CAEX,CACD,CAAA,CACA,CAAA,CAEd,CAAA,CAAA,CAEV,CAaA,SAAS,GAA0B,CAC3B,OAAO,OAAW,KACtB,OAAO,iBACH,QACC,GAAsB,CACnB,EAAM,eAAe,EACrB,EAAM,gBAAgB,CAC1B,EACA,CAAE,QAAS,GAAM,KAAM,EAAK,CAChC,CACJ"}

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,135 +1,132 @@
 import { cn as e } from "../../utils/cn.js";
-import { Portal as t } from "../Portal/Portal.js";
-import n from "./ContextMenu.module.js";
-import { useCallback as r, useEffect as i, useId as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useEscapeLayer as t } from "../Portal/escape-layer.js";
+import { Portal as n } from "../Portal/Portal.js";
+import r from "./ContextMenu.module.js";
+import { useCallback as i, useEffect as a, useId as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/ContextMenu/ContextMenu.tsx
-var f = 10;
-function p(e) {
+var p = 10;
+function m(e) {
 	return "separator" in e && e.separator === !0;
 }
-function m({ items: m, children: g, className: _, trigger: v = "contextmenu", longPressDelay: y = 500, viewportMargin: b = 8 }) {
-	let [x, S] = c(!1), [C, w] = c({
+function h({ items: h, children: _, className: v, trigger: y = "contextmenu", longPressDelay: b = 500, viewportMargin: x = 8 }) {
+	let [S, C] = l(!1), [w, T] = l({
 		x: 0,
 		y: 0
-	}), [T, E] = c(-1), D = a(), [O, k] = c(null), A = s([]), j = s(null), M = s(null), N = m.map((e, t) => !p(e) && !e.disabled ? t : -1).filter((e) => e !== -1), P = r(() => {
-		S(!1), E(-1);
-	}, []), F = r((e) => {
-		w(e), E(-1), S(!0);
-	}, []), I = r(() => {
-		j.current !== null && (clearTimeout(j.current), j.current = null), M.current = null;
+	}), [E, D] = l(-1), O = o(), [k, A] = l(null), j = c([]), M = c(null), N = c(null), P = h.map((e, t) => !m(e) && !e.disabled ? t : -1).filter((e) => e !== -1), F = i(() => {
+		C(!1), D(-1);
+	}, []), I = i((e) => {
+		T(e), D(-1), C(!0);
+	}, []), L = i(() => {
+		M.current !== null && (clearTimeout(M.current), M.current = null), N.current = null;
 	}, []);
-	i(() => I, [I]);
-	let L = (e) => {
-		v !== "click" && (e.preventDefault(), F({
+	a(() => L, [L]);
+	let R = (e) => {
+		y !== "click" && (e.preventDefault(), I({
 			x: e.clientX,
 			y: e.clientY
 		}));
-	}, R = (e) => {
-		v !== "contextmenu" && F({
+	}, z = (e) => {
+		y !== "contextmenu" && I({
 			x: e.clientX,
 			y: e.clientY
 		});
-	}, z = (e) => {
-		if (y <= 0 || e.pointerType === "mouse") return;
+	}, B = (e) => {
+		if (b <= 0 || e.pointerType === "mouse") return;
 		let t = {
 			x: e.clientX,
 			y: e.clientY
 		};
-		M.current = t, I(), M.current = t, j.current = setTimeout(() => {
-			j.current = null, M.current = null, h(), F(t);
-		}, y);
-	}, B = (e) => {
-		let t = M.current;
-		t && j.current !== null && Math.hypot(e.clientX - t.x, e.clientY - t.y) > f && I();
+		N.current = t, L(), N.current = t, M.current = setTimeout(() => {
+			M.current = null, N.current = null, g(), I(t);
+		}, b);
+	}, V = (e) => {
+		let t = N.current;
+		t && M.current !== null && Math.hypot(e.clientX - t.x, e.clientY - t.y) > p && L();
 	};
-	i(() => {
-		if (!x) return;
+	t(S, F), a(() => {
+		if (!S) return;
 		let e = (e) => {
-			if (e.key === "Escape") {
-				P();
-				return;
-			}
 			let t = (t) => {
-				e.preventDefault(), E(t), A.current[t]?.focus();
+				e.preventDefault(), D(t), j.current[t]?.focus();
 			};
-			if (N.length === 0) return;
-			let n = N.indexOf(T);
-			e.key === "ArrowDown" && t(N[(n + 1) % N.length] ?? -1), e.key === "ArrowUp" && t(N[(n - 1 + N.length) % N.length] ?? -1), e.key === "Home" && t(N[0] ?? -1), e.key === "End" && t(N[N.length - 1] ?? -1);
+			if (P.length === 0) return;
+			let n = P.indexOf(E);
+			e.key === "ArrowDown" && t(P[(n + 1) % P.length] ?? -1), e.key === "ArrowUp" && t(P[(n - 1 + P.length) % P.length] ?? -1), e.key === "Home" && t(P[0] ?? -1), e.key === "End" && t(P[P.length - 1] ?? -1);
 		}, t = (e) => {
-			O && !O.contains(e.target) && P();
+			k && !k.contains(e.target) && F();
 		};
-		return window.addEventListener("keydown", e), window.addEventListener("mousedown", t), window.addEventListener("resize", P), window.addEventListener("scroll", P, !0), () => {
-			window.removeEventListener("keydown", e), window.removeEventListener("mousedown", t), window.removeEventListener("resize", P), window.removeEventListener("scroll", P, !0);
+		return window.addEventListener("keydown", e), window.addEventListener("mousedown", t), window.addEventListener("resize", F), window.addEventListener("scroll", F, !0), () => {
+			window.removeEventListener("keydown", e), window.removeEventListener("mousedown", t), window.removeEventListener("resize", F), window.removeEventListener("scroll", F, !0);
 		};
 	}, [
-		x,
-		T,
-		N,
+		S,
+		E,
 		P,
-		O
-	]), o(() => {
-		if (!x || !O) return;
-		O.focus({ preventScroll: !0 });
-		let { offsetWidth: e, offsetHeight: t } = O;
+		F,
+		k
+	]), s(() => {
+		if (!S || !k) return;
+		k.focus({ preventScroll: !0 });
+		let { offsetWidth: e, offsetHeight: t } = k;
 		if (e === 0 && t === 0) return;
-		let n = window.innerWidth - e - b, r = window.innerHeight - t - b, i = Math.max(b, Math.min(C.x, n)), a = Math.max(b, Math.min(C.y, r));
-		(i !== C.x || a !== C.y) && w({
+		let n = window.innerWidth - e - x, r = window.innerHeight - t - x, i = Math.max(x, Math.min(w.x, n)), a = Math.max(x, Math.min(w.y, r));
+		(i !== w.x || a !== w.y) && T({
 			x: i,
 			y: a
 		});
 	}, [
-		x,
-		O,
-		C.x,
-		C.y,
-		b
+		S,
+		k,
+		w.x,
+		w.y,
+		x
 	]);
-	let V = (e) => {
-		e.onSelect?.(), P();
+	let H = (e) => {
+		e.onSelect?.(), F();
 	};
-	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("span", {
-		className: n.root,
-		onContextMenu: L,
-		onClick: R,
-		onPointerDown: z,
-		onPointerMove: B,
-		onPointerUp: I,
-		onPointerCancel: I,
-		children: g
-	}), x && /* @__PURE__ */ u(t, { children: /* @__PURE__ */ u("ul", {
-		ref: k,
-		id: D,
+	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("span", {
+		className: r.root,
+		onContextMenu: R,
+		onClick: z,
+		onPointerDown: B,
+		onPointerMove: V,
+		onPointerUp: L,
+		onPointerCancel: L,
+		children: _
+	}), S && /* @__PURE__ */ d(n, { children: /* @__PURE__ */ d("ul", {
+		ref: A,
+		id: O,
 		role: "menu",
 		"aria-orientation": "vertical",
 		tabIndex: -1,
-		className: e(n.menu, _),
+		className: e(r.menu, v),
 		style: {
-			top: C.y,
-			left: C.x
+			top: w.y,
+			left: w.x
 		},
-		children: m.map((t, r) => p(t) ? /* @__PURE__ */ u("li", {
+		children: h.map((t, n) => m(t) ? /* @__PURE__ */ d("li", {
 			role: "separator",
-			className: n.separator,
+			className: r.separator,
 			"aria-hidden": !0
-		}, `separator-${r}`) : /* @__PURE__ */ u("li", {
+		}, `separator-${n}`) : /* @__PURE__ */ d("li", {
 			role: "none",
-			children: /* @__PURE__ */ u("button", {
+			children: /* @__PURE__ */ d("button", {
 				ref: (e) => {
-					A.current[r] = e;
+					j.current[n] = e;
 				},
 				type: "button",
 				role: "menuitem",
-				className: e(n.item, t.danger && n.danger, T === r && n.active),
+				className: e(r.item, t.danger && r.danger, E === n && r.active),
 				disabled: t.disabled,
-				onClick: () => V(t),
-				onMouseEnter: () => E(r),
+				onClick: () => H(t),
+				onMouseEnter: () => D(n),
 				children: t.label
 			})
-		}, `item-${r}`))
+		}, `item-${n}`))
 	}) })] });
 }
-function h() {
+function g() {
 	typeof window > "u" || window.addEventListener("click", (e) => {
 		e.preventDefault(), e.stopPropagation();
 	}, {
@@ -138,6 +135,6 @@ function h() {
 	});
 }
 //#endregion
-export { m as ContextMenu };
+export { h as ContextMenu };
 
 //# sourceMappingURL=ContextMenu.js.map

package/dist/components/ContextMenu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines function-lines — the body owns one anchor point and\n * everything that reads from it: the three ways a menu opens (right click, long\n * press, click), the clamp that keeps it inside the viewport, and roving focus\n * for the keyboard path. Splitting them would hand the same geometry to three\n * files.\n */\nimport { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"@/components/Portal\";\nimport styles from \"./ContextMenu.module.css\";\n\nexport type ContextMenuItem =\n    | {\n          label: ReactNode;\n          onSelect?: () => void;\n          disabled?: boolean;\n          danger?: boolean;\n      }\n    | { separator: true };\n\n/** How the menu is opened by a pointer. Touch always gets the long press. */\nexport type ContextMenuTrigger = \"contextmenu\" | \"click\" | \"both\";\n\nexport interface ContextMenuProps {\n    /** Menu entries — selectable items and separators. */\n    items: ContextMenuItem[];\n    /** Trigger area. Right-clicking anywhere within opens the menu at the cursor. */\n    children: ReactNode;\n    /** Extra class names forwarded to the menu element. */\n    className?: string;\n    /**\n     * Which pointer gesture opens the menu. Default `\"contextmenu\"`.\n     *\n     * `\"click\"` is the `⋮` button case, where a right click is the wrong gesture\n     * on the desktop and impossible on touch. `\"both\"` keeps the right click and\n     * adds the left one.\n     */\n    trigger?: ContextMenuTrigger;\n    /**\n     * Hold, in ms, that opens the menu from a coarse pointer. Default `500`.\n     *\n     * Set `0` to turn the long press off. It is on by default because touch has\n     * no right click: measured in Chrome with touch emulation (Pixel 7 and\n     * iPhone 13 profiles), a 900 ms hold fires `pointerdown`, `touchstart`,\n     * `pointerup`, `touchend` and `click` — and no `contextmenu` at all. Every\n     * action behind this menu was unreachable on a phone.\n     */\n    longPressDelay?: number;\n    /**\n     * Gap, in px, kept between the menu and the edge of the viewport. Default `8`.\n     */\n    viewportMargin?: number;\n}\n\ninterface Position {\n    x: number;\n    y: number;\n}\n\n/** Movement, in px, that reads as a scroll rather than a hold. */\nconst LONG_PRESS_MOVE_TOLERANCE = 10;\n\nfunction isSeparator(item: ContextMenuItem): item is { separator: true } {\n    return \"separator\" in item && item.separator === true;\n}\n\n/**\n * Context menu — right click, long press, or click.\n *\n * - Opens at the pointer on `contextmenu`, and on a long press from touch or pen,\n *   which is the gesture those pointers have instead of a right click. `trigger`\n *   adds or replaces the mouse gesture; the long press is independent of it.\n * - Clamped inside the viewport after it mounts, so a menu opened near an edge\n *   moves in rather than overflowing — measured before the clamp: a 180 px menu\n *   opened at `x=235` in a 320 px window ran 95 px off screen, cutting the right\n *   edge off every label.\n * - Rendered through a {@link Portal} so it escapes parent overflow/stacking\n *   contexts.\n * - Closes on outside click, Escape, scroll, resize, or item selection.\n * - Arrow Up/Down move focus across selectable items and wrap; Home/End jump to\n *   the ends; Enter activates the focused item. The menu itself takes focus when\n *   it opens, so a screen reader announces it instead of staying on the trigger.\n *\n * @param props - The context menu props.\n * @returns The trigger wrapper plus the portalled menu when open.\n */\nexport function ContextMenu({\n    items,\n    children,\n    className,\n    trigger = \"contextmenu\",\n    longPressDelay = 500,\n    viewportMargin = 8,\n}: ContextMenuProps) {\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const id = useId();\n    const [menuNode, setMenuNode] = useState<HTMLUListElement | null>(null);\n    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n    const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const longPressOrigin = useRef<Position | null>(null);\n\n    const selectableIndexes = items\n        .map((item, index) => (!isSeparator(item) && !item.disabled ? index : -1))\n        .filter((i) => i !== -1);\n\n    const close = useCallback((): void => {\n        setOpen(false);\n        setActiveIndex(-1);\n    }, []);\n\n    const openAt = useCallback((point: Position): void => {\n        setPosition(point);\n        setActiveIndex(-1);\n        setOpen(true);\n    }, []);\n\n    const cancelLongPress = useCallback((): void => {\n        if (longPressTimer.current !== null) {\n            clearTimeout(longPressTimer.current);\n            longPressTimer.current = null;\n        }\n        longPressOrigin.current = null;\n    }, []);\n\n    useEffect(() => cancelLongPress, [cancelLongPress]);\n\n    const handleContextMenu = (event: React.MouseEvent): void => {\n        if (trigger === \"click\") return;\n        event.preventDefault();\n        openAt({ x: event.clientX, y: event.clientY });\n    };\n\n    const handleClick = (event: React.MouseEvent): void => {\n        if (trigger === \"contextmenu\") return;\n        openAt({ x: event.clientX, y: event.clientY });\n    };\n\n    /**\n     * Start the hold that stands in for a right click on a coarse pointer.\n     *\n     * A mouse is excluded: it has `contextmenu`, and holding the left button is\n     * how a drag starts.\n     */\n    const handlePointerDown = (event: ReactPointerEvent): void => {\n        if (longPressDelay <= 0 || event.pointerType === \"mouse\") return;\n        const point = { x: event.clientX, y: event.clientY };\n        longPressOrigin.current = point;\n        cancelLongPress();\n        longPressOrigin.current = point;\n        longPressTimer.current = setTimeout(() => {\n            longPressTimer.current = null;\n            longPressOrigin.current = null;\n            suppressNextClick();\n            openAt(point);\n        }, longPressDelay);\n    };\n\n    /**\n     * Cancel the hold once the finger travels — otherwise every scroll that\n     * starts on the trigger opens a menu, which is the difference between a\n     * usable long press and an infuriating one.\n     */\n    const handlePointerMove = (event: ReactPointerEvent): void => {\n        const origin = longPressOrigin.current;\n        if (!origin || longPressTimer.current === null) return;\n        if (\n            Math.hypot(event.clientX - origin.x, event.clientY - origin.y) >\n            LONG_PRESS_MOVE_TOLERANCE\n        ) {\n            cancelLongPress();\n        }\n    };\n\n    useEffect(() => {\n        if (!open) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"Escape\") {\n                close();\n                return;\n            }\n            const move = (next: number): void => {\n                event.preventDefault();\n                setActiveIndex(next);\n                itemRefs.current[next]?.focus();\n            };\n            if (selectableIndexes.length === 0) return;\n            const current = selectableIndexes.indexOf(activeIndex);\n            if (event.key === \"ArrowDown\") {\n                move(selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1);\n            }\n            if (event.key === \"ArrowUp\") {\n                move(\n                    selectableIndexes[\n                        (current - 1 + selectableIndexes.length) % selectableIndexes.length\n                    ] ?? -1,\n                );\n            }\n            if (event.key === \"Home\") {\n                move(selectableIndexes[0] ?? -1);\n            }\n            if (event.key === \"End\") {\n                move(selectableIndexes[selectableIndexes.length - 1] ?? -1);\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (menuNode && !menuNode.contains(event.target as Node)) close();\n        };\n        window.addEventListener(\"keydown\", onKey);\n        window.addEventListener(\"mousedown\", onDown);\n        window.addEventListener(\"resize\", close);\n        window.addEventListener(\"scroll\", close, true);\n        return () => {\n            window.removeEventListener(\"keydown\", onKey);\n            window.removeEventListener(\"mousedown\", onDown);\n            window.removeEventListener(\"resize\", close);\n            window.removeEventListener(\"scroll\", close, true);\n        };\n    }, [open, activeIndex, selectableIndexes, close, menuNode]);\n\n    /**\n     * Pull the menu inside the viewport, and take focus.\n     *\n     * Keyed off the node rather than off `open`, because {@link Portal} renders\n     * `null` on its first pass and mounts on an effect — an effect that reads a\n     * ref when `open` flips runs while the menu does not exist yet, measures\n     * nothing and focuses nothing. A callback ref in state is what makes this\n     * run on the render that has the element.\n     *\n     * `useLayoutEffect` runs before paint, so the menu is never painted at the\n     * overflowing position first.\n     *\n     * The size comes from `offsetWidth`/`offsetHeight` rather than from\n     * `getBoundingClientRect`, which reports the **transformed** box: the menu\n     * enters at `scale(0.96)`, so the rect is 4% small and the clamp lets the\n     * grown menu back over the edge. Measured in Chrome at 320 px wide, a 180 px\n     * menu came back at `right: 316` against a margin that asked for 312.\n     */\n    useLayoutEffect(() => {\n        if (!open || !menuNode) return;\n        menuNode.focus({ preventScroll: true });\n        const { offsetWidth, offsetHeight } = menuNode;\n        if (offsetWidth === 0 && offsetHeight === 0) return;\n        const maxLeft = window.innerWidth - offsetWidth - viewportMargin;\n        const maxTop = window.innerHeight - offsetHeight - viewportMargin;\n        const left = Math.max(viewportMargin, Math.min(position.x, maxLeft));\n        const top = Math.max(viewportMargin, Math.min(position.y, maxTop));\n        if (left !== position.x || top !== position.y) setPosition({ x: left, y: top });\n    }, [open, menuNode, position.x, position.y, viewportMargin]);\n\n    const handleSelect = (item: Extract<ContextMenuItem, { label: ReactNode }>): void => {\n        item.onSelect?.();\n        close();\n    };\n\n    return (\n        <>\n            <span\n                className={styles.root}\n                onContextMenu={handleContextMenu}\n                onClick={handleClick}\n                onPointerDown={handlePointerDown}\n                onPointerMove={handlePointerMove}\n                onPointerUp={cancelLongPress}\n                onPointerCancel={cancelLongPress}\n            >\n                {children}\n            </span>\n            {open && (\n                <Portal>\n                    <ul\n                        ref={setMenuNode}\n                        id={id}\n                        role=\"menu\"\n                        aria-orientation=\"vertical\"\n                        tabIndex={-1}\n                        className={cn(styles.menu, className)}\n                        style={{ top: position.y, left: position.x }}\n                    >\n                        {items.map((item, index) => {\n                            if (isSeparator(item)) {\n                                return (\n                                    <li\n                                        key={`separator-${index}`}\n                                        role=\"separator\"\n                                        className={styles.separator}\n                                        aria-hidden\n                                    />\n                                );\n                            }\n                            return (\n                                <li key={`item-${index}`} role=\"none\">\n                                    <button\n                                        ref={(el) => {\n                                            itemRefs.current[index] = el;\n                                        }}\n                                        type=\"button\"\n                                        role=\"menuitem\"\n                                        className={cn(\n                                            styles.item,\n                                            item.danger && styles.danger,\n                                            activeIndex === index && styles.active,\n                                        )}\n                                        disabled={item.disabled}\n                                        onClick={() => handleSelect(item)}\n                                        onMouseEnter={() => setActiveIndex(index)}\n                                    >\n                                        {item.label}\n                                    </button>\n                                </li>\n                            );\n                        })}\n                    </ul>\n                </Portal>\n            )}\n        </>\n    );\n}\n\n/**\n * Swallow the click a finger leaves behind after a long press.\n *\n * The hold fires while the finger is still down, so the browser goes on to\n * deliver `pointerup` and then `click` to whatever is under it — measured, that\n * is the same element the menu was just opened from. Without this, opening the\n * menu on a chat bubble also opens the bubble.\n *\n * Capture phase and `once`, so the listener never outlives the gesture that\n * installed it, and a later genuine click is untouched.\n */\nfunction suppressNextClick(): void {\n    if (typeof window === \"undefined\") return;\n    window.addEventListener(\n        \"click\",\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        },\n        { capture: true, once: true },\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ContextMenu.js","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines function-lines — the body owns one anchor point and\n * everything that reads from it: the three ways a menu opens (right click, long\n * press, click), the clamp that keeps it inside the viewport, and roving focus\n * for the keyboard path. Splitting them would hand the same geometry to three\n * files.\n */\nimport { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"@/components/Portal\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport styles from \"./ContextMenu.module.css\";\n\nexport type ContextMenuItem =\n    | {\n          label: ReactNode;\n          onSelect?: () => void;\n          disabled?: boolean;\n          danger?: boolean;\n      }\n    | { separator: true };\n\n/** How the menu is opened by a pointer. Touch always gets the long press. */\nexport type ContextMenuTrigger = \"contextmenu\" | \"click\" | \"both\";\n\nexport interface ContextMenuProps {\n    /** Menu entries — selectable items and separators. */\n    items: ContextMenuItem[];\n    /** Trigger area. Right-clicking anywhere within opens the menu at the cursor. */\n    children: ReactNode;\n    /** Extra class names forwarded to the menu element. */\n    className?: string;\n    /**\n     * Which pointer gesture opens the menu. Default `\"contextmenu\"`.\n     *\n     * `\"click\"` is the `⋮` button case, where a right click is the wrong gesture\n     * on the desktop and impossible on touch. `\"both\"` keeps the right click and\n     * adds the left one.\n     */\n    trigger?: ContextMenuTrigger;\n    /**\n     * Hold, in ms, that opens the menu from a coarse pointer. Default `500`.\n     *\n     * Set `0` to turn the long press off. It is on by default because touch has\n     * no right click: measured in Chrome with touch emulation (Pixel 7 and\n     * iPhone 13 profiles), a 900 ms hold fires `pointerdown`, `touchstart`,\n     * `pointerup`, `touchend` and `click` — and no `contextmenu` at all. Every\n     * action behind this menu was unreachable on a phone.\n     */\n    longPressDelay?: number;\n    /**\n     * Gap, in px, kept between the menu and the edge of the viewport. Default `8`.\n     */\n    viewportMargin?: number;\n}\n\ninterface Position {\n    x: number;\n    y: number;\n}\n\n/** Movement, in px, that reads as a scroll rather than a hold. */\nconst LONG_PRESS_MOVE_TOLERANCE = 10;\n\nfunction isSeparator(item: ContextMenuItem): item is { separator: true } {\n    return \"separator\" in item && item.separator === true;\n}\n\n/**\n * Context menu — right click, long press, or click.\n *\n * - Opens at the pointer on `contextmenu`, and on a long press from touch or pen,\n *   which is the gesture those pointers have instead of a right click. `trigger`\n *   adds or replaces the mouse gesture; the long press is independent of it.\n * - Clamped inside the viewport after it mounts, so a menu opened near an edge\n *   moves in rather than overflowing — measured before the clamp: a 180 px menu\n *   opened at `x=235` in a 320 px window ran 95 px off screen, cutting the right\n *   edge off every label.\n * - Rendered through a {@link Portal} so it escapes parent overflow/stacking\n *   contexts.\n * - Closes on outside click, Escape, scroll, resize, or item selection.\n * - Arrow Up/Down move focus across selectable items and wrap; Home/End jump to\n *   the ends; Enter activates the focused item. The menu itself takes focus when\n *   it opens, so a screen reader announces it instead of staying on the trigger.\n *\n * @param props - The context menu props.\n * @returns The trigger wrapper plus the portalled menu when open.\n */\nexport function ContextMenu({\n    items,\n    children,\n    className,\n    trigger = \"contextmenu\",\n    longPressDelay = 500,\n    viewportMargin = 8,\n}: ContextMenuProps) {\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const id = useId();\n    const [menuNode, setMenuNode] = useState<HTMLUListElement | null>(null);\n    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n    const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const longPressOrigin = useRef<Position | null>(null);\n\n    const selectableIndexes = items\n        .map((item, index) => (!isSeparator(item) && !item.disabled ? index : -1))\n        .filter((i) => i !== -1);\n\n    const close = useCallback((): void => {\n        setOpen(false);\n        setActiveIndex(-1);\n    }, []);\n\n    const openAt = useCallback((point: Position): void => {\n        setPosition(point);\n        setActiveIndex(-1);\n        setOpen(true);\n    }, []);\n\n    const cancelLongPress = useCallback((): void => {\n        if (longPressTimer.current !== null) {\n            clearTimeout(longPressTimer.current);\n            longPressTimer.current = null;\n        }\n        longPressOrigin.current = null;\n    }, []);\n\n    useEffect(() => cancelLongPress, [cancelLongPress]);\n\n    const handleContextMenu = (event: React.MouseEvent): void => {\n        if (trigger === \"click\") return;\n        event.preventDefault();\n        openAt({ x: event.clientX, y: event.clientY });\n    };\n\n    const handleClick = (event: React.MouseEvent): void => {\n        if (trigger === \"contextmenu\") return;\n        openAt({ x: event.clientX, y: event.clientY });\n    };\n\n    /**\n     * Start the hold that stands in for a right click on a coarse pointer.\n     *\n     * A mouse is excluded: it has `contextmenu`, and holding the left button is\n     * how a drag starts.\n     */\n    const handlePointerDown = (event: ReactPointerEvent): void => {\n        if (longPressDelay <= 0 || event.pointerType === \"mouse\") return;\n        const point = { x: event.clientX, y: event.clientY };\n        longPressOrigin.current = point;\n        cancelLongPress();\n        longPressOrigin.current = point;\n        longPressTimer.current = setTimeout(() => {\n            longPressTimer.current = null;\n            longPressOrigin.current = null;\n            suppressNextClick();\n            openAt(point);\n        }, longPressDelay);\n    };\n\n    /**\n     * Cancel the hold once the finger travels — otherwise every scroll that\n     * starts on the trigger opens a menu, which is the difference between a\n     * usable long press and an infuriating one.\n     */\n    const handlePointerMove = (event: ReactPointerEvent): void => {\n        const origin = longPressOrigin.current;\n        if (!origin || longPressTimer.current === null) return;\n        if (\n            Math.hypot(event.clientX - origin.x, event.clientY - origin.y) >\n            LONG_PRESS_MOVE_TOLERANCE\n        ) {\n            cancelLongPress();\n        }\n    };\n\n    useEscapeLayer(open, close);\n\n    useEffect(() => {\n        if (!open) return;\n        const onKey = (event: KeyboardEvent): void => {\n            const move = (next: number): void => {\n                event.preventDefault();\n                setActiveIndex(next);\n                itemRefs.current[next]?.focus();\n            };\n            if (selectableIndexes.length === 0) return;\n            const current = selectableIndexes.indexOf(activeIndex);\n            if (event.key === \"ArrowDown\") {\n                move(selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1);\n            }\n            if (event.key === \"ArrowUp\") {\n                move(\n                    selectableIndexes[\n                        (current - 1 + selectableIndexes.length) % selectableIndexes.length\n                    ] ?? -1,\n                );\n            }\n            if (event.key === \"Home\") {\n                move(selectableIndexes[0] ?? -1);\n            }\n            if (event.key === \"End\") {\n                move(selectableIndexes[selectableIndexes.length - 1] ?? -1);\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (menuNode && !menuNode.contains(event.target as Node)) close();\n        };\n        window.addEventListener(\"keydown\", onKey);\n        window.addEventListener(\"mousedown\", onDown);\n        window.addEventListener(\"resize\", close);\n        window.addEventListener(\"scroll\", close, true);\n        return () => {\n            window.removeEventListener(\"keydown\", onKey);\n            window.removeEventListener(\"mousedown\", onDown);\n            window.removeEventListener(\"resize\", close);\n            window.removeEventListener(\"scroll\", close, true);\n        };\n    }, [open, activeIndex, selectableIndexes, close, menuNode]);\n\n    /**\n     * Pull the menu inside the viewport, and take focus.\n     *\n     * Keyed off the node rather than off `open`, because {@link Portal} renders\n     * `null` on its first pass and mounts on an effect — an effect that reads a\n     * ref when `open` flips runs while the menu does not exist yet, measures\n     * nothing and focuses nothing. A callback ref in state is what makes this\n     * run on the render that has the element.\n     *\n     * `useLayoutEffect` runs before paint, so the menu is never painted at the\n     * overflowing position first.\n     *\n     * The size comes from `offsetWidth`/`offsetHeight` rather than from\n     * `getBoundingClientRect`, which reports the **transformed** box: the menu\n     * enters at `scale(0.96)`, so the rect is 4% small and the clamp lets the\n     * grown menu back over the edge. Measured in Chrome at 320 px wide, a 180 px\n     * menu came back at `right: 316` against a margin that asked for 312.\n     */\n    useLayoutEffect(() => {\n        if (!open || !menuNode) return;\n        menuNode.focus({ preventScroll: true });\n        const { offsetWidth, offsetHeight } = menuNode;\n        if (offsetWidth === 0 && offsetHeight === 0) return;\n        const maxLeft = window.innerWidth - offsetWidth - viewportMargin;\n        const maxTop = window.innerHeight - offsetHeight - viewportMargin;\n        const left = Math.max(viewportMargin, Math.min(position.x, maxLeft));\n        const top = Math.max(viewportMargin, Math.min(position.y, maxTop));\n        if (left !== position.x || top !== position.y) setPosition({ x: left, y: top });\n    }, [open, menuNode, position.x, position.y, viewportMargin]);\n\n    const handleSelect = (item: Extract<ContextMenuItem, { label: ReactNode }>): void => {\n        item.onSelect?.();\n        close();\n    };\n\n    return (\n        <>\n            <span\n                className={styles.root}\n                onContextMenu={handleContextMenu}\n                onClick={handleClick}\n                onPointerDown={handlePointerDown}\n                onPointerMove={handlePointerMove}\n                onPointerUp={cancelLongPress}\n                onPointerCancel={cancelLongPress}\n            >\n                {children}\n            </span>\n            {open && (\n                <Portal>\n                    <ul\n                        ref={setMenuNode}\n                        id={id}\n                        role=\"menu\"\n                        aria-orientation=\"vertical\"\n                        tabIndex={-1}\n                        className={cn(styles.menu, className)}\n                        style={{ top: position.y, left: position.x }}\n                    >\n                        {items.map((item, index) => {\n                            if (isSeparator(item)) {\n                                return (\n                                    <li\n                                        key={`separator-${index}`}\n                                        role=\"separator\"\n                                        className={styles.separator}\n                                        aria-hidden\n                                    />\n                                );\n                            }\n                            return (\n                                <li key={`item-${index}`} role=\"none\">\n                                    <button\n                                        ref={(el) => {\n                                            itemRefs.current[index] = el;\n                                        }}\n                                        type=\"button\"\n                                        role=\"menuitem\"\n                                        className={cn(\n                                            styles.item,\n                                            item.danger && styles.danger,\n                                            activeIndex === index && styles.active,\n                                        )}\n                                        disabled={item.disabled}\n                                        onClick={() => handleSelect(item)}\n                                        onMouseEnter={() => setActiveIndex(index)}\n                                    >\n                                        {item.label}\n                                    </button>\n                                </li>\n                            );\n                        })}\n                    </ul>\n                </Portal>\n            )}\n        </>\n    );\n}\n\n/**\n * Swallow the click a finger leaves behind after a long press.\n *\n * The hold fires while the finger is still down, so the browser goes on to\n * deliver `pointerup` and then `click` to whatever is under it — measured, that\n * is the same element the menu was just opened from. Without this, opening the\n * menu on a chat bubble also opens the bubble.\n *\n * Capture phase and `once`, so the listener never outlives the gesture that\n * installed it, and a later genuine click is untouched.\n */\nfunction suppressNextClick(): void {\n    if (typeof window === \"undefined\") return;\n    window.addEventListener(\n        \"click\",\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        },\n        { capture: true, once: true },\n    );\n}\n"],"mappings":"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"}

package/dist/components/Drawer/Drawer.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-breakpoint.cjs"),n=require("../Portal/portal-host.cjs"),r=require("./Drawer.module.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("react-dom");function s({open:s,onClose:l,placement:u=`right`,title:d,children:f,footer:p,closeOnBackdrop:m=!0,closeOnEsc:h=!0,hideCloseButton:g=!1,className:_,mobilePlacement:v,showHandle:y=!1}){let{isMobile:b}=t.useBreakpoint(),x=b&&v?v:u;(0,i.useEffect)(()=>{if(!s)return;let e=document.body.style.overflow;document.body.style.overflow=`hidden`;let t=e=>{h&&e.key===`Escape`&&l()};return window.addEventListener(`keydown`,t),()=>{document.body.style.overflow=e,window.removeEventListener(`keydown`,t)}},[s,h,l]);let S=n.usePortalHost();return!s||!S?null:(0,o.createPortal)((0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`div`,{className:r.default.overlay,onClick:()=>{m&&l()}}),(0,a.jsxs)(`aside`,{role:`dialog`,"aria-modal":`true`,className:e.cn(r.default.panel,r.default[x],_),children:[y&&(x===`bottom`||x===`top`)&&(0,a.jsx)(`div`,{className:e.cn(r.default.handle,x===`top`&&r.default.handleTop),"aria-hidden":!0}),(d||!g)&&(0,a.jsxs)(`header`,{className:r.default.header,children:[(0,a.jsx)(`h3`,{className:r.default.title,children:d}),!g&&(0,a.jsx)(`button`,{type:`button`,"aria-label":`Fechar`,className:r.default.close,onClick:l,children:(0,a.jsx)(c,{})})]}),(0,a.jsx)(`div`,{className:r.default.body,children:f}),p&&(0,a.jsx)(`footer`,{className:r.default.footer,children:p})]})]}),S)}function c(){return(0,a.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,children:(0,a.jsx)(`path`,{d:`M6 6l12 12M6 18L18 6`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}exports.Drawer=s;
+const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-breakpoint.cjs"),n=require("../Portal/escape-layer.cjs"),r=require("../Portal/portal-host.cjs"),i=require("./Drawer.module.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("react-dom");function c({open:c,onClose:u,placement:d=`right`,title:f,children:p,footer:m,closeOnBackdrop:h=!0,closeOnEsc:g=!0,hideCloseButton:_=!1,className:v,mobilePlacement:y,showHandle:b=!1}){let{isMobile:x}=t.useBreakpoint(),S=x&&y?y:d;n.useEscapeLayer(c,g?u:null),(0,a.useEffect)(()=>{if(!c)return;let e=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{document.body.style.overflow=e}},[c,g,u]);let C=r.usePortalHost();return!c||!C?null:(0,s.createPortal)((0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(`div`,{className:i.default.overlay,onClick:()=>{h&&u()}}),(0,o.jsxs)(`aside`,{role:`dialog`,"aria-modal":`true`,className:e.cn(i.default.panel,i.default[S],v),children:[b&&(S===`bottom`||S===`top`)&&(0,o.jsx)(`div`,{className:e.cn(i.default.handle,S===`top`&&i.default.handleTop),"aria-hidden":!0}),(f||!_)&&(0,o.jsxs)(`header`,{className:i.default.header,children:[(0,o.jsx)(`h3`,{className:i.default.title,children:f}),!_&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Fechar`,className:i.default.close,onClick:u,children:(0,o.jsx)(l,{})})]}),(0,o.jsx)(`div`,{className:i.default.body,children:p}),m&&(0,o.jsx)(`footer`,{className:i.default.footer,children:m})]})]}),C)}function l(){return(0,o.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,children:(0,o.jsx)(`path`,{d:`M6 6l12 12M6 18L18 6`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}exports.Drawer=c;
 //# sourceMappingURL=Drawer.cjs.map

package/dist/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — placement plus mobilePlacement is\n * the whole point — a drawer that comes from the side on desktop and from the bottom\n * on a phone — and the rest is the dialog contract the SDK's Modal also has (open,\n * onClose, title, children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton)\n * plus showHandle for the sheet affordance.\n */\nimport { useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./Drawer.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport type DrawerPlacement = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n    open: boolean;\n    onClose: () => void;\n    placement?: DrawerPlacement;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    hideCloseButton?: boolean;\n    className?: string;\n    /**\n     * Auto-switch to bottom-sheet placement on mobile viewports (< md).\n     * Modern mobile apps default to bottom drawers; on desktop the original\n     * `placement` is preserved.\n     */\n    mobilePlacement?: DrawerPlacement;\n    /** Render a drag handle indicator at the leading edge (bottom-sheet style). */\n    showHandle?: boolean;\n}\n\n/**\n * Sliding side panel. Same building blocks as {@link Modal} but anchored to\n * an edge. Locks body scroll while open.\n */\nexport function Drawer({\n    open,\n    onClose,\n    placement = \"right\",\n    title,\n    children,\n    footer,\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    hideCloseButton = false,\n    className,\n    mobilePlacement,\n    showHandle = false,\n}: DrawerProps) {\n    const { isMobile } = useBreakpoint();\n    const effectivePlacement: DrawerPlacement =\n        isMobile && mobilePlacement ? mobilePlacement : placement;\n\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n        return () => {\n            document.body.style.overflow = previousOverflow;\n            window.removeEventListener(\"keydown\", handleKey);\n        };\n    }, [open, closeOnEsc, onClose]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    return createPortal(\n        <>\n            <div\n                className={styles.overlay}\n                onClick={() => {\n                    if (closeOnBackdrop) onClose();\n                }}\n            />\n            <aside\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={cn(styles.panel, styles[effectivePlacement], className)}\n            >\n                {showHandle &&\n                    (effectivePlacement === \"bottom\" || effectivePlacement === \"top\") && (\n                        <div\n                            className={cn(\n                                styles.handle,\n                                effectivePlacement === \"top\" && styles.handleTop,\n                            )}\n                            aria-hidden\n                        />\n                    )}\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        <h3 className={styles.title}>{title}</h3>\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                aria-label=\"Fechar\"\n                                className={styles.close}\n                                onClick={onClose}\n                            >\n                                <CloseIcon />\n                            </button>\n                        )}\n                    </header>\n                )}\n                <div className={styles.body}>{children}</div>\n                {footer && <footer className={styles.footer}>{footer}</footer>}\n            </aside>\n        </>,\n        portalHost,\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"uOA0CA,SAAgB,EAAO,CACnB,OACA,UACA,YAAY,QACZ,QACA,WACA,SACA,kBAAkB,GAClB,aAAa,GACb,kBAAkB,GAClB,YACA,kBACA,aAAa,IACD,CACZ,GAAM,CAAE,YAAa,EAAA,cAAc,EAC7B,EACF,GAAY,EAAkB,EAAkB,GAEpD,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAM,OACX,IAAM,EAAmB,SAAS,KAAK,MAAM,SAC7C,SAAS,KAAK,MAAM,SAAW,SAC/B,IAAM,EAAa,GAA+B,CAC1C,GAAc,EAAM,MAAQ,UAAU,EAAQ,CACtD,EAEA,OADA,OAAO,iBAAiB,UAAW,CAAS,MAC/B,CACT,SAAS,KAAK,MAAM,SAAW,EAC/B,OAAO,oBAAoB,UAAW,CAAS,CACnD,CACJ,EAAG,CAAC,EAAM,EAAY,CAAO,CAAC,EAE9B,IAAM,EAAa,EAAA,cAAc,EAIjC,MAFI,CAAC,GAAQ,CAAC,EAAmB,MAEjC,EAAO,EAAA,aAAA,EACH,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,QAClB,YAAe,CACP,GAAiB,EAAQ,CACjC,CACH,CAAA,GACD,EAAA,EAAA,KAAA,CAAC,QAAD,CACI,KAAK,SACL,aAAW,OACX,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,EAAA,QAAO,GAAqB,CAAS,EAHrE,SAAA,CAKK,IACI,IAAuB,UAAY,IAAuB,SACvD,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,OACP,IAAuB,OAAS,EAAA,QAAO,SAC3C,EACA,cAAA,EACH,CAAA,GAEP,GAAS,CAAC,KACR,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAA1B,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,MAAQ,SAAA,CAAU,CAAA,EACvC,CAAC,IACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,aAAW,SACX,UAAW,EAAA,QAAO,MAClB,QAAS,EAET,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAY,CAAA,CACR,CAAA,CAER,KAEZ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAO,UAAc,CAAA,EAC3C,IAAU,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAAS,SAAA,CAAe,CAAA,CAC1D,CACT,CAAA,CAAA,CAAA,CAAA,EACF,CACJ,CACJ,CAEA,SAAS,GAAY,CACjB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,uBACF,OAAO,eACP,YAAY,IACZ,cAAc,OACjB,CAAA,CACA,CAAA,CAEb"}
+{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — placement plus mobilePlacement is\n * the whole point — a drawer that comes from the side on desktop and from the bottom\n * on a phone — and the rest is the dialog contract the SDK's Modal also has (open,\n * onClose, title, children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton)\n * plus showHandle for the sheet affordance.\n */\nimport { useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./Drawer.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport type DrawerPlacement = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n    open: boolean;\n    onClose: () => void;\n    placement?: DrawerPlacement;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    hideCloseButton?: boolean;\n    className?: string;\n    /**\n     * Auto-switch to bottom-sheet placement on mobile viewports (< md).\n     * Modern mobile apps default to bottom drawers; on desktop the original\n     * `placement` is preserved.\n     */\n    mobilePlacement?: DrawerPlacement;\n    /** Render a drag handle indicator at the leading edge (bottom-sheet style). */\n    showHandle?: boolean;\n}\n\n/**\n * Sliding side panel. Same building blocks as {@link Modal} but anchored to\n * an edge. Locks body scroll while open.\n */\nexport function Drawer({\n    open,\n    onClose,\n    placement = \"right\",\n    title,\n    children,\n    footer,\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    hideCloseButton = false,\n    className,\n    mobilePlacement,\n    showHandle = false,\n}: DrawerProps) {\n    const { isMobile } = useBreakpoint();\n    const effectivePlacement: DrawerPlacement =\n        isMobile && mobilePlacement ? mobilePlacement : placement;\n\n    useEscapeLayer(open, closeOnEsc ? onClose : null);\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = previousOverflow;\n        };\n    }, [open, closeOnEsc, onClose]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    return createPortal(\n        <>\n            <div\n                className={styles.overlay}\n                onClick={() => {\n                    if (closeOnBackdrop) onClose();\n                }}\n            />\n            <aside\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={cn(styles.panel, styles[effectivePlacement], className)}\n            >\n                {showHandle &&\n                    (effectivePlacement === \"bottom\" || effectivePlacement === \"top\") && (\n                        <div\n                            className={cn(\n                                styles.handle,\n                                effectivePlacement === \"top\" && styles.handleTop,\n                            )}\n                            aria-hidden\n                        />\n                    )}\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        <h3 className={styles.title}>{title}</h3>\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                aria-label=\"Fechar\"\n                                className={styles.close}\n                                onClick={onClose}\n                            >\n                                <CloseIcon />\n                            </button>\n                        )}\n                    </header>\n                )}\n                <div className={styles.body}>{children}</div>\n                {footer && <footer className={styles.footer}>{footer}</footer>}\n            </aside>\n        </>,\n        portalHost,\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"+QA2CA,SAAgB,EAAO,CACnB,OACA,UACA,YAAY,QACZ,QACA,WACA,SACA,kBAAkB,GAClB,aAAa,GACb,kBAAkB,GAClB,YACA,kBACA,aAAa,IACD,CACZ,GAAM,CAAE,YAAa,EAAA,cAAc,EAC7B,EACF,GAAY,EAAkB,EAAkB,EAEpD,EAAA,eAAe,EAAM,EAAa,EAAU,IAAI,GAChD,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAM,OACX,IAAM,EAAmB,SAAS,KAAK,MAAM,SAE7C,MADA,UAAS,KAAK,MAAM,SAAW,aAClB,CACT,SAAS,KAAK,MAAM,SAAW,CACnC,CACJ,EAAG,CAAC,EAAM,EAAY,CAAO,CAAC,EAE9B,IAAM,EAAa,EAAA,cAAc,EAIjC,MAFI,CAAC,GAAQ,CAAC,EAAmB,MAEjC,EAAO,EAAA,aAAA,EACH,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,QAClB,YAAe,CACP,GAAiB,EAAQ,CACjC,CACH,CAAA,GACD,EAAA,EAAA,KAAA,CAAC,QAAD,CACI,KAAK,SACL,aAAW,OACX,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,EAAA,QAAO,GAAqB,CAAS,EAHrE,SAAA,CAKK,IACI,IAAuB,UAAY,IAAuB,SACvD,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,OACP,IAAuB,OAAS,EAAA,QAAO,SAC3C,EACA,cAAA,EACH,CAAA,GAEP,GAAS,CAAC,KACR,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAA1B,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,MAAQ,SAAA,CAAU,CAAA,EACvC,CAAC,IACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,aAAW,SACX,UAAW,EAAA,QAAO,MAClB,QAAS,EAET,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAY,CAAA,CACR,CAAA,CAER,KAEZ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAO,UAAc,CAAA,EAC3C,IAAU,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAAS,SAAA,CAAe,CAAA,CAC1D,CACT,CAAA,CAAA,CAAA,CAAA,EACF,CACJ,CACJ,CAEA,SAAS,GAAY,CACjB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,uBACF,OAAO,eACP,YAAY,IACZ,cAAc,OACjB,CAAA,CACA,CAAA,CAEb"}

package/dist/components/Drawer/Drawer.js

@@ -1,74 +1,71 @@
 import { cn as e } from "../../utils/cn.js";
 import { useBreakpoint as t } from "../../hooks/use-breakpoint.js";
-import { usePortalHost as n } from "../Portal/portal-host.js";
-import r from "./Drawer.module.js";
-import { useEffect as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { createPortal as c } from "react-dom";
+import { useEscapeLayer as n } from "../Portal/escape-layer.js";
+import { usePortalHost as r } from "../Portal/portal-host.js";
+import i from "./Drawer.module.js";
+import { useEffect as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createPortal as l } from "react-dom";
 //#region src/components/Drawer/Drawer.tsx
-function l({ open: l, onClose: d, placement: f = "right", title: p, children: m, footer: h, closeOnBackdrop: g = !0, closeOnEsc: _ = !0, hideCloseButton: v = !1, className: y, mobilePlacement: b, showHandle: x = !1 }) {
-	let { isMobile: S } = t(), C = S && b ? b : f;
-	i(() => {
-		if (!l) return;
+function u({ open: u, onClose: f, placement: p = "right", title: m, children: h, footer: g, closeOnBackdrop: _ = !0, closeOnEsc: v = !0, hideCloseButton: y = !1, className: b, mobilePlacement: x, showHandle: S = !1 }) {
+	let { isMobile: C } = t(), w = C && x ? x : p;
+	n(u, v ? f : null), a(() => {
+		if (!u) return;
 		let e = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-		let t = (e) => {
-			_ && e.key === "Escape" && d();
-		};
-		return window.addEventListener("keydown", t), () => {
-			document.body.style.overflow = e, window.removeEventListener("keydown", t);
+		return document.body.style.overflow = "hidden", () => {
+			document.body.style.overflow = e;
 		};
 	}, [
-		l,
-		_,
-		d
+		u,
+		v,
+		f
 	]);
-	let w = n();
-	return !l || !w ? null : c(/* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
-		className: r.overlay,
+	let T = r();
+	return !u || !T ? null : l(/* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+		className: i.overlay,
 		onClick: () => {
-			g && d();
+			_ && f();
 		}
-	}), /* @__PURE__ */ s("aside", {
+	}), /* @__PURE__ */ c("aside", {
 		role: "dialog",
 		"aria-modal": "true",
-		className: e(r.panel, r[C], y),
+		className: e(i.panel, i[w], b),
 		children: [
-			x && (C === "bottom" || C === "top") && /* @__PURE__ */ o("div", {
-				className: e(r.handle, C === "top" && r.handleTop),
+			S && (w === "bottom" || w === "top") && /* @__PURE__ */ s("div", {
+				className: e(i.handle, w === "top" && i.handleTop),
 				"aria-hidden": !0
 			}),
-			(p || !v) && /* @__PURE__ */ s("header", {
-				className: r.header,
-				children: [/* @__PURE__ */ o("h3", {
-					className: r.title,
-					children: p
-				}), !v && /* @__PURE__ */ o("button", {
+			(m || !y) && /* @__PURE__ */ c("header", {
+				className: i.header,
+				children: [/* @__PURE__ */ s("h3", {
+					className: i.title,
+					children: m
+				}), !y && /* @__PURE__ */ s("button", {
 					type: "button",
 					"aria-label": "Fechar",
-					className: r.close,
-					onClick: d,
-					children: /* @__PURE__ */ o(u, {})
+					className: i.close,
+					onClick: f,
+					children: /* @__PURE__ */ s(d, {})
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
-				className: r.body,
-				children: m
-			}),
-			h && /* @__PURE__ */ o("footer", {
-				className: r.footer,
+			/* @__PURE__ */ s("div", {
+				className: i.body,
 				children: h
+			}),
+			g && /* @__PURE__ */ s("footer", {
+				className: i.footer,
+				children: g
 			})
 		]
-	})] }), w);
+	})] }), T);
 }
-function u() {
-	return /* @__PURE__ */ o("svg", {
+function d() {
+	return /* @__PURE__ */ s("svg", {
 		width: "18",
 		height: "18",
 		viewBox: "0 0 24 24",
 		fill: "none",
-		children: /* @__PURE__ */ o("path", {
+		children: /* @__PURE__ */ s("path", {
 			d: "M6 6l12 12M6 18L18 6",
 			stroke: "currentColor",
 			strokeWidth: "2",
@@ -77,6 +74,6 @@ function u() {
 	});
 }
 //#endregion
-export { l as Drawer };
+export { u as Drawer };
 
 //# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — placement plus mobilePlacement is\n * the whole point — a drawer that comes from the side on desktop and from the bottom\n * on a phone — and the rest is the dialog contract the SDK's Modal also has (open,\n * onClose, title, children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton)\n * plus showHandle for the sheet affordance.\n */\nimport { useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./Drawer.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport type DrawerPlacement = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n    open: boolean;\n    onClose: () => void;\n    placement?: DrawerPlacement;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    hideCloseButton?: boolean;\n    className?: string;\n    /**\n     * Auto-switch to bottom-sheet placement on mobile viewports (< md).\n     * Modern mobile apps default to bottom drawers; on desktop the original\n     * `placement` is preserved.\n     */\n    mobilePlacement?: DrawerPlacement;\n    /** Render a drag handle indicator at the leading edge (bottom-sheet style). */\n    showHandle?: boolean;\n}\n\n/**\n * Sliding side panel. Same building blocks as {@link Modal} but anchored to\n * an edge. Locks body scroll while open.\n */\nexport function Drawer({\n    open,\n    onClose,\n    placement = \"right\",\n    title,\n    children,\n    footer,\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    hideCloseButton = false,\n    className,\n    mobilePlacement,\n    showHandle = false,\n}: DrawerProps) {\n    const { isMobile } = useBreakpoint();\n    const effectivePlacement: DrawerPlacement =\n        isMobile && mobilePlacement ? mobilePlacement : placement;\n\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n        return () => {\n            document.body.style.overflow = previousOverflow;\n            window.removeEventListener(\"keydown\", handleKey);\n        };\n    }, [open, closeOnEsc, onClose]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    return createPortal(\n        <>\n            <div\n                className={styles.overlay}\n                onClick={() => {\n                    if (closeOnBackdrop) onClose();\n                }}\n            />\n            <aside\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={cn(styles.panel, styles[effectivePlacement], className)}\n            >\n                {showHandle &&\n                    (effectivePlacement === \"bottom\" || effectivePlacement === \"top\") && (\n                        <div\n                            className={cn(\n                                styles.handle,\n                                effectivePlacement === \"top\" && styles.handleTop,\n                            )}\n                            aria-hidden\n                        />\n                    )}\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        <h3 className={styles.title}>{title}</h3>\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                aria-label=\"Fechar\"\n                                className={styles.close}\n                                onClick={onClose}\n                            >\n                                <CloseIcon />\n                            </button>\n                        )}\n                    </header>\n                )}\n                <div className={styles.body}>{children}</div>\n                {footer && <footer className={styles.footer}>{footer}</footer>}\n            </aside>\n        </>,\n        portalHost,\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;;;;;;;AA0CA,SAAgB,EAAO,EACnB,SACA,YACA,eAAY,SACZ,UACA,aACA,WACA,qBAAkB,IAClB,gBAAa,IACb,qBAAkB,IAClB,cACA,oBACA,gBAAa,MACD;CACZ,IAAM,EAAE,gBAAa,EAAc,GAC7B,IACF,KAAY,IAAkB,IAAkB;CAEpD,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,IAAmB,SAAS,KAAK,MAAM;EAC7C,SAAS,KAAK,MAAM,WAAW;EAC/B,IAAM,KAAa,MAA+B;GAC9C,AAAI,KAAc,EAAM,QAAQ,YAAU,EAAQ;EACtD;EAEA,OADA,OAAO,iBAAiB,WAAW,CAAS,SAC/B;GAET,AADA,SAAS,KAAK,MAAM,WAAW,GAC/B,OAAO,oBAAoB,WAAW,CAAS;EACnD;CACJ,GAAG;EAAC;EAAM;EAAY;CAAO,CAAC;CAE9B,IAAM,IAAa,EAAc;CAIjC,OAFI,CAAC,KAAQ,CAAC,IAAmB,OAE1B,EACH,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,OAAD;EACI,WAAW,EAAO;EAClB,eAAe;GACX,AAAI,KAAiB,EAAQ;EACjC;CACH,CAAA,GACD,kBAAC,SAAD;EACI,MAAK;EACL,cAAW;EACX,WAAW,EAAG,EAAO,OAAO,EAAO,IAAqB,CAAS;EAHrE,UAAA;GAKK,MACI,MAAuB,YAAY,MAAuB,UACvD,kBAAC,OAAD;IACI,WAAW,EACP,EAAO,QACP,MAAuB,SAAS,EAAO,SAC3C;IACA,eAAA;GACH,CAAA;IAEP,KAAS,CAAC,MACR,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAA1B,UAAA,CACI,kBAAC,MAAD;KAAI,WAAW,EAAO;KAAQ,UAAA;IAAU,CAAA,GACvC,CAAC,KACE,kBAAC,UAAD;KACI,MAAK;KACL,cAAW;KACX,WAAW,EAAO;KAClB,SAAS;KAET,UAAA,kBAAC,GAAD,CAAY,CAAA;IACR,CAAA,CAER;;GAEZ,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAO;GAAc,CAAA;GAC3C,KAAU,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAAS,UAAA;GAAe,CAAA;EAC1D;CACT,CAAA,CAAA,EAAA,CAAA,GACF,CACJ;AACJ;AAEA,SAAS,IAAY;CACjB,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACjB,CAAA;CACA,CAAA;AAEb"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — placement plus mobilePlacement is\n * the whole point — a drawer that comes from the side on desktop and from the bottom\n * on a phone — and the rest is the dialog contract the SDK's Modal also has (open,\n * onClose, title, children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton)\n * plus showHandle for the sheet affordance.\n */\nimport { useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./Drawer.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport type DrawerPlacement = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n    open: boolean;\n    onClose: () => void;\n    placement?: DrawerPlacement;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    hideCloseButton?: boolean;\n    className?: string;\n    /**\n     * Auto-switch to bottom-sheet placement on mobile viewports (< md).\n     * Modern mobile apps default to bottom drawers; on desktop the original\n     * `placement` is preserved.\n     */\n    mobilePlacement?: DrawerPlacement;\n    /** Render a drag handle indicator at the leading edge (bottom-sheet style). */\n    showHandle?: boolean;\n}\n\n/**\n * Sliding side panel. Same building blocks as {@link Modal} but anchored to\n * an edge. Locks body scroll while open.\n */\nexport function Drawer({\n    open,\n    onClose,\n    placement = \"right\",\n    title,\n    children,\n    footer,\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    hideCloseButton = false,\n    className,\n    mobilePlacement,\n    showHandle = false,\n}: DrawerProps) {\n    const { isMobile } = useBreakpoint();\n    const effectivePlacement: DrawerPlacement =\n        isMobile && mobilePlacement ? mobilePlacement : placement;\n\n    useEscapeLayer(open, closeOnEsc ? onClose : null);\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = previousOverflow;\n        };\n    }, [open, closeOnEsc, onClose]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    return createPortal(\n        <>\n            <div\n                className={styles.overlay}\n                onClick={() => {\n                    if (closeOnBackdrop) onClose();\n                }}\n            />\n            <aside\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={cn(styles.panel, styles[effectivePlacement], className)}\n            >\n                {showHandle &&\n                    (effectivePlacement === \"bottom\" || effectivePlacement === \"top\") && (\n                        <div\n                            className={cn(\n                                styles.handle,\n                                effectivePlacement === \"top\" && styles.handleTop,\n                            )}\n                            aria-hidden\n                        />\n                    )}\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        <h3 className={styles.title}>{title}</h3>\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                aria-label=\"Fechar\"\n                                className={styles.close}\n                                onClick={onClose}\n                            >\n                                <CloseIcon />\n                            </button>\n                        )}\n                    </header>\n                )}\n                <div className={styles.body}>{children}</div>\n                {footer && <footer className={styles.footer}>{footer}</footer>}\n            </aside>\n        </>,\n        portalHost,\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;;;;;;;;AA2CA,SAAgB,EAAO,EACnB,SACA,YACA,eAAY,SACZ,UACA,aACA,WACA,qBAAkB,IAClB,gBAAa,IACb,qBAAkB,IAClB,cACA,oBACA,gBAAa,MACD;CACZ,IAAM,EAAE,gBAAa,EAAc,GAC7B,IACF,KAAY,IAAkB,IAAkB;CAGpD,AADA,EAAe,GAAM,IAAa,IAAU,IAAI,GAChD,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,IAAmB,SAAS,KAAK,MAAM;EAE7C,OADA,SAAS,KAAK,MAAM,WAAW,gBAClB;GACT,SAAS,KAAK,MAAM,WAAW;EACnC;CACJ,GAAG;EAAC;EAAM;EAAY;CAAO,CAAC;CAE9B,IAAM,IAAa,EAAc;CAIjC,OAFI,CAAC,KAAQ,CAAC,IAAmB,OAE1B,EACH,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,OAAD;EACI,WAAW,EAAO;EAClB,eAAe;GACX,AAAI,KAAiB,EAAQ;EACjC;CACH,CAAA,GACD,kBAAC,SAAD;EACI,MAAK;EACL,cAAW;EACX,WAAW,EAAG,EAAO,OAAO,EAAO,IAAqB,CAAS;EAHrE,UAAA;GAKK,MACI,MAAuB,YAAY,MAAuB,UACvD,kBAAC,OAAD;IACI,WAAW,EACP,EAAO,QACP,MAAuB,SAAS,EAAO,SAC3C;IACA,eAAA;GACH,CAAA;IAEP,KAAS,CAAC,MACR,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAA1B,UAAA,CACI,kBAAC,MAAD;KAAI,WAAW,EAAO;KAAQ,UAAA;IAAU,CAAA,GACvC,CAAC,KACE,kBAAC,UAAD;KACI,MAAK;KACL,cAAW;KACX,WAAW,EAAO;KAClB,SAAS;KAET,UAAA,kBAAC,GAAD,CAAY,CAAA;IACR,CAAA,CAER;;GAEZ,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAO;GAAc,CAAA;GAC3C,KAAU,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAAS,UAAA;GAAe,CAAA;EAC1D;CACT,CAAA,CAAA,EAAA,CAAA,GACF,CACJ;AACJ;AAEA,SAAS,IAAY;CACjB,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACjB,CAAA;CACA,CAAA;AAEb"}