Skip to content

Commit 77c1db5

Browse files
atomiksatomiks
committed
[drawer] Create new Drawer component
1 parent ae0b820 commit 77c1db5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+4197
-386
lines changed

‎docs/reference/generated/drawer-backdrop.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "DrawerBackdrop",
3+
"description": "An overlay displayed beneath the popup.\nRenders a `<div>` element.",
4+
"props": {
5+
"forceRender": {
6+
"type": "boolean",
7+
"default": "false",
8+
"description": "Whether the backdrop is forced to render even when nested.",
9+
"detailedType": "boolean | undefined"
10+
},
11+
"className": {
12+
"type": "string | ((state: AlertDialog.Backdrop.State) => string | undefined)",
13+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
14+
"detailedType": "| string\n| ((state: AlertDialog.Backdrop.State) => string | undefined)"
15+
},
16+
"style": {
17+
"type": "CSSProperties | ((state: AlertDialog.Backdrop.State) => CSSProperties | undefined)",
18+
"detailedType": "| React.CSSProperties\n| ((\n state: AlertDialog.Backdrop.State,\n ) => CSSProperties | undefined)\n| undefined"
19+
},
20+
"render": {
21+
"type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Backdrop.State) => ReactElement)",
22+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
23+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: AlertDialog.Backdrop.State,\n ) => ReactElement)"
24+
}
25+
},
26+
"dataAttributes": {},
27+
"cssVariables": {}
28+
}

‎docs/reference/generated/drawer-close.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "DrawerClose",
3+
"description": "A button that closes the drawer.\nRenders a `<button>` element.",
4+
"props": {
5+
"nativeButton": {
6+
"type": "boolean",
7+
"default": "true",
8+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (e.g. `<div>`).",
9+
"detailedType": "boolean | undefined"
10+
},
11+
"className": {
12+
"type": "string | ((state: AlertDialog.Close.State) => string | undefined)",
13+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
14+
"detailedType": "| string\n| ((state: AlertDialog.Close.State) => string | undefined)"
15+
},
16+
"style": {
17+
"type": "CSSProperties | ((state: AlertDialog.Close.State) => CSSProperties | undefined)",
18+
"detailedType": "| React.CSSProperties\n| ((state: AlertDialog.Close.State) => CSSProperties | undefined)\n| undefined"
19+
},
20+
"render": {
21+
"type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Close.State) => ReactElement)",
22+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
23+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: AlertDialog.Close.State,\n ) => ReactElement)"
24+
}
25+
},
26+
"dataAttributes": {},
27+
"cssVariables": {}
28+
}

‎docs/reference/generated/drawer-description.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "DrawerDescription",
3+
"description": "A paragraph with additional information about the drawer.\nRenders a `<p>` element.",
4+
"props": {
5+
"className": {
6+
"type": "string | ((state: AlertDialog.Description.State) => string | undefined)",
7+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
8+
"detailedType": "| string\n| ((state: AlertDialog.Description.State) => string | undefined)"
9+
},
10+
"style": {
11+
"type": "CSSProperties | ((state: AlertDialog.Description.State) => CSSProperties | undefined)",
12+
"detailedType": "| React.CSSProperties\n| ((\n state: AlertDialog.Description.State,\n ) => CSSProperties | undefined)\n| undefined"
13+
},
14+
"render": {
15+
"type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Description.State) => ReactElement)",
16+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
17+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: AlertDialog.Description.State,\n ) => ReactElement)"
18+
}
19+
},
20+
"dataAttributes": {},
21+
"cssVariables": {}
22+
}

‎docs/reference/generated/drawer-popup.json‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"name": "DrawerPopup",
3+
"description": "A container for the drawer contents.\nRenders a `<div>` element.",
4+
"props": {
5+
"initialFocus": {
6+
"type": "boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | void | HTMLElement | null)",
7+
"description": "Determines the element to focus when the drawer is opened.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.",
8+
"detailedType": "| boolean\n| React.RefObject<HTMLElement | null>\n| ((\n openType: InteractionType,\n ) => boolean | void | HTMLElement | null)\n| undefined"
9+
},
10+
"finalFocus": {
11+
"type": "boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)",
12+
"description": "Determines the element to focus when the drawer is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.",
13+
"detailedType": "| boolean\n| React.RefObject<HTMLElement | null>\n| ((\n closeType: InteractionType,\n ) => boolean | void | HTMLElement | null)\n| undefined"
14+
},
15+
"className": {
16+
"type": "string | ((state: Drawer.Popup.State) => string | undefined)",
17+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
18+
"detailedType": "| string\n| ((state: Drawer.Popup.State) => string | undefined)"
19+
},
20+
"style": {
21+
"type": "CSSProperties | ((state: Drawer.Popup.State) => CSSProperties | undefined)",
22+
"detailedType": "| React.CSSProperties\n| ((state: Drawer.Popup.State) => CSSProperties | undefined)\n| undefined"
23+
},
24+
"render": {
25+
"type": "ReactElement | ((props: HTMLProps, state: Drawer.Popup.State) => ReactElement)",
26+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
27+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Drawer.Popup.State,\n ) => ReactElement)"
28+
}
29+
},
30+
"dataAttributes": {
31+
"data-nested-drawer-open": {},
32+
"data-swipe-direction": {},
33+
"data-swiping": {}
34+
},
35+
"cssVariables": {
36+
"--drawer-frontmost-height": {
37+
"description": "The height of the frontmost open drawer in the current nested drawer stack.",
38+
"type": "CSS"
39+
},
40+
"--drawer-height": {
41+
"description": "The height of the drawer popup.",
42+
"type": "CSS"
43+
},
44+
"--drawer-nested-dialogs": {
45+
"description": "The number of nested drawers that are currently open.",
46+
"type": "number"
47+
},
48+
"--drawer-swipe-movement-x": {
49+
"description": "The swipe movement on the X axis.",
50+
"type": "CSS"
51+
},
52+
"--drawer-swipe-movement-y": {
53+
"description": "The swipe movement on the Y axis.",
54+
"type": "CSS"
55+
}
56+
}
57+
}

‎docs/reference/generated/drawer-portal.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "DrawerPortal",
3+
"description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.\nRenders a `<div>` element.",
4+
"props": {
5+
"container": {
6+
"type": "HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null",
7+
"description": "A parent element to render the portal element into.",
8+
"detailedType": "| HTMLElement\n| ShadowRoot\n| React.RefObject<HTMLElement | ShadowRoot | null>\n| null\n| undefined"
9+
},
10+
"className": {
11+
"type": "string | ((state: Dialog.Portal.State) => string | undefined)",
12+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
13+
"detailedType": "| string\n| ((state: Dialog.Portal.State) => string | undefined)"
14+
},
15+
"style": {
16+
"type": "CSSProperties | ((state: Dialog.Portal.State) => CSSProperties | undefined)",
17+
"detailedType": "| React.CSSProperties\n| ((\n state: Dialog.Portal.State,\n ) => CSSProperties | undefined)\n| undefined"
18+
},
19+
"keepMounted": {
20+
"type": "boolean",
21+
"default": "false",
22+
"description": "Whether to keep the portal mounted in the DOM while the popup is hidden.",
23+
"detailedType": "boolean | undefined"
24+
},
25+
"render": {
26+
"type": "ReactElement | ((props: HTMLProps, state: Dialog.Portal.State) => ReactElement)",
27+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
28+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Dialog.Portal.State,\n ) => ReactElement)"
29+
}
30+
},
31+
"dataAttributes": {},
32+
"cssVariables": {}
33+
}

‎docs/reference/generated/drawer-root.json‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"name": "DrawerRoot",
3+
"description": "Groups all parts of the drawer.\nDoesn't render its own HTML element.",
4+
"props": {
5+
"defaultOpen": {
6+
"type": "boolean",
7+
"default": "false",
8+
"description": "Whether the drawer is initially open.\n\nTo render a controlled drawer, use the `open` prop instead.",
9+
"detailedType": "boolean | undefined"
10+
},
11+
"open": {
12+
"type": "boolean",
13+
"description": "Whether the drawer is currently open.",
14+
"detailedType": "boolean | undefined"
15+
},
16+
"onOpenChange": {
17+
"type": "((open: boolean, eventDetails: Drawer.Root.ChangeEventDetails) => void)",
18+
"description": "Event handler called when the drawer is opened or closed.",
19+
"detailedType": "| ((\n open: boolean,\n eventDetails: Drawer.Root.ChangeEventDetails,\n ) => void)\n| undefined"
20+
},
21+
"actionsRef": {
22+
"type": "RefObject<Drawer.Root.Actions>",
23+
"description": "A ref to imperative actions.\n- `unmount`: When specified, the drawer will not be unmounted when closed.\nInstead, the `unmount` function must be called to unmount the drawer manually.\nUseful when the drawer's animation is controlled by an external library.\n- `close`: Closes the drawer imperatively when called.",
24+
"detailedType": "React.RefObject<Drawer.Root.Actions> | undefined"
25+
},
26+
"disablePointerDismissal": {
27+
"type": "boolean",
28+
"default": "false",
29+
"description": "Determines whether the drawer should close on outside clicks.",
30+
"detailedType": "boolean | undefined"
31+
},
32+
"modal": {
33+
"type": "boolean | 'trap-focus'",
34+
"default": "true",
35+
"description": "Determines if the drawer enters a modal state when open.\n- `true`: user interaction is limited to just the drawer: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled.",
36+
"detailedType": "boolean | 'trap-focus' | undefined"
37+
},
38+
"onOpenChangeComplete": {
39+
"type": "((open: boolean) => void)",
40+
"description": "Event handler called after any animations complete when the drawer is opened or closed.",
41+
"detailedType": "((open: boolean) => void) | undefined"
42+
},
43+
"swipeDirection": {
44+
"type": "DrawerSwipeDirection",
45+
"default": "'right'",
46+
"description": "The swipe direction used to dismiss the drawer.",
47+
"detailedType": "'left' | 'right' | 'up' | 'down' | undefined"
48+
},
49+
"children": {
50+
"type": "ReactNode",
51+
"description": "The content of the drawer.",
52+
"detailedType": "React.ReactNode"
53+
}
54+
},
55+
"dataAttributes": {},
56+
"cssVariables": {}
57+
}

‎docs/reference/generated/drawer-title.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "DrawerTitle",
3+
"description": "A heading that labels the drawer.\nRenders an `<h2>` element.",
4+
"props": {
5+
"className": {
6+
"type": "string | ((state: AlertDialog.Title.State) => string | undefined)",
7+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
8+
"detailedType": "| string\n| ((state: AlertDialog.Title.State) => string | undefined)"
9+
},
10+
"style": {
11+
"type": "CSSProperties | ((state: AlertDialog.Title.State) => CSSProperties | undefined)",
12+
"detailedType": "| React.CSSProperties\n| ((state: AlertDialog.Title.State) => CSSProperties | undefined)\n| undefined"
13+
},
14+
"render": {
15+
"type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Title.State) => ReactElement)",
16+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
17+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: AlertDialog.Title.State,\n ) => ReactElement)"
18+
}
19+
},
20+
"dataAttributes": {},
21+
"cssVariables": {}
22+
}

‎docs/reference/generated/drawer-trigger.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "DrawerTrigger",
3+
"description": "A button that opens the drawer.\nRenders a `<button>` element.",
4+
"props": {
5+
"nativeButton": {
6+
"type": "boolean",
7+
"default": "true",
8+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (e.g. `<div>`).",
9+
"detailedType": "boolean | undefined"
10+
},
11+
"id": {
12+
"type": "string",
13+
"description": "ID of the trigger. In addition to being forwarded to the rendered element,\nit is also used to specify the active trigger for the dialogs in controlled mode (with the Dialog.Root `triggerId` prop).",
14+
"detailedType": "string | undefined"
15+
},
16+
"className": {
17+
"type": "string | ((state: AlertDialog.Trigger.State) => string | undefined)",
18+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
19+
"detailedType": "| string\n| ((state: AlertDialog.Trigger.State) => string | undefined)"
20+
},
21+
"style": {
22+
"type": "CSSProperties | ((state: AlertDialog.Trigger.State) => CSSProperties | undefined)",
23+
"detailedType": "| React.CSSProperties\n| ((\n state: AlertDialog.Trigger.State,\n ) => CSSProperties | undefined)\n| undefined"
24+
},
25+
"render": {
26+
"type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Trigger.State) => ReactElement)",
27+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
28+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: AlertDialog.Trigger.State,\n ) => ReactElement)"
29+
}
30+
},
31+
"dataAttributes": {},
32+
"cssVariables": {}
33+
}

‎docs/reference/generated/drawer-viewport.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "DrawerViewport",
3+
"description": "A positioning container for the drawer popup that can be made scrollable.\nRenders a `<div>` element.",
4+
"props": {
5+
"className": {
6+
"type": "string | ((state: AlertDialog.Viewport.State) => string | undefined)",
7+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
8+
"detailedType": "| string\n| ((state: AlertDialog.Viewport.State) => string | undefined)"
9+
},
10+
"style": {
11+
"type": "CSSProperties | ((state: AlertDialog.Viewport.State) => CSSProperties | undefined)",
12+
"detailedType": "| React.CSSProperties\n| ((\n state: AlertDialog.Viewport.State,\n ) => CSSProperties | undefined)\n| undefined"
13+
},
14+
"render": {
15+
"type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Viewport.State) => ReactElement)",
16+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
17+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: AlertDialog.Viewport.State,\n ) => ReactElement)"
18+
}
19+
},
20+
"dataAttributes": {},
21+
"cssVariables": {}
22+
}

0 commit comments

Comments
 (0)