@databricks/appkit 0.2.0 → 0.4.0

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

@@ -0,0 +1,484 @@
+# Menubar
+
+Horizontal menu bar with dropdown menus
+
+## Example[​](#example "Direct link to Example")
+
+<!-- -->
+
+```tsx
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@databricks/appkit-ui/react"
+
+export default function MenubarExample() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
+
+```
+
+## Menubar[​](#menubar-1 "Direct link to Menubar")
+
+Horizontal menu bar with dropdown menus
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props "Direct link to Props")
+
+| Prop            | Type                        | Required | Default | Description |
+| --------------- | --------------------------- | -------- | ------- | ----------- |
+| `value`         | `string`                    |          | -       | -           |
+| `defaultValue`  | `string`                    |          | -       | -           |
+| `onValueChange` | `((value: string) => void)` |          | -       | -           |
+| `loop`          | `boolean`                   |          | -       | -           |
+| `dir`           | `enum`                      |          | -       | -           |
+| `asChild`       | `boolean`                   |          | -       | -           |
+
+### Usage[​](#usage "Direct link to Usage")
+
+```tsx
+import { Menubar } from '@databricks/appkit-ui';
+
+<Menubar /* props */ />
+
+```
+
+## MenubarCheckboxItem[​](#menubarcheckboxitem "Direct link to MenubarCheckboxItem")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.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 { MenubarCheckboxItem } from '@databricks/appkit-ui';
+
+<MenubarCheckboxItem /* props */ />
+
+```
+
+## MenubarContent[​](#menubarcontent "Direct link to MenubarContent")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.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 { MenubarContent } from '@databricks/appkit-ui';
+
+<MenubarContent /* props */ />
+
+```
+
+## MenubarGroup[​](#menubargroup "Direct link to MenubarGroup")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props-3 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-3 "Direct link to Usage")
+
+```tsx
+import { MenubarGroup } from '@databricks/appkit-ui';
+
+<MenubarGroup /* props */ />
+
+```
+
+## MenubarItem[​](#menubaritem "Direct link to MenubarItem")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.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 { MenubarItem } from '@databricks/appkit-ui';
+
+<MenubarItem /* props */ />
+
+```
+
+## MenubarLabel[​](#menubarlabel "Direct link to MenubarLabel")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.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 { MenubarLabel } from '@databricks/appkit-ui';
+
+<MenubarLabel /* props */ />
+
+```
+
+## MenubarMenu[​](#menubarmenu "Direct link to MenubarMenu")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props-6 "Direct link to Props")
+
+| Prop             | Type     | Required | Default | Description |
+| ---------------- | -------- | -------- | ------- | ----------- |
+| `value`          | `string` |          | -       | -           |
+| `__scopeMenubar` | `Scope`  |          | -       | -           |
+
+### Usage[​](#usage-6 "Direct link to Usage")
+
+```tsx
+import { MenubarMenu } from '@databricks/appkit-ui';
+
+<MenubarMenu /* props */ />
+
+```
+
+## MenubarPortal[​](#menubarportal "Direct link to MenubarPortal")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.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 { MenubarPortal } from '@databricks/appkit-ui';
+
+<MenubarPortal /* props */ />
+
+```
+
+## MenubarRadioGroup[​](#menubarradiogroup "Direct link to MenubarRadioGroup")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props-8 "Direct link to Props")
+
+| Prop            | Type                        | Required | Default | Description |
+| --------------- | --------------------------- | -------- | ------- | ----------- |
+| `asChild`       | `boolean`                   |          | -       | -           |
+| `value`         | `string`                    | ✓        | -       | -           |
+| `onValueChange` | `((value: string) => void)` |          | -       | -           |
+
+### Usage[​](#usage-8 "Direct link to Usage")
+
+```tsx
+import { MenubarRadioGroup } from '@databricks/appkit-ui';
+
+<MenubarRadioGroup /* props */ />
+
+```
+
+## MenubarRadioItem[​](#menubarradioitem "Direct link to MenubarRadioItem")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props-9 "Direct link to Props")
+
+| Prop        | Type                       | Required | Default | Description |
+| ----------- | -------------------------- | -------- | ------- | ----------- |
+| `onSelect`  | `((event: Event) => void)` |          | -       | -           |
+| `asChild`   | `boolean`                  |          | -       | -           |
+| `disabled`  | `boolean`                  |          | -       | -           |
+| `value`     | `string`                   | ✓        | -       | -           |
+| `textValue` | `string`                   |          | -       | -           |
+
+### Usage[​](#usage-9 "Direct link to Usage")
+
+```tsx
+import { MenubarRadioItem } from '@databricks/appkit-ui';
+
+<MenubarRadioItem /* props */ />
+
+```
+
+## MenubarSeparator[​](#menubarseparator "Direct link to MenubarSeparator")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props-10 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-10 "Direct link to Usage")
+
+```tsx
+import { MenubarSeparator } from '@databricks/appkit-ui';
+
+<MenubarSeparator /* props */ />
+
+```
+
+## MenubarShortcut[​](#menubarshortcut "Direct link to MenubarShortcut")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props-11 "Direct link to Props")
+
+This component extends standard HTML element attributes.
+
+### Usage[​](#usage-11 "Direct link to Usage")
+
+```tsx
+import { MenubarShortcut } from '@databricks/appkit-ui';
+
+<MenubarShortcut /* props */ />
+
+```
+
+## MenubarSub[​](#menubarsub "Direct link to MenubarSub")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props-12 "Direct link to Props")
+
+| Prop           | Type                        | Required | Default | Description |
+| -------------- | --------------------------- | -------- | ------- | ----------- |
+| `open`         | `boolean`                   |          | -       | -           |
+| `defaultOpen`  | `boolean`                   |          | -       | -           |
+| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
+
+### Usage[​](#usage-12 "Direct link to Usage")
+
+```tsx
+import { MenubarSub } from '@databricks/appkit-ui';
+
+<MenubarSub /* props */ />
+
+```
+
+## MenubarSubContent[​](#menubarsubcontent "Direct link to MenubarSubContent")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props-13 "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-13 "Direct link to Usage")
+
+```tsx
+import { MenubarSubContent } from '@databricks/appkit-ui';
+
+<MenubarSubContent /* props */ />
+
+```
+
+## MenubarSubTrigger[​](#menubarsubtrigger "Direct link to MenubarSubTrigger")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props-14 "Direct link to Props")
+
+| Prop        | Type      | Required | Default | Description |
+| ----------- | --------- | -------- | ------- | ----------- |
+| `asChild`   | `boolean` |          | -       | -           |
+| `disabled`  | `boolean` |          | -       | -           |
+| `textValue` | `string`  |          | -       | -           |
+| `inset`     | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-14 "Direct link to Usage")
+
+```tsx
+import { MenubarSubTrigger } from '@databricks/appkit-ui';
+
+<MenubarSubTrigger /* props */ />
+
+```
+
+## MenubarTrigger[​](#menubartrigger "Direct link to MenubarTrigger")
+
+**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)
+
+### Props[​](#props-15 "Direct link to Props")
+
+| Prop      | Type      | Required | Default | Description |
+| --------- | --------- | -------- | ------- | ----------- |
+| `asChild` | `boolean` |          | -       | -           |
+
+### Usage[​](#usage-15 "Direct link to Usage")
+
+```tsx
+import { MenubarTrigger } from '@databricks/appkit-ui';
+
+<MenubarTrigger /* props */ />
+
+```