@fluentui/react-positioning 9.5.1 → 9.5.3
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +43 -1
- package/CHANGELOG.md +22 -2
- package/dist/index.d.ts +1 -1
- package/lib/createPositionManager.js +2 -1
- package/lib/createPositionManager.js.map +1 -1
- package/lib/types.js.map +1 -1
- package/lib/utils/toggleScrollListener.js +3 -2
- package/lib/utils/toggleScrollListener.js.map +1 -1
- package/lib-amd/createPositionManager.js +2 -2
- package/lib-amd/createPositionManager.js.map +1 -1
- package/lib-amd/types.js.map +1 -1
- package/lib-amd/utils/toggleScrollListener.js +3 -3
- package/lib-amd/utils/toggleScrollListener.js.map +1 -1
- package/lib-commonjs/createPositionManager.js +2 -1
- package/lib-commonjs/createPositionManager.js.map +1 -1
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/utils/toggleScrollListener.js +3 -2
- package/lib-commonjs/utils/toggleScrollListener.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,49 @@
|
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Mon, 13 Mar 2023 08:55:01 GMT",
|
6
|
+
"tag": "@fluentui/react-positioning_v9.5.3",
|
7
|
+
"version": "9.5.3",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "bernardo.sunderhus@gmail.com",
|
12
|
+
"package": "@fluentui/react-positioning",
|
13
|
+
"commit": "edf96a6b5d6f13843ada1400480e347b84384b8e",
|
14
|
+
"comment": "fix: stops using instaceof in favor of isHTMLElement"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "beachball",
|
18
|
+
"package": "@fluentui/react-positioning",
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.0",
|
20
|
+
"commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
|
21
|
+
}
|
22
|
+
]
|
23
|
+
}
|
24
|
+
},
|
25
|
+
{
|
26
|
+
"date": "Fri, 10 Mar 2023 07:14:00 GMT",
|
27
|
+
"tag": "@fluentui/react-positioning_v9.5.2",
|
28
|
+
"version": "9.5.2",
|
29
|
+
"comments": {
|
30
|
+
"patch": [
|
31
|
+
{
|
32
|
+
"author": "lingfangao@hotmail.com",
|
33
|
+
"package": "@fluentui/react-positioning",
|
34
|
+
"commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584",
|
35
|
+
"comment": "fix: Export `pinned` prop from `PositioningProps`"
|
36
|
+
},
|
37
|
+
{
|
38
|
+
"author": "beachball",
|
39
|
+
"package": "@fluentui/react-positioning",
|
40
|
+
"comment": "Bump @fluentui/react-utilities to v9.6.2",
|
41
|
+
"commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
|
42
|
+
}
|
43
|
+
]
|
44
|
+
}
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"date": "Wed, 08 Mar 2023 17:42:38 GMT",
|
6
48
|
"tag": "@fluentui/react-positioning_v9.5.1",
|
7
49
|
"version": "9.5.1",
|
8
50
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,32 @@
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Mon, 13 Mar 2023 08:55:01 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.5.3)
|
8
|
+
|
9
|
+
Mon, 13 Mar 2023 08:55:01 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.5.2..@fluentui/react-positioning_v9.5.3)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- fix: stops using instaceof in favor of isHTMLElement ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by bernardo.sunderhus@gmail.com)
|
15
|
+
- Bump @fluentui/react-utilities to v9.7.0 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
|
16
|
+
|
17
|
+
## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.5.2)
|
18
|
+
|
19
|
+
Fri, 10 Mar 2023 07:14:00 GMT
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.5.1..@fluentui/react-positioning_v9.5.2)
|
21
|
+
|
22
|
+
### Patches
|
23
|
+
|
24
|
+
- fix: Export `pinned` prop from `PositioningProps` ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by lingfangao@hotmail.com)
|
25
|
+
- Bump @fluentui/react-utilities to v9.6.2 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
|
26
|
+
|
7
27
|
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.5.1)
|
8
28
|
|
9
|
-
Wed, 08 Mar 2023 17:
|
29
|
+
Wed, 08 Mar 2023 17:42:38 GMT
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.5.0..@fluentui/react-positioning_v9.5.1)
|
11
31
|
|
12
32
|
### Patches
|
package/dist/index.d.ts
CHANGED
@@ -195,7 +195,7 @@ declare interface PositioningOptions {
|
|
195
195
|
fallbackPositions?: PositioningShorthandValue[];
|
196
196
|
}
|
197
197
|
|
198
|
-
export declare interface PositioningProps extends Pick<PositioningOptions, 'align' | 'flipBoundary' | 'overflowBoundary' | 'overflowBoundaryPadding' | 'position' | 'offset' | 'arrowPadding' | 'autoSize' | 'coverTarget'> {
|
198
|
+
export declare interface PositioningProps extends Pick<PositioningOptions, 'align' | 'flipBoundary' | 'overflowBoundary' | 'overflowBoundaryPadding' | 'position' | 'offset' | 'arrowPadding' | 'autoSize' | 'coverTarget' | 'pinned'> {
|
199
199
|
/** An imperative handle to Popper methods. */
|
200
200
|
positioningRef?: React_2.Ref<PositioningImperativeRef>;
|
201
201
|
/**
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { computePosition } from '@floating-ui/dom';
|
2
2
|
import { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';
|
3
|
+
import { isHTMLElement } from '@fluentui/react-utilities';
|
3
4
|
/**
|
4
5
|
* @internal
|
5
6
|
* @returns manager that handles positioning out of the react lifecycle
|
@@ -39,7 +40,7 @@ export function createPositionManager(options) {
|
|
39
40
|
}
|
40
41
|
if (isFirstUpdate) {
|
41
42
|
scrollParents.add(getScrollParent(container));
|
42
|
-
if (target
|
43
|
+
if (isHTMLElement(target)) {
|
43
44
|
scrollParents.add(getScrollParent(target));
|
44
45
|
}
|
45
46
|
scrollParents.forEach(scrollParent => {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["computePosition","debounce","writeArrowUpdates","writeContainerUpdates","getScrollParent","createPositionManager","options","container","target","arrow","strategy","middleware","placement","isDestroyed","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","
|
1
|
+
{"version":3,"names":["computePosition","debounce","writeArrowUpdates","writeContainerUpdates","getScrollParent","isHTMLElement","createPositionManager","options","container","target","arrow","strategy","middleware","placement","isDestroyed","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","forEach","scrollParent","addEventListener","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener"],"sources":["../src/packages/react-components/react-positioning/src/createPositionManager.ts"],"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';\nimport { isHTMLElement } from '@fluentui/react-utilities';\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 let isDestroyed = false;\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 // debounced update can still occur afterwards\n // early return to avoid memory leaks\n if (isDestroyed) {\n return;\n }\n\n if (isFirstUpdate) {\n scrollParents.add(getScrollParent(container));\n if (isHTMLElement(target)) {\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 // Promise can still resolve after destruction\n // early return to avoid applying outdated position\n if (isDestroyed) {\n return;\n }\n\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 isDestroyed = true;\n\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"],"mappings":"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"}
|
package/lib/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/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 * Applies a padding to the overflow bounadry, so that overflow is detected earlier before the\n * positioned surface hits the overflow boundary.\n */\n overflowBoundaryPadding?: number | Partial<{ top: number; end: number; bottom: number; start: number }>;\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 /**\n * If flip fails to stop the positioned element from overflowing\n * its boundaries, use a specified fallback positions.\n */\n fallbackPositions?: PositioningShorthandValue[];\n}\n\nexport interface PositioningProps\n extends Pick<\n PositioningOptions,\n | 'align'\n | 'flipBoundary'\n | 'overflowBoundary'\n | 'overflowBoundaryPadding'\n | 'position'\n | 'offset'\n | 'arrowPadding'\n | 'autoSize'\n | 'coverTarget'\n > {\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"]}
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/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 * Applies a padding to the overflow bounadry, so that overflow is detected earlier before the\n * positioned surface hits the overflow boundary.\n */\n overflowBoundaryPadding?: number | Partial<{ top: number; end: number; bottom: number; start: number }>;\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 /**\n * If flip fails to stop the positioned element from overflowing\n * its boundaries, use a specified fallback positions.\n */\n fallbackPositions?: PositioningShorthandValue[];\n}\n\nexport interface PositioningProps\n extends Pick<\n PositioningOptions,\n | 'align'\n | 'flipBoundary'\n | 'overflowBoundary'\n | 'overflowBoundaryPadding'\n | 'position'\n | 'offset'\n | 'arrowPadding'\n | 'autoSize'\n | 'coverTarget'\n | 'pinned'\n > {\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"]}
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { isHTMLElement } from '@fluentui/react-utilities';
|
1
2
|
import { getScrollParent } from './getScrollParent';
|
2
3
|
/**
|
3
4
|
* Toggles event listeners for scroll parent.
|
@@ -9,11 +10,11 @@ export function toggleScrollListener(next, prev, handler) {
|
|
9
10
|
if (next === prev) {
|
10
11
|
return;
|
11
12
|
}
|
12
|
-
if (prev
|
13
|
+
if (isHTMLElement(prev)) {
|
13
14
|
const prevScrollParent = getScrollParent(prev);
|
14
15
|
prevScrollParent.removeEventListener('scroll', handler);
|
15
16
|
}
|
16
|
-
if (next
|
17
|
+
if (isHTMLElement(next)) {
|
17
18
|
const scrollParent = getScrollParent(next);
|
18
19
|
scrollParent.addEventListener('scroll', handler);
|
19
20
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["getScrollParent","toggleScrollListener","next","prev","handler","
|
1
|
+
{"version":3,"names":["isHTMLElement","getScrollParent","toggleScrollListener","next","prev","handler","prevScrollParent","removeEventListener","scrollParent","addEventListener"],"sources":["../src/packages/react-components/react-positioning/src/utils/toggleScrollListener.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport type { PositioningVirtualElement } from '../types';\nimport { getScrollParent } from './getScrollParent';\n\n/**\n * Toggles event listeners for scroll parent.\n * Cleans up the event listeners for the previous element and adds them for the new scroll parent.\n * @param next Next element\n * @param prev Previous element\n */\nexport function toggleScrollListener(\n next: HTMLElement | PositioningVirtualElement | null,\n prev: HTMLElement | PositioningVirtualElement | null,\n handler: EventListener,\n) {\n if (next === prev) {\n return;\n }\n\n if (isHTMLElement(prev)) {\n const prevScrollParent = getScrollParent(prev);\n prevScrollParent.removeEventListener('scroll', handler);\n }\n if (isHTMLElement(next)) {\n const scrollParent = getScrollParent(next);\n scrollParent.addEventListener('scroll', handler);\n }\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,2BAA2B;AAEzD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD;;;;;;AAMA,OAAM,SAAUC,oBAAoBA,CAClCC,IAAoD,EACpDC,IAAoD,EACpDC,OAAsB;EAEtB,IAAIF,IAAI,KAAKC,IAAI,EAAE;IACjB;;EAGF,IAAIJ,aAAa,CAACI,IAAI,CAAC,EAAE;IACvB,MAAME,gBAAgB,GAAGL,eAAe,CAACG,IAAI,CAAC;IAC9CE,gBAAgB,CAACC,mBAAmB,CAAC,QAAQ,EAAEF,OAAO,CAAC;;EAEzD,IAAIL,aAAa,CAACG,IAAI,CAAC,EAAE;IACvB,MAAMK,YAAY,GAAGP,eAAe,CAACE,IAAI,CAAC;IAC1CK,YAAY,CAACC,gBAAgB,CAAC,QAAQ,EAAEJ,OAAO,CAAC;;AAEpD"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
define(["require", "exports", "@floating-ui/dom", "./utils"], function (require, exports, dom_1, utils_1) {
|
1
|
+
define(["require", "exports", "@floating-ui/dom", "./utils", "@fluentui/react-utilities"], function (require, exports, dom_1, utils_1, react_utilities_1) {
|
2
2
|
"use strict";
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
4
4
|
exports.createPositionManager = void 0;
|
@@ -29,7 +29,7 @@ define(["require", "exports", "@floating-ui/dom", "./utils"], function (require,
|
|
29
29
|
}
|
30
30
|
if (isFirstUpdate) {
|
31
31
|
scrollParents.add(utils_1.getScrollParent(container));
|
32
|
-
if (target
|
32
|
+
if (react_utilities_1.isHTMLElement(target)) {
|
33
33
|
scrollParents.add(utils_1.getScrollParent(target));
|
34
34
|
}
|
35
35
|
scrollParents.forEach(function (scrollParent) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"createPositionManager.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/createPositionManager.ts"],"names":[],"mappings":";;;;
|
1
|
+
{"version":3,"file":"createPositionManager.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/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';\nimport { isHTMLElement } from '@fluentui/react-utilities';\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 let isDestroyed = false;\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 // debounced update can still occur afterwards\n // early return to avoid memory leaks\n if (isDestroyed) {\n return;\n }\n\n if (isFirstUpdate) {\n scrollParents.add(getScrollParent(container));\n if (isHTMLElement(target)) {\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 // Promise can still resolve after destruction\n // early return to avoid applying outdated position\n if (isDestroyed) {\n return;\n }\n\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 isDestroyed = true;\n\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"]}
|
package/lib-amd/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/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 * Applies a padding to the overflow bounadry, so that overflow is detected earlier before the\n * positioned surface hits the overflow boundary.\n */\n overflowBoundaryPadding?: number | Partial<{ top: number; end: number; bottom: number; start: number }>;\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 /**\n * If flip fails to stop the positioned element from overflowing\n * its boundaries, use a specified fallback positions.\n */\n fallbackPositions?: PositioningShorthandValue[];\n}\n\nexport interface PositioningProps\n extends Pick<\n PositioningOptions,\n | 'align'\n | 'flipBoundary'\n | 'overflowBoundary'\n | 'overflowBoundaryPadding'\n | 'position'\n | 'offset'\n | 'arrowPadding'\n | 'autoSize'\n | 'coverTarget'\n > {\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"]}
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/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 * Applies a padding to the overflow bounadry, so that overflow is detected earlier before the\n * positioned surface hits the overflow boundary.\n */\n overflowBoundaryPadding?: number | Partial<{ top: number; end: number; bottom: number; start: number }>;\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 /**\n * If flip fails to stop the positioned element from overflowing\n * its boundaries, use a specified fallback positions.\n */\n fallbackPositions?: PositioningShorthandValue[];\n}\n\nexport interface PositioningProps\n extends Pick<\n PositioningOptions,\n | 'align'\n | 'flipBoundary'\n | 'overflowBoundary'\n | 'overflowBoundaryPadding'\n | 'position'\n | 'offset'\n | 'arrowPadding'\n | 'autoSize'\n | 'coverTarget'\n | 'pinned'\n > {\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"]}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
define(["require", "exports", "./getScrollParent"], function (require, exports, getScrollParent_1) {
|
1
|
+
define(["require", "exports", "@fluentui/react-utilities", "./getScrollParent"], function (require, exports, react_utilities_1, getScrollParent_1) {
|
2
2
|
"use strict";
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
4
4
|
exports.toggleScrollListener = void 0;
|
@@ -12,11 +12,11 @@ define(["require", "exports", "./getScrollParent"], function (require, exports,
|
|
12
12
|
if (next === prev) {
|
13
13
|
return;
|
14
14
|
}
|
15
|
-
if (prev
|
15
|
+
if (react_utilities_1.isHTMLElement(prev)) {
|
16
16
|
var prevScrollParent = getScrollParent_1.getScrollParent(prev);
|
17
17
|
prevScrollParent.removeEventListener('scroll', handler);
|
18
18
|
}
|
19
|
-
if (next
|
19
|
+
if (react_utilities_1.isHTMLElement(next)) {
|
20
20
|
var scrollParent = getScrollParent_1.getScrollParent(next);
|
21
21
|
scrollParent.addEventListener('scroll', handler);
|
22
22
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"toggleScrollListener.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/toggleScrollListener.ts"],"names":[],"mappings":";;;;
|
1
|
+
{"version":3,"file":"toggleScrollListener.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/toggleScrollListener.ts"],"names":[],"mappings":";;;;IAIA;;;;;OAKG;IACH,SAAgB,oBAAoB,CAClC,IAAoD,EACpD,IAAoD,EACpD,OAAsB;QAEtB,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,OAAO;SACR;QAED,IAAI,+BAAa,CAAC,IAAI,CAAC,EAAE;YACvB,IAAM,gBAAgB,GAAG,iCAAe,CAAC,IAAI,CAAC,CAAC;YAC/C,gBAAgB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;SACzD;QACD,IAAI,+BAAa,CAAC,IAAI,CAAC,EAAE;YACvB,IAAM,YAAY,GAAG,iCAAe,CAAC,IAAI,CAAC,CAAC;YAC3C,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;SAClD;IACH,CAAC;IAjBD,oDAiBC","sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport type { PositioningVirtualElement } from '../types';\nimport { getScrollParent } from './getScrollParent';\n\n/**\n * Toggles event listeners for scroll parent.\n * Cleans up the event listeners for the previous element and adds them for the new scroll parent.\n * @param next Next element\n * @param prev Previous element\n */\nexport function toggleScrollListener(\n next: HTMLElement | PositioningVirtualElement | null,\n prev: HTMLElement | PositioningVirtualElement | null,\n handler: EventListener,\n) {\n if (next === prev) {\n return;\n }\n\n if (isHTMLElement(prev)) {\n const prevScrollParent = getScrollParent(prev);\n prevScrollParent.removeEventListener('scroll', handler);\n }\n if (isHTMLElement(next)) {\n const scrollParent = getScrollParent(next);\n scrollParent.addEventListener('scroll', handler);\n }\n}\n"]}
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.createPositionManager = void 0;
|
7
7
|
const dom_1 = /*#__PURE__*/require("@floating-ui/dom");
|
8
8
|
const utils_1 = /*#__PURE__*/require("./utils");
|
9
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
10
|
/**
|
10
11
|
* @internal
|
11
12
|
* @returns manager that handles positioning out of the react lifecycle
|
@@ -45,7 +46,7 @@ function createPositionManager(options) {
|
|
45
46
|
}
|
46
47
|
if (isFirstUpdate) {
|
47
48
|
scrollParents.add(utils_1.getScrollParent(container));
|
48
|
-
if (target
|
49
|
+
if (react_utilities_1.isHTMLElement(target)) {
|
49
50
|
scrollParents.add(utils_1.getScrollParent(target));
|
50
51
|
}
|
51
52
|
scrollParents.forEach(scrollParent => {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["dom_1","require","utils_1","createPositionManager","options","container","target","arrow","strategy","middleware","placement","isDestroyed","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","getScrollParent","
|
1
|
+
{"version":3,"names":["dom_1","require","utils_1","react_utilities_1","createPositionManager","options","container","target","arrow","strategy","middleware","placement","isDestroyed","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","getScrollParent","isHTMLElement","forEach","scrollParent","addEventListener","computePosition","then","x","y","middlewareData","computedPlacement","writeArrowUpdates","writeContainerUpdates","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","debounce","removeEventListener","exports"],"sources":["../src/packages/react-components/react-positioning/src/createPositionManager.ts"],"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';\nimport { isHTMLElement } from '@fluentui/react-utilities';\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 let isDestroyed = false;\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 // debounced update can still occur afterwards\n // early return to avoid memory leaks\n if (isDestroyed) {\n return;\n }\n\n if (isFirstUpdate) {\n scrollParents.add(getScrollParent(container));\n if (isHTMLElement(target)) {\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 // Promise can still resolve after destruction\n // early return to avoid applying outdated position\n if (isDestroyed) {\n return;\n }\n\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 isDestroyed = true;\n\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"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["../src/packages/react-components/react-positioning/src/types.ts"],"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 * Applies a padding to the overflow bounadry, so that overflow is detected earlier before the\n * positioned surface hits the overflow boundary.\n */\n overflowBoundaryPadding?: number | Partial<{ top: number; end: number; bottom: number; start: number }>;\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 /**\n * If flip fails to stop the positioned element from overflowing\n * its boundaries, use a specified fallback positions.\n */\n fallbackPositions?: PositioningShorthandValue[];\n}\n\nexport interface PositioningProps\n extends Pick<\n PositioningOptions,\n | 'align'\n | 'flipBoundary'\n | 'overflowBoundary'\n | 'overflowBoundaryPadding'\n | 'position'\n | 'offset'\n | 'arrowPadding'\n | 'autoSize'\n | 'coverTarget'\n > {\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"],"mappings":""}
|
1
|
+
{"version":3,"names":[],"sources":["../src/packages/react-components/react-positioning/src/types.ts"],"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 * Applies a padding to the overflow bounadry, so that overflow is detected earlier before the\n * positioned surface hits the overflow boundary.\n */\n overflowBoundaryPadding?: number | Partial<{ top: number; end: number; bottom: number; start: number }>;\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 /**\n * If flip fails to stop the positioned element from overflowing\n * its boundaries, use a specified fallback positions.\n */\n fallbackPositions?: PositioningShorthandValue[];\n}\n\nexport interface PositioningProps\n extends Pick<\n PositioningOptions,\n | 'align'\n | 'flipBoundary'\n | 'overflowBoundary'\n | 'overflowBoundaryPadding'\n | 'position'\n | 'offset'\n | 'arrowPadding'\n | 'autoSize'\n | 'coverTarget'\n | 'pinned'\n > {\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"],"mappings":""}
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.toggleScrollListener = void 0;
|
7
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
7
8
|
const getScrollParent_1 = /*#__PURE__*/require("./getScrollParent");
|
8
9
|
/**
|
9
10
|
* Toggles event listeners for scroll parent.
|
@@ -15,11 +16,11 @@ function toggleScrollListener(next, prev, handler) {
|
|
15
16
|
if (next === prev) {
|
16
17
|
return;
|
17
18
|
}
|
18
|
-
if (prev
|
19
|
+
if (react_utilities_1.isHTMLElement(prev)) {
|
19
20
|
const prevScrollParent = getScrollParent_1.getScrollParent(prev);
|
20
21
|
prevScrollParent.removeEventListener('scroll', handler);
|
21
22
|
}
|
22
|
-
if (next
|
23
|
+
if (react_utilities_1.isHTMLElement(next)) {
|
23
24
|
const scrollParent = getScrollParent_1.getScrollParent(next);
|
24
25
|
scrollParent.addEventListener('scroll', handler);
|
25
26
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["react_utilities_1","require","getScrollParent_1","toggleScrollListener","next","prev","handler","isHTMLElement","prevScrollParent","getScrollParent","removeEventListener","scrollParent","addEventListener","exports"],"sources":["../src/packages/react-components/react-positioning/src/utils/toggleScrollListener.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport type { PositioningVirtualElement } from '../types';\nimport { getScrollParent } from './getScrollParent';\n\n/**\n * Toggles event listeners for scroll parent.\n * Cleans up the event listeners for the previous element and adds them for the new scroll parent.\n * @param next Next element\n * @param prev Previous element\n */\nexport function toggleScrollListener(\n next: HTMLElement | PositioningVirtualElement | null,\n prev: HTMLElement | PositioningVirtualElement | null,\n handler: EventListener,\n) {\n if (next === prev) {\n return;\n }\n\n if (isHTMLElement(prev)) {\n const prevScrollParent = getScrollParent(prev);\n prevScrollParent.removeEventListener('scroll', handler);\n }\n if (isHTMLElement(next)) {\n const scrollParent = getScrollParent(next);\n scrollParent.addEventListener('scroll', handler);\n }\n}\n"],"mappings":";;;;;;AAAA,MAAAA,iBAAA,gBAAAC,OAAA;AAEA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA;;;;;;AAMA,SAAgBE,oBAAoBA,CAClCC,IAAoD,EACpDC,IAAoD,EACpDC,OAAsB;EAEtB,IAAIF,IAAI,KAAKC,IAAI,EAAE;IACjB;;EAGF,IAAIL,iBAAA,CAAAO,aAAa,CAACF,IAAI,CAAC,EAAE;IACvB,MAAMG,gBAAgB,GAAGN,iBAAA,CAAAO,eAAe,CAACJ,IAAI,CAAC;IAC9CG,gBAAgB,CAACE,mBAAmB,CAAC,QAAQ,EAAEJ,OAAO,CAAC;;EAEzD,IAAIN,iBAAA,CAAAO,aAAa,CAACH,IAAI,CAAC,EAAE;IACvB,MAAMO,YAAY,GAAGT,iBAAA,CAAAO,eAAe,CAACL,IAAI,CAAC;IAC1CO,YAAY,CAACC,gBAAgB,CAAC,QAAQ,EAAEN,OAAO,CAAC;;AAEpD;AAjBAO,OAAA,CAAAV,oBAAA,GAAAA,oBAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
|
-
"version": "9.5.
|
3
|
+
"version": "9.5.3",
|
4
4
|
"description": "A react wrapper around Popper.js for Fluent UI",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -31,7 +31,7 @@
|
|
31
31
|
"@floating-ui/dom": "^1.2.0",
|
32
32
|
"@fluentui/react-shared-contexts": "^9.3.0",
|
33
33
|
"@fluentui/react-theme": "^9.1.5",
|
34
|
-
"@fluentui/react-utilities": "^9.
|
34
|
+
"@fluentui/react-utilities": "^9.7.0",
|
35
35
|
"@griffel/react": "^1.5.2",
|
36
36
|
"tslib": "^2.1.0"
|
37
37
|
},
|