@fluentui/react-positioning 9.3.5 → 9.3.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (119) hide show
  1. package/CHANGELOG.json +69 -1
  2. package/CHANGELOG.md +24 -2
  3. package/lib/createArrowStyles.js +0 -2
  4. package/lib/createArrowStyles.js.map +1 -1
  5. package/lib/createPositionManager.js +8 -17
  6. package/lib/createPositionManager.js.map +1 -1
  7. package/lib/createVirtualElementFromClick.js +0 -2
  8. package/lib/createVirtualElementFromClick.js.map +1 -1
  9. package/lib/middleware/coverTarget.js +0 -5
  10. package/lib/middleware/coverTarget.js.map +1 -1
  11. package/lib/middleware/flip.js +2 -1
  12. package/lib/middleware/flip.js.map +1 -1
  13. package/lib/middleware/intersecting.js.map +1 -1
  14. package/lib/middleware/maxSize.js +31 -38
  15. package/lib/middleware/maxSize.js.map +1 -1
  16. package/lib/middleware/offset.js +0 -1
  17. package/lib/middleware/offset.js.map +1 -1
  18. package/lib/middleware/shift.js +2 -2
  19. package/lib/middleware/shift.js.map +1 -1
  20. package/lib/usePositioning.js +19 -28
  21. package/lib/usePositioning.js.map +1 -1
  22. package/lib/usePositioningMouseTarget.js +0 -7
  23. package/lib/usePositioningMouseTarget.js.map +1 -1
  24. package/lib/utils/debounce.js +0 -1
  25. package/lib/utils/debounce.js.map +1 -1
  26. package/lib/utils/fromFloatingUIPlacement.js +2 -7
  27. package/lib/utils/fromFloatingUIPlacement.js.map +1 -1
  28. package/lib/utils/getBoundary.js +0 -6
  29. package/lib/utils/getBoundary.js.map +1 -1
  30. package/lib/utils/getFloatingUIOffset.js +0 -3
  31. package/lib/utils/getFloatingUIOffset.js.map +1 -1
  32. package/lib/utils/getReactFiberFromNode.js +0 -4
  33. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  34. package/lib/utils/getScrollParent.js +6 -18
  35. package/lib/utils/getScrollParent.js.map +1 -1
  36. package/lib/utils/hasAutoFocusFilter.js +2 -7
  37. package/lib/utils/hasAutoFocusFilter.js.map +1 -1
  38. package/lib/utils/mergeArrowOffset.js +2 -7
  39. package/lib/utils/mergeArrowOffset.js.map +1 -1
  40. package/lib/utils/parseFloatingUIPlacement.js.map +1 -1
  41. package/lib/utils/resolvePositioningShorthand.js +0 -2
  42. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  43. package/lib/utils/toFloatingUIPlacement.js +2 -8
  44. package/lib/utils/toFloatingUIPlacement.js.map +1 -1
  45. package/lib/utils/toggleScrollListener.js +0 -3
  46. package/lib/utils/toggleScrollListener.js.map +1 -1
  47. package/lib/utils/useCallbackRef.js +2 -8
  48. package/lib/utils/useCallbackRef.js.map +1 -1
  49. package/lib/utils/writeArrowUpdates.js +0 -2
  50. package/lib/utils/writeArrowUpdates.js.map +1 -1
  51. package/lib/utils/writeContainerupdates.js +0 -10
  52. package/lib/utils/writeContainerupdates.js.map +1 -1
  53. package/lib-amd/createPositionManager.js +3 -0
  54. package/lib-amd/createPositionManager.js.map +1 -1
  55. package/lib-amd/middleware/maxSize.js +24 -36
  56. package/lib-amd/middleware/maxSize.js.map +1 -1
  57. package/lib-amd/usePositioning.js +3 -3
  58. package/lib-amd/usePositioning.js.map +1 -1
  59. package/lib-commonjs/constants.js.map +1 -1
  60. package/lib-commonjs/createArrowStyles.js +0 -7
  61. package/lib-commonjs/createArrowStyles.js.map +1 -1
  62. package/lib-commonjs/createPositionManager.js +8 -21
  63. package/lib-commonjs/createPositionManager.js.map +1 -1
  64. package/lib-commonjs/createVirtualElementFromClick.js +0 -4
  65. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  66. package/lib-commonjs/index.js +0 -10
  67. package/lib-commonjs/index.js.map +1 -1
  68. package/lib-commonjs/middleware/coverTarget.js +0 -8
  69. package/lib-commonjs/middleware/coverTarget.js.map +1 -1
  70. package/lib-commonjs/middleware/flip.js +2 -5
  71. package/lib-commonjs/middleware/flip.js.map +1 -1
  72. package/lib-commonjs/middleware/index.js +0 -7
  73. package/lib-commonjs/middleware/index.js.map +1 -1
  74. package/lib-commonjs/middleware/intersecting.js +0 -3
  75. package/lib-commonjs/middleware/intersecting.js.map +1 -1
  76. package/lib-commonjs/middleware/maxSize.js +30 -41
  77. package/lib-commonjs/middleware/maxSize.js.map +1 -1
  78. package/lib-commonjs/middleware/offset.js +0 -5
  79. package/lib-commonjs/middleware/offset.js.map +1 -1
  80. package/lib-commonjs/middleware/shift.js +2 -6
  81. package/lib-commonjs/middleware/shift.js.map +1 -1
  82. package/lib-commonjs/types.js.map +1 -1
  83. package/lib-commonjs/usePositioning.js +18 -36
  84. package/lib-commonjs/usePositioning.js.map +1 -1
  85. package/lib-commonjs/usePositioningMouseTarget.js +0 -11
  86. package/lib-commonjs/usePositioningMouseTarget.js.map +1 -1
  87. package/lib-commonjs/utils/debounce.js +0 -3
  88. package/lib-commonjs/utils/debounce.js.map +1 -1
  89. package/lib-commonjs/utils/fromFloatingUIPlacement.js +2 -9
  90. package/lib-commonjs/utils/fromFloatingUIPlacement.js.map +1 -1
  91. package/lib-commonjs/utils/getBoundary.js +0 -9
  92. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  93. package/lib-commonjs/utils/getFloatingUIOffset.js +0 -6
  94. package/lib-commonjs/utils/getFloatingUIOffset.js.map +1 -1
  95. package/lib-commonjs/utils/getReactFiberFromNode.js +0 -5
  96. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  97. package/lib-commonjs/utils/getScrollParent.js +6 -23
  98. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  99. package/lib-commonjs/utils/hasAutoFocusFilter.js +5 -12
  100. package/lib-commonjs/utils/hasAutoFocusFilter.js.map +1 -1
  101. package/lib-commonjs/utils/index.js +0 -15
  102. package/lib-commonjs/utils/index.js.map +1 -1
  103. package/lib-commonjs/utils/mergeArrowOffset.js +2 -9
  104. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  105. package/lib-commonjs/utils/parseFloatingUIPlacement.js +0 -2
  106. package/lib-commonjs/utils/parseFloatingUIPlacement.js.map +1 -1
  107. package/lib-commonjs/utils/resolvePositioningShorthand.js +2 -6
  108. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  109. package/lib-commonjs/utils/toFloatingUIPlacement.js +2 -10
  110. package/lib-commonjs/utils/toFloatingUIPlacement.js.map +1 -1
  111. package/lib-commonjs/utils/toggleScrollListener.js +0 -6
  112. package/lib-commonjs/utils/toggleScrollListener.js.map +1 -1
  113. package/lib-commonjs/utils/useCallbackRef.js +2 -12
  114. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  115. package/lib-commonjs/utils/writeArrowUpdates.js +0 -4
  116. package/lib-commonjs/utils/writeArrowUpdates.js.map +1 -1
  117. package/lib-commonjs/utils/writeContainerupdates.js +0 -13
  118. package/lib-commonjs/utils/writeContainerupdates.js.map +1 -1
  119. package/package.json +4 -4
package/CHANGELOG.json CHANGED
@@ -2,7 +2,75 @@
2
2
  "name": "@fluentui/react-positioning",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 21 Dec 2022 10:17:16 GMT",
5
+ "date": "Mon, 09 Jan 2023 14:31:46 GMT",
6
+ "tag": "@fluentui/react-positioning_v9.3.7",
7
+ "version": "9.3.7",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-positioning",
13
+ "commit": "42acf190805edde3e32fbbf4adf37046c51f625e",
14
+ "comment": "fix: setOverrideTarget should be an event callback"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-positioning",
19
+ "comment": "Bump @fluentui/react-utilities to v9.4.0",
20
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Wed, 04 Jan 2023 01:40:20 GMT",
27
+ "tag": "@fluentui/react-positioning_v9.3.6",
28
+ "version": "9.3.6",
29
+ "comments": {
30
+ "none": [
31
+ {
32
+ "author": "martinhochel@microsoft.com",
33
+ "package": "@fluentui/react-positioning",
34
+ "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
35
+ "comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
36
+ },
37
+ {
38
+ "author": "martinhochel@microsoft.com",
39
+ "package": "@fluentui/react-positioning",
40
+ "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
41
+ "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
42
+ }
43
+ ],
44
+ "patch": [
45
+ {
46
+ "author": "lingfangao@hotmail.com",
47
+ "package": "@fluentui/react-positioning",
48
+ "commit": "130c4e79e8f0014a09d572b1f358e071fe2efa31",
49
+ "comment": "fix: force update memory leak in positioning manager"
50
+ },
51
+ {
52
+ "author": "olfedias@microsoft.com",
53
+ "package": "@fluentui/react-positioning",
54
+ "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
55
+ "comment": "chore: Update Griffel to latest version"
56
+ },
57
+ {
58
+ "author": "lingfangao@hotmail.com",
59
+ "package": "@fluentui/react-positioning",
60
+ "commit": "696615b6a369e288a44ffa70f212593057709e6e",
61
+ "comment": "fix: Autosize middleware should set box-sizing border-box"
62
+ },
63
+ {
64
+ "author": "beachball",
65
+ "package": "@fluentui/react-positioning",
66
+ "comment": "Bump @fluentui/react-utilities to v9.3.1",
67
+ "commit": "3e322d15529451be153e97298873253e21af4082"
68
+ }
69
+ ]
70
+ }
71
+ },
72
+ {
73
+ "date": "Wed, 21 Dec 2022 10:20:33 GMT",
6
74
  "tag": "@fluentui/react-positioning_v9.3.5",
7
75
  "version": "9.3.5",
8
76
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,34 @@
1
1
  # Change Log - @fluentui/react-positioning
2
2
 
3
- This log was last generated on Wed, 21 Dec 2022 10:17:16 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 09 Jan 2023 14:31:46 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.7)
8
+
9
+ Mon, 09 Jan 2023 14:31:46 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.6..@fluentui/react-positioning_v9.3.7)
11
+
12
+ ### Patches
13
+
14
+ - fix: setOverrideTarget should be an event callback ([PR #26157](https://github.com/microsoft/fluentui/pull/26157) by lingfangao@hotmail.com)
15
+ - Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
16
+
17
+ ## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.6)
18
+
19
+ Wed, 04 Jan 2023 01:40:20 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.5..@fluentui/react-positioning_v9.3.6)
21
+
22
+ ### Patches
23
+
24
+ - fix: force update memory leak in positioning manager ([PR #26096](https://github.com/microsoft/fluentui/pull/26096) by lingfangao@hotmail.com)
25
+ - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
26
+ - fix: Autosize middleware should set box-sizing border-box ([PR #26094](https://github.com/microsoft/fluentui/pull/26094) by lingfangao@hotmail.com)
27
+ - Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
28
+
7
29
  ## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.5)
8
30
 
9
- Wed, 21 Dec 2022 10:17:16 GMT
31
+ Wed, 21 Dec 2022 10:20:33 GMT
10
32
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.4..@fluentui/react-positioning_v9.3.5)
11
33
 
12
34
  ### Patches
@@ -23,7 +23,6 @@ import { tokens } from '@fluentui/react-theme';
23
23
  * )
24
24
  * ```
25
25
  */
26
-
27
26
  export function createArrowStyles(options) {
28
27
  const {
29
28
  arrowHeight,
@@ -76,7 +75,6 @@ export function createArrowStyles(options) {
76
75
  * Use this when you need to create classes for several different arrow sizes. If you only need a
77
76
  * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
78
77
  */
79
-
80
78
  export function createArrowHeightStyles(arrowHeight) {
81
79
  // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
82
80
  // Multiply the triangle's height by sqrt(2) to get length of its edges.
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-positioning/src/createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,gBAA3B;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAsCA;;;;;;;;;;;;;;;;;;;;;;AAsBG;;AACH,OAAM,SAAU,iBAAV,CAA4B,OAA5B,EAA6D;EACjE,MAAM;IACJ,WADI;IAEJ,WAAW,GAAG,KAFV;IAGJ,WAAW,GAAG,OAHV;IAIJ,WAAW,GAAG,MAAM,CAAC;EAJjB,IAKF,OALJ;EAOA,OAAO;IACL,QAAQ,EAAE,UADL;IAEL,eAAe,EAAE,SAFZ;IAGL,UAAU,EAAE,QAHP;IAIL,MAAM,EAAE,CAAC,CAJJ;IAML,IAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;IAQL,YAAY;MACV,OAAO,EAAE,IADC;MAEV,UAAU,EAAE,SAFF;MAGV,QAAQ,EAAE,UAHA;MAIV,SAAS,EAAE,YAJD;MAKV,KAAK,EAAE,SALG;MAMV,MAAM,EAAE,SANE;MAOV,eAAe,EAAE,SAPP;MAQV,GAAG,UAAU,CAAC,WAAX,CACD,GAAG,WAAW,gBADb,EAED,GAAG,WAAW,gBAFb,EAGD,GAAG,WAAW,gBAHb,CARO;MAaV,GAAG,UAAU,CAAC,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CAbO;MAcV,uBAAuB,EAAE,MAAM,CAAC,iBAdtB;MAeV,SAAS,EAAE;IAfD,CARP;IA0BL;IACA,2CAA2C;MACzC,MAAM,EAAE,IAAI,WAAW,EADkB;MAEzC,WAAW;IAF8B,CA3BtC;IA+BL,6CAA6C;MAC3C,IAAI,EAAE,IAAI,WAAW,gBADsB;MAE3C,WAAW;IAFgC,CA/BxC;IAmCL,8CAA8C;MAC5C,GAAG,EAAE,IAAI,WAAW,EADwB;MAE5C,WAAW;IAFiC,CAnCzC;IAuCL,4CAA4C;MAC1C,KAAK,EAAE,IAAI,WAAW,gBADoB;MAE1C,WAAW;IAF+B;EAvCvC,CAAP;AA4CD;AAED;;;;;;AAMG;;AACH,OAAM,SAAU,uBAAV,CAAkC,WAAlC,EAAqD;EACzD;EACA;EACA,MAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;EACA,OAAO;IAAE,KAAK,EAAE,UAAT;IAAqB,MAAM,EAAE;EAA7B,CAAP;AACD","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n '::before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n ...shorthands.borderRight(\n `${borderWidth} /* @noflip */`,\n `${borderStyle} /* @noflip */`,\n `${borderColor} /* @noflip */`,\n ),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: `-${borderWidth}`,\n '--angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--angle': '270deg',\n },\n };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = `${1.414 * arrowHeight}px`;\n return { width: edgeLength, height: edgeLength };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,SAASA,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,MAAM,QAAQ,uBAAuB;AAsC9C;;;;;;;;;;;;;;;;;;;;;;;AAuBA,OAAM,SAAUC,iBAAiB,CAACC,OAAiC;EACjE,MAAM;IACJC,WAAW;IACXC,WAAW,GAAG,KAAK;IACnBC,WAAW,GAAG,OAAO;IACrBC,WAAW,GAAGN,MAAM,CAACO;EAAsB,CAC5C,GAAGL,OAAO;EAEX,OAAO;IACLM,QAAQ,EAAE,UAAU;IACpBC,eAAe,EAAE,SAAS;IAC1BC,UAAU,EAAE,QAAQ;IACpBC,MAAM,EAAE,CAAC,CAAC;IAEV,IAAIR,WAAW,IAAIS,uBAAuB,CAACT,WAAW,CAAC,CAAC;IAExD,UAAU,EAAE;MACVU,OAAO,EAAE,IAAI;MACbH,UAAU,EAAE,SAAS;MACrBF,QAAQ,EAAE,UAAU;MACpBM,SAAS,EAAE,YAAY;MACvBC,KAAK,EAAE,SAAS;MAChBC,MAAM,EAAE,SAAS;MACjBP,eAAe,EAAE,SAAS;MAC1B,GAAGV,UAAU,CAACkB,WAAW,CACvB,GAAGb,WAAW,gBAAgB,EAC9B,GAAGC,WAAW,gBAAgB,EAC9B,GAAGC,WAAW,gBAAgB,CAC/B;MACD,GAAGP,UAAU,CAACmB,YAAY,CAACd,WAAW,EAAEC,WAAW,EAAEC,WAAW,CAAC;MACjEa,uBAAuB,EAAEnB,MAAM,CAACoB,iBAAiB;MACjDC,SAAS,EAAE;KACZ;IAED;IACA,yCAAyC,EAAE;MACzCC,MAAM,EAAE,IAAIlB,WAAW,EAAE;MACzB,SAAS,EAAE;KACZ;IACD,2CAA2C,EAAE;MAC3CmB,IAAI,EAAE,IAAInB,WAAW,gBAAgB;MACrC,SAAS,EAAE;KACZ;IACD,4CAA4C,EAAE;MAC5CoB,GAAG,EAAE,IAAIpB,WAAW,EAAE;MACtB,SAAS,EAAE;KACZ;IACD,0CAA0C,EAAE;MAC1CqB,KAAK,EAAE,IAAIrB,WAAW,gBAAgB;MACtC,SAAS,EAAE;;GAEd;AACH;AAEA;;;;;;;AAOA,OAAM,SAAUQ,uBAAuB,CAACT,WAAmB;EACzD;EACA;EACA,MAAMuB,UAAU,GAAG,GAAG,KAAK,GAAGvB,WAAW,IAAI;EAC7C,OAAO;IAAEY,KAAK,EAAEW,UAAU;IAAEV,MAAM,EAAEU;EAAU,CAAE;AAClD","names":["shorthands","tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/createArrowStyles.ts"],"sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n '::before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n ...shorthands.borderRight(\n `${borderWidth} /* @noflip */`,\n `${borderStyle} /* @noflip */`,\n `${borderColor} /* @noflip */`,\n ),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: `-${borderWidth}`,\n '--angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--angle': '270deg',\n },\n };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = `${1.414 * arrowHeight}px`;\n return { width: edgeLength, height: edgeLength };\n}\n"]}
@@ -4,7 +4,6 @@ import { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } f
4
4
  * @internal
5
5
  * @returns manager that handles positioning out of the react lifecycle
6
6
  */
7
-
8
7
  export function createPositionManager(options) {
9
8
  const {
10
9
  container,
@@ -14,40 +13,34 @@ export function createPositionManager(options) {
14
13
  middleware,
15
14
  placement
16
15
  } = options;
17
-
18
16
  if (!target || !container) {
19
17
  return {
20
18
  updatePosition: () => undefined,
21
19
  dispose: () => undefined
22
20
  };
23
21
  }
24
-
25
22
  let isFirstUpdate = true;
26
23
  const scrollParents = new Set();
27
- const targetWindow = container.ownerDocument.defaultView; // When the container is first resolved, set position `fixed` to avoid scroll jumps.
24
+ const targetWindow = container.ownerDocument.defaultView;
25
+ // When the container is first resolved, set position `fixed` to avoid scroll jumps.
28
26
  // Without this scroll jumps can occur when the element is rendered initially and receives focus
29
-
30
27
  Object.assign(container.style, {
31
28
  position: 'fixed',
32
29
  left: 0,
33
30
  top: 0,
34
31
  margin: 0
35
32
  });
36
-
37
- const forceUpdate = () => {
33
+ let forceUpdate = () => {
38
34
  if (isFirstUpdate) {
39
35
  scrollParents.add(getScrollParent(container));
40
-
41
36
  if (target instanceof HTMLElement) {
42
37
  scrollParents.add(getScrollParent(target));
43
38
  }
44
-
45
39
  scrollParents.forEach(scrollParent => {
46
40
  scrollParent.addEventListener('scroll', updatePosition);
47
41
  });
48
42
  isFirstUpdate = false;
49
43
  }
50
-
51
44
  Object.assign(container.style, {
52
45
  position: strategy
53
46
  });
@@ -90,26 +83,24 @@ export function createPositionManager(options) {
90
83
  }
91
84
  });
92
85
  };
93
-
94
86
  const updatePosition = debounce(() => forceUpdate());
95
-
96
87
  const dispose = () => {
88
+ // debounced update can still occur afterwards
89
+ // so destroy the reference to forceUpdate
90
+ forceUpdate = () => null;
97
91
  if (targetWindow) {
98
92
  targetWindow.removeEventListener('scroll', updatePosition);
99
93
  targetWindow.removeEventListener('resize', updatePosition);
100
94
  }
101
-
102
95
  scrollParents.forEach(scrollParent => {
103
96
  scrollParent.removeEventListener('scroll', updatePosition);
104
97
  });
105
98
  };
106
-
107
99
  if (targetWindow) {
108
100
  targetWindow.addEventListener('scroll', updatePosition);
109
101
  targetWindow.addEventListener('resize', updatePosition);
110
- } // Update the position on initialization
111
-
112
-
102
+ }
103
+ // Update the position on initialization
113
104
  updatePosition();
114
105
  return {
115
106
  updatePosition,
@@ -1 +1 @@
1
- {"version":3,"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 const forceUpdate = () => {\n if (isFirstUpdate) {\n scrollParents.add(getScrollParent(container));\n if (target instanceof HTMLElement) {\n scrollParents.add(getScrollParent(target));\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.addEventListener('scroll', updatePosition);\n });\n\n isFirstUpdate = false;\n }\n\n Object.assign(container.style, { position: strategy });\n computePosition(target, container, { placement, middleware, strategy })\n .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n writeArrowUpdates({ arrow, middlewareData });\n writeContainerUpdates({\n container,\n middlewareData,\n placement: computedPlacement,\n coordinates: { x, y },\n lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n strategy,\n });\n })\n .catch(err => {\n // https://github.com/floating-ui/floating-ui/issues/1845\n // FIXME for node > 14\n // node 15 introduces promise rejection which means that any components\n // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n // will actually be counter productive\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('[usePositioning]: Failed to calculate position', err);\n }\n });\n };\n\n const updatePosition = debounce(() => forceUpdate());\n\n const dispose = () => {\n if (targetWindow) {\n targetWindow.removeEventListener('scroll', updatePosition);\n targetWindow.removeEventListener('resize', updatePosition);\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.removeEventListener('scroll', updatePosition);\n });\n };\n\n if (targetWindow) {\n targetWindow.addEventListener('scroll', updatePosition);\n targetWindow.addEventListener('resize', updatePosition);\n }\n\n // Update the position on initialization\n updatePosition();\n\n return {\n updatePosition,\n dispose,\n };\n}\n"],"sourceRoot":"../src/"}
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"]}
@@ -7,7 +7,6 @@ export function createVirtualElementFromClick(nativeEvent) {
7
7
  const top = nativeEvent.clientY;
8
8
  const right = left + 1;
9
9
  const bottom = top + 1;
10
-
11
10
  function getBoundingClientRect() {
12
11
  return {
13
12
  left,
@@ -20,7 +19,6 @@ export function createVirtualElementFromClick(nativeEvent) {
20
19
  width: 1
21
20
  };
22
21
  }
23
-
24
22
  return {
25
23
  getBoundingClientRect
26
24
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-positioning/src/createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;AAGG;AACH,OAAM,SAAU,6BAAV,CAAwC,WAAxC,EAA+D;EACnE,MAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;EACA,MAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;EACA,MAAM,KAAK,GAAG,IAAI,GAAG,CAArB;EACA,MAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;EAEA,SAAS,qBAAT,GAA8B;IAC5B,OAAO;MACL,IADK;MAEL,GAFK;MAGL,KAHK;MAIL,MAJK;MAKL,CAAC,EAAE,IALE;MAML,CAAC,EAAE,GANE;MAOL,MAAM,EAAE,CAPH;MAQL,KAAK,EAAE;IARF,CAAP;EAUD;;EAED,OAAO;IACL;EADK,CAAP;AAGD","sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAEA;;;;AAIA,OAAM,SAAUA,6BAA6B,CAACC,WAAuB;EACnE,MAAMC,IAAI,GAAGD,WAAW,CAACE,OAAO;EAChC,MAAMC,GAAG,GAAGH,WAAW,CAACI,OAAO;EAC/B,MAAMC,KAAK,GAAGJ,IAAI,GAAG,CAAC;EACtB,MAAMK,MAAM,GAAGH,GAAG,GAAG,CAAC;EAEtB,SAASI,qBAAqB;IAC5B,OAAO;MACLN,IAAI;MACJE,GAAG;MACHE,KAAK;MACLC,MAAM;MACNE,CAAC,EAAEP,IAAI;MACPQ,CAAC,EAAEN,GAAG;MACNO,MAAM,EAAE,CAAC;MACTC,KAAK,EAAE;KACR;EACH;EAEA,OAAO;IACLJ;GACD;AACH","names":["createVirtualElementFromClick","nativeEvent","left","clientX","top","clientY","right","bottom","getBoundingClientRect","x","y","height","width"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/createVirtualElementFromClick.ts"],"sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"]}
@@ -14,25 +14,20 @@ export function coverTarget() {
14
14
  x,
15
15
  y
16
16
  };
17
-
18
17
  switch (basePlacement) {
19
18
  case 'bottom':
20
19
  newCoords.y -= rects.reference.height;
21
20
  break;
22
-
23
21
  case 'top':
24
22
  newCoords.y += rects.reference.height;
25
23
  break;
26
-
27
24
  case 'left':
28
25
  newCoords.x += rects.reference.width;
29
26
  break;
30
-
31
27
  case 'right':
32
28
  newCoords.x -= rects.reference.width;
33
29
  break;
34
30
  }
35
-
36
31
  return newCoords;
37
32
  }
38
33
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-positioning/src/middleware/coverTarget.ts"],"names":[],"mappings":"AACA,SAAS,wBAAT,QAAyC,gBAAzC;AAEA,OAAM,SAAU,WAAV,GAAqB;EACzB,OAAO;IACL,IAAI,EAAE,aADD;IAEL,EAAE,EAAE,mBAAmB,IAAG;MACxB,MAAM;QAAE,SAAF;QAAa,KAAb;QAAoB,CAApB;QAAuB;MAAvB,IAA6B,mBAAnC;MACA,MAAM,aAAa,GAAG,wBAAwB,CAAC,SAAD,CAAxB,CAAoC,IAA1D;MACA,MAAM,SAAS,GAAG;QAAE,CAAF;QAAK;MAAL,CAAlB;;MAEA,QAAQ,aAAR;QACE,KAAK,QAAL;UACE,SAAS,CAAC,CAAV,IAAe,KAAK,CAAC,SAAN,CAAgB,MAA/B;UACA;;QACF,KAAK,KAAL;UACE,SAAS,CAAC,CAAV,IAAe,KAAK,CAAC,SAAN,CAAgB,MAA/B;UACA;;QACF,KAAK,MAAL;UACE,SAAS,CAAC,CAAV,IAAe,KAAK,CAAC,SAAN,CAAgB,KAA/B;UACA;;QACF,KAAK,OAAL;UACE,SAAS,CAAC,CAAV,IAAe,KAAK,CAAC,SAAN,CAAgB,KAA/B;UACA;MAZJ;;MAeA,OAAO,SAAP;IACD;EAvBI,CAAP;AAyBD","sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { parseFloatingUIPlacement } from '../utils/index';\n\nexport function coverTarget(): Middleware {\n return {\n name: 'coverTarget',\n fn: middlewareArguments => {\n const { placement, rects, x, y } = middlewareArguments;\n const basePlacement = parseFloatingUIPlacement(placement).side;\n const newCoords = { x, y };\n\n switch (basePlacement) {\n case 'bottom':\n newCoords.y -= rects.reference.height;\n break;\n case 'top':\n newCoords.y += rects.reference.height;\n break;\n case 'left':\n newCoords.x += rects.reference.width;\n break;\n case 'right':\n newCoords.x -= rects.reference.width;\n break;\n }\n\n return newCoords;\n },\n };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AACA,SAASA,wBAAwB,QAAQ,gBAAgB;AAEzD,OAAM,SAAUC,WAAW;EACzB,OAAO;IACLC,IAAI,EAAE,aAAa;IACnBC,EAAE,EAAEC,mBAAmB,IAAG;MACxB,MAAM;QAAEC,SAAS;QAAEC,KAAK;QAAEC,CAAC;QAAEC;MAAC,CAAE,GAAGJ,mBAAmB;MACtD,MAAMK,aAAa,GAAGT,wBAAwB,CAACK,SAAS,CAAC,CAACK,IAAI;MAC9D,MAAMC,SAAS,GAAG;QAAEJ,CAAC;QAAEC;MAAC,CAAE;MAE1B,QAAQC,aAAa;QACnB,KAAK,QAAQ;UACXE,SAAS,CAACH,CAAC,IAAIF,KAAK,CAACM,SAAS,CAACC,MAAM;UACrC;QACF,KAAK,KAAK;UACRF,SAAS,CAACH,CAAC,IAAIF,KAAK,CAACM,SAAS,CAACC,MAAM;UACrC;QACF,KAAK,MAAM;UACTF,SAAS,CAACJ,CAAC,IAAID,KAAK,CAACM,SAAS,CAACE,KAAK;UACpC;QACF,KAAK,OAAO;UACVH,SAAS,CAACJ,CAAC,IAAID,KAAK,CAACM,SAAS,CAACE,KAAK;UACpC;MAAM;MAGV,OAAOH,SAAS;IAClB;GACD;AACH","names":["parseFloatingUIPlacement","coverTarget","name","fn","middlewareArguments","placement","rects","x","y","basePlacement","side","newCoords","reference","height","width"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/coverTarget.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { parseFloatingUIPlacement } from '../utils/index';\n\nexport function coverTarget(): Middleware {\n return {\n name: 'coverTarget',\n fn: middlewareArguments => {\n const { placement, rects, x, y } = middlewareArguments;\n const basePlacement = parseFloatingUIPlacement(placement).side;\n const newCoords = { x, y };\n\n switch (basePlacement) {\n case 'bottom':\n newCoords.y -= rects.reference.height;\n break;\n case 'top':\n newCoords.y += rects.reference.height;\n break;\n case 'left':\n newCoords.x += rects.reference.width;\n break;\n case 'right':\n newCoords.x -= rects.reference.width;\n break;\n }\n\n return newCoords;\n },\n };\n}\n"]}
@@ -6,7 +6,8 @@ export function flip(options) {
6
6
  flipBoundary,
7
7
  container
8
8
  } = options;
9
- return baseFlip({ ...(hasScrollableElement && {
9
+ return baseFlip({
10
+ ...(hasScrollableElement && {
10
11
  boundary: 'clippingAncestors'
11
12
  }),
12
13
  ...(flipBoundary && {
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-positioning/src/middleware/flip.ts"],"names":[],"mappings":"AAAA,SAAS,IAAI,IAAI,QAAjB,QAAiC,kBAAjC;AAEA,SAAS,WAAT,QAA4B,gBAA5B;AAOA,OAAM,SAAU,IAAV,CAAe,OAAf,EAA6C;EACjD,MAAM;IAAE,oBAAF;IAAwB,YAAxB;IAAsC;EAAtC,IAAoD,OAA1D;EAEA,OAAO,QAAQ,CAAC,EACd,IAAI,oBAAoB,IAAI;MAAE,QAAQ,EAAE;IAAZ,CAA5B,CADc;IAEd,IAAI,YAAY,IAAI;MAAE,WAAW,EAAE,IAAf;MAAqB,QAAQ,EAAE,WAAW,CAAC,SAAD,EAAY,YAAZ;IAA1C,CAApB,CAFc;IAGd,gBAAgB,EAAE;EAHJ,CAAD,CAAf;AAKD","sourcesContent":["import { flip as baseFlip } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/index';\n\nexport interface FlipMiddlewareOptions extends Pick<PositioningOptions, 'flipBoundary'> {\n hasScrollableElement?: boolean;\n container: HTMLElement | null;\n}\n\nexport function flip(options: FlipMiddlewareOptions) {\n const { hasScrollableElement, flipBoundary, container } = options;\n\n return baseFlip({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(flipBoundary && { altBoundary: true, boundary: getBoundary(container, flipBoundary) }),\n fallbackStrategy: 'bestFit',\n });\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,SAASA,IAAI,IAAIC,QAAQ,QAAQ,kBAAkB;AAEnD,SAASC,WAAW,QAAQ,gBAAgB;AAO5C,OAAM,SAAUF,IAAI,CAACG,OAA8B;EACjD,MAAM;IAAEC,oBAAoB;IAAEC,YAAY;IAAEC;EAAS,CAAE,GAAGH,OAAO;EAEjE,OAAOF,QAAQ,CAAC;IACd,IAAIG,oBAAoB,IAAI;MAAEG,QAAQ,EAAE;IAAmB,CAAE,CAAC;IAC9D,IAAIF,YAAY,IAAI;MAAEG,WAAW,EAAE,IAAI;MAAED,QAAQ,EAAEL,WAAW,CAACI,SAAS,EAAED,YAAY;IAAC,CAAE,CAAC;IAC1FI,gBAAgB,EAAE;GACnB,CAAC;AACJ","names":["flip","baseFlip","getBoundary","options","hasScrollableElement","flipBoundary","container","boundary","altBoundary","fallbackStrategy"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/flip.ts"],"sourcesContent":["import { flip as baseFlip } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/index';\n\nexport interface FlipMiddlewareOptions extends Pick<PositioningOptions, 'flipBoundary'> {\n hasScrollableElement?: boolean;\n container: HTMLElement | null;\n}\n\nexport function flip(options: FlipMiddlewareOptions) {\n const { hasScrollableElement, flipBoundary, container } = options;\n\n return baseFlip({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(flipBoundary && { altBoundary: true, boundary: getBoundary(container, flipBoundary) }),\n fallbackStrategy: 'bestFit',\n });\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-positioning/src/middleware/intersecting.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,kBAA/B;AAEA,OAAM,SAAU,YAAV,GAAsB;EAC1B,OAAO;IACL,IAAI,EAAE,sBADD;IAEL,EAAE,EAAE,MAAM,mBAAN,IAA4B;MAC9B,MAAM,YAAY,GAAG,mBAAmB,CAAC,KAApB,CAA0B,QAA/C;MACA,MAAM,WAAW,GAAG,MAAM,cAAc,CAAC,mBAAD,EAAsB;QAAE,WAAW,EAAE;MAAf,CAAtB,CAAxC;MAEA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAZ,GAAkB,YAAY,CAAC,MAA/B,IAAyC,WAAW,CAAC,GAAZ,GAAkB,CAArF;MACA,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAZ,GAAqB,YAAY,CAAC,MAAlC,IAA4C,WAAW,CAAC,MAAZ,GAAqB,CAA9F;MAEA,MAAM,cAAc,GAAG,iBAAiB,IAAI,oBAA5C;MAEA,OAAO;QACL,IAAI,EAAE;UACJ,YAAY,EAAE;QADV;MADD,CAAP;IAKD;EAhBI,CAAP;AAkBD","sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { detectOverflow } from '@floating-ui/dom';\n\nexport function intersecting(): Middleware {\n return {\n name: 'intersectionObserver',\n fn: async middlewareArguments => {\n const floatingRect = middlewareArguments.rects.floating;\n const altOverflow = await detectOverflow(middlewareArguments, { altBoundary: true });\n\n const isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;\n const isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;\n\n const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n return {\n data: {\n intersecting: isIntersecting,\n },\n };\n },\n };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AACA,SAASA,cAAc,QAAQ,kBAAkB;AAEjD,OAAM,SAAUC,YAAY;EAC1B,OAAO;IACLC,IAAI,EAAE,sBAAsB;IAC5BC,EAAE,EAAE,MAAMC,mBAAmB,IAAG;MAC9B,MAAMC,YAAY,GAAGD,mBAAmB,CAACE,KAAK,CAACC,QAAQ;MACvD,MAAMC,WAAW,GAAG,MAAMR,cAAc,CAACI,mBAAmB,EAAE;QAAEK,WAAW,EAAE;MAAI,CAAE,CAAC;MAEpF,MAAMC,iBAAiB,GAAGF,WAAW,CAACG,GAAG,GAAGN,YAAY,CAACO,MAAM,IAAIJ,WAAW,CAACG,GAAG,GAAG,CAAC;MACtF,MAAME,oBAAoB,GAAGL,WAAW,CAACM,MAAM,GAAGT,YAAY,CAACO,MAAM,IAAIJ,WAAW,CAACM,MAAM,GAAG,CAAC;MAE/F,MAAMC,cAAc,GAAGL,iBAAiB,IAAIG,oBAAoB;MAEhE,OAAO;QACLG,IAAI,EAAE;UACJf,YAAY,EAAEc;;OAEjB;IACH;GACD;AACH","names":["detectOverflow","intersecting","name","fn","middlewareArguments","floatingRect","rects","floating","altOverflow","altBoundary","isIntersectingTop","top","height","isIntersectingBottom","bottom","isIntersecting","data"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/intersecting.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { detectOverflow } from '@floating-ui/dom';\n\nexport function intersecting(): Middleware {\n return {\n name: 'intersectionObserver',\n fn: async middlewareArguments => {\n const floatingRect = middlewareArguments.rects.floating;\n const altOverflow = await detectOverflow(middlewareArguments, { altBoundary: true });\n\n const isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;\n const isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;\n\n const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n return {\n data: {\n intersecting: isIntersecting,\n },\n };\n },\n };\n}\n"]}
@@ -1,43 +1,36 @@
1
- import { detectOverflow } from '@floating-ui/dom';
2
- import { parseFloatingUIPlacement } from '../utils/index';
3
- export function maxSize(autoSize) {
4
- return {
5
- name: 'maxSize',
6
- fn: async middlewareArguments => {
7
- const {
8
- placement,
9
- rects,
10
- elements,
11
- middlewareData
12
- } = middlewareArguments;
13
- const basePlacement = parseFloatingUIPlacement(placement).side;
14
- const overflow = await detectOverflow(middlewareArguments);
15
- const {
16
- x,
17
- y
18
- } = middlewareData.shift || {
19
- x: 0,
20
- y: 0
21
- };
22
- const {
23
- width,
24
- height
25
- } = rects.floating;
26
- const widthProp = basePlacement === 'left' ? 'left' : 'right';
27
- const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
28
- const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always' || overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width');
29
- const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always' || overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height');
30
-
31
- if (applyMaxWidth) {
32
- elements.floating.style.maxWidth = `${width - overflow[widthProp] - x}px`;
33
- }
34
-
1
+ import { size } from '@floating-ui/dom';
2
+ import { getBoundary } from '../utils/getBoundary';
3
+ export function maxSize(autoSize, options) {
4
+ const {
5
+ container,
6
+ overflowBoundary
7
+ } = options;
8
+ return size({
9
+ ...(overflowBoundary && {
10
+ altBoundary: true,
11
+ boundary: getBoundary(container, overflowBoundary)
12
+ }),
13
+ apply({
14
+ availableHeight,
15
+ availableWidth,
16
+ elements,
17
+ rects
18
+ }) {
19
+ const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always' || rects.floating.width > availableWidth && (autoSize === true || autoSize === 'width');
20
+ const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always' || rects.floating.height > availableHeight && (autoSize === true || autoSize === 'height');
35
21
  if (applyMaxHeight) {
36
- elements.floating.style.maxHeight = `${height - overflow[heightProp] - y}px`;
22
+ Object.assign(elements.floating.style, {
23
+ maxHeight: `${availableHeight}px`,
24
+ boxSizing: 'border-box'
25
+ });
26
+ }
27
+ if (applyMaxWidth) {
28
+ Object.assign(elements.floating.style, {
29
+ maxWidth: `${availableWidth}px`,
30
+ boxSizing: 'border-box'
31
+ });
37
32
  }
38
-
39
- return {};
40
33
  }
41
- };
34
+ });
42
35
  }
43
36
  //# sourceMappingURL=maxSize.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-positioning/src/middleware/maxSize.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,QAA+B,kBAA/B;AAGA,SAAS,wBAAT,QAAyC,gBAAzC;AAEA,OAAM,SAAU,OAAV,CAAkB,QAAlB,EAA0D;EAC9D,OAAO;IACL,IAAI,EAAE,SADD;IAEL,EAAE,EAAE,MAAM,mBAAN,IAA4B;MAC9B,MAAM;QAAE,SAAF;QAAa,KAAb;QAAoB,QAApB;QAA8B;MAA9B,IAAiD,mBAAvD;MACA,MAAM,aAAa,GAAG,wBAAwB,CAAC,SAAD,CAAxB,CAAoC,IAA1D;MAEA,MAAM,QAAQ,GAAG,MAAM,cAAc,CAAC,mBAAD,CAArC;MACA,MAAM;QAAE,CAAF;QAAK;MAAL,IAAW,cAAc,CAAC,KAAf,IAAwB;QAAE,CAAC,EAAE,CAAL;QAAQ,CAAC,EAAE;MAAX,CAAzC;MACA,MAAM;QAAE,KAAF;QAAS;MAAT,IAAoB,KAAK,CAAC,QAAhC;MAEA,MAAM,SAAS,GAAS,aAAa,KAAK,MAAlB,GAA2B,MAA3B,GAAoC,OAA5D;MACA,MAAM,UAAU,GAAS,aAAa,KAAK,KAAlB,GAA0B,KAA1B,GAAkC,QAA3D;MAEA,MAAM,aAAa,GACjB,QAAQ,KAAK,QAAb,IACA,QAAQ,KAAK,cADb,IAEC,QAAQ,CAAC,SAAD,CAAR,GAAsB,CAAtB,KAA4B,QAAQ,KAAK,IAAb,IAAqB,QAAQ,KAAK,OAA9D,CAHH;MAIA,MAAM,cAAc,GAClB,QAAQ,KAAK,QAAb,IACA,QAAQ,KAAK,eADb,IAEC,QAAQ,CAAC,UAAD,CAAR,GAAuB,CAAvB,KAA6B,QAAQ,KAAK,IAAb,IAAqB,QAAQ,KAAK,QAA/D,CAHH;;MAKA,IAAI,aAAJ,EAAmB;QACjB,QAAQ,CAAC,QAAT,CAAkB,KAAlB,CAAwB,QAAxB,GAAmC,GAAG,KAAK,GAAG,QAAQ,CAAC,SAAD,CAAhB,GAA8B,CAAC,IAArE;MACD;;MACD,IAAI,cAAJ,EAAoB;QAClB,QAAQ,CAAC,QAAT,CAAkB,KAAlB,CAAwB,SAAxB,GAAoC,GAAG,MAAM,GAAG,QAAQ,CAAC,UAAD,CAAjB,GAAgC,CAAC,IAAxE;MACD;;MAED,OAAO,EAAP;IACD;EA9BI,CAAP;AAgCD","sourcesContent":["import { detectOverflow } from '@floating-ui/dom';\nimport type { Middleware, Side } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { parseFloatingUIPlacement } from '../utils/index';\n\nexport function maxSize(autoSize: PositioningOptions['autoSize']): Middleware {\n return {\n name: 'maxSize',\n fn: async middlewareArguments => {\n const { placement, rects, elements, middlewareData } = middlewareArguments;\n const basePlacement = parseFloatingUIPlacement(placement).side;\n\n const overflow = await detectOverflow(middlewareArguments);\n const { x, y } = middlewareData.shift || { x: 0, y: 0 };\n const { width, height } = rects.floating;\n\n const widthProp: Side = basePlacement === 'left' ? 'left' : 'right';\n const heightProp: Side = basePlacement === 'top' ? 'top' : 'bottom';\n\n const applyMaxWidth =\n autoSize === 'always' ||\n autoSize === 'width-always' ||\n (overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width'));\n const applyMaxHeight =\n autoSize === 'always' ||\n autoSize === 'height-always' ||\n (overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height'));\n\n if (applyMaxWidth) {\n elements.floating.style.maxWidth = `${width - overflow[widthProp] - x}px`;\n }\n if (applyMaxHeight) {\n elements.floating.style.maxHeight = `${height - overflow[heightProp] - y}px`;\n }\n\n return {};\n },\n };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,SAASA,IAAI,QAAQ,kBAAkB;AAGvC,SAASC,WAAW,QAAQ,sBAAsB;AAKlD,OAAM,SAAUC,OAAO,CAACC,QAAwC,EAAEC,OAAiC;EACjG,MAAM;IAAEC,SAAS;IAAEC;EAAgB,CAAE,GAAGF,OAAO;EAC/C,OAAOJ,IAAI,CAAC;IACV,IAAIM,gBAAgB,IAAI;MAAEC,WAAW,EAAE,IAAI;MAAEC,QAAQ,EAAEP,WAAW,CAACI,SAAS,EAAEC,gBAAgB;IAAC,CAAE,CAAC;IAClGG,KAAK,CAAC;MAAEC,eAAe;MAAEC,cAAc;MAAEC,QAAQ;MAAEC;IAAK,CAAE;MACxD,MAAMC,aAAa,GACjBX,QAAQ,KAAK,QAAQ,IACrBA,QAAQ,KAAK,cAAc,IAC1BU,KAAK,CAACE,QAAQ,CAACC,KAAK,GAAGL,cAAc,KAAKR,QAAQ,KAAK,IAAI,IAAIA,QAAQ,KAAK,OAAO,CAAE;MAExF,MAAMc,cAAc,GAClBd,QAAQ,KAAK,QAAQ,IACrBA,QAAQ,KAAK,eAAe,IAC3BU,KAAK,CAACE,QAAQ,CAACG,MAAM,GAAGR,eAAe,KAAKP,QAAQ,KAAK,IAAI,IAAIA,QAAQ,KAAK,QAAQ,CAAE;MAE3F,IAAIc,cAAc,EAAE;QAClBE,MAAM,CAACC,MAAM,CAACR,QAAQ,CAACG,QAAQ,CAACM,KAAK,EAAE;UACrCC,SAAS,EAAE,GAAGZ,eAAe,IAAI;UACjCa,SAAS,EAAE;SACZ,CAAC;;MAGJ,IAAIT,aAAa,EAAE;QACjBK,MAAM,CAACC,MAAM,CAACR,QAAQ,CAACG,QAAQ,CAACM,KAAK,EAAE;UACrCG,QAAQ,EAAE,GAAGb,cAAc,IAAI;UAC/BY,SAAS,EAAE;SACZ,CAAC;;IAEN;GACD,CAAC;AACJ","names":["size","getBoundary","maxSize","autoSize","options","container","overflowBoundary","altBoundary","boundary","apply","availableHeight","availableWidth","elements","rects","applyMaxWidth","floating","width","applyMaxHeight","height","Object","assign","style","maxHeight","boxSizing","maxWidth"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/maxSize.ts"],"sourcesContent":["import { size } from '@floating-ui/dom';\nimport type { Middleware } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/getBoundary';\nexport interface MaxSizeMiddlewareOptions extends Pick<PositioningOptions, 'overflowBoundary'> {\n container: HTMLElement | null;\n}\n\nexport function maxSize(autoSize: PositioningOptions['autoSize'], options: MaxSizeMiddlewareOptions): Middleware {\n const { container, overflowBoundary } = options;\n return size({\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n apply({ availableHeight, availableWidth, elements, rects }) {\n const applyMaxWidth =\n autoSize === 'always' ||\n autoSize === 'width-always' ||\n (rects.floating.width > availableWidth && (autoSize === true || autoSize === 'width'));\n\n const applyMaxHeight =\n autoSize === 'always' ||\n autoSize === 'height-always' ||\n (rects.floating.height > availableHeight && (autoSize === true || autoSize === 'height'));\n\n if (applyMaxHeight) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n boxSizing: 'border-box',\n });\n }\n\n if (applyMaxWidth) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n boxSizing: 'border-box',\n });\n }\n },\n });\n}\n"]}
@@ -3,7 +3,6 @@ import { getFloatingUIOffset } from '../utils/getFloatingUIOffset';
3
3
  /**
4
4
  * Wraps floating UI offset middleware to to transform offset value
5
5
  */
6
-
7
6
  export function offset(offsetValue) {
8
7
  const floatingUIOffset = getFloatingUIOffset(offsetValue);
9
8
  return baseOffset(floatingUIOffset);
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-positioning/src/middleware/offset.ts"],"names":[],"mappings":"AAAA,SAAS,MAAM,IAAI,UAAnB,QAAqC,kBAArC;AAEA,SAAS,mBAAT,QAAoC,8BAApC;AAEA;;AAEG;;AACH,OAAM,SAAU,MAAV,CAAiB,WAAjB,EAA0D;EAC9D,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,WAAD,CAA5C;EACA,OAAO,UAAU,CAAC,gBAAD,CAAjB;AACD","sourcesContent":["import { offset as baseOffset } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getFloatingUIOffset } from '../utils/getFloatingUIOffset';\n\n/**\n * Wraps floating UI offset middleware to to transform offset value\n */\nexport function offset(offsetValue: PositioningOptions['offset']) {\n const floatingUIOffset = getFloatingUIOffset(offsetValue);\n return baseOffset(floatingUIOffset);\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,SAASA,MAAM,IAAIC,UAAU,QAAQ,kBAAkB;AAEvD,SAASC,mBAAmB,QAAQ,8BAA8B;AAElE;;;AAGA,OAAM,SAAUF,MAAM,CAACG,WAAyC;EAC9D,MAAMC,gBAAgB,GAAGF,mBAAmB,CAACC,WAAW,CAAC;EACzD,OAAOF,UAAU,CAACG,gBAAgB,CAAC;AACrC","names":["offset","baseOffset","getFloatingUIOffset","offsetValue","floatingUIOffset"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/offset.ts"],"sourcesContent":["import { offset as baseOffset } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getFloatingUIOffset } from '../utils/getFloatingUIOffset';\n\n/**\n * Wraps floating UI offset middleware to to transform offset value\n */\nexport function offset(offsetValue: PositioningOptions['offset']) {\n const floatingUIOffset = getFloatingUIOffset(offsetValue);\n return baseOffset(floatingUIOffset);\n}\n"]}
@@ -3,7 +3,6 @@ import { getBoundary } from '../utils/index';
3
3
  /**
4
4
  * Wraps the floating UI shift middleware for easier usage of our options
5
5
  */
6
-
7
6
  export function shift(options) {
8
7
  const {
9
8
  hasScrollableElement,
@@ -11,7 +10,8 @@ export function shift(options) {
11
10
  overflowBoundary,
12
11
  container
13
12
  } = options;
14
- return baseShift({ ...(hasScrollableElement && {
13
+ return baseShift({
14
+ ...(hasScrollableElement && {
15
15
  boundary: 'clippingAncestors'
16
16
  }),
17
17
  ...(disableTether && {
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-positioning/src/middleware/shift.ts"],"names":[],"mappings":"AAAA,SAAS,KAAK,IAAI,SAAlB,EAA6B,UAA7B,QAA+C,kBAA/C;AAEA,SAAS,WAAT,QAA4B,gBAA5B;AAQA;;AAEG;;AACH,OAAM,SAAU,KAAV,CAAgB,OAAhB,EAA+C;EACnD,MAAM;IAAE,oBAAF;IAAwB,aAAxB;IAAuC,gBAAvC;IAAyD;EAAzD,IAAuE,OAA7E;EAEA,OAAO,SAAS,CAAC,EACf,IAAI,oBAAoB,IAAI;MAAE,QAAQ,EAAE;IAAZ,CAA5B,CADe;IAEf,IAAI,aAAa,IAAI;MACnB,SAAS,EAAE,aAAa,KAAK,KADV;MAEnB,OAAO,EAAE,UAAU,CAAC;QAAE,SAAS,EAAE,aAAa,KAAK,KAA/B;QAAsC,QAAQ,EAAE;MAAhD,CAAD;IAFA,CAArB,CAFe;IAMf,IAAI,gBAAgB,IAAI;MAAE,WAAW,EAAE,IAAf;MAAqB,QAAQ,EAAE,WAAW,CAAC,SAAD,EAAY,gBAAZ;IAA1C,CAAxB;EANe,CAAD,CAAhB;AAQD","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"],"sourceRoot":"../src/"}
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"]}