@fluentui/react-positioning 0.0.0-nightlyf3ce1fbe1d20211110.1 → 0.0.0-nightlyf8be6a7c6520220106.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. package/CHANGELOG.json +114 -8
  2. package/CHANGELOG.md +35 -7
  3. package/dist/react-positioning.d.ts +28 -0
  4. package/lib/createArrowStyles.d.ts +27 -0
  5. package/lib/createArrowStyles.js +73 -0
  6. package/lib/createArrowStyles.js.map +1 -0
  7. package/lib/createVirtualElementFromClick.js +17 -15
  8. package/lib/createVirtualElementFromClick.js.map +1 -1
  9. package/lib/index.d.ts +2 -1
  10. package/lib/index.js +2 -1
  11. package/lib/index.js.map +1 -1
  12. package/lib/usePopper.js +362 -312
  13. package/lib/usePopper.js.map +1 -1
  14. package/lib/usePopperMouseTarget.js +28 -22
  15. package/lib/usePopperMouseTarget.js.map +1 -1
  16. package/lib/utils/getBasePlacement.js +1 -1
  17. package/lib/utils/getBasePlacement.js.map +1 -1
  18. package/lib/utils/getBoundary.js +15 -10
  19. package/lib/utils/getBoundary.js.map +1 -1
  20. package/lib/utils/getReactFiberFromNode.js +39 -35
  21. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  22. package/lib/utils/getScrollParent.js +46 -32
  23. package/lib/utils/getScrollParent.js.map +1 -1
  24. package/lib/utils/mergeArrowOffset.js +29 -24
  25. package/lib/utils/mergeArrowOffset.js.map +1 -1
  26. package/lib/utils/positioningHelper.d.ts +2 -2
  27. package/lib/utils/positioningHelper.js +38 -30
  28. package/lib/utils/positioningHelper.js.map +1 -1
  29. package/lib/utils/resolvePositioningShorthand.js +57 -19
  30. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  31. package/lib/utils/useCallbackRef.js +35 -29
  32. package/lib/utils/useCallbackRef.js.map +1 -1
  33. package/lib-commonjs/createArrowStyles.d.ts +27 -0
  34. package/lib-commonjs/createArrowStyles.js +83 -0
  35. package/lib-commonjs/createArrowStyles.js.map +1 -0
  36. package/lib-commonjs/createVirtualElementFromClick.js +23 -16
  37. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  38. package/lib-commonjs/index.d.ts +2 -1
  39. package/lib-commonjs/index.js +28 -6
  40. package/lib-commonjs/index.js.map +1 -1
  41. package/lib-commonjs/types.js +4 -1
  42. package/lib-commonjs/types.js.map +1 -1
  43. package/lib-commonjs/usePopper.js +376 -316
  44. package/lib-commonjs/usePopper.js.map +1 -1
  45. package/lib-commonjs/usePopperMouseTarget.js +38 -25
  46. package/lib-commonjs/usePopperMouseTarget.js.map +1 -1
  47. package/lib-commonjs/utils/getBasePlacement.js +7 -2
  48. package/lib-commonjs/utils/getBasePlacement.js.map +1 -1
  49. package/lib-commonjs/utils/getBoundary.js +23 -12
  50. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  51. package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
  52. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  53. package/lib-commonjs/utils/getScrollParent.js +53 -33
  54. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  55. package/lib-commonjs/utils/index.js +14 -2
  56. package/lib-commonjs/utils/index.js.map +1 -1
  57. package/lib-commonjs/utils/mergeArrowOffset.js +35 -25
  58. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  59. package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
  60. package/lib-commonjs/utils/positioningHelper.js +46 -31
  61. package/lib-commonjs/utils/positioningHelper.js.map +1 -1
  62. package/lib-commonjs/utils/resolvePositioningShorthand.js +65 -22
  63. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  64. package/lib-commonjs/utils/useCallbackRef.js +45 -32
  65. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  66. package/package.json +8 -8
package/lib/usePopper.js CHANGED
@@ -1,29 +1,31 @@
1
1
  import { useEventCallback, useIsomorphicLayoutEffect, useFirstMount, canUseDOM } from '@fluentui/react-utilities';
2
2
  import { useFluent } from '@fluentui/react-shared-contexts';
3
- import { getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, getBasePlacement, } from './utils/index';
3
+ import { getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, getBasePlacement } from './utils/index';
4
4
  import * as PopperJs from '@popperjs/core';
5
- import * as React from 'react';
6
- //
5
+ import * as React from 'react'; //
7
6
  // Dev utils to detect if nodes have "autoFocus" props.
8
7
  //
8
+
9
9
  /**
10
10
  * Detects if a passed HTML node has "autoFocus" prop on a React's fiber. Is needed as React handles autofocus behavior
11
11
  * in React DOM and will not pass "autoFocus" to an actual HTML.
12
12
  */
13
+
13
14
  function hasAutofocusProp(node) {
14
- var _a;
15
- // https://github.com/facebook/react/blob/848bb2426e44606e0a55dfe44c7b3ece33772485/packages/react-dom/src/client/ReactDOMHostConfig.js#L157-L166
16
- const isAutoFocusableElement = node.nodeName === 'BUTTON' ||
17
- node.nodeName === 'INPUT' ||
18
- node.nodeName === 'SELECT' ||
19
- node.nodeName === 'TEXTAREA';
20
- if (isAutoFocusableElement) {
21
- return !!((_a = getReactFiberFromNode(node)) === null || _a === void 0 ? void 0 : _a.pendingProps.autoFocus);
22
- }
23
- return false;
15
+ var _a; // https://github.com/facebook/react/blob/848bb2426e44606e0a55dfe44c7b3ece33772485/packages/react-dom/src/client/ReactDOMHostConfig.js#L157-L166
16
+
17
+
18
+ const isAutoFocusableElement = node.nodeName === 'BUTTON' || node.nodeName === 'INPUT' || node.nodeName === 'SELECT' || node.nodeName === 'TEXTAREA';
19
+
20
+ if (isAutoFocusableElement) {
21
+ return !!((_a = getReactFiberFromNode(node)) === null || _a === void 0 ? void 0 : _a.pendingProps.autoFocus);
22
+ }
23
+
24
+ return false;
24
25
  }
26
+
25
27
  function hasAutofocusFilter(node) {
26
- return hasAutofocusProp(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
28
+ return hasAutofocusProp(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
27
29
  }
28
30
  /**
29
31
  * Provides a callback to resolve Popper options, it's stable and should be used as a dependency to trigger updates
@@ -32,188 +34,230 @@ function hasAutofocusFilter(node) {
32
34
  * A callback is used there intentionally as some of Popper.js modifiers require DOM nodes (targer, container, arrow)
33
35
  * that can't be resolved properly during an initial rendering.
34
36
  */
37
+
38
+
35
39
  function usePopperOptions(options, popperOriginalPositionRef) {
36
- const { arrowPadding, autoSize, coverTarget, flipBoundary, offset, onStateUpdate, overflowBoundary,
40
+ const {
41
+ arrowPadding,
42
+ autoSize,
43
+ coverTarget,
44
+ flipBoundary,
45
+ offset,
46
+ onStateUpdate,
47
+ overflowBoundary,
37
48
  // eslint-disable-next-line @typescript-eslint/naming-convention
38
- unstable_disableTether, pinned, } = options;
39
- const isRtl = useFluent().dir === 'rtl';
40
- const placement = getPlacement(options.align, options.position, isRtl);
41
- const strategy = options.positionFixed ? 'fixed' : 'absolute';
42
- const handleStateUpdate = useEventCallback(({ state }) => {
43
- if (onStateUpdate) {
44
- onStateUpdate(state);
45
- }
46
- });
47
- const offsetModifier = React.useMemo(() => offset
48
- ? {
49
- name: 'offset',
50
- options: { offset: isRtl ? applyRtlToOffset(offset) : offset },
49
+ unstable_disableTether,
50
+ pinned
51
+ } = options;
52
+ const isRtl = useFluent().dir === 'rtl';
53
+ const placement = getPlacement(options.align, options.position, isRtl);
54
+ const strategy = options.positionFixed ? 'fixed' : 'absolute';
55
+ const handleStateUpdate = useEventCallback(({
56
+ state
57
+ }) => {
58
+ if (onStateUpdate) {
59
+ onStateUpdate(state);
60
+ }
61
+ });
62
+ const offsetModifier = React.useMemo(() => offset ? {
63
+ name: 'offset',
64
+ options: {
65
+ offset: isRtl ? applyRtlToOffset(offset) : offset
66
+ }
67
+ } : null, [offset, isRtl]);
68
+ return React.useCallback((target, container, arrow) => {
69
+ var _a;
70
+
71
+ const scrollParentElement = getScrollParent(container);
72
+ const hasScrollableElement = scrollParentElement ? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.body) : false;
73
+ const modifiers = [
74
+ /**
75
+ * We are setting the position to `fixed` in the first effect to prevent scroll jumps in case of the content
76
+ * with managed focus. Modifier sets the position to `fixed` before all other modifier effects. Another part of
77
+ * a patch modifies ".forceUpdate()" directly after a Popper will be created.
78
+ */
79
+ {
80
+ name: 'positionStyleFix',
81
+ enabled: true,
82
+ phase: 'afterWrite',
83
+ effect: ({
84
+ state,
85
+ instance
86
+ }) => {
87
+ // ".isFirstRun" is a part of our patch, on a first evaluation it will "undefined"
88
+ // should be disabled for subsequent runs as it breaks positioning for them
89
+ if (instance.isFirstRun !== false) {
90
+ popperOriginalPositionRef.current = state.elements.popper.style.position;
91
+ state.elements.popper.style.position = 'fixed';
51
92
  }
52
- : null, [offset, isRtl]);
53
- return React.useCallback((target, container, arrow) => {
54
- var _a;
55
- const scrollParentElement = getScrollParent(container);
56
- const hasScrollableElement = scrollParentElement
57
- ? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.body)
58
- : false;
59
- const modifiers = [
60
- /**
61
- * We are setting the position to `fixed` in the first effect to prevent scroll jumps in case of the content
62
- * with managed focus. Modifier sets the position to `fixed` before all other modifier effects. Another part of
63
- * a patch modifies ".forceUpdate()" directly after a Popper will be created.
64
- */
65
- {
66
- name: 'positionStyleFix',
67
- enabled: true,
68
- phase: 'afterWrite',
69
- effect: ({ state, instance }) => {
70
- // ".isFirstRun" is a part of our patch, on a first evaluation it will "undefined"
71
- // should be disabled for subsequent runs as it breaks positioning for them
72
- if (instance.isFirstRun !== false) {
73
- popperOriginalPositionRef.current = state.elements.popper.style.position;
74
- state.elements.popper.style.position = 'fixed';
75
- }
76
- return () => undefined;
77
- },
78
- requires: [],
79
- },
80
- { name: 'flip', options: { flipVariations: true } },
81
- /**
82
- * pinned disables the flip modifier by setting flip.enabled to false; this
83
- * disables automatic repositioning of the popper box; it will always be placed according to
84
- * the values of `align` and `position` props, regardless of the size of the component, the
85
- * reference element or the viewport.
86
- */
87
- pinned && { name: 'flip', enabled: false },
88
- /**
89
- * When the popper box is placed in the context of a scrollable element, we need to set
90
- * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent'
91
- * (default is 'viewport') so that the popper box will stick with the targetRef when we
92
- * scroll targetRef out of the viewport.
93
- */
94
- hasScrollableElement && { name: 'flip', options: { boundary: 'clippingParents' } },
95
- hasScrollableElement && { name: 'preventOverflow', options: { boundary: 'clippingParents' } },
96
- offsetModifier,
97
- /**
98
- * This modifier is necessary to retain behaviour from popper v1 where untethered poppers are allowed by
99
- * default. i.e. popper is still rendered fully in the viewport even if anchor element is no longer in the
100
- * viewport.
101
- */
102
- unstable_disableTether && {
103
- name: 'preventOverflow',
104
- options: { altAxis: unstable_disableTether === 'all', tether: false },
105
- },
106
- flipBoundary && {
107
- name: 'flip',
108
- options: {
109
- altBoundary: true,
110
- boundary: getBoundary(container, flipBoundary),
111
- },
112
- },
113
- overflowBoundary && {
114
- name: 'preventOverflow',
115
- options: {
116
- altBoundary: true,
117
- boundary: getBoundary(container, overflowBoundary),
118
- },
119
- },
120
- {
121
- name: 'onUpdate',
122
- enabled: true,
123
- phase: 'afterWrite',
124
- fn: handleStateUpdate,
125
- },
126
- {
127
- // Similar code as popper-maxsize-modifier: https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
128
- // popper-maxsize-modifier only calculates the max sizes.
129
- // This modifier can apply max sizes always, or apply the max sizes only when overflow is detected
130
- name: 'applyMaxSize',
131
- enabled: !!autoSize,
132
- phase: 'beforeWrite',
133
- requiresIfExists: ['offset', 'preventOverflow', 'flip'],
134
- options: {
135
- altBoundary: true,
136
- boundary: getBoundary(container, overflowBoundary),
137
- },
138
- fn({ state, options: modifierOptions }) {
139
- const overflow = PopperJs.detectOverflow(state, modifierOptions);
140
- const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
141
- const { width, height } = state.rects.popper;
142
- const basePlacement = getBasePlacement(state.placement);
143
- const widthProp = basePlacement === 'left' ? 'left' : 'right';
144
- const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
145
- const applyMaxWidth = autoSize === 'always' ||
146
- autoSize === 'width-always' ||
147
- (overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width'));
148
- const applyMaxHeight = autoSize === 'always' ||
149
- autoSize === 'height-always' ||
150
- (overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height'));
151
- if (applyMaxWidth) {
152
- state.styles.popper.maxWidth = `${width - overflow[widthProp] - x}px`;
153
- }
154
- if (applyMaxHeight) {
155
- state.styles.popper.maxHeight = `${height - overflow[heightProp] - y}px`;
156
- }
157
- },
158
- },
159
- /**
160
- * This modifier is necessary in order to render the pointer. Refs are resolved in effects, so it can't be
161
- * placed under computed modifiers. Deep merge is not required as this modifier has only these properties.
162
- */
163
- {
164
- name: 'arrow',
165
- enabled: !!arrow,
166
- options: { element: arrow, padding: arrowPadding },
167
- },
168
- /**
169
- * Modifies popper offsets to cover the reference rect, but still keep edge alignment
170
- */
171
- {
172
- name: 'coverTarget',
173
- enabled: !!coverTarget,
174
- phase: 'main',
175
- requiresIfExists: ['offset', 'preventOverflow', 'flip'],
176
- fn({ state }) {
177
- const basePlacement = getBasePlacement(state.placement);
178
- switch (basePlacement) {
179
- case 'bottom':
180
- state.modifiersData.popperOffsets.y -= state.rects.reference.height;
181
- break;
182
- case 'top':
183
- state.modifiersData.popperOffsets.y += state.rects.reference.height;
184
- break;
185
- case 'left':
186
- state.modifiersData.popperOffsets.x += state.rects.reference.width;
187
- break;
188
- case 'right':
189
- state.modifiersData.popperOffsets.x -= state.rects.reference.width;
190
- break;
191
- }
192
- },
193
- },
194
- ].filter(Boolean); // filter boolean conditional spreading values
195
- const popperOptions = {
196
- modifiers,
197
- placement,
198
- strategy,
199
- onFirstUpdate: state => handleStateUpdate({ state }),
93
+
94
+ return () => undefined;
95
+ },
96
+ requires: []
97
+ }, {
98
+ name: 'flip',
99
+ options: {
100
+ flipVariations: true
101
+ }
102
+ },
103
+ /**
104
+ * pinned disables the flip modifier by setting flip.enabled to false; this
105
+ * disables automatic repositioning of the popper box; it will always be placed according to
106
+ * the values of `align` and `position` props, regardless of the size of the component, the
107
+ * reference element or the viewport.
108
+ */
109
+ pinned && {
110
+ name: 'flip',
111
+ enabled: false
112
+ },
113
+ /**
114
+ * When the popper box is placed in the context of a scrollable element, we need to set
115
+ * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent'
116
+ * (default is 'viewport') so that the popper box will stick with the targetRef when we
117
+ * scroll targetRef out of the viewport.
118
+ */
119
+ hasScrollableElement && {
120
+ name: 'flip',
121
+ options: {
122
+ boundary: 'clippingParents'
123
+ }
124
+ }, hasScrollableElement && {
125
+ name: 'preventOverflow',
126
+ options: {
127
+ boundary: 'clippingParents'
128
+ }
129
+ }, offsetModifier,
130
+ /**
131
+ * This modifier is necessary to retain behaviour from popper v1 where untethered poppers are allowed by
132
+ * default. i.e. popper is still rendered fully in the viewport even if anchor element is no longer in the
133
+ * viewport.
134
+ */
135
+ unstable_disableTether && {
136
+ name: 'preventOverflow',
137
+ options: {
138
+ altAxis: unstable_disableTether === 'all',
139
+ tether: false
140
+ }
141
+ }, flipBoundary && {
142
+ name: 'flip',
143
+ options: {
144
+ altBoundary: true,
145
+ boundary: getBoundary(container, flipBoundary)
146
+ }
147
+ }, overflowBoundary && {
148
+ name: 'preventOverflow',
149
+ options: {
150
+ altBoundary: true,
151
+ boundary: getBoundary(container, overflowBoundary)
152
+ }
153
+ }, {
154
+ name: 'onUpdate',
155
+ enabled: true,
156
+ phase: 'afterWrite',
157
+ fn: handleStateUpdate
158
+ }, {
159
+ // Similar code as popper-maxsize-modifier: https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
160
+ // popper-maxsize-modifier only calculates the max sizes.
161
+ // This modifier can apply max sizes always, or apply the max sizes only when overflow is detected
162
+ name: 'applyMaxSize',
163
+ enabled: !!autoSize,
164
+ phase: 'beforeWrite',
165
+ requiresIfExists: ['offset', 'preventOverflow', 'flip'],
166
+ options: {
167
+ altBoundary: true,
168
+ boundary: getBoundary(container, overflowBoundary)
169
+ },
170
+
171
+ fn({
172
+ state,
173
+ options: modifierOptions
174
+ }) {
175
+ const overflow = PopperJs.detectOverflow(state, modifierOptions);
176
+ const {
177
+ x,
178
+ y
179
+ } = state.modifiersData.preventOverflow || {
180
+ x: 0,
181
+ y: 0
200
182
  };
201
- return popperOptions;
202
- }, [
203
- arrowPadding,
204
- autoSize,
205
- coverTarget,
206
- flipBoundary,
207
- offsetModifier,
208
- overflowBoundary,
209
- placement,
210
- strategy,
211
- unstable_disableTether,
212
- pinned,
213
- // These can be skipped from deps as they will not ever change
214
- handleStateUpdate,
215
- popperOriginalPositionRef,
216
- ]);
183
+ const {
184
+ width,
185
+ height
186
+ } = state.rects.popper;
187
+ const basePlacement = getBasePlacement(state.placement);
188
+ const widthProp = basePlacement === 'left' ? 'left' : 'right';
189
+ const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
190
+ const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always' || overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width');
191
+ const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always' || overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height');
192
+
193
+ if (applyMaxWidth) {
194
+ state.styles.popper.maxWidth = `${width - overflow[widthProp] - x}px`;
195
+ }
196
+
197
+ if (applyMaxHeight) {
198
+ state.styles.popper.maxHeight = `${height - overflow[heightProp] - y}px`;
199
+ }
200
+ }
201
+
202
+ },
203
+ /**
204
+ * This modifier is necessary in order to render the pointer. Refs are resolved in effects, so it can't be
205
+ * placed under computed modifiers. Deep merge is not required as this modifier has only these properties.
206
+ */
207
+ {
208
+ name: 'arrow',
209
+ enabled: !!arrow,
210
+ options: {
211
+ element: arrow,
212
+ padding: arrowPadding
213
+ }
214
+ },
215
+ /**
216
+ * Modifies popper offsets to cover the reference rect, but still keep edge alignment
217
+ */
218
+ {
219
+ name: 'coverTarget',
220
+ enabled: !!coverTarget,
221
+ phase: 'main',
222
+ requiresIfExists: ['offset', 'preventOverflow', 'flip'],
223
+
224
+ fn({
225
+ state
226
+ }) {
227
+ const basePlacement = getBasePlacement(state.placement);
228
+
229
+ switch (basePlacement) {
230
+ case 'bottom':
231
+ state.modifiersData.popperOffsets.y -= state.rects.reference.height;
232
+ break;
233
+
234
+ case 'top':
235
+ state.modifiersData.popperOffsets.y += state.rects.reference.height;
236
+ break;
237
+
238
+ case 'left':
239
+ state.modifiersData.popperOffsets.x += state.rects.reference.width;
240
+ break;
241
+
242
+ case 'right':
243
+ state.modifiersData.popperOffsets.x -= state.rects.reference.width;
244
+ break;
245
+ }
246
+ }
247
+
248
+ }].filter(Boolean); // filter boolean conditional spreading values
249
+
250
+ const popperOptions = {
251
+ modifiers,
252
+ placement,
253
+ strategy,
254
+ onFirstUpdate: state => handleStateUpdate({
255
+ state
256
+ })
257
+ };
258
+ return popperOptions;
259
+ }, [arrowPadding, autoSize, coverTarget, flipBoundary, offsetModifier, overflowBoundary, placement, strategy, unstable_disableTether, pinned, // These can be skipped from deps as they will not ever change
260
+ handleStateUpdate, popperOriginalPositionRef]);
217
261
  }
218
262
  /**
219
263
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
@@ -223,128 +267,134 @@ function usePopperOptions(options, popperOriginalPositionRef) {
223
267
  * - contains a specific to React fix related to initial positioning when containers have components with managed focus
224
268
  * to avoid focus jumps
225
269
  */
270
+
271
+
226
272
  export function usePopper(options = {}) {
227
- const { enabled = true } = options;
228
- const isFirstMount = useFirstMount();
229
- const popperOriginalPositionRef = React.useRef('absolute');
230
- const resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
231
- const popperInstanceRef = React.useRef(null);
232
- const handlePopperUpdate = useEventCallback(() => {
233
- var _a;
234
- (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
235
- popperInstanceRef.current = null;
236
- const { target = targetRef.current } = options;
237
- let popperInstance = null;
238
- if (canUseDOM() && enabled) {
239
- if (target && containerRef.current) {
240
- popperInstance = PopperJs.createPopper(target, containerRef.current, resolvePopperOptions(target, containerRef.current, arrowRef.current));
241
- }
242
- }
243
- if (popperInstance) {
244
- /**
245
- * The patch updates `.forceUpdate()` Popper function which restores the original position before the first
246
- * forceUpdate() call. See also "positionStyleFix" modifier in usePopperOptions().
247
- */
248
- const originalForceUpdate = popperInstance.forceUpdate;
249
- popperInstance.isFirstRun = true;
250
- popperInstance.forceUpdate = () => {
251
- if (popperInstance === null || popperInstance === void 0 ? void 0 : popperInstance.isFirstRun) {
252
- popperInstance.state.elements.popper.style.position = popperOriginalPositionRef.current;
253
- popperInstance.isFirstRun = false;
254
- }
255
- originalForceUpdate();
256
- };
257
- }
258
- popperInstanceRef.current = popperInstance;
259
- });
260
- // Refs are managed by useCallbackRef() to handle ref updates scenarios.
261
- //
262
- // The first scenario are updates for a targetRef, we can handle it properly only via callback refs, but it causes
263
- // re-renders (we would like to avoid them).
264
- //
265
- // The second problem is related to refs resolution on React's layer: refs are resolved in the same order as effects
266
- // that causes an issue when you have a container inside a target, for example: a menu in ChatMessage.
267
- //
268
- // function ChatMessage(props) {
269
- // <div className="message" ref={targetRef}> // 3) ref will be resolved only now, but it's too late already
270
- // <Popper target={targetRef}> // 2) create a popper instance
271
- // <div className="menu" /> // 1) capture ref from this element
272
- // </Popper>
273
- // </div>
274
- // }
275
- //
276
- // Check a demo on CodeSandbox: https://codesandbox.io/s/popper-refs-emy60.
277
- //
278
- // This again can be solved with callback refs. It's not a huge issue as with hooks we are moving popper's creation
279
- // to ChatMessage itself, however, without `useCallback()` refs it's still a Pandora box.
280
- const targetRef = useCallbackRef(null, handlePopperUpdate, true);
281
- const containerRef = useCallbackRef(null, handlePopperUpdate, true);
282
- const arrowRef = useCallbackRef(null, handlePopperUpdate, true);
283
- React.useImperativeHandle(options.popperRef, () => ({
284
- updatePosition: () => {
285
- var _a;
286
- (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.update();
287
- },
288
- }), []);
289
- useIsomorphicLayoutEffect(() => {
290
- handlePopperUpdate();
291
- return () => {
292
- var _a;
293
- (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
294
- popperInstanceRef.current = null;
295
- };
296
- }, [handlePopperUpdate, options.enabled, options.target]);
297
- useIsomorphicLayoutEffect(() => {
298
- var _a;
299
- if (!isFirstMount) {
300
- (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions(options.target || targetRef.current, containerRef.current, arrowRef.current));
273
+ const {
274
+ enabled = true
275
+ } = options;
276
+ const isFirstMount = useFirstMount();
277
+ const popperOriginalPositionRef = React.useRef('absolute');
278
+ const resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
279
+ const popperInstanceRef = React.useRef(null);
280
+ const handlePopperUpdate = useEventCallback(() => {
281
+ var _a;
282
+
283
+ (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
284
+ popperInstanceRef.current = null;
285
+ const {
286
+ target = targetRef.current
287
+ } = options;
288
+ let popperInstance = null;
289
+
290
+ if (canUseDOM() && enabled) {
291
+ if (target && containerRef.current) {
292
+ popperInstance = PopperJs.createPopper(target, containerRef.current, resolvePopperOptions(target, containerRef.current, arrowRef.current));
293
+ }
294
+ }
295
+
296
+ if (popperInstance) {
297
+ /**
298
+ * The patch updates `.forceUpdate()` Popper function which restores the original position before the first
299
+ * forceUpdate() call. See also "positionStyleFix" modifier in usePopperOptions().
300
+ */
301
+ const originalForceUpdate = popperInstance.forceUpdate;
302
+ popperInstance.isFirstRun = true;
303
+
304
+ popperInstance.forceUpdate = () => {
305
+ if (popperInstance === null || popperInstance === void 0 ? void 0 : popperInstance.isFirstRun) {
306
+ popperInstance.state.elements.popper.style.position = popperOriginalPositionRef.current;
307
+ popperInstance.isFirstRun = false;
301
308
  }
302
- },
303
- // Missing deps:
304
- // options.target - The useIsomorphicLayoutEffect before this will create a new popper instance if target changes
305
- // isFirstMount - Should never change after mount
306
- // arrowRef, containerRef, targetRef - Stable between renders
307
- // eslint-disable-next-line react-hooks/exhaustive-deps
308
- [resolvePopperOptions]);
309
- if (process.env.NODE_ENV !== 'production') {
310
- // This checked should run only in development mode
311
- // eslint-disable-next-line react-hooks/rules-of-hooks
312
- React.useEffect(() => {
313
- var _a;
314
- if (containerRef.current) {
315
- const contentNode = containerRef.current;
316
- const treeWalker = (_a = contentNode.ownerDocument) === null || _a === void 0 ? void 0 : _a.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {
317
- acceptNode: hasAutofocusFilter,
318
- });
319
- while (treeWalker === null || treeWalker === void 0 ? void 0 : treeWalker.nextNode()) {
320
- const node = treeWalker.currentNode;
321
- // eslint-disable-next-line no-console
322
- console.warn('<Popper>:', node);
323
- // eslint-disable-next-line no-console
324
- console.warn([
325
- '<Popper>: ^ this node contains "autoFocus" prop on a React element. This can break the initial',
326
- 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',
327
- '"autoFocus" behavior to solve inconsistencies between different browsers:',
328
- 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',
329
- '\n',
330
- 'However, ".focus()" in this case occurs before any other React effects will be executed',
331
- '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',
332
- 'want to use "autoFocus" please add "position: fixed" to styles of the element that is wrapped by',
333
- '"Popper".',
334
- `In general, it's not recommended to use "autoFocus" as it may break accessibility aspects:`,
335
- 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',
336
- '\n',
337
- 'We suggest to use the "trapFocus" prop on Fluent components or a catch "ref" and then use',
338
- '"ref.current.focus" in React.useEffect():',
339
- 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',
340
- ].join(' '));
341
- }
342
- }
343
- // We run this check once, no need to add deps here
344
- // TODO: Should be rework to handle options.enabled and contentRef updates
345
- // eslint-disable-next-line react-hooks/exhaustive-deps
346
- }, []);
309
+
310
+ originalForceUpdate();
311
+ };
347
312
  }
348
- return { targetRef, containerRef, arrowRef };
313
+
314
+ popperInstanceRef.current = popperInstance;
315
+ }); // Refs are managed by useCallbackRef() to handle ref updates scenarios.
316
+ //
317
+ // The first scenario are updates for a targetRef, we can handle it properly only via callback refs, but it causes
318
+ // re-renders (we would like to avoid them).
319
+ //
320
+ // The second problem is related to refs resolution on React's layer: refs are resolved in the same order as effects
321
+ // that causes an issue when you have a container inside a target, for example: a menu in ChatMessage.
322
+ //
323
+ // function ChatMessage(props) {
324
+ // <div className="message" ref={targetRef}> // 3) ref will be resolved only now, but it's too late already
325
+ // <Popper target={targetRef}> // 2) create a popper instance
326
+ // <div className="menu" /> // 1) capture ref from this element
327
+ // </Popper>
328
+ // </div>
329
+ // }
330
+ //
331
+ // Check a demo on CodeSandbox: https://codesandbox.io/s/popper-refs-emy60.
332
+ //
333
+ // This again can be solved with callback refs. It's not a huge issue as with hooks we are moving popper's creation
334
+ // to ChatMessage itself, however, without `useCallback()` refs it's still a Pandora box.
335
+
336
+ const targetRef = useCallbackRef(null, handlePopperUpdate, true);
337
+ const containerRef = useCallbackRef(null, handlePopperUpdate, true);
338
+ const arrowRef = useCallbackRef(null, handlePopperUpdate, true);
339
+ React.useImperativeHandle(options.popperRef, () => ({
340
+ updatePosition: () => {
341
+ var _a;
342
+
343
+ (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.update();
344
+ }
345
+ }), []);
346
+ useIsomorphicLayoutEffect(() => {
347
+ handlePopperUpdate();
348
+ return () => {
349
+ var _a;
350
+
351
+ (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
352
+ popperInstanceRef.current = null;
353
+ };
354
+ }, [handlePopperUpdate, options.enabled, options.target]);
355
+ useIsomorphicLayoutEffect(() => {
356
+ var _a;
357
+
358
+ if (!isFirstMount) {
359
+ (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions(options.target || targetRef.current, containerRef.current, arrowRef.current));
360
+ }
361
+ }, // Missing deps:
362
+ // options.target - The useIsomorphicLayoutEffect before this will create a new popper instance if target changes
363
+ // isFirstMount - Should never change after mount
364
+ // arrowRef, containerRef, targetRef - Stable between renders
365
+ // eslint-disable-next-line react-hooks/exhaustive-deps
366
+ [resolvePopperOptions]);
367
+
368
+ if (process.env.NODE_ENV !== 'production') {
369
+ // This checked should run only in development mode
370
+ // eslint-disable-next-line react-hooks/rules-of-hooks
371
+ React.useEffect(() => {
372
+ var _a;
373
+
374
+ if (containerRef.current) {
375
+ const contentNode = containerRef.current;
376
+ const treeWalker = (_a = contentNode.ownerDocument) === null || _a === void 0 ? void 0 : _a.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {
377
+ acceptNode: hasAutofocusFilter
378
+ });
379
+
380
+ while (treeWalker === null || treeWalker === void 0 ? void 0 : treeWalker.nextNode()) {
381
+ const node = treeWalker.currentNode; // eslint-disable-next-line no-console
382
+
383
+ console.warn('<Popper>:', node); // eslint-disable-next-line no-console
384
+
385
+ console.warn(['<Popper>: ^ this node contains "autoFocus" prop on a React element. This can break the initial', 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills', '"autoFocus" behavior to solve inconsistencies between different browsers:', 'https://github.com/facebook/react/issues/11851#issuecomment-351787078', '\n', 'However, ".focus()" in this case occurs before any other React effects will be executed', '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really', 'want to use "autoFocus" please add "position: fixed" to styles of the element that is wrapped by', '"Popper".', `In general, it's not recommended to use "autoFocus" as it may break accessibility aspects:`, 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md', '\n', 'We suggest to use the "trapFocus" prop on Fluent components or a catch "ref" and then use', '"ref.current.focus" in React.useEffect():', 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element'].join(' '));
386
+ }
387
+ } // We run this check once, no need to add deps here
388
+ // TODO: Should be rework to handle options.enabled and contentRef updates
389
+ // eslint-disable-next-line react-hooks/exhaustive-deps
390
+
391
+ }, []);
392
+ }
393
+
394
+ return {
395
+ targetRef,
396
+ containerRef,
397
+ arrowRef
398
+ };
349
399
  }
350
400
  //# sourceMappingURL=usePopper.js.map