Skip to content

Commit 9204ee1

Browse files
mainframevmainframev
authored
feat(react-headless-components-preview): add Menu component and stories (#36110)
1 parent c16cd87 commit 9204ee1

86 files changed

Lines changed: 2690 additions & 0 deletions

File tree

Some content is hidden

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

‎change/@fluentui-react-headless-components-preview-5c4d2415-cfb7-4844-9000-af6191e50595.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "feat: add headless Menu components",
4+
"packageName": "@fluentui/react-headless-components-preview",
5+
"email": "vgenaev@gmail.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@fluentui-react-menu-e062f3cc-fd7f-4c5a-95d5-f9c2cfa02933.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "feat: add headless Menu components",
4+
"packageName": "@fluentui/react-menu",
5+
"email": "vgenaev@gmail.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import * as Image from '@fluentui/react-headless-components-preview/image';
1515
import * as Input from '@fluentui/react-headless-components-preview/input';
1616
import * as Label from '@fluentui/react-headless-components-preview/label';
1717
import * as Link from '@fluentui/react-headless-components-preview/link';
18+
import * as Menu from '@fluentui/react-headless-components-preview/menu';
1819
import * as MessageBar from '@fluentui/react-headless-components-preview/message-bar';
1920
import * as ProgressBar from '@fluentui/react-headless-components-preview/progress-bar';
2021
import * as Persona from '@fluentui/react-headless-components-preview/persona';
@@ -54,6 +55,7 @@ console.log({
5455
Input,
5556
Label,
5657
Link,
58+
Menu,
5759
MessageBar,
5860
Persona,
5961
Popover,

‎packages/react-components/react-headless-components-preview/library/etc/menu.api.md‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
## API Report File for "@fluentui/react-headless-components-preview"
2+
3+
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4+
5+
```ts
6+
7+
import type { ARIAButtonElement } from '@fluentui/react-aria';
8+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
9+
import type { JSXElement } from '@fluentui/react-utilities';
10+
import { MenuContextValue } from '@fluentui/react-menu';
11+
import { MenuDividerProps } from '@fluentui/react-menu';
12+
import { MenuDividerSlots } from '@fluentui/react-menu';
13+
import { MenuDividerState } from '@fluentui/react-menu';
14+
import { MenuGroupContextValues } from '@fluentui/react-menu';
15+
import { MenuGroupHeaderProps } from '@fluentui/react-menu';
16+
import { MenuGroupHeaderSlots } from '@fluentui/react-menu';
17+
import { MenuGroupHeaderState } from '@fluentui/react-menu';
18+
import { MenuGroupProps } from '@fluentui/react-menu';
19+
import { MenuGroupSlots } from '@fluentui/react-menu';
20+
import { MenuGroupState } from '@fluentui/react-menu';
21+
import { MenuItemCheckboxProps } from '@fluentui/react-menu';
22+
import { MenuItemCheckboxState } from '@fluentui/react-menu';
23+
import { MenuItemLinkProps } from '@fluentui/react-menu';
24+
import { MenuItemLinkSlots } from '@fluentui/react-menu';
25+
import { MenuItemLinkState } from '@fluentui/react-menu';
26+
import type { MenuItemProps as MenuItemProps_2 } from '@fluentui/react-menu';
27+
import { MenuItemRadioBaseProps as MenuItemRadioProps } from '@fluentui/react-menu';
28+
import { MenuItemRadioBaseState as MenuItemRadioState } from '@fluentui/react-menu';
29+
import { MenuItemSlots } from '@fluentui/react-menu';
30+
import type { MenuItemState as MenuItemState_2 } from '@fluentui/react-menu';
31+
import { MenuItemSwitchProps } from '@fluentui/react-menu';
32+
import { MenuItemSwitchSlots } from '@fluentui/react-menu';
33+
import { MenuItemSwitchState } from '@fluentui/react-menu';
34+
import type { MenuListContextValues } from '@fluentui/react-menu';
35+
import type { MenuListProps as MenuListProps_2 } from '@fluentui/react-menu';
36+
import type { MenuListSlots } from '@fluentui/react-menu';
37+
import type { MenuListState as MenuListState_2 } from '@fluentui/react-menu';
38+
import { MenuOpenChangeData } from '@fluentui/react-menu';
39+
import { MenuOpenEvent } from '@fluentui/react-menu';
40+
import { MenuPopoverProps } from '@fluentui/react-menu';
41+
import { MenuPopoverSlots } from '@fluentui/react-menu';
42+
import { MenuPopoverState } from '@fluentui/react-menu';
43+
import { MenuBaseProps as MenuProps } from '@fluentui/react-menu';
44+
import { MenuSplitGroupProps } from '@fluentui/react-menu';
45+
import { MenuSplitGroupSlots } from '@fluentui/react-menu';
46+
import { MenuSplitGroupState } from '@fluentui/react-menu';
47+
import { MenuBaseState as MenuState } from '@fluentui/react-menu';
48+
import { MenuTriggerChildProps } from '@fluentui/react-menu';
49+
import { MenuTriggerProps } from '@fluentui/react-menu';
50+
import { MenuTriggerState } from '@fluentui/react-menu';
51+
import * as React_2 from 'react';
52+
import { renderMenuDivider_unstable as renderMenuDivider } from '@fluentui/react-menu';
53+
import { renderMenuGroup_unstable as renderMenuGroup } from '@fluentui/react-menu';
54+
import { renderMenuGroupHeader_unstable as renderMenuGroupHeader } from '@fluentui/react-menu';
55+
import { renderMenuItem_unstable as renderMenuItem } from '@fluentui/react-menu';
56+
import { renderMenuItemCheckbox_unstable as renderMenuItemCheckbox } from '@fluentui/react-menu';
57+
import { renderMenuItemLink_unstable as renderMenuItemLink } from '@fluentui/react-menu';
58+
import { renderMenuItemRadio_unstable as renderMenuItemRadio } from '@fluentui/react-menu';
59+
import { renderMenuItemSwitch_unstable as renderMenuItemSwitch } from '@fluentui/react-menu';
60+
import { renderMenuSplitGroup_unstable as renderMenuSplitGroup } from '@fluentui/react-menu';
61+
import { renderMenuTrigger_unstable as renderMenuTrigger } from '@fluentui/react-menu';
62+
import { useMenuContext_unstable as useMenuContext } from '@fluentui/react-menu';
63+
import { useMenuContextValues_unstable as useMenuContextValues } from '@fluentui/react-menu';
64+
import { useMenuDivider_unstable as useMenuDivider } from '@fluentui/react-menu';
65+
import { useMenuGroup_unstable as useMenuGroup } from '@fluentui/react-menu';
66+
import { useMenuGroupContextValues_unstable as useMenuGroupContextValues } from '@fluentui/react-menu';
67+
import { useMenuGroupHeader_unstable as useMenuGroupHeader } from '@fluentui/react-menu';
68+
import { useMenuItemCheckboxBase_unstable as useMenuItemCheckbox } from '@fluentui/react-menu';
69+
import { useMenuItemLinkBase_unstable as useMenuItemLink } from '@fluentui/react-menu';
70+
import { useMenuItemRadioBase_unstable as useMenuItemRadio } from '@fluentui/react-menu';
71+
import { useMenuItemSwitchBase_unstable as useMenuItemSwitch } from '@fluentui/react-menu';
72+
73+
// @public
74+
export const Menu: React_2.FC<MenuProps>;
75+
76+
export { MenuContextValue }
77+
78+
// @public (undocumented)
79+
export type MenuContextValues = {
80+
menu: MenuContextValue;
81+
};
82+
83+
// @public
84+
export const MenuDivider: ForwardRefComponent<MenuDividerProps>;
85+
86+
export { MenuDividerProps }
87+
88+
export { MenuDividerSlots }
89+
90+
export { MenuDividerState }
91+
92+
// @public
93+
export const MenuGroup: ForwardRefComponent<MenuGroupProps>;
94+
95+
export { MenuGroupContextValues }
96+
97+
// @public
98+
export const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;
99+
100+
export { MenuGroupHeaderProps }
101+
102+
export { MenuGroupHeaderSlots }
103+
104+
export { MenuGroupHeaderState }
105+
106+
export { MenuGroupProps }
107+
108+
export { MenuGroupSlots }
109+
110+
export { MenuGroupState }
111+
112+
// @public
113+
export const MenuItem: ForwardRefComponent<MenuItemProps>;
114+
115+
// @public
116+
export const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;
117+
118+
export { MenuItemCheckboxProps }
119+
120+
export { MenuItemCheckboxState }
121+
122+
// @public
123+
export const MenuItemLink: ForwardRefComponent<MenuItemLinkProps>;
124+
125+
export { MenuItemLinkProps }
126+
127+
export { MenuItemLinkSlots }
128+
129+
export { MenuItemLinkState }
130+
131+
// @public (undocumented)
132+
export type MenuItemProps = MenuItemProps_2;
133+
134+
// @public
135+
export const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
136+
137+
export { MenuItemRadioProps }
138+
139+
export { MenuItemRadioState }
140+
141+
export { MenuItemSlots }
142+
143+
// @public (undocumented)
144+
export type MenuItemState = MenuItemState_2 & {
145+
root: {
146+
focusgroupstart?: string;
147+
};
148+
};
149+
150+
// @public
151+
export const MenuItemSwitch: ForwardRefComponent<MenuItemSwitchProps>;
152+
153+
export { MenuItemSwitchProps }
154+
155+
export { MenuItemSwitchSlots }
156+
157+
export { MenuItemSwitchState }
158+
159+
// @public
160+
export const MenuList: ForwardRefComponent<MenuListProps>;
161+
162+
// @public (undocumented)
163+
export type MenuListProps = MenuListProps_2;
164+
165+
export { MenuListSlots }
166+
167+
// @public (undocumented)
168+
export type MenuListState = MenuListState_2 & {
169+
root: {
170+
focusgroup?: string;
171+
};
172+
};
173+
174+
export { MenuOpenChangeData }
175+
176+
export { MenuOpenEvent }
177+
178+
// @public (undocumented)
179+
export const MenuPopover: ForwardRefComponent<MenuPopoverProps>;
180+
181+
export { MenuPopoverProps }
182+
183+
export { MenuPopoverSlots }
184+
185+
export { MenuPopoverState }
186+
187+
export { MenuProps }
188+
189+
// @public (undocumented)
190+
export const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
191+
192+
export { MenuSplitGroupProps }
193+
194+
export { MenuSplitGroupSlots }
195+
196+
export { MenuSplitGroupState }
197+
198+
export { MenuState }
199+
200+
// @public
201+
export const MenuTrigger: React_2.FC<MenuTriggerProps>;
202+
203+
export { MenuTriggerChildProps }
204+
205+
export { MenuTriggerProps }
206+
207+
export { MenuTriggerState }
208+
209+
// @public (undocumented)
210+
export const renderMenu: (state: MenuState, contextValues: MenuContextValues) => JSXElement;
211+
212+
export { renderMenuDivider }
213+
214+
export { renderMenuGroup }
215+
216+
export { renderMenuGroupHeader }
217+
218+
export { renderMenuItem }
219+
220+
export { renderMenuItemCheckbox }
221+
222+
export { renderMenuItemLink }
223+
224+
export { renderMenuItemRadio }
225+
226+
export { renderMenuItemSwitch }
227+
228+
// @public (undocumented)
229+
export const renderMenuList: (state: MenuListState_2, contextValues: MenuListContextValues) => JSXElement;
230+
231+
// @public (undocumented)
232+
export const renderMenuPopover: (state: MenuPopoverState) => JSXElement;
233+
234+
export { renderMenuSplitGroup }
235+
236+
export { renderMenuTrigger }
237+
238+
// @public (undocumented)
239+
export const useMenu: (props: MenuProps) => MenuState;
240+
241+
export { useMenuContext }
242+
243+
export { useMenuContextValues }
244+
245+
export { useMenuDivider }
246+
247+
export { useMenuGroup }
248+
249+
export { useMenuGroupContextValues }
250+
251+
export { useMenuGroupHeader }
252+
253+
// @public
254+
export const useMenuItem: (props: MenuItemProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemState;
255+
256+
export { useMenuItemCheckbox }
257+
258+
export { useMenuItemLink }
259+
260+
export { useMenuItemRadio }
261+
262+
export { useMenuItemSwitch }
263+
264+
// @public
265+
export const useMenuList: (props: MenuListProps, ref: React_2.Ref<HTMLElement>) => MenuListState;
266+
267+
// @public (undocumented)
268+
export const useMenuPopover: (props: MenuPopoverProps, ref: React_2.Ref<HTMLElement>) => MenuPopoverState;
269+
270+
// @public
271+
export const useMenuSplitGroup: (props: MenuSplitGroupProps, ref: React_2.Ref<HTMLElement>) => MenuSplitGroupState;
272+
273+
// @public (undocumented)
274+
export const useMenuTrigger: (props: MenuTriggerProps) => MenuTriggerState;
275+
276+
// (No @packageDocumentation comment for this package)
277+
278+
```

‎packages/react-components/react-headless-components-preview/library/package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@fluentui/react-input": "^9.8.2",
3737
"@fluentui/react-label": "^9.4.1",
3838
"@fluentui/react-link": "^9.8.1",
39+
"@fluentui/react-menu": "^9.24.1",
3940
"@fluentui/react-message-bar": "^9.7.0",
4041
"@fluentui/react-persona": "^9.7.3",
4142
"@fluentui/react-popover": "^9.14.2",
@@ -172,6 +173,12 @@
172173
"import": "./lib/link.js",
173174
"require": "./lib-commonjs/link.js"
174175
},
176+
"./menu": {
177+
"types": "./dist/menu.d.ts",
178+
"node": "./lib-commonjs/menu.js",
179+
"import": "./lib/menu.js",
180+
"require": "./lib-commonjs/menu.js"
181+
},
175182
"./message-bar": {
176183
"types": "./dist/message-bar.d.ts",
177184
"node": "./lib-commonjs/message-bar.js",

0 commit comments

Comments
 (0)