Skip to content

Commit dcbf3bf

Browse files
rohanchkrabrtyrohanchkrabrty
authored
feat: migrate DropdownMenu to BaseUI (#652)
* wip: migrate dropdown * wip: filterable menu * wip: migrate dropdown * feat: migrate menu to base ui * feat: update docs and usage of menu * fix: menu fixes and usage
1 parent 4262f37 commit dcbf3bf

42 files changed

Lines changed: 2012 additions & 1761 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/www/src/app/examples/page.tsx‎

Lines changed: 76 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import {
99
DataTable,
1010
DatePicker,
1111
Dialog,
12-
DropdownMenu,
1312
EmptyState,
1413
Flex,
1514
IconButton,
1615
Indicator,
1716
InputField,
17+
Menu,
1818
Navbar,
1919
Popover,
2020
RangePicker,
@@ -1540,35 +1540,31 @@ const Page = () => {
15401540
>
15411541
Open Sheet
15421542
</Button>
1543-
<DropdownMenu>
1544-
<DropdownMenu.Trigger asChild>
1545-
<Button variant='outline'>Open Menu</Button>
1546-
</DropdownMenu.Trigger>
1547-
<DropdownMenu.Content>
1548-
<DropdownMenu.Label>
1549-
Team Actions
1550-
</DropdownMenu.Label>
1551-
<Tooltip
1552-
message='Add a new member to your team'
1553-
side='right'
1554-
>
1555-
<DropdownMenu.Item>Add Member</DropdownMenu.Item>
1556-
</Tooltip>
1557-
<DropdownMenu.Item>Edit Team</DropdownMenu.Item>
1558-
<DropdownMenu.Separator />
1559-
<DropdownMenu.Group>
1560-
<DropdownMenu.Label>Settings</DropdownMenu.Label>
1561-
<DropdownMenu.Item>Permissions</DropdownMenu.Item>
1562-
<DropdownMenu.Item>
1563-
Notifications
1564-
</DropdownMenu.Item>
1565-
</DropdownMenu.Group>
1566-
<DropdownMenu.Separator />
1567-
<DropdownMenu.Item color='danger'>
1568-
Delete Team
1569-
</DropdownMenu.Item>
1570-
</DropdownMenu.Content>
1571-
</DropdownMenu>
1543+
<Menu>
1544+
<Menu.Trigger render={<Button variant='outline' />}>
1545+
Open Menu
1546+
</Menu.Trigger>
1547+
<Menu.Content>
1548+
<Menu.Group>
1549+
<Menu.Label>Team Actions</Menu.Label>
1550+
<Tooltip
1551+
message='Add a new member to your team'
1552+
side='right'
1553+
>
1554+
<Menu.Item>Add Member</Menu.Item>
1555+
</Tooltip>
1556+
<Menu.Item>Edit Team</Menu.Item>
1557+
</Menu.Group>
1558+
<Menu.Separator />
1559+
<Menu.Group>
1560+
<Menu.Label>Settings</Menu.Label>
1561+
<Menu.Item>Permissions</Menu.Item>
1562+
<Menu.Item>Notifications</Menu.Item>
1563+
</Menu.Group>
1564+
<Menu.Separator />
1565+
<Menu.Item color='danger'>Delete Team</Menu.Item>
1566+
</Menu.Content>
1567+
</Menu>
15721568
</Flex>
15731569
</Flex>
15741570
</Flex>
@@ -1678,31 +1674,31 @@ const Page = () => {
16781674
<Indicator variant='success' label='5'>
16791675
<Button variant='outline'>Active Members</Button>
16801676
</Indicator>
1681-
<DropdownMenu>
1682-
<DropdownMenu.Trigger asChild>
1683-
<Button variant='outline'>Open Menu</Button>
1684-
</DropdownMenu.Trigger>
1685-
<DropdownMenu.Content>
1686-
<DropdownMenu.Label>Team Actions</DropdownMenu.Label>
1687-
<Tooltip
1688-
message='Add a new member to your team'
1689-
side='right'
1690-
>
1691-
<DropdownMenu.Item>Add Member</DropdownMenu.Item>
1692-
</Tooltip>
1693-
<DropdownMenu.Item>Edit Team</DropdownMenu.Item>
1694-
<DropdownMenu.Separator />
1695-
<DropdownMenu.Group>
1696-
<DropdownMenu.Label>Settings</DropdownMenu.Label>
1697-
<DropdownMenu.Item>Permissions</DropdownMenu.Item>
1698-
<DropdownMenu.Item>Notifications</DropdownMenu.Item>
1699-
</DropdownMenu.Group>
1700-
<DropdownMenu.Separator />
1701-
<DropdownMenu.Item color='danger'>
1702-
Delete Team
1703-
</DropdownMenu.Item>
1704-
</DropdownMenu.Content>
1705-
</DropdownMenu>
1677+
<Menu>
1678+
<Menu.Trigger render={<Button variant='outline' />}>
1679+
Open Menu
1680+
</Menu.Trigger>
1681+
<Menu.Content>
1682+
<Menu.Group>
1683+
<Menu.Label>Team Actions</Menu.Label>
1684+
<Tooltip
1685+
message='Add a new member to your team'
1686+
side='right'
1687+
>
1688+
<Menu.Item>Add Member</Menu.Item>
1689+
</Tooltip>
1690+
<Menu.Item>Edit Team</Menu.Item>
1691+
</Menu.Group>
1692+
<Menu.Separator />
1693+
<Menu.Group>
1694+
<Menu.Label>Settings</Menu.Label>
1695+
<Menu.Item>Permissions</Menu.Item>
1696+
<Menu.Item>Notifications</Menu.Item>
1697+
</Menu.Group>
1698+
<Menu.Separator />
1699+
<Menu.Item color='danger'>Delete Team</Menu.Item>
1700+
</Menu.Content>
1701+
</Menu>
17061702
</Flex>
17071703
</Flex>
17081704
</Flex>
@@ -1816,35 +1812,31 @@ const Page = () => {
18161812
<Indicator variant='success' label='5'>
18171813
<Button variant='outline'>Active Members</Button>
18181814
</Indicator>
1819-
<DropdownMenu>
1820-
<DropdownMenu.Trigger asChild>
1821-
<Button variant='outline'>Open Menu</Button>
1822-
</DropdownMenu.Trigger>
1823-
<DropdownMenu.Content>
1824-
<DropdownMenu.Label>
1825-
Team Actions
1826-
</DropdownMenu.Label>
1827-
<Tooltip
1828-
message='Add a new member to your team'
1829-
side='right'
1830-
>
1831-
<DropdownMenu.Item>Add Member</DropdownMenu.Item>
1832-
</Tooltip>
1833-
<DropdownMenu.Item>Edit Team</DropdownMenu.Item>
1834-
<DropdownMenu.Separator />
1835-
<DropdownMenu.Group>
1836-
<DropdownMenu.Label>Settings</DropdownMenu.Label>
1837-
<DropdownMenu.Item>Permissions</DropdownMenu.Item>
1838-
<DropdownMenu.Item>
1839-
Notifications
1840-
</DropdownMenu.Item>
1841-
</DropdownMenu.Group>
1842-
<DropdownMenu.Separator />
1843-
<DropdownMenu.Item color='danger'>
1844-
Delete Team
1845-
</DropdownMenu.Item>
1846-
</DropdownMenu.Content>
1847-
</DropdownMenu>
1815+
<Menu>
1816+
<Menu.Trigger render={<Button variant='outline' />}>
1817+
Open Menu
1818+
</Menu.Trigger>
1819+
<Menu.Content>
1820+
<Menu.Group>
1821+
<Menu.Label>Team Actions</Menu.Label>
1822+
<Tooltip
1823+
message='Add a new member to your team'
1824+
side='right'
1825+
>
1826+
<Menu.Item>Add Member</Menu.Item>
1827+
</Tooltip>
1828+
<Menu.Item>Edit Team</Menu.Item>
1829+
</Menu.Group>
1830+
<Menu.Separator />
1831+
<Menu.Group>
1832+
<Menu.Label>Settings</Menu.Label>
1833+
<Menu.Item>Permissions</Menu.Item>
1834+
<Menu.Item>Notifications</Menu.Item>
1835+
</Menu.Group>
1836+
<Menu.Separator />
1837+
<Menu.Item color='danger'>Delete Team</Menu.Item>
1838+
</Menu.Content>
1839+
</Menu>
18481840
</Flex>
18491841
</Flex>
18501842
</Flex>

‎apps/www/src/components/ai/page-actions.tsx‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client';
2-
import { DropdownMenu } from '@raystack/apsara';
2+
import { Menu } from '@raystack/apsara';
33
import { cx } from 'class-variance-authority';
44
import { buttonVariants } from 'fumadocs-ui/components/ui/button';
55
import { Check, ChevronDown, Copy, ExternalLinkIcon } from 'lucide-react';
@@ -233,44 +233,46 @@ export function ViewOptions({
233233
}, [markdownUrl]);
234234

235235
return (
236-
<DropdownMenu placement='bottom-end'>
237-
<DropdownMenu.Trigger asChild>
238-
<button
239-
className={cx(
240-
buttonVariants({
241-
color: 'secondary',
242-
size: 'sm',
243-
className: 'bg-fd-secondary'
244-
})
245-
)}
246-
style={{
247-
borderTopLeftRadius: '0px',
248-
borderBottomLeftRadius: '0px',
249-
borderLeft: 'none'
250-
}}
251-
>
252-
<ChevronDown size={16} />
253-
</button>
254-
</DropdownMenu.Trigger>
255-
<DropdownMenu.Content>
236+
<Menu>
237+
<Menu.Trigger
238+
render={
239+
<button
240+
className={cx(
241+
buttonVariants({
242+
color: 'secondary',
243+
size: 'sm',
244+
className: 'bg-fd-secondary'
245+
})
246+
)}
247+
style={{
248+
borderTopLeftRadius: '0px',
249+
borderBottomLeftRadius: '0px',
250+
borderLeft: 'none'
251+
}}
252+
/>
253+
}
254+
>
255+
<ChevronDown size={16} />
256+
</Menu.Trigger>
257+
<Menu.Content>
256258
{items.map(item => (
257259
<a
258260
key={item.title}
259261
href={item.href.toString()}
260262
rel='noreferrer noopener'
261263
target='_blank'
262264
>
263-
<DropdownMenu.Item
265+
<Menu.Item
264266
leadingIcon={item.icon}
265267
trailingIcon={
266268
<ExternalLinkIcon className='size-3.5 text-fd-muted-foreground ms-auto' />
267269
}
268270
>
269271
{item.title}
270-
</DropdownMenu.Item>
272+
</Menu.Item>
271273
</a>
272274
))}
273-
</DropdownMenu.Content>
274-
</DropdownMenu>
275+
</Menu.Content>
276+
</Menu>
275277
);
276278
}

‎apps/www/src/components/demo/demo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Home, Info, Laugh, X } from 'lucide-react';
1313
import NextLink from 'next/link';
1414
import { Suspense } from 'react';
1515
import DataTableDemo from '../datatable-demo';
16-
import LinearDropdownDemo from '../linear-dropdown-demo';
16+
import LinearMenuDemo from '../linear-dropdown-demo';
1717
import PopoverColorPicker from '../popover-color-picker';
1818
import DemoPlayground from './demo-playground';
1919
import DemoPreview from './demo-preview';
@@ -25,7 +25,7 @@ export default function Demo(props: DemoProps) {
2525
scope = {
2626
...Apsara,
2727
DataTableDemo,
28-
LinearDropdownDemo,
28+
LinearMenuDemo,
2929
PopoverColorPicker,
3030
Info,
3131
X,

0 commit comments

Comments
 (0)