@fluentui/react-utilities 9.2.2 → 9.3.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 +66 -1
- package/CHANGELOG.md +21 -2
- package/dist/index.d.ts +17 -8
- package/lib/compose/getSlots.js +0 -8
- package/lib/compose/getSlots.js.map +1 -1
- package/lib/compose/isResolvedShorthand.js +0 -1
- package/lib/compose/isResolvedShorthand.js.map +1 -1
- package/lib/compose/resolveShorthand.js +2 -6
- package/lib/compose/resolveShorthand.js.map +1 -1
- package/lib/hooks/useControllableState.js +6 -12
- package/lib/hooks/useControllableState.js.map +1 -1
- package/lib/hooks/useEventCallback.js +0 -1
- package/lib/hooks/useEventCallback.js.map +1 -1
- package/lib/hooks/useFirstMount.js +0 -3
- package/lib/hooks/useFirstMount.js.map +1 -1
- package/lib/hooks/useForceUpdate.js +0 -1
- package/lib/hooks/useForceUpdate.js.map +1 -1
- package/lib/hooks/useId.js +0 -3
- package/lib/hooks/useId.js.map +1 -1
- package/lib/hooks/useIsomorphicLayoutEffect.js +0 -1
- package/lib/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/lib/hooks/useMergedRefs.js +2 -3
- package/lib/hooks/useMergedRefs.js.map +1 -1
- package/lib/hooks/useOnClickOutside.js +8 -26
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useOnScrollOutside.js +0 -4
- package/lib/hooks/useOnScrollOutside.js.map +1 -1
- package/lib/hooks/usePrevious.js +0 -1
- package/lib/hooks/usePrevious.js.map +1 -1
- package/lib/hooks/useTimeout.js +2 -3
- package/lib/hooks/useTimeout.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/ssr/SSRContext.js +4 -11
- package/lib/ssr/SSRContext.js.map +1 -1
- package/lib/ssr/canUseDOM.js +2 -1
- package/lib/ssr/canUseDOM.js.map +1 -1
- package/lib/trigger/applyTriggerPropsToChildren.js +2 -6
- package/lib/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib/trigger/getTriggerChild.js +2 -3
- package/lib/trigger/getTriggerChild.js.map +1 -1
- package/lib/trigger/isFluentTrigger.js.map +1 -1
- package/lib/utils/getNativeElementProps.js +0 -2
- package/lib/utils/getNativeElementProps.js.map +1 -1
- package/lib/utils/getRTLSafeKey.js +0 -2
- package/lib/utils/getRTLSafeKey.js.map +1 -1
- package/lib/utils/getReactCallbackName.js +0 -3
- package/lib/utils/getReactCallbackName.js.map +1 -1
- package/lib/utils/index.js +2 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/isHTMLElement.js +15 -0
- package/lib/utils/isHTMLElement.js.map +1 -0
- package/lib/utils/isInteractiveHTMLElement.js +22 -0
- package/lib/utils/isInteractiveHTMLElement.js.map +1 -0
- package/lib/utils/mergeCallbacks.js.map +1 -1
- package/lib/utils/omit.js +0 -2
- package/lib/utils/omit.js.map +1 -1
- package/lib/utils/properties.js +7 -36
- package/lib/utils/properties.js.map +1 -1
- package/lib-amd/index.js +3 -2
- package/lib-amd/index.js.map +1 -1
- package/lib-amd/utils/index.js +3 -2
- package/lib-amd/utils/index.js.map +1 -1
- package/lib-amd/utils/isHTMLElement.js +23 -0
- package/lib-amd/utils/isHTMLElement.js.map +1 -0
- package/lib-amd/utils/isInteractiveHTMLElement.js +25 -0
- package/lib-amd/utils/isInteractiveHTMLElement.js.map +1 -0
- package/lib-commonjs/compose/getSlots.js +0 -12
- package/lib-commonjs/compose/getSlots.js.map +1 -1
- package/lib-commonjs/compose/index.js +0 -5
- package/lib-commonjs/compose/index.js.map +1 -1
- package/lib-commonjs/compose/isResolvedShorthand.js +0 -4
- package/lib-commonjs/compose/isResolvedShorthand.js.map +1 -1
- package/lib-commonjs/compose/resolveShorthand.js +2 -9
- package/lib-commonjs/compose/resolveShorthand.js.map +1 -1
- package/lib-commonjs/compose/types.js.map +1 -1
- package/lib-commonjs/hooks/index.js +0 -12
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.js +6 -14
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/lib-commonjs/hooks/useEventCallback.js +0 -5
- package/lib-commonjs/hooks/useEventCallback.js.map +1 -1
- package/lib-commonjs/hooks/useFirstMount.js +0 -6
- package/lib-commonjs/hooks/useFirstMount.js.map +1 -1
- package/lib-commonjs/hooks/useForceUpdate.js +0 -4
- package/lib-commonjs/hooks/useForceUpdate.js.map +1 -1
- package/lib-commonjs/hooks/useId.js +0 -8
- package/lib-commonjs/hooks/useId.js.map +1 -1
- package/lib-commonjs/hooks/useIsomorphicLayoutEffect.js +0 -4
- package/lib-commonjs/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/lib-commonjs/hooks/useMergedRefs.js +2 -6
- package/lib-commonjs/hooks/useMergedRefs.js.map +1 -1
- package/lib-commonjs/hooks/useOnClickOutside.js +8 -30
- package/lib-commonjs/hooks/useOnClickOutside.js.map +1 -1
- package/lib-commonjs/hooks/useOnScrollOutside.js +0 -8
- package/lib-commonjs/hooks/useOnScrollOutside.js.map +1 -1
- package/lib-commonjs/hooks/usePrevious.js +0 -4
- package/lib-commonjs/hooks/usePrevious.js.map +1 -1
- package/lib-commonjs/hooks/useTimeout.js +2 -6
- package/lib-commonjs/hooks/useTimeout.js.map +1 -1
- package/lib-commonjs/index.js +9 -13
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/ssr/SSRContext.js +4 -17
- package/lib-commonjs/ssr/SSRContext.js.map +1 -1
- package/lib-commonjs/ssr/canUseDOM.js +2 -3
- package/lib-commonjs/ssr/canUseDOM.js.map +1 -1
- package/lib-commonjs/ssr/index.js +0 -3
- package/lib-commonjs/ssr/index.js.map +1 -1
- package/lib-commonjs/trigger/applyTriggerPropsToChildren.js +2 -10
- package/lib-commonjs/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib-commonjs/trigger/getTriggerChild.js +2 -7
- package/lib-commonjs/trigger/getTriggerChild.js.map +1 -1
- package/lib-commonjs/trigger/index.js +0 -5
- package/lib-commonjs/trigger/index.js.map +1 -1
- package/lib-commonjs/trigger/isFluentTrigger.js +0 -2
- package/lib-commonjs/trigger/isFluentTrigger.js.map +1 -1
- package/lib-commonjs/trigger/types.js.map +1 -1
- package/lib-commonjs/utils/clamp.js +0 -2
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getNativeElementProps.js +0 -6
- package/lib-commonjs/utils/getNativeElementProps.js.map +1 -1
- package/lib-commonjs/utils/getRTLSafeKey.js +0 -4
- package/lib-commonjs/utils/getRTLSafeKey.js.map +1 -1
- package/lib-commonjs/utils/getReactCallbackName.js +0 -5
- package/lib-commonjs/utils/getReactCallbackName.js.map +1 -1
- package/lib-commonjs/utils/index.js +2 -9
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/isHTMLElement.js +22 -0
- package/lib-commonjs/utils/isHTMLElement.js.map +1 -0
- package/lib-commonjs/utils/isInteractiveHTMLElement.js +29 -0
- package/lib-commonjs/utils/isInteractiveHTMLElement.js.map +1 -0
- package/lib-commonjs/utils/mergeCallbacks.js +0 -2
- package/lib-commonjs/utils/mergeCallbacks.js.map +1 -1
- package/lib-commonjs/utils/omit.js +0 -4
- package/lib-commonjs/utils/omit.js.map +1 -1
- package/lib-commonjs/utils/properties.js +7 -38
- package/lib-commonjs/utils/properties.js.map +1 -1
- package/package.json +2 -2
- package/lib/utils/shouldPreventDefaultOnKeyDown.js +0 -25
- package/lib/utils/shouldPreventDefaultOnKeyDown.js.map +0 -1
- package/lib-amd/utils/shouldPreventDefaultOnKeyDown.js +0 -26
- package/lib-amd/utils/shouldPreventDefaultOnKeyDown.js.map +0 -1
- package/lib-commonjs/utils/shouldPreventDefaultOnKeyDown.js +0 -35
- package/lib-commonjs/utils/shouldPreventDefaultOnKeyDown.js.map +0 -1
@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useOnClickOutside = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const useEventCallback_1 = /*#__PURE__*/require("./useEventCallback");
|
11
9
|
/**
|
12
10
|
* @internal
|
13
11
|
* Utility to perform checks where a click/touch event was made outside a component
|
14
12
|
*/
|
15
|
-
|
16
|
-
|
17
13
|
const useOnClickOutside = options => {
|
18
14
|
const {
|
19
15
|
refs,
|
@@ -26,9 +22,7 @@ const useOnClickOutside = options => {
|
|
26
22
|
useIFrameFocus(!disabled, element, callback);
|
27
23
|
const listener = useEventCallback_1.useEventCallback(ev => {
|
28
24
|
const contains = containsProp || ((parent, child) => !!(parent === null || parent === void 0 ? void 0 : parent.contains(child)));
|
29
|
-
|
30
25
|
const isOutside = refs.every(ref => !contains(ref.current || null, ev.target));
|
31
|
-
|
32
26
|
if (isOutside && !disabled) {
|
33
27
|
callback(ev);
|
34
28
|
}
|
@@ -38,25 +32,21 @@ const useOnClickOutside = options => {
|
|
38
32
|
// Note this depends on a deprecated but extremely well supported quirk of the web platform
|
39
33
|
// https://github.com/facebook/react/issues/20074
|
40
34
|
let currentEvent = getWindowEvent(window);
|
41
|
-
|
42
35
|
const conditionalHandler = event => {
|
43
36
|
// Skip if this event is the same as the one running when we added the handlers
|
44
37
|
if (event === currentEvent) {
|
45
38
|
currentEvent = undefined;
|
46
39
|
return;
|
47
40
|
}
|
48
|
-
|
49
41
|
listener(event);
|
50
42
|
};
|
51
|
-
|
52
43
|
if (!disabled) {
|
53
44
|
// use capture phase because React can update DOM before the event bubbles to the document
|
54
45
|
element === null || element === void 0 ? void 0 : element.addEventListener('click', conditionalHandler, true);
|
55
46
|
element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', conditionalHandler, true);
|
56
47
|
element === null || element === void 0 ? void 0 : element.addEventListener('contextmenu', conditionalHandler, true);
|
57
|
-
}
|
58
|
-
|
59
|
-
|
48
|
+
}
|
49
|
+
// Garbage collect this event after it's no longer useful to avoid memory leaks
|
60
50
|
timeoutId.current = window.setTimeout(() => {
|
61
51
|
currentEvent = undefined;
|
62
52
|
}, 1);
|
@@ -69,25 +59,19 @@ const useOnClickOutside = options => {
|
|
69
59
|
};
|
70
60
|
}, [listener, element, disabled]);
|
71
61
|
};
|
72
|
-
|
73
62
|
exports.useOnClickOutside = useOnClickOutside;
|
74
|
-
|
75
63
|
const getWindowEvent = target => {
|
76
64
|
var _a, _b, _c;
|
77
|
-
|
78
65
|
if (target) {
|
79
66
|
if (typeof target.window === 'object' && target.window === target) {
|
80
67
|
// eslint-disable-next-line deprecation/deprecation
|
81
68
|
return target.event;
|
82
|
-
}
|
83
|
-
|
84
|
-
|
69
|
+
}
|
70
|
+
// eslint-disable-next-line deprecation/deprecation
|
85
71
|
return (_c = (_b = (_a = target.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.event) !== null && _c !== void 0 ? _c : undefined;
|
86
72
|
}
|
87
|
-
|
88
73
|
return undefined;
|
89
74
|
};
|
90
|
-
|
91
75
|
const FUI_FRAME_EVENT = 'fuiframefocus';
|
92
76
|
/**
|
93
77
|
* Since click events do not propagate past iframes, we use focus to detect if a
|
@@ -103,32 +87,28 @@ const FUI_FRAME_EVENT = 'fuiframefocus';
|
|
103
87
|
* @param targetDocument - the document to dispatch events and set timeouts
|
104
88
|
* @param pollDuration - in milliseconds
|
105
89
|
*/
|
106
|
-
|
107
90
|
const useIFrameFocus = (enableFrameFocusDispatch, targetDocument, callback, pollDuration = 1000) => {
|
108
91
|
const timeoutRef = React.useRef();
|
109
92
|
const listener = useEventCallback_1.useEventCallback(e => {
|
110
93
|
if (callback) {
|
111
94
|
callback(e);
|
112
95
|
}
|
113
|
-
});
|
114
|
-
|
96
|
+
});
|
97
|
+
// Adds listener to the custom iframe focus event
|
115
98
|
React.useEffect(() => {
|
116
99
|
if (enableFrameFocusDispatch) {
|
117
100
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener(FUI_FRAME_EVENT, listener, true);
|
118
101
|
}
|
119
|
-
|
120
102
|
return () => {
|
121
103
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener(FUI_FRAME_EVENT, listener, true);
|
122
104
|
};
|
123
|
-
}, [targetDocument, enableFrameFocusDispatch, listener]);
|
124
|
-
|
105
|
+
}, [targetDocument, enableFrameFocusDispatch, listener]);
|
106
|
+
// Starts polling for the active element
|
125
107
|
React.useEffect(() => {
|
126
108
|
var _a;
|
127
|
-
|
128
109
|
if (enableFrameFocusDispatch) {
|
129
110
|
timeoutRef.current = (_a = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _a === void 0 ? void 0 : _a.setInterval(() => {
|
130
111
|
const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
|
131
|
-
|
132
112
|
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === 'IFRAME' || (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === 'WEBVIEW') {
|
133
113
|
const event = new CustomEvent(FUI_FRAME_EVENT, {
|
134
114
|
bubbles: true
|
@@ -137,10 +117,8 @@ const useIFrameFocus = (enableFrameFocusDispatch, targetDocument, callback, poll
|
|
137
117
|
}
|
138
118
|
}, pollDuration);
|
139
119
|
}
|
140
|
-
|
141
120
|
return () => {
|
142
121
|
var _a;
|
143
|
-
|
144
122
|
(_a = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _a === void 0 ? void 0 : _a.clearTimeout(timeoutRef.current);
|
145
123
|
};
|
146
124
|
}, [targetDocument, enableFrameFocusDispatch, pollDuration]);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\n\n/**\n * @internal\n */\nexport type UseOnClickOrScrollOutsideOptions = {\n /**\n * The element to listen for the click event\n */\n element: Document | undefined;\n /**\n * Refs to elements that check if the click is outside\n */\n refs: React.MutableRefObject<HTMLElement | undefined | null>[];\n\n /**\n * By default uses element.contains, but custom contain function can be provided\n * @param parentRef - provided parent ref\n * @param child - event target element\n */\n contains?(parent: HTMLElement | null, child: HTMLElement): boolean;\n\n /**\n * Disables event listeners\n */\n disabled?: boolean;\n\n /**\n * Called if the click is outside the element refs\n */\n callback: (ev: MouseEvent | TouchEvent) => void;\n};\n\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */\nexport const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) => {\n const { refs, callback, element, disabled, contains: containsProp } = options;\n const timeoutId = React.useRef<number | undefined>(undefined);\n useIFrameFocus(!disabled, element, callback as (e: Event) => void);\n\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n const contains: UseOnClickOrScrollOutsideOptions['contains'] =\n containsProp || ((parent, child) => !!parent?.contains(child));\n\n const isOutside = refs.every(ref => !contains(ref.current || null, ev.target as HTMLElement));\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n React.useEffect(() => {\n // Store the current event to avoid triggering handlers immediately\n // Note this depends on a deprecated but extremely well supported quirk of the web platform\n // https://github.com/facebook/react/issues/20074\n let currentEvent = getWindowEvent(window);\n\n const conditionalHandler = (event: MouseEvent | TouchEvent) => {\n // Skip if this event is the same as the one running when we added the handlers\n if (event === currentEvent) {\n currentEvent = undefined;\n return;\n }\n\n listener(event);\n };\n\n if (!disabled) {\n // use capture phase because React can update DOM before the event bubbles to the document\n element?.addEventListener('click', conditionalHandler, true);\n element?.addEventListener('touchstart', conditionalHandler, true);\n element?.addEventListener('contextmenu', conditionalHandler, true);\n }\n\n // Garbage collect this event after it's no longer useful to avoid memory leaks\n timeoutId.current = window.setTimeout(() => {\n currentEvent = undefined;\n }, 1);\n\n return () => {\n element?.removeEventListener('click', conditionalHandler, true);\n element?.removeEventListener('touchstart', conditionalHandler, true);\n element?.removeEventListener('contextmenu', conditionalHandler, true);\n\n clearTimeout(timeoutId.current);\n currentEvent = undefined;\n };\n }, [listener, element, disabled]);\n};\n\nconst getWindowEvent = (target: Node | Window): Event | undefined => {\n if (target) {\n if (typeof (target as Window).window === 'object' && (target as Window).window === target) {\n // eslint-disable-next-line deprecation/deprecation\n return target.event;\n }\n\n // eslint-disable-next-line deprecation/deprecation\n return (target as Node).ownerDocument?.defaultView?.event ?? undefined;\n }\n\n return undefined;\n};\n\nconst FUI_FRAME_EVENT = 'fuiframefocus';\n\n/**\n * Since click events do not propagate past iframes, we use focus to detect if a\n * click has happened inside an iframe, since the only ways of focusing inside an\n * iframe are:\n * - clicking inside\n * - tabbing inside\n *\n * Polls the value of `document.activeElement`. If it is an iframe, then dispatch\n * a custom DOM event. When the custom event is received call the provided callback\n *\n * @param enableFrameFocusDispatch - boolean flag to start dispatching events\n * @param targetDocument - the document to dispatch events and set timeouts\n * @param pollDuration - in milliseconds\n */\nconst useIFrameFocus = (\n enableFrameFocusDispatch: boolean,\n targetDocument: Document | undefined,\n callback: (e: Event) => void,\n pollDuration: number = 1000,\n) => {\n const timeoutRef = React.useRef<number>();\n\n const listener = useEventCallback((e: Event) => {\n if (callback) {\n callback(e);\n }\n });\n\n // Adds listener to the custom iframe focus event\n React.useEffect(() => {\n if (enableFrameFocusDispatch) {\n targetDocument?.addEventListener(FUI_FRAME_EVENT, listener, true);\n }\n return () => {\n targetDocument?.removeEventListener(FUI_FRAME_EVENT, listener, true);\n };\n }, [targetDocument, enableFrameFocusDispatch, listener]);\n\n // Starts polling for the active element\n React.useEffect(() => {\n if (enableFrameFocusDispatch) {\n timeoutRef.current = targetDocument?.defaultView?.setInterval(() => {\n const activeElement = targetDocument?.activeElement;\n if (activeElement?.tagName === 'IFRAME' || activeElement?.tagName === 'WEBVIEW') {\n const event = new CustomEvent(FUI_FRAME_EVENT, { bubbles: true });\n activeElement.dispatchEvent(event);\n }\n }, pollDuration);\n }\n return () => {\n targetDocument?.defaultView?.clearTimeout(timeoutRef.current);\n };\n }, [targetDocument, enableFrameFocusDispatch, pollDuration]);\n};\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"mappings":"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","names":["useOnClickOutside","options","refs","callback","element","disabled","contains","containsProp","timeoutId","React","useRef","undefined","useIFrameFocus","listener","useEventCallback_1","ev","parent","child","isOutside","every","ref","current","target","useEffect","currentEvent","getWindowEvent","window","conditionalHandler","event","addEventListener","setTimeout","removeEventListener","clearTimeout","exports","ownerDocument","defaultView","FUI_FRAME_EVENT","enableFrameFocusDispatch","targetDocument","pollDuration","timeoutRef","e","setInterval","activeElement","tagName","CustomEvent","bubbles","dispatchEvent"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\n\n/**\n * @internal\n */\nexport type UseOnClickOrScrollOutsideOptions = {\n /**\n * The element to listen for the click event\n */\n element: Document | undefined;\n /**\n * Refs to elements that check if the click is outside\n */\n refs: React.MutableRefObject<HTMLElement | undefined | null>[];\n\n /**\n * By default uses element.contains, but custom contain function can be provided\n * @param parentRef - provided parent ref\n * @param child - event target element\n */\n contains?(parent: HTMLElement | null, child: HTMLElement): boolean;\n\n /**\n * Disables event listeners\n */\n disabled?: boolean;\n\n /**\n * Called if the click is outside the element refs\n */\n callback: (ev: MouseEvent | TouchEvent) => void;\n};\n\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */\nexport const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) => {\n const { refs, callback, element, disabled, contains: containsProp } = options;\n const timeoutId = React.useRef<number | undefined>(undefined);\n useIFrameFocus(!disabled, element, callback as (e: Event) => void);\n\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n const contains: UseOnClickOrScrollOutsideOptions['contains'] =\n containsProp || ((parent, child) => !!parent?.contains(child));\n\n const isOutside = refs.every(ref => !contains(ref.current || null, ev.target as HTMLElement));\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n React.useEffect(() => {\n // Store the current event to avoid triggering handlers immediately\n // Note this depends on a deprecated but extremely well supported quirk of the web platform\n // https://github.com/facebook/react/issues/20074\n let currentEvent = getWindowEvent(window);\n\n const conditionalHandler = (event: MouseEvent | TouchEvent) => {\n // Skip if this event is the same as the one running when we added the handlers\n if (event === currentEvent) {\n currentEvent = undefined;\n return;\n }\n\n listener(event);\n };\n\n if (!disabled) {\n // use capture phase because React can update DOM before the event bubbles to the document\n element?.addEventListener('click', conditionalHandler, true);\n element?.addEventListener('touchstart', conditionalHandler, true);\n element?.addEventListener('contextmenu', conditionalHandler, true);\n }\n\n // Garbage collect this event after it's no longer useful to avoid memory leaks\n timeoutId.current = window.setTimeout(() => {\n currentEvent = undefined;\n }, 1);\n\n return () => {\n element?.removeEventListener('click', conditionalHandler, true);\n element?.removeEventListener('touchstart', conditionalHandler, true);\n element?.removeEventListener('contextmenu', conditionalHandler, true);\n\n clearTimeout(timeoutId.current);\n currentEvent = undefined;\n };\n }, [listener, element, disabled]);\n};\n\nconst getWindowEvent = (target: Node | Window): Event | undefined => {\n if (target) {\n if (typeof (target as Window).window === 'object' && (target as Window).window === target) {\n // eslint-disable-next-line deprecation/deprecation\n return target.event;\n }\n\n // eslint-disable-next-line deprecation/deprecation\n return (target as Node).ownerDocument?.defaultView?.event ?? undefined;\n }\n\n return undefined;\n};\n\nconst FUI_FRAME_EVENT = 'fuiframefocus';\n\n/**\n * Since click events do not propagate past iframes, we use focus to detect if a\n * click has happened inside an iframe, since the only ways of focusing inside an\n * iframe are:\n * - clicking inside\n * - tabbing inside\n *\n * Polls the value of `document.activeElement`. If it is an iframe, then dispatch\n * a custom DOM event. When the custom event is received call the provided callback\n *\n * @param enableFrameFocusDispatch - boolean flag to start dispatching events\n * @param targetDocument - the document to dispatch events and set timeouts\n * @param pollDuration - in milliseconds\n */\nconst useIFrameFocus = (\n enableFrameFocusDispatch: boolean,\n targetDocument: Document | undefined,\n callback: (e: Event) => void,\n pollDuration: number = 1000,\n) => {\n const timeoutRef = React.useRef<number>();\n\n const listener = useEventCallback((e: Event) => {\n if (callback) {\n callback(e);\n }\n });\n\n // Adds listener to the custom iframe focus event\n React.useEffect(() => {\n if (enableFrameFocusDispatch) {\n targetDocument?.addEventListener(FUI_FRAME_EVENT, listener, true);\n }\n return () => {\n targetDocument?.removeEventListener(FUI_FRAME_EVENT, listener, true);\n };\n }, [targetDocument, enableFrameFocusDispatch, listener]);\n\n // Starts polling for the active element\n React.useEffect(() => {\n if (enableFrameFocusDispatch) {\n timeoutRef.current = targetDocument?.defaultView?.setInterval(() => {\n const activeElement = targetDocument?.activeElement;\n if (activeElement?.tagName === 'IFRAME' || activeElement?.tagName === 'WEBVIEW') {\n const event = new CustomEvent(FUI_FRAME_EVENT, { bubbles: true });\n activeElement.dispatchEvent(event);\n }\n }, pollDuration);\n }\n return () => {\n targetDocument?.defaultView?.clearTimeout(timeoutRef.current);\n };\n }, [targetDocument, enableFrameFocusDispatch, pollDuration]);\n};\n"]}
|
@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useOnScrollOutside = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const useEventCallback_1 = /*#__PURE__*/require("./useEventCallback");
|
11
9
|
/**
|
12
10
|
* @internal
|
13
11
|
* Utility to perform checks where a click/touch event was made outside a component
|
14
12
|
*/
|
15
|
-
|
16
|
-
|
17
13
|
const useOnScrollOutside = options => {
|
18
14
|
const {
|
19
15
|
refs,
|
@@ -24,9 +20,7 @@ const useOnScrollOutside = options => {
|
|
24
20
|
} = options;
|
25
21
|
const listener = useEventCallback_1.useEventCallback(ev => {
|
26
22
|
const contains = containsProp || ((parent, child) => !!(parent === null || parent === void 0 ? void 0 : parent.contains(child)));
|
27
|
-
|
28
23
|
const isOutside = refs.every(ref => !contains(ref.current || null, ev.target));
|
29
|
-
|
30
24
|
if (isOutside && !disabled) {
|
31
25
|
callback(ev);
|
32
26
|
}
|
@@ -36,13 +30,11 @@ const useOnScrollOutside = options => {
|
|
36
30
|
element === null || element === void 0 ? void 0 : element.addEventListener('wheel', listener);
|
37
31
|
element === null || element === void 0 ? void 0 : element.addEventListener('touchmove', listener);
|
38
32
|
}
|
39
|
-
|
40
33
|
return () => {
|
41
34
|
element === null || element === void 0 ? void 0 : element.removeEventListener('wheel', listener);
|
42
35
|
element === null || element === void 0 ? void 0 : element.removeEventListener('touchmove', listener);
|
43
36
|
};
|
44
37
|
}, [listener, element, disabled]);
|
45
38
|
};
|
46
|
-
|
47
39
|
exports.useOnScrollOutside = useOnScrollOutside;
|
48
40
|
//# sourceMappingURL=useOnScrollOutside.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;;AAIO,MAAMA,kBAAkB,GAAIC,OAAyC,IAAI;EAC9E,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAE,GAAGN,OAAO;EAE7E,MAAMO,QAAQ,GAAGC,mCAAgB,CAAEC,EAA2B,IAAI;IAChE,MAAMJ,QAAQ,GACZC,YAAY,KAAK,CAACI,MAAM,EAAEC,KAAK,KAAK,CAAC,EAACD,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEL,QAAQ,CAACM,KAAK,CAAC,EAAC;IAEhE,MAAMC,SAAS,GAAGX,IAAI,CAACY,KAAK,CAACC,GAAG,IAAI,CAACT,QAAQ,CAACS,GAAG,CAACC,OAAO,IAAI,IAAI,EAAEN,EAAE,CAACO,MAAqB,CAAC,CAAC;IAC7F,IAAIJ,SAAS,IAAI,CAACR,QAAQ,EAAE;MAC1BF,QAAQ,CAACO,EAAE,CAAC;;EAEhB,CAAC,CAAC;EAEFQ,KAAK,CAACC,SAAS,CAAC,MAAK;IACnB,IAAI,CAACd,QAAQ,EAAE;MACbD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEgB,gBAAgB,CAAC,OAAO,EAAEZ,QAAQ,CAAC;MAC5CJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEgB,gBAAgB,CAAC,WAAW,EAAEZ,QAAQ,CAAC;;IAGlD,OAAO,MAAK;MACVJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEiB,mBAAmB,CAAC,OAAO,EAAEb,QAAQ,CAAC;MAC/CJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEiB,mBAAmB,CAAC,WAAW,EAAEb,QAAQ,CAAC;IACrD,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,EAAEJ,OAAO,EAAEC,QAAQ,CAAC,CAAC;AACnC,CAAC;AAxBYiB,0BAAkB","names":["useOnScrollOutside","options","refs","callback","element","disabled","contains","containsProp","listener","useEventCallback_1","ev","parent","child","isOutside","every","ref","current","target","React","useEffect","addEventListener","removeEventListener","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\nimport type { UseOnClickOrScrollOutsideOptions } from './useOnClickOutside';\n\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */\nexport const useOnScrollOutside = (options: UseOnClickOrScrollOutsideOptions) => {\n const { refs, callback, element, disabled, contains: containsProp } = options;\n\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n const contains: UseOnClickOrScrollOutsideOptions['contains'] =\n containsProp || ((parent, child) => !!parent?.contains(child));\n\n const isOutside = refs.every(ref => !contains(ref.current || null, ev.target as HTMLElement));\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n React.useEffect(() => {\n if (!disabled) {\n element?.addEventListener('wheel', listener);\n element?.addEventListener('touchmove', listener);\n }\n\n return () => {\n element?.removeEventListener('wheel', listener);\n element?.removeEventListener('touchmove', listener);\n };\n }, [listener, element, disabled]);\n};\n"]}
|
@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.usePrevious = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
8
|
/**
|
10
9
|
* @internal
|
11
10
|
*/
|
12
|
-
|
13
|
-
|
14
11
|
const usePrevious = value => {
|
15
12
|
const ref = React.useRef(null);
|
16
13
|
React.useEffect(() => {
|
@@ -18,6 +15,5 @@ const usePrevious = value => {
|
|
18
15
|
}, [value]);
|
19
16
|
return ref.current;
|
20
17
|
};
|
21
|
-
|
22
18
|
exports.usePrevious = usePrevious;
|
23
19
|
//# sourceMappingURL=usePrevious.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;;;AAGO,MAAMA,WAAW,GAAyBC,KAAgB,IAAI;EACnE,MAAMC,GAAG,GAAGC,KAAK,CAACC,MAAM,CAAmB,IAAI,CAAC;EAChDD,KAAK,CAACE,SAAS,CAAC,MAAK;IACnBH,GAAG,CAACI,OAAO,GAAGL,KAAK;EACrB,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACX,OAAOC,GAAG,CAACI,OAAO;AACpB,CAAC;AANYC,mBAAW","names":["usePrevious","value","ref","React","useRef","useEffect","current","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/usePrevious.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport const usePrevious = <ValueType = unknown>(value: ValueType) => {\n const ref = React.useRef<ValueType | null>(null);\n React.useEffect(() => {\n ref.current = value;\n }, [value]);\n return ref.current;\n};\n"]}
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useTimeout = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
8
|
/**
|
10
9
|
* @internal
|
@@ -14,8 +13,6 @@ const React = /*#__PURE__*/require("react");
|
|
14
13
|
*
|
15
14
|
* @returns A pair of [setTimeout, clearTimeout] that are stable between renders.
|
16
15
|
*/
|
17
|
-
|
18
|
-
|
19
16
|
function useTimeout() {
|
20
17
|
const [timeout] = React.useState(() => ({
|
21
18
|
id: undefined,
|
@@ -29,11 +26,10 @@ function useTimeout() {
|
|
29
26
|
timeout.id = undefined;
|
30
27
|
}
|
31
28
|
}
|
32
|
-
}));
|
33
|
-
|
29
|
+
}));
|
30
|
+
// Clean up the timeout when the component is unloaded
|
34
31
|
React.useEffect(() => timeout.clear, [timeout]);
|
35
32
|
return [timeout.set, timeout.clear];
|
36
33
|
}
|
37
|
-
|
38
34
|
exports.useTimeout = useTimeout;
|
39
35
|
//# sourceMappingURL=useTimeout.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;;;;;;;;AAQA,SAAgBA,UAAU;EACxB,MAAM,CAACC,OAAO,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,OAAO;IACtCC,EAAE,EAAEC,SAAsD;IAC1DC,GAAG,EAAE,CAACC,EAAc,EAAEC,KAAa,KAAI;MACrCP,OAAO,CAACQ,KAAK,EAAE;MACfR,OAAO,CAACG,EAAE,GAAGM,UAAU,CAACH,EAAE,EAAEC,KAAK,CAAC;IACpC,CAAC;IACDC,KAAK,EAAE,MAAK;MACV,IAAIR,OAAO,CAACG,EAAE,KAAKC,SAAS,EAAE;QAC5BM,YAAY,CAACV,OAAO,CAACG,EAAE,CAAC;QACxBH,OAAO,CAACG,EAAE,GAAGC,SAAS;;IAE1B;GACD,CAAC,CAAC;EAEH;EACAH,KAAK,CAACU,SAAS,CAAC,MAAMX,OAAO,CAACQ,KAAK,EAAE,CAACR,OAAO,CAAC,CAAC;EAE/C,OAAO,CAACA,OAAO,CAACK,GAAG,EAAEL,OAAO,CAACQ,KAAK,CAAU;AAC9C;AAnBAI","names":["useTimeout","timeout","React","useState","id","undefined","set","fn","delay","clear","setTimeout","clearTimeout","useEffect","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useTimeout.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n * Helper to manage a browser timeout.\n * Ensures that the timeout isn't set multiple times at once,\n * and is cleaned up when the component is unloaded.\n *\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */\nexport function useTimeout() {\n const [timeout] = React.useState(() => ({\n id: undefined as ReturnType<typeof setTimeout> | undefined,\n set: (fn: () => void, delay: number) => {\n timeout.clear();\n timeout.id = setTimeout(fn, delay);\n },\n clear: () => {\n if (timeout.id !== undefined) {\n clearTimeout(timeout.id);\n timeout.id = undefined;\n }\n },\n }));\n\n // Clean up the timeout when the component is unloaded\n React.useEffect(() => timeout.clear, [timeout]);\n\n return [timeout.set, timeout.clear] as const;\n}\n"]}
|
package/lib-commonjs/index.js
CHANGED
@@ -3,10 +3,8 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.isFluentTrigger = exports.getTriggerChild = exports.applyTriggerPropsToChildren = exports.
|
7
|
-
|
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.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;
|
8
7
|
var index_1 = /*#__PURE__*/require("./compose/index");
|
9
|
-
|
10
8
|
Object.defineProperty(exports, "getSlots", {
|
11
9
|
enumerable: true,
|
12
10
|
get: function () {
|
@@ -25,9 +23,7 @@ Object.defineProperty(exports, "isResolvedShorthand", {
|
|
25
23
|
return index_1.isResolvedShorthand;
|
26
24
|
}
|
27
25
|
});
|
28
|
-
|
29
26
|
var index_2 = /*#__PURE__*/require("./hooks/index");
|
30
|
-
|
31
27
|
Object.defineProperty(exports, "resetIdsForTests", {
|
32
28
|
enumerable: true,
|
33
29
|
get: function () {
|
@@ -100,9 +96,7 @@ Object.defineProperty(exports, "useTimeout", {
|
|
100
96
|
return index_2.useTimeout;
|
101
97
|
}
|
102
98
|
});
|
103
|
-
|
104
99
|
var index_3 = /*#__PURE__*/require("./ssr/index");
|
105
|
-
|
106
100
|
Object.defineProperty(exports, "canUseDOM", {
|
107
101
|
enumerable: true,
|
108
102
|
get: function () {
|
@@ -121,9 +115,7 @@ Object.defineProperty(exports, "SSRProvider", {
|
|
121
115
|
return index_3.SSRProvider;
|
122
116
|
}
|
123
117
|
});
|
124
|
-
|
125
118
|
var index_4 = /*#__PURE__*/require("./utils/index");
|
126
|
-
|
127
119
|
Object.defineProperty(exports, "clamp", {
|
128
120
|
enumerable: true,
|
129
121
|
get: function () {
|
@@ -154,15 +146,19 @@ Object.defineProperty(exports, "mergeCallbacks", {
|
|
154
146
|
return index_4.mergeCallbacks;
|
155
147
|
}
|
156
148
|
});
|
157
|
-
Object.defineProperty(exports, "
|
149
|
+
Object.defineProperty(exports, "isHTMLElement", {
|
158
150
|
enumerable: true,
|
159
151
|
get: function () {
|
160
|
-
return index_4.
|
152
|
+
return index_4.isHTMLElement;
|
153
|
+
}
|
154
|
+
});
|
155
|
+
Object.defineProperty(exports, "isInteractiveHTMLElement", {
|
156
|
+
enumerable: true,
|
157
|
+
get: function () {
|
158
|
+
return index_4.isInteractiveHTMLElement;
|
161
159
|
}
|
162
160
|
});
|
163
|
-
|
164
161
|
var index_5 = /*#__PURE__*/require("./trigger/index");
|
165
|
-
|
166
162
|
Object.defineProperty(exports, "applyTriggerPropsToChildren", {
|
167
163
|
enumerable: true,
|
168
164
|
get: function () {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
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,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 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"]}
|
@@ -4,17 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useIsSSR = exports.SSRProvider = exports.useSSRContext = exports.SSRContext = exports.defaultSSRContextValue = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const canUseDOM_1 = /*#__PURE__*/require("./canUseDOM");
|
11
9
|
/**
|
12
10
|
* Default context value to use in case there is no SSRProvider. This is fine for client-only apps.
|
13
11
|
*
|
14
12
|
* @internal
|
15
13
|
*/
|
16
|
-
|
17
|
-
|
18
14
|
exports.defaultSSRContextValue = {
|
19
15
|
current: 0
|
20
16
|
};
|
@@ -22,13 +18,10 @@ exports.SSRContext = /*#__PURE__*/React.createContext(undefined);
|
|
22
18
|
/**
|
23
19
|
* @internal
|
24
20
|
*/
|
25
|
-
|
26
21
|
function useSSRContext() {
|
27
22
|
var _a;
|
28
|
-
|
29
23
|
return (_a = React.useContext(exports.SSRContext)) !== null && _a !== void 0 ? _a : exports.defaultSSRContextValue;
|
30
24
|
}
|
31
|
-
|
32
25
|
exports.useSSRContext = useSSRContext;
|
33
26
|
/**
|
34
27
|
* When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids
|
@@ -36,7 +29,6 @@ exports.useSSRContext = useSSRContext;
|
|
36
29
|
*
|
37
30
|
* @public
|
38
31
|
*/
|
39
|
-
|
40
32
|
const SSRProvider = props => {
|
41
33
|
const [value] = React.useState(() => ({
|
42
34
|
current: 0
|
@@ -45,27 +37,24 @@ const SSRProvider = props => {
|
|
45
37
|
value: value
|
46
38
|
}, props.children);
|
47
39
|
};
|
48
|
-
|
49
40
|
exports.SSRProvider = SSRProvider;
|
50
41
|
/**
|
51
42
|
* Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay
|
52
43
|
* browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.
|
53
44
|
*/
|
54
|
-
|
55
45
|
function useIsSSR() {
|
56
46
|
const isInSSRContext = useSSRContext() !== exports.defaultSSRContextValue;
|
57
|
-
const [isSSR, setIsSSR] = React.useState(isInSSRContext);
|
47
|
+
const [isSSR, setIsSSR] = React.useState(isInSSRContext);
|
48
|
+
// If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the
|
58
49
|
// developer to add one.
|
59
|
-
|
60
50
|
if (process.env.NODE_ENV !== 'production') {
|
61
51
|
if (!isInSSRContext && !canUseDOM_1.canUseDOM()) {
|
62
52
|
// eslint-disable-next-line no-console
|
63
53
|
console.error(['@fluentui/react-components: ', 'When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are ' + 'generated between the client and server.', '\n', '\n', 'Check documentation at https://aka.ms/fluentui-ssr'].join(''));
|
64
54
|
}
|
65
|
-
}
|
55
|
+
}
|
56
|
+
// If on the client, and the component was initially server rendered, then schedule a layout effect to update the
|
66
57
|
// component after hydration.
|
67
|
-
|
68
|
-
|
69
58
|
if (canUseDOM_1.canUseDOM() && isInSSRContext) {
|
70
59
|
// This if statement technically breaks the rules of hooks, but is safe because the condition never changes after
|
71
60
|
// mounting.
|
@@ -74,9 +63,7 @@ function useIsSSR() {
|
|
74
63
|
setIsSSR(false);
|
75
64
|
}, []);
|
76
65
|
}
|
77
|
-
|
78
66
|
return isSSR;
|
79
67
|
}
|
80
|
-
|
81
68
|
exports.useIsSSR = useIsSSR;
|
82
69
|
//# sourceMappingURL=SSRContext.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
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,GAAaC,KAAK,IAAG;EAC3C,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 = 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"]}
|
@@ -7,11 +7,10 @@ exports.canUseDOM = void 0;
|
|
7
7
|
/**
|
8
8
|
* Verifies if an application can use DOM.
|
9
9
|
*/
|
10
|
-
|
11
10
|
function canUseDOM() {
|
12
|
-
return typeof window !== 'undefined' && !!(window.document &&
|
11
|
+
return typeof window !== 'undefined' && !!(window.document &&
|
12
|
+
// eslint-disable-next-line deprecation/deprecation
|
13
13
|
window.document.createElement);
|
14
14
|
}
|
15
|
-
|
16
15
|
exports.canUseDOM = canUseDOM;
|
17
16
|
//# sourceMappingURL=canUseDOM.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;;;AAGA,SAAgBA,SAAS;EACvB,OACE,OAAOC,MAAM,KAAK,WAAW,IAC7B,CAAC,EACCA,MAAM,CAACC,QAAQ;EACf;EACAD,MAAM,CAACC,QAAQ,CAACC,aAAa,CAC9B;AAEL;AATAC","names":["canUseDOM","window","document","createElement","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/ssr/canUseDOM.ts"],"sourcesContent":["/**\n * Verifies if an application can use DOM.\n */\nexport function canUseDOM(): boolean {\n return (\n typeof window !== 'undefined' &&\n !!(\n window.document &&\n // eslint-disable-next-line deprecation/deprecation\n window.document.createElement\n )\n );\n}\n"]}
|
@@ -3,10 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
-
|
9
7
|
tslib_1.__exportStar(require("./canUseDOM"), exports);
|
10
|
-
|
11
8
|
tslib_1.__exportStar(require("./SSRContext"), exports);
|
12
9
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-utilities/src/ssr/index.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/ssr/index.ts"],"sourcesContent":["export * from './canUseDOM';\nexport * from './SSRContext';\n"]}
|
@@ -4,40 +4,32 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.applyTriggerPropsToChildren = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const isFluentTrigger_1 = /*#__PURE__*/require("./isFluentTrigger");
|
11
9
|
/**
|
12
10
|
* @internal
|
13
11
|
* resolve the trigger props to the children, either by calling the render function, or cloning with the new props.
|
14
12
|
*/
|
15
|
-
|
16
|
-
|
17
13
|
function applyTriggerPropsToChildren(children, triggerChildProps) {
|
18
14
|
if (typeof children === 'function') {
|
19
15
|
return children(triggerChildProps);
|
20
16
|
} else if (children) {
|
21
17
|
return cloneTriggerTree(children, triggerChildProps);
|
22
|
-
}
|
18
|
+
}
|
19
|
+
// Components in React should return either JSX elements or "null", otherwise React will throw:
|
23
20
|
// Nothing was returned from render.
|
24
21
|
// This usually means a return statement is missing. Or, to render nothing, return null.
|
25
|
-
|
26
|
-
|
27
22
|
return children || null;
|
28
23
|
}
|
29
|
-
|
30
24
|
exports.applyTriggerPropsToChildren = applyTriggerPropsToChildren;
|
31
25
|
/**
|
32
26
|
* Clones a React element tree, and applies the given props to the first grandchild that is not
|
33
27
|
* a FluentTriggerComponent or React Fragment (the same element returned by {@link getTriggerChild}).
|
34
28
|
*/
|
35
|
-
|
36
29
|
function cloneTriggerTree(child, triggerProps) {
|
37
30
|
if (!React.isValidElement(child) || child.type === React.Fragment) {
|
38
31
|
throw new Error('A trigger element must be a single element for this component. ' + "Please ensure that you're not using React Fragments.");
|
39
32
|
}
|
40
|
-
|
41
33
|
if (isFluentTrigger_1.isFluentTrigger(child)) {
|
42
34
|
const grandchild = cloneTriggerTree(child.props.children, triggerProps);
|
43
35
|
return React.cloneElement(child, undefined, grandchild);
|