diff --git a/packages/docs/examples/drawer-controlled.tsx b/packages/docs/examples/drawer-controlled.tsx
new file mode 100644
index 000000000..1033c20a7
--- /dev/null
+++ b/packages/docs/examples/drawer-controlled.tsx
@@ -0,0 +1,64 @@
+import {
+ DrawerProvider,
+ Button,
+ DrawerPopover,
+ DrawerHeader,
+ DrawerHeading,
+ DrawerDismiss,
+ DrawerContent,
+ DrawerFooter,
+} from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+import { useState } from 'react'
+
+export default function Example() {
+ const [open, setOpen] = useState(false)
+ const [loading, setLoading] = useState(false)
+
+ async function someServerAction() {
+ if (open) {
+ setOpen(false)
+
+ return
+ }
+
+ setLoading(true)
+
+ // This promise simulates a call to an API.
+ // Using the controlled apporach of the Drawer
+ // is particullary useful in programmatic dispatch scenarios.
+ await new Promise((resolve) => {
+ setTimeout(resolve, 3000)
+ })
+
+ setLoading(false)
+ setOpen(true)
+ }
+
+ return (
+ <>
+
+
+
+
+ Controlled Drawer
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/docs/examples/drawer-long-content.tsx b/packages/docs/examples/drawer-long-content.tsx
new file mode 100644
index 000000000..33965b119
--- /dev/null
+++ b/packages/docs/examples/drawer-long-content.tsx
@@ -0,0 +1,39 @@
+import {
+ DrawerProvider,
+ DrawerTrigger,
+ Button,
+ DrawerPopover,
+ DrawerHeader,
+ DrawerHeading,
+ DrawerDismiss,
+ DrawerContent,
+ DrawerFooter,
+} from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+ return (
+
+
+
+
+
+
+ Drawer Heading
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/docs/examples/drawer-small.tsx b/packages/docs/examples/drawer-small.tsx
new file mode 100644
index 000000000..1fb2903f6
--- /dev/null
+++ b/packages/docs/examples/drawer-small.tsx
@@ -0,0 +1,39 @@
+import {
+ DrawerProvider,
+ DrawerTrigger,
+ Button,
+ DrawerPopover,
+ DrawerHeader,
+ DrawerHeading,
+ DrawerDismiss,
+ DrawerContent,
+ DrawerFooter,
+} from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+ return (
+
+
+
+
+
+
+ Small Drawer
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/docs/examples/drawer.tsx b/packages/docs/examples/drawer.tsx
index 413fd5d1b..1482ce654 100644
--- a/packages/docs/examples/drawer.tsx
+++ b/packages/docs/examples/drawer.tsx
@@ -15,15 +15,15 @@ export default function Example() {
return (
-
+
-
+ Drawer Heading
-
+
*
*/
-export function DrawerHeader(props: DrawerHeaderProps) {
- return (
-
-
-
- )
-}
+export const DrawerHeader = forwardRef(
+ function DrawerHeader(props, ref) {
+ return (
+
+
+
+ )
+ }
+)
-export type DrawerHeaderProps = ComponentPropsWithoutRef<'header'>
+export type DrawerHeaderOptions = Omit
+
+export type DrawerHeaderProps = DrawerHeaderOptions &
+ ComponentPropsWithoutRef<'header'>
diff --git a/packages/shoreline/src/components/drawer/drawer-heading.tsx b/packages/shoreline/src/components/drawer/drawer-heading.tsx
index 7d018ae6c..517b2da11 100644
--- a/packages/shoreline/src/components/drawer/drawer-heading.tsx
+++ b/packages/shoreline/src/components/drawer/drawer-heading.tsx
@@ -1,7 +1,7 @@
-import { forwardRef } from 'react'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
import { Drawer as Vaul } from 'vaul'
-import type { HeadingProps } from '../heading'
import { Heading } from '../heading'
+import type { HeadingOptions } from '../heading'
/**
* Drawer's heading
@@ -27,4 +27,7 @@ export const DrawerHeading = forwardRef(
}
)
-export type DrawerHeadingProps = Omit
+export type DrawerHeadingOptions = Omit
+
+export type DrawerHeadingProps = DrawerHeadingOptions &
+ ComponentPropsWithoutRef<'h1'>
diff --git a/packages/shoreline/src/components/drawer/drawer-popover.tsx b/packages/shoreline/src/components/drawer/drawer-popover.tsx
index 7cba6813f..f586cf355 100644
--- a/packages/shoreline/src/components/drawer/drawer-popover.tsx
+++ b/packages/shoreline/src/components/drawer/drawer-popover.tsx
@@ -47,6 +47,9 @@ export const DrawerPopover = forwardRef(
)
export interface DrawerPopoverOptions {
+ /**
+ * Popover children
+ */
children: ReactNode
/**
* Popover width
diff --git a/packages/shoreline/src/components/drawer/drawer-provider.tsx b/packages/shoreline/src/components/drawer/drawer-provider.tsx
index 9a460af9f..4767e890c 100644
--- a/packages/shoreline/src/components/drawer/drawer-provider.tsx
+++ b/packages/shoreline/src/components/drawer/drawer-provider.tsx
@@ -1,11 +1,11 @@
-import type { ComponentProps, ComponentPropsWithoutRef } from 'react'
+import type { ReactNode } from 'react'
import { Drawer as Vaul } from 'vaul'
/**
* Drawer's state provider
*/
export function DrawerProvider(props: DrawerProviderProps) {
- const { children, open, onClose, onOpenChange, ...rest } = props
+ const { children, open, onClose, onOpenChange, dismissible } = props
return (
-
- {children}
-
+ {children}
)
}
-export type DrawerPropviderOptions = Pick<
- ComponentProps,
- 'open' | 'onClose' | 'onOpenChange'
->
+export interface DrawerProviderOptions {
+ /**
+ * Provider Children
+ */
+ children: ReactNode
+ /**
+ * Wether the Drawer is open
+ */
+ open?: boolean
+ /**
+ * Dispatched on close the Drawer
+ */
+ onClose?: () => void
+ /**
+ * Distached on change the value of open
+ */
+ onOpenChange?: (open: boolean) => void
+ /**
+ * When false dragging, clicking outside, pressing esc, etc. will not close the drawer.
+ * Use this in comination with the open prop, otherwise you won't be able to open/close the drawer.
+ */
+ dismissible?: boolean
+}
-export type DrawerProviderProps = ComponentPropsWithoutRef<'div'> &
- DrawerPropviderOptions
+export type DrawerProviderProps = DrawerProviderOptions
diff --git a/packages/shoreline/src/components/drawer/drawer-trigger.tsx b/packages/shoreline/src/components/drawer/drawer-trigger.tsx
index e39af6081..08a90bc87 100644
--- a/packages/shoreline/src/components/drawer/drawer-trigger.tsx
+++ b/packages/shoreline/src/components/drawer/drawer-trigger.tsx
@@ -1,5 +1,6 @@
import type { ComponentProps } from 'react'
import { Drawer as Vaul } from 'vaul'
+import type { ButtonOptions } from '../button'
/**
* Drawer's Trigger
@@ -12,6 +13,7 @@ import { Drawer as Vaul } from 'vaul'
*/
export const DrawerTrigger: typeof Vaul.Trigger = Vaul.Trigger
-export type DrawerTriggerOptions = ComponentProps
+export type DrawerTriggerOptions = Pick
-export type DrawerTriggerProps = DrawerTriggerOptions
+export type DrawerTriggerProps = DrawerTriggerOptions &
+ ComponentProps