Skip to content

Commit 01cde59

Browse files
dmytrokirpadmytrokirpa
committed
add react-utilities export and fix lint issues for stories
1 parent 17976e4 commit 01cde59

7 files changed

Lines changed: 230 additions & 6 deletions

File tree

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

Lines changed: 152 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,65 @@ import type { AccordionPanelBaseProps } from '@fluentui/react-accordion';
2020
import type { AccordionPanelBaseState } from '@fluentui/react-accordion';
2121
import type { AccordionPanelSlots as AccordionPanelSlots_2 } from '@fluentui/react-accordion';
2222
import type { AccordionSlots as AccordionSlots_2 } from '@fluentui/react-accordion';
23+
import { AnnounceContextValue } from '@fluentui/react-shared-contexts';
24+
import { AnnounceProvider } from '@fluentui/react-shared-contexts';
25+
import { assertSlots } from '@fluentui/react-utilities';
2326
import type { ButtonBaseProps } from '@fluentui/react-button';
2427
import { ButtonBaseState } from '@fluentui/react-button';
2528
import type { ButtonSlots as ButtonSlots_2 } from '@fluentui/react-button';
29+
import { ComponentProps } from '@fluentui/react-utilities';
30+
import { ComponentState } from '@fluentui/react-utilities';
2631
import { ContextSelector } from '@fluentui/react-context-selector';
2732
import type { DividerBaseProps } from '@fluentui/react-divider';
2833
import { DividerBaseState } from '@fluentui/react-divider';
2934
import type { DividerSlots as DividerSlots_2 } from '@fluentui/react-divider';
30-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
35+
import { ForwardRefComponent } from '@fluentui/react-utilities';
36+
import { getIntrinsicElementProps } from '@fluentui/react-utilities';
37+
import { getNativeElementProps } from '@fluentui/react-utilities';
38+
import { getPartitionedNativeProps } from '@fluentui/react-utilities';
39+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
40+
import { getSlots } from '@fluentui/react-utilities';
41+
import { IdPrefixProvider } from '@fluentui/react-utilities';
42+
import { isHTMLElement } from '@fluentui/react-utilities';
3143
import { JSXElement } from '@fluentui/react-utilities';
44+
import { JSXIntrinsicElement } from '@fluentui/react-utilities';
45+
import { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
46+
import { mergeCallbacks } from '@fluentui/react-utilities';
47+
import { OnSelectionChangeCallback } from '@fluentui/react-utilities';
48+
import { OnSelectionChangeData } from '@fluentui/react-utilities';
49+
import { PortalMountNodeProvider } from '@fluentui/react-shared-contexts';
3250
import type * as React_2 from 'react';
51+
import { resetIdsForTests } from '@fluentui/react-utilities';
52+
import { resolveShorthand } from '@fluentui/react-utilities';
53+
import { ResolveShorthandFunction } from '@fluentui/react-utilities';
54+
import { ResolveShorthandOptions } from '@fluentui/react-utilities';
55+
import { SelectionHookParams } from '@fluentui/react-utilities';
56+
import { SelectionItemId } from '@fluentui/react-utilities';
57+
import { SelectionMethods } from '@fluentui/react-utilities';
58+
import { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
59+
import { Slot } from '@fluentui/react-utilities';
60+
import { slot } from '@fluentui/react-utilities';
61+
import { SlotClassNames } from '@fluentui/react-utilities';
62+
import { SlotComponentType } from '@fluentui/react-utilities';
63+
import { SlotOptions } from '@fluentui/react-utilities';
64+
import { SlotPropsRecord } from '@fluentui/react-utilities';
65+
import { SlotRenderFunction } from '@fluentui/react-utilities';
66+
import { SSRProvider } from '@fluentui/react-utilities';
67+
import { useAnimationFrame } from '@fluentui/react-utilities';
68+
import { useAnnounce } from '@fluentui/react-shared-contexts';
69+
import { useApplyScrollbarWidth } from '@fluentui/react-utilities';
70+
import { useEventCallback } from '@fluentui/react-utilities';
71+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
72+
import { useId } from '@fluentui/react-utilities';
73+
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
74+
import { useIsSSR } from '@fluentui/react-utilities';
75+
import { useMergedRefs } from '@fluentui/react-utilities';
76+
import { usePortalMountNode } from '@fluentui/react-shared-contexts';
77+
import { useScrollbarWidth } from '@fluentui/react-utilities';
78+
import { useSelection } from '@fluentui/react-utilities';
79+
import { useThemeClassName_unstable as useThemeClassName } from '@fluentui/react-shared-contexts';
80+
import { useTimeout } from '@fluentui/react-utilities';
81+
import { useTooltipVisibility_unstable as useTooltipVisibility } from '@fluentui/react-shared-contexts';
3382

3483
// @public
3584
export const Accordion: ForwardRefComponent<AccordionProps>;
@@ -82,6 +131,12 @@ export type AccordionSlots = AccordionSlots_2;
82131
// @public (undocumented)
83132
export type AccordionState = AccordionBaseState;
84133

134+
export { AnnounceContextValue }
135+
136+
export { AnnounceProvider }
137+
138+
export { assertSlots }
139+
85140
// @public
86141
export const Button: ForwardRefComponent<ButtonProps>;
87142

@@ -94,6 +149,10 @@ export type ButtonSlots = ButtonSlots_2;
94149
// @public
95150
export type ButtonState = ButtonBaseState;
96151

152+
export { ComponentProps }
153+
154+
export { ComponentState }
155+
97156
// @public
98157
export const Divider: ForwardRefComponent<DividerProps>;
99158

@@ -106,6 +165,36 @@ export type DividerSlots = DividerSlots_2;
106165
// @public (undocumented)
107166
export type DividerState = DividerBaseState;
108167

168+
export { ForwardRefComponent }
169+
170+
export { getIntrinsicElementProps }
171+
172+
export { getNativeElementProps }
173+
174+
export { getPartitionedNativeProps }
175+
176+
export { getSlotClassNameProp_unstable }
177+
178+
export { getSlots }
179+
180+
export { IdPrefixProvider }
181+
182+
export { isHTMLElement }
183+
184+
export { JSXElement }
185+
186+
export { JSXIntrinsicElement }
187+
188+
export { JSXIntrinsicElementKeys }
189+
190+
export { mergeCallbacks }
191+
192+
export { OnSelectionChangeCallback }
193+
194+
export { OnSelectionChangeData }
195+
196+
export { PortalMountNodeProvider }
197+
109198
// @public
110199
export const renderAccordion: (state: AccordionBaseState, contextValues: AccordionContextValues_2) => JSXElement;
111200

@@ -124,6 +213,38 @@ export const renderButton: (state: ButtonBaseState) => JSXElement;
124213
// @public
125214
export const renderDivider: (state: DividerBaseState) => JSXElement;
126215

216+
export { resetIdsForTests }
217+
218+
export { resolveShorthand }
219+
220+
export { ResolveShorthandFunction }
221+
222+
export { ResolveShorthandOptions }
223+
224+
export { SelectionHookParams }
225+
226+
export { SelectionItemId }
227+
228+
export { SelectionMethods }
229+
230+
export { SelectionMode_2 as SelectionMode }
231+
232+
export { Slot }
233+
234+
export { slot }
235+
236+
export { SlotClassNames }
237+
238+
export { SlotComponentType }
239+
240+
export { SlotOptions }
241+
242+
export { SlotPropsRecord }
243+
244+
export { SlotRenderFunction }
245+
246+
export { SSRProvider }
247+
127248
// @public
128249
export const useAccordion: (props: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
129250

@@ -142,12 +263,42 @@ export const useAccordionItem: (props: AccordionItemProps, ref: React_2.Ref<HTML
142263
// @public
143264
export const useAccordionPanel: (props: AccordionPanelProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelState;
144265

266+
export { useAnimationFrame }
267+
268+
export { useAnnounce }
269+
270+
export { useApplyScrollbarWidth }
271+
145272
// @public
146273
export const useButton: (props: ButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
147274

148275
// @public
149276
export const useDivider: (props: DividerProps, ref: React_2.Ref<HTMLElement>) => DividerState;
150277

278+
export { useEventCallback }
279+
280+
export { useFluent }
281+
282+
export { useId }
283+
284+
export { useIsomorphicLayoutEffect }
285+
286+
export { useIsSSR }
287+
288+
export { useMergedRefs }
289+
290+
export { usePortalMountNode }
291+
292+
export { useScrollbarWidth }
293+
294+
export { useSelection }
295+
296+
export { useThemeClassName }
297+
298+
export { useTimeout }
299+
300+
export { useTooltipVisibility }
301+
151302
// (No @packageDocumentation comment for this package)
152303

153304
```

‎packages/react-components/react-headless-components-preview/library/src/index.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,71 @@
1+
export {
2+
AnnounceProvider,
3+
PortalMountNodeProvider,
4+
useAnnounce,
5+
useFluent_unstable as useFluent,
6+
usePortalMountNode,
7+
useTooltipVisibility_unstable as useTooltipVisibility,
8+
useThemeClassName_unstable as useThemeClassName,
9+
} from '@fluentui/react-shared-contexts';
10+
export type { AnnounceContextValue } from '@fluentui/react-shared-contexts';
11+
export {
12+
// getNativeElementProps is deprecated but removing it would be a breaking change
13+
// eslint-disable-next-line @typescript-eslint/no-deprecated
14+
getNativeElementProps,
15+
getIntrinsicElementProps,
16+
getPartitionedNativeProps,
17+
getSlotClassNameProp_unstable,
18+
// getSlots is deprecated but removing it would be a breaking change
19+
// eslint-disable-next-line @typescript-eslint/no-deprecated
20+
getSlots,
21+
slot,
22+
assertSlots,
23+
IdPrefixProvider,
24+
resetIdsForTests,
25+
// resolveShorthand is deprecated but removing it would be a breaking change
26+
// eslint-disable-next-line @typescript-eslint/no-deprecated
27+
resolveShorthand,
28+
SSRProvider,
29+
useAnimationFrame,
30+
useId,
31+
useIsomorphicLayoutEffect,
32+
useEventCallback,
33+
mergeCallbacks,
34+
useIsSSR,
35+
useMergedRefs,
36+
useApplyScrollbarWidth,
37+
useScrollbarWidth,
38+
useSelection,
39+
useTimeout,
40+
isHTMLElement,
41+
} from '@fluentui/react-utilities';
42+
export type {
43+
ComponentProps,
44+
ComponentState,
45+
ForwardRefComponent,
46+
JSXElement,
47+
JSXIntrinsicElement,
48+
JSXIntrinsicElementKeys,
49+
// ResolveShorthandFunction is deprecated but removing it would be a breaking change
50+
// eslint-disable-next-line @typescript-eslint/no-deprecated
51+
ResolveShorthandFunction,
52+
// ResolveShorthandOptions is deprecated but removing it would be a breaking change
53+
// eslint-disable-next-line @typescript-eslint/no-deprecated
54+
ResolveShorthandOptions,
55+
Slot,
56+
SlotOptions,
57+
SlotComponentType,
58+
SlotClassNames,
59+
SlotPropsRecord,
60+
SlotRenderFunction,
61+
OnSelectionChangeCallback,
62+
OnSelectionChangeData,
63+
SelectionHookParams,
64+
SelectionItemId,
65+
SelectionMethods,
66+
SelectionMode,
67+
} from '@fluentui/react-utilities';
68+
169
export {
270
Accordion,
371
renderAccordion,

‎packages/react-components/react-headless-components-preview/stories/src/Accordion/AccordionCollapsible.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import type { JSXElement } from '@fluentui/react-headless-components-preview';
23
import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from '@fluentui/react-headless-components-preview';
34
import { ChevronRightRegular } from '@fluentui/react-icons';
45

@@ -8,7 +9,7 @@ const items = [
89
{ value: 'item-3', header: 'Accordion Header 3', panel: 'Accordion Panel 3' },
910
];
1011

11-
export const Collapsible = () => (
12+
export const Collapsible = (): JSXElement => (
1213
<Accordion
1314
className="flex w-full max-w-96 flex-col justify-center text-gray-900 border border-gray-200 rounded-md"
1415
collapsible

‎packages/react-components/react-headless-components-preview/stories/src/Accordion/AccordionDefault.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import type { JSXElement } from '@fluentui/react-headless-components-preview';
23
import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from '@fluentui/react-headless-components-preview';
34
import { ChevronRightRegular } from '@fluentui/react-icons';
45

@@ -8,7 +9,7 @@ const items = [
89
{ value: 'item-3', header: 'Accordion Header 3', panel: 'Accordion Panel 3' },
910
];
1011

11-
export const Default = () => (
12+
export const Default = (): JSXElement => (
1213
<Accordion className="flex w-full max-w-96 flex-col justify-center text-gray-900 border border-gray-200 rounded-md">
1314
{items.map(item => (
1415
<AccordionItem className="group border-b border-gray-200" key={item.value} value={item.value}>

‎packages/react-components/react-headless-components-preview/stories/src/Button/ButtonDefault.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import * as React from 'react';
2+
import type { JSXElement } from '@fluentui/react-headless-components-preview';
23
import { Button } from '@fluentui/react-headless-components-preview';
34

45
const classes = {
56
button:
67
'flex items-center justify-center h-10 px-4 m-0 outline-0 border border-transparent rounded-md bg-blue-600 font-inherit text-base font-medium leading-6 text-white select-none cursor-pointer hover:bg-blue-700 hover:data-[disabled]:bg-blue-600 active:bg-blue-800 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.2)] active:data-[disabled]:bg-blue-600 active:data-[disabled]:shadow-none focus-visible:outline-2 focus-visible:outline-black focus-visible:outline-offset-2 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
78
};
89

9-
export const Default = () => (
10+
export const Default = (): JSXElement => (
1011
<div className="flex gap-4">
1112
<Button className={classes.button}>Button</Button>
1213
<Button className={classes.button} disabled>

‎packages/react-components/react-headless-components-preview/stories/src/Divider/DividerDefault.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as React from 'react';
2+
import type { JSXElement } from '@fluentui/react-headless-components-preview';
23
import { Divider } from '@fluentui/react-headless-components-preview';
34

4-
export const Default = () => (
5+
export const Default = (): JSXElement => (
56
<div className="flex flex-col max-w-48 w-full gap-2 *:my-0">
67
<p>Content above the divider</p>
78
<Divider className="h-px bg-gray-300" />

‎packages/react-components/react-headless-components-preview/stories/src/Divider/DividerVertical.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as React from 'react';
2+
import type { JSXElement } from '@fluentui/react-headless-components-preview';
23
import { Divider } from '@fluentui/react-headless-components-preview';
34

4-
export const Vertical = () => (
5+
export const Vertical = (): JSXElement => (
56
<div className="flex items-center h-4 gap-4">
67
<a href="#">Link 1</a>
78
<Divider className="w-px h-full bg-gray-300" vertical />

0 commit comments

Comments
 (0)