Update internal drawer component

[carlosabadia]

No description provided.

[codspeed-hq]

Merging this PR will not alter performance

✅ 24 untouched benchmarks

---

_{Comparing carlos/update-drawer-component (0ddf7ca) with main (9ed3692)}

[greptile-apps]

Greptile Summary

This PR migrates the internal drawer component from the vaul-base library to @base-ui/react, replacing the old DrawerOverlay/DrawerContent/DrawerHandle primitives with a new set of Base UI composables (DrawerBackdrop, DrawerViewport, DrawerPopup, DrawerContent, DrawerSwipeArea, DrawerProvider, DrawerIndent). The HighLevelDrawer is also redesigned with a built-in header layout (title + close button) and updated Tailwind classes for entry/exit animations.

• API changes: direction prop (with \"top\"/\"bottom\") is replaced by swipe_direction (\"up\"/\"down\"/\"left\"/\"right\"); active_snap_point: Var[bool] is corrected to snap_point: Var[str | float | None]; dismissible is replaced by disable_pointer_dismissal; on_open_change now passes a dict as a second argument via passthrough_event_spec(bool, dict).
• Namespace changes: Drawer.overlay and Drawer.handle are removed; Drawer.backdrop, Drawer.viewport, Drawer.popup, Drawer.swipe_area, Drawer.provider, Drawer.indent_background, and Drawer.indent are added.
• HighLevelDrawer behaviour: the close button is now always rendered in the drawer header regardless of whether a title is provided; the visual handle bar is a plain Div inside the scrollable DrawerPopup.

Confidence Score: 4/5

Safe to merge with no functional regressions in the happy path; the three concerns are UX polish and backward-compatibility items that are low-risk for an internal package undergoing a deliberate library migration.

The drawer migration is straightforward and the new component tree maps cleanly onto Base UI's API. The main open questions are whether the handle bar scrolling with content is acceptable in practice, whether any internal callers still rely on Drawer.handle, and how Reflex's event dispatcher handles the new two-argument on_open_change spec with handlers written against the old one-argument form.

Only drawer.py changed; callers that used Drawer.handle, Drawer.overlay, or on_open_change handlers with a single bool argument deserve a quick search before merging.

Important Files Changed

Filename	Overview
packages/reflex-components-internal/src/reflex_components_internal/components/base/drawer.py	Full migration from vaul-based drawer to @base-ui/react Drawer; replaces Overlay/Content/Handle with Backdrop/Viewport/Popup/Content/SwipeArea; HighLevelDrawer gains a structured header with a built-in close button; minor concerns around handle scroll behaviour, namespace breakage for Drawer.handle, and the broadened on_open_change event spec.

Sequence Diagram

sequenceDiagram
    participant User
    participant DrawerTrigger
    participant DrawerRoot
    participant DrawerPortal
    participant DrawerBackdrop
    participant DrawerViewport
    participant DrawerPopup
    participant DrawerContent

    User->>DrawerTrigger: click
    DrawerTrigger->>DrawerRoot: on_open_change(true, dict)
    DrawerRoot->>DrawerPortal: mount portal
    DrawerPortal->>DrawerBackdrop: render backdrop (opacity animation)
    DrawerPortal->>DrawerViewport: render viewport
    DrawerViewport->>DrawerPopup: slide up (translateY animation)
    DrawerPopup->>DrawerContent: render handle Div + content
    User->>DrawerPopup: swipe down
    DrawerPopup-->>DrawerRoot: on_open_change(false, dict)
    DrawerRoot->>DrawerPortal: unmount portal

Loading

Comments Outside Diff (1)

1. packages/reflex-components-internal/src/reflex_components_internal/components/base/drawer.py, line 439-457 (link)

   Drawer.handle removed from public namespace without replacement

   The old Drawer.handle static method (backed by the removed DrawerHandle class) no longer exists in the Drawer namespace. Any callers using Drawer.handle(...) at the low-level API will receive an AttributeError at runtime. The new Drawer.swipe_area serves a related but different purpose (gesture detection region, not a visual handle indicator). If the visual handle needs to be available as a standalone primitive, a thin wrapper around the styled Div should be exposed in the namespace.

_{Reviews (1): Last reviewed commit: "Update drawer component" | Re-trigger Greptile}

[Alek99]

I dont think the chevron down is clear that its should open a drawer

[carlosabadia]

I dont think the chevron down is clear that its should open a drawer

this doesnt change the drawer in the docs, its just to update the reflex ui drawer base component to use the base ui one

[Alek99]

I understand this is a general comment about how the cheron here is not clear it open a drawer

[FarhanAliRaza]

There is not way to turn off the "x" button. If that is intentional, that is fine. Usually, drawers don't have it.

[carlosabadia]

There is not way to turn off the "x" button. If that is intentional, that is fine. Usually, drawers don't have it.

yeah, don't mind the high level component