mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-08 06:28:37 +00:00
34223a842d
* refactor(base-drawer): rewrite base drawer wrapper for @base-ui/react/drawer Replace vaul with @base-ui/react/drawer as the primitive behind the base drawer wrapper. Keep the public API aligned with the radix drawer shape while rewriting DrawerContent to compose Backdrop, Viewport, Popup, and Content internally. Keep the registry dependency change in the same commit so the wrapper rewrite lands as one source-level migration step. * refactor(drawer): move shared drawer direction rules from stylesheets to primitives Shared drawer styles previously owned direction-specific layout in CSS. With base and radix now exposing different direction attributes, keeping that logic in shared tokens would duplicate primitive-specific branching in the stylesheets. Move direction-specific layout into the base/radix drawer wrappers and leave shared CSS responsible only for visual surface styling. Also move handle visibility and header alignment into TSX, and unify the shared drawer token names to cn-drawer-*. * fix(base-drawer): migrate examples, blocks, and app consumers to render and swipeDirection Update in-repo base drawer consumers to the new wrapper API. Replace asChild usage with render, switch direction to swipeDirection, and align examples, blocks, app consumers, and docs with the new base drawer usage pattern. * chore: update registries * fix(drawer): update base marker example usage * fix(drawer): clean up base style selectors * docs: add migration docs * wip * fix: nested * feat: drawer * fix * fix * fix * fix: pointer events * fix: clean up radix drawers * fix: position --------- Co-authored-by: shadcn <m@shadcn.com>
112 lines
4.5 KiB
TypeScript
112 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { useIsMobile } from "@/hooks/use-mobile"
|
|
import { Button } from "@/styles/base-rhea/ui/button"
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/styles/base-rhea/ui/drawer"
|
|
|
|
export function DrawerNested() {
|
|
const isMobile = useIsMobile()
|
|
|
|
const swipeDirection = isMobile ? "down" : "right"
|
|
|
|
return (
|
|
<Drawer showSwipeHandle={isMobile} swipeDirection={swipeDirection}>
|
|
<DrawerTrigger render={<Button variant="secondary" />}>
|
|
Open Drawer
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>Drawer</DrawerTitle>
|
|
<DrawerDescription>
|
|
Open another drawer from the same direction.
|
|
</DrawerDescription>
|
|
</DrawerHeader>
|
|
<div className="flex-1 p-4">
|
|
<div className="bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:w-full" />
|
|
</div>
|
|
<DrawerFooter>
|
|
<Drawer showSwipeHandle={isMobile} swipeDirection={swipeDirection}>
|
|
<DrawerTrigger render={<Button variant="outline" />}>
|
|
Open Nested Drawer
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>Nested Drawer</DrawerTitle>
|
|
<DrawerDescription>
|
|
The parent drawer stays mounted behind this one.
|
|
</DrawerDescription>
|
|
</DrawerHeader>
|
|
<div className="flex-1 p-4">
|
|
<div className="bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:w-full" />
|
|
</div>
|
|
<DrawerFooter>
|
|
<Drawer
|
|
showSwipeHandle={isMobile}
|
|
swipeDirection={swipeDirection}
|
|
>
|
|
<DrawerTrigger render={<Button variant="outline" />}>
|
|
Open Third Drawer
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>Third Drawer</DrawerTitle>
|
|
<DrawerDescription>
|
|
Two drawers are stacked behind this one.
|
|
</DrawerDescription>
|
|
</DrawerHeader>
|
|
<div className="flex-1 p-4">
|
|
<div className="bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:w-full" />
|
|
</div>
|
|
<DrawerFooter>
|
|
<Drawer
|
|
showSwipeHandle={isMobile}
|
|
swipeDirection={swipeDirection}
|
|
>
|
|
<DrawerTrigger render={<Button variant="outline" />}>
|
|
Open Fourth Drawer
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>Fourth Drawer</DrawerTitle>
|
|
<DrawerDescription>
|
|
This is the frontmost drawer in the stack.
|
|
</DrawerDescription>
|
|
</DrawerHeader>
|
|
<div className="flex-1 p-4">
|
|
<div className="bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:w-full" />
|
|
</div>
|
|
<DrawerFooter>
|
|
<DrawerClose render={<Button variant="outline" />}>
|
|
Close
|
|
</DrawerClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
<DrawerClose render={<Button variant="outline" />}>
|
|
Close
|
|
</DrawerClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
<DrawerClose render={<Button variant="outline" />}>
|
|
Close
|
|
</DrawerClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
<DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
)
|
|
}
|