@databricks/appkit-ui 0.2.0 → 0.4.0

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

@@ -0,0 +1,478 @@
+# DropdownMenu
+
+Menu that displays when triggered by a button or element
+
+## Example[​](#example "Direct link to Example")
+
+<!-- -->
+
+```tsx
+import {
+  Cloud,
+  CreditCard,
+  Github,
+  Keyboard,
+  LifeBuoy,
+  LogOut,
+  Mail,
+  MessageSquare,
+  Plus,
+  PlusCircle,
+  Settings,
+  User,
+  UserPlus,
+  Users,
+} from "lucide-react"
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@databricks/appkit-ui/react"
+
+export default function DropdownMenuExample() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <User />
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCard />
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings />
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Keyboard />
+            <span>Keyboard shortcuts</span>
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Users />
+            <span>Team</span>
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <UserPlus />
+              <span>Invite users</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>
+                  <Mail />
+                  <span>Email</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <MessageSquare />
+                  <span>Message</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <PlusCircle />
+                  <span>More...</span>
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            <Plus />
+            <span>New Team</span>
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Github />
+          <span>GitHub</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <LifeBuoy />
+          <span>Support</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem disabled>
+          <Cloud />
+          <span>API</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut />
+          <span>Log out</span>
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+```
+
+## DropdownMenu[​](#dropdownmenu-1 "Direct link to DropdownMenu")
+
+Menu that displays when triggered by a button or element
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props "Direct link to Props")
+
+| Prop           | Type                        | Required | Default | Description |
+| -------------- | --------------------------- | -------- | ------- | ----------- |
+| `dir`          | `enum`                      |          | -       | -           |
+| `open`         | `boolean`                   |          | -       | -           |
+| `defaultOpen`  | `boolean`                   |          | -       | -           |
+| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
+| `modal`        | `boolean`                   |          | -       | -           |
+
+### Usage[​](#usage "Direct link to Usage")
+
+```tsx
+import { DropdownMenu } from '@databricks/appkit-ui';
+
+<DropdownMenu /* props */ />
+
+```
+
+## DropdownMenuCheckboxItem[​](#dropdownmenucheckboxitem "Direct link to DropdownMenuCheckboxItem")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-1 "Direct link to Props")
+
+| Prop              | Type                           | Required | Default | Description |
+| ----------------- | ------------------------------ | -------- | ------- | ----------- |
+| `onSelect`        | `((event: Event) => void)`     |          | -       | -           |
+| `asChild`         | `boolean`                      |          | -       | -           |
+| `disabled`        | `boolean`                      |          | -       | -           |
+| `checked`         | `CheckedState`                 |          | -       | -           |
+| `onCheckedChange` | `((checked: boolean) => void)` |          | -       | -           |
+| `textValue`       | `string`                       |          | -       | -           |
+
+### Usage[​](#usage-1 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuCheckboxItem } from '@databricks/appkit-ui';
+
+<DropdownMenuCheckboxItem /* props */ />
+
+```
+
+## DropdownMenuContent[​](#dropdownmenucontent "Direct link to DropdownMenuContent")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-2 "Direct link to Props")
+
+| Prop                     | Type                                                                        | Required | Default | Description                                                                                                           |
+| ------------------------ | --------------------------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
+| `asChild`                | `boolean`                                                                   |          | -       | -                                                                                                                     |
+| `forceMount`             | `true`                                                                      |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
+| `onEscapeKeyDown`        | `((event: KeyboardEvent) => void)`                                          |          | -       | -                                                                                                                     |
+| `onPointerDownOutside`   | `((event: PointerDownOutsideEvent) => void)`                                |          | -       | -                                                                                                                     |
+| `onFocusOutside`         | `((event: FocusOutsideEvent) => void)`                                      |          | -       | -                                                                                                                     |
+| `onInteractOutside`      | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)`           |          | -       | -                                                                                                                     |
+| `onCloseAutoFocus`       | `((event: Event) => void)`                                                  |          | -       | Event handler called when auto-focusing on close. Can be prevented.                                                   |
+| `loop`                   | `boolean`                                                                   |          | -       | Whether keyboard navigation should loop around @defaultValue false                                                    |
+| `align`                  | `enum`                                                                      |          | -       | -                                                                                                                     |
+| `side`                   | `enum`                                                                      |          | -       | -                                                                                                                     |
+| `sideOffset`             | `number`                                                                    |          | -       | -                                                                                                                     |
+| `alignOffset`            | `number`                                                                    |          | -       | -                                                                                                                     |
+| `arrowPadding`           | `number`                                                                    |          | -       | -                                                                                                                     |
+| `avoidCollisions`        | `boolean`                                                                   |          | -       | -                                                                                                                     |
+| `collisionBoundary`      | `Boundary \| Boundary[]`                                                    |          | -       | -                                                                                                                     |
+| `collisionPadding`       | `number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>>` |          | -       | -                                                                                                                     |
+| `sticky`                 | `enum`                                                                      |          | -       | -                                                                                                                     |
+| `hideWhenDetached`       | `boolean`                                                                   |          | -       | -                                                                                                                     |
+| `updatePositionStrategy` | `enum`                                                                      |          | -       | -                                                                                                                     |
+
+### Usage[​](#usage-2 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuContent } from '@databricks/appkit-ui';
+
+<DropdownMenuContent /* props */ />
+
+```
+
+## DropdownMenuGroup[​](#dropdownmenugroup "Direct link to DropdownMenuGroup")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-3 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-3 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuGroup } from '@databricks/appkit-ui';
+
+<DropdownMenuGroup /* props */ />
+
+```
+
+## DropdownMenuItem[​](#dropdownmenuitem "Direct link to DropdownMenuItem")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-4 "Direct link to Props")
+
+| Prop        | Type                       | Required | Default   | Description |
+| ----------- | -------------------------- | -------- | --------- | ----------- |
+| `onSelect`  | `((event: Event) => void)` |          | -         | -           |
+| `asChild`   | `boolean`                  |          | -         | -           |
+| `disabled`  | `boolean`                  |          | -         | -           |
+| `textValue` | `string`                   |          | -         | -           |
+| `inset`     | `boolean`                  |          | -         | -           |
+| `variant`   | `enum`                     |          | `default` | -           |
+
+### Usage[​](#usage-4 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuItem } from '@databricks/appkit-ui';
+
+<DropdownMenuItem /* props */ />
+
+```
+
+## DropdownMenuLabel[​](#dropdownmenulabel "Direct link to DropdownMenuLabel")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-5 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+| `inset`   | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-5 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuLabel } from '@databricks/appkit-ui';
+
+<DropdownMenuLabel /* props */ />
+
+```
+
+## DropdownMenuPortal[​](#dropdownmenuportal "Direct link to DropdownMenuPortal")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-6 "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-6 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuPortal } from '@databricks/appkit-ui';
+
+<DropdownMenuPortal /* props */ />
+
+```
+
+## DropdownMenuRadioGroup[​](#dropdownmenuradiogroup "Direct link to DropdownMenuRadioGroup")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-7 "Direct link to Props")
+
+| Prop            | Type                        | Required | Default | Description |
+| --------------- | --------------------------- | -------- | ------- | ----------- |
+| `asChild`       | `boolean`                   |          | -       | -           |
+| `value`         | `string`                    | ✓        | -       | -           |
+| `onValueChange` | `((value: string) => void)` |          | -       | -           |
+
+### Usage[​](#usage-7 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuRadioGroup } from '@databricks/appkit-ui';
+
+<DropdownMenuRadioGroup /* props */ />
+
+```
+
+## DropdownMenuRadioItem[​](#dropdownmenuradioitem "Direct link to DropdownMenuRadioItem")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-8 "Direct link to Props")
+
+| Prop        | Type                       | Required | Default | Description |
+| ----------- | -------------------------- | -------- | ------- | ----------- |
+| `onSelect`  | `((event: Event) => void)` |          | -       | -           |
+| `asChild`   | `boolean`                  |          | -       | -           |
+| `disabled`  | `boolean`                  |          | -       | -           |
+| `value`     | `string`                   | ✓        | -       | -           |
+| `textValue` | `string`                   |          | -       | -           |
+
+### Usage[​](#usage-8 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuRadioItem } from '@databricks/appkit-ui';
+
+<DropdownMenuRadioItem /* props */ />
+
+```
+
+## DropdownMenuSeparator[​](#dropdownmenuseparator "Direct link to DropdownMenuSeparator")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-9 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-9 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuSeparator } from '@databricks/appkit-ui';
+
+<DropdownMenuSeparator /* props */ />
+
+```
+
+## DropdownMenuShortcut[​](#dropdownmenushortcut "Direct link to DropdownMenuShortcut")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-10 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-10 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuShortcut } from '@databricks/appkit-ui';
+
+<DropdownMenuShortcut /* props */ />
+
+```
+
+## DropdownMenuSub[​](#dropdownmenusub "Direct link to DropdownMenuSub")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-11 "Direct link to Props")
+
+| Prop           | Type                        | Required | Default | Description |
+| -------------- | --------------------------- | -------- | ------- | ----------- |
+| `open`         | `boolean`                   |          | -       | -           |
+| `defaultOpen`  | `boolean`                   |          | -       | -           |
+| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
+
+### Usage[​](#usage-11 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuSub } from '@databricks/appkit-ui';
+
+<DropdownMenuSub /* props */ />
+
+```
+
+## DropdownMenuSubContent[​](#dropdownmenusubcontent "Direct link to DropdownMenuSubContent")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-12 "Direct link to Props")
+
+| Prop                     | Type                                                                        | Required | Default | Description                                                                                                           |
+| ------------------------ | --------------------------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
+| `asChild`                | `boolean`                                                                   |          | -       | -                                                                                                                     |
+| `forceMount`             | `true`                                                                      |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
+| `onEscapeKeyDown`        | `((event: KeyboardEvent) => void)`                                          |          | -       | -                                                                                                                     |
+| `onPointerDownOutside`   | `((event: PointerDownOutsideEvent) => void)`                                |          | -       | -                                                                                                                     |
+| `onFocusOutside`         | `((event: FocusOutsideEvent) => void)`                                      |          | -       | -                                                                                                                     |
+| `onInteractOutside`      | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)`           |          | -       | -                                                                                                                     |
+| `loop`                   | `boolean`                                                                   |          | -       | Whether keyboard navigation should loop around @defaultValue false                                                    |
+| `sideOffset`             | `number`                                                                    |          | -       | -                                                                                                                     |
+| `alignOffset`            | `number`                                                                    |          | -       | -                                                                                                                     |
+| `arrowPadding`           | `number`                                                                    |          | -       | -                                                                                                                     |
+| `avoidCollisions`        | `boolean`                                                                   |          | -       | -                                                                                                                     |
+| `collisionBoundary`      | `Boundary \| Boundary[]`                                                    |          | -       | -                                                                                                                     |
+| `collisionPadding`       | `number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>>` |          | -       | -                                                                                                                     |
+| `sticky`                 | `enum`                                                                      |          | -       | -                                                                                                                     |
+| `hideWhenDetached`       | `boolean`                                                                   |          | -       | -                                                                                                                     |
+| `updatePositionStrategy` | `enum`                                                                      |          | -       | -                                                                                                                     |
+
+### Usage[​](#usage-12 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuSubContent } from '@databricks/appkit-ui';
+
+<DropdownMenuSubContent /* props */ />
+
+```
+
+## DropdownMenuSubTrigger[​](#dropdownmenusubtrigger "Direct link to DropdownMenuSubTrigger")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-13 "Direct link to Props")
+
+| Prop        | Type      | Required | Default | Description |
+| ----------- | --------- | -------- | ------- | ----------- |
+| `asChild`   | `boolean` |          | -       | -           |
+| `disabled`  | `boolean` |          | -       | -           |
+| `textValue` | `string`  |          | -       | -           |
+| `inset`     | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-13 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuSubTrigger } from '@databricks/appkit-ui';
+
+<DropdownMenuSubTrigger /* props */ />
+
+```
+
+## DropdownMenuTrigger[​](#dropdownmenutrigger "Direct link to DropdownMenuTrigger")
+
+**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)
+
+### Props[​](#props-14 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-14 "Direct link to Usage")
+
+```tsx
+import { DropdownMenuTrigger } from '@databricks/appkit-ui';
+
+<DropdownMenuTrigger /* props */ />
+
+```