@vritti/quantum-ui 0.2.7 → 0.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (207) hide show
  1. package/README.md +7 -7
  2. package/dist/Alert.js +110 -0
  3. package/dist/Alert.js.map +1 -0
  4. package/dist/Avatar.js +219 -0
  5. package/dist/Avatar.js.map +1 -0
  6. package/dist/Badge.js +32 -0
  7. package/dist/Badge.js.map +1 -0
  8. package/dist/Button2.js +2 -2
  9. package/dist/Chart.js +19003 -0
  10. package/dist/Chart.js.map +1 -0
  11. package/dist/Checkbox.js +6 -26
  12. package/dist/Checkbox.js.map +1 -1
  13. package/dist/Combination.js +3856 -0
  14. package/dist/Combination.js.map +1 -0
  15. package/dist/DatePicker.js +15 -3886
  16. package/dist/DatePicker.js.map +1 -1
  17. package/dist/DropdownMenu.js +1522 -0
  18. package/dist/DropdownMenu.js.map +1 -0
  19. package/dist/Form.js +34 -23
  20. package/dist/Form.js.map +1 -1
  21. package/dist/Label.js +1 -1
  22. package/dist/OTPField.js +16 -5
  23. package/dist/OTPField.js.map +1 -1
  24. package/dist/PhoneField.js +14 -6
  25. package/dist/PhoneField.js.map +1 -1
  26. package/dist/Progress.js +116 -0
  27. package/dist/Progress.js.map +1 -0
  28. package/dist/SelectField.js +1351 -0
  29. package/dist/SelectField.js.map +1 -0
  30. package/dist/Separator.js +6 -0
  31. package/dist/Separator.js.map +1 -0
  32. package/dist/Sonner.js +3 -38
  33. package/dist/Sonner.js.map +1 -1
  34. package/dist/Spinner.js +1 -9
  35. package/dist/Spinner.js.map +1 -1
  36. package/dist/Switch.js +210 -0
  37. package/dist/Switch.js.map +1 -0
  38. package/dist/ThemeContext.js +57 -0
  39. package/dist/ThemeContext.js.map +1 -0
  40. package/dist/ThemeToggle.js +4 -15
  41. package/dist/ThemeToggle.js.map +1 -1
  42. package/dist/Toggle.js +69 -0
  43. package/dist/Toggle.js.map +1 -0
  44. package/dist/_commonjsHelpers.js +6 -0
  45. package/dist/_commonjsHelpers.js.map +1 -0
  46. package/dist/assets/quantum-ui.css +18 -0
  47. package/dist/axios.js.map +1 -1
  48. package/dist/check.js +15 -0
  49. package/dist/check.js.map +1 -0
  50. package/dist/chevron-down.js +15 -0
  51. package/dist/chevron-down.js.map +1 -0
  52. package/dist/chevron-right.js +15 -0
  53. package/dist/chevron-right.js.map +1 -0
  54. package/dist/components/Alert.js +2 -0
  55. package/dist/components/Alert.js.map +1 -0
  56. package/dist/components/Avatar.js +2 -0
  57. package/dist/components/Avatar.js.map +1 -0
  58. package/dist/components/Badge.js +2 -0
  59. package/dist/components/Badge.js.map +1 -0
  60. package/dist/components/Chart.js +2 -0
  61. package/dist/components/Chart.js.map +1 -0
  62. package/dist/components/DropdownMenu.js +2 -0
  63. package/dist/components/DropdownMenu.js.map +1 -0
  64. package/dist/components/Progress.js +1 -174
  65. package/dist/components/Progress.js.map +1 -1
  66. package/dist/components/SelectField.js +2 -0
  67. package/dist/components/SelectField.js.map +1 -0
  68. package/dist/components/Separator.js +2 -0
  69. package/dist/components/Separator.js.map +1 -0
  70. package/dist/components/Switch.js +2 -0
  71. package/dist/components/Switch.js.map +1 -0
  72. package/dist/components/Toggle.js +2 -0
  73. package/dist/components/Toggle.js.map +1 -0
  74. package/dist/context/index.js +2 -0
  75. package/dist/context/index.js.map +1 -0
  76. package/dist/field.js +2 -49
  77. package/dist/field.js.map +1 -1
  78. package/dist/hooks/index.js +2 -0
  79. package/dist/hooks/index.js.map +1 -0
  80. package/dist/index.js +12 -0
  81. package/dist/index.js.map +1 -1
  82. package/dist/index10.js +105 -0
  83. package/dist/index10.js.map +1 -0
  84. package/dist/index11.js +79 -0
  85. package/dist/index11.js.map +1 -0
  86. package/dist/index12.js +101 -0
  87. package/dist/index12.js.map +1 -0
  88. package/dist/index13.js +205 -0
  89. package/dist/index13.js.map +1 -0
  90. package/dist/index14.js +199 -0
  91. package/dist/index14.js.map +1 -0
  92. package/dist/index2.js +55 -130
  93. package/dist/index2.js.map +1 -1
  94. package/dist/index3.js +10 -42
  95. package/dist/index3.js.map +1 -1
  96. package/dist/index4.js +125 -35
  97. package/dist/index4.js.map +1 -1
  98. package/dist/index5.js +26 -414
  99. package/dist/index5.js.map +1 -1
  100. package/dist/index6.js +8 -0
  101. package/dist/index6.js.map +1 -0
  102. package/dist/index7.js +16 -0
  103. package/dist/index7.js.map +1 -0
  104. package/dist/index8.js +45 -0
  105. package/dist/index8.js.map +1 -0
  106. package/dist/index9.js +41 -0
  107. package/dist/index9.js.map +1 -0
  108. package/dist/lib/components/Alert/Alert.d.ts +10 -0
  109. package/dist/lib/components/Alert/Alert.d.ts.map +1 -0
  110. package/dist/lib/components/Alert/index.d.ts +2 -0
  111. package/dist/lib/components/Alert/index.d.ts.map +1 -0
  112. package/dist/lib/components/Avatar/Avatar.d.ts +8 -0
  113. package/dist/lib/components/Avatar/Avatar.d.ts.map +1 -0
  114. package/dist/lib/components/Avatar/index.d.ts +2 -0
  115. package/dist/lib/components/Avatar/index.d.ts.map +1 -0
  116. package/dist/lib/components/Badge/Badge.d.ts +5 -0
  117. package/dist/lib/components/Badge/Badge.d.ts.map +1 -0
  118. package/dist/lib/components/Badge/index.d.ts +3 -0
  119. package/dist/lib/components/Badge/index.d.ts.map +1 -0
  120. package/dist/lib/components/Button/index.d.ts +1 -1
  121. package/dist/lib/components/Button/index.d.ts.map +1 -1
  122. package/dist/lib/components/Chart/Chart.d.ts +13 -0
  123. package/dist/lib/components/Chart/Chart.d.ts.map +1 -0
  124. package/dist/lib/components/Chart/index.d.ts +3 -0
  125. package/dist/lib/components/Chart/index.d.ts.map +1 -0
  126. package/dist/lib/components/DropdownMenu/DropdownMenu.d.ts +28 -0
  127. package/dist/lib/components/DropdownMenu/DropdownMenu.d.ts.map +1 -0
  128. package/dist/lib/components/DropdownMenu/index.d.ts +3 -0
  129. package/dist/lib/components/DropdownMenu/index.d.ts.map +1 -0
  130. package/dist/lib/components/DropdownMenu/types.d.ts +72 -0
  131. package/dist/lib/components/DropdownMenu/types.d.ts.map +1 -0
  132. package/dist/lib/components/Form/Form.d.ts +1 -1
  133. package/dist/lib/components/Form/Form.d.ts.map +1 -1
  134. package/dist/lib/components/OTPField/OTPField.d.ts.map +1 -1
  135. package/dist/lib/components/PhoneField/PhoneField.d.ts.map +1 -1
  136. package/dist/lib/components/SelectField/SelectField.d.ts +24 -0
  137. package/dist/lib/components/SelectField/SelectField.d.ts.map +1 -0
  138. package/dist/lib/components/SelectField/index.d.ts +3 -0
  139. package/dist/lib/components/SelectField/index.d.ts.map +1 -0
  140. package/dist/lib/components/Separator/Separator.d.ts +3 -0
  141. package/dist/lib/components/Separator/Separator.d.ts.map +1 -0
  142. package/dist/lib/components/Separator/index.d.ts +2 -0
  143. package/dist/lib/components/Separator/index.d.ts.map +1 -0
  144. package/dist/lib/components/Switch/Switch.d.ts +9 -0
  145. package/dist/lib/components/Switch/Switch.d.ts.map +1 -0
  146. package/dist/lib/components/Switch/index.d.ts +3 -0
  147. package/dist/lib/components/Switch/index.d.ts.map +1 -0
  148. package/dist/lib/components/ThemeToggle/ThemeToggle.d.ts.map +1 -1
  149. package/dist/lib/components/Toggle/Toggle.d.ts +7 -0
  150. package/dist/lib/components/Toggle/Toggle.d.ts.map +1 -0
  151. package/dist/lib/components/Toggle/index.d.ts +2 -0
  152. package/dist/lib/components/Toggle/index.d.ts.map +1 -0
  153. package/dist/lib/components/index.d.ts +10 -0
  154. package/dist/lib/components/index.d.ts.map +1 -1
  155. package/dist/lib/context/ThemeContext.d.ts +18 -0
  156. package/dist/lib/context/ThemeContext.d.ts.map +1 -0
  157. package/dist/lib/context/index.d.ts +2 -0
  158. package/dist/lib/context/index.d.ts.map +1 -0
  159. package/dist/lib/hooks/index.d.ts +2 -0
  160. package/dist/lib/hooks/index.d.ts.map +1 -0
  161. package/dist/lib/hooks/useTheme.d.ts +8 -0
  162. package/dist/lib/hooks/useTheme.d.ts.map +1 -0
  163. package/dist/lib/index.d.ts +2 -0
  164. package/dist/lib/index.d.ts.map +1 -1
  165. package/dist/lib/theme/index.d.ts +13 -0
  166. package/dist/lib/theme/index.d.ts.map +1 -0
  167. package/dist/lib/utils/axios.d.ts +1 -0
  168. package/dist/lib/utils/axios.d.ts.map +1 -1
  169. package/dist/lib/utils/formHelpers.d.ts +7 -3
  170. package/dist/lib/utils/formHelpers.d.ts.map +1 -1
  171. package/dist/separator2.js +53 -0
  172. package/dist/separator2.js.map +1 -0
  173. package/dist/shadcn/index.d.ts +1 -1
  174. package/dist/shadcn/index.d.ts.map +1 -1
  175. package/dist/shadcn/shadcnAlert/alert.d.ts +11 -0
  176. package/dist/shadcn/shadcnAlert/alert.d.ts.map +1 -0
  177. package/dist/shadcn/shadcnAlert/index.d.ts +2 -0
  178. package/dist/shadcn/shadcnAlert/index.d.ts.map +1 -0
  179. package/dist/shadcn/shadcnAvatar/Avatar.d.ts +12 -0
  180. package/dist/shadcn/shadcnAvatar/Avatar.d.ts.map +1 -0
  181. package/dist/shadcn/shadcnAvatar/index.d.ts +2 -0
  182. package/dist/shadcn/shadcnAvatar/index.d.ts.map +1 -0
  183. package/dist/shadcn/shadcnBadge/Badge.d.ts +11 -0
  184. package/dist/shadcn/shadcnBadge/Badge.d.ts.map +1 -0
  185. package/dist/shadcn/shadcnBadge/index.d.ts +3 -0
  186. package/dist/shadcn/shadcnBadge/index.d.ts.map +1 -0
  187. package/dist/shadcn/shadcnButton/Button.d.ts +2 -2
  188. package/dist/shadcn/shadcnChart/Chart.d.ts +58 -0
  189. package/dist/shadcn/shadcnChart/Chart.d.ts.map +1 -0
  190. package/dist/shadcn/shadcnChart/index.d.ts +3 -0
  191. package/dist/shadcn/shadcnChart/index.d.ts.map +1 -0
  192. package/dist/shadcn/shadcnSpinner/Spinner.d.ts.map +1 -1
  193. package/dist/shadcn/shadcnSwitch/Switch.d.ts +7 -0
  194. package/dist/shadcn/shadcnSwitch/Switch.d.ts.map +1 -0
  195. package/dist/shadcn/shadcnSwitch/index.d.ts +2 -0
  196. package/dist/shadcn/shadcnSwitch/index.d.ts.map +1 -0
  197. package/dist/shadcn/shadcnToggle/Toggle.d.ts +10 -0
  198. package/dist/shadcn/shadcnToggle/Toggle.d.ts.map +1 -0
  199. package/dist/shadcn/shadcnToggle/index.d.ts +2 -0
  200. package/dist/shadcn/shadcnToggle/index.d.ts.map +1 -0
  201. package/dist/theme/index.js +11 -0
  202. package/dist/theme/index.js.map +1 -0
  203. package/dist/triangle-alert.js +40 -0
  204. package/dist/triangle-alert.js.map +1 -0
  205. package/dist/useTheme.js +15 -0
  206. package/dist/useTheme.js.map +1 -0
  207. package/package.json +59 -6
@@ -3,12 +3,15 @@ import * as React from 'react';
3
3
  import React__default, { createContext, useContext, useCallback, useRef, useLayoutEffect, useState, useEffect, useMemo } from 'react';
4
4
  import { c as cn } from './utils.js';
5
5
  import { L as Label } from './Label.js';
6
- import { a as Primitive, b as composeEventHandlers, e as dispatchDiscreteCustomEvent, f as useLayoutEffect2, c as createContextScope, d as useSize, u as useControllableState, P as Presence, g as createSlot } from './index5.js';
7
- import { u as useComposedRefs } from './index2.js';
8
- import * as ReactDOM from 'react-dom';
9
- import ReactDOM__default from 'react-dom';
6
+ import { u as useControllableState, P as Primitive, a as composeEventHandlers, c as createSlot } from './index13.js';
7
+ import { u as useComposedRefs } from './index5.js';
8
+ import { c as createContextScope } from './index12.js';
9
+ import { c as createPopperScope, R as Root2$1, u as useId, A as Anchor, P as Portal$1, h as hideOthers, b as ReactRemoveScroll, a as useFocusGuards, F as FocusScope, D as DismissableLayer, C as Content, d as Arrow } from './Combination.js';
10
+ import { P as Presence } from './index4.js';
10
11
  import { b as buttonVariants, B as Button$1 } from './Button2.js';
12
+ import { C as ChevronDown } from './chevron-down.js';
11
13
  import { c as createLucideIcon } from './createLucideIcon.js';
14
+ import { C as ChevronRight } from './chevron-right.js';
12
15
 
13
16
  /**
14
17
  * @license lucide-react v0.562.0 - ISC
@@ -18,30 +21,8 @@ import { c as createLucideIcon } from './createLucideIcon.js';
18
21
  */
19
22
 
20
23
 
21
- const __iconNode$2 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
22
- const ChevronDown = createLucideIcon("chevron-down", __iconNode$2);
23
-
24
- /**
25
- * @license lucide-react v0.562.0 - ISC
26
- *
27
- * This source code is licensed under the ISC license.
28
- * See the LICENSE file in the root directory of this source tree.
29
- */
30
-
31
-
32
- const __iconNode$1 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
33
- const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1);
34
-
35
- /**
36
- * @license lucide-react v0.562.0 - ISC
37
- *
38
- * This source code is licensed under the ISC license.
39
- * See the LICENSE file in the root directory of this source tree.
40
- */
41
-
42
-
43
- const __iconNode = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
44
- const ChevronRight = createLucideIcon("chevron-right", __iconNode);
24
+ const __iconNode = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
25
+ const ChevronLeft = createLucideIcon("chevron-left", __iconNode);
45
26
 
46
27
  /**
47
28
  * Time zone name format.
@@ -1061,7 +1042,7 @@ function addYears(date, amount, options) {
1061
1042
  * ])
1062
1043
  * //=> Sun Jul 02 1995 00:00:00
1063
1044
  */
1064
- function max$1(dates, options) {
1045
+ function max(dates, options) {
1065
1046
  let result;
1066
1047
  let context = options?.in;
1067
1048
 
@@ -1106,7 +1087,7 @@ function max$1(dates, options) {
1106
1087
  * ])
1107
1088
  * //=> Wed Feb 11 1987 00:00:00
1108
1089
  */
1109
- function min$1(dates, options) {
1090
+ function min(dates, options) {
1110
1091
  let result;
1111
1092
  let context = options?.in;
1112
1093
 
@@ -4632,7 +4613,7 @@ class DateLib {
4632
4613
  * @returns The latest date.
4633
4614
  */
4634
4615
  this.max = (dates) => {
4635
- return this.overrides?.max ? this.overrides.max(dates) : max$1(dates);
4616
+ return this.overrides?.max ? this.overrides.max(dates) : max(dates);
4636
4617
  };
4637
4618
  /**
4638
4619
  * Returns the earliest date in the given array of dates.
@@ -4641,7 +4622,7 @@ class DateLib {
4641
4622
  * @returns The earliest date.
4642
4623
  */
4643
4624
  this.min = (dates) => {
4644
- return this.overrides?.min ? this.overrides.min(dates) : min$1(dates);
4625
+ return this.overrides?.min ? this.overrides.min(dates) : min(dates);
4645
4626
  };
4646
4627
  /**
4647
4628
  * Sets the month of the given date.
@@ -5262,7 +5243,7 @@ function PreviousMonthButton(props) {
5262
5243
  * @group Components
5263
5244
  * @see https://daypicker.dev/guides/custom-components
5264
5245
  */
5265
- function Root$1(props) {
5246
+ function Root(props) {
5266
5247
  const { rootRef, ...rest } = props;
5267
5248
  return React__default.createElement("div", { ...rest, ref: rootRef });
5268
5249
  }
@@ -5370,7 +5351,7 @@ const components = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty
5370
5351
  NextMonthButton,
5371
5352
  Option,
5372
5353
  PreviousMonthButton,
5373
- Root: Root$1,
5354
+ Root,
5374
5355
  Select,
5375
5356
  Week,
5376
5357
  WeekNumber,
@@ -8085,3858 +8066,6 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
8085
8066
  }
8086
8067
  Calendar.displayName = "Calendar";
8087
8068
 
8088
- // packages/react/use-callback-ref/src/use-callback-ref.tsx
8089
- function useCallbackRef$1(callback) {
8090
- const callbackRef = React.useRef(callback);
8091
- React.useEffect(() => {
8092
- callbackRef.current = callback;
8093
- });
8094
- return React.useMemo(() => (...args) => callbackRef.current?.(...args), []);
8095
- }
8096
-
8097
- // packages/react/use-escape-keydown/src/use-escape-keydown.tsx
8098
- function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
8099
- const onEscapeKeyDown = useCallbackRef$1(onEscapeKeyDownProp);
8100
- React.useEffect(() => {
8101
- const handleKeyDown = (event) => {
8102
- if (event.key === "Escape") {
8103
- onEscapeKeyDown(event);
8104
- }
8105
- };
8106
- ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
8107
- return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
8108
- }, [onEscapeKeyDown, ownerDocument]);
8109
- }
8110
-
8111
- var DISMISSABLE_LAYER_NAME = "DismissableLayer";
8112
- var CONTEXT_UPDATE = "dismissableLayer.update";
8113
- var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
8114
- var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
8115
- var originalBodyPointerEvents;
8116
- var DismissableLayerContext = React.createContext({
8117
- layers: /* @__PURE__ */ new Set(),
8118
- layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
8119
- branches: /* @__PURE__ */ new Set()
8120
- });
8121
- var DismissableLayer = React.forwardRef(
8122
- (props, forwardedRef) => {
8123
- const {
8124
- disableOutsidePointerEvents = false,
8125
- onEscapeKeyDown,
8126
- onPointerDownOutside,
8127
- onFocusOutside,
8128
- onInteractOutside,
8129
- onDismiss,
8130
- ...layerProps
8131
- } = props;
8132
- const context = React.useContext(DismissableLayerContext);
8133
- const [node, setNode] = React.useState(null);
8134
- const ownerDocument = node?.ownerDocument ?? globalThis?.document;
8135
- const [, force] = React.useState({});
8136
- const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
8137
- const layers = Array.from(context.layers);
8138
- const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
8139
- const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
8140
- const index = node ? layers.indexOf(node) : -1;
8141
- const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
8142
- const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
8143
- const pointerDownOutside = usePointerDownOutside((event) => {
8144
- const target = event.target;
8145
- const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
8146
- if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
8147
- onPointerDownOutside?.(event);
8148
- onInteractOutside?.(event);
8149
- if (!event.defaultPrevented) onDismiss?.();
8150
- }, ownerDocument);
8151
- const focusOutside = useFocusOutside((event) => {
8152
- const target = event.target;
8153
- const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
8154
- if (isFocusInBranch) return;
8155
- onFocusOutside?.(event);
8156
- onInteractOutside?.(event);
8157
- if (!event.defaultPrevented) onDismiss?.();
8158
- }, ownerDocument);
8159
- useEscapeKeydown((event) => {
8160
- const isHighestLayer = index === context.layers.size - 1;
8161
- if (!isHighestLayer) return;
8162
- onEscapeKeyDown?.(event);
8163
- if (!event.defaultPrevented && onDismiss) {
8164
- event.preventDefault();
8165
- onDismiss();
8166
- }
8167
- }, ownerDocument);
8168
- React.useEffect(() => {
8169
- if (!node) return;
8170
- if (disableOutsidePointerEvents) {
8171
- if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
8172
- originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
8173
- ownerDocument.body.style.pointerEvents = "none";
8174
- }
8175
- context.layersWithOutsidePointerEventsDisabled.add(node);
8176
- }
8177
- context.layers.add(node);
8178
- dispatchUpdate();
8179
- return () => {
8180
- if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
8181
- ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
8182
- }
8183
- };
8184
- }, [node, ownerDocument, disableOutsidePointerEvents, context]);
8185
- React.useEffect(() => {
8186
- return () => {
8187
- if (!node) return;
8188
- context.layers.delete(node);
8189
- context.layersWithOutsidePointerEventsDisabled.delete(node);
8190
- dispatchUpdate();
8191
- };
8192
- }, [node, context]);
8193
- React.useEffect(() => {
8194
- const handleUpdate = () => force({});
8195
- document.addEventListener(CONTEXT_UPDATE, handleUpdate);
8196
- return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
8197
- }, []);
8198
- return /* @__PURE__ */ jsx(
8199
- Primitive.div,
8200
- {
8201
- ...layerProps,
8202
- ref: composedRefs,
8203
- style: {
8204
- pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
8205
- ...props.style
8206
- },
8207
- onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
8208
- onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
8209
- onPointerDownCapture: composeEventHandlers(
8210
- props.onPointerDownCapture,
8211
- pointerDownOutside.onPointerDownCapture
8212
- )
8213
- }
8214
- );
8215
- }
8216
- );
8217
- DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
8218
- var BRANCH_NAME = "DismissableLayerBranch";
8219
- var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
8220
- const context = React.useContext(DismissableLayerContext);
8221
- const ref = React.useRef(null);
8222
- const composedRefs = useComposedRefs(forwardedRef, ref);
8223
- React.useEffect(() => {
8224
- const node = ref.current;
8225
- if (node) {
8226
- context.branches.add(node);
8227
- return () => {
8228
- context.branches.delete(node);
8229
- };
8230
- }
8231
- }, [context.branches]);
8232
- return /* @__PURE__ */ jsx(Primitive.div, { ...props, ref: composedRefs });
8233
- });
8234
- DismissableLayerBranch.displayName = BRANCH_NAME;
8235
- function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
8236
- const handlePointerDownOutside = useCallbackRef$1(onPointerDownOutside);
8237
- const isPointerInsideReactTreeRef = React.useRef(false);
8238
- const handleClickRef = React.useRef(() => {
8239
- });
8240
- React.useEffect(() => {
8241
- const handlePointerDown = (event) => {
8242
- if (event.target && !isPointerInsideReactTreeRef.current) {
8243
- let handleAndDispatchPointerDownOutsideEvent2 = function() {
8244
- handleAndDispatchCustomEvent(
8245
- POINTER_DOWN_OUTSIDE,
8246
- handlePointerDownOutside,
8247
- eventDetail,
8248
- { discrete: true }
8249
- );
8250
- };
8251
- const eventDetail = { originalEvent: event };
8252
- if (event.pointerType === "touch") {
8253
- ownerDocument.removeEventListener("click", handleClickRef.current);
8254
- handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
8255
- ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
8256
- } else {
8257
- handleAndDispatchPointerDownOutsideEvent2();
8258
- }
8259
- } else {
8260
- ownerDocument.removeEventListener("click", handleClickRef.current);
8261
- }
8262
- isPointerInsideReactTreeRef.current = false;
8263
- };
8264
- const timerId = window.setTimeout(() => {
8265
- ownerDocument.addEventListener("pointerdown", handlePointerDown);
8266
- }, 0);
8267
- return () => {
8268
- window.clearTimeout(timerId);
8269
- ownerDocument.removeEventListener("pointerdown", handlePointerDown);
8270
- ownerDocument.removeEventListener("click", handleClickRef.current);
8271
- };
8272
- }, [ownerDocument, handlePointerDownOutside]);
8273
- return {
8274
- // ensures we check React component tree (not just DOM tree)
8275
- onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
8276
- };
8277
- }
8278
- function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
8279
- const handleFocusOutside = useCallbackRef$1(onFocusOutside);
8280
- const isFocusInsideReactTreeRef = React.useRef(false);
8281
- React.useEffect(() => {
8282
- const handleFocus = (event) => {
8283
- if (event.target && !isFocusInsideReactTreeRef.current) {
8284
- const eventDetail = { originalEvent: event };
8285
- handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
8286
- discrete: false
8287
- });
8288
- }
8289
- };
8290
- ownerDocument.addEventListener("focusin", handleFocus);
8291
- return () => ownerDocument.removeEventListener("focusin", handleFocus);
8292
- }, [ownerDocument, handleFocusOutside]);
8293
- return {
8294
- onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
8295
- onBlurCapture: () => isFocusInsideReactTreeRef.current = false
8296
- };
8297
- }
8298
- function dispatchUpdate() {
8299
- const event = new CustomEvent(CONTEXT_UPDATE);
8300
- document.dispatchEvent(event);
8301
- }
8302
- function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
8303
- const target = detail.originalEvent.target;
8304
- const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
8305
- if (handler) target.addEventListener(name, handler, { once: true });
8306
- if (discrete) {
8307
- dispatchDiscreteCustomEvent(target, event);
8308
- } else {
8309
- target.dispatchEvent(event);
8310
- }
8311
- }
8312
-
8313
- var count$1 = 0;
8314
- function useFocusGuards() {
8315
- React.useEffect(() => {
8316
- const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
8317
- document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
8318
- document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
8319
- count$1++;
8320
- return () => {
8321
- if (count$1 === 1) {
8322
- document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
8323
- }
8324
- count$1--;
8325
- };
8326
- }, []);
8327
- }
8328
- function createFocusGuard() {
8329
- const element = document.createElement("span");
8330
- element.setAttribute("data-radix-focus-guard", "");
8331
- element.tabIndex = 0;
8332
- element.style.outline = "none";
8333
- element.style.opacity = "0";
8334
- element.style.position = "fixed";
8335
- element.style.pointerEvents = "none";
8336
- return element;
8337
- }
8338
-
8339
- var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
8340
- var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
8341
- var EVENT_OPTIONS = { bubbles: false, cancelable: true };
8342
- var FOCUS_SCOPE_NAME = "FocusScope";
8343
- var FocusScope = React.forwardRef((props, forwardedRef) => {
8344
- const {
8345
- loop = false,
8346
- trapped = false,
8347
- onMountAutoFocus: onMountAutoFocusProp,
8348
- onUnmountAutoFocus: onUnmountAutoFocusProp,
8349
- ...scopeProps
8350
- } = props;
8351
- const [container, setContainer] = React.useState(null);
8352
- const onMountAutoFocus = useCallbackRef$1(onMountAutoFocusProp);
8353
- const onUnmountAutoFocus = useCallbackRef$1(onUnmountAutoFocusProp);
8354
- const lastFocusedElementRef = React.useRef(null);
8355
- const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
8356
- const focusScope = React.useRef({
8357
- paused: false,
8358
- pause() {
8359
- this.paused = true;
8360
- },
8361
- resume() {
8362
- this.paused = false;
8363
- }
8364
- }).current;
8365
- React.useEffect(() => {
8366
- if (trapped) {
8367
- let handleFocusIn2 = function(event) {
8368
- if (focusScope.paused || !container) return;
8369
- const target = event.target;
8370
- if (container.contains(target)) {
8371
- lastFocusedElementRef.current = target;
8372
- } else {
8373
- focus(lastFocusedElementRef.current, { select: true });
8374
- }
8375
- }, handleFocusOut2 = function(event) {
8376
- if (focusScope.paused || !container) return;
8377
- const relatedTarget = event.relatedTarget;
8378
- if (relatedTarget === null) return;
8379
- if (!container.contains(relatedTarget)) {
8380
- focus(lastFocusedElementRef.current, { select: true });
8381
- }
8382
- }, handleMutations2 = function(mutations) {
8383
- const focusedElement = document.activeElement;
8384
- if (focusedElement !== document.body) return;
8385
- for (const mutation of mutations) {
8386
- if (mutation.removedNodes.length > 0) focus(container);
8387
- }
8388
- };
8389
- document.addEventListener("focusin", handleFocusIn2);
8390
- document.addEventListener("focusout", handleFocusOut2);
8391
- const mutationObserver = new MutationObserver(handleMutations2);
8392
- if (container) mutationObserver.observe(container, { childList: true, subtree: true });
8393
- return () => {
8394
- document.removeEventListener("focusin", handleFocusIn2);
8395
- document.removeEventListener("focusout", handleFocusOut2);
8396
- mutationObserver.disconnect();
8397
- };
8398
- }
8399
- }, [trapped, container, focusScope.paused]);
8400
- React.useEffect(() => {
8401
- if (container) {
8402
- focusScopesStack.add(focusScope);
8403
- const previouslyFocusedElement = document.activeElement;
8404
- const hasFocusedCandidate = container.contains(previouslyFocusedElement);
8405
- if (!hasFocusedCandidate) {
8406
- const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
8407
- container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
8408
- container.dispatchEvent(mountEvent);
8409
- if (!mountEvent.defaultPrevented) {
8410
- focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
8411
- if (document.activeElement === previouslyFocusedElement) {
8412
- focus(container);
8413
- }
8414
- }
8415
- }
8416
- return () => {
8417
- container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
8418
- setTimeout(() => {
8419
- const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
8420
- container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
8421
- container.dispatchEvent(unmountEvent);
8422
- if (!unmountEvent.defaultPrevented) {
8423
- focus(previouslyFocusedElement ?? document.body, { select: true });
8424
- }
8425
- container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
8426
- focusScopesStack.remove(focusScope);
8427
- }, 0);
8428
- };
8429
- }
8430
- }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
8431
- const handleKeyDown = React.useCallback(
8432
- (event) => {
8433
- if (!loop && !trapped) return;
8434
- if (focusScope.paused) return;
8435
- const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
8436
- const focusedElement = document.activeElement;
8437
- if (isTabKey && focusedElement) {
8438
- const container2 = event.currentTarget;
8439
- const [first, last] = getTabbableEdges(container2);
8440
- const hasTabbableElementsInside = first && last;
8441
- if (!hasTabbableElementsInside) {
8442
- if (focusedElement === container2) event.preventDefault();
8443
- } else {
8444
- if (!event.shiftKey && focusedElement === last) {
8445
- event.preventDefault();
8446
- if (loop) focus(first, { select: true });
8447
- } else if (event.shiftKey && focusedElement === first) {
8448
- event.preventDefault();
8449
- if (loop) focus(last, { select: true });
8450
- }
8451
- }
8452
- }
8453
- },
8454
- [loop, trapped, focusScope.paused]
8455
- );
8456
- return /* @__PURE__ */ jsx(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
8457
- });
8458
- FocusScope.displayName = FOCUS_SCOPE_NAME;
8459
- function focusFirst(candidates, { select = false } = {}) {
8460
- const previouslyFocusedElement = document.activeElement;
8461
- for (const candidate of candidates) {
8462
- focus(candidate, { select });
8463
- if (document.activeElement !== previouslyFocusedElement) return;
8464
- }
8465
- }
8466
- function getTabbableEdges(container) {
8467
- const candidates = getTabbableCandidates(container);
8468
- const first = findVisible(candidates, container);
8469
- const last = findVisible(candidates.reverse(), container);
8470
- return [first, last];
8471
- }
8472
- function getTabbableCandidates(container) {
8473
- const nodes = [];
8474
- const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
8475
- acceptNode: (node) => {
8476
- const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
8477
- if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
8478
- return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
8479
- }
8480
- });
8481
- while (walker.nextNode()) nodes.push(walker.currentNode);
8482
- return nodes;
8483
- }
8484
- function findVisible(elements, container) {
8485
- for (const element of elements) {
8486
- if (!isHidden(element, { upTo: container })) return element;
8487
- }
8488
- }
8489
- function isHidden(node, { upTo }) {
8490
- if (getComputedStyle(node).visibility === "hidden") return true;
8491
- while (node) {
8492
- if (upTo !== void 0 && node === upTo) return false;
8493
- if (getComputedStyle(node).display === "none") return true;
8494
- node = node.parentElement;
8495
- }
8496
- return false;
8497
- }
8498
- function isSelectableInput(element) {
8499
- return element instanceof HTMLInputElement && "select" in element;
8500
- }
8501
- function focus(element, { select = false } = {}) {
8502
- if (element && element.focus) {
8503
- const previouslyFocusedElement = document.activeElement;
8504
- element.focus({ preventScroll: true });
8505
- if (element !== previouslyFocusedElement && isSelectableInput(element) && select)
8506
- element.select();
8507
- }
8508
- }
8509
- var focusScopesStack = createFocusScopesStack();
8510
- function createFocusScopesStack() {
8511
- let stack = [];
8512
- return {
8513
- add(focusScope) {
8514
- const activeFocusScope = stack[0];
8515
- if (focusScope !== activeFocusScope) {
8516
- activeFocusScope?.pause();
8517
- }
8518
- stack = arrayRemove(stack, focusScope);
8519
- stack.unshift(focusScope);
8520
- },
8521
- remove(focusScope) {
8522
- stack = arrayRemove(stack, focusScope);
8523
- stack[0]?.resume();
8524
- }
8525
- };
8526
- }
8527
- function arrayRemove(array, item) {
8528
- const updatedArray = [...array];
8529
- const index = updatedArray.indexOf(item);
8530
- if (index !== -1) {
8531
- updatedArray.splice(index, 1);
8532
- }
8533
- return updatedArray;
8534
- }
8535
- function removeLinks(items) {
8536
- return items.filter((item) => item.tagName !== "A");
8537
- }
8538
-
8539
- // packages/react/id/src/id.tsx
8540
- var useReactId = React[" useId ".trim().toString()] || (() => void 0);
8541
- var count = 0;
8542
- function useId(deterministicId) {
8543
- const [id, setId] = React.useState(useReactId());
8544
- useLayoutEffect2(() => {
8545
- setId((reactId) => reactId ?? String(count++));
8546
- }, [deterministicId]);
8547
- return deterministicId || (id ? `radix-${id}` : "");
8548
- }
8549
-
8550
- /**
8551
- * Custom positioning reference element.
8552
- * @see https://floating-ui.com/docs/virtual-elements
8553
- */
8554
-
8555
- const sides = ['top', 'right', 'bottom', 'left'];
8556
- const min = Math.min;
8557
- const max = Math.max;
8558
- const round = Math.round;
8559
- const floor = Math.floor;
8560
- const createCoords = v => ({
8561
- x: v,
8562
- y: v
8563
- });
8564
- const oppositeSideMap = {
8565
- left: 'right',
8566
- right: 'left',
8567
- bottom: 'top',
8568
- top: 'bottom'
8569
- };
8570
- const oppositeAlignmentMap = {
8571
- start: 'end',
8572
- end: 'start'
8573
- };
8574
- function clamp(start, value, end) {
8575
- return max(start, min(value, end));
8576
- }
8577
- function evaluate(value, param) {
8578
- return typeof value === 'function' ? value(param) : value;
8579
- }
8580
- function getSide(placement) {
8581
- return placement.split('-')[0];
8582
- }
8583
- function getAlignment(placement) {
8584
- return placement.split('-')[1];
8585
- }
8586
- function getOppositeAxis(axis) {
8587
- return axis === 'x' ? 'y' : 'x';
8588
- }
8589
- function getAxisLength(axis) {
8590
- return axis === 'y' ? 'height' : 'width';
8591
- }
8592
- const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
8593
- function getSideAxis(placement) {
8594
- return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
8595
- }
8596
- function getAlignmentAxis(placement) {
8597
- return getOppositeAxis(getSideAxis(placement));
8598
- }
8599
- function getAlignmentSides(placement, rects, rtl) {
8600
- if (rtl === void 0) {
8601
- rtl = false;
8602
- }
8603
- const alignment = getAlignment(placement);
8604
- const alignmentAxis = getAlignmentAxis(placement);
8605
- const length = getAxisLength(alignmentAxis);
8606
- let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
8607
- if (rects.reference[length] > rects.floating[length]) {
8608
- mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
8609
- }
8610
- return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
8611
- }
8612
- function getExpandedPlacements(placement) {
8613
- const oppositePlacement = getOppositePlacement(placement);
8614
- return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
8615
- }
8616
- function getOppositeAlignmentPlacement(placement) {
8617
- return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
8618
- }
8619
- const lrPlacement = ['left', 'right'];
8620
- const rlPlacement = ['right', 'left'];
8621
- const tbPlacement = ['top', 'bottom'];
8622
- const btPlacement = ['bottom', 'top'];
8623
- function getSideList(side, isStart, rtl) {
8624
- switch (side) {
8625
- case 'top':
8626
- case 'bottom':
8627
- if (rtl) return isStart ? rlPlacement : lrPlacement;
8628
- return isStart ? lrPlacement : rlPlacement;
8629
- case 'left':
8630
- case 'right':
8631
- return isStart ? tbPlacement : btPlacement;
8632
- default:
8633
- return [];
8634
- }
8635
- }
8636
- function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
8637
- const alignment = getAlignment(placement);
8638
- let list = getSideList(getSide(placement), direction === 'start', rtl);
8639
- if (alignment) {
8640
- list = list.map(side => side + "-" + alignment);
8641
- if (flipAlignment) {
8642
- list = list.concat(list.map(getOppositeAlignmentPlacement));
8643
- }
8644
- }
8645
- return list;
8646
- }
8647
- function getOppositePlacement(placement) {
8648
- return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
8649
- }
8650
- function expandPaddingObject(padding) {
8651
- return {
8652
- top: 0,
8653
- right: 0,
8654
- bottom: 0,
8655
- left: 0,
8656
- ...padding
8657
- };
8658
- }
8659
- function getPaddingObject(padding) {
8660
- return typeof padding !== 'number' ? expandPaddingObject(padding) : {
8661
- top: padding,
8662
- right: padding,
8663
- bottom: padding,
8664
- left: padding
8665
- };
8666
- }
8667
- function rectToClientRect(rect) {
8668
- const {
8669
- x,
8670
- y,
8671
- width,
8672
- height
8673
- } = rect;
8674
- return {
8675
- width,
8676
- height,
8677
- top: y,
8678
- left: x,
8679
- right: x + width,
8680
- bottom: y + height,
8681
- x,
8682
- y
8683
- };
8684
- }
8685
-
8686
- function computeCoordsFromPlacement(_ref, placement, rtl) {
8687
- let {
8688
- reference,
8689
- floating
8690
- } = _ref;
8691
- const sideAxis = getSideAxis(placement);
8692
- const alignmentAxis = getAlignmentAxis(placement);
8693
- const alignLength = getAxisLength(alignmentAxis);
8694
- const side = getSide(placement);
8695
- const isVertical = sideAxis === 'y';
8696
- const commonX = reference.x + reference.width / 2 - floating.width / 2;
8697
- const commonY = reference.y + reference.height / 2 - floating.height / 2;
8698
- const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
8699
- let coords;
8700
- switch (side) {
8701
- case 'top':
8702
- coords = {
8703
- x: commonX,
8704
- y: reference.y - floating.height
8705
- };
8706
- break;
8707
- case 'bottom':
8708
- coords = {
8709
- x: commonX,
8710
- y: reference.y + reference.height
8711
- };
8712
- break;
8713
- case 'right':
8714
- coords = {
8715
- x: reference.x + reference.width,
8716
- y: commonY
8717
- };
8718
- break;
8719
- case 'left':
8720
- coords = {
8721
- x: reference.x - floating.width,
8722
- y: commonY
8723
- };
8724
- break;
8725
- default:
8726
- coords = {
8727
- x: reference.x,
8728
- y: reference.y
8729
- };
8730
- }
8731
- switch (getAlignment(placement)) {
8732
- case 'start':
8733
- coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
8734
- break;
8735
- case 'end':
8736
- coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
8737
- break;
8738
- }
8739
- return coords;
8740
- }
8741
-
8742
- /**
8743
- * Computes the `x` and `y` coordinates that will place the floating element
8744
- * next to a given reference element.
8745
- *
8746
- * This export does not have any `platform` interface logic. You will need to
8747
- * write one for the platform you are using Floating UI with.
8748
- */
8749
- const computePosition$1 = async (reference, floating, config) => {
8750
- const {
8751
- placement = 'bottom',
8752
- strategy = 'absolute',
8753
- middleware = [],
8754
- platform
8755
- } = config;
8756
- const validMiddleware = middleware.filter(Boolean);
8757
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
8758
- let rects = await platform.getElementRects({
8759
- reference,
8760
- floating,
8761
- strategy
8762
- });
8763
- let {
8764
- x,
8765
- y
8766
- } = computeCoordsFromPlacement(rects, placement, rtl);
8767
- let statefulPlacement = placement;
8768
- let middlewareData = {};
8769
- let resetCount = 0;
8770
- for (let i = 0; i < validMiddleware.length; i++) {
8771
- const {
8772
- name,
8773
- fn
8774
- } = validMiddleware[i];
8775
- const {
8776
- x: nextX,
8777
- y: nextY,
8778
- data,
8779
- reset
8780
- } = await fn({
8781
- x,
8782
- y,
8783
- initialPlacement: placement,
8784
- placement: statefulPlacement,
8785
- strategy,
8786
- middlewareData,
8787
- rects,
8788
- platform,
8789
- elements: {
8790
- reference,
8791
- floating
8792
- }
8793
- });
8794
- x = nextX != null ? nextX : x;
8795
- y = nextY != null ? nextY : y;
8796
- middlewareData = {
8797
- ...middlewareData,
8798
- [name]: {
8799
- ...middlewareData[name],
8800
- ...data
8801
- }
8802
- };
8803
- if (reset && resetCount <= 50) {
8804
- resetCount++;
8805
- if (typeof reset === 'object') {
8806
- if (reset.placement) {
8807
- statefulPlacement = reset.placement;
8808
- }
8809
- if (reset.rects) {
8810
- rects = reset.rects === true ? await platform.getElementRects({
8811
- reference,
8812
- floating,
8813
- strategy
8814
- }) : reset.rects;
8815
- }
8816
- ({
8817
- x,
8818
- y
8819
- } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
8820
- }
8821
- i = -1;
8822
- }
8823
- }
8824
- return {
8825
- x,
8826
- y,
8827
- placement: statefulPlacement,
8828
- strategy,
8829
- middlewareData
8830
- };
8831
- };
8832
-
8833
- /**
8834
- * Resolves with an object of overflow side offsets that determine how much the
8835
- * element is overflowing a given clipping boundary on each side.
8836
- * - positive = overflowing the boundary by that number of pixels
8837
- * - negative = how many pixels left before it will overflow
8838
- * - 0 = lies flush with the boundary
8839
- * @see https://floating-ui.com/docs/detectOverflow
8840
- */
8841
- async function detectOverflow(state, options) {
8842
- var _await$platform$isEle;
8843
- if (options === void 0) {
8844
- options = {};
8845
- }
8846
- const {
8847
- x,
8848
- y,
8849
- platform,
8850
- rects,
8851
- elements,
8852
- strategy
8853
- } = state;
8854
- const {
8855
- boundary = 'clippingAncestors',
8856
- rootBoundary = 'viewport',
8857
- elementContext = 'floating',
8858
- altBoundary = false,
8859
- padding = 0
8860
- } = evaluate(options, state);
8861
- const paddingObject = getPaddingObject(padding);
8862
- const altContext = elementContext === 'floating' ? 'reference' : 'floating';
8863
- const element = elements[altBoundary ? altContext : elementContext];
8864
- const clippingClientRect = rectToClientRect(await platform.getClippingRect({
8865
- element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
8866
- boundary,
8867
- rootBoundary,
8868
- strategy
8869
- }));
8870
- const rect = elementContext === 'floating' ? {
8871
- x,
8872
- y,
8873
- width: rects.floating.width,
8874
- height: rects.floating.height
8875
- } : rects.reference;
8876
- const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
8877
- const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
8878
- x: 1,
8879
- y: 1
8880
- } : {
8881
- x: 1,
8882
- y: 1
8883
- };
8884
- const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
8885
- elements,
8886
- rect,
8887
- offsetParent,
8888
- strategy
8889
- }) : rect);
8890
- return {
8891
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
8892
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
8893
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
8894
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
8895
- };
8896
- }
8897
-
8898
- /**
8899
- * Provides data to position an inner element of the floating element so that it
8900
- * appears centered to the reference element.
8901
- * @see https://floating-ui.com/docs/arrow
8902
- */
8903
- const arrow$3 = options => ({
8904
- name: 'arrow',
8905
- options,
8906
- async fn(state) {
8907
- const {
8908
- x,
8909
- y,
8910
- placement,
8911
- rects,
8912
- platform,
8913
- elements,
8914
- middlewareData
8915
- } = state;
8916
- // Since `element` is required, we don't Partial<> the type.
8917
- const {
8918
- element,
8919
- padding = 0
8920
- } = evaluate(options, state) || {};
8921
- if (element == null) {
8922
- return {};
8923
- }
8924
- const paddingObject = getPaddingObject(padding);
8925
- const coords = {
8926
- x,
8927
- y
8928
- };
8929
- const axis = getAlignmentAxis(placement);
8930
- const length = getAxisLength(axis);
8931
- const arrowDimensions = await platform.getDimensions(element);
8932
- const isYAxis = axis === 'y';
8933
- const minProp = isYAxis ? 'top' : 'left';
8934
- const maxProp = isYAxis ? 'bottom' : 'right';
8935
- const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
8936
- const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
8937
- const startDiff = coords[axis] - rects.reference[axis];
8938
- const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
8939
- let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
8940
-
8941
- // DOM platform can return `window` as the `offsetParent`.
8942
- if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
8943
- clientSize = elements.floating[clientProp] || rects.floating[length];
8944
- }
8945
- const centerToReference = endDiff / 2 - startDiff / 2;
8946
-
8947
- // If the padding is large enough that it causes the arrow to no longer be
8948
- // centered, modify the padding so that it is centered.
8949
- const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
8950
- const minPadding = min(paddingObject[minProp], largestPossiblePadding);
8951
- const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
8952
-
8953
- // Make sure the arrow doesn't overflow the floating element if the center
8954
- // point is outside the floating element's bounds.
8955
- const min$1 = minPadding;
8956
- const max = clientSize - arrowDimensions[length] - maxPadding;
8957
- const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
8958
- const offset = clamp(min$1, center, max);
8959
-
8960
- // If the reference is small enough that the arrow's padding causes it to
8961
- // to point to nothing for an aligned placement, adjust the offset of the
8962
- // floating element itself. To ensure `shift()` continues to take action,
8963
- // a single reset is performed when this is true.
8964
- const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
8965
- const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
8966
- return {
8967
- [axis]: coords[axis] + alignmentOffset,
8968
- data: {
8969
- [axis]: offset,
8970
- centerOffset: center - offset - alignmentOffset,
8971
- ...(shouldAddOffset && {
8972
- alignmentOffset
8973
- })
8974
- },
8975
- reset: shouldAddOffset
8976
- };
8977
- }
8978
- });
8979
-
8980
- /**
8981
- * Optimizes the visibility of the floating element by flipping the `placement`
8982
- * in order to keep it in view when the preferred placement(s) will overflow the
8983
- * clipping boundary. Alternative to `autoPlacement`.
8984
- * @see https://floating-ui.com/docs/flip
8985
- */
8986
- const flip$2 = function (options) {
8987
- if (options === void 0) {
8988
- options = {};
8989
- }
8990
- return {
8991
- name: 'flip',
8992
- options,
8993
- async fn(state) {
8994
- var _middlewareData$arrow, _middlewareData$flip;
8995
- const {
8996
- placement,
8997
- middlewareData,
8998
- rects,
8999
- initialPlacement,
9000
- platform,
9001
- elements
9002
- } = state;
9003
- const {
9004
- mainAxis: checkMainAxis = true,
9005
- crossAxis: checkCrossAxis = true,
9006
- fallbackPlacements: specifiedFallbackPlacements,
9007
- fallbackStrategy = 'bestFit',
9008
- fallbackAxisSideDirection = 'none',
9009
- flipAlignment = true,
9010
- ...detectOverflowOptions
9011
- } = evaluate(options, state);
9012
-
9013
- // If a reset by the arrow was caused due to an alignment offset being
9014
- // added, we should skip any logic now since `flip()` has already done its
9015
- // work.
9016
- // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
9017
- if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
9018
- return {};
9019
- }
9020
- const side = getSide(placement);
9021
- const initialSideAxis = getSideAxis(initialPlacement);
9022
- const isBasePlacement = getSide(initialPlacement) === initialPlacement;
9023
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
9024
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
9025
- const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
9026
- if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
9027
- fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
9028
- }
9029
- const placements = [initialPlacement, ...fallbackPlacements];
9030
- const overflow = await detectOverflow(state, detectOverflowOptions);
9031
- const overflows = [];
9032
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
9033
- if (checkMainAxis) {
9034
- overflows.push(overflow[side]);
9035
- }
9036
- if (checkCrossAxis) {
9037
- const sides = getAlignmentSides(placement, rects, rtl);
9038
- overflows.push(overflow[sides[0]], overflow[sides[1]]);
9039
- }
9040
- overflowsData = [...overflowsData, {
9041
- placement,
9042
- overflows
9043
- }];
9044
-
9045
- // One or more sides is overflowing.
9046
- if (!overflows.every(side => side <= 0)) {
9047
- var _middlewareData$flip2, _overflowsData$filter;
9048
- const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
9049
- const nextPlacement = placements[nextIndex];
9050
- if (nextPlacement) {
9051
- const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
9052
- if (!ignoreCrossAxisOverflow ||
9053
- // We leave the current main axis only if every placement on that axis
9054
- // overflows the main axis.
9055
- overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
9056
- // Try next placement and re-run the lifecycle.
9057
- return {
9058
- data: {
9059
- index: nextIndex,
9060
- overflows: overflowsData
9061
- },
9062
- reset: {
9063
- placement: nextPlacement
9064
- }
9065
- };
9066
- }
9067
- }
9068
-
9069
- // First, find the candidates that fit on the mainAxis side of overflow,
9070
- // then find the placement that fits the best on the main crossAxis side.
9071
- let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
9072
-
9073
- // Otherwise fallback.
9074
- if (!resetPlacement) {
9075
- switch (fallbackStrategy) {
9076
- case 'bestFit':
9077
- {
9078
- var _overflowsData$filter2;
9079
- const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
9080
- if (hasFallbackAxisSideDirection) {
9081
- const currentSideAxis = getSideAxis(d.placement);
9082
- return currentSideAxis === initialSideAxis ||
9083
- // Create a bias to the `y` side axis due to horizontal
9084
- // reading directions favoring greater width.
9085
- currentSideAxis === 'y';
9086
- }
9087
- return true;
9088
- }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
9089
- if (placement) {
9090
- resetPlacement = placement;
9091
- }
9092
- break;
9093
- }
9094
- case 'initialPlacement':
9095
- resetPlacement = initialPlacement;
9096
- break;
9097
- }
9098
- }
9099
- if (placement !== resetPlacement) {
9100
- return {
9101
- reset: {
9102
- placement: resetPlacement
9103
- }
9104
- };
9105
- }
9106
- }
9107
- return {};
9108
- }
9109
- };
9110
- };
9111
-
9112
- function getSideOffsets(overflow, rect) {
9113
- return {
9114
- top: overflow.top - rect.height,
9115
- right: overflow.right - rect.width,
9116
- bottom: overflow.bottom - rect.height,
9117
- left: overflow.left - rect.width
9118
- };
9119
- }
9120
- function isAnySideFullyClipped(overflow) {
9121
- return sides.some(side => overflow[side] >= 0);
9122
- }
9123
- /**
9124
- * Provides data to hide the floating element in applicable situations, such as
9125
- * when it is not in the same clipping context as the reference element.
9126
- * @see https://floating-ui.com/docs/hide
9127
- */
9128
- const hide$2 = function (options) {
9129
- if (options === void 0) {
9130
- options = {};
9131
- }
9132
- return {
9133
- name: 'hide',
9134
- options,
9135
- async fn(state) {
9136
- const {
9137
- rects
9138
- } = state;
9139
- const {
9140
- strategy = 'referenceHidden',
9141
- ...detectOverflowOptions
9142
- } = evaluate(options, state);
9143
- switch (strategy) {
9144
- case 'referenceHidden':
9145
- {
9146
- const overflow = await detectOverflow(state, {
9147
- ...detectOverflowOptions,
9148
- elementContext: 'reference'
9149
- });
9150
- const offsets = getSideOffsets(overflow, rects.reference);
9151
- return {
9152
- data: {
9153
- referenceHiddenOffsets: offsets,
9154
- referenceHidden: isAnySideFullyClipped(offsets)
9155
- }
9156
- };
9157
- }
9158
- case 'escaped':
9159
- {
9160
- const overflow = await detectOverflow(state, {
9161
- ...detectOverflowOptions,
9162
- altBoundary: true
9163
- });
9164
- const offsets = getSideOffsets(overflow, rects.floating);
9165
- return {
9166
- data: {
9167
- escapedOffsets: offsets,
9168
- escaped: isAnySideFullyClipped(offsets)
9169
- }
9170
- };
9171
- }
9172
- default:
9173
- {
9174
- return {};
9175
- }
9176
- }
9177
- }
9178
- };
9179
- };
9180
-
9181
- const originSides = /*#__PURE__*/new Set(['left', 'top']);
9182
-
9183
- // For type backwards-compatibility, the `OffsetOptions` type was also
9184
- // Derivable.
9185
-
9186
- async function convertValueToCoords(state, options) {
9187
- const {
9188
- placement,
9189
- platform,
9190
- elements
9191
- } = state;
9192
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
9193
- const side = getSide(placement);
9194
- const alignment = getAlignment(placement);
9195
- const isVertical = getSideAxis(placement) === 'y';
9196
- const mainAxisMulti = originSides.has(side) ? -1 : 1;
9197
- const crossAxisMulti = rtl && isVertical ? -1 : 1;
9198
- const rawValue = evaluate(options, state);
9199
-
9200
- // eslint-disable-next-line prefer-const
9201
- let {
9202
- mainAxis,
9203
- crossAxis,
9204
- alignmentAxis
9205
- } = typeof rawValue === 'number' ? {
9206
- mainAxis: rawValue,
9207
- crossAxis: 0,
9208
- alignmentAxis: null
9209
- } : {
9210
- mainAxis: rawValue.mainAxis || 0,
9211
- crossAxis: rawValue.crossAxis || 0,
9212
- alignmentAxis: rawValue.alignmentAxis
9213
- };
9214
- if (alignment && typeof alignmentAxis === 'number') {
9215
- crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
9216
- }
9217
- return isVertical ? {
9218
- x: crossAxis * crossAxisMulti,
9219
- y: mainAxis * mainAxisMulti
9220
- } : {
9221
- x: mainAxis * mainAxisMulti,
9222
- y: crossAxis * crossAxisMulti
9223
- };
9224
- }
9225
-
9226
- /**
9227
- * Modifies the placement by translating the floating element along the
9228
- * specified axes.
9229
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
9230
- * object may be passed.
9231
- * @see https://floating-ui.com/docs/offset
9232
- */
9233
- const offset$2 = function (options) {
9234
- if (options === void 0) {
9235
- options = 0;
9236
- }
9237
- return {
9238
- name: 'offset',
9239
- options,
9240
- async fn(state) {
9241
- var _middlewareData$offse, _middlewareData$arrow;
9242
- const {
9243
- x,
9244
- y,
9245
- placement,
9246
- middlewareData
9247
- } = state;
9248
- const diffCoords = await convertValueToCoords(state, options);
9249
-
9250
- // If the placement is the same and the arrow caused an alignment offset
9251
- // then we don't need to change the positioning coordinates.
9252
- if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
9253
- return {};
9254
- }
9255
- return {
9256
- x: x + diffCoords.x,
9257
- y: y + diffCoords.y,
9258
- data: {
9259
- ...diffCoords,
9260
- placement
9261
- }
9262
- };
9263
- }
9264
- };
9265
- };
9266
-
9267
- /**
9268
- * Optimizes the visibility of the floating element by shifting it in order to
9269
- * keep it in view when it will overflow the clipping boundary.
9270
- * @see https://floating-ui.com/docs/shift
9271
- */
9272
- const shift$2 = function (options) {
9273
- if (options === void 0) {
9274
- options = {};
9275
- }
9276
- return {
9277
- name: 'shift',
9278
- options,
9279
- async fn(state) {
9280
- const {
9281
- x,
9282
- y,
9283
- placement
9284
- } = state;
9285
- const {
9286
- mainAxis: checkMainAxis = true,
9287
- crossAxis: checkCrossAxis = false,
9288
- limiter = {
9289
- fn: _ref => {
9290
- let {
9291
- x,
9292
- y
9293
- } = _ref;
9294
- return {
9295
- x,
9296
- y
9297
- };
9298
- }
9299
- },
9300
- ...detectOverflowOptions
9301
- } = evaluate(options, state);
9302
- const coords = {
9303
- x,
9304
- y
9305
- };
9306
- const overflow = await detectOverflow(state, detectOverflowOptions);
9307
- const crossAxis = getSideAxis(getSide(placement));
9308
- const mainAxis = getOppositeAxis(crossAxis);
9309
- let mainAxisCoord = coords[mainAxis];
9310
- let crossAxisCoord = coords[crossAxis];
9311
- if (checkMainAxis) {
9312
- const minSide = mainAxis === 'y' ? 'top' : 'left';
9313
- const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
9314
- const min = mainAxisCoord + overflow[minSide];
9315
- const max = mainAxisCoord - overflow[maxSide];
9316
- mainAxisCoord = clamp(min, mainAxisCoord, max);
9317
- }
9318
- if (checkCrossAxis) {
9319
- const minSide = crossAxis === 'y' ? 'top' : 'left';
9320
- const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
9321
- const min = crossAxisCoord + overflow[minSide];
9322
- const max = crossAxisCoord - overflow[maxSide];
9323
- crossAxisCoord = clamp(min, crossAxisCoord, max);
9324
- }
9325
- const limitedCoords = limiter.fn({
9326
- ...state,
9327
- [mainAxis]: mainAxisCoord,
9328
- [crossAxis]: crossAxisCoord
9329
- });
9330
- return {
9331
- ...limitedCoords,
9332
- data: {
9333
- x: limitedCoords.x - x,
9334
- y: limitedCoords.y - y,
9335
- enabled: {
9336
- [mainAxis]: checkMainAxis,
9337
- [crossAxis]: checkCrossAxis
9338
- }
9339
- }
9340
- };
9341
- }
9342
- };
9343
- };
9344
- /**
9345
- * Built-in `limiter` that will stop `shift()` at a certain point.
9346
- */
9347
- const limitShift$2 = function (options) {
9348
- if (options === void 0) {
9349
- options = {};
9350
- }
9351
- return {
9352
- options,
9353
- fn(state) {
9354
- const {
9355
- x,
9356
- y,
9357
- placement,
9358
- rects,
9359
- middlewareData
9360
- } = state;
9361
- const {
9362
- offset = 0,
9363
- mainAxis: checkMainAxis = true,
9364
- crossAxis: checkCrossAxis = true
9365
- } = evaluate(options, state);
9366
- const coords = {
9367
- x,
9368
- y
9369
- };
9370
- const crossAxis = getSideAxis(placement);
9371
- const mainAxis = getOppositeAxis(crossAxis);
9372
- let mainAxisCoord = coords[mainAxis];
9373
- let crossAxisCoord = coords[crossAxis];
9374
- const rawOffset = evaluate(offset, state);
9375
- const computedOffset = typeof rawOffset === 'number' ? {
9376
- mainAxis: rawOffset,
9377
- crossAxis: 0
9378
- } : {
9379
- mainAxis: 0,
9380
- crossAxis: 0,
9381
- ...rawOffset
9382
- };
9383
- if (checkMainAxis) {
9384
- const len = mainAxis === 'y' ? 'height' : 'width';
9385
- const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
9386
- const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
9387
- if (mainAxisCoord < limitMin) {
9388
- mainAxisCoord = limitMin;
9389
- } else if (mainAxisCoord > limitMax) {
9390
- mainAxisCoord = limitMax;
9391
- }
9392
- }
9393
- if (checkCrossAxis) {
9394
- var _middlewareData$offse, _middlewareData$offse2;
9395
- const len = mainAxis === 'y' ? 'width' : 'height';
9396
- const isOriginSide = originSides.has(getSide(placement));
9397
- const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
9398
- const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
9399
- if (crossAxisCoord < limitMin) {
9400
- crossAxisCoord = limitMin;
9401
- } else if (crossAxisCoord > limitMax) {
9402
- crossAxisCoord = limitMax;
9403
- }
9404
- }
9405
- return {
9406
- [mainAxis]: mainAxisCoord,
9407
- [crossAxis]: crossAxisCoord
9408
- };
9409
- }
9410
- };
9411
- };
9412
-
9413
- /**
9414
- * Provides data that allows you to change the size of the floating element —
9415
- * for instance, prevent it from overflowing the clipping boundary or match the
9416
- * width of the reference element.
9417
- * @see https://floating-ui.com/docs/size
9418
- */
9419
- const size$2 = function (options) {
9420
- if (options === void 0) {
9421
- options = {};
9422
- }
9423
- return {
9424
- name: 'size',
9425
- options,
9426
- async fn(state) {
9427
- var _state$middlewareData, _state$middlewareData2;
9428
- const {
9429
- placement,
9430
- rects,
9431
- platform,
9432
- elements
9433
- } = state;
9434
- const {
9435
- apply = () => {},
9436
- ...detectOverflowOptions
9437
- } = evaluate(options, state);
9438
- const overflow = await detectOverflow(state, detectOverflowOptions);
9439
- const side = getSide(placement);
9440
- const alignment = getAlignment(placement);
9441
- const isYAxis = getSideAxis(placement) === 'y';
9442
- const {
9443
- width,
9444
- height
9445
- } = rects.floating;
9446
- let heightSide;
9447
- let widthSide;
9448
- if (side === 'top' || side === 'bottom') {
9449
- heightSide = side;
9450
- widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
9451
- } else {
9452
- widthSide = side;
9453
- heightSide = alignment === 'end' ? 'top' : 'bottom';
9454
- }
9455
- const maximumClippingHeight = height - overflow.top - overflow.bottom;
9456
- const maximumClippingWidth = width - overflow.left - overflow.right;
9457
- const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
9458
- const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
9459
- const noShift = !state.middlewareData.shift;
9460
- let availableHeight = overflowAvailableHeight;
9461
- let availableWidth = overflowAvailableWidth;
9462
- if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
9463
- availableWidth = maximumClippingWidth;
9464
- }
9465
- if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
9466
- availableHeight = maximumClippingHeight;
9467
- }
9468
- if (noShift && !alignment) {
9469
- const xMin = max(overflow.left, 0);
9470
- const xMax = max(overflow.right, 0);
9471
- const yMin = max(overflow.top, 0);
9472
- const yMax = max(overflow.bottom, 0);
9473
- if (isYAxis) {
9474
- availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
9475
- } else {
9476
- availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
9477
- }
9478
- }
9479
- await apply({
9480
- ...state,
9481
- availableWidth,
9482
- availableHeight
9483
- });
9484
- const nextDimensions = await platform.getDimensions(elements.floating);
9485
- if (width !== nextDimensions.width || height !== nextDimensions.height) {
9486
- return {
9487
- reset: {
9488
- rects: true
9489
- }
9490
- };
9491
- }
9492
- return {};
9493
- }
9494
- };
9495
- };
9496
-
9497
- function hasWindow() {
9498
- return typeof window !== 'undefined';
9499
- }
9500
- function getNodeName(node) {
9501
- if (isNode(node)) {
9502
- return (node.nodeName || '').toLowerCase();
9503
- }
9504
- // Mocked nodes in testing environments may not be instances of Node. By
9505
- // returning `#document` an infinite loop won't occur.
9506
- // https://github.com/floating-ui/floating-ui/issues/2317
9507
- return '#document';
9508
- }
9509
- function getWindow(node) {
9510
- var _node$ownerDocument;
9511
- return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
9512
- }
9513
- function getDocumentElement(node) {
9514
- var _ref;
9515
- return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
9516
- }
9517
- function isNode(value) {
9518
- if (!hasWindow()) {
9519
- return false;
9520
- }
9521
- return value instanceof Node || value instanceof getWindow(value).Node;
9522
- }
9523
- function isElement(value) {
9524
- if (!hasWindow()) {
9525
- return false;
9526
- }
9527
- return value instanceof Element || value instanceof getWindow(value).Element;
9528
- }
9529
- function isHTMLElement(value) {
9530
- if (!hasWindow()) {
9531
- return false;
9532
- }
9533
- return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
9534
- }
9535
- function isShadowRoot(value) {
9536
- if (!hasWindow() || typeof ShadowRoot === 'undefined') {
9537
- return false;
9538
- }
9539
- return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
9540
- }
9541
- const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
9542
- function isOverflowElement(element) {
9543
- const {
9544
- overflow,
9545
- overflowX,
9546
- overflowY,
9547
- display
9548
- } = getComputedStyle$1(element);
9549
- return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
9550
- }
9551
- const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
9552
- function isTableElement(element) {
9553
- return tableElements.has(getNodeName(element));
9554
- }
9555
- const topLayerSelectors = [':popover-open', ':modal'];
9556
- function isTopLayer(element) {
9557
- return topLayerSelectors.some(selector => {
9558
- try {
9559
- return element.matches(selector);
9560
- } catch (_e) {
9561
- return false;
9562
- }
9563
- });
9564
- }
9565
- const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
9566
- const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
9567
- const containValues = ['paint', 'layout', 'strict', 'content'];
9568
- function isContainingBlock(elementOrCss) {
9569
- const webkit = isWebKit();
9570
- const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
9571
-
9572
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
9573
- // https://drafts.csswg.org/css-transforms-2/#individual-transforms
9574
- return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
9575
- }
9576
- function getContainingBlock(element) {
9577
- let currentNode = getParentNode(element);
9578
- while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
9579
- if (isContainingBlock(currentNode)) {
9580
- return currentNode;
9581
- } else if (isTopLayer(currentNode)) {
9582
- return null;
9583
- }
9584
- currentNode = getParentNode(currentNode);
9585
- }
9586
- return null;
9587
- }
9588
- function isWebKit() {
9589
- if (typeof CSS === 'undefined' || !CSS.supports) return false;
9590
- return CSS.supports('-webkit-backdrop-filter', 'none');
9591
- }
9592
- const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
9593
- function isLastTraversableNode(node) {
9594
- return lastTraversableNodeNames.has(getNodeName(node));
9595
- }
9596
- function getComputedStyle$1(element) {
9597
- return getWindow(element).getComputedStyle(element);
9598
- }
9599
- function getNodeScroll(element) {
9600
- if (isElement(element)) {
9601
- return {
9602
- scrollLeft: element.scrollLeft,
9603
- scrollTop: element.scrollTop
9604
- };
9605
- }
9606
- return {
9607
- scrollLeft: element.scrollX,
9608
- scrollTop: element.scrollY
9609
- };
9610
- }
9611
- function getParentNode(node) {
9612
- if (getNodeName(node) === 'html') {
9613
- return node;
9614
- }
9615
- const result =
9616
- // Step into the shadow DOM of the parent of a slotted node.
9617
- node.assignedSlot ||
9618
- // DOM Element detected.
9619
- node.parentNode ||
9620
- // ShadowRoot detected.
9621
- isShadowRoot(node) && node.host ||
9622
- // Fallback.
9623
- getDocumentElement(node);
9624
- return isShadowRoot(result) ? result.host : result;
9625
- }
9626
- function getNearestOverflowAncestor(node) {
9627
- const parentNode = getParentNode(node);
9628
- if (isLastTraversableNode(parentNode)) {
9629
- return node.ownerDocument ? node.ownerDocument.body : node.body;
9630
- }
9631
- if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
9632
- return parentNode;
9633
- }
9634
- return getNearestOverflowAncestor(parentNode);
9635
- }
9636
- function getOverflowAncestors(node, list, traverseIframes) {
9637
- var _node$ownerDocument2;
9638
- if (list === void 0) {
9639
- list = [];
9640
- }
9641
- if (traverseIframes === void 0) {
9642
- traverseIframes = true;
9643
- }
9644
- const scrollableAncestor = getNearestOverflowAncestor(node);
9645
- const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
9646
- const win = getWindow(scrollableAncestor);
9647
- if (isBody) {
9648
- const frameElement = getFrameElement(win);
9649
- return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
9650
- }
9651
- return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
9652
- }
9653
- function getFrameElement(win) {
9654
- return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
9655
- }
9656
-
9657
- function getCssDimensions(element) {
9658
- const css = getComputedStyle$1(element);
9659
- // In testing environments, the `width` and `height` properties are empty
9660
- // strings for SVG elements, returning NaN. Fallback to `0` in this case.
9661
- let width = parseFloat(css.width) || 0;
9662
- let height = parseFloat(css.height) || 0;
9663
- const hasOffset = isHTMLElement(element);
9664
- const offsetWidth = hasOffset ? element.offsetWidth : width;
9665
- const offsetHeight = hasOffset ? element.offsetHeight : height;
9666
- const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
9667
- if (shouldFallback) {
9668
- width = offsetWidth;
9669
- height = offsetHeight;
9670
- }
9671
- return {
9672
- width,
9673
- height,
9674
- $: shouldFallback
9675
- };
9676
- }
9677
-
9678
- function unwrapElement(element) {
9679
- return !isElement(element) ? element.contextElement : element;
9680
- }
9681
-
9682
- function getScale(element) {
9683
- const domElement = unwrapElement(element);
9684
- if (!isHTMLElement(domElement)) {
9685
- return createCoords(1);
9686
- }
9687
- const rect = domElement.getBoundingClientRect();
9688
- const {
9689
- width,
9690
- height,
9691
- $
9692
- } = getCssDimensions(domElement);
9693
- let x = ($ ? round(rect.width) : rect.width) / width;
9694
- let y = ($ ? round(rect.height) : rect.height) / height;
9695
-
9696
- // 0, NaN, or Infinity should always fallback to 1.
9697
-
9698
- if (!x || !Number.isFinite(x)) {
9699
- x = 1;
9700
- }
9701
- if (!y || !Number.isFinite(y)) {
9702
- y = 1;
9703
- }
9704
- return {
9705
- x,
9706
- y
9707
- };
9708
- }
9709
-
9710
- const noOffsets = /*#__PURE__*/createCoords(0);
9711
- function getVisualOffsets(element) {
9712
- const win = getWindow(element);
9713
- if (!isWebKit() || !win.visualViewport) {
9714
- return noOffsets;
9715
- }
9716
- return {
9717
- x: win.visualViewport.offsetLeft,
9718
- y: win.visualViewport.offsetTop
9719
- };
9720
- }
9721
- function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
9722
- if (isFixed === void 0) {
9723
- isFixed = false;
9724
- }
9725
- if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
9726
- return false;
9727
- }
9728
- return isFixed;
9729
- }
9730
-
9731
- function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
9732
- if (includeScale === void 0) {
9733
- includeScale = false;
9734
- }
9735
- if (isFixedStrategy === void 0) {
9736
- isFixedStrategy = false;
9737
- }
9738
- const clientRect = element.getBoundingClientRect();
9739
- const domElement = unwrapElement(element);
9740
- let scale = createCoords(1);
9741
- if (includeScale) {
9742
- if (offsetParent) {
9743
- if (isElement(offsetParent)) {
9744
- scale = getScale(offsetParent);
9745
- }
9746
- } else {
9747
- scale = getScale(element);
9748
- }
9749
- }
9750
- const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
9751
- let x = (clientRect.left + visualOffsets.x) / scale.x;
9752
- let y = (clientRect.top + visualOffsets.y) / scale.y;
9753
- let width = clientRect.width / scale.x;
9754
- let height = clientRect.height / scale.y;
9755
- if (domElement) {
9756
- const win = getWindow(domElement);
9757
- const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
9758
- let currentWin = win;
9759
- let currentIFrame = getFrameElement(currentWin);
9760
- while (currentIFrame && offsetParent && offsetWin !== currentWin) {
9761
- const iframeScale = getScale(currentIFrame);
9762
- const iframeRect = currentIFrame.getBoundingClientRect();
9763
- const css = getComputedStyle$1(currentIFrame);
9764
- const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
9765
- const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
9766
- x *= iframeScale.x;
9767
- y *= iframeScale.y;
9768
- width *= iframeScale.x;
9769
- height *= iframeScale.y;
9770
- x += left;
9771
- y += top;
9772
- currentWin = getWindow(currentIFrame);
9773
- currentIFrame = getFrameElement(currentWin);
9774
- }
9775
- }
9776
- return rectToClientRect({
9777
- width,
9778
- height,
9779
- x,
9780
- y
9781
- });
9782
- }
9783
-
9784
- // If <html> has a CSS width greater than the viewport, then this will be
9785
- // incorrect for RTL.
9786
- function getWindowScrollBarX(element, rect) {
9787
- const leftScroll = getNodeScroll(element).scrollLeft;
9788
- if (!rect) {
9789
- return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
9790
- }
9791
- return rect.left + leftScroll;
9792
- }
9793
-
9794
- function getHTMLOffset(documentElement, scroll) {
9795
- const htmlRect = documentElement.getBoundingClientRect();
9796
- const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
9797
- const y = htmlRect.top + scroll.scrollTop;
9798
- return {
9799
- x,
9800
- y
9801
- };
9802
- }
9803
-
9804
- function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
9805
- let {
9806
- elements,
9807
- rect,
9808
- offsetParent,
9809
- strategy
9810
- } = _ref;
9811
- const isFixed = strategy === 'fixed';
9812
- const documentElement = getDocumentElement(offsetParent);
9813
- const topLayer = elements ? isTopLayer(elements.floating) : false;
9814
- if (offsetParent === documentElement || topLayer && isFixed) {
9815
- return rect;
9816
- }
9817
- let scroll = {
9818
- scrollLeft: 0,
9819
- scrollTop: 0
9820
- };
9821
- let scale = createCoords(1);
9822
- const offsets = createCoords(0);
9823
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
9824
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
9825
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
9826
- scroll = getNodeScroll(offsetParent);
9827
- }
9828
- if (isHTMLElement(offsetParent)) {
9829
- const offsetRect = getBoundingClientRect(offsetParent);
9830
- scale = getScale(offsetParent);
9831
- offsets.x = offsetRect.x + offsetParent.clientLeft;
9832
- offsets.y = offsetRect.y + offsetParent.clientTop;
9833
- }
9834
- }
9835
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
9836
- return {
9837
- width: rect.width * scale.x,
9838
- height: rect.height * scale.y,
9839
- x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
9840
- y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
9841
- };
9842
- }
9843
-
9844
- function getClientRects(element) {
9845
- return Array.from(element.getClientRects());
9846
- }
9847
-
9848
- // Gets the entire size of the scrollable document area, even extending outside
9849
- // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
9850
- function getDocumentRect(element) {
9851
- const html = getDocumentElement(element);
9852
- const scroll = getNodeScroll(element);
9853
- const body = element.ownerDocument.body;
9854
- const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
9855
- const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
9856
- let x = -scroll.scrollLeft + getWindowScrollBarX(element);
9857
- const y = -scroll.scrollTop;
9858
- if (getComputedStyle$1(body).direction === 'rtl') {
9859
- x += max(html.clientWidth, body.clientWidth) - width;
9860
- }
9861
- return {
9862
- width,
9863
- height,
9864
- x,
9865
- y
9866
- };
9867
- }
9868
-
9869
- // Safety check: ensure the scrollbar space is reasonable in case this
9870
- // calculation is affected by unusual styles.
9871
- // Most scrollbars leave 15-18px of space.
9872
- const SCROLLBAR_MAX = 25;
9873
- function getViewportRect(element, strategy) {
9874
- const win = getWindow(element);
9875
- const html = getDocumentElement(element);
9876
- const visualViewport = win.visualViewport;
9877
- let width = html.clientWidth;
9878
- let height = html.clientHeight;
9879
- let x = 0;
9880
- let y = 0;
9881
- if (visualViewport) {
9882
- width = visualViewport.width;
9883
- height = visualViewport.height;
9884
- const visualViewportBased = isWebKit();
9885
- if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
9886
- x = visualViewport.offsetLeft;
9887
- y = visualViewport.offsetTop;
9888
- }
9889
- }
9890
- const windowScrollbarX = getWindowScrollBarX(html);
9891
- // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
9892
- // visual width of the <html> but this is not considered in the size
9893
- // of `html.clientWidth`.
9894
- if (windowScrollbarX <= 0) {
9895
- const doc = html.ownerDocument;
9896
- const body = doc.body;
9897
- const bodyStyles = getComputedStyle(body);
9898
- const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
9899
- const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
9900
- if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
9901
- width -= clippingStableScrollbarWidth;
9902
- }
9903
- } else if (windowScrollbarX <= SCROLLBAR_MAX) {
9904
- // If the <body> scrollbar is on the left, the width needs to be extended
9905
- // by the scrollbar amount so there isn't extra space on the right.
9906
- width += windowScrollbarX;
9907
- }
9908
- return {
9909
- width,
9910
- height,
9911
- x,
9912
- y
9913
- };
9914
- }
9915
-
9916
- const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
9917
- // Returns the inner client rect, subtracting scrollbars if present.
9918
- function getInnerBoundingClientRect(element, strategy) {
9919
- const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
9920
- const top = clientRect.top + element.clientTop;
9921
- const left = clientRect.left + element.clientLeft;
9922
- const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
9923
- const width = element.clientWidth * scale.x;
9924
- const height = element.clientHeight * scale.y;
9925
- const x = left * scale.x;
9926
- const y = top * scale.y;
9927
- return {
9928
- width,
9929
- height,
9930
- x,
9931
- y
9932
- };
9933
- }
9934
- function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
9935
- let rect;
9936
- if (clippingAncestor === 'viewport') {
9937
- rect = getViewportRect(element, strategy);
9938
- } else if (clippingAncestor === 'document') {
9939
- rect = getDocumentRect(getDocumentElement(element));
9940
- } else if (isElement(clippingAncestor)) {
9941
- rect = getInnerBoundingClientRect(clippingAncestor, strategy);
9942
- } else {
9943
- const visualOffsets = getVisualOffsets(element);
9944
- rect = {
9945
- x: clippingAncestor.x - visualOffsets.x,
9946
- y: clippingAncestor.y - visualOffsets.y,
9947
- width: clippingAncestor.width,
9948
- height: clippingAncestor.height
9949
- };
9950
- }
9951
- return rectToClientRect(rect);
9952
- }
9953
- function hasFixedPositionAncestor(element, stopNode) {
9954
- const parentNode = getParentNode(element);
9955
- if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
9956
- return false;
9957
- }
9958
- return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
9959
- }
9960
-
9961
- // A "clipping ancestor" is an `overflow` element with the characteristic of
9962
- // clipping (or hiding) child elements. This returns all clipping ancestors
9963
- // of the given element up the tree.
9964
- function getClippingElementAncestors(element, cache) {
9965
- const cachedResult = cache.get(element);
9966
- if (cachedResult) {
9967
- return cachedResult;
9968
- }
9969
- let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
9970
- let currentContainingBlockComputedStyle = null;
9971
- const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
9972
- let currentNode = elementIsFixed ? getParentNode(element) : element;
9973
-
9974
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
9975
- while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
9976
- const computedStyle = getComputedStyle$1(currentNode);
9977
- const currentNodeIsContaining = isContainingBlock(currentNode);
9978
- if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
9979
- currentContainingBlockComputedStyle = null;
9980
- }
9981
- const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
9982
- if (shouldDropCurrentNode) {
9983
- // Drop non-containing blocks.
9984
- result = result.filter(ancestor => ancestor !== currentNode);
9985
- } else {
9986
- // Record last containing block for next iteration.
9987
- currentContainingBlockComputedStyle = computedStyle;
9988
- }
9989
- currentNode = getParentNode(currentNode);
9990
- }
9991
- cache.set(element, result);
9992
- return result;
9993
- }
9994
-
9995
- // Gets the maximum area that the element is visible in due to any number of
9996
- // clipping ancestors.
9997
- function getClippingRect(_ref) {
9998
- let {
9999
- element,
10000
- boundary,
10001
- rootBoundary,
10002
- strategy
10003
- } = _ref;
10004
- const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
10005
- const clippingAncestors = [...elementClippingAncestors, rootBoundary];
10006
- const firstClippingAncestor = clippingAncestors[0];
10007
- const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
10008
- const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
10009
- accRect.top = max(rect.top, accRect.top);
10010
- accRect.right = min(rect.right, accRect.right);
10011
- accRect.bottom = min(rect.bottom, accRect.bottom);
10012
- accRect.left = max(rect.left, accRect.left);
10013
- return accRect;
10014
- }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
10015
- return {
10016
- width: clippingRect.right - clippingRect.left,
10017
- height: clippingRect.bottom - clippingRect.top,
10018
- x: clippingRect.left,
10019
- y: clippingRect.top
10020
- };
10021
- }
10022
-
10023
- function getDimensions(element) {
10024
- const {
10025
- width,
10026
- height
10027
- } = getCssDimensions(element);
10028
- return {
10029
- width,
10030
- height
10031
- };
10032
- }
10033
-
10034
- function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
10035
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
10036
- const documentElement = getDocumentElement(offsetParent);
10037
- const isFixed = strategy === 'fixed';
10038
- const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
10039
- let scroll = {
10040
- scrollLeft: 0,
10041
- scrollTop: 0
10042
- };
10043
- const offsets = createCoords(0);
10044
-
10045
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
10046
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
10047
- function setLeftRTLScrollbarOffset() {
10048
- offsets.x = getWindowScrollBarX(documentElement);
10049
- }
10050
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
10051
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
10052
- scroll = getNodeScroll(offsetParent);
10053
- }
10054
- if (isOffsetParentAnElement) {
10055
- const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
10056
- offsets.x = offsetRect.x + offsetParent.clientLeft;
10057
- offsets.y = offsetRect.y + offsetParent.clientTop;
10058
- } else if (documentElement) {
10059
- setLeftRTLScrollbarOffset();
10060
- }
10061
- }
10062
- if (isFixed && !isOffsetParentAnElement && documentElement) {
10063
- setLeftRTLScrollbarOffset();
10064
- }
10065
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
10066
- const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
10067
- const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
10068
- return {
10069
- x,
10070
- y,
10071
- width: rect.width,
10072
- height: rect.height
10073
- };
10074
- }
10075
-
10076
- function isStaticPositioned(element) {
10077
- return getComputedStyle$1(element).position === 'static';
10078
- }
10079
-
10080
- function getTrueOffsetParent(element, polyfill) {
10081
- if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
10082
- return null;
10083
- }
10084
- if (polyfill) {
10085
- return polyfill(element);
10086
- }
10087
- let rawOffsetParent = element.offsetParent;
10088
-
10089
- // Firefox returns the <html> element as the offsetParent if it's non-static,
10090
- // while Chrome and Safari return the <body> element. The <body> element must
10091
- // be used to perform the correct calculations even if the <html> element is
10092
- // non-static.
10093
- if (getDocumentElement(element) === rawOffsetParent) {
10094
- rawOffsetParent = rawOffsetParent.ownerDocument.body;
10095
- }
10096
- return rawOffsetParent;
10097
- }
10098
-
10099
- // Gets the closest ancestor positioned element. Handles some edge cases,
10100
- // such as table ancestors and cross browser bugs.
10101
- function getOffsetParent(element, polyfill) {
10102
- const win = getWindow(element);
10103
- if (isTopLayer(element)) {
10104
- return win;
10105
- }
10106
- if (!isHTMLElement(element)) {
10107
- let svgOffsetParent = getParentNode(element);
10108
- while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
10109
- if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
10110
- return svgOffsetParent;
10111
- }
10112
- svgOffsetParent = getParentNode(svgOffsetParent);
10113
- }
10114
- return win;
10115
- }
10116
- let offsetParent = getTrueOffsetParent(element, polyfill);
10117
- while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
10118
- offsetParent = getTrueOffsetParent(offsetParent, polyfill);
10119
- }
10120
- if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
10121
- return win;
10122
- }
10123
- return offsetParent || getContainingBlock(element) || win;
10124
- }
10125
-
10126
- const getElementRects = async function (data) {
10127
- const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
10128
- const getDimensionsFn = this.getDimensions;
10129
- const floatingDimensions = await getDimensionsFn(data.floating);
10130
- return {
10131
- reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
10132
- floating: {
10133
- x: 0,
10134
- y: 0,
10135
- width: floatingDimensions.width,
10136
- height: floatingDimensions.height
10137
- }
10138
- };
10139
- };
10140
-
10141
- function isRTL(element) {
10142
- return getComputedStyle$1(element).direction === 'rtl';
10143
- }
10144
-
10145
- const platform = {
10146
- convertOffsetParentRelativeRectToViewportRelativeRect,
10147
- getDocumentElement,
10148
- getClippingRect,
10149
- getOffsetParent,
10150
- getElementRects,
10151
- getClientRects,
10152
- getDimensions,
10153
- getScale,
10154
- isElement,
10155
- isRTL
10156
- };
10157
-
10158
- function rectsAreEqual(a, b) {
10159
- return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
10160
- }
10161
-
10162
- // https://samthor.au/2021/observing-dom/
10163
- function observeMove(element, onMove) {
10164
- let io = null;
10165
- let timeoutId;
10166
- const root = getDocumentElement(element);
10167
- function cleanup() {
10168
- var _io;
10169
- clearTimeout(timeoutId);
10170
- (_io = io) == null || _io.disconnect();
10171
- io = null;
10172
- }
10173
- function refresh(skip, threshold) {
10174
- if (skip === void 0) {
10175
- skip = false;
10176
- }
10177
- if (threshold === void 0) {
10178
- threshold = 1;
10179
- }
10180
- cleanup();
10181
- const elementRectForRootMargin = element.getBoundingClientRect();
10182
- const {
10183
- left,
10184
- top,
10185
- width,
10186
- height
10187
- } = elementRectForRootMargin;
10188
- if (!skip) {
10189
- onMove();
10190
- }
10191
- if (!width || !height) {
10192
- return;
10193
- }
10194
- const insetTop = floor(top);
10195
- const insetRight = floor(root.clientWidth - (left + width));
10196
- const insetBottom = floor(root.clientHeight - (top + height));
10197
- const insetLeft = floor(left);
10198
- const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
10199
- const options = {
10200
- rootMargin,
10201
- threshold: max(0, min(1, threshold)) || 1
10202
- };
10203
- let isFirstUpdate = true;
10204
- function handleObserve(entries) {
10205
- const ratio = entries[0].intersectionRatio;
10206
- if (ratio !== threshold) {
10207
- if (!isFirstUpdate) {
10208
- return refresh();
10209
- }
10210
- if (!ratio) {
10211
- // If the reference is clipped, the ratio is 0. Throttle the refresh
10212
- // to prevent an infinite loop of updates.
10213
- timeoutId = setTimeout(() => {
10214
- refresh(false, 1e-7);
10215
- }, 1000);
10216
- } else {
10217
- refresh(false, ratio);
10218
- }
10219
- }
10220
- if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
10221
- // It's possible that even though the ratio is reported as 1, the
10222
- // element is not actually fully within the IntersectionObserver's root
10223
- // area anymore. This can happen under performance constraints. This may
10224
- // be a bug in the browser's IntersectionObserver implementation. To
10225
- // work around this, we compare the element's bounding rect now with
10226
- // what it was at the time we created the IntersectionObserver. If they
10227
- // are not equal then the element moved, so we refresh.
10228
- refresh();
10229
- }
10230
- isFirstUpdate = false;
10231
- }
10232
-
10233
- // Older browsers don't support a `document` as the root and will throw an
10234
- // error.
10235
- try {
10236
- io = new IntersectionObserver(handleObserve, {
10237
- ...options,
10238
- // Handle <iframe>s
10239
- root: root.ownerDocument
10240
- });
10241
- } catch (_e) {
10242
- io = new IntersectionObserver(handleObserve, options);
10243
- }
10244
- io.observe(element);
10245
- }
10246
- refresh(true);
10247
- return cleanup;
10248
- }
10249
-
10250
- /**
10251
- * Automatically updates the position of the floating element when necessary.
10252
- * Should only be called when the floating element is mounted on the DOM or
10253
- * visible on the screen.
10254
- * @returns cleanup function that should be invoked when the floating element is
10255
- * removed from the DOM or hidden from the screen.
10256
- * @see https://floating-ui.com/docs/autoUpdate
10257
- */
10258
- function autoUpdate(reference, floating, update, options) {
10259
- if (options === void 0) {
10260
- options = {};
10261
- }
10262
- const {
10263
- ancestorScroll = true,
10264
- ancestorResize = true,
10265
- elementResize = typeof ResizeObserver === 'function',
10266
- layoutShift = typeof IntersectionObserver === 'function',
10267
- animationFrame = false
10268
- } = options;
10269
- const referenceEl = unwrapElement(reference);
10270
- const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
10271
- ancestors.forEach(ancestor => {
10272
- ancestorScroll && ancestor.addEventListener('scroll', update, {
10273
- passive: true
10274
- });
10275
- ancestorResize && ancestor.addEventListener('resize', update);
10276
- });
10277
- const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
10278
- let reobserveFrame = -1;
10279
- let resizeObserver = null;
10280
- if (elementResize) {
10281
- resizeObserver = new ResizeObserver(_ref => {
10282
- let [firstEntry] = _ref;
10283
- if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
10284
- // Prevent update loops when using the `size` middleware.
10285
- // https://github.com/floating-ui/floating-ui/issues/1740
10286
- resizeObserver.unobserve(floating);
10287
- cancelAnimationFrame(reobserveFrame);
10288
- reobserveFrame = requestAnimationFrame(() => {
10289
- var _resizeObserver;
10290
- (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
10291
- });
10292
- }
10293
- update();
10294
- });
10295
- if (referenceEl && !animationFrame) {
10296
- resizeObserver.observe(referenceEl);
10297
- }
10298
- resizeObserver.observe(floating);
10299
- }
10300
- let frameId;
10301
- let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
10302
- if (animationFrame) {
10303
- frameLoop();
10304
- }
10305
- function frameLoop() {
10306
- const nextRefRect = getBoundingClientRect(reference);
10307
- if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
10308
- update();
10309
- }
10310
- prevRefRect = nextRefRect;
10311
- frameId = requestAnimationFrame(frameLoop);
10312
- }
10313
- update();
10314
- return () => {
10315
- var _resizeObserver2;
10316
- ancestors.forEach(ancestor => {
10317
- ancestorScroll && ancestor.removeEventListener('scroll', update);
10318
- ancestorResize && ancestor.removeEventListener('resize', update);
10319
- });
10320
- cleanupIo == null || cleanupIo();
10321
- (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
10322
- resizeObserver = null;
10323
- if (animationFrame) {
10324
- cancelAnimationFrame(frameId);
10325
- }
10326
- };
10327
- }
10328
-
10329
- /**
10330
- * Modifies the placement by translating the floating element along the
10331
- * specified axes.
10332
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
10333
- * object may be passed.
10334
- * @see https://floating-ui.com/docs/offset
10335
- */
10336
- const offset$1 = offset$2;
10337
-
10338
- /**
10339
- * Optimizes the visibility of the floating element by shifting it in order to
10340
- * keep it in view when it will overflow the clipping boundary.
10341
- * @see https://floating-ui.com/docs/shift
10342
- */
10343
- const shift$1 = shift$2;
10344
-
10345
- /**
10346
- * Optimizes the visibility of the floating element by flipping the `placement`
10347
- * in order to keep it in view when the preferred placement(s) will overflow the
10348
- * clipping boundary. Alternative to `autoPlacement`.
10349
- * @see https://floating-ui.com/docs/flip
10350
- */
10351
- const flip$1 = flip$2;
10352
-
10353
- /**
10354
- * Provides data that allows you to change the size of the floating element —
10355
- * for instance, prevent it from overflowing the clipping boundary or match the
10356
- * width of the reference element.
10357
- * @see https://floating-ui.com/docs/size
10358
- */
10359
- const size$1 = size$2;
10360
-
10361
- /**
10362
- * Provides data to hide the floating element in applicable situations, such as
10363
- * when it is not in the same clipping context as the reference element.
10364
- * @see https://floating-ui.com/docs/hide
10365
- */
10366
- const hide$1 = hide$2;
10367
-
10368
- /**
10369
- * Provides data to position an inner element of the floating element so that it
10370
- * appears centered to the reference element.
10371
- * @see https://floating-ui.com/docs/arrow
10372
- */
10373
- const arrow$2 = arrow$3;
10374
-
10375
- /**
10376
- * Built-in `limiter` that will stop `shift()` at a certain point.
10377
- */
10378
- const limitShift$1 = limitShift$2;
10379
-
10380
- /**
10381
- * Computes the `x` and `y` coordinates that will place the floating element
10382
- * next to a given reference element.
10383
- */
10384
- const computePosition = (reference, floating, options) => {
10385
- // This caches the expensive `getClippingElementAncestors` function so that
10386
- // multiple lifecycle resets re-use the same result. It only lives for a
10387
- // single call. If other functions become expensive, we can add them as well.
10388
- const cache = new Map();
10389
- const mergedOptions = {
10390
- platform,
10391
- ...options
10392
- };
10393
- const platformWithCache = {
10394
- ...mergedOptions.platform,
10395
- _c: cache
10396
- };
10397
- return computePosition$1(reference, floating, {
10398
- ...mergedOptions,
10399
- platform: platformWithCache
10400
- });
10401
- };
10402
-
10403
- var isClient = typeof document !== 'undefined';
10404
-
10405
- var noop = function noop() {};
10406
- var index = isClient ? useLayoutEffect : noop;
10407
-
10408
- // Fork of `fast-deep-equal` that only does the comparisons we need and compares
10409
- // functions
10410
- function deepEqual(a, b) {
10411
- if (a === b) {
10412
- return true;
10413
- }
10414
- if (typeof a !== typeof b) {
10415
- return false;
10416
- }
10417
- if (typeof a === 'function' && a.toString() === b.toString()) {
10418
- return true;
10419
- }
10420
- let length;
10421
- let i;
10422
- let keys;
10423
- if (a && b && typeof a === 'object') {
10424
- if (Array.isArray(a)) {
10425
- length = a.length;
10426
- if (length !== b.length) return false;
10427
- for (i = length; i-- !== 0;) {
10428
- if (!deepEqual(a[i], b[i])) {
10429
- return false;
10430
- }
10431
- }
10432
- return true;
10433
- }
10434
- keys = Object.keys(a);
10435
- length = keys.length;
10436
- if (length !== Object.keys(b).length) {
10437
- return false;
10438
- }
10439
- for (i = length; i-- !== 0;) {
10440
- if (!{}.hasOwnProperty.call(b, keys[i])) {
10441
- return false;
10442
- }
10443
- }
10444
- for (i = length; i-- !== 0;) {
10445
- const key = keys[i];
10446
- if (key === '_owner' && a.$$typeof) {
10447
- continue;
10448
- }
10449
- if (!deepEqual(a[key], b[key])) {
10450
- return false;
10451
- }
10452
- }
10453
- return true;
10454
- }
10455
- return a !== a && b !== b;
10456
- }
10457
-
10458
- function getDPR(element) {
10459
- if (typeof window === 'undefined') {
10460
- return 1;
10461
- }
10462
- const win = element.ownerDocument.defaultView || window;
10463
- return win.devicePixelRatio || 1;
10464
- }
10465
-
10466
- function roundByDPR(element, value) {
10467
- const dpr = getDPR(element);
10468
- return Math.round(value * dpr) / dpr;
10469
- }
10470
-
10471
- function useLatestRef(value) {
10472
- const ref = React.useRef(value);
10473
- index(() => {
10474
- ref.current = value;
10475
- });
10476
- return ref;
10477
- }
10478
-
10479
- /**
10480
- * Provides data to position a floating element.
10481
- * @see https://floating-ui.com/docs/useFloating
10482
- */
10483
- function useFloating(options) {
10484
- if (options === void 0) {
10485
- options = {};
10486
- }
10487
- const {
10488
- placement = 'bottom',
10489
- strategy = 'absolute',
10490
- middleware = [],
10491
- platform,
10492
- elements: {
10493
- reference: externalReference,
10494
- floating: externalFloating
10495
- } = {},
10496
- transform = true,
10497
- whileElementsMounted,
10498
- open
10499
- } = options;
10500
- const [data, setData] = React.useState({
10501
- x: 0,
10502
- y: 0,
10503
- strategy,
10504
- placement,
10505
- middlewareData: {},
10506
- isPositioned: false
10507
- });
10508
- const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
10509
- if (!deepEqual(latestMiddleware, middleware)) {
10510
- setLatestMiddleware(middleware);
10511
- }
10512
- const [_reference, _setReference] = React.useState(null);
10513
- const [_floating, _setFloating] = React.useState(null);
10514
- const setReference = React.useCallback(node => {
10515
- if (node !== referenceRef.current) {
10516
- referenceRef.current = node;
10517
- _setReference(node);
10518
- }
10519
- }, []);
10520
- const setFloating = React.useCallback(node => {
10521
- if (node !== floatingRef.current) {
10522
- floatingRef.current = node;
10523
- _setFloating(node);
10524
- }
10525
- }, []);
10526
- const referenceEl = externalReference || _reference;
10527
- const floatingEl = externalFloating || _floating;
10528
- const referenceRef = React.useRef(null);
10529
- const floatingRef = React.useRef(null);
10530
- const dataRef = React.useRef(data);
10531
- const hasWhileElementsMounted = whileElementsMounted != null;
10532
- const whileElementsMountedRef = useLatestRef(whileElementsMounted);
10533
- const platformRef = useLatestRef(platform);
10534
- const openRef = useLatestRef(open);
10535
- const update = React.useCallback(() => {
10536
- if (!referenceRef.current || !floatingRef.current) {
10537
- return;
10538
- }
10539
- const config = {
10540
- placement,
10541
- strategy,
10542
- middleware: latestMiddleware
10543
- };
10544
- if (platformRef.current) {
10545
- config.platform = platformRef.current;
10546
- }
10547
- computePosition(referenceRef.current, floatingRef.current, config).then(data => {
10548
- const fullData = {
10549
- ...data,
10550
- // The floating element's position may be recomputed while it's closed
10551
- // but still mounted (such as when transitioning out). To ensure
10552
- // `isPositioned` will be `false` initially on the next open, avoid
10553
- // setting it to `true` when `open === false` (must be specified).
10554
- isPositioned: openRef.current !== false
10555
- };
10556
- if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
10557
- dataRef.current = fullData;
10558
- ReactDOM.flushSync(() => {
10559
- setData(fullData);
10560
- });
10561
- }
10562
- });
10563
- }, [latestMiddleware, placement, strategy, platformRef, openRef]);
10564
- index(() => {
10565
- if (open === false && dataRef.current.isPositioned) {
10566
- dataRef.current.isPositioned = false;
10567
- setData(data => ({
10568
- ...data,
10569
- isPositioned: false
10570
- }));
10571
- }
10572
- }, [open]);
10573
- const isMountedRef = React.useRef(false);
10574
- index(() => {
10575
- isMountedRef.current = true;
10576
- return () => {
10577
- isMountedRef.current = false;
10578
- };
10579
- }, []);
10580
- index(() => {
10581
- if (referenceEl) referenceRef.current = referenceEl;
10582
- if (floatingEl) floatingRef.current = floatingEl;
10583
- if (referenceEl && floatingEl) {
10584
- if (whileElementsMountedRef.current) {
10585
- return whileElementsMountedRef.current(referenceEl, floatingEl, update);
10586
- }
10587
- update();
10588
- }
10589
- }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
10590
- const refs = React.useMemo(() => ({
10591
- reference: referenceRef,
10592
- floating: floatingRef,
10593
- setReference,
10594
- setFloating
10595
- }), [setReference, setFloating]);
10596
- const elements = React.useMemo(() => ({
10597
- reference: referenceEl,
10598
- floating: floatingEl
10599
- }), [referenceEl, floatingEl]);
10600
- const floatingStyles = React.useMemo(() => {
10601
- const initialStyles = {
10602
- position: strategy,
10603
- left: 0,
10604
- top: 0
10605
- };
10606
- if (!elements.floating) {
10607
- return initialStyles;
10608
- }
10609
- const x = roundByDPR(elements.floating, data.x);
10610
- const y = roundByDPR(elements.floating, data.y);
10611
- if (transform) {
10612
- return {
10613
- ...initialStyles,
10614
- transform: "translate(" + x + "px, " + y + "px)",
10615
- ...(getDPR(elements.floating) >= 1.5 && {
10616
- willChange: 'transform'
10617
- })
10618
- };
10619
- }
10620
- return {
10621
- position: strategy,
10622
- left: x,
10623
- top: y
10624
- };
10625
- }, [strategy, transform, elements.floating, data.x, data.y]);
10626
- return React.useMemo(() => ({
10627
- ...data,
10628
- update,
10629
- refs,
10630
- elements,
10631
- floatingStyles
10632
- }), [data, update, refs, elements, floatingStyles]);
10633
- }
10634
-
10635
- /**
10636
- * Provides data to position an inner element of the floating element so that it
10637
- * appears centered to the reference element.
10638
- * This wraps the core `arrow` middleware to allow React refs as the element.
10639
- * @see https://floating-ui.com/docs/arrow
10640
- */
10641
- const arrow$1 = options => {
10642
- function isRef(value) {
10643
- return {}.hasOwnProperty.call(value, 'current');
10644
- }
10645
- return {
10646
- name: 'arrow',
10647
- options,
10648
- fn(state) {
10649
- const {
10650
- element,
10651
- padding
10652
- } = typeof options === 'function' ? options(state) : options;
10653
- if (element && isRef(element)) {
10654
- if (element.current != null) {
10655
- return arrow$2({
10656
- element: element.current,
10657
- padding
10658
- }).fn(state);
10659
- }
10660
- return {};
10661
- }
10662
- if (element) {
10663
- return arrow$2({
10664
- element,
10665
- padding
10666
- }).fn(state);
10667
- }
10668
- return {};
10669
- }
10670
- };
10671
- };
10672
-
10673
- /**
10674
- * Modifies the placement by translating the floating element along the
10675
- * specified axes.
10676
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
10677
- * object may be passed.
10678
- * @see https://floating-ui.com/docs/offset
10679
- */
10680
- const offset = (options, deps) => ({
10681
- ...offset$1(options),
10682
- options: [options, deps]
10683
- });
10684
-
10685
- /**
10686
- * Optimizes the visibility of the floating element by shifting it in order to
10687
- * keep it in view when it will overflow the clipping boundary.
10688
- * @see https://floating-ui.com/docs/shift
10689
- */
10690
- const shift = (options, deps) => ({
10691
- ...shift$1(options),
10692
- options: [options, deps]
10693
- });
10694
-
10695
- /**
10696
- * Built-in `limiter` that will stop `shift()` at a certain point.
10697
- */
10698
- const limitShift = (options, deps) => ({
10699
- ...limitShift$1(options),
10700
- options: [options, deps]
10701
- });
10702
-
10703
- /**
10704
- * Optimizes the visibility of the floating element by flipping the `placement`
10705
- * in order to keep it in view when the preferred placement(s) will overflow the
10706
- * clipping boundary. Alternative to `autoPlacement`.
10707
- * @see https://floating-ui.com/docs/flip
10708
- */
10709
- const flip = (options, deps) => ({
10710
- ...flip$1(options),
10711
- options: [options, deps]
10712
- });
10713
-
10714
- /**
10715
- * Provides data that allows you to change the size of the floating element —
10716
- * for instance, prevent it from overflowing the clipping boundary or match the
10717
- * width of the reference element.
10718
- * @see https://floating-ui.com/docs/size
10719
- */
10720
- const size = (options, deps) => ({
10721
- ...size$1(options),
10722
- options: [options, deps]
10723
- });
10724
-
10725
- /**
10726
- * Provides data to hide the floating element in applicable situations, such as
10727
- * when it is not in the same clipping context as the reference element.
10728
- * @see https://floating-ui.com/docs/hide
10729
- */
10730
- const hide = (options, deps) => ({
10731
- ...hide$1(options),
10732
- options: [options, deps]
10733
- });
10734
-
10735
- /**
10736
- * Provides data to position an inner element of the floating element so that it
10737
- * appears centered to the reference element.
10738
- * This wraps the core `arrow` middleware to allow React refs as the element.
10739
- * @see https://floating-ui.com/docs/arrow
10740
- */
10741
- const arrow = (options, deps) => ({
10742
- ...arrow$1(options),
10743
- options: [options, deps]
10744
- });
10745
-
10746
- // src/arrow.tsx
10747
- var NAME = "Arrow";
10748
- var Arrow$1 = React.forwardRef((props, forwardedRef) => {
10749
- const { children, width = 10, height = 5, ...arrowProps } = props;
10750
- return /* @__PURE__ */ jsx(
10751
- Primitive.svg,
10752
- {
10753
- ...arrowProps,
10754
- ref: forwardedRef,
10755
- width,
10756
- height,
10757
- viewBox: "0 0 30 10",
10758
- preserveAspectRatio: "none",
10759
- children: props.asChild ? children : /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" })
10760
- }
10761
- );
10762
- });
10763
- Arrow$1.displayName = NAME;
10764
- var Root = Arrow$1;
10765
-
10766
- var POPPER_NAME = "Popper";
10767
- var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
10768
- var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
10769
- var Popper = (props) => {
10770
- const { __scopePopper, children } = props;
10771
- const [anchor, setAnchor] = React.useState(null);
10772
- return /* @__PURE__ */ jsx(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
10773
- };
10774
- Popper.displayName = POPPER_NAME;
10775
- var ANCHOR_NAME$1 = "PopperAnchor";
10776
- var PopperAnchor = React.forwardRef(
10777
- (props, forwardedRef) => {
10778
- const { __scopePopper, virtualRef, ...anchorProps } = props;
10779
- const context = usePopperContext(ANCHOR_NAME$1, __scopePopper);
10780
- const ref = React.useRef(null);
10781
- const composedRefs = useComposedRefs(forwardedRef, ref);
10782
- const anchorRef = React.useRef(null);
10783
- React.useEffect(() => {
10784
- const previousAnchor = anchorRef.current;
10785
- anchorRef.current = virtualRef?.current || ref.current;
10786
- if (previousAnchor !== anchorRef.current) {
10787
- context.onAnchorChange(anchorRef.current);
10788
- }
10789
- });
10790
- return virtualRef ? null : /* @__PURE__ */ jsx(Primitive.div, { ...anchorProps, ref: composedRefs });
10791
- }
10792
- );
10793
- PopperAnchor.displayName = ANCHOR_NAME$1;
10794
- var CONTENT_NAME$1 = "PopperContent";
10795
- var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME$1);
10796
- var PopperContent = React.forwardRef(
10797
- (props, forwardedRef) => {
10798
- const {
10799
- __scopePopper,
10800
- side = "bottom",
10801
- sideOffset = 0,
10802
- align = "center",
10803
- alignOffset = 0,
10804
- arrowPadding = 0,
10805
- avoidCollisions = true,
10806
- collisionBoundary = [],
10807
- collisionPadding: collisionPaddingProp = 0,
10808
- sticky = "partial",
10809
- hideWhenDetached = false,
10810
- updatePositionStrategy = "optimized",
10811
- onPlaced,
10812
- ...contentProps
10813
- } = props;
10814
- const context = usePopperContext(CONTENT_NAME$1, __scopePopper);
10815
- const [content, setContent] = React.useState(null);
10816
- const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
10817
- const [arrow$1, setArrow] = React.useState(null);
10818
- const arrowSize = useSize(arrow$1);
10819
- const arrowWidth = arrowSize?.width ?? 0;
10820
- const arrowHeight = arrowSize?.height ?? 0;
10821
- const desiredPlacement = side + (align !== "center" ? "-" + align : "");
10822
- const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
10823
- const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
10824
- const hasExplicitBoundaries = boundary.length > 0;
10825
- const detectOverflowOptions = {
10826
- padding: collisionPadding,
10827
- boundary: boundary.filter(isNotNull),
10828
- // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
10829
- altBoundary: hasExplicitBoundaries
10830
- };
10831
- const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({
10832
- // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
10833
- strategy: "fixed",
10834
- placement: desiredPlacement,
10835
- whileElementsMounted: (...args) => {
10836
- const cleanup = autoUpdate(...args, {
10837
- animationFrame: updatePositionStrategy === "always"
10838
- });
10839
- return cleanup;
10840
- },
10841
- elements: {
10842
- reference: context.anchor
10843
- },
10844
- middleware: [
10845
- offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
10846
- avoidCollisions && shift({
10847
- mainAxis: true,
10848
- crossAxis: false,
10849
- limiter: sticky === "partial" ? limitShift() : void 0,
10850
- ...detectOverflowOptions
10851
- }),
10852
- avoidCollisions && flip({ ...detectOverflowOptions }),
10853
- size({
10854
- ...detectOverflowOptions,
10855
- apply: ({ elements, rects, availableWidth, availableHeight }) => {
10856
- const { width: anchorWidth, height: anchorHeight } = rects.reference;
10857
- const contentStyle = elements.floating.style;
10858
- contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
10859
- contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
10860
- contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
10861
- contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
10862
- }
10863
- }),
10864
- arrow$1 && arrow({ element: arrow$1, padding: arrowPadding }),
10865
- transformOrigin({ arrowWidth, arrowHeight }),
10866
- hideWhenDetached && hide({ strategy: "referenceHidden", ...detectOverflowOptions })
10867
- ]
10868
- });
10869
- const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
10870
- const handlePlaced = useCallbackRef$1(onPlaced);
10871
- useLayoutEffect2(() => {
10872
- if (isPositioned) {
10873
- handlePlaced?.();
10874
- }
10875
- }, [isPositioned, handlePlaced]);
10876
- const arrowX = middlewareData.arrow?.x;
10877
- const arrowY = middlewareData.arrow?.y;
10878
- const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
10879
- const [contentZIndex, setContentZIndex] = React.useState();
10880
- useLayoutEffect2(() => {
10881
- if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
10882
- }, [content]);
10883
- return /* @__PURE__ */ jsx(
10884
- "div",
10885
- {
10886
- ref: refs.setFloating,
10887
- "data-radix-popper-content-wrapper": "",
10888
- style: {
10889
- ...floatingStyles,
10890
- transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
10891
- // keep off the page when measuring
10892
- minWidth: "max-content",
10893
- zIndex: contentZIndex,
10894
- ["--radix-popper-transform-origin"]: [
10895
- middlewareData.transformOrigin?.x,
10896
- middlewareData.transformOrigin?.y
10897
- ].join(" "),
10898
- // hide the content if using the hide middleware and should be hidden
10899
- // set visibility to hidden and disable pointer events so the UI behaves
10900
- // as if the PopperContent isn't there at all
10901
- ...middlewareData.hide?.referenceHidden && {
10902
- visibility: "hidden",
10903
- pointerEvents: "none"
10904
- }
10905
- },
10906
- dir: props.dir,
10907
- children: /* @__PURE__ */ jsx(
10908
- PopperContentProvider,
10909
- {
10910
- scope: __scopePopper,
10911
- placedSide,
10912
- onArrowChange: setArrow,
10913
- arrowX,
10914
- arrowY,
10915
- shouldHideArrow: cannotCenterArrow,
10916
- children: /* @__PURE__ */ jsx(
10917
- Primitive.div,
10918
- {
10919
- "data-side": placedSide,
10920
- "data-align": placedAlign,
10921
- ...contentProps,
10922
- ref: composedRefs,
10923
- style: {
10924
- ...contentProps.style,
10925
- // if the PopperContent hasn't been placed yet (not all measurements done)
10926
- // we prevent animations so that users's animation don't kick in too early referring wrong sides
10927
- animation: !isPositioned ? "none" : void 0
10928
- }
10929
- }
10930
- )
10931
- }
10932
- )
10933
- }
10934
- );
10935
- }
10936
- );
10937
- PopperContent.displayName = CONTENT_NAME$1;
10938
- var ARROW_NAME$1 = "PopperArrow";
10939
- var OPPOSITE_SIDE = {
10940
- top: "bottom",
10941
- right: "left",
10942
- bottom: "top",
10943
- left: "right"
10944
- };
10945
- var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
10946
- const { __scopePopper, ...arrowProps } = props;
10947
- const contentContext = useContentContext(ARROW_NAME$1, __scopePopper);
10948
- const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
10949
- return (
10950
- // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
10951
- // doesn't report size as we'd expect on SVG elements.
10952
- // it reports their bounding box which is effectively the largest path inside the SVG.
10953
- /* @__PURE__ */ jsx(
10954
- "span",
10955
- {
10956
- ref: contentContext.onArrowChange,
10957
- style: {
10958
- position: "absolute",
10959
- left: contentContext.arrowX,
10960
- top: contentContext.arrowY,
10961
- [baseSide]: 0,
10962
- transformOrigin: {
10963
- top: "",
10964
- right: "0 0",
10965
- bottom: "center 0",
10966
- left: "100% 0"
10967
- }[contentContext.placedSide],
10968
- transform: {
10969
- top: "translateY(100%)",
10970
- right: "translateY(50%) rotate(90deg) translateX(-50%)",
10971
- bottom: `rotate(180deg)`,
10972
- left: "translateY(50%) rotate(-90deg) translateX(50%)"
10973
- }[contentContext.placedSide],
10974
- visibility: contentContext.shouldHideArrow ? "hidden" : void 0
10975
- },
10976
- children: /* @__PURE__ */ jsx(
10977
- Root,
10978
- {
10979
- ...arrowProps,
10980
- ref: forwardedRef,
10981
- style: {
10982
- ...arrowProps.style,
10983
- // ensures the element can be measured correctly (mostly for if SVG)
10984
- display: "block"
10985
- }
10986
- }
10987
- )
10988
- }
10989
- )
10990
- );
10991
- });
10992
- PopperArrow.displayName = ARROW_NAME$1;
10993
- function isNotNull(value) {
10994
- return value !== null;
10995
- }
10996
- var transformOrigin = (options) => ({
10997
- name: "transformOrigin",
10998
- options,
10999
- fn(data) {
11000
- const { placement, rects, middlewareData } = data;
11001
- const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
11002
- const isArrowHidden = cannotCenterArrow;
11003
- const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
11004
- const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
11005
- const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
11006
- const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
11007
- const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
11008
- const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
11009
- let x = "";
11010
- let y = "";
11011
- if (placedSide === "bottom") {
11012
- x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
11013
- y = `${-arrowHeight}px`;
11014
- } else if (placedSide === "top") {
11015
- x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
11016
- y = `${rects.floating.height + arrowHeight}px`;
11017
- } else if (placedSide === "right") {
11018
- x = `${-arrowHeight}px`;
11019
- y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
11020
- } else if (placedSide === "left") {
11021
- x = `${rects.floating.width + arrowHeight}px`;
11022
- y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
11023
- }
11024
- return { data: { x, y } };
11025
- }
11026
- });
11027
- function getSideAndAlignFromPlacement(placement) {
11028
- const [side, align = "center"] = placement.split("-");
11029
- return [side, align];
11030
- }
11031
- var Root2$1 = Popper;
11032
- var Anchor = PopperAnchor;
11033
- var Content = PopperContent;
11034
- var Arrow = PopperArrow;
11035
-
11036
- var PORTAL_NAME$1 = "Portal";
11037
- var Portal$1 = React.forwardRef((props, forwardedRef) => {
11038
- const { container: containerProp, ...portalProps } = props;
11039
- const [mounted, setMounted] = React.useState(false);
11040
- useLayoutEffect2(() => setMounted(true), []);
11041
- const container = containerProp || mounted && globalThis?.document?.body;
11042
- return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
11043
- });
11044
- Portal$1.displayName = PORTAL_NAME$1;
11045
-
11046
- var getDefaultParent = function (originalTarget) {
11047
- if (typeof document === 'undefined') {
11048
- return null;
11049
- }
11050
- var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
11051
- return sampleTarget.ownerDocument.body;
11052
- };
11053
- var counterMap = new WeakMap();
11054
- var uncontrolledNodes = new WeakMap();
11055
- var markerMap = {};
11056
- var lockCount = 0;
11057
- var unwrapHost = function (node) {
11058
- return node && (node.host || unwrapHost(node.parentNode));
11059
- };
11060
- var correctTargets = function (parent, targets) {
11061
- return targets
11062
- .map(function (target) {
11063
- if (parent.contains(target)) {
11064
- return target;
11065
- }
11066
- var correctedTarget = unwrapHost(target);
11067
- if (correctedTarget && parent.contains(correctedTarget)) {
11068
- return correctedTarget;
11069
- }
11070
- console.error('aria-hidden', target, 'in not contained inside', parent, '. Doing nothing');
11071
- return null;
11072
- })
11073
- .filter(function (x) { return Boolean(x); });
11074
- };
11075
- /**
11076
- * Marks everything except given node(or nodes) as aria-hidden
11077
- * @param {Element | Element[]} originalTarget - elements to keep on the page
11078
- * @param [parentNode] - top element, defaults to document.body
11079
- * @param {String} [markerName] - a special attribute to mark every node
11080
- * @param {String} [controlAttribute] - html Attribute to control
11081
- * @return {Undo} undo command
11082
- */
11083
- var applyAttributeToOthers = function (originalTarget, parentNode, markerName, controlAttribute) {
11084
- var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
11085
- if (!markerMap[markerName]) {
11086
- markerMap[markerName] = new WeakMap();
11087
- }
11088
- var markerCounter = markerMap[markerName];
11089
- var hiddenNodes = [];
11090
- var elementsToKeep = new Set();
11091
- var elementsToStop = new Set(targets);
11092
- var keep = function (el) {
11093
- if (!el || elementsToKeep.has(el)) {
11094
- return;
11095
- }
11096
- elementsToKeep.add(el);
11097
- keep(el.parentNode);
11098
- };
11099
- targets.forEach(keep);
11100
- var deep = function (parent) {
11101
- if (!parent || elementsToStop.has(parent)) {
11102
- return;
11103
- }
11104
- Array.prototype.forEach.call(parent.children, function (node) {
11105
- if (elementsToKeep.has(node)) {
11106
- deep(node);
11107
- }
11108
- else {
11109
- try {
11110
- var attr = node.getAttribute(controlAttribute);
11111
- var alreadyHidden = attr !== null && attr !== 'false';
11112
- var counterValue = (counterMap.get(node) || 0) + 1;
11113
- var markerValue = (markerCounter.get(node) || 0) + 1;
11114
- counterMap.set(node, counterValue);
11115
- markerCounter.set(node, markerValue);
11116
- hiddenNodes.push(node);
11117
- if (counterValue === 1 && alreadyHidden) {
11118
- uncontrolledNodes.set(node, true);
11119
- }
11120
- if (markerValue === 1) {
11121
- node.setAttribute(markerName, 'true');
11122
- }
11123
- if (!alreadyHidden) {
11124
- node.setAttribute(controlAttribute, 'true');
11125
- }
11126
- }
11127
- catch (e) {
11128
- console.error('aria-hidden: cannot operate on ', node, e);
11129
- }
11130
- }
11131
- });
11132
- };
11133
- deep(parentNode);
11134
- elementsToKeep.clear();
11135
- lockCount++;
11136
- return function () {
11137
- hiddenNodes.forEach(function (node) {
11138
- var counterValue = counterMap.get(node) - 1;
11139
- var markerValue = markerCounter.get(node) - 1;
11140
- counterMap.set(node, counterValue);
11141
- markerCounter.set(node, markerValue);
11142
- if (!counterValue) {
11143
- if (!uncontrolledNodes.has(node)) {
11144
- node.removeAttribute(controlAttribute);
11145
- }
11146
- uncontrolledNodes.delete(node);
11147
- }
11148
- if (!markerValue) {
11149
- node.removeAttribute(markerName);
11150
- }
11151
- });
11152
- lockCount--;
11153
- if (!lockCount) {
11154
- // clear
11155
- counterMap = new WeakMap();
11156
- counterMap = new WeakMap();
11157
- uncontrolledNodes = new WeakMap();
11158
- markerMap = {};
11159
- }
11160
- };
11161
- };
11162
- /**
11163
- * Marks everything except given node(or nodes) as aria-hidden
11164
- * @param {Element | Element[]} originalTarget - elements to keep on the page
11165
- * @param [parentNode] - top element, defaults to document.body
11166
- * @param {String} [markerName] - a special attribute to mark every node
11167
- * @return {Undo} undo command
11168
- */
11169
- var hideOthers = function (originalTarget, parentNode, markerName) {
11170
- if (markerName === void 0) { markerName = 'data-aria-hidden'; }
11171
- var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
11172
- var activeParentNode = getDefaultParent(originalTarget);
11173
- if (!activeParentNode) {
11174
- return function () { return null; };
11175
- }
11176
- // we should not hide aria-live elements - https://github.com/theKashey/aria-hidden/issues/10
11177
- // and script elements, as they have no impact on accessibility.
11178
- targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live], script')));
11179
- return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden');
11180
- };
11181
-
11182
- /******************************************************************************
11183
- Copyright (c) Microsoft Corporation.
11184
-
11185
- Permission to use, copy, modify, and/or distribute this software for any
11186
- purpose with or without fee is hereby granted.
11187
-
11188
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
11189
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
11190
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
11191
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
11192
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
11193
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
11194
- PERFORMANCE OF THIS SOFTWARE.
11195
- ***************************************************************************** */
11196
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
11197
-
11198
-
11199
- var __assign = function() {
11200
- __assign = Object.assign || function __assign(t) {
11201
- for (var s, i = 1, n = arguments.length; i < n; i++) {
11202
- s = arguments[i];
11203
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
11204
- }
11205
- return t;
11206
- };
11207
- return __assign.apply(this, arguments);
11208
- };
11209
-
11210
- function __rest(s, e) {
11211
- var t = {};
11212
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
11213
- t[p] = s[p];
11214
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
11215
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
11216
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
11217
- t[p[i]] = s[p[i]];
11218
- }
11219
- return t;
11220
- }
11221
-
11222
- function __spreadArray(to, from, pack) {
11223
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
11224
- if (ar || !(i in from)) {
11225
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
11226
- ar[i] = from[i];
11227
- }
11228
- }
11229
- return to.concat(ar || Array.prototype.slice.call(from));
11230
- }
11231
-
11232
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
11233
- var e = new Error(message);
11234
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
11235
- };
11236
-
11237
- var zeroRightClassName = 'right-scroll-bar-position';
11238
- var fullWidthClassName = 'width-before-scroll-bar';
11239
- var noScrollbarsClassName = 'with-scroll-bars-hidden';
11240
- /**
11241
- * Name of a CSS variable containing the amount of "hidden" scrollbar
11242
- * ! might be undefined ! use will fallback!
11243
- */
11244
- var removedBarSizeVariable = '--removed-body-scroll-bar-size';
11245
-
11246
- /**
11247
- * Assigns a value for a given ref, no matter of the ref format
11248
- * @param {RefObject} ref - a callback function or ref object
11249
- * @param value - a new value
11250
- *
11251
- * @see https://github.com/theKashey/use-callback-ref#assignref
11252
- * @example
11253
- * const refObject = useRef();
11254
- * const refFn = (ref) => {....}
11255
- *
11256
- * assignRef(refObject, "refValue");
11257
- * assignRef(refFn, "refValue");
11258
- */
11259
- function assignRef(ref, value) {
11260
- if (typeof ref === 'function') {
11261
- ref(value);
11262
- }
11263
- else if (ref) {
11264
- ref.current = value;
11265
- }
11266
- return ref;
11267
- }
11268
-
11269
- /**
11270
- * creates a MutableRef with ref change callback
11271
- * @param initialValue - initial ref value
11272
- * @param {Function} callback - a callback to run when value changes
11273
- *
11274
- * @example
11275
- * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
11276
- * ref.current = 1;
11277
- * // prints 0 -> 1
11278
- *
11279
- * @see https://reactjs.org/docs/hooks-reference.html#useref
11280
- * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
11281
- * @returns {MutableRefObject}
11282
- */
11283
- function useCallbackRef(initialValue, callback) {
11284
- var ref = useState(function () { return ({
11285
- // value
11286
- value: initialValue,
11287
- // last callback
11288
- callback: callback,
11289
- // "memoized" public interface
11290
- facade: {
11291
- get current() {
11292
- return ref.value;
11293
- },
11294
- set current(value) {
11295
- var last = ref.value;
11296
- if (last !== value) {
11297
- ref.value = value;
11298
- ref.callback(value, last);
11299
- }
11300
- },
11301
- },
11302
- }); })[0];
11303
- // update callback
11304
- ref.callback = callback;
11305
- return ref.facade;
11306
- }
11307
-
11308
- var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
11309
- var currentValues = new WeakMap();
11310
- /**
11311
- * Merges two or more refs together providing a single interface to set their value
11312
- * @param {RefObject|Ref} refs
11313
- * @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
11314
- *
11315
- * @see {@link mergeRefs} a version without buit-in memoization
11316
- * @see https://github.com/theKashey/use-callback-ref#usemergerefs
11317
- * @example
11318
- * const Component = React.forwardRef((props, ref) => {
11319
- * const ownRef = useRef();
11320
- * const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
11321
- * return <div ref={domRef}>...</div>
11322
- * }
11323
- */
11324
- function useMergeRefs(refs, defaultValue) {
11325
- var callbackRef = useCallbackRef(null, function (newValue) {
11326
- return refs.forEach(function (ref) { return assignRef(ref, newValue); });
11327
- });
11328
- // handle refs changes - added or removed
11329
- useIsomorphicLayoutEffect(function () {
11330
- var oldValue = currentValues.get(callbackRef);
11331
- if (oldValue) {
11332
- var prevRefs_1 = new Set(oldValue);
11333
- var nextRefs_1 = new Set(refs);
11334
- var current_1 = callbackRef.current;
11335
- prevRefs_1.forEach(function (ref) {
11336
- if (!nextRefs_1.has(ref)) {
11337
- assignRef(ref, null);
11338
- }
11339
- });
11340
- nextRefs_1.forEach(function (ref) {
11341
- if (!prevRefs_1.has(ref)) {
11342
- assignRef(ref, current_1);
11343
- }
11344
- });
11345
- }
11346
- currentValues.set(callbackRef, refs);
11347
- }, [refs]);
11348
- return callbackRef;
11349
- }
11350
-
11351
- function ItoI(a) {
11352
- return a;
11353
- }
11354
- function innerCreateMedium(defaults, middleware) {
11355
- if (middleware === void 0) { middleware = ItoI; }
11356
- var buffer = [];
11357
- var assigned = false;
11358
- var medium = {
11359
- read: function () {
11360
- if (assigned) {
11361
- throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.');
11362
- }
11363
- if (buffer.length) {
11364
- return buffer[buffer.length - 1];
11365
- }
11366
- return defaults;
11367
- },
11368
- useMedium: function (data) {
11369
- var item = middleware(data, assigned);
11370
- buffer.push(item);
11371
- return function () {
11372
- buffer = buffer.filter(function (x) { return x !== item; });
11373
- };
11374
- },
11375
- assignSyncMedium: function (cb) {
11376
- assigned = true;
11377
- while (buffer.length) {
11378
- var cbs = buffer;
11379
- buffer = [];
11380
- cbs.forEach(cb);
11381
- }
11382
- buffer = {
11383
- push: function (x) { return cb(x); },
11384
- filter: function () { return buffer; },
11385
- };
11386
- },
11387
- assignMedium: function (cb) {
11388
- assigned = true;
11389
- var pendingQueue = [];
11390
- if (buffer.length) {
11391
- var cbs = buffer;
11392
- buffer = [];
11393
- cbs.forEach(cb);
11394
- pendingQueue = buffer;
11395
- }
11396
- var executeQueue = function () {
11397
- var cbs = pendingQueue;
11398
- pendingQueue = [];
11399
- cbs.forEach(cb);
11400
- };
11401
- var cycle = function () { return Promise.resolve().then(executeQueue); };
11402
- cycle();
11403
- buffer = {
11404
- push: function (x) {
11405
- pendingQueue.push(x);
11406
- cycle();
11407
- },
11408
- filter: function (filter) {
11409
- pendingQueue = pendingQueue.filter(filter);
11410
- return buffer;
11411
- },
11412
- };
11413
- },
11414
- };
11415
- return medium;
11416
- }
11417
- // eslint-disable-next-line @typescript-eslint/ban-types
11418
- function createSidecarMedium(options) {
11419
- if (options === void 0) { options = {}; }
11420
- var medium = innerCreateMedium(null);
11421
- medium.options = __assign({ async: true, ssr: false }, options);
11422
- return medium;
11423
- }
11424
-
11425
- var SideCar$1 = function (_a) {
11426
- var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
11427
- if (!sideCar) {
11428
- throw new Error('Sidecar: please provide `sideCar` property to import the right car');
11429
- }
11430
- var Target = sideCar.read();
11431
- if (!Target) {
11432
- throw new Error('Sidecar medium not found');
11433
- }
11434
- return React.createElement(Target, __assign({}, rest));
11435
- };
11436
- SideCar$1.isSideCarExport = true;
11437
- function exportSidecar(medium, exported) {
11438
- medium.useMedium(exported);
11439
- return SideCar$1;
11440
- }
11441
-
11442
- var effectCar = createSidecarMedium();
11443
-
11444
- var nothing = function () {
11445
- return;
11446
- };
11447
- /**
11448
- * Removes scrollbar from the page and contain the scroll within the Lock
11449
- */
11450
- var RemoveScroll = React.forwardRef(function (props, parentRef) {
11451
- var ref = React.useRef(null);
11452
- var _a = React.useState({
11453
- onScrollCapture: nothing,
11454
- onWheelCapture: nothing,
11455
- onTouchMoveCapture: nothing,
11456
- }), callbacks = _a[0], setCallbacks = _a[1];
11457
- var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noRelative = props.noRelative, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
11458
- var SideCar = sideCar;
11459
- var containerRef = useMergeRefs([ref, parentRef]);
11460
- var containerProps = __assign(__assign({}, rest), callbacks);
11461
- return (React.createElement(React.Fragment, null,
11462
- enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noRelative: noRelative, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode: gapMode })),
11463
- forwardProps ? (React.cloneElement(React.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (React.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children))));
11464
- });
11465
- RemoveScroll.defaultProps = {
11466
- enabled: true,
11467
- removeScrollBar: true,
11468
- inert: false,
11469
- };
11470
- RemoveScroll.classNames = {
11471
- fullWidth: fullWidthClassName,
11472
- zeroRight: zeroRightClassName,
11473
- };
11474
-
11475
- var getNonce = function () {
11476
- if (typeof __webpack_nonce__ !== 'undefined') {
11477
- return __webpack_nonce__;
11478
- }
11479
- return undefined;
11480
- };
11481
-
11482
- function makeStyleTag() {
11483
- if (!document)
11484
- return null;
11485
- var tag = document.createElement('style');
11486
- tag.type = 'text/css';
11487
- var nonce = getNonce();
11488
- if (nonce) {
11489
- tag.setAttribute('nonce', nonce);
11490
- }
11491
- return tag;
11492
- }
11493
- function injectStyles(tag, css) {
11494
- // @ts-ignore
11495
- if (tag.styleSheet) {
11496
- // @ts-ignore
11497
- tag.styleSheet.cssText = css;
11498
- }
11499
- else {
11500
- tag.appendChild(document.createTextNode(css));
11501
- }
11502
- }
11503
- function insertStyleTag(tag) {
11504
- var head = document.head || document.getElementsByTagName('head')[0];
11505
- head.appendChild(tag);
11506
- }
11507
- var stylesheetSingleton = function () {
11508
- var counter = 0;
11509
- var stylesheet = null;
11510
- return {
11511
- add: function (style) {
11512
- if (counter == 0) {
11513
- if ((stylesheet = makeStyleTag())) {
11514
- injectStyles(stylesheet, style);
11515
- insertStyleTag(stylesheet);
11516
- }
11517
- }
11518
- counter++;
11519
- },
11520
- remove: function () {
11521
- counter--;
11522
- if (!counter && stylesheet) {
11523
- stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet);
11524
- stylesheet = null;
11525
- }
11526
- },
11527
- };
11528
- };
11529
-
11530
- /**
11531
- * creates a hook to control style singleton
11532
- * @see {@link styleSingleton} for a safer component version
11533
- * @example
11534
- * ```tsx
11535
- * const useStyle = styleHookSingleton();
11536
- * ///
11537
- * useStyle('body { overflow: hidden}');
11538
- */
11539
- var styleHookSingleton = function () {
11540
- var sheet = stylesheetSingleton();
11541
- return function (styles, isDynamic) {
11542
- React.useEffect(function () {
11543
- sheet.add(styles);
11544
- return function () {
11545
- sheet.remove();
11546
- };
11547
- }, [styles && isDynamic]);
11548
- };
11549
- };
11550
-
11551
- /**
11552
- * create a Component to add styles on demand
11553
- * - styles are added when first instance is mounted
11554
- * - styles are removed when the last instance is unmounted
11555
- * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
11556
- */
11557
- var styleSingleton = function () {
11558
- var useStyle = styleHookSingleton();
11559
- var Sheet = function (_a) {
11560
- var styles = _a.styles, dynamic = _a.dynamic;
11561
- useStyle(styles, dynamic);
11562
- return null;
11563
- };
11564
- return Sheet;
11565
- };
11566
-
11567
- var zeroGap = {
11568
- left: 0,
11569
- top: 0,
11570
- right: 0,
11571
- gap: 0,
11572
- };
11573
- var parse = function (x) { return parseInt(x || '', 10) || 0; };
11574
- var getOffset = function (gapMode) {
11575
- var cs = window.getComputedStyle(document.body);
11576
- var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
11577
- var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
11578
- var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
11579
- return [parse(left), parse(top), parse(right)];
11580
- };
11581
- var getGapWidth = function (gapMode) {
11582
- if (gapMode === void 0) { gapMode = 'margin'; }
11583
- if (typeof window === 'undefined') {
11584
- return zeroGap;
11585
- }
11586
- var offsets = getOffset(gapMode);
11587
- var documentWidth = document.documentElement.clientWidth;
11588
- var windowWidth = window.innerWidth;
11589
- return {
11590
- left: offsets[0],
11591
- top: offsets[1],
11592
- right: offsets[2],
11593
- gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
11594
- };
11595
- };
11596
-
11597
- var Style = styleSingleton();
11598
- var lockAttribute = 'data-scroll-locked';
11599
- // important tip - once we measure scrollBar width and remove them
11600
- // we could not repeat this operation
11601
- // thus we are using style-singleton - only the first "yet correct" style will be applied.
11602
- var getStyles = function (_a, allowRelative, gapMode, important) {
11603
- var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
11604
- if (gapMode === void 0) { gapMode = 'margin'; }
11605
- return "\n .".concat(noScrollbarsClassName, " {\n overflow: hidden ").concat(important, ";\n padding-right: ").concat(gap, "px ").concat(important, ";\n }\n body[").concat(lockAttribute, "] {\n overflow: hidden ").concat(important, ";\n overscroll-behavior: contain;\n ").concat([
11606
- allowRelative && "position: relative ".concat(important, ";"),
11607
- gapMode === 'margin' &&
11608
- "\n padding-left: ".concat(left, "px;\n padding-top: ").concat(top, "px;\n padding-right: ").concat(right, "px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(gap, "px ").concat(important, ";\n "),
11609
- gapMode === 'padding' && "padding-right: ".concat(gap, "px ").concat(important, ";"),
11610
- ]
11611
- .filter(Boolean)
11612
- .join(''), "\n }\n \n .").concat(zeroRightClassName, " {\n right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " {\n margin-right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n right: 0 ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n margin-right: 0 ").concat(important, ";\n }\n \n body[").concat(lockAttribute, "] {\n ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n }\n");
11613
- };
11614
- var getCurrentUseCounter = function () {
11615
- var counter = parseInt(document.body.getAttribute(lockAttribute) || '0', 10);
11616
- return isFinite(counter) ? counter : 0;
11617
- };
11618
- var useLockAttribute = function () {
11619
- React.useEffect(function () {
11620
- document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
11621
- return function () {
11622
- var newCounter = getCurrentUseCounter() - 1;
11623
- if (newCounter <= 0) {
11624
- document.body.removeAttribute(lockAttribute);
11625
- }
11626
- else {
11627
- document.body.setAttribute(lockAttribute, newCounter.toString());
11628
- }
11629
- };
11630
- }, []);
11631
- };
11632
- /**
11633
- * Removes page scrollbar and blocks page scroll when mounted
11634
- */
11635
- var RemoveScrollBar = function (_a) {
11636
- var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
11637
- useLockAttribute();
11638
- /*
11639
- gap will be measured on every component mount
11640
- however it will be used only by the "first" invocation
11641
- due to singleton nature of <Style
11642
- */
11643
- var gap = React.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
11644
- return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
11645
- };
11646
-
11647
- var passiveSupported = false;
11648
- if (typeof window !== 'undefined') {
11649
- try {
11650
- var options = Object.defineProperty({}, 'passive', {
11651
- get: function () {
11652
- passiveSupported = true;
11653
- return true;
11654
- },
11655
- });
11656
- // @ts-ignore
11657
- window.addEventListener('test', options, options);
11658
- // @ts-ignore
11659
- window.removeEventListener('test', options, options);
11660
- }
11661
- catch (err) {
11662
- passiveSupported = false;
11663
- }
11664
- }
11665
- var nonPassive = passiveSupported ? { passive: false } : false;
11666
-
11667
- var alwaysContainsScroll = function (node) {
11668
- // textarea will always _contain_ scroll inside self. It only can be hidden
11669
- return node.tagName === 'TEXTAREA';
11670
- };
11671
- var elementCanBeScrolled = function (node, overflow) {
11672
- if (!(node instanceof Element)) {
11673
- return false;
11674
- }
11675
- var styles = window.getComputedStyle(node);
11676
- return (
11677
- // not-not-scrollable
11678
- styles[overflow] !== 'hidden' &&
11679
- // contains scroll inside self
11680
- !(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === 'visible'));
11681
- };
11682
- var elementCouldBeVScrolled = function (node) { return elementCanBeScrolled(node, 'overflowY'); };
11683
- var elementCouldBeHScrolled = function (node) { return elementCanBeScrolled(node, 'overflowX'); };
11684
- var locationCouldBeScrolled = function (axis, node) {
11685
- var ownerDocument = node.ownerDocument;
11686
- var current = node;
11687
- do {
11688
- // Skip over shadow root
11689
- if (typeof ShadowRoot !== 'undefined' && current instanceof ShadowRoot) {
11690
- current = current.host;
11691
- }
11692
- var isScrollable = elementCouldBeScrolled(axis, current);
11693
- if (isScrollable) {
11694
- var _a = getScrollVariables(axis, current), scrollHeight = _a[1], clientHeight = _a[2];
11695
- if (scrollHeight > clientHeight) {
11696
- return true;
11697
- }
11698
- }
11699
- current = current.parentNode;
11700
- } while (current && current !== ownerDocument.body);
11701
- return false;
11702
- };
11703
- var getVScrollVariables = function (_a) {
11704
- var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
11705
- return [
11706
- scrollTop,
11707
- scrollHeight,
11708
- clientHeight,
11709
- ];
11710
- };
11711
- var getHScrollVariables = function (_a) {
11712
- var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
11713
- return [
11714
- scrollLeft,
11715
- scrollWidth,
11716
- clientWidth,
11717
- ];
11718
- };
11719
- var elementCouldBeScrolled = function (axis, node) {
11720
- return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);
11721
- };
11722
- var getScrollVariables = function (axis, node) {
11723
- return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node);
11724
- };
11725
- var getDirectionFactor = function (axis, direction) {
11726
- /**
11727
- * If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position,
11728
- * and then increasingly negative as you scroll towards the end of the content.
11729
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
11730
- */
11731
- return axis === 'h' && direction === 'rtl' ? -1 : 1;
11732
- };
11733
- var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {
11734
- var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);
11735
- var delta = directionFactor * sourceDelta;
11736
- // find scrollable target
11737
- var target = event.target;
11738
- var targetInLock = endTarget.contains(target);
11739
- var shouldCancelScroll = false;
11740
- var isDeltaPositive = delta > 0;
11741
- var availableScroll = 0;
11742
- var availableScrollTop = 0;
11743
- do {
11744
- if (!target) {
11745
- break;
11746
- }
11747
- var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
11748
- var elementScroll = scroll_1 - capacity - directionFactor * position;
11749
- if (position || elementScroll) {
11750
- if (elementCouldBeScrolled(axis, target)) {
11751
- availableScroll += elementScroll;
11752
- availableScrollTop += position;
11753
- }
11754
- }
11755
- var parent_1 = target.parentNode;
11756
- // we will "bubble" from ShadowDom in case we are, or just to the parent in normal case
11757
- // this is the same logic used in focus-lock
11758
- target = (parent_1 && parent_1.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? parent_1.host : parent_1);
11759
- } while (
11760
- // portaled content
11761
- (!targetInLock && target !== document.body) ||
11762
- // self content
11763
- (targetInLock && (endTarget.contains(target) || endTarget === target)));
11764
- // handle epsilon around 0 (non standard zoom levels)
11765
- if (isDeltaPositive &&
11766
- ((Math.abs(availableScroll) < 1) || (false))) {
11767
- shouldCancelScroll = true;
11768
- }
11769
- else if (!isDeltaPositive &&
11770
- ((Math.abs(availableScrollTop) < 1) || (false))) {
11771
- shouldCancelScroll = true;
11772
- }
11773
- return shouldCancelScroll;
11774
- };
11775
-
11776
- var getTouchXY = function (event) {
11777
- return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
11778
- };
11779
- var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };
11780
- var extractRef = function (ref) {
11781
- return ref && 'current' in ref ? ref.current : ref;
11782
- };
11783
- var deltaCompare = function (x, y) { return x[0] === y[0] && x[1] === y[1]; };
11784
- var generateStyle = function (id) { return "\n .block-interactivity-".concat(id, " {pointer-events: none;}\n .allow-interactivity-").concat(id, " {pointer-events: all;}\n"); };
11785
- var idCounter = 0;
11786
- var lockStack = [];
11787
- function RemoveScrollSideCar(props) {
11788
- var shouldPreventQueue = React.useRef([]);
11789
- var touchStartRef = React.useRef([0, 0]);
11790
- var activeAxis = React.useRef();
11791
- var id = React.useState(idCounter++)[0];
11792
- var Style = React.useState(styleSingleton)[0];
11793
- var lastProps = React.useRef(props);
11794
- React.useEffect(function () {
11795
- lastProps.current = props;
11796
- }, [props]);
11797
- React.useEffect(function () {
11798
- if (props.inert) {
11799
- document.body.classList.add("block-interactivity-".concat(id));
11800
- var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
11801
- allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-".concat(id)); });
11802
- return function () {
11803
- document.body.classList.remove("block-interactivity-".concat(id));
11804
- allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-".concat(id)); });
11805
- };
11806
- }
11807
- return;
11808
- }, [props.inert, props.lockRef.current, props.shards]);
11809
- var shouldCancelEvent = React.useCallback(function (event, parent) {
11810
- if (('touches' in event && event.touches.length === 2) || (event.type === 'wheel' && event.ctrlKey)) {
11811
- return !lastProps.current.allowPinchZoom;
11812
- }
11813
- var touch = getTouchXY(event);
11814
- var touchStart = touchStartRef.current;
11815
- var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0];
11816
- var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1];
11817
- var currentAxis;
11818
- var target = event.target;
11819
- var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';
11820
- // allow horizontal touch move on Range inputs. They will not cause any scroll
11821
- if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
11822
- return false;
11823
- }
11824
- // allow drag selection (iOS); check if selection's anchorNode is the same as target or contains target
11825
- var selection = window.getSelection();
11826
- var anchorNode = selection && selection.anchorNode;
11827
- var isTouchingSelection = anchorNode ? anchorNode === target || anchorNode.contains(target) : false;
11828
- if (isTouchingSelection) {
11829
- return false;
11830
- }
11831
- var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
11832
- if (!canBeScrolledInMainDirection) {
11833
- return true;
11834
- }
11835
- if (canBeScrolledInMainDirection) {
11836
- currentAxis = moveDirection;
11837
- }
11838
- else {
11839
- currentAxis = moveDirection === 'v' ? 'h' : 'v';
11840
- canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
11841
- // other axis might be not scrollable
11842
- }
11843
- if (!canBeScrolledInMainDirection) {
11844
- return false;
11845
- }
11846
- if (!activeAxis.current && 'changedTouches' in event && (deltaX || deltaY)) {
11847
- activeAxis.current = currentAxis;
11848
- }
11849
- if (!currentAxis) {
11850
- return true;
11851
- }
11852
- var cancelingAxis = activeAxis.current || currentAxis;
11853
- return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY);
11854
- }, []);
11855
- var shouldPrevent = React.useCallback(function (_event) {
11856
- var event = _event;
11857
- if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
11858
- // not the last active
11859
- return;
11860
- }
11861
- var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
11862
- var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta); })[0];
11863
- // self event, and should be canceled
11864
- if (sourceEvent && sourceEvent.should) {
11865
- if (event.cancelable) {
11866
- event.preventDefault();
11867
- }
11868
- return;
11869
- }
11870
- // outside or shard event
11871
- if (!sourceEvent) {
11872
- var shardNodes = (lastProps.current.shards || [])
11873
- .map(extractRef)
11874
- .filter(Boolean)
11875
- .filter(function (node) { return node.contains(event.target); });
11876
- var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
11877
- if (shouldStop) {
11878
- if (event.cancelable) {
11879
- event.preventDefault();
11880
- }
11881
- }
11882
- }
11883
- }, []);
11884
- var shouldCancel = React.useCallback(function (name, delta, target, should) {
11885
- var event = { name: name, delta: delta, target: target, should: should, shadowParent: getOutermostShadowParent(target) };
11886
- shouldPreventQueue.current.push(event);
11887
- setTimeout(function () {
11888
- shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });
11889
- }, 1);
11890
- }, []);
11891
- var scrollTouchStart = React.useCallback(function (event) {
11892
- touchStartRef.current = getTouchXY(event);
11893
- activeAxis.current = undefined;
11894
- }, []);
11895
- var scrollWheel = React.useCallback(function (event) {
11896
- shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
11897
- }, []);
11898
- var scrollTouchMove = React.useCallback(function (event) {
11899
- shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
11900
- }, []);
11901
- React.useEffect(function () {
11902
- lockStack.push(Style);
11903
- props.setCallbacks({
11904
- onScrollCapture: scrollWheel,
11905
- onWheelCapture: scrollWheel,
11906
- onTouchMoveCapture: scrollTouchMove,
11907
- });
11908
- document.addEventListener('wheel', shouldPrevent, nonPassive);
11909
- document.addEventListener('touchmove', shouldPrevent, nonPassive);
11910
- document.addEventListener('touchstart', scrollTouchStart, nonPassive);
11911
- return function () {
11912
- lockStack = lockStack.filter(function (inst) { return inst !== Style; });
11913
- document.removeEventListener('wheel', shouldPrevent, nonPassive);
11914
- document.removeEventListener('touchmove', shouldPrevent, nonPassive);
11915
- document.removeEventListener('touchstart', scrollTouchStart, nonPassive);
11916
- };
11917
- }, []);
11918
- var removeScrollBar = props.removeScrollBar, inert = props.inert;
11919
- return (React.createElement(React.Fragment, null,
11920
- inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,
11921
- removeScrollBar ? React.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null));
11922
- }
11923
- function getOutermostShadowParent(node) {
11924
- var shadowParent = null;
11925
- while (node !== null) {
11926
- if (node instanceof ShadowRoot) {
11927
- shadowParent = node.host;
11928
- node = node.host;
11929
- }
11930
- node = node.parentNode;
11931
- }
11932
- return shadowParent;
11933
- }
11934
-
11935
- const SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
11936
-
11937
- var ReactRemoveScroll = React.forwardRef(function (props, ref) { return (React.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: SideCar }))); });
11938
- ReactRemoveScroll.classNames = RemoveScroll.classNames;
11939
-
11940
8069
  var POPOVER_NAME = "Popover";
11941
8070
  var [createPopoverContext] = createContextScope(POPOVER_NAME, [
11942
8071
  createPopperScope