@databricks/appkit 0.3.0 → 0.4.1

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

@@ -0,0 +1,419 @@
+# ContextMenu
+
+Menu triggered by right-clicking an element
+
+## Example[​](#example "Direct link to Example")
+
+<!-- -->
+
+```tsx
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@databricks/appkit-ui/react"
+
+export default function ContextMenuExample() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-48">
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value="pedro">
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioItem value="pedro">
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+
+```
+
+## ContextMenu[​](#contextmenu-1 "Direct link to ContextMenu")
+
+Menu triggered by right-clicking an element
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)
+
+### Props[​](#props "Direct link to Props")
+
+| Prop           | Type                        | Required | Default | Description |
+| -------------- | --------------------------- | -------- | ------- | ----------- |
+| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
+| `dir`          | `enum`                      |          | -       | -           |
+| `modal`        | `boolean`                   |          | -       | -           |
+
+### Usage[​](#usage "Direct link to Usage")
+
+```tsx
+import { ContextMenu } from '@databricks/appkit-ui';
+
+<ContextMenu /* props */ />
+
+```
+
+## ContextMenuCheckboxItem[​](#contextmenucheckboxitem "Direct link to ContextMenuCheckboxItem")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuCheckboxItem } from '@databricks/appkit-ui';
+
+<ContextMenuCheckboxItem /* props */ />
+
+```
+
+## ContextMenuContent[​](#contextmenucontent "Direct link to ContextMenuContent")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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                                                    |
+| `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 { ContextMenuContent } from '@databricks/appkit-ui';
+
+<ContextMenuContent /* props */ />
+
+```
+
+## ContextMenuGroup[​](#contextmenugroup "Direct link to ContextMenuGroup")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuGroup } from '@databricks/appkit-ui';
+
+<ContextMenuGroup /* props */ />
+
+```
+
+## ContextMenuItem[​](#contextmenuitem "Direct link to ContextMenuItem")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuItem } from '@databricks/appkit-ui';
+
+<ContextMenuItem /* props */ />
+
+```
+
+## ContextMenuLabel[​](#contextmenulabel "Direct link to ContextMenuLabel")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuLabel } from '@databricks/appkit-ui';
+
+<ContextMenuLabel /* props */ />
+
+```
+
+## ContextMenuPortal[​](#contextmenuportal "Direct link to ContextMenuPortal")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuPortal } from '@databricks/appkit-ui';
+
+<ContextMenuPortal /* props */ />
+
+```
+
+## ContextMenuRadioGroup[​](#contextmenuradiogroup "Direct link to ContextMenuRadioGroup")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuRadioGroup } from '@databricks/appkit-ui';
+
+<ContextMenuRadioGroup /* props */ />
+
+```
+
+## ContextMenuRadioItem[​](#contextmenuradioitem "Direct link to ContextMenuRadioItem")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuRadioItem } from '@databricks/appkit-ui';
+
+<ContextMenuRadioItem /* props */ />
+
+```
+
+## ContextMenuSeparator[​](#contextmenuseparator "Direct link to ContextMenuSeparator")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuSeparator } from '@databricks/appkit-ui';
+
+<ContextMenuSeparator /* props */ />
+
+```
+
+## ContextMenuShortcut[​](#contextmenushortcut "Direct link to ContextMenuShortcut")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuShortcut } from '@databricks/appkit-ui';
+
+<ContextMenuShortcut /* props */ />
+
+```
+
+## ContextMenuSub[​](#contextmenusub "Direct link to ContextMenuSub")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuSub } from '@databricks/appkit-ui';
+
+<ContextMenuSub /* props */ />
+
+```
+
+## ContextMenuSubContent[​](#contextmenusubcontent "Direct link to ContextMenuSubContent")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuSubContent } from '@databricks/appkit-ui';
+
+<ContextMenuSubContent /* props */ />
+
+```
+
+## ContextMenuSubTrigger[​](#contextmenusubtrigger "Direct link to ContextMenuSubTrigger")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-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 { ContextMenuSubTrigger } from '@databricks/appkit-ui';
+
+<ContextMenuSubTrigger /* props */ />
+
+```
+
+## ContextMenuTrigger[​](#contextmenutrigger "Direct link to ContextMenuTrigger")
+
+**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)
+
+### Props[​](#props-14 "Direct link to Props")
+
+| Prop       | Type      | Required | Default | Description |
+| ---------- | --------- | -------- | ------- | ----------- |
+| `disabled` | `boolean` |          | -       | -           |
+| `asChild`  | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-14 "Direct link to Usage")
+
+```tsx
+import { ContextMenuTrigger } from '@databricks/appkit-ui';
+
+<ContextMenuTrigger /* props */ />
+
+```