Skip to content

Commit 3de07ee

Browse files
irsyadadlirsyadadl
committed
menu section should share the props 
1 parent 26dd06c commit 3de07ee

File tree

12 files changed

+102
-13
lines changed

12 files changed

+102
-13
lines changed

‎.eslintrc.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"@typescript-eslint/consistent-type-definitions": "off",
1515
"@next/next/no-img-element": "off",
1616
"@typescript-eslint/prefer-nullish-coalescing": "off",
17-
"@typescript-eslint/consistent-type-imports": "warn",
18-
"@typescript-eslint/no-unused-vars": "warn",
17+
"@typescript-eslint/consistent-type-imports": "error",
18+
"@typescript-eslint/no-unused-vars": "error",
1919
"@typescript-eslint/require-await": "off",
2020
"react/react-in-jsx-scope": "off",
2121
"react/no-children-prop": "off",

‎bun.lockb‎

1.09 KB
Binary file not shown.

‎components/docs/collections/menu/menu-respect-screen-demo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33
import React from "react"
44

5-
import { buttonStyles, Menu } from "ui"
5+
import { Button, Menu } from "ui"
66

77
export default function MenuRespectScreenDemo() {
88
return (
99
<Menu respectScreen={false}>
10-
<Menu.Trigger className={buttonStyles({ appearance: "outline" })}>Open</Menu.Trigger>
10+
<Button appearance="outline">Open</Button>
1111
<Menu.Content placement="bottom" className="min-w-48">
1212
<Menu.Item>Dashboard</Menu.Item>
1313
<Menu.Item>Reports</Menu.Item>

‎components/docs/collections/menu/menu-section-demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function MenuSectionDemo() {
66
return (
77
<Menu>
88
<Menu.Trigger>Open</Menu.Trigger>
9-
<Menu.Content className="min-w-64" items={cities} placement="bottom">
9+
<Menu.Content className="sm:min-w-64" items={cities} placement="bottom">
1010
{(city) => (
1111
<Menu.Section title={city.name} items={city.landmarks}>
1212
{(landmark) => <Menu.Item textValue={landmark.name}>{landmark.name}</Menu.Item>}

‎components/docs/collections/menu/menu-section-level-selection.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
"use client"
2+
3+
import React from "react"
4+
5+
import {
6+
IconAlignmentCenter,
7+
IconAlignmentLeft,
8+
IconAlignmentRight,
9+
IconBold,
10+
IconClipboard,
11+
IconCut,
12+
IconDuplicate,
13+
IconItalic,
14+
IconUnderline
15+
} from "justd-icons"
16+
import type { Selection } from "react-aria-components"
17+
import { Menu } from "ui"
18+
19+
export default function MenuSectionLevelSelection() {
20+
const [style, setStyle] = React.useState<Selection>(new Set(["bold"]))
21+
const [align, setAlign] = React.useState<Selection>(new Set(["left"]))
22+
return (
23+
<Menu>
24+
<Menu.Trigger>Open</Menu.Trigger>
25+
<Menu.Content placement="bottom" className="sm:min-w-52">
26+
<Menu.Section title="Actions">
27+
<Menu.Item textValue="Cut">
28+
<IconCut />
29+
Cut
30+
</Menu.Item>
31+
<Menu.Item textValue="Copy">
32+
<IconDuplicate />
33+
Copy
34+
</Menu.Item>
35+
<Menu.Item textValue="Paste">
36+
<IconClipboard />
37+
Paste
38+
</Menu.Item>
39+
</Menu.Section>
40+
<Menu.Section
41+
selectionMode="multiple"
42+
selectedKeys={style}
43+
onSelectionChange={setStyle}
44+
title="Text style"
45+
>
46+
<Menu.Checkbox id="bold" textValue="Bold">
47+
<IconBold />
48+
Bold
49+
</Menu.Checkbox>
50+
<Menu.Checkbox id="italic" textValue="Italic">
51+
<IconItalic />
52+
Italic
53+
</Menu.Checkbox>
54+
<Menu.Checkbox id="underline" textValue="Underline">
55+
<IconUnderline />
56+
Underline
57+
</Menu.Checkbox>
58+
</Menu.Section>
59+
<Menu.Section
60+
selectionMode="single"
61+
selectedKeys={align}
62+
onSelectionChange={setAlign}
63+
title="Text alignment"
64+
>
65+
<Menu.Radio id="left" textValue="Left">
66+
<IconAlignmentLeft />
67+
Left
68+
</Menu.Radio>
69+
<Menu.Radio id="center" textValue="Cente">
70+
<IconAlignmentCenter />
71+
Center
72+
</Menu.Radio>
73+
<Menu.Radio id="right" textValue="Right">
74+
<IconAlignmentRight />
75+
Right
76+
</Menu.Radio>
77+
</Menu.Section>
78+
</Menu.Content>
79+
</Menu>
80+
)
81+
}

‎components/docs/collections/menu/menu-sub-demo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33
import React from "react"
44

5-
import { buttonStyles, Menu } from "ui"
5+
import { Button, Menu } from "ui"
66

77
export default function MenuSubDemo() {
88
return (
99
<Menu>
10-
<Menu.Trigger className={buttonStyles({ appearance: "outline" })}>Open</Menu.Trigger>
10+
<Button appearance="outline">Open</Button>
1111
<Menu.Content placement="bottom" className="sm:min-w-48">
1212
<Menu.Item>Dashboard</Menu.Item>
1313
<Menu.Item>Reports</Menu.Item>

‎components/docs/generated/previews.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1334,6 +1334,9 @@ export const previews: Record<string, any> = {
13341334
"collections/menu/multiple-menu-demo": {
13351335
component: React.lazy(() => import("@/components/docs/collections/menu/multiple-menu-demo")),
13361336
},
1337+
"collections/menu/menu-section-level-selection": {
1338+
component: React.lazy(() => import("@/components/docs/collections/menu/menu-section-level-selection")),
1339+
},
13371340
"collections/menu/menu-respect-screen-demo": {
13381341
component: React.lazy(() => import("@/components/docs/collections/menu/menu-respect-screen-demo")),
13391342
},

‎components/ui/menu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,13 +122,13 @@ const Item = ({ className, isDanger = false, children, ...props }: MenuItemProps
122122
const textValue = props.textValue || (typeof children === "string" ? children : undefined)
123123
return (
124124
<MenuItem
125-
textValue={textValue}
126125
className={cr(className, (className, renderProps) =>
127126
dropdownItemStyles({
128127
...renderProps,
129128
className
130129
})
131130
)}
131+
textValue={textValue}
132132
data-danger={isDanger ? "true" : undefined}
133133
{...props}
134134
>
@@ -203,7 +203,7 @@ interface SectionProps<T> extends MenuSectionProps<T> {
203203

204204
const Section = <T extends object>({ className, ...props }: SectionProps<T>) => {
205205
return (
206-
<MenuSection className={section({ className })}>
206+
<MenuSection className={section({ className })} {...props}>
207207
{"title" in props && <Header className={header()}>{props.title}</Header>}
208208
<Collection items={props.items}>{props.children}</Collection>
209209
</MenuSection>

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
"next": "^15.0.3",
3232
"next-themes": "^0.2.1",
3333
"ntcjs": "^1.1.3",
34-
"react": "19.0.0-rc-02c0e824-20241028",
34+
"react": "^19.0.0-rc-fb9a90fa48-20240614",
3535
"react-aria-components": "^1.5.0",
36-
"react-dom": "19.0.0-rc-02c0e824-20241028",
36+
"react-dom": "^19.0.0-rc-fb9a90fa48-20240614",
3737
"react-intersection-observer": "^9.13.1",
3838
"recharts": "^2.13.3",
3939
"rehype-pretty-code": "^0.13.2",
@@ -93,6 +93,6 @@
9393
"overrides": {
9494
"@types/react": "npm:[email protected]",
9595
"@types/react-dom": "npm:[email protected]",
96-
"react-is": "^19.0.0-rc-02c0e824-20241028"
96+
"react-is": "19.0.0-rc.1"
9797
}
9898
}

‎resources/content/docs/components/collections/menu.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@ Present a single list of options.
6060
Organize menu items into grouped sections.
6161
<How toUse="collections/menu/menu-section-demo" />
6262

63+
## Section-Level Selection
64+
Organize menu items into grouped sections with level selection.
65+
<How toUse="collections/menu/menu-section-level-selection" />
66+
6367
## Arrow
6468
Incorporate an arrow into the menu using the `showArrow` prop on `Menu.Content`.
6569
<How toUse="collections/menu/menu-with-arrow-demo" />

0 commit comments

Comments
 (0)