[drawer] Create new Drawer / Sheet component

docs/reference/generated/drawer-backdrop.json

@@ -0,0 +1,33 @@
+{
+  "name": "DrawerBackdrop",
+  "description": "An overlay displayed beneath the popup.\nRenders a `<div>` element.",
+  "props": {
+    "forceRender": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether the backdrop is forced to render even when nested.",
+      "detailedType": "boolean | undefined"
+    },
+    "className": {
+      "type": "string | ((state: Drawer.Backdrop.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: Drawer.Backdrop.State) => string | undefined)"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: Drawer.Backdrop.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: Drawer.Backdrop.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Drawer.Backdrop.State) => ReactElement)",
+      "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.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Drawer.Backdrop.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {
+    "--drawer-swipe-progress": {
+      "description": "The swipe progress of the drawer gesture.",
+      "type": "number"
+    }
+  }
+}

docs/reference/generated/drawer-close.json

@@ -0,0 +1,28 @@
+{
+  "name": "DrawerClose",
+  "description": "A button that closes the drawer.\nRenders a `<button>` element.",
+  "props": {
+    "nativeButton": {
+      "type": "boolean",
+      "default": "true",
+      "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>`).",
+      "detailedType": "boolean | undefined"
+    },
+    "className": {
+      "type": "string | ((state: AlertDialog.Close.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: AlertDialog.Close.State) => string | undefined)"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: AlertDialog.Close.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((state: AlertDialog.Close.State) => CSSProperties | undefined)\n| undefined"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Close.State) => ReactElement)",
+      "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.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: AlertDialog.Close.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/drawer-content.json

@@ -0,0 +1,22 @@
+{
+  "name": "DrawerContent",
+  "description": "A container for the drawer contents.\nRenders a `<div>` element.",
+  "props": {
+    "className": {
+      "type": "string | ((state: Drawer.Content.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: Drawer.Content.State) => string | undefined)"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: Drawer.Content.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: Drawer.Content.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Drawer.Content.State) => ReactElement)",
+      "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.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Drawer.Content.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/drawer-description.json

@@ -0,0 +1,22 @@
+{
+  "name": "DrawerDescription",
+  "description": "A paragraph with additional information about the drawer.\nRenders a `<p>` element.",
+  "props": {
+    "className": {
+      "type": "string | ((state: AlertDialog.Description.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: AlertDialog.Description.State) => string | undefined)"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: AlertDialog.Description.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: AlertDialog.Description.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Description.State) => ReactElement)",
+      "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.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: AlertDialog.Description.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/drawer-indent-background.json

@@ -0,0 +1,22 @@
+{
+  "name": "DrawerIndentBackground",
+  "description": "An element placed before <Drawer.Indent> to render a background layer\nthat can be styled based on whether any drawer is open.",
+  "props": {
+    "className": {
+      "type": "string | ((state: Drawer.IndentBackground.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((\n    state: Drawer.IndentBackground.State,\n  ) => string | undefined)"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: Drawer.IndentBackground.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: Drawer.IndentBackground.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Drawer.IndentBackground.State) => ReactElement)",
+      "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.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Drawer.IndentBackground.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/drawer-indent.json

@@ -0,0 +1,22 @@
+{
+  "name": "DrawerIndent",
+  "description": "A wrapper element intended to contain your app's main UI.\nApplies `data-active` when any drawer within the nearest <Drawer.Provider> is open.",
+  "props": {
+    "className": {
+      "type": "string | ((state: Drawer.Indent.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: Drawer.Indent.State) => string | undefined)"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: Drawer.Indent.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: Drawer.Indent.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Drawer.Indent.State) => ReactElement)",
+      "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.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Drawer.Indent.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/drawer-popup.json

@@ -0,0 +1,81 @@
+{
+  "name": "DrawerPopup",
+  "description": "A container for the drawer contents.\nRenders a `<div>` element.",
+  "props": {
+    "initialFocus": {
+      "type": "boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | void | HTMLElement | null)",
+      "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.",
+      "detailedType": "| boolean\n| React.RefObject<HTMLElement | null>\n| ((\n    openType: InteractionType,\n  ) => boolean | void | HTMLElement | null)\n| undefined"
+    },
+    "finalFocus": {
+      "type": "boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)",
+      "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.",
+      "detailedType": "| boolean\n| React.RefObject<HTMLElement | null>\n| ((\n    closeType: InteractionType,\n  ) => boolean | void | HTMLElement | null)\n| undefined"
+    },
+    "className": {
+      "type": "string | ((state: Drawer.Popup.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: Drawer.Popup.State) => string | undefined)"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: Drawer.Popup.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((state: Drawer.Popup.State) => CSSProperties | undefined)\n| undefined"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Drawer.Popup.State) => ReactElement)",
+      "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.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Drawer.Popup.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {
+    "data-expanded": {
+      "description": "Present when the drawer is at the expanded (full-height) snap point."
+    },
+    "data-nested-drawer-open": {
+      "description": "Present when a nested drawer is open."
+    },
+    "data-nested-drawer-swiping": {
+      "description": "Present when a nested drawer is being swiped."
+    },
+    "data-swipe-direction": {
+      "description": "Indicates the swipe direction.",
+      "type": "'up' | 'down' | 'left' | 'right'"
+    },
+    "data-swipe-dismiss": {
+      "description": "Present when the drawer is dismissed by swiping."
+    },
+    "data-swiping": {
+      "description": "Present when the drawer is being swiped."
+    }
+  },
+  "cssVariables": {
+    "--drawer-frontmost-height": {
+      "description": "The height of the frontmost open drawer in the current nested drawer stack.",
+      "type": "CSS"
+    },
+    "--drawer-height": {
+      "description": "The height of the drawer popup.",
+      "type": "CSS"
+    },
+    "--drawer-snap-point-offset": {
+      "description": "The snap point offset used for translating the drawer.",
+      "type": "CSS"
+    },
+    "--drawer-swipe-movement-x": {
+      "description": "The swipe movement on the X axis.",
+      "type": "CSS"
+    },
+    "--drawer-swipe-movement-y": {
+      "description": "The swipe movement on the Y axis.",
+      "type": "CSS"
+    },
+    "--drawer-swipe-strength": {
+      "description": "A scalar (0.1-1) used to scale the swipe release transition duration in CSS.",
+      "type": "number"
+    },
+    "--nested-drawers": {
+      "description": "The number of nested drawers that are currently open.",
+      "type": "number"
+    }
+  }
+}

docs/reference/generated/drawer-portal.json

@@ -0,0 +1,33 @@
+{
+  "name": "DrawerPortal",
+  "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.",
+  "props": {
+    "container": {
+      "type": "HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null",
+      "description": "A parent element to render the portal element into.",
+      "detailedType": "| HTMLElement\n| ShadowRoot\n| React.RefObject<HTMLElement | ShadowRoot | null>\n| null\n| undefined"
+    },
+    "className": {
+      "type": "string | ((state: Dialog.Portal.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: Dialog.Portal.State) => string | undefined)"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: Dialog.Portal.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: Dialog.Portal.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden.",
+      "detailedType": "boolean | undefined"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Dialog.Portal.State) => ReactElement)",
+      "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.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Dialog.Portal.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/drawer-provider.json

@@ -0,0 +1,12 @@
+{
+  "name": "DrawerProvider",
+  "description": "Provides a shared context for coordinating global Drawer UI,\nsuch as indent/background effects based on whether any Drawer is open.",
+  "props": {
+    "children": {
+      "type": "ReactNode",
+      "detailedType": "React.ReactNode"
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/drawer-root.json

@@ -0,0 +1,83 @@
+{
+  "name": "DrawerRoot",
+  "description": "Groups all parts of the drawer.\nDoesn't render its own HTML element.",
+  "props": {
+    "defaultOpen": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether the drawer is initially open.\n\nTo render a controlled drawer, use the `open` prop instead.",
+      "detailedType": "boolean | undefined"
+    },
+    "open": {
+      "type": "boolean",
+      "description": "Whether the drawer is currently open.",
+      "detailedType": "boolean | undefined"
+    },
+    "onOpenChange": {
+      "type": "((open: boolean, eventDetails: Drawer.Root.ChangeEventDetails) => void)",
+      "description": "Event handler called when the drawer is opened or closed.",
+      "detailedType": "| ((\n    open: boolean,\n    eventDetails: Drawer.Root.ChangeEventDetails,\n  ) => void)\n| undefined"
+    },
+    "snapPoints": {
+      "type": "DrawerSnapPoint[]",
+      "description": "Snap points used to position the drawer. Use numbers between 0 and 1 to\nrepresent fractions of the viewport height, or CSS length strings (for\nexample, `'148px'`).",
+      "detailedType": "DrawerSnapPoint[] | undefined"
+    },
+    "defaultSnapPoint": {
+      "type": "DrawerSnapPoint | null",
+      "description": "The initial snap point value when uncontrolled.",
+      "detailedType": "number | string | null | undefined"
+    },
+    "snapPoint": {
+      "type": "DrawerSnapPoint | null",
+      "description": "The currently active snap point. Use with `onSnapPointChange` to control the snap point.",
+      "detailedType": "number | string | null | undefined"
+    },
+    "onSnapPointChange": {
+      "type": "((snapPoint: DrawerSnapPoint | null, eventDetails: Drawer.Root.SnapPointChangeEventDetails) => void)",
+      "description": "Callback fired when the snap point changes.",
+      "detailedType": "| ((\n    snapPoint: DrawerSnapPoint | null,\n    eventDetails: Drawer.Root.SnapPointChangeEventDetails,\n  ) => void)\n| undefined"
+    },
+    "actionsRef": {
+      "type": "RefObject<Drawer.Root.Actions>",
+      "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.",
+      "detailedType": "React.RefObject<Drawer.Root.Actions> | undefined"
+    },
+    "disablePointerDismissal": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Determines whether the drawer should close on outside clicks.",
+      "detailedType": "boolean | undefined"
+    },
+    "modal": {
+      "type": "boolean | 'trap-focus'",
+      "default": "true",
+      "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.",
+      "detailedType": "boolean | 'trap-focus' | undefined"
+    },
+    "onOpenChangeComplete": {
+      "type": "((open: boolean) => void)",
+      "description": "Event handler called after any animations complete when the drawer is opened or closed.",
+      "detailedType": "((open: boolean) => void) | undefined"
+    },
+    "snapToSequentialPoints": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Disables velocity-based snap skipping so drag distance determines the next snap point.",
+      "detailedType": "boolean | undefined"
+    },
+    "swipeDirection": {
+      "type": "DrawerSwipeDirection",
+      "default": "'down'",
+      "description": "The swipe direction used to dismiss the drawer.",
+      "detailedType": "'up' | 'down' | 'left' | 'right' | undefined"
+    },
+    "children": {
+      "type": "ReactNode",
+      "description": "The content of the drawer.",
+      "detailedType": "React.ReactNode"
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}