Skip to content

Commit 35720ad

Browse files
mainframevmainframev
authored
feat(react-headless-components-preview): add TeachingPopover (#36205)
1 parent da3b7a4 commit 35720ad

84 files changed

Lines changed: 2015 additions & 3 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-7c305eb6-2458-4126-b561-228475292c80.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 TeachingPopover composed on top of the headless Popover and the v9 react-teaching-popover base hooks",
4+
"packageName": "@fluentui/react-headless-components-preview",
5+
"email": "viktorgenaev@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ import * as Link from '@fluentui/react-headless-components-preview/link';
2020
import * as Menu from '@fluentui/react-headless-components-preview/menu';
2121
import * as MessageBar from '@fluentui/react-headless-components-preview/message-bar';
2222
import * as Nav from '@fluentui/react-headless-components-preview/nav';
23-
import * as ProgressBar from '@fluentui/react-headless-components-preview/progress-bar';
2423
import * as Persona from '@fluentui/react-headless-components-preview/persona';
2524
import * as Popover from '@fluentui/react-headless-components-preview/popover';
25+
import * as ProgressBar from '@fluentui/react-headless-components-preview/progress-bar';
2626
import * as Provider from '@fluentui/react-headless-components-preview/provider';
2727
import * as RadioGroup from '@fluentui/react-headless-components-preview/radio-group';
28-
import * as RatingDisplay from '@fluentui/react-headless-components-preview/rating-display';
2928
import * as Rating from '@fluentui/react-headless-components-preview/rating';
29+
import * as RatingDisplay from '@fluentui/react-headless-components-preview/rating-display';
3030
import * as SearchBox from '@fluentui/react-headless-components-preview/search-box';
3131
import * as Select from '@fluentui/react-headless-components-preview/select';
3232
import * as Skeleton from '@fluentui/react-headless-components-preview/skeleton';
@@ -37,6 +37,7 @@ import * as Switch from '@fluentui/react-headless-components-preview/switch';
3737
import * as TabList from '@fluentui/react-headless-components-preview/tab-list';
3838
import * as Tag from '@fluentui/react-headless-components-preview/tag';
3939
import * as TagGroup from '@fluentui/react-headless-components-preview/tag-group';
40+
import * as TeachingPopover from '@fluentui/react-headless-components-preview/teaching-popover';
4041
import * as Textarea from '@fluentui/react-headless-components-preview/textarea';
4142
import * as Toast from '@fluentui/react-headless-components-preview/toast';
4243
import * as ToggleButton from '@fluentui/react-headless-components-preview/toggle-button';
@@ -71,8 +72,8 @@ console.log({
7172
ProgressBar,
7273
Provider,
7374
RadioGroup,
74-
RatingDisplay,
7575
Rating,
76+
RatingDisplay,
7677
SearchBox,
7778
Select,
7879
Skeleton,
@@ -83,6 +84,7 @@ console.log({
8384
TabList,
8485
Tag,
8586
TagGroup,
87+
TeachingPopover,
8688
Textarea,
8789
Toast,
8890
ToggleButton,

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

Lines changed: 312 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,312 @@
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 { ARIAButtonType } from '@fluentui/react-aria';
8+
import type { ComponentProps } from '@fluentui/react-utilities';
9+
import type { ComponentState } from '@fluentui/react-utilities';
10+
import type { EventData } from '@fluentui/react-utilities';
11+
import type { EventHandler } from '@fluentui/react-utilities';
12+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
13+
import type { JSXElement } from '@fluentui/react-utilities';
14+
import type { PopoverContextValue as PopoverContextValue_2 } from '@fluentui/react-popover';
15+
import type { PopoverTriggerChildProps } from '@fluentui/react-popover';
16+
import { PositioningShorthand } from '@fluentui/react-positioning';
17+
import * as React_2 from 'react';
18+
import { renderTeachingPopoverBody_unstable as renderTeachingPopoverBody } from '@fluentui/react-teaching-popover';
19+
import { renderTeachingPopoverCarouselCard_unstable as renderTeachingPopoverCarouselCard } from '@fluentui/react-teaching-popover';
20+
import { renderTeachingPopoverCarouselNav_unstable as renderTeachingPopoverCarouselNav } from '@fluentui/react-teaching-popover';
21+
import { renderTeachingPopoverCarouselPageCount_unstable as renderTeachingPopoverCarouselPageCount } from '@fluentui/react-teaching-popover';
22+
import type { Slot } from '@fluentui/react-utilities';
23+
import { TeachingPopoverBodyProps } from '@fluentui/react-teaching-popover';
24+
import { TeachingPopoverBodySlots } from '@fluentui/react-teaching-popover';
25+
import { TeachingPopoverBodyState } from '@fluentui/react-teaching-popover';
26+
import { TeachingPopoverCarouselCardProps } from '@fluentui/react-teaching-popover';
27+
import { TeachingPopoverCarouselCardSlots } from '@fluentui/react-teaching-popover';
28+
import { TeachingPopoverCarouselCardState } from '@fluentui/react-teaching-popover';
29+
import { TeachingPopoverCarouselFooterButtonBaseProps as TeachingPopoverCarouselFooterButtonProps } from '@fluentui/react-teaching-popover';
30+
import { TeachingPopoverCarouselFooterButtonSlots } from '@fluentui/react-teaching-popover';
31+
import { TeachingPopoverCarouselFooterButtonBaseState as TeachingPopoverCarouselFooterButtonState } from '@fluentui/react-teaching-popover';
32+
import { TeachingPopoverCarouselNavButtonBaseProps as TeachingPopoverCarouselNavButtonProps } from '@fluentui/react-teaching-popover';
33+
import { TeachingPopoverCarouselNavButtonSlots } from '@fluentui/react-teaching-popover';
34+
import { TeachingPopoverCarouselNavButtonBaseState as TeachingPopoverCarouselNavButtonState } from '@fluentui/react-teaching-popover';
35+
import { TeachingPopoverCarouselNavBaseProps as TeachingPopoverCarouselNavProps } from '@fluentui/react-teaching-popover';
36+
import { TeachingPopoverCarouselNavSlots } from '@fluentui/react-teaching-popover';
37+
import { TeachingPopoverCarouselNavBaseState as TeachingPopoverCarouselNavState } from '@fluentui/react-teaching-popover';
38+
import { TeachingPopoverCarouselPageCountProps } from '@fluentui/react-teaching-popover';
39+
import { TeachingPopoverCarouselPageCountRenderFunction } from '@fluentui/react-teaching-popover';
40+
import { TeachingPopoverCarouselPageCountSlots } from '@fluentui/react-teaching-popover';
41+
import { TeachingPopoverCarouselPageCountState } from '@fluentui/react-teaching-popover';
42+
import { TeachingPopoverCarouselBaseProps as TeachingPopoverCarouselProps } from '@fluentui/react-teaching-popover';
43+
import { TeachingPopoverCarouselSlots } from '@fluentui/react-teaching-popover';
44+
import { TeachingPopoverCarouselBaseState as TeachingPopoverCarouselState } from '@fluentui/react-teaching-popover';
45+
import { TeachingPopoverFooterBaseProps as TeachingPopoverFooterProps } from '@fluentui/react-teaching-popover';
46+
import { TeachingPopoverFooterBaseState as TeachingPopoverFooterState } from '@fluentui/react-teaching-popover';
47+
import { TeachingPopoverHeaderBaseProps as TeachingPopoverHeaderProps } from '@fluentui/react-teaching-popover';
48+
import { TeachingPopoverHeaderSlots } from '@fluentui/react-teaching-popover';
49+
import { TeachingPopoverHeaderBaseState as TeachingPopoverHeaderState } from '@fluentui/react-teaching-popover';
50+
import { TeachingPopoverTitleBaseProps as TeachingPopoverTitleProps } from '@fluentui/react-teaching-popover';
51+
import { TeachingPopoverTitleSlots } from '@fluentui/react-teaching-popover';
52+
import { TeachingPopoverTitleBaseState as TeachingPopoverTitleState } from '@fluentui/react-teaching-popover';
53+
import type { TriggerProps } from '@fluentui/react-utilities';
54+
import { useTeachingPopoverBody_unstable as useTeachingPopoverBody } from '@fluentui/react-teaching-popover';
55+
import { useTeachingPopoverCarouselBase_unstable as useTeachingPopoverCarousel } from '@fluentui/react-teaching-popover';
56+
import { useTeachingPopoverCarouselCard_unstable as useTeachingPopoverCarouselCard } from '@fluentui/react-teaching-popover';
57+
import type { useTeachingPopoverCarouselContextValues_unstable } from '@fluentui/react-teaching-popover';
58+
import { useTeachingPopoverCarouselFooterButtonBase_unstable as useTeachingPopoverCarouselFooterButton } from '@fluentui/react-teaching-popover';
59+
import { useTeachingPopoverCarouselNavBase_unstable as useTeachingPopoverCarouselNav } from '@fluentui/react-teaching-popover';
60+
import { useTeachingPopoverCarouselNavButtonBase_unstable as useTeachingPopoverCarouselNavButton } from '@fluentui/react-teaching-popover';
61+
import { useTeachingPopoverCarouselPageCount_unstable as useTeachingPopoverCarouselPageCount } from '@fluentui/react-teaching-popover';
62+
import { useTeachingPopoverFooterBase_unstable as useTeachingPopoverFooter } from '@fluentui/react-teaching-popover';
63+
import { useTeachingPopoverHeaderBase_unstable as useTeachingPopoverHeader } from '@fluentui/react-teaching-popover';
64+
import { useTeachingPopoverTitleBase_unstable as useTeachingPopoverTitle } from '@fluentui/react-teaching-popover';
65+
66+
// @public
67+
export type NavButtonRenderFunction = TeachingPopoverCarouselNavState['renderNavButton'];
68+
69+
// @public
70+
export const renderTeachingPopover: (state: TeachingPopoverState, contextValues: TeachingPopoverContextValues) => React_2.ReactElement;
71+
72+
export { renderTeachingPopoverBody }
73+
74+
// @public (undocumented)
75+
export const renderTeachingPopoverCarousel: (state: TeachingPopoverCarouselState, contextValues: TeachingPopoverCarouselContextValues) => JSXElement;
76+
77+
export { renderTeachingPopoverCarouselCard }
78+
79+
// @public (undocumented)
80+
export const renderTeachingPopoverCarouselFooter: (state: TeachingPopoverCarouselFooterState) => JSXElement;
81+
82+
// @public (undocumented)
83+
export const renderTeachingPopoverCarouselFooterButton: (state: TeachingPopoverCarouselFooterButtonState) => JSXElement;
84+
85+
export { renderTeachingPopoverCarouselNav }
86+
87+
// @public (undocumented)
88+
export const renderTeachingPopoverCarouselNavButton: (state: TeachingPopoverCarouselNavButtonState) => JSXElement;
89+
90+
export { renderTeachingPopoverCarouselPageCount }
91+
92+
// @public
93+
export const renderTeachingPopoverFooter: (state: TeachingPopoverFooterState) => JSXElement;
94+
95+
// @public (undocumented)
96+
export const renderTeachingPopoverHeader: (state: TeachingPopoverHeaderState) => JSXElement;
97+
98+
// @public (undocumented)
99+
export const renderTeachingPopoverSurface: (state: TeachingPopoverSurfaceState) => JSXElement;
100+
101+
// @public (undocumented)
102+
export const renderTeachingPopoverTitle: (state: TeachingPopoverTitleState) => JSXElement;
103+
104+
// @public
105+
export const renderTeachingPopoverTrigger: (state: TeachingPopoverTriggerState) => JSXElement | null;
106+
107+
// @public
108+
export const TeachingPopover: {
109+
(props: TeachingPopoverProps): JSXElement;
110+
displayName: string;
111+
};
112+
113+
// @public
114+
export type TeachingPopoverBaseBridgedContextValue = Pick<PopoverContextValue_2, 'open' | 'setOpen' | 'toggleOpen' | 'triggerRef' | 'contentRef' | 'arrowRef' | 'openOnHover' | 'openOnContext' | 'withArrow'>;
115+
116+
// @public (undocumented)
117+
export const TeachingPopoverBody: ForwardRefComponent<TeachingPopoverBodyProps>;
118+
119+
export { TeachingPopoverBodyProps }
120+
121+
export { TeachingPopoverBodySlots }
122+
123+
export { TeachingPopoverBodyState }
124+
125+
// @public (undocumented)
126+
export const TeachingPopoverCarousel: ForwardRefComponent<TeachingPopoverCarouselProps>;
127+
128+
// @public (undocumented)
129+
export const TeachingPopoverCarouselCard: ForwardRefComponent<TeachingPopoverCarouselCardProps>;
130+
131+
export { TeachingPopoverCarouselCardProps }
132+
133+
export { TeachingPopoverCarouselCardSlots }
134+
135+
export { TeachingPopoverCarouselCardState }
136+
137+
// @public
138+
export type TeachingPopoverCarouselContextValues = ReturnType<typeof useTeachingPopoverCarouselContextValues_unstable>;
139+
140+
// @public (undocumented)
141+
export const TeachingPopoverCarouselFooter: ForwardRefComponent<TeachingPopoverCarouselFooterProps>;
142+
143+
// @public (undocumented)
144+
export const TeachingPopoverCarouselFooterButton: ForwardRefComponent<TeachingPopoverCarouselFooterButtonProps>;
145+
146+
export { TeachingPopoverCarouselFooterButtonProps }
147+
148+
export { TeachingPopoverCarouselFooterButtonSlots }
149+
150+
export { TeachingPopoverCarouselFooterButtonState }
151+
152+
// @public (undocumented)
153+
export type TeachingPopoverCarouselFooterProps = ComponentProps<TeachingPopoverCarouselFooterSlots>;
154+
155+
// @public (undocumented)
156+
export type TeachingPopoverCarouselFooterSlots = {
157+
root: NonNullable<Slot<'div'>>;
158+
previous?: Slot<TeachingPopoverCarouselFooterButtonProps>;
159+
next: NonNullable<Slot<TeachingPopoverCarouselFooterButtonProps>>;
160+
};
161+
162+
// @public (undocumented)
163+
export type TeachingPopoverCarouselFooterState = ComponentState<TeachingPopoverCarouselFooterSlots>;
164+
165+
// @public (undocumented)
166+
export const TeachingPopoverCarouselNav: ForwardRefComponent<TeachingPopoverCarouselNavProps>;
167+
168+
// @public (undocumented)
169+
export const TeachingPopoverCarouselNavButton: ForwardRefComponent<TeachingPopoverCarouselNavButtonProps>;
170+
171+
export { TeachingPopoverCarouselNavButtonProps }
172+
173+
export { TeachingPopoverCarouselNavButtonSlots }
174+
175+
export { TeachingPopoverCarouselNavButtonState }
176+
177+
export { TeachingPopoverCarouselNavProps }
178+
179+
export { TeachingPopoverCarouselNavSlots }
180+
181+
export { TeachingPopoverCarouselNavState }
182+
183+
// @public (undocumented)
184+
export const TeachingPopoverCarouselPageCount: ForwardRefComponent<TeachingPopoverCarouselPageCountProps>;
185+
186+
export { TeachingPopoverCarouselPageCountProps }
187+
188+
export { TeachingPopoverCarouselPageCountRenderFunction }
189+
190+
export { TeachingPopoverCarouselPageCountSlots }
191+
192+
export { TeachingPopoverCarouselPageCountState }
193+
194+
export { TeachingPopoverCarouselProps }
195+
196+
export { TeachingPopoverCarouselSlots }
197+
198+
export { TeachingPopoverCarouselState }
199+
200+
// @public (undocumented)
201+
export type TeachingPopoverContextValues = {
202+
popover: PopoverContextValue;
203+
basePopover: TeachingPopoverBaseBridgedContextValue;
204+
};
205+
206+
// @public (undocumented)
207+
export const TeachingPopoverFooter: ForwardRefComponent<TeachingPopoverFooterProps>;
208+
209+
export { TeachingPopoverFooterProps }
210+
211+
export { TeachingPopoverFooterState }
212+
213+
// @public (undocumented)
214+
export const TeachingPopoverHeader: ForwardRefComponent<TeachingPopoverHeaderProps>;
215+
216+
export { TeachingPopoverHeaderProps }
217+
218+
export { TeachingPopoverHeaderSlots }
219+
220+
export { TeachingPopoverHeaderState }
221+
222+
// @public
223+
export type TeachingPopoverProps = PopoverProps;
224+
225+
// @public
226+
export type TeachingPopoverState = PopoverState;
227+
228+
// @public
229+
export const TeachingPopoverSurface: ForwardRefComponent<TeachingPopoverSurfaceProps>;
230+
231+
// @public (undocumented)
232+
export type TeachingPopoverSurfaceProps = ComponentProps<TeachingPopoverSurfaceSlots>;
233+
234+
// @public
235+
export type TeachingPopoverSurfaceSlots = {
236+
root: Slot<'dialog'>;
237+
};
238+
239+
// @public (undocumented)
240+
export type TeachingPopoverSurfaceState = ComponentState<TeachingPopoverSurfaceSlots> & {
241+
withArrow: boolean | undefined;
242+
arrowRef: React_2.RefObject<HTMLDivElement | null>;
243+
'data-open': string;
244+
};
245+
246+
// @public (undocumented)
247+
export const TeachingPopoverTitle: ForwardRefComponent<TeachingPopoverTitleProps>;
248+
249+
export { TeachingPopoverTitleProps }
250+
251+
export { TeachingPopoverTitleSlots }
252+
253+
export { TeachingPopoverTitleState }
254+
255+
// @public
256+
export const TeachingPopoverTrigger: React_2.FC<TeachingPopoverTriggerProps>;
257+
258+
// @public
259+
export type TeachingPopoverTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType> = PopoverTriggerChildProps<Type, HeadlessPopoverTriggerChildExtras>;
260+
261+
// @public
262+
export type TeachingPopoverTriggerProps = Omit<TriggerProps<TeachingPopoverTriggerChildProps>, 'children'> & {
263+
children: React_2.ReactElement;
264+
disableButtonEnhancement?: boolean;
265+
};
266+
267+
// @public
268+
export type TeachingPopoverTriggerState = {
269+
children: React_2.ReactElement | null;
270+
};
271+
272+
// @public
273+
export const useTeachingPopover: (props: TeachingPopoverProps) => TeachingPopoverState;
274+
275+
export { useTeachingPopoverBody }
276+
277+
export { useTeachingPopoverCarousel }
278+
279+
export { useTeachingPopoverCarouselCard }
280+
281+
// @public (undocumented)
282+
export const useTeachingPopoverCarouselContextValues: (state: TeachingPopoverCarouselState) => TeachingPopoverCarouselContextValues;
283+
284+
// @public (undocumented)
285+
export const useTeachingPopoverCarouselFooter: (props: TeachingPopoverCarouselFooterProps, ref: React_2.Ref<HTMLDivElement>) => TeachingPopoverCarouselFooterState;
286+
287+
export { useTeachingPopoverCarouselFooterButton }
288+
289+
export { useTeachingPopoverCarouselNav }
290+
291+
export { useTeachingPopoverCarouselNavButton }
292+
293+
export { useTeachingPopoverCarouselPageCount }
294+
295+
// @public
296+
export const useTeachingPopoverContextValues: (state: TeachingPopoverState) => TeachingPopoverContextValues;
297+
298+
export { useTeachingPopoverFooter }
299+
300+
export { useTeachingPopoverHeader }
301+
302+
// @public
303+
export const useTeachingPopoverSurface: (props: TeachingPopoverSurfaceProps, ref: React_2.Ref<HTMLDialogElement>) => TeachingPopoverSurfaceState;
304+
305+
export { useTeachingPopoverTitle }
306+
307+
// @public
308+
export const useTeachingPopoverTrigger: (props: TeachingPopoverTriggerProps) => TeachingPopoverTriggerState;
309+
310+
// (No @packageDocumentation comment for this package)
311+
312+
```

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"@fluentui/react-link": "^9.8.2",
3939
"@fluentui/react-menu": "^9.25.0",
4040
"@fluentui/react-message-bar": "^9.7.1",
41+
"@fluentui/react-teaching-popover": "^9.7.0",
4142
"@fluentui/react-nav": "^9.4.0",
4243
"@fluentui/react-persona": "^9.7.4",
4344
"@fluentui/react-popover": "^9.14.3",
@@ -312,6 +313,12 @@
312313
"import": "./lib/tag-group.js",
313314
"require": "./lib-commonjs/tag-group.js"
314315
},
316+
"./teaching-popover": {
317+
"types": "./dist/teaching-popover.d.ts",
318+
"node": "./lib-commonjs/teaching-popover.js",
319+
"import": "./lib/teaching-popover.js",
320+
"require": "./lib-commonjs/teaching-popover.js"
321+
},
315322
"./textarea": {
316323
"types": "./dist/textarea.d.ts",
317324
"node": "./lib-commonjs/textarea.js",

0 commit comments

Comments
 (0)