@databricks/appkit-ui 0.2.0 → 0.4.0

package/docs/docs/api/appkit-ui/ui/Dialog.md

@@ -0,0 +1,285 @@
+# Dialog
+
+Modal dialog that overlays the page content
+
+## Example[​](#example "Direct link to Example")
+
+<!-- -->
+
+```tsx
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Label,
+} from "@databricks/appkit-ui/react"
+
+export default function DialogExample() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input
+              id="name"
+              defaultValue="Foo Bar"
+              className="col-span-3"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input
+              id="username"
+              defaultValue="foobar"
+              className="col-span-3"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+```
+
+## Dialog[​](#dialog-1 "Direct link to Dialog")
+
+Modal dialog that overlays the page content
+
+**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)
+
+### Props[​](#props "Direct link to Props")
+
+| Prop           | Type                        | Required | Default | Description |
+| -------------- | --------------------------- | -------- | ------- | ----------- |
+| `open`         | `boolean`                   |          | -       | -           |
+| `defaultOpen`  | `boolean`                   |          | -       | -           |
+| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
+| `modal`        | `boolean`                   |          | -       | -           |
+
+### Usage[​](#usage "Direct link to Usage")
+
+```tsx
+import { Dialog } from '@databricks/appkit-ui';
+
+<Dialog /* props */ />
+
+```
+
+## DialogClose[​](#dialogclose "Direct link to DialogClose")
+
+Button that closes the dialog
+
+**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)
+
+### Props[​](#props-1 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-1 "Direct link to Usage")
+
+```tsx
+import { DialogClose } from '@databricks/appkit-ui';
+
+<DialogClose /* props */ />
+
+```
+
+## DialogContent[​](#dialogcontent "Direct link to DialogContent")
+
+Main content area of the dialog
+
+**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)
+
+### Props[​](#props-2 "Direct link to Props")
+
+| Prop                   | Type                                                              | Required | Default | Description                                                                                                                                                                               |
+| ---------------------- | ----------------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `forceMount`           | `true`                                                            |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.                                                                     |
+| `asChild`              | `boolean`                                                         |          | -       | -                                                                                                                                                                                         |
+| `onEscapeKeyDown`      | `((event: KeyboardEvent) => void)`                                |          | -       | Event handler called when the escape key is down. Can be prevented.                                                                                                                       |
+| `onPointerDownOutside` | `((event: PointerDownOutsideEvent) => void)`                      |          | -       | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.                                                                          |
+| `onFocusOutside`       | `((event: FocusOutsideEvent) => void)`                            |          | -       | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.                                                                                            |
+| `onInteractOutside`    | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)` |          | -       | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. |
+| `onOpenAutoFocus`      | `((event: Event) => void)`                                        |          | -       | Event handler called when auto-focusing on open. Can be prevented.                                                                                                                        |
+| `onCloseAutoFocus`     | `((event: Event) => void)`                                        |          | -       | Event handler called when auto-focusing on close. Can be prevented.                                                                                                                       |
+| `showCloseButton`      | `boolean`                                                         |          | `true`  | -                                                                                                                                                                                         |
+
+### Usage[​](#usage-2 "Direct link to Usage")
+
+```tsx
+import { DialogContent } from '@databricks/appkit-ui';
+
+<DialogContent /* props */ />
+
+```
+
+## DialogDescription[​](#dialogdescription "Direct link to DialogDescription")
+
+Description text for the dialog
+
+**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)
+
+### Props[​](#props-3 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-3 "Direct link to Usage")
+
+```tsx
+import { DialogDescription } from '@databricks/appkit-ui';
+
+<DialogDescription /* props */ />
+
+```
+
+## DialogFooter[​](#dialogfooter "Direct link to DialogFooter")
+
+Footer section of the dialog
+
+**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)
+
+### Props[​](#props-4 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-4 "Direct link to Usage")
+
+```tsx
+import { DialogFooter } from '@databricks/appkit-ui';
+
+<DialogFooter /* props */ />
+
+```
+
+## DialogHeader[​](#dialogheader "Direct link to DialogHeader")
+
+Header section of the dialog
+
+**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)
+
+### Props[​](#props-5 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-5 "Direct link to Usage")
+
+```tsx
+import { DialogHeader } from '@databricks/appkit-ui';
+
+<DialogHeader /* props */ />
+
+```
+
+## DialogOverlay[​](#dialogoverlay "Direct link to DialogOverlay")
+
+Dimmed overlay behind the dialog
+
+**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)
+
+### Props[​](#props-6 "Direct link to Props")
+
+| Prop         | Type      | Required | Default | Description                                                                                                           |
+| ------------ | --------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
+| `forceMount` | `true`    |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
+| `asChild`    | `boolean` |          | -       | -                                                                                                                     |
+
+### Usage[​](#usage-6 "Direct link to Usage")
+
+```tsx
+import { DialogOverlay } from '@databricks/appkit-ui';
+
+<DialogOverlay /* props */ />
+
+```
+
+## DialogPortal[​](#dialogportal "Direct link to DialogPortal")
+
+Portal container for dialog content
+
+**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)
+
+### Props[​](#props-7 "Direct link to Props")
+
+| Prop         | Type                                  | Required | Default | Description                                                                                                           |
+| ------------ | ------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
+| `container`  | `Element \| DocumentFragment \| null` |          | -       | Specify a container element to portal the content into.                                                               |
+| `forceMount` | `true`                                |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
+
+### Usage[​](#usage-7 "Direct link to Usage")
+
+```tsx
+import { DialogPortal } from '@databricks/appkit-ui';
+
+<DialogPortal /* props */ />
+
+```
+
+## DialogTitle[​](#dialogtitle "Direct link to DialogTitle")
+
+Title text for the dialog
+
+**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)
+
+### Props[​](#props-8 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-8 "Direct link to Usage")
+
+```tsx
+import { DialogTitle } from '@databricks/appkit-ui';
+
+<DialogTitle /* props */ />
+
+```
+
+## DialogTrigger[​](#dialogtrigger "Direct link to DialogTrigger")
+
+Button that opens the dialog
+
+**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)
+
+### Props[​](#props-9 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-9 "Direct link to Usage")
+
+```tsx
+import { DialogTrigger } from '@databricks/appkit-ui';
+
+<DialogTrigger /* props */ />
+
+```