@fluentui/react-positioning 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +181 -10
- package/CHANGELOG.md +50 -7
- package/dist/react-positioning.d.ts +113 -35
- package/lib/createArrowStyles.d.ts +64 -0
- package/lib/createArrowStyles.js +87 -0
- package/lib/createArrowStyles.js.map +1 -0
- package/lib/createVirtualElementFromClick.js +17 -15
- package/lib/createVirtualElementFromClick.js.map +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib/types.d.ts +28 -7
- package/lib/usePopper.d.ts +2 -14
- package/lib/usePopper.js +368 -319
- package/lib/usePopper.js.map +1 -1
- package/lib/usePopperMouseTarget.js +28 -22
- package/lib/usePopperMouseTarget.js.map +1 -1
- package/lib/utils/getBasePlacement.js +1 -1
- package/lib/utils/getBasePlacement.js.map +1 -1
- package/lib/utils/getBoundary.js +15 -10
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getReactFiberFromNode.d.ts +0 -1
- package/lib/utils/getReactFiberFromNode.js +39 -35
- package/lib/utils/getReactFiberFromNode.js.map +1 -1
- package/lib/utils/getScrollParent.js +46 -32
- package/lib/utils/getScrollParent.js.map +1 -1
- package/lib/utils/mergeArrowOffset.js +30 -25
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/positioningHelper.d.ts +2 -2
- package/lib/utils/positioningHelper.js +42 -34
- package/lib/utils/positioningHelper.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js +58 -20
- package/lib/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib/utils/useCallbackRef.js +35 -29
- package/lib/utils/useCallbackRef.js.map +1 -1
- package/lib-commonjs/createArrowStyles.d.ts +64 -0
- package/lib-commonjs/createArrowStyles.js +100 -0
- package/lib-commonjs/createArrowStyles.js.map +1 -0
- package/lib-commonjs/createVirtualElementFromClick.js +23 -16
- package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
- package/lib-commonjs/index.d.ts +2 -1
- package/lib-commonjs/index.js +28 -6
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/types.d.ts +28 -7
- package/lib-commonjs/types.js +4 -1
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/usePopper.d.ts +2 -14
- package/lib-commonjs/usePopper.js +383 -324
- package/lib-commonjs/usePopper.js.map +1 -1
- package/lib-commonjs/usePopperMouseTarget.js +38 -25
- package/lib-commonjs/usePopperMouseTarget.js.map +1 -1
- package/lib-commonjs/utils/getBasePlacement.js +7 -2
- package/lib-commonjs/utils/getBasePlacement.js.map +1 -1
- package/lib-commonjs/utils/getBoundary.js +23 -12
- package/lib-commonjs/utils/getBoundary.js.map +1 -1
- package/lib-commonjs/utils/getReactFiberFromNode.d.ts +0 -1
- package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
- package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
- package/lib-commonjs/utils/getScrollParent.js +53 -33
- package/lib-commonjs/utils/getScrollParent.js.map +1 -1
- package/lib-commonjs/utils/index.js +14 -2
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/mergeArrowOffset.js +36 -26
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
- package/lib-commonjs/utils/positioningHelper.js +50 -35
- package/lib-commonjs/utils/positioningHelper.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js +66 -23
- package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib-commonjs/utils/useCallbackRef.js +45 -32
- package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
- package/package.json +7 -8
@@ -3,22 +3,24 @@
|
|
3
3
|
* Can be used as a target for popper in scenarios such as context menus
|
4
4
|
*/
|
5
5
|
export function createVirtualElementFromClick(nativeEvent) {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
left: left,
|
13
|
-
top: top,
|
14
|
-
right: right,
|
15
|
-
bottom: bottom,
|
16
|
-
height: 1,
|
17
|
-
width: 1,
|
18
|
-
};
|
19
|
-
}
|
6
|
+
const left = nativeEvent.clientX;
|
7
|
+
const top = nativeEvent.clientY;
|
8
|
+
const right = left + 1;
|
9
|
+
const bottom = top + 1;
|
10
|
+
|
11
|
+
function getBoundingClientRect() {
|
20
12
|
return {
|
21
|
-
|
13
|
+
left,
|
14
|
+
top,
|
15
|
+
right,
|
16
|
+
bottom,
|
17
|
+
height: 1,
|
18
|
+
width: 1
|
22
19
|
};
|
20
|
+
}
|
21
|
+
|
22
|
+
return {
|
23
|
+
getBoundingClientRect
|
24
|
+
};
|
23
25
|
}
|
24
26
|
//# sourceMappingURL=createVirtualElementFromClick.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;AAGG;AACH,OAAM,SAAU,6BAAV,CAAwC,WAAxC,EAA+D;AACnE,QAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;AACA,QAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;AACA,QAAM,KAAK,GAAG,IAAI,GAAG,CAArB;AACA,QAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;AAEA,WAAS,qBAAT,GAA8B;AAC5B,WAAO;AACL,MAAA,IADK;AAEL,MAAA,GAFK;AAGL,MAAA,KAHK;AAIL,MAAA,MAJK;AAML,MAAA,MAAM,EAAE,CANH;AAOL,MAAA,KAAK,EAAE;AAPF,KAAP;AASD;;AAED,SAAO;AACL,IAAA;AADK,GAAP;AAGD","sourceRoot":""}
|
package/lib/index.d.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
|
-
export * from './usePopper';
|
2
1
|
export * from './createVirtualElementFromClick';
|
2
|
+
export * from './createArrowStyles';
|
3
|
+
export * from './usePopper';
|
3
4
|
export * from './usePopperMouseTarget';
|
4
5
|
export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
|
5
6
|
export * from './types';
|
package/lib/index.js
CHANGED
@@ -1,5 +1,6 @@
|
|
1
|
-
export * from './usePopper';
|
2
1
|
export * from './createVirtualElementFromClick';
|
2
|
+
export * from './createArrowStyles';
|
3
|
+
export * from './usePopper';
|
3
4
|
export * from './usePopperMouseTarget';
|
4
5
|
export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
|
5
6
|
export * from './types';
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9E,cAAc,SAAS,CAAC"}
|
package/lib/types.d.ts
CHANGED
@@ -12,18 +12,25 @@ export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
|
|
12
12
|
export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
|
13
13
|
export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
|
14
14
|
export declare type PopperRefHandle = {
|
15
|
+
/**
|
16
|
+
* Updates the position of the popper imperatively.
|
17
|
+
* Useful when the position of the target changes from other factors than scrolling of window resize.
|
18
|
+
*/
|
15
19
|
updatePosition: () => void;
|
20
|
+
/**
|
21
|
+
* Sets the target and updates positioning imperatively.
|
22
|
+
* Useful for avoiding double renders with the target option.
|
23
|
+
*/
|
24
|
+
setTarget: (target: HTMLElement) => void;
|
16
25
|
};
|
17
26
|
export declare type PopperVirtualElement = PopperJs.VirtualElement;
|
18
|
-
export interface
|
27
|
+
export interface PopperOptions {
|
19
28
|
/** Alignment for the component. Only has an effect if used with the @see position option */
|
20
29
|
align?: Alignment;
|
21
30
|
/** The element which will define the boundaries of the popper position for the flip behavior. */
|
22
31
|
flipBoundary?: Boundary;
|
23
32
|
/** The element which will define the boundaries of the popper position for the overflow behavior. */
|
24
33
|
overflowBoundary?: Boundary;
|
25
|
-
/** An imperative handle to Popper methods. */
|
26
|
-
popperRef?: React.Ref<PopperRefHandle>;
|
27
34
|
/**
|
28
35
|
* Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
|
29
36
|
* and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
|
@@ -31,6 +38,11 @@ export interface PositioningProps {
|
|
31
38
|
* then provided value for 'align' will be ignored and 'center' will be used instead.
|
32
39
|
*/
|
33
40
|
position?: Position;
|
41
|
+
/**
|
42
|
+
* Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
|
43
|
+
* @default false
|
44
|
+
*/
|
45
|
+
positionFixed?: boolean;
|
34
46
|
/**
|
35
47
|
* Lets you displace a popper element from its reference element.
|
36
48
|
* This can be useful if you need to apply some margin between them or if you need to fine tune the
|
@@ -50,10 +62,6 @@ export interface PositioningProps {
|
|
50
62
|
* `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
|
51
63
|
*/
|
52
64
|
autoSize?: AutoSize;
|
53
|
-
/**
|
54
|
-
* Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
|
55
|
-
*/
|
56
|
-
target?: HTMLElement | PopperVirtualElement | null;
|
57
65
|
/**
|
58
66
|
* Modifies position and alignment to cover the target
|
59
67
|
*/
|
@@ -63,6 +71,19 @@ export interface PositioningProps {
|
|
63
71
|
* `position` props, regardless of the size of the component, the reference element or the viewport.
|
64
72
|
*/
|
65
73
|
pinned?: boolean;
|
74
|
+
/**
|
75
|
+
* When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
|
76
|
+
* "all" enables this behavior for all axis.
|
77
|
+
*/
|
78
|
+
unstable_disableTether?: boolean | 'all';
|
79
|
+
}
|
80
|
+
export interface PositioningProps extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {
|
81
|
+
/** An imperative handle to Popper methods. */
|
82
|
+
popperRef?: React.Ref<PopperRefHandle>;
|
83
|
+
/**
|
84
|
+
* Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
|
85
|
+
*/
|
86
|
+
target?: HTMLElement | PopperVirtualElement | null;
|
66
87
|
}
|
67
88
|
export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
|
68
89
|
export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
|
package/lib/usePopper.d.ts
CHANGED
@@ -1,23 +1,11 @@
|
|
1
|
-
import * as PopperJs from '@popperjs/core';
|
2
1
|
import * as React from 'react';
|
3
2
|
import type { PositioningProps } from './types';
|
4
|
-
interface
|
3
|
+
interface UsePopperOptions extends PositioningProps {
|
5
4
|
/**
|
6
5
|
* If false, delays Popper's creation.
|
7
6
|
* @default true
|
8
7
|
*/
|
9
8
|
enabled?: boolean;
|
10
|
-
onStateUpdate?: (state: Partial<PopperJs.State>) => void;
|
11
|
-
/**
|
12
|
-
* Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
|
13
|
-
* @default false
|
14
|
-
*/
|
15
|
-
positionFixed?: boolean;
|
16
|
-
/**
|
17
|
-
* When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
|
18
|
-
* "all" enables this behavior for all axis.
|
19
|
-
*/
|
20
|
-
unstable_disableTether?: boolean | 'all';
|
21
9
|
}
|
22
10
|
/**
|
23
11
|
* Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
|
@@ -27,7 +15,7 @@ interface PopperOptions extends PositioningProps {
|
|
27
15
|
* - contains a specific to React fix related to initial positioning when containers have components with managed focus
|
28
16
|
* to avoid focus jumps
|
29
17
|
*/
|
30
|
-
export declare function usePopper(options?:
|
18
|
+
export declare function usePopper(options?: UsePopperOptions): {
|
31
19
|
targetRef: React.MutableRefObject<any>;
|
32
20
|
containerRef: React.MutableRefObject<any>;
|
33
21
|
arrowRef: React.MutableRefObject<any>;
|