@fluentui/react-positioning 9.3.10 → 9.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/CHANGELOG.json +38 -2
  2. package/CHANGELOG.md +22 -3
  3. package/dist/index.d.ts +10 -0
  4. package/lib/createPositionManager.js +13 -4
  5. package/lib/createPositionManager.js.map +1 -1
  6. package/lib/middleware/shift.js +7 -2
  7. package/lib/middleware/shift.js.map +1 -1
  8. package/lib/types.js.map +1 -1
  9. package/lib/usePositioning.js +7 -4
  10. package/lib/usePositioning.js.map +1 -1
  11. package/lib/utils/index.js +1 -0
  12. package/lib/utils/index.js.map +1 -1
  13. package/lib/utils/toFloatingUIPadding.js +23 -0
  14. package/lib/utils/toFloatingUIPadding.js.map +1 -0
  15. package/lib-amd/createPositionManager.js +12 -3
  16. package/lib-amd/createPositionManager.js.map +1 -1
  17. package/lib-amd/middleware/shift.js +3 -3
  18. package/lib-amd/middleware/shift.js.map +1 -1
  19. package/lib-amd/types.js.map +1 -1
  20. package/lib-amd/usePositioning.js +11 -3
  21. package/lib-amd/usePositioning.js.map +1 -1
  22. package/lib-amd/utils/index.js +2 -1
  23. package/lib-amd/utils/index.js.map +1 -1
  24. package/lib-amd/utils/toFloatingUIPadding.js +25 -0
  25. package/lib-amd/utils/toFloatingUIPadding.js.map +1 -0
  26. package/lib-commonjs/createPositionManager.js +13 -4
  27. package/lib-commonjs/createPositionManager.js.map +1 -1
  28. package/lib-commonjs/middleware/shift.js +6 -1
  29. package/lib-commonjs/middleware/shift.js.map +1 -1
  30. package/lib-commonjs/usePositioning.js +7 -4
  31. package/lib-commonjs/usePositioning.js.map +1 -1
  32. package/lib-commonjs/utils/index.js +1 -0
  33. package/lib-commonjs/utils/index.js.map +1 -1
  34. package/lib-commonjs/utils/toFloatingUIPadding.js +30 -0
  35. package/lib-commonjs/utils/toFloatingUIPadding.js.map +1 -0
  36. package/package.json +3 -3
package/CHANGELOG.json CHANGED
@@ -2,7 +2,43 @@
2
2
  "name": "@fluentui/react-positioning",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 31 Jan 2023 19:50:42 GMT",
5
+ "date": "Fri, 10 Feb 2023 08:46:44 GMT",
6
+ "tag": "@fluentui/react-positioning_v9.4.0",
7
+ "version": "9.4.0",
8
+ "comments": {
9
+ "minor": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-positioning",
13
+ "commit": "95a7b63876ccdc142172d93fe30b035d80f4fe88",
14
+ "comment": "feat: Add `overflowBoundaryPadding` positioning prop"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-positioning",
19
+ "comment": "Bump @fluentui/react-utilities to v9.5.2",
20
+ "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Tue, 07 Feb 2023 14:13:06 GMT",
27
+ "tag": "@fluentui/react-positioning_v9.3.11",
28
+ "version": "9.3.11",
29
+ "comments": {
30
+ "patch": [
31
+ {
32
+ "author": "lingfangao@hotmail.com",
33
+ "package": "@fluentui/react-positioning",
34
+ "commit": "db4be59f6c1677bd9182205dabfcb3e2bb47837f",
35
+ "comment": "fix(createPositionManager): computePosition should not apply styles after destruction"
36
+ }
37
+ ]
38
+ }
39
+ },
40
+ {
41
+ "date": "Tue, 31 Jan 2023 19:53:58 GMT",
6
42
  "tag": "@fluentui/react-positioning_v9.3.10",
7
43
  "version": "9.3.10",
8
44
  "comments": {
@@ -11,7 +47,7 @@
11
47
  "author": "beachball",
12
48
  "package": "@fluentui/react-positioning",
13
49
  "comment": "Bump @fluentui/react-utilities to v9.5.1",
14
- "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
50
+ "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
15
51
  }
16
52
  ]
17
53
  }
package/CHANGELOG.md CHANGED
@@ -1,17 +1,36 @@
1
1
  # Change Log - @fluentui/react-positioning
2
2
 
3
- This log was last generated on Tue, 31 Jan 2023 19:50:42 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 10 Feb 2023 08:46:44 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.4.0)
8
+
9
+ Fri, 10 Feb 2023 08:46:44 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.11..@fluentui/react-positioning_v9.4.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: Add `overflowBoundaryPadding` positioning prop ([PR #26730](https://github.com/microsoft/fluentui/pull/26730) by lingfangao@hotmail.com)
15
+ - Bump @fluentui/react-utilities to v9.5.2 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
16
+
17
+ ## [9.3.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.11)
18
+
19
+ Tue, 07 Feb 2023 14:13:06 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.10..@fluentui/react-positioning_v9.3.11)
21
+
22
+ ### Patches
23
+
24
+ - fix(createPositionManager): computePosition should not apply styles after destruction ([PR #26593](https://github.com/microsoft/fluentui/pull/26593) by lingfangao@hotmail.com)
25
+
7
26
  ## [9.3.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.10)
8
27
 
9
- Tue, 31 Jan 2023 19:50:42 GMT
28
+ Tue, 31 Jan 2023 19:53:58 GMT
10
29
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.9..@fluentui/react-positioning_v9.3.10)
11
30
 
12
31
  ### Patches
13
32
 
14
- - Bump @fluentui/react-utilities to v9.5.1 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
33
+ - Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
15
34
 
16
35
  ## [9.3.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.9)
17
36
 
package/dist/index.d.ts CHANGED
@@ -133,6 +133,16 @@ declare interface PositioningOptions {
133
133
  flipBoundary?: Boundary | null;
134
134
  /** The element which will define the boundaries of the positioned element for the overflow behavior. */
135
135
  overflowBoundary?: Boundary | null;
136
+ /**
137
+ * Applies a padding to the overflow bounadry, so that overflow is detected earlier before the
138
+ * positioned surface hits the overflow boundary.
139
+ */
140
+ overflowBoundaryPadding?: number | Partial<{
141
+ top: number;
142
+ end: number;
143
+ bottom: number;
144
+ start: number;
145
+ }>;
136
146
  /**
137
147
  * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
138
148
  * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
@@ -13,6 +13,7 @@ export function createPositionManager(options) {
13
13
  middleware,
14
14
  placement
15
15
  } = options;
16
+ let isDestroyed = false;
16
17
  if (!target || !container) {
17
18
  return {
18
19
  updatePosition: () => undefined,
@@ -30,7 +31,12 @@ export function createPositionManager(options) {
30
31
  top: 0,
31
32
  margin: 0
32
33
  });
33
- let forceUpdate = () => {
34
+ const forceUpdate = () => {
35
+ // debounced update can still occur afterwards
36
+ // early return to avoid memory leaks
37
+ if (isDestroyed) {
38
+ return;
39
+ }
34
40
  if (isFirstUpdate) {
35
41
  scrollParents.add(getScrollParent(container));
36
42
  if (target instanceof HTMLElement) {
@@ -54,6 +60,11 @@ export function createPositionManager(options) {
54
60
  middlewareData,
55
61
  placement: computedPlacement
56
62
  }) => {
63
+ // Promise can still resolve after destruction
64
+ // early return to avoid applying outdated position
65
+ if (isDestroyed) {
66
+ return;
67
+ }
57
68
  writeArrowUpdates({
58
69
  arrow,
59
70
  middlewareData
@@ -85,9 +96,7 @@ export function createPositionManager(options) {
85
96
  };
86
97
  const updatePosition = debounce(() => forceUpdate());
87
98
  const dispose = () => {
88
- // debounced update can still occur afterwards
89
- // so destroy the reference to forceUpdate
90
- forceUpdate = () => null;
99
+ isDestroyed = true;
91
100
  if (targetWindow) {
92
101
  targetWindow.removeEventListener('scroll', updatePosition);
93
102
  targetWindow.removeEventListener('resize', updatePosition);
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["computePosition","debounce","writeArrowUpdates","writeContainerUpdates","getScrollParent","createPositionManager","options","container","target","arrow","strategy","middleware","placement","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","HTMLElement","forEach","scrollParent","addEventListener","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener"],"sourceRoot":"../src/","sources":["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';\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 let 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 // debounced update can still occur afterwards\n // so destroy the reference to forceUpdate\n forceUpdate = () => null;\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"]}
1
+ {"version":3,"mappings":"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","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","HTMLElement","forEach","scrollParent","addEventListener","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener"],"sourceRoot":"../src/","sources":["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';\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 (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 // 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"]}
@@ -1,5 +1,5 @@
1
1
  import { shift as baseShift, limitShift } from '@floating-ui/dom';
2
- import { getBoundary } from '../utils/index';
2
+ import { getBoundary, toFloatingUIPadding } from '../utils/index';
3
3
  /**
4
4
  * Wraps the floating UI shift middleware for easier usage of our options
5
5
  */
@@ -8,7 +8,9 @@ export function shift(options) {
8
8
  hasScrollableElement,
9
9
  disableTether,
10
10
  overflowBoundary,
11
- container
11
+ container,
12
+ overflowBoundaryPadding,
13
+ isRtl
12
14
  } = options;
13
15
  return baseShift({
14
16
  ...(hasScrollableElement && {
@@ -21,6 +23,9 @@ export function shift(options) {
21
23
  mainAxis: false
22
24
  })
23
25
  }),
26
+ ...(overflowBoundaryPadding && {
27
+ padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl)
28
+ }),
24
29
  ...(overflowBoundary && {
25
30
  altBoundary: true,
26
31
  boundary: getBoundary(container, overflowBoundary)
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,SAASA,KAAK,IAAIC,SAAS,EAAEC,UAAU,QAAQ,kBAAkB;AAEjE,SAASC,WAAW,QAAQ,gBAAgB;AAQ5C;;;AAGA,OAAM,SAAUH,KAAK,CAACI,OAA+B;EACnD,MAAM;IAAEC,oBAAoB;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC;EAAS,CAAE,GAAGJ,OAAO;EAEpF,OAAOH,SAAS,CAAC;IACf,IAAII,oBAAoB,IAAI;MAAEI,QAAQ,EAAE;IAAmB,CAAE,CAAC;IAC9D,IAAIH,aAAa,IAAI;MACnBI,SAAS,EAAEJ,aAAa,KAAK,KAAK;MAClCK,OAAO,EAAET,UAAU,CAAC;QAAEQ,SAAS,EAAEJ,aAAa,KAAK,KAAK;QAAEM,QAAQ,EAAE;MAAK,CAAE;KAC5E,CAAC;IACF,IAAIL,gBAAgB,IAAI;MAAEM,WAAW,EAAE,IAAI;MAAEJ,QAAQ,EAAEN,WAAW,CAACK,SAAS,EAAED,gBAAgB;IAAC,CAAE;GAClG,CAAC;AACJ","names":["shift","baseShift","limitShift","getBoundary","options","hasScrollableElement","disableTether","overflowBoundary","container","boundary","crossAxis","limiter","mainAxis","altBoundary"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/shift.ts"],"sourcesContent":["import { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions extends Pick<PositioningOptions, 'overflowBoundary'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions) {\n const { hasScrollableElement, disableTether, overflowBoundary, container } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"]}
1
+ {"version":3,"mappings":"AAAA,SAASA,KAAK,IAAIC,SAAS,EAAEC,UAAU,QAAQ,kBAAkB;AAEjE,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,gBAAgB;AAUjE;;;AAGA,OAAM,SAAUJ,KAAK,CAACK,OAA+B;EACnD,MAAM;IAAEC,oBAAoB;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC,SAAS;IAAEC,uBAAuB;IAAEC;EAAK,CAAE,GAAGN,OAAO;EAEpH,OAAOJ,SAAS,CAAC;IACf,IAAIK,oBAAoB,IAAI;MAAEM,QAAQ,EAAE;IAAmB,CAAE,CAAC;IAC9D,IAAIL,aAAa,IAAI;MACnBM,SAAS,EAAEN,aAAa,KAAK,KAAK;MAClCO,OAAO,EAAEZ,UAAU,CAAC;QAAEW,SAAS,EAAEN,aAAa,KAAK,KAAK;QAAEQ,QAAQ,EAAE;MAAK,CAAE;KAC5E,CAAC;IACF,IAAIL,uBAAuB,IAAI;MAAEM,OAAO,EAAEZ,mBAAmB,CAACM,uBAAuB,EAAEC,KAAK;IAAC,CAAE,CAAC;IAChG,IAAIH,gBAAgB,IAAI;MAAES,WAAW,EAAE,IAAI;MAAEL,QAAQ,EAAET,WAAW,CAACM,SAAS,EAAED,gBAAgB;IAAC,CAAE;GAClG,CAAC;AACJ","names":["shift","baseShift","limitShift","getBoundary","toFloatingUIPadding","options","hasScrollableElement","disableTether","overflowBoundary","container","overflowBoundaryPadding","isRtl","boundary","crossAxis","limiter","mainAxis","padding","altBoundary"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/shift.ts"],"sourcesContent":["import { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, toFloatingUIPadding } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions) {\n const { hasScrollableElement, disableTether, overflowBoundary, container, overflowBoundaryPadding, isRtl } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"]}
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 * 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"]}
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\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"]}
@@ -121,7 +121,8 @@ function usePositioningOptions(options) {
121
121
  pinned,
122
122
  position,
123
123
  unstable_disableTether: disableTether,
124
- positionFixed
124
+ positionFixed,
125
+ overflowBoundaryPadding
125
126
  } = options;
126
127
  const {
127
128
  dir
@@ -130,7 +131,6 @@ function usePositioningOptions(options) {
130
131
  const strategy = positionFixed ? 'fixed' : 'absolute';
131
132
  return React.useCallback((container, arrow) => {
132
133
  const hasScrollableElement = hasScrollParent(container);
133
- const placement = toFloatingUIPlacement(align, position, isRtl);
134
134
  const middleware = [offset && offsetMiddleware(offset), coverTarget && coverTargetMiddleware(), !pinned && flipMiddleware({
135
135
  container,
136
136
  flipBoundary,
@@ -139,7 +139,9 @@ function usePositioningOptions(options) {
139
139
  container,
140
140
  hasScrollableElement,
141
141
  overflowBoundary,
142
- disableTether
142
+ disableTether,
143
+ overflowBoundaryPadding,
144
+ isRtl
143
145
  }), autoSize && maxSizeMiddleware(autoSize, {
144
146
  container,
145
147
  overflowBoundary
@@ -151,11 +153,12 @@ function usePositioningOptions(options) {
151
153
  }), hideMiddleware({
152
154
  strategy: 'escaped'
153
155
  })].filter(Boolean);
156
+ const placement = toFloatingUIPlacement(align, position, isRtl);
154
157
  return {
155
158
  placement,
156
159
  middleware,
157
160
  strategy
158
161
  };
159
- }, [align, arrowPadding, autoSize, coverTarget, disableTether, flipBoundary, isRtl, offset, overflowBoundary, pinned, position, strategy]);
162
+ }, [align, arrowPadding, autoSize, coverTarget, disableTether, flipBoundary, isRtl, offset, overflowBoundary, pinned, position, strategy, overflowBoundaryPadding]);
160
163
  }
161
164
  //# sourceMappingURL=usePositioning.js.map
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["hide","hideMiddleware","arrow","arrowMiddleware","useFluent_unstable","useFluent","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","useCallbackRef","toFloatingUIPlacement","hasAutofocusFilter","hasScrollParent","shift","shiftMiddleware","flip","flipMiddleware","coverTarget","coverTargetMiddleware","maxSize","maxSizeMiddleware","offset","offsetMiddleware","intersecting","intersectingMiddleware","createPositionManager","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","usePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","setContainer","setArrow","align","arrowPadding","autoSize","flipBoundary","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","dir","isRtl","strategy","hasScrollableElement","placement","middleware","element","padding","filter","Boolean"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/usePositioning.ts"],"sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({ container, hasScrollableElement, overflowBoundary, disableTether }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n ],\n );\n}\n"]}
1
+ {"version":3,"mappings":"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","names":["hide","hideMiddleware","arrow","arrowMiddleware","useFluent_unstable","useFluent","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","useCallbackRef","toFloatingUIPlacement","hasAutofocusFilter","hasScrollParent","shift","shiftMiddleware","flip","flipMiddleware","coverTarget","coverTargetMiddleware","maxSize","maxSizeMiddleware","offset","offsetMiddleware","intersecting","intersectingMiddleware","createPositionManager","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","usePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","setContainer","setArrow","align","arrowPadding","autoSize","flipBoundary","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","overflowBoundaryPadding","dir","isRtl","strategy","hasScrollableElement","middleware","element","padding","filter","Boolean","placement"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/usePositioning.ts"],"sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n overflowBoundaryPadding,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether,\n overflowBoundaryPadding,\n isRtl,\n }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n overflowBoundaryPadding,\n ],\n );\n}\n"]}
@@ -3,6 +3,7 @@ export * from './getBoundary';
3
3
  export * from './getReactFiberFromNode';
4
4
  export * from './getScrollParent';
5
5
  export * from './mergeArrowOffset';
6
+ export * from './toFloatingUIPadding';
6
7
  export * from './toFloatingUIPlacement';
7
8
  export * from './fromFloatingUIPlacement';
8
9
  export * from './resolvePositioningShorthand';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './parseFloatingUIPlacement';\nexport * from './getBoundary';\nexport * from './getReactFiberFromNode';\nexport * from './getScrollParent';\nexport * from './mergeArrowOffset';\nexport * from './toFloatingUIPlacement';\nexport * from './fromFloatingUIPlacement';\nexport * from './resolvePositioningShorthand';\nexport * from './useCallbackRef';\nexport * from './debounce';\nexport * from './toggleScrollListener';\nexport * from './hasAutoFocusFilter';\nexport * from './writeArrowUpdates';\nexport * from './writeContainerupdates';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './parseFloatingUIPlacement';\nexport * from './getBoundary';\nexport * from './getReactFiberFromNode';\nexport * from './getScrollParent';\nexport * from './mergeArrowOffset';\nexport * from './toFloatingUIPadding';\nexport * from './toFloatingUIPlacement';\nexport * from './fromFloatingUIPlacement';\nexport * from './resolvePositioningShorthand';\nexport * from './useCallbackRef';\nexport * from './debounce';\nexport * from './toggleScrollListener';\nexport * from './hasAutoFocusFilter';\nexport * from './writeArrowUpdates';\nexport * from './writeContainerupdates';\n"]}
@@ -0,0 +1,23 @@
1
+ export function toFloatingUIPadding(padding, isRtl) {
2
+ if (typeof padding === 'number') {
3
+ return padding;
4
+ }
5
+ const {
6
+ start,
7
+ end,
8
+ ...verticalPadding
9
+ } = padding;
10
+ const paddingObject = verticalPadding;
11
+ const left = isRtl ? 'end' : 'start';
12
+ const right = isRtl ? 'start' : 'end';
13
+ // assign properties explicitly since undefined values are actually handled by floating UI
14
+ // TODO create floating UI issue
15
+ if (padding[left]) {
16
+ paddingObject.left = padding[left];
17
+ }
18
+ if (padding[right]) {
19
+ paddingObject.right = padding[right];
20
+ }
21
+ return paddingObject;
22
+ }
23
+ //# sourceMappingURL=toFloatingUIPadding.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"mappings":"AAGA,OAAM,SAAUA,mBAAmB,CACjCC,OAAmE,EACnEC,KAAc;EAEd,IAAI,OAAOD,OAAO,KAAK,QAAQ,EAAE;IAC/B,OAAOA,OAAO;;EAGhB,MAAM;IAAEE,KAAK;IAAEC,GAAG;IAAE,GAAGC;EAAe,CAAE,GAAGJ,OAAO;EAElD,MAAMK,aAAa,GAAwBD,eAAe;EAE1D,MAAME,IAAI,GAAGL,KAAK,GAAG,KAAK,GAAG,OAAO;EACpC,MAAMM,KAAK,GAAGN,KAAK,GAAG,OAAO,GAAG,KAAK;EAErC;EACA;EACA,IAAID,OAAO,CAACM,IAAI,CAAC,EAAE;IACjBD,aAAa,CAACC,IAAI,GAAGN,OAAO,CAACM,IAAI,CAAC;;EAGpC,IAAIN,OAAO,CAACO,KAAK,CAAC,EAAE;IAClBF,aAAa,CAACE,KAAK,GAAGP,OAAO,CAACO,KAAK,CAAC;;EAGtC,OAAOF,aAAa;AACtB","names":["toFloatingUIPadding","padding","isRtl","start","end","verticalPadding","paddingObject","left","right"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/utils/toFloatingUIPadding.ts"],"sourcesContent":["import type { SideObject } from '@floating-ui/dom';\nimport { PositioningOptions } from '../types';\n\nexport function toFloatingUIPadding(\n padding: NonNullable<PositioningOptions['overflowBoundaryPadding']>,\n isRtl: boolean,\n): number | Partial<SideObject> {\n if (typeof padding === 'number') {\n return padding;\n }\n\n const { start, end, ...verticalPadding } = padding;\n\n const paddingObject: Partial<SideObject> = verticalPadding;\n\n const left = isRtl ? 'end' : 'start';\n const right = isRtl ? 'start' : 'end';\n\n // assign properties explicitly since undefined values are actually handled by floating UI\n // TODO create floating UI issue\n if (padding[left]) {\n paddingObject.left = padding[left];\n }\n\n if (padding[right]) {\n paddingObject.right = padding[right];\n }\n\n return paddingObject;\n}\n"]}
@@ -8,6 +8,7 @@ define(["require", "exports", "@floating-ui/dom", "./utils"], function (require,
8
8
  */
9
9
  function createPositionManager(options) {
10
10
  var container = options.container, target = options.target, arrow = options.arrow, strategy = options.strategy, middleware = options.middleware, placement = options.placement;
11
+ var isDestroyed = false;
11
12
  if (!target || !container) {
12
13
  return {
13
14
  updatePosition: function () { return undefined; },
@@ -21,6 +22,11 @@ define(["require", "exports", "@floating-ui/dom", "./utils"], function (require,
21
22
  // Without this scroll jumps can occur when the element is rendered initially and receives focus
22
23
  Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });
23
24
  var forceUpdate = function () {
25
+ // debounced update can still occur afterwards
26
+ // early return to avoid memory leaks
27
+ if (isDestroyed) {
28
+ return;
29
+ }
24
30
  if (isFirstUpdate) {
25
31
  scrollParents.add(utils_1.getScrollParent(container));
26
32
  if (target instanceof HTMLElement) {
@@ -35,6 +41,11 @@ define(["require", "exports", "@floating-ui/dom", "./utils"], function (require,
35
41
  dom_1.computePosition(target, container, { placement: placement, middleware: middleware, strategy: strategy })
36
42
  .then(function (_a) {
37
43
  var x = _a.x, y = _a.y, middlewareData = _a.middlewareData, computedPlacement = _a.placement;
44
+ // Promise can still resolve after destruction
45
+ // early return to avoid applying outdated position
46
+ if (isDestroyed) {
47
+ return;
48
+ }
38
49
  utils_1.writeArrowUpdates({ arrow: arrow, middlewareData: middlewareData });
39
50
  utils_1.writeContainerUpdates({
40
51
  container: container,
@@ -61,9 +72,7 @@ define(["require", "exports", "@floating-ui/dom", "./utils"], function (require,
61
72
  };
62
73
  var updatePosition = utils_1.debounce(function () { return forceUpdate(); });
63
74
  var dispose = function () {
64
- // debounced update can still occur afterwards
65
- // so destroy the reference to forceUpdate
66
- forceUpdate = function () { return null; };
75
+ isDestroyed = true;
67
76
  if (targetWindow) {
68
77
  targetWindow.removeEventListener('scroll', updatePosition);
69
78
  targetWindow.removeEventListener('resize', updatePosition);
@@ -1 +1 @@
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';\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 let 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 // debounced update can still occur afterwards\n // so destroy the reference to forceUpdate\n forceUpdate = () => null;\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"]}
1
+ {"version":3,"file":"createPositionManager.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/createPositionManager.ts"],"names":[],"mappings":";;;;IAiCA;;;OAGG;IACH,SAAgB,qBAAqB,CAAC,OAA+B;QAC3D,IAAA,SAAS,GAAqD,OAAO,UAA5D,EAAE,MAAM,GAA6C,OAAO,OAApD,EAAE,KAAK,GAAsC,OAAO,MAA7C,EAAE,QAAQ,GAA4B,OAAO,SAAnC,EAAE,UAAU,GAAgB,OAAO,WAAvB,EAAE,SAAS,GAAK,OAAO,UAAZ,CAAa;QAC9E,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE;YACzB,OAAO;gBACL,cAAc,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAC/B,OAAO,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;aACzB,CAAC;SACH;QAED,IAAI,aAAa,GAAG,IAAI,CAAC;QACzB,IAAM,aAAa,GAAqB,IAAI,GAAG,EAAe,CAAC;QAC/D,IAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;QAEzD,oFAAoF;QACpF,gGAAgG;QAChG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;QAElF,IAAM,WAAW,GAAG;YAClB,8CAA8C;YAC9C,qCAAqC;YACrC,IAAI,WAAW,EAAE;gBACf,OAAO;aACR;YAED,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,GAAG,CAAC,uBAAe,CAAC,SAAS,CAAC,CAAC,CAAC;gBAC9C,IAAI,MAAM,YAAY,WAAW,EAAE;oBACjC,aAAa,CAAC,GAAG,CAAC,uBAAe,CAAC,MAAM,CAAC,CAAC,CAAC;iBAC5C;gBAED,aAAa,CAAC,OAAO,CAAC,UAAA,YAAY;oBAChC,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;gBAC1D,CAAC,CAAC,CAAC;gBAEH,aAAa,GAAG,KAAK,CAAC;aACvB;YAED,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YACvD,qBAAe,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,UAAU,YAAA,EAAE,QAAQ,UAAA,EAAE,CAAC;iBACpE,IAAI,CAAC,UAAC,EAAsD;oBAApD,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,cAAc,oBAAA,EAAa,iBAAiB,eAAA;gBACzD,8CAA8C;gBAC9C,mDAAmD;gBACnD,IAAI,WAAW,EAAE;oBACf,OAAO;iBACR;gBAED,yBAAiB,CAAC,EAAE,KAAK,OAAA,EAAE,cAAc,gBAAA,EAAE,CAAC,CAAC;gBAC7C,6BAAqB,CAAC;oBACpB,SAAS,WAAA;oBACT,cAAc,gBAAA;oBACd,SAAS,EAAE,iBAAiB;oBAC5B,WAAW,EAAE,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE;oBACrB,MAAM,EAAE,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,KAAI,CAAC,CAAC,IAAI,CAAC;oBAClD,QAAQ,UAAA;iBACT,CAAC,CAAC;YACL,CAAC,CAAC;iBACD,KAAK,CAAC,UAAA,GAAG;gBACR,yDAAyD;gBACzD,sBAAsB;gBACtB,uEAAuE;gBACvE,wFAAwF;gBACxF,4GAA4G;gBAC5G,0GAA0G;gBAC1G,sCAAsC;gBACtC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;oBAC1C,sCAAsC;oBACtC,OAAO,CAAC,KAAK,CAAC,gDAAgD,EAAE,GAAG,CAAC,CAAC;iBACtE;YACH,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,IAAM,cAAc,GAAG,gBAAQ,CAAC,cAAM,OAAA,WAAW,EAAE,EAAb,CAAa,CAAC,CAAC;QAErD,IAAM,OAAO,GAAG;YACd,WAAW,GAAG,IAAI,CAAC;YAEnB,IAAI,YAAY,EAAE;gBAChB,YAAY,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;gBAC3D,YAAY,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;aAC5D;YAED,aAAa,CAAC,OAAO,CAAC,UAAA,YAAY;gBAChC,YAAY,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YAC7D,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,IAAI,YAAY,EAAE;YAChB,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YACxD,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;SACzD;QAED,wCAAwC;QACxC,cAAc,EAAE,CAAC;QAEjB,OAAO;YACL,cAAc,gBAAA;YACd,OAAO,SAAA;SACR,CAAC;IACJ,CAAC;IAnGD,sDAmGC","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 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 (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 // 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"]}
@@ -6,11 +6,11 @@ define(["require", "exports", "tslib", "@floating-ui/dom", "../utils/index"], fu
6
6
  * Wraps the floating UI shift middleware for easier usage of our options
7
7
  */
8
8
  function shift(options) {
9
- var hasScrollableElement = options.hasScrollableElement, disableTether = options.disableTether, overflowBoundary = options.overflowBoundary, container = options.container;
10
- return dom_1.shift(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (hasScrollableElement && { boundary: 'clippingAncestors' })), (disableTether && {
9
+ var hasScrollableElement = options.hasScrollableElement, disableTether = options.disableTether, overflowBoundary = options.overflowBoundary, container = options.container, overflowBoundaryPadding = options.overflowBoundaryPadding, isRtl = options.isRtl;
10
+ return dom_1.shift(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (hasScrollableElement && { boundary: 'clippingAncestors' })), (disableTether && {
11
11
  crossAxis: disableTether === 'all',
12
12
  limiter: dom_1.limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),
13
- })), (overflowBoundary && { altBoundary: true, boundary: index_1.getBoundary(container, overflowBoundary) })));
13
+ })), (overflowBoundaryPadding && { padding: index_1.toFloatingUIPadding(overflowBoundaryPadding, isRtl) })), (overflowBoundary && { altBoundary: true, boundary: index_1.getBoundary(container, overflowBoundary) })));
14
14
  }
15
15
  exports.shift = shift;
16
16
  });
@@ -1 +1 @@
1
- {"version":3,"file":"shift.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/middleware/shift.ts"],"names":[],"mappings":";;;;IAUA;;OAEG;IACH,SAAgB,KAAK,CAAC,OAA+B;QAC3C,IAAA,oBAAoB,GAAiD,OAAO,qBAAxD,EAAE,aAAa,GAAkC,OAAO,cAAzC,EAAE,gBAAgB,GAAgB,OAAO,iBAAvB,EAAE,SAAS,GAAK,OAAO,UAAZ,CAAa;QAErF,OAAO,WAAS,wDACX,CAAC,oBAAoB,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,GAC3D,CAAC,aAAa,IAAI;YACnB,SAAS,EAAE,aAAa,KAAK,KAAK;YAClC,OAAO,EAAE,gBAAU,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;SAC7E,CAAC,GACC,CAAC,gBAAgB,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAW,CAAC,SAAS,EAAE,gBAAgB,CAAC,EAAE,CAAC,EAClG,CAAC;IACL,CAAC;IAXD,sBAWC","sourcesContent":["import { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions extends Pick<PositioningOptions, 'overflowBoundary'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions) {\n const { hasScrollableElement, disableTether, overflowBoundary, container } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"]}
1
+ {"version":3,"file":"shift.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/middleware/shift.ts"],"names":[],"mappings":";;;;IAYA;;OAEG;IACH,SAAgB,KAAK,CAAC,OAA+B;QAC3C,IAAA,oBAAoB,GAAiF,OAAO,qBAAxF,EAAE,aAAa,GAAkE,OAAO,cAAzE,EAAE,gBAAgB,GAAgD,OAAO,iBAAvD,EAAE,SAAS,GAAqC,OAAO,UAA5C,EAAE,uBAAuB,GAAY,OAAO,wBAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAa;QAErH,OAAO,WAAS,yEACX,CAAC,oBAAoB,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,GAC3D,CAAC,aAAa,IAAI;YACnB,SAAS,EAAE,aAAa,KAAK,KAAK;YAClC,OAAO,EAAE,gBAAU,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;SAC7E,CAAC,GACC,CAAC,uBAAuB,IAAI,EAAE,OAAO,EAAE,2BAAmB,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,GAC7F,CAAC,gBAAgB,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAW,CAAC,SAAS,EAAE,gBAAgB,CAAC,EAAE,CAAC,EAClG,CAAC;IACL,CAAC;IAZD,sBAYC","sourcesContent":["import { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, toFloatingUIPadding } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions) {\n const { hasScrollableElement, disableTether, overflowBoundary, container, overflowBoundaryPadding, isRtl } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"]}
@@ -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 * 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"]}
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\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"]}
@@ -110,24 +110,31 @@ define(["require", "exports", "tslib", "@floating-ui/dom", "@fluentui/react-shar
110
110
  }
111
111
  exports.usePositioning = usePositioning;
112
112
  function usePositioningOptions(options) {
113
- var align = options.align, arrowPadding = options.arrowPadding, autoSize = options.autoSize, coverTarget = options.coverTarget, flipBoundary = options.flipBoundary, offset = options.offset, overflowBoundary = options.overflowBoundary, pinned = options.pinned, position = options.position, disableTether = options.unstable_disableTether, positionFixed = options.positionFixed;
113
+ var align = options.align, arrowPadding = options.arrowPadding, autoSize = options.autoSize, coverTarget = options.coverTarget, flipBoundary = options.flipBoundary, offset = options.offset, overflowBoundary = options.overflowBoundary, pinned = options.pinned, position = options.position, disableTether = options.unstable_disableTether, positionFixed = options.positionFixed, overflowBoundaryPadding = options.overflowBoundaryPadding;
114
114
  var dir = react_shared_contexts_1.useFluent_unstable().dir;
115
115
  var isRtl = dir === 'rtl';
116
116
  var strategy = positionFixed ? 'fixed' : 'absolute';
117
117
  return React.useCallback(function (container, arrow) {
118
118
  var hasScrollableElement = utils_1.hasScrollParent(container);
119
- var placement = utils_1.toFloatingUIPlacement(align, position, isRtl);
120
119
  var middleware = [
121
120
  offset && middleware_1.offset(offset),
122
121
  coverTarget && middleware_1.coverTarget(),
123
122
  !pinned && middleware_1.flip({ container: container, flipBoundary: flipBoundary, hasScrollableElement: hasScrollableElement }),
124
- middleware_1.shift({ container: container, hasScrollableElement: hasScrollableElement, overflowBoundary: overflowBoundary, disableTether: disableTether }),
123
+ middleware_1.shift({
124
+ container: container,
125
+ hasScrollableElement: hasScrollableElement,
126
+ overflowBoundary: overflowBoundary,
127
+ disableTether: disableTether,
128
+ overflowBoundaryPadding: overflowBoundaryPadding,
129
+ isRtl: isRtl,
130
+ }),
125
131
  autoSize && middleware_1.maxSize(autoSize, { container: container, overflowBoundary: overflowBoundary }),
126
132
  middleware_1.intersecting(),
127
133
  arrow && dom_1.arrow({ element: arrow, padding: arrowPadding }),
128
134
  dom_1.hide({ strategy: 'referenceHidden' }),
129
135
  dom_1.hide({ strategy: 'escaped' }),
130
136
  ].filter(Boolean);
137
+ var placement = utils_1.toFloatingUIPlacement(align, position, isRtl);
131
138
  return {
132
139
  placement: placement,
133
140
  middleware: middleware,
@@ -146,6 +153,7 @@ define(["require", "exports", "tslib", "@floating-ui/dom", "@fluentui/react-shar
146
153
  pinned,
147
154
  position,
148
155
  strategy,
156
+ overflowBoundaryPadding,
149
157
  ]);
150
158
  }
151
159
  });
@@ -1 +1 @@
1
- {"version":3,"file":"usePositioning.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/usePositioning.ts"],"names":[],"mappings":"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","sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({ container, hasScrollableElement, overflowBoundary, disableTether }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n ],\n );\n}\n"]}
1
+ {"version":3,"file":"usePositioning.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/usePositioning.ts"],"names":[],"mappings":"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","sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n overflowBoundaryPadding,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether,\n overflowBoundaryPadding,\n isRtl,\n }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n overflowBoundaryPadding,\n ],\n );\n}\n"]}
@@ -1,4 +1,4 @@
1
- define(["require", "exports", "tslib", "./parseFloatingUIPlacement", "./getBoundary", "./getReactFiberFromNode", "./getScrollParent", "./mergeArrowOffset", "./toFloatingUIPlacement", "./fromFloatingUIPlacement", "./resolvePositioningShorthand", "./useCallbackRef", "./debounce", "./toggleScrollListener", "./hasAutoFocusFilter", "./writeArrowUpdates", "./writeContainerupdates"], function (require, exports, tslib_1, parseFloatingUIPlacement_1, getBoundary_1, getReactFiberFromNode_1, getScrollParent_1, mergeArrowOffset_1, toFloatingUIPlacement_1, fromFloatingUIPlacement_1, resolvePositioningShorthand_1, useCallbackRef_1, debounce_1, toggleScrollListener_1, hasAutoFocusFilter_1, writeArrowUpdates_1, writeContainerupdates_1) {
1
+ define(["require", "exports", "tslib", "./parseFloatingUIPlacement", "./getBoundary", "./getReactFiberFromNode", "./getScrollParent", "./mergeArrowOffset", "./toFloatingUIPadding", "./toFloatingUIPlacement", "./fromFloatingUIPlacement", "./resolvePositioningShorthand", "./useCallbackRef", "./debounce", "./toggleScrollListener", "./hasAutoFocusFilter", "./writeArrowUpdates", "./writeContainerupdates"], function (require, exports, tslib_1, parseFloatingUIPlacement_1, getBoundary_1, getReactFiberFromNode_1, getScrollParent_1, mergeArrowOffset_1, toFloatingUIPadding_1, toFloatingUIPlacement_1, fromFloatingUIPlacement_1, resolvePositioningShorthand_1, useCallbackRef_1, debounce_1, toggleScrollListener_1, hasAutoFocusFilter_1, writeArrowUpdates_1, writeContainerupdates_1) {
2
2
  "use strict";
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  tslib_1.__exportStar(parseFloatingUIPlacement_1, exports);
@@ -6,6 +6,7 @@ define(["require", "exports", "tslib", "./parseFloatingUIPlacement", "./getBound
6
6
  tslib_1.__exportStar(getReactFiberFromNode_1, exports);
7
7
  tslib_1.__exportStar(getScrollParent_1, exports);
8
8
  tslib_1.__exportStar(mergeArrowOffset_1, exports);
9
+ tslib_1.__exportStar(toFloatingUIPadding_1, exports);
9
10
  tslib_1.__exportStar(toFloatingUIPlacement_1, exports);
10
11
  tslib_1.__exportStar(fromFloatingUIPlacement_1, exports);
11
12
  tslib_1.__exportStar(resolvePositioningShorthand_1, exports);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/index.ts"],"names":[],"mappings":";;;IAAA,0DAA2C;IAC3C,6CAA8B;IAC9B,uDAAwC;IACxC,iDAAkC;IAClC,kDAAmC;IACnC,uDAAwC;IACxC,yDAA0C;IAC1C,6DAA8C;IAC9C,gDAAiC;IACjC,0CAA2B;IAC3B,sDAAuC;IACvC,oDAAqC;IACrC,mDAAoC;IACpC,uDAAwC","sourcesContent":["export * from './parseFloatingUIPlacement';\nexport * from './getBoundary';\nexport * from './getReactFiberFromNode';\nexport * from './getScrollParent';\nexport * from './mergeArrowOffset';\nexport * from './toFloatingUIPlacement';\nexport * from './fromFloatingUIPlacement';\nexport * from './resolvePositioningShorthand';\nexport * from './useCallbackRef';\nexport * from './debounce';\nexport * from './toggleScrollListener';\nexport * from './hasAutoFocusFilter';\nexport * from './writeArrowUpdates';\nexport * from './writeContainerupdates';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/index.ts"],"names":[],"mappings":";;;IAAA,0DAA2C;IAC3C,6CAA8B;IAC9B,uDAAwC;IACxC,iDAAkC;IAClC,kDAAmC;IACnC,qDAAsC;IACtC,uDAAwC;IACxC,yDAA0C;IAC1C,6DAA8C;IAC9C,gDAAiC;IACjC,0CAA2B;IAC3B,sDAAuC;IACvC,oDAAqC;IACrC,mDAAoC;IACpC,uDAAwC","sourcesContent":["export * from './parseFloatingUIPlacement';\nexport * from './getBoundary';\nexport * from './getReactFiberFromNode';\nexport * from './getScrollParent';\nexport * from './mergeArrowOffset';\nexport * from './toFloatingUIPadding';\nexport * from './toFloatingUIPlacement';\nexport * from './fromFloatingUIPlacement';\nexport * from './resolvePositioningShorthand';\nexport * from './useCallbackRef';\nexport * from './debounce';\nexport * from './toggleScrollListener';\nexport * from './hasAutoFocusFilter';\nexport * from './writeArrowUpdates';\nexport * from './writeContainerupdates';\n"]}
@@ -0,0 +1,25 @@
1
+ define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.toFloatingUIPadding = void 0;
5
+ function toFloatingUIPadding(padding, isRtl) {
6
+ if (typeof padding === 'number') {
7
+ return padding;
8
+ }
9
+ var start = padding.start, end = padding.end, verticalPadding = tslib_1.__rest(padding, ["start", "end"]);
10
+ var paddingObject = verticalPadding;
11
+ var left = isRtl ? 'end' : 'start';
12
+ var right = isRtl ? 'start' : 'end';
13
+ // assign properties explicitly since undefined values are actually handled by floating UI
14
+ // TODO create floating UI issue
15
+ if (padding[left]) {
16
+ paddingObject.left = padding[left];
17
+ }
18
+ if (padding[right]) {
19
+ paddingObject.right = padding[right];
20
+ }
21
+ return paddingObject;
22
+ }
23
+ exports.toFloatingUIPadding = toFloatingUIPadding;
24
+ });
25
+ //# sourceMappingURL=toFloatingUIPadding.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toFloatingUIPadding.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/toFloatingUIPadding.ts"],"names":[],"mappings":";;;;IAGA,SAAgB,mBAAmB,CACjC,OAAmE,EACnE,KAAc;QAEd,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,OAAO,CAAC;SAChB;QAEO,IAAA,KAAK,GAA8B,OAAO,MAArC,EAAE,GAAG,GAAyB,OAAO,IAAhC,EAAK,eAAe,kBAAK,OAAO,EAA5C,gBAAkC,CAAF,CAAa;QAEnD,IAAM,aAAa,GAAwB,eAAe,CAAC;QAE3D,IAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;QACrC,IAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QAEtC,0FAA0F;QAC1F,gCAAgC;QAChC,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE;YACjB,aAAa,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;SACpC;QAED,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE;YAClB,aAAa,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;SACtC;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IA1BD,kDA0BC","sourcesContent":["import type { SideObject } from '@floating-ui/dom';\nimport { PositioningOptions } from '../types';\n\nexport function toFloatingUIPadding(\n padding: NonNullable<PositioningOptions['overflowBoundaryPadding']>,\n isRtl: boolean,\n): number | Partial<SideObject> {\n if (typeof padding === 'number') {\n return padding;\n }\n\n const { start, end, ...verticalPadding } = padding;\n\n const paddingObject: Partial<SideObject> = verticalPadding;\n\n const left = isRtl ? 'end' : 'start';\n const right = isRtl ? 'start' : 'end';\n\n // assign properties explicitly since undefined values are actually handled by floating UI\n // TODO create floating UI issue\n if (padding[left]) {\n paddingObject.left = padding[left];\n }\n\n if (padding[right]) {\n paddingObject.right = padding[right];\n }\n\n return paddingObject;\n}\n"]}
@@ -19,6 +19,7 @@ function createPositionManager(options) {
19
19
  middleware,
20
20
  placement
21
21
  } = options;
22
+ let isDestroyed = false;
22
23
  if (!target || !container) {
23
24
  return {
24
25
  updatePosition: () => undefined,
@@ -36,7 +37,12 @@ function createPositionManager(options) {
36
37
  top: 0,
37
38
  margin: 0
38
39
  });
39
- let forceUpdate = () => {
40
+ const forceUpdate = () => {
41
+ // debounced update can still occur afterwards
42
+ // early return to avoid memory leaks
43
+ if (isDestroyed) {
44
+ return;
45
+ }
40
46
  if (isFirstUpdate) {
41
47
  scrollParents.add(utils_1.getScrollParent(container));
42
48
  if (target instanceof HTMLElement) {
@@ -60,6 +66,11 @@ function createPositionManager(options) {
60
66
  middlewareData,
61
67
  placement: computedPlacement
62
68
  }) => {
69
+ // Promise can still resolve after destruction
70
+ // early return to avoid applying outdated position
71
+ if (isDestroyed) {
72
+ return;
73
+ }
63
74
  utils_1.writeArrowUpdates({
64
75
  arrow,
65
76
  middlewareData
@@ -91,9 +102,7 @@ function createPositionManager(options) {
91
102
  };
92
103
  const updatePosition = utils_1.debounce(() => forceUpdate());
93
104
  const dispose = () => {
94
- // debounced update can still occur afterwards
95
- // so destroy the reference to forceUpdate
96
- forceUpdate = () => null;
105
+ isDestroyed = true;
97
106
  if (targetWindow) {
98
107
  targetWindow.removeEventListener('scroll', updatePosition);
99
108
  targetWindow.removeEventListener('resize', updatePosition);
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["createPositionManager","options","container","target","arrow","strategy","middleware","placement","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","utils_1","HTMLElement","forEach","scrollParent","addEventListener","dom_1","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener","exports"],"sourceRoot":"../src/","sources":["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';\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 let 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 // debounced update can still occur afterwards\n // so destroy the reference to forceUpdate\n forceUpdate = () => null;\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"]}
1
+ {"version":3,"mappings":"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","names":["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","utils_1","HTMLElement","forEach","scrollParent","addEventListener","dom_1","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener","exports"],"sourceRoot":"../src/","sources":["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';\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 (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 // 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"]}
@@ -14,7 +14,9 @@ function shift(options) {
14
14
  hasScrollableElement,
15
15
  disableTether,
16
16
  overflowBoundary,
17
- container
17
+ container,
18
+ overflowBoundaryPadding,
19
+ isRtl
18
20
  } = options;
19
21
  return dom_1.shift({
20
22
  ...(hasScrollableElement && {
@@ -27,6 +29,9 @@ function shift(options) {
27
29
  mainAxis: false
28
30
  })
29
31
  }),
32
+ ...(overflowBoundaryPadding && {
33
+ padding: index_1.toFloatingUIPadding(overflowBoundaryPadding, isRtl)
34
+ }),
30
35
  ...(overflowBoundary && {
31
36
  altBoundary: true,
32
37
  boundary: index_1.getBoundary(container, overflowBoundary)
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AAEA;AAQA;;;AAGA,SAAgBA,KAAK,CAACC,OAA+B;EACnD,MAAM;IAAEC,oBAAoB;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC;EAAS,CAAE,GAAGJ,OAAO;EAEpF,OAAOK,WAAS,CAAC;IACf,IAAIJ,oBAAoB,IAAI;MAAEK,QAAQ,EAAE;IAAmB,CAAE,CAAC;IAC9D,IAAIJ,aAAa,IAAI;MACnBK,SAAS,EAAEL,aAAa,KAAK,KAAK;MAClCM,OAAO,EAAEH,gBAAU,CAAC;QAAEE,SAAS,EAAEL,aAAa,KAAK,KAAK;QAAEO,QAAQ,EAAE;MAAK,CAAE;KAC5E,CAAC;IACF,IAAIN,gBAAgB,IAAI;MAAEO,WAAW,EAAE,IAAI;MAAEJ,QAAQ,EAAEK,mBAAW,CAACP,SAAS,EAAED,gBAAgB;IAAC,CAAE;GAClG,CAAC;AACJ;AAXAS","names":["shift","options","hasScrollableElement","disableTether","overflowBoundary","container","dom_1","boundary","crossAxis","limiter","mainAxis","altBoundary","index_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/shift.ts"],"sourcesContent":["import { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions extends Pick<PositioningOptions, 'overflowBoundary'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions) {\n const { hasScrollableElement, disableTether, overflowBoundary, container } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"]}
1
+ {"version":3,"mappings":";;;;;;AAAA;AAEA;AAUA;;;AAGA,SAAgBA,KAAK,CAACC,OAA+B;EACnD,MAAM;IAAEC,oBAAoB;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC,SAAS;IAAEC,uBAAuB;IAAEC;EAAK,CAAE,GAAGN,OAAO;EAEpH,OAAOO,WAAS,CAAC;IACf,IAAIN,oBAAoB,IAAI;MAAEO,QAAQ,EAAE;IAAmB,CAAE,CAAC;IAC9D,IAAIN,aAAa,IAAI;MACnBO,SAAS,EAAEP,aAAa,KAAK,KAAK;MAClCQ,OAAO,EAAEH,gBAAU,CAAC;QAAEE,SAAS,EAAEP,aAAa,KAAK,KAAK;QAAES,QAAQ,EAAE;MAAK,CAAE;KAC5E,CAAC;IACF,IAAIN,uBAAuB,IAAI;MAAEO,OAAO,EAAEC,2BAAmB,CAACR,uBAAuB,EAAEC,KAAK;IAAC,CAAE,CAAC;IAChG,IAAIH,gBAAgB,IAAI;MAAEW,WAAW,EAAE,IAAI;MAAEN,QAAQ,EAAEK,mBAAW,CAACT,SAAS,EAAED,gBAAgB;IAAC,CAAE;GAClG,CAAC;AACJ;AAZAY","names":["shift","options","hasScrollableElement","disableTether","overflowBoundary","container","overflowBoundaryPadding","isRtl","dom_1","boundary","crossAxis","limiter","mainAxis","padding","index_1","altBoundary","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/shift.ts"],"sourcesContent":["import { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, toFloatingUIPadding } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions) {\n const { hasScrollableElement, disableTether, overflowBoundary, container, overflowBoundaryPadding, isRtl } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"]}
@@ -128,7 +128,8 @@ function usePositioningOptions(options) {
128
128
  pinned,
129
129
  position,
130
130
  unstable_disableTether: disableTether,
131
- positionFixed
131
+ positionFixed,
132
+ overflowBoundaryPadding
132
133
  } = options;
133
134
  const {
134
135
  dir
@@ -137,7 +138,6 @@ function usePositioningOptions(options) {
137
138
  const strategy = positionFixed ? 'fixed' : 'absolute';
138
139
  return React.useCallback((container, arrow) => {
139
140
  const hasScrollableElement = utils_1.hasScrollParent(container);
140
- const placement = utils_1.toFloatingUIPlacement(align, position, isRtl);
141
141
  const middleware = [offset && middleware_1.offset(offset), coverTarget && middleware_1.coverTarget(), !pinned && middleware_1.flip({
142
142
  container,
143
143
  flipBoundary,
@@ -146,7 +146,9 @@ function usePositioningOptions(options) {
146
146
  container,
147
147
  hasScrollableElement,
148
148
  overflowBoundary,
149
- disableTether
149
+ disableTether,
150
+ overflowBoundaryPadding,
151
+ isRtl
150
152
  }), autoSize && middleware_1.maxSize(autoSize, {
151
153
  container,
152
154
  overflowBoundary
@@ -158,11 +160,12 @@ function usePositioningOptions(options) {
158
160
  }), dom_1.hide({
159
161
  strategy: 'escaped'
160
162
  })].filter(Boolean);
163
+ const placement = utils_1.toFloatingUIPlacement(align, position, isRtl);
161
164
  return {
162
165
  placement,
163
166
  middleware,
164
167
  strategy
165
168
  };
166
- }, [align, arrowPadding, autoSize, coverTarget, disableTether, flipBoundary, isRtl, offset, overflowBoundary, pinned, position, strategy]);
169
+ }, [align, arrowPadding, autoSize, coverTarget, disableTether, flipBoundary, isRtl, offset, overflowBoundary, pinned, position, strategy, overflowBoundaryPadding]);
167
170
  }
168
171
  //# sourceMappingURL=usePositioning.js.map
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["usePositioning","options","managerRef","React","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","usePositioningOptions","updatePositionManager","useCallback","current","dispose","target","react_utilities_1","createPositionManager_1","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","utils_1","nextNode","node","currentNode","join","setContainer","setArrow","exports","align","arrowPadding","autoSize","coverTarget","flipBoundary","offset","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","dir","react_shared_contexts_1","isRtl","strategy","hasScrollableElement","placement","middleware","middleware_1","dom_1","element","padding","filter","Boolean"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/usePositioning.ts"],"sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({ container, hasScrollableElement, overflowBoundary, disableTether }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n ],\n );\n}\n"]}
1
+ {"version":3,"mappings":"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","names":["usePositioning","options","managerRef","React","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","usePositioningOptions","updatePositionManager","useCallback","current","dispose","target","react_utilities_1","createPositionManager_1","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","utils_1","nextNode","node","currentNode","join","setContainer","setArrow","exports","align","arrowPadding","autoSize","coverTarget","flipBoundary","offset","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","overflowBoundaryPadding","dir","react_shared_contexts_1","isRtl","strategy","hasScrollableElement","middleware","middleware_1","dom_1","element","padding","filter","Boolean","placement"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/usePositioning.ts"],"sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n overflowBoundaryPadding,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether,\n overflowBoundaryPadding,\n isRtl,\n }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n overflowBoundaryPadding,\n ],\n );\n}\n"]}
@@ -9,6 +9,7 @@ tslib_1.__exportStar(require("./getBoundary"), exports);
9
9
  tslib_1.__exportStar(require("./getReactFiberFromNode"), exports);
10
10
  tslib_1.__exportStar(require("./getScrollParent"), exports);
11
11
  tslib_1.__exportStar(require("./mergeArrowOffset"), exports);
12
+ tslib_1.__exportStar(require("./toFloatingUIPadding"), exports);
12
13
  tslib_1.__exportStar(require("./toFloatingUIPlacement"), exports);
13
14
  tslib_1.__exportStar(require("./fromFloatingUIPlacement"), exports);
14
15
  tslib_1.__exportStar(require("./resolvePositioningShorthand"), exports);
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/utils/index.ts"],"sourcesContent":["export * from './parseFloatingUIPlacement';\nexport * from './getBoundary';\nexport * from './getReactFiberFromNode';\nexport * from './getScrollParent';\nexport * from './mergeArrowOffset';\nexport * from './toFloatingUIPlacement';\nexport * from './fromFloatingUIPlacement';\nexport * from './resolvePositioningShorthand';\nexport * from './useCallbackRef';\nexport * from './debounce';\nexport * from './toggleScrollListener';\nexport * from './hasAutoFocusFilter';\nexport * from './writeArrowUpdates';\nexport * from './writeContainerupdates';\n"]}
1
+ {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/utils/index.ts"],"sourcesContent":["export * from './parseFloatingUIPlacement';\nexport * from './getBoundary';\nexport * from './getReactFiberFromNode';\nexport * from './getScrollParent';\nexport * from './mergeArrowOffset';\nexport * from './toFloatingUIPadding';\nexport * from './toFloatingUIPlacement';\nexport * from './fromFloatingUIPlacement';\nexport * from './resolvePositioningShorthand';\nexport * from './useCallbackRef';\nexport * from './debounce';\nexport * from './toggleScrollListener';\nexport * from './hasAutoFocusFilter';\nexport * from './writeArrowUpdates';\nexport * from './writeContainerupdates';\n"]}
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.toFloatingUIPadding = void 0;
7
+ function toFloatingUIPadding(padding, isRtl) {
8
+ if (typeof padding === 'number') {
9
+ return padding;
10
+ }
11
+ const {
12
+ start,
13
+ end,
14
+ ...verticalPadding
15
+ } = padding;
16
+ const paddingObject = verticalPadding;
17
+ const left = isRtl ? 'end' : 'start';
18
+ const right = isRtl ? 'start' : 'end';
19
+ // assign properties explicitly since undefined values are actually handled by floating UI
20
+ // TODO create floating UI issue
21
+ if (padding[left]) {
22
+ paddingObject.left = padding[left];
23
+ }
24
+ if (padding[right]) {
25
+ paddingObject.right = padding[right];
26
+ }
27
+ return paddingObject;
28
+ }
29
+ exports.toFloatingUIPadding = toFloatingUIPadding;
30
+ //# sourceMappingURL=toFloatingUIPadding.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"mappings":";;;;;;AAGA,SAAgBA,mBAAmB,CACjCC,OAAmE,EACnEC,KAAc;EAEd,IAAI,OAAOD,OAAO,KAAK,QAAQ,EAAE;IAC/B,OAAOA,OAAO;;EAGhB,MAAM;IAAEE,KAAK;IAAEC,GAAG;IAAE,GAAGC;EAAe,CAAE,GAAGJ,OAAO;EAElD,MAAMK,aAAa,GAAwBD,eAAe;EAE1D,MAAME,IAAI,GAAGL,KAAK,GAAG,KAAK,GAAG,OAAO;EACpC,MAAMM,KAAK,GAAGN,KAAK,GAAG,OAAO,GAAG,KAAK;EAErC;EACA;EACA,IAAID,OAAO,CAACM,IAAI,CAAC,EAAE;IACjBD,aAAa,CAACC,IAAI,GAAGN,OAAO,CAACM,IAAI,CAAC;;EAGpC,IAAIN,OAAO,CAACO,KAAK,CAAC,EAAE;IAClBF,aAAa,CAACE,KAAK,GAAGP,OAAO,CAACO,KAAK,CAAC;;EAGtC,OAAOF,aAAa;AACtB;AA1BAG","names":["toFloatingUIPadding","padding","isRtl","start","end","verticalPadding","paddingObject","left","right","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/utils/toFloatingUIPadding.ts"],"sourcesContent":["import type { SideObject } from '@floating-ui/dom';\nimport { PositioningOptions } from '../types';\n\nexport function toFloatingUIPadding(\n padding: NonNullable<PositioningOptions['overflowBoundaryPadding']>,\n isRtl: boolean,\n): number | Partial<SideObject> {\n if (typeof padding === 'number') {\n return padding;\n }\n\n const { start, end, ...verticalPadding } = padding;\n\n const paddingObject: Partial<SideObject> = verticalPadding;\n\n const left = isRtl ? 'end' : 'start';\n const right = isRtl ? 'start' : 'end';\n\n // assign properties explicitly since undefined values are actually handled by floating UI\n // TODO create floating UI issue\n if (padding[left]) {\n paddingObject.left = padding[left];\n }\n\n if (padding[right]) {\n paddingObject.right = padding[right];\n }\n\n return paddingObject;\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-positioning",
3
- "version": "9.3.10",
3
+ "version": "9.4.0",
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",
@@ -28,10 +28,10 @@
28
28
  "@fluentui/scripts-tasks": "*"
29
29
  },
30
30
  "dependencies": {
31
- "@floating-ui/dom": "^1.0.0",
31
+ "@floating-ui/dom": "^1.2.0",
32
32
  "@fluentui/react-shared-contexts": "^9.2.0",
33
33
  "@fluentui/react-theme": "^9.1.5",
34
- "@fluentui/react-utilities": "^9.5.1",
34
+ "@fluentui/react-utilities": "^9.5.2",
35
35
  "@griffel/react": "^1.5.2",
36
36
  "tslib": "^2.1.0"
37
37
  },