@fluentui/react-positioning 9.2.2 → 9.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +60 -4
- package/CHANGELOG.md +21 -5
- package/README.md +0 -2
- package/dist/index.d.ts +14 -8
- package/lib/createPositionManager.js +119 -0
- package/lib/createPositionManager.js.map +1 -0
- package/lib/index.js.map +1 -1
- package/lib/types.js.map +1 -1
- package/lib/usePositioning.js +58 -195
- package/lib/usePositioning.js.map +1 -1
- package/lib/usePositioningMouseTarget.js.map +1 -1
- package/lib/utils/index.js +2 -0
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/writeArrowUpdates.js +23 -0
- package/lib/utils/writeArrowUpdates.js.map +1 -0
- package/lib/utils/writeContainerupdates.js +49 -0
- package/lib/utils/writeContainerupdates.js.map +1 -0
- package/lib-commonjs/createPositionManager.js +130 -0
- package/lib-commonjs/createPositionManager.js.map +1 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/usePositioning.js +56 -194
- package/lib-commonjs/usePositioning.js.map +1 -1
- package/lib-commonjs/usePositioningMouseTarget.js.map +1 -1
- package/lib-commonjs/utils/index.js +4 -0
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/writeArrowUpdates.js +32 -0
- package/lib-commonjs/utils/writeArrowUpdates.js.map +1 -0
- package/lib-commonjs/utils/writeContainerupdates.js +59 -0
- package/lib-commonjs/utils/writeContainerupdates.js.map +1 -0
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,63 @@
|
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Wed, 02 Nov 2022 11:54:58 GMT",
|
6
|
+
"tag": "@fluentui/react-positioning_v9.3.0",
|
7
|
+
"version": "9.3.0",
|
8
|
+
"comments": {
|
9
|
+
"minor": [
|
10
|
+
{
|
11
|
+
"author": "bernardo.sunderhus@gmail.com",
|
12
|
+
"package": "@fluentui/react-positioning",
|
13
|
+
"commit": "acbfdcac87c7626542838000f34dbf2283c10f4e",
|
14
|
+
"comment": "exposes new typings to avoid exposing internal methods"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "lingfangao@hotmail.com",
|
18
|
+
"package": "@fluentui/react-positioning",
|
19
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b",
|
20
|
+
"comment": "feat: position updates are handled out of react lifecycle"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "beachball",
|
24
|
+
"package": "@fluentui/react-positioning",
|
25
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.1.0",
|
26
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "beachball",
|
30
|
+
"package": "@fluentui/react-positioning",
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v9.2.0",
|
32
|
+
"commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
|
33
|
+
}
|
34
|
+
],
|
35
|
+
"patch": [
|
36
|
+
{
|
37
|
+
"author": "olfedias@microsoft.com",
|
38
|
+
"package": "@fluentui/react-positioning",
|
39
|
+
"commit": "c619ba066f11a8654e95375314824ba6b81b003e",
|
40
|
+
"comment": "chore: Update Griffel to latest version"
|
41
|
+
}
|
42
|
+
]
|
43
|
+
}
|
44
|
+
},
|
45
|
+
{
|
46
|
+
"date": "Tue, 25 Oct 2022 00:35:34 GMT",
|
47
|
+
"tag": "@fluentui/react-positioning_v9.2.2",
|
48
|
+
"version": "9.2.2",
|
49
|
+
"comments": {
|
50
|
+
"none": [
|
51
|
+
{
|
52
|
+
"author": "miroslav.stastny@microsoft.com",
|
53
|
+
"package": "@fluentui/react-positioning",
|
54
|
+
"commit": "6ced976a8d0e6a0e2e207da8fe0eb810e2bd19bc",
|
55
|
+
"comment": "Update package readme"
|
56
|
+
}
|
57
|
+
]
|
58
|
+
}
|
59
|
+
},
|
60
|
+
{
|
61
|
+
"date": "Thu, 20 Oct 2022 08:39:41 GMT",
|
6
62
|
"tag": "@fluentui/react-positioning_v9.2.2",
|
7
63
|
"version": "9.2.2",
|
8
64
|
"comments": {
|
@@ -23,19 +79,19 @@
|
|
23
79
|
"author": "beachball",
|
24
80
|
"package": "@fluentui/react-positioning",
|
25
81
|
"comment": "Bump @fluentui/react-shared-contexts to v9.0.2",
|
26
|
-
"commit": "
|
82
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
27
83
|
},
|
28
84
|
{
|
29
85
|
"author": "beachball",
|
30
86
|
"package": "@fluentui/react-positioning",
|
31
87
|
"comment": "Bump @fluentui/react-theme to v9.1.1",
|
32
|
-
"commit": "
|
88
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
33
89
|
},
|
34
90
|
{
|
35
91
|
"author": "beachball",
|
36
92
|
"package": "@fluentui/react-positioning",
|
37
93
|
"comment": "Bump @fluentui/react-utilities to v9.1.2",
|
38
|
-
"commit": "
|
94
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
39
95
|
}
|
40
96
|
]
|
41
97
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,21 +1,37 @@
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Wed, 02 Nov 2022 11:54:58 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.0)
|
8
|
+
|
9
|
+
Wed, 02 Nov 2022 11:54:58 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.2.2..@fluentui/react-positioning_v9.3.0)
|
11
|
+
|
12
|
+
### Minor changes
|
13
|
+
|
14
|
+
- exposes new typings to avoid exposing internal methods ([PR #25407](https://github.com/microsoft/fluentui/pull/25407) by bernardo.sunderhus@gmail.com)
|
15
|
+
- feat: position updates are handled out of react lifecycle ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by lingfangao@hotmail.com)
|
16
|
+
- Bump @fluentui/react-shared-contexts to v9.1.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
17
|
+
- Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
|
18
|
+
|
19
|
+
### Patches
|
20
|
+
|
21
|
+
- chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
|
22
|
+
|
7
23
|
## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.2.2)
|
8
24
|
|
9
|
-
Thu, 20 Oct 2022 08:
|
25
|
+
Thu, 20 Oct 2022 08:39:41 GMT
|
10
26
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.2.1..@fluentui/react-positioning_v9.2.2)
|
11
27
|
|
12
28
|
### Patches
|
13
29
|
|
14
30
|
- chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
|
15
31
|
- chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
|
16
|
-
- Bump @fluentui/react-shared-contexts to v9.0.2 ([
|
17
|
-
- Bump @fluentui/react-theme to v9.1.1 ([
|
18
|
-
- Bump @fluentui/react-utilities to v9.1.2 ([
|
32
|
+
- Bump @fluentui/react-shared-contexts to v9.0.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
33
|
+
- Bump @fluentui/react-theme to v9.1.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
34
|
+
- Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
19
35
|
|
20
36
|
## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.2.1)
|
21
37
|
|
package/README.md
CHANGED
@@ -2,8 +2,6 @@
|
|
2
2
|
|
3
3
|
A react hook wrapper around [Popper.js](https://popper.js.org/) for Fluent UI.
|
4
4
|
|
5
|
-
These are not production-ready utilities and **should never be used in product**. This space is useful for testing new utilities whose APIs might change before final release.
|
6
|
-
|
7
5
|
## Usage
|
8
6
|
|
9
7
|
```tsx
|
package/dist/index.d.ts
CHANGED
@@ -123,7 +123,7 @@ export declare type PositioningImperativeRef = {
|
|
123
123
|
* Sets the target and updates positioning imperatively.
|
124
124
|
* Useful for avoiding double renders with the target option.
|
125
125
|
*/
|
126
|
-
setTarget: (target:
|
126
|
+
setTarget: (target: TargetElement) => void;
|
127
127
|
};
|
128
128
|
|
129
129
|
declare interface PositioningOptions {
|
@@ -186,7 +186,7 @@ export declare interface PositioningProps extends Omit<PositioningOptions, 'posi
|
|
186
186
|
/**
|
187
187
|
* Manual override for the target element. Useful for scenarios where a component accepts user prop to override target
|
188
188
|
*/
|
189
|
-
target?:
|
189
|
+
target?: TargetElement | null;
|
190
190
|
}
|
191
191
|
|
192
192
|
export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
|
@@ -216,14 +216,14 @@ declare type Rect = {
|
|
216
216
|
|
217
217
|
export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
|
218
218
|
|
219
|
+
export declare type SetVirtualMouseTarget = (event: React_2.MouseEvent | MouseEvent | undefined | null) => void;
|
220
|
+
|
221
|
+
declare type TargetElement = HTMLElement | PositioningVirtualElement;
|
222
|
+
|
219
223
|
/**
|
220
224
|
* @internal
|
221
225
|
*/
|
222
|
-
export declare function usePositioning(options: UsePositioningOptions):
|
223
|
-
targetRef: React_2.MutableRefObject<any>;
|
224
|
-
containerRef: React_2.MutableRefObject<any>;
|
225
|
-
arrowRef: React_2.MutableRefObject<any>;
|
226
|
-
};
|
226
|
+
export declare function usePositioning(options: UsePositioningOptions): UsePositioningReturn;
|
227
227
|
|
228
228
|
/**
|
229
229
|
* @internal
|
@@ -234,7 +234,7 @@ export declare function usePositioning(options: UsePositioningOptions): {
|
|
234
234
|
* @param initialState - initializes a user provided state similare to useState
|
235
235
|
* @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events
|
236
236
|
*/
|
237
|
-
export declare const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement) | undefined) => readonly [PositioningVirtualElement | undefined,
|
237
|
+
export declare const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement) | undefined) => readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget];
|
238
238
|
|
239
239
|
declare interface UsePositioningOptions extends PositioningProps {
|
240
240
|
/**
|
@@ -243,4 +243,10 @@ declare interface UsePositioningOptions extends PositioningProps {
|
|
243
243
|
enabled?: boolean;
|
244
244
|
}
|
245
245
|
|
246
|
+
declare interface UsePositioningReturn {
|
247
|
+
targetRef: React_2.MutableRefObject<any>;
|
248
|
+
containerRef: React_2.MutableRefObject<any>;
|
249
|
+
arrowRef: React_2.MutableRefObject<any>;
|
250
|
+
}
|
251
|
+
|
246
252
|
export { }
|
@@ -0,0 +1,119 @@
|
|
1
|
+
import { computePosition } from '@floating-ui/dom';
|
2
|
+
import { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';
|
3
|
+
/**
|
4
|
+
* @internal
|
5
|
+
* @returns manager that handles positioning out of the react lifecycle
|
6
|
+
*/
|
7
|
+
|
8
|
+
export function createPositionManager(options) {
|
9
|
+
const {
|
10
|
+
container,
|
11
|
+
target,
|
12
|
+
arrow,
|
13
|
+
strategy,
|
14
|
+
middleware,
|
15
|
+
placement
|
16
|
+
} = options;
|
17
|
+
|
18
|
+
if (!target || !container) {
|
19
|
+
return {
|
20
|
+
updatePosition: () => undefined,
|
21
|
+
dispose: () => undefined
|
22
|
+
};
|
23
|
+
}
|
24
|
+
|
25
|
+
let isFirstUpdate = true;
|
26
|
+
const scrollParents = new Set();
|
27
|
+
const targetWindow = container.ownerDocument.defaultView; // When the container is first resolved, set position `fixed` to avoid scroll jumps.
|
28
|
+
// Without this scroll jumps can occur when the element is rendered initially and receives focus
|
29
|
+
|
30
|
+
Object.assign(container.style, {
|
31
|
+
position: 'fixed',
|
32
|
+
left: 0,
|
33
|
+
top: 0,
|
34
|
+
margin: 0
|
35
|
+
});
|
36
|
+
|
37
|
+
const forceUpdate = () => {
|
38
|
+
if (isFirstUpdate) {
|
39
|
+
scrollParents.add(getScrollParent(container));
|
40
|
+
|
41
|
+
if (target instanceof HTMLElement) {
|
42
|
+
scrollParents.add(getScrollParent(target));
|
43
|
+
}
|
44
|
+
|
45
|
+
scrollParents.forEach(scrollParent => {
|
46
|
+
scrollParent.addEventListener('scroll', updatePosition);
|
47
|
+
});
|
48
|
+
isFirstUpdate = false;
|
49
|
+
}
|
50
|
+
|
51
|
+
Object.assign(container.style, {
|
52
|
+
position: strategy
|
53
|
+
});
|
54
|
+
computePosition(target, container, {
|
55
|
+
placement,
|
56
|
+
middleware,
|
57
|
+
strategy
|
58
|
+
}).then(({
|
59
|
+
x,
|
60
|
+
y,
|
61
|
+
middlewareData,
|
62
|
+
placement: computedPlacement
|
63
|
+
}) => {
|
64
|
+
writeArrowUpdates({
|
65
|
+
arrow,
|
66
|
+
middlewareData
|
67
|
+
});
|
68
|
+
writeContainerUpdates({
|
69
|
+
container,
|
70
|
+
middlewareData,
|
71
|
+
placement: computedPlacement,
|
72
|
+
coordinates: {
|
73
|
+
x,
|
74
|
+
y
|
75
|
+
},
|
76
|
+
lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
|
77
|
+
strategy
|
78
|
+
});
|
79
|
+
}).catch(err => {
|
80
|
+
// https://github.com/floating-ui/floating-ui/issues/1845
|
81
|
+
// FIXME for node > 14
|
82
|
+
// node 15 introduces promise rejection which means that any components
|
83
|
+
// tests need to be `it('', async () => {})` otherwise there can be race conditions with
|
84
|
+
// JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
|
85
|
+
// Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
|
86
|
+
// will actually be counter productive
|
87
|
+
if (process.env.NODE_ENV === 'development') {
|
88
|
+
// eslint-disable-next-line no-console
|
89
|
+
console.error('[usePositioning]: Failed to calculate position', err);
|
90
|
+
}
|
91
|
+
});
|
92
|
+
};
|
93
|
+
|
94
|
+
const updatePosition = debounce(() => forceUpdate());
|
95
|
+
|
96
|
+
const dispose = () => {
|
97
|
+
if (targetWindow) {
|
98
|
+
targetWindow.removeEventListener('scroll', updatePosition);
|
99
|
+
targetWindow.removeEventListener('resize', updatePosition);
|
100
|
+
}
|
101
|
+
|
102
|
+
scrollParents.forEach(scrollParent => {
|
103
|
+
scrollParent.removeEventListener('scroll', updatePosition);
|
104
|
+
});
|
105
|
+
};
|
106
|
+
|
107
|
+
if (targetWindow) {
|
108
|
+
targetWindow.addEventListener('scroll', updatePosition);
|
109
|
+
targetWindow.addEventListener('resize', updatePosition);
|
110
|
+
} // Update the position on initialization
|
111
|
+
|
112
|
+
|
113
|
+
updatePosition();
|
114
|
+
return {
|
115
|
+
updatePosition,
|
116
|
+
dispose
|
117
|
+
};
|
118
|
+
}
|
119
|
+
//# sourceMappingURL=createPositionManager.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["createPositionManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';\n\ninterface PositionManagerOptions {\n /**\n * The positioned element\n */\n container: HTMLElement;\n /**\n * Element that the container will be anchored to\n */\n target: TargetElement;\n /**\n * Arrow that points from the container to the target\n */\n arrow: HTMLElement | null;\n /**\n * The value of the css `position` property\n * @default absolute\n */\n strategy: Strategy;\n /**\n * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n */\n middleware: Middleware[];\n /**\n * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n */\n placement?: Placement;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n const { container, target, arrow, strategy, middleware, placement } = options;\n if (!target || !container) {\n return {\n updatePosition: () => undefined,\n dispose: () => undefined,\n };\n }\n\n let isFirstUpdate = true;\n const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n const targetWindow = container.ownerDocument.defaultView;\n\n // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n // Without this scroll jumps can occur when the element is rendered initially and receives focus\n Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n const forceUpdate = () => {\n if (isFirstUpdate) {\n scrollParents.add(getScrollParent(container));\n if (target instanceof HTMLElement) {\n scrollParents.add(getScrollParent(target));\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.addEventListener('scroll', updatePosition);\n });\n\n isFirstUpdate = false;\n }\n\n Object.assign(container.style, { position: strategy });\n computePosition(target, container, { placement, middleware, strategy })\n .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n writeArrowUpdates({ arrow, middlewareData });\n writeContainerUpdates({\n container,\n middlewareData,\n placement: computedPlacement,\n coordinates: { x, y },\n lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n strategy,\n });\n })\n .catch(err => {\n // https://github.com/floating-ui/floating-ui/issues/1845\n // FIXME for node > 14\n // node 15 introduces promise rejection which means that any components\n // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n // will actually be counter productive\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('[usePositioning]: Failed to calculate position', err);\n }\n });\n };\n\n const updatePosition = debounce(() => forceUpdate());\n\n const dispose = () => {\n if (targetWindow) {\n targetWindow.removeEventListener('scroll', updatePosition);\n targetWindow.removeEventListener('resize', updatePosition);\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.removeEventListener('scroll', updatePosition);\n });\n };\n\n if (targetWindow) {\n targetWindow.addEventListener('scroll', updatePosition);\n targetWindow.addEventListener('resize', updatePosition);\n }\n\n // Update the position on initialization\n updatePosition();\n\n return {\n updatePosition,\n dispose,\n };\n}\n"],"sourceRoot":"../src/"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningImperativeRef,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n} from './types';\n"]}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningImperativeRef,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n SetVirtualMouseTarget,\n} from './types';\n"]}
|
package/lib/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\ntype Rect = {\n width: number;\n height: number;\n x: number;\n y: number;\n};\n\nexport type OffsetFunctionParam = {\n positionedRect: Rect;\n targetRect: Rect;\n position: Position;\n alignment?: Alignment;\n};\n\nexport type OffsetObject = { crossAxis?: number; mainAxis: number };\n\nexport type OffsetShorthand = number;\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;\n\nexport type Offset = OffsetFunction | OffsetObject | OffsetShorthand;\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;\n\nexport type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';\n\nexport type PositioningImperativeRef = {\n /**\n * Updates the position imperatively.\n * Useful when the position of the target changes from other factors than scrolling of window resize.\n */\n updatePosition: () => void;\n\n /**\n * Sets the target and updates positioning imperatively.\n * Useful for avoiding double renders with the target option.\n */\n setTarget: (target:
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\ntype Rect = {\n width: number;\n height: number;\n x: number;\n y: number;\n};\n\nexport type OffsetFunctionParam = {\n positionedRect: Rect;\n targetRect: Rect;\n position: Position;\n alignment?: Alignment;\n};\n\nexport type TargetElement = HTMLElement | PositioningVirtualElement;\n\n/**\n * @internal\n */\nexport interface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface PositionManager {\n updatePosition: () => void;\n dispose: () => void;\n}\n\nexport interface UsePositioningReturn {\n // React refs are supposed to be contravariant\n // (allows a more general type to be passed rather than a more specific one)\n // However, Typescript currently can't infer that fact for refs\n // See https://github.com/microsoft/TypeScript/issues/30748 for more information\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n targetRef: React.MutableRefObject<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n containerRef: React.MutableRefObject<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n arrowRef: React.MutableRefObject<any>;\n}\n\nexport type OffsetObject = { crossAxis?: number; mainAxis: number };\n\nexport type OffsetShorthand = number;\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;\n\nexport type Offset = OffsetFunction | OffsetObject | OffsetShorthand;\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;\n\nexport type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';\n\nexport type PositioningImperativeRef = {\n /**\n * Updates the position imperatively.\n * Useful when the position of the target changes from other factors than scrolling of window resize.\n */\n updatePosition: () => void;\n\n /**\n * Sets the target and updates positioning imperatively.\n * Useful for avoiding double renders with the target option.\n */\n setTarget: (target: TargetElement) => void;\n};\n\nexport type PositioningVirtualElement = {\n getBoundingClientRect: () => {\n x: number;\n y: number;\n top: number;\n left: number;\n bottom: number;\n right: number;\n width: number;\n height: number;\n };\n contextElement?: Element;\n};\n\nexport type SetVirtualMouseTarget = (event: React.MouseEvent | MouseEvent | undefined | null) => void;\n\nexport interface PositioningOptions {\n /** Alignment for the component. Only has an effect if used with the @see position option */\n align?: Alignment;\n\n /** The element which will define the boundaries of the positioned element for the flip behavior. */\n flipBoundary?: Boundary | null;\n\n /** The element which will define the boundaries of the positioned element for the overflow behavior. */\n overflowBoundary?: Boundary | null;\n\n /**\n * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')\n * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'\n * and 'start' | 'end' respectively),\n * then provided value for 'align' will be ignored and 'center' will be used instead.\n */\n position?: Position;\n\n /**\n * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')\n * @default false\n */\n positionFixed?: boolean;\n\n /**\n * Lets you displace a positioned element from its reference element.\n * This can be useful if you need to apply some margin between them or if you need to fine tune the\n * position according to some custom logic.\n */\n offset?: Offset;\n\n /**\n * Defines padding between the corner of the popup element and the arrow.\n * Use to prevent the arrow from overlapping a rounded corner, for example.\n */\n arrowPadding?: number;\n\n /**\n * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.\n * true enables this for both width and height when overflow happens.\n * 'always' applies `max-height`/`max-width` regardless of overflow.\n * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`\n * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`\n */\n autoSize?: AutoSize;\n\n /**\n * Modifies position and alignment to cover the target\n */\n coverTarget?: boolean;\n\n /**\n * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and\n * `position` props, regardless of the size of the component, the reference element or the viewport.\n */\n pinned?: boolean;\n\n /**\n * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.\n * \"all\" enables this behavior for all axis.\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether?: boolean | 'all';\n}\n\nexport interface PositioningProps\n // \"positionFixed\" & \"unstable_disableTether\" are not exported as public API (yet)\n extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {\n /** An imperative handle to Popper methods. */\n positioningRef?: React.Ref<PositioningImperativeRef>;\n\n /**\n * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target\n */\n target?: TargetElement | null;\n}\n\nexport type PositioningShorthandValue =\n | 'above'\n | 'above-start'\n | 'above-end'\n | 'below'\n | 'below-start'\n | 'below-end'\n | 'before'\n | 'before-top'\n | 'before-bottom'\n | 'after'\n | 'after-top'\n | 'after-bottom';\n\nexport type PositioningShorthand = PositioningProps | PositioningShorthandValue;\n"]}
|