@fluentui/react-utilities 9.4.0 → 9.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +54 -1
- package/CHANGELOG.md +24 -2
- package/dist/index.d.ts +9 -1
- package/lib/hooks/useId.js +21 -2
- package/lib/hooks/useId.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/ssr/SSRContext.js.map +1 -1
- package/lib-amd/hooks/useId.js +22 -3
- package/lib-amd/hooks/useId.js.map +1 -1
- package/lib-amd/index.js +2 -1
- package/lib-amd/index.js.map +1 -1
- package/lib-amd/ssr/SSRContext.js.map +1 -1
- package/lib-commonjs/hooks/useId.js +22 -3
- package/lib-commonjs/hooks/useId.js.map +1 -1
- package/lib-commonjs/index.js +7 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/ssr/SSRContext.js.map +1 -1
- package/package.json +3 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,60 @@
|
|
|
2
2
|
"name": "@fluentui/react-utilities",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 31 Jan 2023 19:50:42 GMT",
|
|
6
|
+
"tag": "@fluentui/react-utilities_v9.5.1",
|
|
7
|
+
"version": "9.5.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-utilities",
|
|
13
|
+
"commit": "12ec691720e2394ef61bd1936d911a4245f6e0cd",
|
|
14
|
+
"comment": "fix: update definitions for SSRProvider"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Thu, 26 Jan 2023 13:31:03 GMT",
|
|
21
|
+
"tag": "@fluentui/react-utilities_v9.5.0",
|
|
22
|
+
"version": "9.5.0",
|
|
23
|
+
"comments": {
|
|
24
|
+
"minor": [
|
|
25
|
+
{
|
|
26
|
+
"author": "olfedias@microsoft.com",
|
|
27
|
+
"package": "@fluentui/react-utilities",
|
|
28
|
+
"commit": "403e1370f1effca7d3db131eda381abf31cf66b1",
|
|
29
|
+
"comment": "feat: add IdPrefixProvider"
|
|
30
|
+
}
|
|
31
|
+
],
|
|
32
|
+
"patch": [
|
|
33
|
+
{
|
|
34
|
+
"author": "esteban.230@hotmail.com",
|
|
35
|
+
"package": "@fluentui/react-utilities",
|
|
36
|
+
"commit": "4f3871db826e542114d853b57fb2f740787f91e8",
|
|
37
|
+
"comment": "fix: Leverage React.useId when available for our useId hook."
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"date": "Mon, 16 Jan 2023 08:38:52 GMT",
|
|
44
|
+
"tag": "@fluentui/react-utilities_v9.4.0",
|
|
45
|
+
"version": "9.4.0",
|
|
46
|
+
"comments": {
|
|
47
|
+
"none": [
|
|
48
|
+
{
|
|
49
|
+
"author": "martinhochel@microsoft.com",
|
|
50
|
+
"package": "@fluentui/react-utilities",
|
|
51
|
+
"commit": "64bb45980d68de1219c6b36a7db5363f0a9cff9f",
|
|
52
|
+
"comment": "chore: migrate to packaged scripts"
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"date": "Mon, 09 Jan 2023 14:35:02 GMT",
|
|
6
59
|
"tag": "@fluentui/react-utilities_v9.4.0",
|
|
7
60
|
"version": "9.4.0",
|
|
8
61
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-utilities
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 31 Jan 2023 19:50:42 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.5.1)
|
|
8
|
+
|
|
9
|
+
Tue, 31 Jan 2023 19:50:42 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.5.0..@fluentui/react-utilities_v9.5.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: update definitions for SSRProvider ([PR #25582](https://github.com/microsoft/fluentui/pull/25582) by olfedias@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.5.0)
|
|
17
|
+
|
|
18
|
+
Thu, 26 Jan 2023 13:31:03 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.4.0..@fluentui/react-utilities_v9.5.0)
|
|
20
|
+
|
|
21
|
+
### Minor changes
|
|
22
|
+
|
|
23
|
+
- feat: add IdPrefixProvider ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by olfedias@microsoft.com)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- fix: Leverage React.useId when available for our useId hook. ([PR #26465](https://github.com/microsoft/fluentui/pull/26465) by esteban.230@hotmail.com)
|
|
28
|
+
|
|
7
29
|
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.4.0)
|
|
8
30
|
|
|
9
|
-
Mon, 09 Jan 2023 14:
|
|
31
|
+
Mon, 09 Jan 2023 14:35:02 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.3.1..@fluentui/react-utilities_v9.4.0)
|
|
11
33
|
|
|
12
34
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
|
@@ -172,6 +172,12 @@ export declare function getTriggerChild<TriggerChildProps>(children: TriggerProp
|
|
|
172
172
|
ref?: React_2.Ref<any>;
|
|
173
173
|
}) | null;
|
|
174
174
|
|
|
175
|
+
/**
|
|
176
|
+
* Allows to define a prefix that will be used for all IDs generated by useId() hook. It's useful to avoid collisions
|
|
177
|
+
* between different bundles.
|
|
178
|
+
*/
|
|
179
|
+
export declare const IdPrefixProvider: React_2.Provider<string | undefined>;
|
|
180
|
+
|
|
175
181
|
/**
|
|
176
182
|
* Helper type for {@link Slot}. Modifies `JSX.IntrinsicElements[Type]`:
|
|
177
183
|
* * Removes legacy string ref.
|
|
@@ -397,7 +403,9 @@ export declare type SlotShorthandValue = React_2.ReactChild | React_2.ReactNode[
|
|
|
397
403
|
*
|
|
398
404
|
* @public
|
|
399
405
|
*/
|
|
400
|
-
export declare const SSRProvider: React_2.FC
|
|
406
|
+
export declare const SSRProvider: React_2.FC<{
|
|
407
|
+
children: React_2.ReactNode;
|
|
408
|
+
}>;
|
|
401
409
|
|
|
402
410
|
/**
|
|
403
411
|
* A trigger may have a children that could be either:
|
package/lib/hooks/useId.js
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { defaultSSRContextValue, useSSRContext } from '../ssr/index';
|
|
3
|
+
const IdPrefixContext = /*#__PURE__*/React.createContext(undefined);
|
|
4
|
+
/**
|
|
5
|
+
* Allows to define a prefix that will be used for all IDs generated by useId() hook. It's useful to avoid collisions
|
|
6
|
+
* between different bundles.
|
|
7
|
+
*/
|
|
8
|
+
export const IdPrefixProvider = IdPrefixContext.Provider;
|
|
9
|
+
function useIdPrefix() {
|
|
10
|
+
return React.useContext(IdPrefixContext) || '';
|
|
11
|
+
}
|
|
3
12
|
/**
|
|
4
13
|
* Resets generated IDs, should be used only in tests.
|
|
5
14
|
*/
|
|
@@ -16,11 +25,21 @@ export function resetIdsForTests() {
|
|
|
16
25
|
*/
|
|
17
26
|
export function useId(prefix = 'fui-', providedId) {
|
|
18
27
|
const contextValue = useSSRContext();
|
|
28
|
+
const idPrefix = useIdPrefix();
|
|
29
|
+
// Checking if useId is available on React, if it is, we use it to generate the id. String concatenation is used to
|
|
30
|
+
// prevent bundlers from complaining with older versions of React.
|
|
31
|
+
const _useId = React['use' + 'Id'];
|
|
32
|
+
if (_useId) {
|
|
33
|
+
return providedId || `${idPrefix}${prefix}${_useId()}`;
|
|
34
|
+
}
|
|
35
|
+
// Hooks appear to be running conditionally, but they will always run in the same order since it's based on
|
|
36
|
+
// the version of React being used. This is safe to ignore.
|
|
37
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
19
38
|
return React.useMemo(() => {
|
|
20
39
|
if (providedId) {
|
|
21
40
|
return providedId;
|
|
22
41
|
}
|
|
23
|
-
return `${prefix}${++contextValue.current}`;
|
|
24
|
-
}, [prefix, providedId, contextValue]);
|
|
42
|
+
return `${idPrefix}${prefix}${++contextValue.current}`;
|
|
43
|
+
}, [idPrefix, prefix, providedId, contextValue]);
|
|
25
44
|
}
|
|
26
45
|
//# sourceMappingURL=useId.js.map
|
package/lib/hooks/useId.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,EAAEC,aAAa,QAAQ,cAAc;AAEpE;;;AAGA,OAAM,
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,EAAEC,aAAa,QAAQ,cAAc;AAEpE,MAAMC,eAAe,gBAAGH,KAAK,CAACI,aAAa,CAAqBC,SAAS,CAAC;AAE1E;;;;AAIA,OAAO,MAAMC,gBAAgB,GAAGH,eAAe,CAACI,QAAQ;AAExD,SAASC,WAAW;EAClB,OAAOR,KAAK,CAACS,UAAU,CAACN,eAAe,CAAC,IAAI,EAAE;AAChD;AAEA;;;AAGA,OAAM,SAAUO,gBAAgB;EAC9BT,sBAAsB,CAACU,OAAO,GAAG,CAAC;AACpC;AAEA;;;;;;;;AAQA,OAAM,SAAUC,KAAK,CAACC,SAAiB,MAAM,EAAEC,UAAmB;EAChE,MAAMC,YAAY,GAAGb,aAAa,EAAE;EACpC,MAAMc,QAAQ,GAAGR,WAAW,EAAE;EAE9B;EACA;EACA,MAAMS,MAAM,GAA8BjB,KAAe,CAAC,KAAK,GAAG,IAAI,CAAC;EAEvE,IAAIiB,MAAM,EAAE;IACV,OAAOH,UAAU,IAAI,GAAGE,QAAQ,GAAGH,MAAM,GAAGI,MAAM,EAAE,EAAE;;EAGxD;EACA;EACA;EACA,OAAOjB,KAAK,CAACkB,OAAO,CAAC,MAAK;IACxB,IAAIJ,UAAU,EAAE;MACd,OAAOA,UAAU;;IAGnB,OAAO,GAAGE,QAAQ,GAAGH,MAAM,GAAG,EAAEE,YAAY,CAACJ,OAAO,EAAE;EACxD,CAAC,EAAE,CAACK,QAAQ,EAAEH,MAAM,EAAEC,UAAU,EAAEC,YAAY,CAAC,CAAC;AAClD","names":["React","defaultSSRContextValue","useSSRContext","IdPrefixContext","createContext","undefined","IdPrefixProvider","Provider","useIdPrefix","useContext","resetIdsForTests","current","useId","prefix","providedId","contextValue","idPrefix","_useId","useMemo"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useId.ts"],"sourcesContent":["import * as React from 'react';\nimport { defaultSSRContextValue, useSSRContext } from '../ssr/index';\n\nconst IdPrefixContext = React.createContext<string | undefined>(undefined);\n\n/**\n * Allows to define a prefix that will be used for all IDs generated by useId() hook. It's useful to avoid collisions\n * between different bundles.\n */\nexport const IdPrefixProvider = IdPrefixContext.Provider;\n\nfunction useIdPrefix(): string {\n return React.useContext(IdPrefixContext) || '';\n}\n\n/**\n * Resets generated IDs, should be used only in tests.\n */\nexport function resetIdsForTests(): void {\n defaultSSRContextValue.current = 0;\n}\n\n/**\n * Hook to generate a unique ID.\n *\n * @param prefix - Optional prefix for the ID. Defaults to 'fui-'.\n * @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,\n * without conditioning the hook call\n * @returns The ID\n */\nexport function useId(prefix: string = 'fui-', providedId?: string): string {\n const contextValue = useSSRContext();\n const idPrefix = useIdPrefix();\n\n // Checking if useId is available on React, if it is, we use it to generate the id. String concatenation is used to\n // prevent bundlers from complaining with older versions of React.\n const _useId: () => string | undefined = (React as never)['use' + 'Id'];\n\n if (_useId) {\n return providedId || `${idPrefix}${prefix}${_useId()}`;\n }\n\n // Hooks appear to be running conditionally, but they will always run in the same order since it's based on\n // the version of React being used. This is safe to ignore.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return React.useMemo(() => {\n if (providedId) {\n return providedId;\n }\n\n return `${idPrefix}${prefix}${++contextValue.current}`;\n }, [idPrefix, prefix, providedId, contextValue]);\n}\n"]}
|
package/lib/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { getSlots, resolveShorthand, isResolvedShorthand } from './compose/index';
|
|
2
|
-
export { resetIdsForTests, useControllableState, useEventCallback, useFirstMount, useForceUpdate, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnClickOutside, useOnScrollOutside, usePrevious, useScrollbarWidth, useTimeout } from './hooks/index';
|
|
2
|
+
export { IdPrefixProvider, resetIdsForTests, useControllableState, useEventCallback, useFirstMount, useForceUpdate, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnClickOutside, useOnScrollOutside, usePrevious, useScrollbarWidth, useTimeout } from './hooks/index';
|
|
3
3
|
export { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';
|
|
4
4
|
export { clamp, getNativeElementProps, getPartitionedNativeProps, getRTLSafeKey, mergeCallbacks, isHTMLElement, isInteractiveHTMLElement } from './utils/index';
|
|
5
5
|
export { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAASA,QAAQ,EAAEC,gBAAgB,EAAEC,mBAAmB,QAAQ,iBAAiB;AAgBjF,SACEC,gBAAgB,EAChBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,cAAc,EACdC,KAAK,EACLC,yBAAyB,EACzBC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,iBAAiB,EACjBC,UAAU,QACL,eAAe;AAGtB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,aAAa;AAE9D,SACEC,KAAK,EACLC,qBAAqB,EACrBC,yBAAyB,EACzBC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,wBAAwB,QACnB,eAAe;AAEtB,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,eAAe,QAAQ,iBAAiB","names":["getSlots","resolveShorthand","isResolvedShorthand","resetIdsForTests","useControllableState","useEventCallback","useFirstMount","useForceUpdate","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout","canUseDOM","useIsSSR","SSRProvider","clamp","getNativeElementProps","getPartitionedNativeProps","getRTLSafeKey","mergeCallbacks","isHTMLElement","isInteractiveHTMLElement","applyTriggerPropsToChildren","getTriggerChild","isFluentTrigger"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/index.ts"],"sourcesContent":["export { getSlots, resolveShorthand, isResolvedShorthand } from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n ResolveShorthandFunction,\n ResolveShorthandOptions,\n Slot,\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n} from './compose/index';\n\nexport {\n resetIdsForTests,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n getNativeElementProps,\n getPartitionedNativeProps,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n} from './utils/index';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n"]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,QAAQ,EAAEC,gBAAgB,EAAEC,mBAAmB,QAAQ,iBAAiB;AAgBjF,SACEC,gBAAgB,EAChBC,gBAAgB,EAChBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,cAAc,EACdC,KAAK,EACLC,yBAAyB,EACzBC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,iBAAiB,EACjBC,UAAU,QACL,eAAe;AAGtB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,aAAa;AAE9D,SACEC,KAAK,EACLC,qBAAqB,EACrBC,yBAAyB,EACzBC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,wBAAwB,QACnB,eAAe;AAEtB,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,eAAe,QAAQ,iBAAiB","names":["getSlots","resolveShorthand","isResolvedShorthand","IdPrefixProvider","resetIdsForTests","useControllableState","useEventCallback","useFirstMount","useForceUpdate","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout","canUseDOM","useIsSSR","SSRProvider","clamp","getNativeElementProps","getPartitionedNativeProps","getRTLSafeKey","mergeCallbacks","isHTMLElement","isInteractiveHTMLElement","applyTriggerPropsToChildren","getTriggerChild","isFluentTrigger"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/index.ts"],"sourcesContent":["export { getSlots, resolveShorthand, isResolvedShorthand } from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n ResolveShorthandFunction,\n ResolveShorthandOptions,\n Slot,\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n} from './compose/index';\n\nexport {\n IdPrefixProvider,\n resetIdsForTests,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n getNativeElementProps,\n getPartitionedNativeProps,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n} from './utils/index';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,aAAa;AAYvC;;;;;AAKA,OAAO,MAAMC,sBAAsB,GAAoB;EACrDC,OAAO,EAAE;CACV;AAED,OAAO,MAAMC,UAAU,gBAAGJ,KAAK,CAACK,aAAa,CAA8BC,SAAS,CAAmC;AAEvH;;;AAGA,OAAM,SAAUC,aAAa;;EAC3B,OAAO,WAAK,CAACC,UAAU,CAACJ,UAAU,CAAC,mCAAIF,sBAAsB;AAC/D;AAEA;;;;;;AAMA,OAAO,MAAMO,WAAW,
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,aAAa;AAYvC;;;;;AAKA,OAAO,MAAMC,sBAAsB,GAAoB;EACrDC,OAAO,EAAE;CACV;AAED,OAAO,MAAMC,UAAU,gBAAGJ,KAAK,CAACK,aAAa,CAA8BC,SAAS,CAAmC;AAEvH;;;AAGA,OAAM,SAAUC,aAAa;;EAC3B,OAAO,WAAK,CAACC,UAAU,CAACJ,UAAU,CAAC,mCAAIF,sBAAsB;AAC/D;AAEA;;;;;;AAMA,OAAO,MAAMO,WAAW,GAA4CC,KAAK,IAAG;EAC1E,MAAM,CAACC,KAAK,CAAC,GAAGX,KAAK,CAACY,QAAQ,CAAkB,OAAO;IAAET,OAAO,EAAE;EAAC,CAAE,CAAC,CAAC;EAEvE,oBAAOH,oBAACI,UAAU,CAACS,QAAQ;IAACF,KAAK,EAAEA;EAAK,GAAGD,KAAK,CAACI,QAAQ,CAAuB;AAClF,CAAC;AAED;;;;AAIA,OAAM,SAAUC,QAAQ;EACtB,MAAMC,cAAc,GAAGT,aAAa,EAAE,KAAKL,sBAAsB;EACjE,MAAM,CAACe,KAAK,EAAEC,QAAQ,CAAC,GAAGlB,KAAK,CAACY,QAAQ,CAACI,cAAc,CAAC;EAExD;EACA;EACA,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAI,CAACL,cAAc,IAAI,CAACf,SAAS,EAAE,EAAE;MACnC;MACAqB,OAAO,CAACC,KAAK,CACX,CACE,8BAA8B,EAC9B,yGAAyG,GACvG,0CAA0C,EAC5C,IAAI,EACJ,IAAI,EACJ,oDAAoD,CACrD,CAACC,IAAI,CAAC,EAAE,CAAC,CACX;;;EAIL;EACA;EACA,IAAIvB,SAAS,EAAE,IAAIe,cAAc,EAAE;IACjC;IACA;IACA;IACAhB,KAAK,CAACyB,eAAe,CAAC,MAAK;MACzBP,QAAQ,CAAC,KAAK,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC;;EAGR,OAAOD,KAAK;AACd","names":["React","canUseDOM","defaultSSRContextValue","current","SSRContext","createContext","undefined","useSSRContext","useContext","SSRProvider","props","value","useState","Provider","children","useIsSSR","isInSSRContext","isSSR","setIsSSR","process","env","NODE_ENV","console","error","join","useLayoutEffect"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/ssr/SSRContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from './canUseDOM';\n\n/**\n * To support SSR, the auto incrementing id counter is stored in a context. This allows it to be reset on every request\n * to ensure the client and server are consistent.\n *\n * @internal\n */\nexport type SSRContextValue = {\n current: number;\n};\n\n/**\n * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.\n *\n * @internal\n */\nexport const defaultSSRContextValue: SSRContextValue = {\n current: 0,\n};\n\nexport const SSRContext = React.createContext<SSRContextValue | undefined>(undefined) as React.Context<SSRContextValue>;\n\n/**\n * @internal\n */\nexport function useSSRContext(): SSRContextValue {\n return React.useContext(SSRContext) ?? defaultSSRContextValue;\n}\n\n/**\n * When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids\n * are consistent between the client and server.\n *\n * @public\n */\nexport const SSRProvider: React.FC<{ children: React.ReactNode }> = props => {\n const [value] = React.useState<SSRContextValue>(() => ({ current: 0 }));\n\n return <SSRContext.Provider value={value}>{props.children}</SSRContext.Provider>;\n};\n\n/**\n * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay\n * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.\n */\nexport function useIsSSR(): boolean {\n const isInSSRContext = useSSRContext() !== defaultSSRContextValue;\n const [isSSR, setIsSSR] = React.useState(isInSSRContext);\n\n // If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the\n // developer to add one.\n if (process.env.NODE_ENV !== 'production') {\n if (!isInSSRContext && !canUseDOM()) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-components: ',\n 'When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are ' +\n 'generated between the client and server.',\n '\\n',\n '\\n',\n 'Check documentation at https://aka.ms/fluentui-ssr',\n ].join(''),\n );\n }\n }\n\n // If on the client, and the component was initially server rendered, then schedule a layout effect to update the\n // component after hydration.\n if (canUseDOM() && isInSSRContext) {\n // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n // mounting.\n // eslint-disable-next-line\n React.useLayoutEffect(() => {\n setIsSSR(false);\n }, []);\n }\n\n return isSSR;\n}\n"]}
|
package/lib-amd/hooks/useId.js
CHANGED
|
@@ -1,7 +1,16 @@
|
|
|
1
1
|
define(["require", "exports", "react", "../ssr/index"], function (require, exports, React, index_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.useId = exports.resetIdsForTests = void 0;
|
|
4
|
+
exports.useId = exports.resetIdsForTests = exports.IdPrefixProvider = void 0;
|
|
5
|
+
var IdPrefixContext = React.createContext(undefined);
|
|
6
|
+
/**
|
|
7
|
+
* Allows to define a prefix that will be used for all IDs generated by useId() hook. It's useful to avoid collisions
|
|
8
|
+
* between different bundles.
|
|
9
|
+
*/
|
|
10
|
+
exports.IdPrefixProvider = IdPrefixContext.Provider;
|
|
11
|
+
function useIdPrefix() {
|
|
12
|
+
return React.useContext(IdPrefixContext) || '';
|
|
13
|
+
}
|
|
5
14
|
/**
|
|
6
15
|
* Resets generated IDs, should be used only in tests.
|
|
7
16
|
*/
|
|
@@ -20,12 +29,22 @@ define(["require", "exports", "react", "../ssr/index"], function (require, expor
|
|
|
20
29
|
function useId(prefix, providedId) {
|
|
21
30
|
if (prefix === void 0) { prefix = 'fui-'; }
|
|
22
31
|
var contextValue = index_1.useSSRContext();
|
|
32
|
+
var idPrefix = useIdPrefix();
|
|
33
|
+
// Checking if useId is available on React, if it is, we use it to generate the id. String concatenation is used to
|
|
34
|
+
// prevent bundlers from complaining with older versions of React.
|
|
35
|
+
var _useId = React['use' + 'Id'];
|
|
36
|
+
if (_useId) {
|
|
37
|
+
return providedId || "" + idPrefix + prefix + _useId();
|
|
38
|
+
}
|
|
39
|
+
// Hooks appear to be running conditionally, but they will always run in the same order since it's based on
|
|
40
|
+
// the version of React being used. This is safe to ignore.
|
|
41
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
23
42
|
return React.useMemo(function () {
|
|
24
43
|
if (providedId) {
|
|
25
44
|
return providedId;
|
|
26
45
|
}
|
|
27
|
-
return "" + prefix + ++contextValue.current;
|
|
28
|
-
}, [prefix, providedId, contextValue]);
|
|
46
|
+
return "" + idPrefix + prefix + ++contextValue.current;
|
|
47
|
+
}, [idPrefix, prefix, providedId, contextValue]);
|
|
29
48
|
}
|
|
30
49
|
exports.useId = useId;
|
|
31
50
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useId.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-utilities/src/hooks/useId.ts"],"names":[],"mappings":";;;;IAGA;;OAEG;IACH,SAAgB,gBAAgB;QAC9B,8BAAsB,CAAC,OAAO,GAAG,CAAC,CAAC;IACrC,CAAC;IAFD,4CAEC;IAED;;;;;;;OAOG;IACH,SAAgB,KAAK,CAAC,MAAuB,EAAE,UAAmB;QAA5C,uBAAA,EAAA,eAAuB;QAC3C,IAAM,YAAY,GAAG,qBAAa,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"useId.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-utilities/src/hooks/useId.ts"],"names":[],"mappings":";;;;IAGA,IAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAqB,SAAS,CAAC,CAAC;IAE3E;;;OAGG;IACU,QAAA,gBAAgB,GAAG,eAAe,CAAC,QAAQ,CAAC;IAEzD,SAAS,WAAW;QAClB,OAAO,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IACjD,CAAC;IAED;;OAEG;IACH,SAAgB,gBAAgB;QAC9B,8BAAsB,CAAC,OAAO,GAAG,CAAC,CAAC;IACrC,CAAC;IAFD,4CAEC;IAED;;;;;;;OAOG;IACH,SAAgB,KAAK,CAAC,MAAuB,EAAE,UAAmB;QAA5C,uBAAA,EAAA,eAAuB;QAC3C,IAAM,YAAY,GAAG,qBAAa,EAAE,CAAC;QACrC,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,mHAAmH;QACnH,kEAAkE;QAClE,IAAM,MAAM,GAA8B,KAAe,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;QAExE,IAAI,MAAM,EAAE;YACV,OAAO,UAAU,IAAI,KAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,EAAI,CAAC;SACxD;QAED,2GAA2G;QAC3G,2DAA2D;QAC3D,sDAAsD;QACtD,OAAO,KAAK,CAAC,OAAO,CAAC;YACnB,IAAI,UAAU,EAAE;gBACd,OAAO,UAAU,CAAC;aACnB;YAED,OAAO,KAAG,QAAQ,GAAG,MAAM,GAAG,EAAE,YAAY,CAAC,OAAS,CAAC;QACzD,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IACnD,CAAC;IAtBD,sBAsBC","sourcesContent":["import * as React from 'react';\nimport { defaultSSRContextValue, useSSRContext } from '../ssr/index';\n\nconst IdPrefixContext = React.createContext<string | undefined>(undefined);\n\n/**\n * Allows to define a prefix that will be used for all IDs generated by useId() hook. It's useful to avoid collisions\n * between different bundles.\n */\nexport const IdPrefixProvider = IdPrefixContext.Provider;\n\nfunction useIdPrefix(): string {\n return React.useContext(IdPrefixContext) || '';\n}\n\n/**\n * Resets generated IDs, should be used only in tests.\n */\nexport function resetIdsForTests(): void {\n defaultSSRContextValue.current = 0;\n}\n\n/**\n * Hook to generate a unique ID.\n *\n * @param prefix - Optional prefix for the ID. Defaults to 'fui-'.\n * @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,\n * without conditioning the hook call\n * @returns The ID\n */\nexport function useId(prefix: string = 'fui-', providedId?: string): string {\n const contextValue = useSSRContext();\n const idPrefix = useIdPrefix();\n\n // Checking if useId is available on React, if it is, we use it to generate the id. String concatenation is used to\n // prevent bundlers from complaining with older versions of React.\n const _useId: () => string | undefined = (React as never)['use' + 'Id'];\n\n if (_useId) {\n return providedId || `${idPrefix}${prefix}${_useId()}`;\n }\n\n // Hooks appear to be running conditionally, but they will always run in the same order since it's based on\n // the version of React being used. This is safe to ignore.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return React.useMemo(() => {\n if (providedId) {\n return providedId;\n }\n\n return `${idPrefix}${prefix}${++contextValue.current}`;\n }, [idPrefix, prefix, providedId, contextValue]);\n}\n"]}
|
package/lib-amd/index.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
define(["require", "exports", "./compose/index", "./hooks/index", "./ssr/index", "./utils/index", "./trigger/index"], function (require, exports, index_1, index_2, index_3, index_4, index_5) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.isFluentTrigger = exports.getTriggerChild = exports.applyTriggerPropsToChildren = exports.isInteractiveHTMLElement = exports.isHTMLElement = exports.mergeCallbacks = exports.getRTLSafeKey = exports.getPartitionedNativeProps = exports.getNativeElementProps = exports.clamp = exports.SSRProvider = exports.useIsSSR = exports.canUseDOM = exports.useTimeout = exports.useScrollbarWidth = exports.usePrevious = exports.useOnScrollOutside = exports.useOnClickOutside = exports.useMergedRefs = exports.useIsomorphicLayoutEffect = exports.useId = exports.useForceUpdate = exports.useFirstMount = exports.useEventCallback = exports.useControllableState = exports.resetIdsForTests = exports.isResolvedShorthand = exports.resolveShorthand = exports.getSlots = void 0;
|
|
4
|
+
exports.isFluentTrigger = exports.getTriggerChild = exports.applyTriggerPropsToChildren = exports.isInteractiveHTMLElement = exports.isHTMLElement = exports.mergeCallbacks = exports.getRTLSafeKey = exports.getPartitionedNativeProps = exports.getNativeElementProps = exports.clamp = exports.SSRProvider = exports.useIsSSR = exports.canUseDOM = exports.useTimeout = exports.useScrollbarWidth = exports.usePrevious = exports.useOnScrollOutside = exports.useOnClickOutside = exports.useMergedRefs = exports.useIsomorphicLayoutEffect = exports.useId = exports.useForceUpdate = exports.useFirstMount = exports.useEventCallback = exports.useControllableState = exports.resetIdsForTests = exports.IdPrefixProvider = exports.isResolvedShorthand = exports.resolveShorthand = exports.getSlots = void 0;
|
|
5
5
|
Object.defineProperty(exports, "getSlots", { enumerable: true, get: function () { return index_1.getSlots; } });
|
|
6
6
|
Object.defineProperty(exports, "resolveShorthand", { enumerable: true, get: function () { return index_1.resolveShorthand; } });
|
|
7
7
|
Object.defineProperty(exports, "isResolvedShorthand", { enumerable: true, get: function () { return index_1.isResolvedShorthand; } });
|
|
8
|
+
Object.defineProperty(exports, "IdPrefixProvider", { enumerable: true, get: function () { return index_2.IdPrefixProvider; } });
|
|
8
9
|
Object.defineProperty(exports, "resetIdsForTests", { enumerable: true, get: function () { return index_2.resetIdsForTests; } });
|
|
9
10
|
Object.defineProperty(exports, "useControllableState", { enumerable: true, get: function () { return index_2.useControllableState; } });
|
|
10
11
|
Object.defineProperty(exports, "useEventCallback", { enumerable: true, get: function () { return index_2.useEventCallback; } });
|
package/lib-amd/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-utilities/src/index.ts"],"names":[],"mappings":";;;;IAAS,iGAAA,QAAQ,OAAA;IAAE,yGAAA,gBAAgB,OAAA;IAAE,4GAAA,mBAAmB,OAAA;IAiBtD,yGAAA,gBAAgB,OAAA;IAChB,6GAAA,oBAAoB,OAAA;IACpB,yGAAA,gBAAgB,OAAA;IAChB,sGAAA,aAAa,OAAA;IACb,uGAAA,cAAc,OAAA;IACd,8FAAA,KAAK,OAAA;IACL,kHAAA,yBAAyB,OAAA;IACzB,sGAAA,aAAa,OAAA;IACb,0GAAA,iBAAiB,OAAA;IACjB,2GAAA,kBAAkB,OAAA;IAClB,oGAAA,WAAW,OAAA;IACX,0GAAA,iBAAiB,OAAA;IACjB,mGAAA,UAAU,OAAA;IAIH,kGAAA,SAAS,OAAA;IAAE,iGAAA,QAAQ,OAAA;IAAE,oGAAA,WAAW,OAAA;IAGvC,8FAAA,KAAK,OAAA;IACL,8GAAA,qBAAqB,OAAA;IACrB,kHAAA,yBAAyB,OAAA;IACzB,sGAAA,aAAa,OAAA;IACb,uGAAA,cAAc,OAAA;IACd,sGAAA,aAAa,OAAA;IACb,iHAAA,wBAAwB,OAAA;IAGjB,oHAAA,2BAA2B,OAAA;IAAE,wGAAA,eAAe,OAAA;IAAE,wGAAA,eAAe,OAAA","sourcesContent":["export { getSlots, resolveShorthand, isResolvedShorthand } from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n ResolveShorthandFunction,\n ResolveShorthandOptions,\n Slot,\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n} from './compose/index';\n\nexport {\n resetIdsForTests,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n getNativeElementProps,\n getPartitionedNativeProps,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n} from './utils/index';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-utilities/src/index.ts"],"names":[],"mappings":";;;;IAAS,iGAAA,QAAQ,OAAA;IAAE,yGAAA,gBAAgB,OAAA;IAAE,4GAAA,mBAAmB,OAAA;IAiBtD,yGAAA,gBAAgB,OAAA;IAChB,yGAAA,gBAAgB,OAAA;IAChB,6GAAA,oBAAoB,OAAA;IACpB,yGAAA,gBAAgB,OAAA;IAChB,sGAAA,aAAa,OAAA;IACb,uGAAA,cAAc,OAAA;IACd,8FAAA,KAAK,OAAA;IACL,kHAAA,yBAAyB,OAAA;IACzB,sGAAA,aAAa,OAAA;IACb,0GAAA,iBAAiB,OAAA;IACjB,2GAAA,kBAAkB,OAAA;IAClB,oGAAA,WAAW,OAAA;IACX,0GAAA,iBAAiB,OAAA;IACjB,mGAAA,UAAU,OAAA;IAIH,kGAAA,SAAS,OAAA;IAAE,iGAAA,QAAQ,OAAA;IAAE,oGAAA,WAAW,OAAA;IAGvC,8FAAA,KAAK,OAAA;IACL,8GAAA,qBAAqB,OAAA;IACrB,kHAAA,yBAAyB,OAAA;IACzB,sGAAA,aAAa,OAAA;IACb,uGAAA,cAAc,OAAA;IACd,sGAAA,aAAa,OAAA;IACb,iHAAA,wBAAwB,OAAA;IAGjB,oHAAA,2BAA2B,OAAA;IAAE,wGAAA,eAAe,OAAA;IAAE,wGAAA,eAAe,OAAA","sourcesContent":["export { getSlots, resolveShorthand, isResolvedShorthand } from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n ResolveShorthandFunction,\n ResolveShorthandOptions,\n Slot,\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n} from './compose/index';\n\nexport {\n IdPrefixProvider,\n resetIdsForTests,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n getNativeElementProps,\n getPartitionedNativeProps,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n} from './utils/index';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SSRContext.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-utilities/src/ssr/SSRContext.tsx"],"names":[],"mappings":";;;;IAaA;;;;OAIG;IACU,QAAA,sBAAsB,GAAoB;QACrD,OAAO,EAAE,CAAC;KACX,CAAC;IAEW,QAAA,UAAU,GAAG,KAAK,CAAC,aAAa,CAA8B,SAAS,CAAmC,CAAC;IAExH;;OAEG;IACH,SAAgB,aAAa;;QAC3B,OAAO,MAAA,KAAK,CAAC,UAAU,CAAC,kBAAU,CAAC,mCAAI,8BAAsB,CAAC;IAChE,CAAC;IAFD,sCAEC;IAED;;;;;OAKG;IACI,IAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"SSRContext.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-utilities/src/ssr/SSRContext.tsx"],"names":[],"mappings":";;;;IAaA;;;;OAIG;IACU,QAAA,sBAAsB,GAAoB;QACrD,OAAO,EAAE,CAAC;KACX,CAAC;IAEW,QAAA,UAAU,GAAG,KAAK,CAAC,aAAa,CAA8B,SAAS,CAAmC,CAAC;IAExH;;OAEG;IACH,SAAgB,aAAa;;QAC3B,OAAO,MAAA,KAAK,CAAC,UAAU,CAAC,kBAAU,CAAC,mCAAI,8BAAsB,CAAC;IAChE,CAAC;IAFD,sCAEC;IAED;;;;;OAKG;IACI,IAAM,WAAW,GAA4C,UAAA,KAAK;QAChE,IAAA,KAAK,GAAI,KAAK,CAAC,QAAQ,CAAkB,cAAM,OAAA,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAhB,CAAgB,CAAC,GAA3D,CAA4D;QAExE,OAAO,oBAAC,kBAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,KAAK,CAAC,QAAQ,CAAuB,CAAC;IACnF,CAAC,CAAC;IAJW,QAAA,WAAW,eAItB;IAEF;;;OAGG;IACH,SAAgB,QAAQ;QACtB,IAAM,cAAc,GAAG,aAAa,EAAE,KAAK,8BAAsB,CAAC;QAC5D,IAAA,KAAoB,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAjD,KAAK,QAAA,EAAE,QAAQ,QAAkC,CAAC;QAEzD,6GAA6G;QAC7G,wBAAwB;QACxB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YACzC,IAAI,CAAC,cAAc,IAAI,CAAC,qBAAS,EAAE,EAAE;gBACnC,sCAAsC;gBACtC,OAAO,CAAC,KAAK,CACX;oBACE,8BAA8B;oBAC9B,yGAAyG;wBACvG,0CAA0C;oBAC5C,IAAI;oBACJ,IAAI;oBACJ,oDAAoD;iBACrD,CAAC,IAAI,CAAC,EAAE,CAAC,CACX,CAAC;aACH;SACF;QAED,iHAAiH;QACjH,6BAA6B;QAC7B,IAAI,qBAAS,EAAE,IAAI,cAAc,EAAE;YACjC,iHAAiH;YACjH,YAAY;YACZ,2BAA2B;YAC3B,KAAK,CAAC,eAAe,CAAC;gBACpB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC,EAAE,EAAE,CAAC,CAAC;SACR;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAlCD,4BAkCC","sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from './canUseDOM';\n\n/**\n * To support SSR, the auto incrementing id counter is stored in a context. This allows it to be reset on every request\n * to ensure the client and server are consistent.\n *\n * @internal\n */\nexport type SSRContextValue = {\n current: number;\n};\n\n/**\n * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.\n *\n * @internal\n */\nexport const defaultSSRContextValue: SSRContextValue = {\n current: 0,\n};\n\nexport const SSRContext = React.createContext<SSRContextValue | undefined>(undefined) as React.Context<SSRContextValue>;\n\n/**\n * @internal\n */\nexport function useSSRContext(): SSRContextValue {\n return React.useContext(SSRContext) ?? defaultSSRContextValue;\n}\n\n/**\n * When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids\n * are consistent between the client and server.\n *\n * @public\n */\nexport const SSRProvider: React.FC<{ children: React.ReactNode }> = props => {\n const [value] = React.useState<SSRContextValue>(() => ({ current: 0 }));\n\n return <SSRContext.Provider value={value}>{props.children}</SSRContext.Provider>;\n};\n\n/**\n * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay\n * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.\n */\nexport function useIsSSR(): boolean {\n const isInSSRContext = useSSRContext() !== defaultSSRContextValue;\n const [isSSR, setIsSSR] = React.useState(isInSSRContext);\n\n // If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the\n // developer to add one.\n if (process.env.NODE_ENV !== 'production') {\n if (!isInSSRContext && !canUseDOM()) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-components: ',\n 'When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are ' +\n 'generated between the client and server.',\n '\\n',\n '\\n',\n 'Check documentation at https://aka.ms/fluentui-ssr',\n ].join(''),\n );\n }\n }\n\n // If on the client, and the component was initially server rendered, then schedule a layout effect to update the\n // component after hydration.\n if (canUseDOM() && isInSSRContext) {\n // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n // mounting.\n // eslint-disable-next-line\n React.useLayoutEffect(() => {\n setIsSSR(false);\n }, []);\n }\n\n return isSSR;\n}\n"]}
|
|
@@ -3,9 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useId = exports.resetIdsForTests = void 0;
|
|
6
|
+
exports.useId = exports.resetIdsForTests = exports.IdPrefixProvider = void 0;
|
|
7
7
|
const React = /*#__PURE__*/require("react");
|
|
8
8
|
const index_1 = /*#__PURE__*/require("../ssr/index");
|
|
9
|
+
const IdPrefixContext = /*#__PURE__*/React.createContext(undefined);
|
|
10
|
+
/**
|
|
11
|
+
* Allows to define a prefix that will be used for all IDs generated by useId() hook. It's useful to avoid collisions
|
|
12
|
+
* between different bundles.
|
|
13
|
+
*/
|
|
14
|
+
exports.IdPrefixProvider = IdPrefixContext.Provider;
|
|
15
|
+
function useIdPrefix() {
|
|
16
|
+
return React.useContext(IdPrefixContext) || '';
|
|
17
|
+
}
|
|
9
18
|
/**
|
|
10
19
|
* Resets generated IDs, should be used only in tests.
|
|
11
20
|
*/
|
|
@@ -23,12 +32,22 @@ exports.resetIdsForTests = resetIdsForTests;
|
|
|
23
32
|
*/
|
|
24
33
|
function useId(prefix = 'fui-', providedId) {
|
|
25
34
|
const contextValue = index_1.useSSRContext();
|
|
35
|
+
const idPrefix = useIdPrefix();
|
|
36
|
+
// Checking if useId is available on React, if it is, we use it to generate the id. String concatenation is used to
|
|
37
|
+
// prevent bundlers from complaining with older versions of React.
|
|
38
|
+
const _useId = React['use' + 'Id'];
|
|
39
|
+
if (_useId) {
|
|
40
|
+
return providedId || `${idPrefix}${prefix}${_useId()}`;
|
|
41
|
+
}
|
|
42
|
+
// Hooks appear to be running conditionally, but they will always run in the same order since it's based on
|
|
43
|
+
// the version of React being used. This is safe to ignore.
|
|
44
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
26
45
|
return React.useMemo(() => {
|
|
27
46
|
if (providedId) {
|
|
28
47
|
return providedId;
|
|
29
48
|
}
|
|
30
|
-
return `${prefix}${++contextValue.current}`;
|
|
31
|
-
}, [prefix, providedId, contextValue]);
|
|
49
|
+
return `${idPrefix}${prefix}${++contextValue.current}`;
|
|
50
|
+
}, [idPrefix, prefix, providedId, contextValue]);
|
|
32
51
|
}
|
|
33
52
|
exports.useId = useId;
|
|
34
53
|
//# sourceMappingURL=useId.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;;;AAGA,
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA,MAAMA,eAAe,gBAAGC,KAAK,CAACC,aAAa,CAAqBC,SAAS,CAAC;AAE1E;;;;AAIaC,wBAAgB,GAAGJ,eAAe,CAACK,QAAQ;AAExD,SAASC,WAAW;EAClB,OAAOL,KAAK,CAACM,UAAU,CAACP,eAAe,CAAC,IAAI,EAAE;AAChD;AAEA;;;AAGA,SAAgBQ,gBAAgB;EAC9BC,8BAAsB,CAACC,OAAO,GAAG,CAAC;AACpC;AAFAN;AAIA;;;;;;;;AAQA,SAAgBO,KAAK,CAACC,SAAiB,MAAM,EAAEC,UAAmB;EAChE,MAAMC,YAAY,GAAGL,qBAAa,EAAE;EACpC,MAAMM,QAAQ,GAAGT,WAAW,EAAE;EAE9B;EACA;EACA,MAAMU,MAAM,GAA8Bf,KAAe,CAAC,KAAK,GAAG,IAAI,CAAC;EAEvE,IAAIe,MAAM,EAAE;IACV,OAAOH,UAAU,IAAI,GAAGE,QAAQ,GAAGH,MAAM,GAAGI,MAAM,EAAE,EAAE;;EAGxD;EACA;EACA;EACA,OAAOf,KAAK,CAACgB,OAAO,CAAC,MAAK;IACxB,IAAIJ,UAAU,EAAE;MACd,OAAOA,UAAU;;IAGnB,OAAO,GAAGE,QAAQ,GAAGH,MAAM,GAAG,EAAEE,YAAY,CAACJ,OAAO,EAAE;EACxD,CAAC,EAAE,CAACK,QAAQ,EAAEH,MAAM,EAAEC,UAAU,EAAEC,YAAY,CAAC,CAAC;AAClD;AAtBAV","names":["IdPrefixContext","React","createContext","undefined","exports","Provider","useIdPrefix","useContext","resetIdsForTests","index_1","current","useId","prefix","providedId","contextValue","idPrefix","_useId","useMemo"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useId.ts"],"sourcesContent":["import * as React from 'react';\nimport { defaultSSRContextValue, useSSRContext } from '../ssr/index';\n\nconst IdPrefixContext = React.createContext<string | undefined>(undefined);\n\n/**\n * Allows to define a prefix that will be used for all IDs generated by useId() hook. It's useful to avoid collisions\n * between different bundles.\n */\nexport const IdPrefixProvider = IdPrefixContext.Provider;\n\nfunction useIdPrefix(): string {\n return React.useContext(IdPrefixContext) || '';\n}\n\n/**\n * Resets generated IDs, should be used only in tests.\n */\nexport function resetIdsForTests(): void {\n defaultSSRContextValue.current = 0;\n}\n\n/**\n * Hook to generate a unique ID.\n *\n * @param prefix - Optional prefix for the ID. Defaults to 'fui-'.\n * @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,\n * without conditioning the hook call\n * @returns The ID\n */\nexport function useId(prefix: string = 'fui-', providedId?: string): string {\n const contextValue = useSSRContext();\n const idPrefix = useIdPrefix();\n\n // Checking if useId is available on React, if it is, we use it to generate the id. String concatenation is used to\n // prevent bundlers from complaining with older versions of React.\n const _useId: () => string | undefined = (React as never)['use' + 'Id'];\n\n if (_useId) {\n return providedId || `${idPrefix}${prefix}${_useId()}`;\n }\n\n // Hooks appear to be running conditionally, but they will always run in the same order since it's based on\n // the version of React being used. This is safe to ignore.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return React.useMemo(() => {\n if (providedId) {\n return providedId;\n }\n\n return `${idPrefix}${prefix}${++contextValue.current}`;\n }, [idPrefix, prefix, providedId, contextValue]);\n}\n"]}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.isFluentTrigger = exports.getTriggerChild = exports.applyTriggerPropsToChildren = exports.isInteractiveHTMLElement = exports.isHTMLElement = exports.mergeCallbacks = exports.getRTLSafeKey = exports.getPartitionedNativeProps = exports.getNativeElementProps = exports.clamp = exports.SSRProvider = exports.useIsSSR = exports.canUseDOM = exports.useTimeout = exports.useScrollbarWidth = exports.usePrevious = exports.useOnScrollOutside = exports.useOnClickOutside = exports.useMergedRefs = exports.useIsomorphicLayoutEffect = exports.useId = exports.useForceUpdate = exports.useFirstMount = exports.useEventCallback = exports.useControllableState = exports.resetIdsForTests = exports.isResolvedShorthand = exports.resolveShorthand = exports.getSlots = void 0;
|
|
6
|
+
exports.isFluentTrigger = exports.getTriggerChild = exports.applyTriggerPropsToChildren = exports.isInteractiveHTMLElement = exports.isHTMLElement = exports.mergeCallbacks = exports.getRTLSafeKey = exports.getPartitionedNativeProps = exports.getNativeElementProps = exports.clamp = exports.SSRProvider = exports.useIsSSR = exports.canUseDOM = exports.useTimeout = exports.useScrollbarWidth = exports.usePrevious = exports.useOnScrollOutside = exports.useOnClickOutside = exports.useMergedRefs = exports.useIsomorphicLayoutEffect = exports.useId = exports.useForceUpdate = exports.useFirstMount = exports.useEventCallback = exports.useControllableState = exports.resetIdsForTests = exports.IdPrefixProvider = exports.isResolvedShorthand = exports.resolveShorthand = exports.getSlots = void 0;
|
|
7
7
|
var index_1 = /*#__PURE__*/require("./compose/index");
|
|
8
8
|
Object.defineProperty(exports, "getSlots", {
|
|
9
9
|
enumerable: true,
|
|
@@ -24,6 +24,12 @@ Object.defineProperty(exports, "isResolvedShorthand", {
|
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
26
|
var index_2 = /*#__PURE__*/require("./hooks/index");
|
|
27
|
+
Object.defineProperty(exports, "IdPrefixProvider", {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function () {
|
|
30
|
+
return index_2.IdPrefixProvider;
|
|
31
|
+
}
|
|
32
|
+
});
|
|
27
33
|
Object.defineProperty(exports, "resetIdsForTests", {
|
|
28
34
|
enumerable: true,
|
|
29
35
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,uBAAQ;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,+BAAgB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,kCAAmB;EAAA;AAAA;AAgBxD;AACEF;EAAAC;EAAAC;IAAA,+BAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,mCAAoB;EAAA;AAAA;AACpBF;EAAAC;EAAAC;IAAA,+BAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,4BAAa;EAAA;AAAA;AACbF;EAAAC;EAAAC;IAAA,6BAAc;EAAA;AAAA;AACdF;EAAAC;EAAAC;IAAA,oBAAK;EAAA;AAAA;AACLF;EAAAC;EAAAC;IAAA,wCAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,4BAAa;EAAA;AAAA;AACbF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,iCAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,0BAAW;EAAA;AAAA;AACXF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,yBAAU;EAAA;AAAA;AAIZ;AAASF;EAAAC;EAAAC;IAAA,wBAAS;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,uBAAQ;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,0BAAW;EAAA;AAAA;AAEzC;AACEF;EAAAC;EAAAC;IAAA,oBAAK;EAAA;AAAA;AACLF;EAAAC;EAAAC;IAAA,oCAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,wCAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,4BAAa;EAAA;AAAA;AACbF;EAAAC;EAAAC;IAAA,6BAAc;EAAA;AAAA;AACdF;EAAAC;EAAAC;IAAA,4BAAa;EAAA;AAAA;AACbF;EAAAC;EAAAC;IAAA,uCAAwB;EAAA;AAAA;AAG1B;AAASF;EAAAC;EAAAC;IAAA,0CAA2B;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,8BAAe;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,8BAAe;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/index.ts"],"sourcesContent":["export { getSlots, resolveShorthand, isResolvedShorthand } from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n ResolveShorthandFunction,\n ResolveShorthandOptions,\n Slot,\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n} from './compose/index';\n\nexport {\n resetIdsForTests,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n getNativeElementProps,\n getPartitionedNativeProps,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n} from './utils/index';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n"]}
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,uBAAQ;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,+BAAgB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,kCAAmB;EAAA;AAAA;AAgBxD;AACEF;EAAAC;EAAAC;IAAA,+BAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,+BAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,mCAAoB;EAAA;AAAA;AACpBF;EAAAC;EAAAC;IAAA,+BAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,4BAAa;EAAA;AAAA;AACbF;EAAAC;EAAAC;IAAA,6BAAc;EAAA;AAAA;AACdF;EAAAC;EAAAC;IAAA,oBAAK;EAAA;AAAA;AACLF;EAAAC;EAAAC;IAAA,wCAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,4BAAa;EAAA;AAAA;AACbF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,iCAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,0BAAW;EAAA;AAAA;AACXF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,yBAAU;EAAA;AAAA;AAIZ;AAASF;EAAAC;EAAAC;IAAA,wBAAS;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,uBAAQ;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,0BAAW;EAAA;AAAA;AAEzC;AACEF;EAAAC;EAAAC;IAAA,oBAAK;EAAA;AAAA;AACLF;EAAAC;EAAAC;IAAA,oCAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,wCAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,4BAAa;EAAA;AAAA;AACbF;EAAAC;EAAAC;IAAA,6BAAc;EAAA;AAAA;AACdF;EAAAC;EAAAC;IAAA,4BAAa;EAAA;AAAA;AACbF;EAAAC;EAAAC;IAAA,uCAAwB;EAAA;AAAA;AAG1B;AAASF;EAAAC;EAAAC;IAAA,0CAA2B;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,8BAAe;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,8BAAe;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/index.ts"],"sourcesContent":["export { getSlots, resolveShorthand, isResolvedShorthand } from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n ResolveShorthandFunction,\n ResolveShorthandOptions,\n Slot,\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n} from './compose/index';\n\nexport {\n IdPrefixProvider,\n resetIdsForTests,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n getNativeElementProps,\n getPartitionedNativeProps,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n} from './utils/index';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AAYA;;;;;AAKaA,8BAAsB,GAAoB;EACrDC,OAAO,EAAE;CACV;AAEYD,kBAAU,gBAAGE,KAAK,CAACC,aAAa,CAA8BC,SAAS,CAAmC;AAEvH;;;AAGA,SAAgBC,aAAa;;EAC3B,OAAO,WAAK,CAACC,UAAU,CAACN,kBAAU,CAAC,mCAAIA,8BAAsB;AAC/D;AAFAA;AAIA;;;;;;AAMO,MAAMO,WAAW,
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAYA;;;;;AAKaA,8BAAsB,GAAoB;EACrDC,OAAO,EAAE;CACV;AAEYD,kBAAU,gBAAGE,KAAK,CAACC,aAAa,CAA8BC,SAAS,CAAmC;AAEvH;;;AAGA,SAAgBC,aAAa;;EAC3B,OAAO,WAAK,CAACC,UAAU,CAACN,kBAAU,CAAC,mCAAIA,8BAAsB;AAC/D;AAFAA;AAIA;;;;;;AAMO,MAAMO,WAAW,GAA4CC,KAAK,IAAG;EAC1E,MAAM,CAACC,KAAK,CAAC,GAAGP,KAAK,CAACQ,QAAQ,CAAkB,OAAO;IAAET,OAAO,EAAE;EAAC,CAAE,CAAC,CAAC;EAEvE,OAAOC,oBAACF,kBAAU,CAACW,QAAQ;IAACF,KAAK,EAAEA;EAAK,GAAGD,KAAK,CAACI,QAAQ,CAAuB;AAClF,CAAC;AAJYZ,mBAAW;AAMxB;;;;AAIA,SAAgBa,QAAQ;EACtB,MAAMC,cAAc,GAAGT,aAAa,EAAE,KAAKL,8BAAsB;EACjE,MAAM,CAACe,KAAK,EAAEC,QAAQ,CAAC,GAAGd,KAAK,CAACQ,QAAQ,CAACI,cAAc,CAAC;EAExD;EACA;EACA,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAI,CAACL,cAAc,IAAI,CAACM,qBAAS,EAAE,EAAE;MACnC;MACAC,OAAO,CAACC,KAAK,CACX,CACE,8BAA8B,EAC9B,yGAAyG,GACvG,0CAA0C,EAC5C,IAAI,EACJ,IAAI,EACJ,oDAAoD,CACrD,CAACC,IAAI,CAAC,EAAE,CAAC,CACX;;;EAIL;EACA;EACA,IAAIH,qBAAS,EAAE,IAAIN,cAAc,EAAE;IACjC;IACA;IACA;IACAZ,KAAK,CAACsB,eAAe,CAAC,MAAK;MACzBR,QAAQ,CAAC,KAAK,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC;;EAGR,OAAOD,KAAK;AACd;AAlCAf","names":["exports","current","React","createContext","undefined","useSSRContext","useContext","SSRProvider","props","value","useState","Provider","children","useIsSSR","isInSSRContext","isSSR","setIsSSR","process","env","NODE_ENV","canUseDOM_1","console","error","join","useLayoutEffect"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/ssr/SSRContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from './canUseDOM';\n\n/**\n * To support SSR, the auto incrementing id counter is stored in a context. This allows it to be reset on every request\n * to ensure the client and server are consistent.\n *\n * @internal\n */\nexport type SSRContextValue = {\n current: number;\n};\n\n/**\n * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.\n *\n * @internal\n */\nexport const defaultSSRContextValue: SSRContextValue = {\n current: 0,\n};\n\nexport const SSRContext = React.createContext<SSRContextValue | undefined>(undefined) as React.Context<SSRContextValue>;\n\n/**\n * @internal\n */\nexport function useSSRContext(): SSRContextValue {\n return React.useContext(SSRContext) ?? defaultSSRContextValue;\n}\n\n/**\n * When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids\n * are consistent between the client and server.\n *\n * @public\n */\nexport const SSRProvider: React.FC<{ children: React.ReactNode }> = props => {\n const [value] = React.useState<SSRContextValue>(() => ({ current: 0 }));\n\n return <SSRContext.Provider value={value}>{props.children}</SSRContext.Provider>;\n};\n\n/**\n * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay\n * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.\n */\nexport function useIsSSR(): boolean {\n const isInSSRContext = useSSRContext() !== defaultSSRContextValue;\n const [isSSR, setIsSSR] = React.useState(isInSSRContext);\n\n // If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the\n // developer to add one.\n if (process.env.NODE_ENV !== 'production') {\n if (!isInSSRContext && !canUseDOM()) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-components: ',\n 'When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are ' +\n 'generated between the client and server.',\n '\\n',\n '\\n',\n 'Check documentation at https://aka.ms/fluentui-ssr',\n ].join(''),\n );\n }\n }\n\n // If on the client, and the component was initially server rendered, then schedule a layout effect to update the\n // component after hydration.\n if (canUseDOM() && isInSSRContext) {\n // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n // mounting.\n // eslint-disable-next-line\n React.useLayoutEffect(() => {\n setIsSSR(false);\n }, []);\n }\n\n return isSSR;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-utilities",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.1",
|
|
4
4
|
"description": "A set of general React-specific utilities.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@fluentui/eslint-plugin": "*",
|
|
27
|
-
"@fluentui/scripts": "*"
|
|
27
|
+
"@fluentui/scripts-api-extractor": "*",
|
|
28
|
+
"@fluentui/scripts-tasks": "*"
|
|
28
29
|
},
|
|
29
30
|
"dependencies": {
|
|
30
31
|
"@fluentui/keyboard-keys": "^9.0.1",
|