@eightshift/ui-components 5.6.1 → 6.0.1

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 (146) hide show
  1. package/dist/{Button-CQ5ZZJ2w.js → Button-BXjXzdW_.js} +13 -13
  2. package/dist/{Dialog-BMgMUQuN.js → Dialog-D8bjn-nh.js} +404 -77
  3. package/dist/{FieldError-B8BgFmIQ.js → FieldError-DwBG6m1U.js} +2 -2
  4. package/dist/{FocusScope-B5vxRkHm.js → FocusScope-BMk5oZCk.js} +8 -8
  5. package/dist/{Heading-B5aEynOM.js → Heading-BmRX4BRL.js} +3 -3
  6. package/dist/{Hidden-rE6uR-lr.js → Hidden-Rfj-STx7.js} +4 -4
  7. package/dist/{Input-8yja_IHC.js → Input-CNNksOWg.js} +11 -11
  8. package/dist/{Label-DWVaNd2E.js → Label-D8a3eYb-.js} +4 -4
  9. package/dist/{List-BiAnh5G5.js → List-BGHOoFf0.js} +8 -8
  10. package/dist/{ListBox-DggfiuO_.js → ListBox-Dd37zMvs.js} +40 -41
  11. package/dist/{OverlayArrow-DraDOoRn.js → OverlayArrow-DokC40S3.js} +6 -6
  12. package/dist/{PortalProvider---wyKpMr.js → PortalProvider-CHPnqDSH.js} +2 -2
  13. package/dist/RadioGroup-BVFvITWO.js +371 -0
  14. package/dist/{SearchField-DWGdCvnn.js → SearchField-CHYnN-jt.js} +16 -16
  15. package/dist/{SelectionManager-B6-b5NM2.js → SelectionManager-N8X7T_4D.js} +44 -46
  16. package/dist/{SharedElementTransition-fML-zIv6.js → SharedElementTransition-BDT84GtD.js} +3 -3
  17. package/dist/{Slider-DfU6bRtH.js → Slider-CL5CM9S8.js} +23 -23
  18. package/dist/{Text-AxKZjtFm.js → Text-ztX6G1zR.js} +3 -3
  19. package/dist/{VisuallyHidden-CgnIuZJ2.js → VisuallyHidden-DTUuKFiI.js} +4 -4
  20. package/dist/assets/style-admin.css +12156 -2
  21. package/dist/assets/style-editor.css +12156 -2
  22. package/dist/assets/style.css +12162 -2
  23. package/dist/assets/wp-overrides/allow-full-width-blocks.css +6 -0
  24. package/dist/assets/wp-overrides/fix-label-text-case.css +29 -0
  25. package/dist/assets/wp-overrides/increase-sidebar-width.css +4 -0
  26. package/dist/assets/wp-overrides/make-block-messages-nicer.css +155 -0
  27. package/dist/assets/wp-overrides/replace-fonts.css +8 -0
  28. package/dist/assets/wp-overrides/restyle-tooltips.css +194 -0
  29. package/dist/assets/wp-overrides/round-corners.css +200 -0
  30. package/dist/assets/wp-overrides/unify-button-sizes.css +5 -0
  31. package/dist/clsx-DgYk2OaC.js +16 -0
  32. package/dist/{Color-WxFE7lQB.js → color-swatch-CFIuSPcO.js} +124 -6
  33. package/dist/components/animated-visibility/animated-visibility.js +25 -17
  34. package/dist/components/base-control/base-control.js +8 -5
  35. package/dist/components/base-control/container.js +204 -0
  36. package/dist/components/button/button.js +249 -155
  37. package/dist/components/checkbox/checkbox.js +96 -37
  38. package/dist/components/color-pickers/color-picker.js +16 -7
  39. package/dist/components/color-pickers/color-swatch.js +5 -57
  40. package/dist/components/color-pickers/gradient-editor.js +161 -138
  41. package/dist/components/color-pickers/solid-color-picker.js +308 -206
  42. package/dist/components/component-toggle/component-toggle.js +12 -8
  43. package/dist/components/container-panel/container-panel.js +54 -31
  44. package/dist/components/draggable/draggable-handle.js +8 -7
  45. package/dist/components/draggable/draggable.js +2 -2
  46. package/dist/components/draggable-list/draggable-list-item.js +21 -12
  47. package/dist/components/draggable-list/draggable-list.js +19 -21
  48. package/dist/components/expandable/expandable.js +56 -28
  49. package/dist/components/index.js +7 -21
  50. package/dist/components/input-field/input-field.js +112 -35
  51. package/dist/components/item-collection/item-collection.js +1 -1
  52. package/dist/components/link-input/link-input.js +181 -121
  53. package/dist/components/matrix-align/matrix-align.js +54 -20
  54. package/dist/components/menu/menu.js +26 -34
  55. package/dist/components/modal/modal.js +31 -28
  56. package/dist/components/notice/notice.js +45 -28
  57. package/dist/components/number-picker/number-picker.js +151 -101
  58. package/dist/components/option-select/option-select.js +40 -4
  59. package/dist/components/options-panel/options-panel.js +52 -25
  60. package/dist/components/placeholders/file-picker-shell.js +10 -9
  61. package/dist/components/placeholders/file-placeholder.js +14 -6
  62. package/dist/components/placeholders/image-placeholder.js +14 -4
  63. package/dist/components/placeholders/media-placeholder.js +11 -4
  64. package/dist/components/popover/popover.js +14 -11
  65. package/dist/components/portal-provider/portal-provider.js +1 -1
  66. package/dist/components/radio/radio.js +118 -429
  67. package/dist/components/repeater/repeater-item.js +7 -10
  68. package/dist/components/repeater/repeater.js +9 -15
  69. package/dist/components/responsive/mini-responsive.js +53 -61
  70. package/dist/components/responsive/responsive-legacy.js +1 -1
  71. package/dist/components/responsive/responsive.js +27 -27
  72. package/dist/components/responsive-preview/responsive-preview.js +1 -1
  73. package/dist/components/rich-label/rich-label.js +5 -5
  74. package/dist/components/select/async-multi-select.js +467 -100
  75. package/dist/components/select/{v2/async-select.js → async-select.js} +182 -105
  76. package/dist/components/select/multi-select.js +437 -83
  77. package/dist/components/select/shared.js +14 -42
  78. package/dist/components/select/single-select.js +349 -54
  79. package/dist/components/slider/column-config-slider.js +138 -45
  80. package/dist/components/slider/slider.js +265 -205
  81. package/dist/components/slider/utils.js +32 -1
  82. package/dist/components/smart-image/smart-image.js +25 -4
  83. package/dist/components/smart-image/worker-inline.js +1 -1
  84. package/dist/components/spacer/spacer.js +2 -2
  85. package/dist/components/tabs/tabs.js +370 -101
  86. package/dist/components/toggle/switch.js +174 -39
  87. package/dist/components/toggle/toggle.js +6 -3
  88. package/dist/components/toggle-button/toggle-button.js +140 -56
  89. package/dist/components/tooltip/tooltip.js +27 -26
  90. package/dist/{context-DMOmz986.js → context-BQvmiUqb.js} +3 -3
  91. package/dist/{default-i18n-DBm-GqWM.js → default-i18n-CnQeC5Pl.js} +10 -10
  92. package/dist/{general-Ck8IV7xJ.js → general-B6pOveVp.js} +11 -10
  93. package/dist/icons/icons.js +28 -9
  94. package/dist/icons/jsx-svg.js +1 -1
  95. package/dist/icons/spinner.js +3 -1
  96. package/dist/{index-Dq3gT5pW.js → index-BHpUy2Ix.js} +1 -1
  97. package/dist/{index-D8-Zjpbd.js → index-oFgxU4zs.js} +3 -3
  98. package/dist/index.js +6 -20
  99. package/dist/proxy-0B6wWuDe.js +7409 -0
  100. package/dist/{react-jsx-parser.min-VUl-CuCv.js → react-jsx-parser.min-B_hvYYa1.js} +5 -5
  101. package/dist/{Select-BvggcFOX.js → shared-DwjRce5e.js} +170 -36
  102. package/dist/{textSelection-DbCKqaw8.js → textSelection-CwHUtNVX.js} +1 -1
  103. package/dist/{useButton-v9ngEj50.js → useButton-DdZrS1Kz.js} +3 -3
  104. package/dist/{useEvent-BifIGnVS.js → useEvent-BD7Olibq.js} +1 -1
  105. package/dist/{useFilter-BlkUH1Ma.js → useFilter-bhxeEDg8.js} +1 -1
  106. package/dist/{useFocusRing-Cgm0R4Cf.js → useFocusRing-D3b7Kh4P.js} +1 -1
  107. package/dist/{useFormReset-yV9VVy9R.js → useFormReset-WUv2PdFO.js} +1 -1
  108. package/dist/{useFormValidation-CeNsUGWK.js → useFormValidation-DQeXkyLm.js} +2 -2
  109. package/dist/{useHover-BRDW3y7-.js → useHover-Bycb7BsD.js} +7 -7
  110. package/dist/{useLabel-C8umX0gk.js → useLabel-Bnv4-T24.js} +2 -2
  111. package/dist/{useLabels-Cdxi6JSa.js → useLabels-B49ptFDX.js} +1 -1
  112. package/dist/{useListState-RdLrYsMP.js → useListState-ZKhRO8ML.js} +1 -1
  113. package/dist/{useLocalizedStringFormatter-eaZiN2tE.js → useLocalizedStringFormatter-NETP-8H8.js} +1 -1
  114. package/dist/{useNumberField-D16dDfYF.js → useNumberField-D2fUHql3.js} +10 -10
  115. package/dist/{useNumberFormatter-BCmkV-7c.js → useNumberFormatter-DGvuRCn7.js} +1 -1
  116. package/dist/{usePress-DJskZBH9.js → usePress-B8OteQMu.js} +6 -6
  117. package/dist/{useSingleSelectListState-n0AVMr3Y.js → useSingleSelectListState-BBTu4shO.js} +2 -2
  118. package/dist/{useToggle-DSBDAfdw.js → useToggle-BZhaYwZl.js} +4 -4
  119. package/dist/{useToggleState-CzN79ary.js → useToggleState-VkXJjsru.js} +1 -1
  120. package/dist/utilities/general.js +1 -1
  121. package/dist/utilities/index.js +1 -1
  122. package/dist/{utils-cvK1vxO7.js → utils-DGpXyJOJ.js} +29 -42
  123. package/dist/workers/image-analysis.worker.js +3 -3
  124. package/package.json +26 -22
  125. package/dist/ColorSwatch-xVS3rMYS.js +0 -66
  126. package/dist/Select-ef7c0426.esm-CmTkSxDx.js +0 -2474
  127. package/dist/Separator-B-xeqOkC.js +0 -344
  128. package/dist/assets/wp-font-enhancements.css +0 -2
  129. package/dist/assets/wp-ui-enhancements.css +0 -2
  130. package/dist/components/select/async-single-select.js +0 -138
  131. package/dist/components/select/custom-select-default-components.js +0 -38
  132. package/dist/components/select/multi-select-components.js +0 -8
  133. package/dist/components/select/react-select-component-wrappers.js +0 -90
  134. package/dist/components/select/styles.js +0 -49
  135. package/dist/components/select/v2/async-multi-select.js +0 -432
  136. package/dist/components/select/v2/multi-select.js +0 -403
  137. package/dist/components/select/v2/shared.js +0 -69
  138. package/dist/components/select/v2/single-select.js +0 -358
  139. package/dist/index-641ee5b8.esm-DVp0njHa.js +0 -3139
  140. package/dist/modifiers.esm-BuJQPI1X.js +0 -31
  141. package/dist/multi-select-components-CT_W0Cy9.js +0 -3744
  142. package/dist/react-select-async.esm-Zl1LPaPb.js +0 -107
  143. package/dist/react-select.esm-Bu36HujU.js +0 -15
  144. package/dist/useDragAndDrop-C08ZXv4F.js +0 -3925
  145. package/dist/wp/wp-font-enhancements.js +0 -1
  146. package/dist/wp/wp-ui-enhancements.js +0 -1
@@ -1,3744 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import React__default, { useLayoutEffect, useEffect, useRef, useMemo, useCallback, useState, createContext, memo, useReducer, useContext } from "react";
3
- import { r as reactDomExports } from "./index-D8-Zjpbd.js";
4
- import { c as clsx } from "./lite-DVmmD_-j.js";
5
- function useCombinedRefs() {
6
- for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
7
- refs[_key] = arguments[_key];
8
- }
9
- return useMemo(
10
- () => (node) => {
11
- refs.forEach((ref) => ref(node));
12
- },
13
- // eslint-disable-next-line react-hooks/exhaustive-deps
14
- refs
15
- );
16
- }
17
- const canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
18
- function isWindow(element) {
19
- const elementString = Object.prototype.toString.call(element);
20
- return elementString === "[object Window]" || // In Electron context the Window object serializes to [object global]
21
- elementString === "[object global]";
22
- }
23
- function isNode(node) {
24
- return "nodeType" in node;
25
- }
26
- function getWindow(target) {
27
- var _target$ownerDocument, _target$ownerDocument2;
28
- if (!target) {
29
- return window;
30
- }
31
- if (isWindow(target)) {
32
- return target;
33
- }
34
- if (!isNode(target)) {
35
- return window;
36
- }
37
- return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
38
- }
39
- function isDocument(node) {
40
- const {
41
- Document
42
- } = getWindow(node);
43
- return node instanceof Document;
44
- }
45
- function isHTMLElement(node) {
46
- if (isWindow(node)) {
47
- return false;
48
- }
49
- return node instanceof getWindow(node).HTMLElement;
50
- }
51
- function isSVGElement(node) {
52
- return node instanceof getWindow(node).SVGElement;
53
- }
54
- function getOwnerDocument(target) {
55
- if (!target) {
56
- return document;
57
- }
58
- if (isWindow(target)) {
59
- return target.document;
60
- }
61
- if (!isNode(target)) {
62
- return document;
63
- }
64
- if (isDocument(target)) {
65
- return target;
66
- }
67
- if (isHTMLElement(target) || isSVGElement(target)) {
68
- return target.ownerDocument;
69
- }
70
- return document;
71
- }
72
- const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
73
- function useEvent(handler) {
74
- const handlerRef = useRef(handler);
75
- useIsomorphicLayoutEffect(() => {
76
- handlerRef.current = handler;
77
- });
78
- return useCallback(function() {
79
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
80
- args[_key] = arguments[_key];
81
- }
82
- return handlerRef.current == null ? void 0 : handlerRef.current(...args);
83
- }, []);
84
- }
85
- function useInterval() {
86
- const intervalRef = useRef(null);
87
- const set = useCallback((listener, duration) => {
88
- intervalRef.current = setInterval(listener, duration);
89
- }, []);
90
- const clear = useCallback(() => {
91
- if (intervalRef.current !== null) {
92
- clearInterval(intervalRef.current);
93
- intervalRef.current = null;
94
- }
95
- }, []);
96
- return [set, clear];
97
- }
98
- function useLatestValue(value, dependencies) {
99
- if (dependencies === void 0) {
100
- dependencies = [value];
101
- }
102
- const valueRef = useRef(value);
103
- useIsomorphicLayoutEffect(() => {
104
- if (valueRef.current !== value) {
105
- valueRef.current = value;
106
- }
107
- }, dependencies);
108
- return valueRef;
109
- }
110
- function useLazyMemo(callback, dependencies) {
111
- const valueRef = useRef();
112
- return useMemo(
113
- () => {
114
- const newValue = callback(valueRef.current);
115
- valueRef.current = newValue;
116
- return newValue;
117
- },
118
- // eslint-disable-next-line react-hooks/exhaustive-deps
119
- [...dependencies]
120
- );
121
- }
122
- function useNodeRef(onChange) {
123
- const onChangeHandler = useEvent(onChange);
124
- const node = useRef(null);
125
- const setNodeRef = useCallback(
126
- (element) => {
127
- if (element !== node.current) {
128
- onChangeHandler == null ? void 0 : onChangeHandler(element, node.current);
129
- }
130
- node.current = element;
131
- },
132
- //eslint-disable-next-line
133
- []
134
- );
135
- return [node, setNodeRef];
136
- }
137
- function usePrevious(value) {
138
- const ref = useRef();
139
- useEffect(() => {
140
- ref.current = value;
141
- }, [value]);
142
- return ref.current;
143
- }
144
- let ids = {};
145
- function useUniqueId(prefix, value) {
146
- return useMemo(() => {
147
- if (value) {
148
- return value;
149
- }
150
- const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
151
- ids[prefix] = id;
152
- return prefix + "-" + id;
153
- }, [prefix, value]);
154
- }
155
- function createAdjustmentFn(modifier) {
156
- return function(object) {
157
- for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
158
- adjustments[_key - 1] = arguments[_key];
159
- }
160
- return adjustments.reduce((accumulator, adjustment) => {
161
- const entries = Object.entries(adjustment);
162
- for (const [key, valueAdjustment] of entries) {
163
- const value = accumulator[key];
164
- if (value != null) {
165
- accumulator[key] = value + modifier * valueAdjustment;
166
- }
167
- }
168
- return accumulator;
169
- }, {
170
- ...object
171
- });
172
- };
173
- }
174
- const add = /* @__PURE__ */ createAdjustmentFn(1);
175
- const subtract = /* @__PURE__ */ createAdjustmentFn(-1);
176
- function hasViewportRelativeCoordinates(event) {
177
- return "clientX" in event && "clientY" in event;
178
- }
179
- function isKeyboardEvent(event) {
180
- if (!event) {
181
- return false;
182
- }
183
- const {
184
- KeyboardEvent
185
- } = getWindow(event.target);
186
- return KeyboardEvent && event instanceof KeyboardEvent;
187
- }
188
- function isTouchEvent(event) {
189
- if (!event) {
190
- return false;
191
- }
192
- const {
193
- TouchEvent
194
- } = getWindow(event.target);
195
- return TouchEvent && event instanceof TouchEvent;
196
- }
197
- function getEventCoordinates(event) {
198
- if (isTouchEvent(event)) {
199
- if (event.touches && event.touches.length) {
200
- const {
201
- clientX: x,
202
- clientY: y
203
- } = event.touches[0];
204
- return {
205
- x,
206
- y
207
- };
208
- } else if (event.changedTouches && event.changedTouches.length) {
209
- const {
210
- clientX: x,
211
- clientY: y
212
- } = event.changedTouches[0];
213
- return {
214
- x,
215
- y
216
- };
217
- }
218
- }
219
- if (hasViewportRelativeCoordinates(event)) {
220
- return {
221
- x: event.clientX,
222
- y: event.clientY
223
- };
224
- }
225
- return null;
226
- }
227
- const CSS = /* @__PURE__ */ Object.freeze({
228
- Translate: {
229
- toString(transform) {
230
- if (!transform) {
231
- return;
232
- }
233
- const {
234
- x,
235
- y
236
- } = transform;
237
- return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
238
- }
239
- },
240
- Scale: {
241
- toString(transform) {
242
- if (!transform) {
243
- return;
244
- }
245
- const {
246
- scaleX,
247
- scaleY
248
- } = transform;
249
- return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
250
- }
251
- },
252
- Transform: {
253
- toString(transform) {
254
- if (!transform) {
255
- return;
256
- }
257
- return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
258
- }
259
- },
260
- Transition: {
261
- toString(_ref) {
262
- let {
263
- property,
264
- duration,
265
- easing
266
- } = _ref;
267
- return property + " " + duration + "ms " + easing;
268
- }
269
- }
270
- });
271
- const SELECTOR = "a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";
272
- function findFirstFocusableNode(element) {
273
- if (element.matches(SELECTOR)) {
274
- return element;
275
- }
276
- return element.querySelector(SELECTOR);
277
- }
278
- const hiddenStyles = {
279
- display: "none"
280
- };
281
- function HiddenText(_ref) {
282
- let {
283
- id,
284
- value
285
- } = _ref;
286
- return React__default.createElement("div", {
287
- id,
288
- style: hiddenStyles
289
- }, value);
290
- }
291
- function LiveRegion(_ref) {
292
- let {
293
- id,
294
- announcement,
295
- ariaLiveType = "assertive"
296
- } = _ref;
297
- const visuallyHidden = {
298
- position: "fixed",
299
- top: 0,
300
- left: 0,
301
- width: 1,
302
- height: 1,
303
- margin: -1,
304
- border: 0,
305
- padding: 0,
306
- overflow: "hidden",
307
- clip: "rect(0 0 0 0)",
308
- clipPath: "inset(100%)",
309
- whiteSpace: "nowrap"
310
- };
311
- return React__default.createElement("div", {
312
- id,
313
- style: visuallyHidden,
314
- role: "status",
315
- "aria-live": ariaLiveType,
316
- "aria-atomic": true
317
- }, announcement);
318
- }
319
- function useAnnouncement() {
320
- const [announcement, setAnnouncement] = useState("");
321
- const announce = useCallback((value) => {
322
- if (value != null) {
323
- setAnnouncement(value);
324
- }
325
- }, []);
326
- return {
327
- announce,
328
- announcement
329
- };
330
- }
331
- const DndMonitorContext = /* @__PURE__ */ createContext(null);
332
- function useDndMonitor(listener) {
333
- const registerListener = useContext(DndMonitorContext);
334
- useEffect(() => {
335
- if (!registerListener) {
336
- throw new Error("useDndMonitor must be used within a children of <DndContext>");
337
- }
338
- const unsubscribe = registerListener(listener);
339
- return unsubscribe;
340
- }, [listener, registerListener]);
341
- }
342
- function useDndMonitorProvider() {
343
- const [listeners] = useState(() => /* @__PURE__ */ new Set());
344
- const registerListener = useCallback((listener) => {
345
- listeners.add(listener);
346
- return () => listeners.delete(listener);
347
- }, [listeners]);
348
- const dispatch = useCallback((_ref) => {
349
- let {
350
- type,
351
- event
352
- } = _ref;
353
- listeners.forEach((listener) => {
354
- var _listener$type;
355
- return (_listener$type = listener[type]) == null ? void 0 : _listener$type.call(listener, event);
356
- });
357
- }, [listeners]);
358
- return [dispatch, registerListener];
359
- }
360
- const defaultScreenReaderInstructions = {
361
- draggable: "\n To pick up a draggable item, press the space bar.\n While dragging, use the arrow keys to move the item.\n Press space again to drop the item in its new position, or press escape to cancel.\n "
362
- };
363
- const defaultAnnouncements = {
364
- onDragStart(_ref) {
365
- let {
366
- active
367
- } = _ref;
368
- return "Picked up draggable item " + active.id + ".";
369
- },
370
- onDragOver(_ref2) {
371
- let {
372
- active,
373
- over
374
- } = _ref2;
375
- if (over) {
376
- return "Draggable item " + active.id + " was moved over droppable area " + over.id + ".";
377
- }
378
- return "Draggable item " + active.id + " is no longer over a droppable area.";
379
- },
380
- onDragEnd(_ref3) {
381
- let {
382
- active,
383
- over
384
- } = _ref3;
385
- if (over) {
386
- return "Draggable item " + active.id + " was dropped over droppable area " + over.id;
387
- }
388
- return "Draggable item " + active.id + " was dropped.";
389
- },
390
- onDragCancel(_ref4) {
391
- let {
392
- active
393
- } = _ref4;
394
- return "Dragging was cancelled. Draggable item " + active.id + " was dropped.";
395
- }
396
- };
397
- function Accessibility(_ref) {
398
- let {
399
- announcements = defaultAnnouncements,
400
- container,
401
- hiddenTextDescribedById,
402
- screenReaderInstructions = defaultScreenReaderInstructions
403
- } = _ref;
404
- const {
405
- announce,
406
- announcement
407
- } = useAnnouncement();
408
- const liveRegionId = useUniqueId("DndLiveRegion");
409
- const [mounted, setMounted] = useState(false);
410
- useEffect(() => {
411
- setMounted(true);
412
- }, []);
413
- useDndMonitor(useMemo(() => ({
414
- onDragStart(_ref2) {
415
- let {
416
- active
417
- } = _ref2;
418
- announce(announcements.onDragStart({
419
- active
420
- }));
421
- },
422
- onDragMove(_ref3) {
423
- let {
424
- active,
425
- over
426
- } = _ref3;
427
- if (announcements.onDragMove) {
428
- announce(announcements.onDragMove({
429
- active,
430
- over
431
- }));
432
- }
433
- },
434
- onDragOver(_ref4) {
435
- let {
436
- active,
437
- over
438
- } = _ref4;
439
- announce(announcements.onDragOver({
440
- active,
441
- over
442
- }));
443
- },
444
- onDragEnd(_ref5) {
445
- let {
446
- active,
447
- over
448
- } = _ref5;
449
- announce(announcements.onDragEnd({
450
- active,
451
- over
452
- }));
453
- },
454
- onDragCancel(_ref6) {
455
- let {
456
- active,
457
- over
458
- } = _ref6;
459
- announce(announcements.onDragCancel({
460
- active,
461
- over
462
- }));
463
- }
464
- }), [announce, announcements]));
465
- if (!mounted) {
466
- return null;
467
- }
468
- const markup = React__default.createElement(React__default.Fragment, null, React__default.createElement(HiddenText, {
469
- id: hiddenTextDescribedById,
470
- value: screenReaderInstructions.draggable
471
- }), React__default.createElement(LiveRegion, {
472
- id: liveRegionId,
473
- announcement
474
- }));
475
- return container ? reactDomExports.createPortal(markup, container) : markup;
476
- }
477
- var Action;
478
- (function(Action2) {
479
- Action2["DragStart"] = "dragStart";
480
- Action2["DragMove"] = "dragMove";
481
- Action2["DragEnd"] = "dragEnd";
482
- Action2["DragCancel"] = "dragCancel";
483
- Action2["DragOver"] = "dragOver";
484
- Action2["RegisterDroppable"] = "registerDroppable";
485
- Action2["SetDroppableDisabled"] = "setDroppableDisabled";
486
- Action2["UnregisterDroppable"] = "unregisterDroppable";
487
- })(Action || (Action = {}));
488
- function noop() {
489
- }
490
- const defaultCoordinates = /* @__PURE__ */ Object.freeze({
491
- x: 0,
492
- y: 0
493
- });
494
- function sortCollisionsDesc(_ref3, _ref4) {
495
- let {
496
- data: {
497
- value: a
498
- }
499
- } = _ref3;
500
- let {
501
- data: {
502
- value: b
503
- }
504
- } = _ref4;
505
- return b - a;
506
- }
507
- function getFirstCollision(collisions, property) {
508
- if (!collisions || collisions.length === 0) {
509
- return null;
510
- }
511
- const [firstCollision] = collisions;
512
- return firstCollision[property];
513
- }
514
- function getIntersectionRatio(entry, target) {
515
- const top = Math.max(target.top, entry.top);
516
- const left = Math.max(target.left, entry.left);
517
- const right = Math.min(target.left + target.width, entry.left + entry.width);
518
- const bottom = Math.min(target.top + target.height, entry.top + entry.height);
519
- const width = right - left;
520
- const height = bottom - top;
521
- if (left < right && top < bottom) {
522
- const targetArea = target.width * target.height;
523
- const entryArea = entry.width * entry.height;
524
- const intersectionArea = width * height;
525
- const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
526
- return Number(intersectionRatio.toFixed(4));
527
- }
528
- return 0;
529
- }
530
- const rectIntersection = (_ref) => {
531
- let {
532
- collisionRect,
533
- droppableRects,
534
- droppableContainers
535
- } = _ref;
536
- const collisions = [];
537
- for (const droppableContainer of droppableContainers) {
538
- const {
539
- id
540
- } = droppableContainer;
541
- const rect = droppableRects.get(id);
542
- if (rect) {
543
- const intersectionRatio = getIntersectionRatio(rect, collisionRect);
544
- if (intersectionRatio > 0) {
545
- collisions.push({
546
- id,
547
- data: {
548
- droppableContainer,
549
- value: intersectionRatio
550
- }
551
- });
552
- }
553
- }
554
- }
555
- return collisions.sort(sortCollisionsDesc);
556
- };
557
- function adjustScale(transform, rect1, rect2) {
558
- return {
559
- ...transform,
560
- scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,
561
- scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1
562
- };
563
- }
564
- function getRectDelta(rect1, rect2) {
565
- return rect1 && rect2 ? {
566
- x: rect1.left - rect2.left,
567
- y: rect1.top - rect2.top
568
- } : defaultCoordinates;
569
- }
570
- function createRectAdjustmentFn(modifier) {
571
- return function adjustClientRect(rect) {
572
- for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
573
- adjustments[_key - 1] = arguments[_key];
574
- }
575
- return adjustments.reduce((acc, adjustment) => ({
576
- ...acc,
577
- top: acc.top + modifier * adjustment.y,
578
- bottom: acc.bottom + modifier * adjustment.y,
579
- left: acc.left + modifier * adjustment.x,
580
- right: acc.right + modifier * adjustment.x
581
- }), {
582
- ...rect
583
- });
584
- };
585
- }
586
- const getAdjustedRect = /* @__PURE__ */ createRectAdjustmentFn(1);
587
- function parseTransform(transform) {
588
- if (transform.startsWith("matrix3d(")) {
589
- const transformArray = transform.slice(9, -1).split(/, /);
590
- return {
591
- x: +transformArray[12],
592
- y: +transformArray[13],
593
- scaleX: +transformArray[0],
594
- scaleY: +transformArray[5]
595
- };
596
- } else if (transform.startsWith("matrix(")) {
597
- const transformArray = transform.slice(7, -1).split(/, /);
598
- return {
599
- x: +transformArray[4],
600
- y: +transformArray[5],
601
- scaleX: +transformArray[0],
602
- scaleY: +transformArray[3]
603
- };
604
- }
605
- return null;
606
- }
607
- function inverseTransform(rect, transform, transformOrigin) {
608
- const parsedTransform = parseTransform(transform);
609
- if (!parsedTransform) {
610
- return rect;
611
- }
612
- const {
613
- scaleX,
614
- scaleY,
615
- x: translateX,
616
- y: translateY
617
- } = parsedTransform;
618
- const x = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);
619
- const y = rect.top - translateY - (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(" ") + 1));
620
- const w = scaleX ? rect.width / scaleX : rect.width;
621
- const h = scaleY ? rect.height / scaleY : rect.height;
622
- return {
623
- width: w,
624
- height: h,
625
- top: y,
626
- right: x + w,
627
- bottom: y + h,
628
- left: x
629
- };
630
- }
631
- const defaultOptions = {
632
- ignoreTransform: false
633
- };
634
- function getClientRect(element, options) {
635
- if (options === void 0) {
636
- options = defaultOptions;
637
- }
638
- let rect = element.getBoundingClientRect();
639
- if (options.ignoreTransform) {
640
- const {
641
- transform,
642
- transformOrigin
643
- } = getWindow(element).getComputedStyle(element);
644
- if (transform) {
645
- rect = inverseTransform(rect, transform, transformOrigin);
646
- }
647
- }
648
- const {
649
- top,
650
- left,
651
- width,
652
- height,
653
- bottom,
654
- right
655
- } = rect;
656
- return {
657
- top,
658
- left,
659
- width,
660
- height,
661
- bottom,
662
- right
663
- };
664
- }
665
- function getTransformAgnosticClientRect(element) {
666
- return getClientRect(element, {
667
- ignoreTransform: true
668
- });
669
- }
670
- function getWindowClientRect(element) {
671
- const width = element.innerWidth;
672
- const height = element.innerHeight;
673
- return {
674
- top: 0,
675
- left: 0,
676
- right: width,
677
- bottom: height,
678
- width,
679
- height
680
- };
681
- }
682
- function isFixed(node, computedStyle) {
683
- if (computedStyle === void 0) {
684
- computedStyle = getWindow(node).getComputedStyle(node);
685
- }
686
- return computedStyle.position === "fixed";
687
- }
688
- function isScrollable(element, computedStyle) {
689
- if (computedStyle === void 0) {
690
- computedStyle = getWindow(element).getComputedStyle(element);
691
- }
692
- const overflowRegex = /(auto|scroll|overlay)/;
693
- const properties2 = ["overflow", "overflowX", "overflowY"];
694
- return properties2.some((property) => {
695
- const value = computedStyle[property];
696
- return typeof value === "string" ? overflowRegex.test(value) : false;
697
- });
698
- }
699
- function getScrollableAncestors(element, limit) {
700
- const scrollParents = [];
701
- function findScrollableAncestors(node) {
702
- if (limit != null && scrollParents.length >= limit) {
703
- return scrollParents;
704
- }
705
- if (!node) {
706
- return scrollParents;
707
- }
708
- if (isDocument(node) && node.scrollingElement != null && !scrollParents.includes(node.scrollingElement)) {
709
- scrollParents.push(node.scrollingElement);
710
- return scrollParents;
711
- }
712
- if (!isHTMLElement(node) || isSVGElement(node)) {
713
- return scrollParents;
714
- }
715
- if (scrollParents.includes(node)) {
716
- return scrollParents;
717
- }
718
- const computedStyle = getWindow(element).getComputedStyle(node);
719
- if (node !== element) {
720
- if (isScrollable(node, computedStyle)) {
721
- scrollParents.push(node);
722
- }
723
- }
724
- if (isFixed(node, computedStyle)) {
725
- return scrollParents;
726
- }
727
- return findScrollableAncestors(node.parentNode);
728
- }
729
- if (!element) {
730
- return scrollParents;
731
- }
732
- return findScrollableAncestors(element);
733
- }
734
- function getFirstScrollableAncestor(node) {
735
- const [firstScrollableAncestor] = getScrollableAncestors(node, 1);
736
- return firstScrollableAncestor != null ? firstScrollableAncestor : null;
737
- }
738
- function getScrollableElement(element) {
739
- if (!canUseDOM || !element) {
740
- return null;
741
- }
742
- if (isWindow(element)) {
743
- return element;
744
- }
745
- if (!isNode(element)) {
746
- return null;
747
- }
748
- if (isDocument(element) || element === getOwnerDocument(element).scrollingElement) {
749
- return window;
750
- }
751
- if (isHTMLElement(element)) {
752
- return element;
753
- }
754
- return null;
755
- }
756
- function getScrollXCoordinate(element) {
757
- if (isWindow(element)) {
758
- return element.scrollX;
759
- }
760
- return element.scrollLeft;
761
- }
762
- function getScrollYCoordinate(element) {
763
- if (isWindow(element)) {
764
- return element.scrollY;
765
- }
766
- return element.scrollTop;
767
- }
768
- function getScrollCoordinates(element) {
769
- return {
770
- x: getScrollXCoordinate(element),
771
- y: getScrollYCoordinate(element)
772
- };
773
- }
774
- var Direction;
775
- (function(Direction2) {
776
- Direction2[Direction2["Forward"] = 1] = "Forward";
777
- Direction2[Direction2["Backward"] = -1] = "Backward";
778
- })(Direction || (Direction = {}));
779
- function isDocumentScrollingElement(element) {
780
- if (!canUseDOM || !element) {
781
- return false;
782
- }
783
- return element === document.scrollingElement;
784
- }
785
- function getScrollPosition(scrollingContainer) {
786
- const minScroll = {
787
- x: 0,
788
- y: 0
789
- };
790
- const dimensions = isDocumentScrollingElement(scrollingContainer) ? {
791
- height: window.innerHeight,
792
- width: window.innerWidth
793
- } : {
794
- height: scrollingContainer.clientHeight,
795
- width: scrollingContainer.clientWidth
796
- };
797
- const maxScroll = {
798
- x: scrollingContainer.scrollWidth - dimensions.width,
799
- y: scrollingContainer.scrollHeight - dimensions.height
800
- };
801
- const isTop = scrollingContainer.scrollTop <= minScroll.y;
802
- const isLeft = scrollingContainer.scrollLeft <= minScroll.x;
803
- const isBottom = scrollingContainer.scrollTop >= maxScroll.y;
804
- const isRight = scrollingContainer.scrollLeft >= maxScroll.x;
805
- return {
806
- isTop,
807
- isLeft,
808
- isBottom,
809
- isRight,
810
- maxScroll,
811
- minScroll
812
- };
813
- }
814
- const defaultThreshold = {
815
- x: 0.2,
816
- y: 0.2
817
- };
818
- function getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, _ref, acceleration, thresholdPercentage) {
819
- let {
820
- top,
821
- left,
822
- right,
823
- bottom
824
- } = _ref;
825
- if (acceleration === void 0) {
826
- acceleration = 10;
827
- }
828
- if (thresholdPercentage === void 0) {
829
- thresholdPercentage = defaultThreshold;
830
- }
831
- const {
832
- isTop,
833
- isBottom,
834
- isLeft,
835
- isRight
836
- } = getScrollPosition(scrollContainer);
837
- const direction = {
838
- x: 0,
839
- y: 0
840
- };
841
- const speed = {
842
- x: 0,
843
- y: 0
844
- };
845
- const threshold = {
846
- height: scrollContainerRect.height * thresholdPercentage.y,
847
- width: scrollContainerRect.width * thresholdPercentage.x
848
- };
849
- if (!isTop && top <= scrollContainerRect.top + threshold.height) {
850
- direction.y = Direction.Backward;
851
- speed.y = acceleration * Math.abs((scrollContainerRect.top + threshold.height - top) / threshold.height);
852
- } else if (!isBottom && bottom >= scrollContainerRect.bottom - threshold.height) {
853
- direction.y = Direction.Forward;
854
- speed.y = acceleration * Math.abs((scrollContainerRect.bottom - threshold.height - bottom) / threshold.height);
855
- }
856
- if (!isRight && right >= scrollContainerRect.right - threshold.width) {
857
- direction.x = Direction.Forward;
858
- speed.x = acceleration * Math.abs((scrollContainerRect.right - threshold.width - right) / threshold.width);
859
- } else if (!isLeft && left <= scrollContainerRect.left + threshold.width) {
860
- direction.x = Direction.Backward;
861
- speed.x = acceleration * Math.abs((scrollContainerRect.left + threshold.width - left) / threshold.width);
862
- }
863
- return {
864
- direction,
865
- speed
866
- };
867
- }
868
- function getScrollElementRect(element) {
869
- if (element === document.scrollingElement) {
870
- const {
871
- innerWidth,
872
- innerHeight
873
- } = window;
874
- return {
875
- top: 0,
876
- left: 0,
877
- right: innerWidth,
878
- bottom: innerHeight,
879
- width: innerWidth,
880
- height: innerHeight
881
- };
882
- }
883
- const {
884
- top,
885
- left,
886
- right,
887
- bottom
888
- } = element.getBoundingClientRect();
889
- return {
890
- top,
891
- left,
892
- right,
893
- bottom,
894
- width: element.clientWidth,
895
- height: element.clientHeight
896
- };
897
- }
898
- function getScrollOffsets(scrollableAncestors) {
899
- return scrollableAncestors.reduce((acc, node) => {
900
- return add(acc, getScrollCoordinates(node));
901
- }, defaultCoordinates);
902
- }
903
- function getScrollXOffset(scrollableAncestors) {
904
- return scrollableAncestors.reduce((acc, node) => {
905
- return acc + getScrollXCoordinate(node);
906
- }, 0);
907
- }
908
- function getScrollYOffset(scrollableAncestors) {
909
- return scrollableAncestors.reduce((acc, node) => {
910
- return acc + getScrollYCoordinate(node);
911
- }, 0);
912
- }
913
- function scrollIntoViewIfNeeded(element, measure) {
914
- if (measure === void 0) {
915
- measure = getClientRect;
916
- }
917
- if (!element) {
918
- return;
919
- }
920
- const {
921
- top,
922
- left,
923
- bottom,
924
- right
925
- } = measure(element);
926
- const firstScrollableAncestor = getFirstScrollableAncestor(element);
927
- if (!firstScrollableAncestor) {
928
- return;
929
- }
930
- if (bottom <= 0 || right <= 0 || top >= window.innerHeight || left >= window.innerWidth) {
931
- element.scrollIntoView({
932
- block: "center",
933
- inline: "center"
934
- });
935
- }
936
- }
937
- const properties = [["x", ["left", "right"], getScrollXOffset], ["y", ["top", "bottom"], getScrollYOffset]];
938
- class Rect {
939
- constructor(rect, element) {
940
- this.rect = void 0;
941
- this.width = void 0;
942
- this.height = void 0;
943
- this.top = void 0;
944
- this.bottom = void 0;
945
- this.right = void 0;
946
- this.left = void 0;
947
- const scrollableAncestors = getScrollableAncestors(element);
948
- const scrollOffsets = getScrollOffsets(scrollableAncestors);
949
- this.rect = {
950
- ...rect
951
- };
952
- this.width = rect.width;
953
- this.height = rect.height;
954
- for (const [axis, keys, getScrollOffset] of properties) {
955
- for (const key of keys) {
956
- Object.defineProperty(this, key, {
957
- get: () => {
958
- const currentOffsets = getScrollOffset(scrollableAncestors);
959
- const scrollOffsetsDeltla = scrollOffsets[axis] - currentOffsets;
960
- return this.rect[key] + scrollOffsetsDeltla;
961
- },
962
- enumerable: true
963
- });
964
- }
965
- }
966
- Object.defineProperty(this, "rect", {
967
- enumerable: false
968
- });
969
- }
970
- }
971
- class Listeners {
972
- constructor(target) {
973
- this.target = void 0;
974
- this.listeners = [];
975
- this.removeAll = () => {
976
- this.listeners.forEach((listener) => {
977
- var _this$target;
978
- return (_this$target = this.target) == null ? void 0 : _this$target.removeEventListener(...listener);
979
- });
980
- };
981
- this.target = target;
982
- }
983
- add(eventName, handler, options) {
984
- var _this$target2;
985
- (_this$target2 = this.target) == null ? void 0 : _this$target2.addEventListener(eventName, handler, options);
986
- this.listeners.push([eventName, handler, options]);
987
- }
988
- }
989
- function getEventListenerTarget(target) {
990
- const {
991
- EventTarget
992
- } = getWindow(target);
993
- return target instanceof EventTarget ? target : getOwnerDocument(target);
994
- }
995
- function hasExceededDistance(delta, measurement) {
996
- const dx = Math.abs(delta.x);
997
- const dy = Math.abs(delta.y);
998
- if (typeof measurement === "number") {
999
- return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
1000
- }
1001
- if ("x" in measurement && "y" in measurement) {
1002
- return dx > measurement.x && dy > measurement.y;
1003
- }
1004
- if ("x" in measurement) {
1005
- return dx > measurement.x;
1006
- }
1007
- if ("y" in measurement) {
1008
- return dy > measurement.y;
1009
- }
1010
- return false;
1011
- }
1012
- var EventName;
1013
- (function(EventName2) {
1014
- EventName2["Click"] = "click";
1015
- EventName2["DragStart"] = "dragstart";
1016
- EventName2["Keydown"] = "keydown";
1017
- EventName2["ContextMenu"] = "contextmenu";
1018
- EventName2["Resize"] = "resize";
1019
- EventName2["SelectionChange"] = "selectionchange";
1020
- EventName2["VisibilityChange"] = "visibilitychange";
1021
- })(EventName || (EventName = {}));
1022
- function preventDefault(event) {
1023
- event.preventDefault();
1024
- }
1025
- function stopPropagation(event) {
1026
- event.stopPropagation();
1027
- }
1028
- var KeyboardCode;
1029
- (function(KeyboardCode2) {
1030
- KeyboardCode2["Space"] = "Space";
1031
- KeyboardCode2["Down"] = "ArrowDown";
1032
- KeyboardCode2["Right"] = "ArrowRight";
1033
- KeyboardCode2["Left"] = "ArrowLeft";
1034
- KeyboardCode2["Up"] = "ArrowUp";
1035
- KeyboardCode2["Esc"] = "Escape";
1036
- KeyboardCode2["Enter"] = "Enter";
1037
- KeyboardCode2["Tab"] = "Tab";
1038
- })(KeyboardCode || (KeyboardCode = {}));
1039
- const defaultKeyboardCodes = {
1040
- start: [KeyboardCode.Space, KeyboardCode.Enter],
1041
- cancel: [KeyboardCode.Esc],
1042
- end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
1043
- };
1044
- const defaultKeyboardCoordinateGetter = (event, _ref) => {
1045
- let {
1046
- currentCoordinates
1047
- } = _ref;
1048
- switch (event.code) {
1049
- case KeyboardCode.Right:
1050
- return {
1051
- ...currentCoordinates,
1052
- x: currentCoordinates.x + 25
1053
- };
1054
- case KeyboardCode.Left:
1055
- return {
1056
- ...currentCoordinates,
1057
- x: currentCoordinates.x - 25
1058
- };
1059
- case KeyboardCode.Down:
1060
- return {
1061
- ...currentCoordinates,
1062
- y: currentCoordinates.y + 25
1063
- };
1064
- case KeyboardCode.Up:
1065
- return {
1066
- ...currentCoordinates,
1067
- y: currentCoordinates.y - 25
1068
- };
1069
- }
1070
- return void 0;
1071
- };
1072
- class KeyboardSensor {
1073
- constructor(props) {
1074
- this.props = void 0;
1075
- this.autoScrollEnabled = false;
1076
- this.referenceCoordinates = void 0;
1077
- this.listeners = void 0;
1078
- this.windowListeners = void 0;
1079
- this.props = props;
1080
- const {
1081
- event: {
1082
- target
1083
- }
1084
- } = props;
1085
- this.props = props;
1086
- this.listeners = new Listeners(getOwnerDocument(target));
1087
- this.windowListeners = new Listeners(getWindow(target));
1088
- this.handleKeyDown = this.handleKeyDown.bind(this);
1089
- this.handleCancel = this.handleCancel.bind(this);
1090
- this.attach();
1091
- }
1092
- attach() {
1093
- this.handleStart();
1094
- this.windowListeners.add(EventName.Resize, this.handleCancel);
1095
- this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
1096
- setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
1097
- }
1098
- handleStart() {
1099
- const {
1100
- activeNode,
1101
- onStart
1102
- } = this.props;
1103
- const node = activeNode.node.current;
1104
- if (node) {
1105
- scrollIntoViewIfNeeded(node);
1106
- }
1107
- onStart(defaultCoordinates);
1108
- }
1109
- handleKeyDown(event) {
1110
- if (isKeyboardEvent(event)) {
1111
- const {
1112
- active,
1113
- context,
1114
- options
1115
- } = this.props;
1116
- const {
1117
- keyboardCodes = defaultKeyboardCodes,
1118
- coordinateGetter = defaultKeyboardCoordinateGetter,
1119
- scrollBehavior = "smooth"
1120
- } = options;
1121
- const {
1122
- code
1123
- } = event;
1124
- if (keyboardCodes.end.includes(code)) {
1125
- this.handleEnd(event);
1126
- return;
1127
- }
1128
- if (keyboardCodes.cancel.includes(code)) {
1129
- this.handleCancel(event);
1130
- return;
1131
- }
1132
- const {
1133
- collisionRect
1134
- } = context.current;
1135
- const currentCoordinates = collisionRect ? {
1136
- x: collisionRect.left,
1137
- y: collisionRect.top
1138
- } : defaultCoordinates;
1139
- if (!this.referenceCoordinates) {
1140
- this.referenceCoordinates = currentCoordinates;
1141
- }
1142
- const newCoordinates = coordinateGetter(event, {
1143
- active,
1144
- context: context.current,
1145
- currentCoordinates
1146
- });
1147
- if (newCoordinates) {
1148
- const coordinatesDelta = subtract(newCoordinates, currentCoordinates);
1149
- const scrollDelta = {
1150
- x: 0,
1151
- y: 0
1152
- };
1153
- const {
1154
- scrollableAncestors
1155
- } = context.current;
1156
- for (const scrollContainer of scrollableAncestors) {
1157
- const direction = event.code;
1158
- const {
1159
- isTop,
1160
- isRight,
1161
- isLeft,
1162
- isBottom,
1163
- maxScroll,
1164
- minScroll
1165
- } = getScrollPosition(scrollContainer);
1166
- const scrollElementRect = getScrollElementRect(scrollContainer);
1167
- const clampedCoordinates = {
1168
- x: Math.min(direction === KeyboardCode.Right ? scrollElementRect.right - scrollElementRect.width / 2 : scrollElementRect.right, Math.max(direction === KeyboardCode.Right ? scrollElementRect.left : scrollElementRect.left + scrollElementRect.width / 2, newCoordinates.x)),
1169
- y: Math.min(direction === KeyboardCode.Down ? scrollElementRect.bottom - scrollElementRect.height / 2 : scrollElementRect.bottom, Math.max(direction === KeyboardCode.Down ? scrollElementRect.top : scrollElementRect.top + scrollElementRect.height / 2, newCoordinates.y))
1170
- };
1171
- const canScrollX = direction === KeyboardCode.Right && !isRight || direction === KeyboardCode.Left && !isLeft;
1172
- const canScrollY = direction === KeyboardCode.Down && !isBottom || direction === KeyboardCode.Up && !isTop;
1173
- if (canScrollX && clampedCoordinates.x !== newCoordinates.x) {
1174
- const newScrollCoordinates = scrollContainer.scrollLeft + coordinatesDelta.x;
1175
- const canScrollToNewCoordinates = direction === KeyboardCode.Right && newScrollCoordinates <= maxScroll.x || direction === KeyboardCode.Left && newScrollCoordinates >= minScroll.x;
1176
- if (canScrollToNewCoordinates && !coordinatesDelta.y) {
1177
- scrollContainer.scrollTo({
1178
- left: newScrollCoordinates,
1179
- behavior: scrollBehavior
1180
- });
1181
- return;
1182
- }
1183
- if (canScrollToNewCoordinates) {
1184
- scrollDelta.x = scrollContainer.scrollLeft - newScrollCoordinates;
1185
- } else {
1186
- scrollDelta.x = direction === KeyboardCode.Right ? scrollContainer.scrollLeft - maxScroll.x : scrollContainer.scrollLeft - minScroll.x;
1187
- }
1188
- if (scrollDelta.x) {
1189
- scrollContainer.scrollBy({
1190
- left: -scrollDelta.x,
1191
- behavior: scrollBehavior
1192
- });
1193
- }
1194
- break;
1195
- } else if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {
1196
- const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;
1197
- const canScrollToNewCoordinates = direction === KeyboardCode.Down && newScrollCoordinates <= maxScroll.y || direction === KeyboardCode.Up && newScrollCoordinates >= minScroll.y;
1198
- if (canScrollToNewCoordinates && !coordinatesDelta.x) {
1199
- scrollContainer.scrollTo({
1200
- top: newScrollCoordinates,
1201
- behavior: scrollBehavior
1202
- });
1203
- return;
1204
- }
1205
- if (canScrollToNewCoordinates) {
1206
- scrollDelta.y = scrollContainer.scrollTop - newScrollCoordinates;
1207
- } else {
1208
- scrollDelta.y = direction === KeyboardCode.Down ? scrollContainer.scrollTop - maxScroll.y : scrollContainer.scrollTop - minScroll.y;
1209
- }
1210
- if (scrollDelta.y) {
1211
- scrollContainer.scrollBy({
1212
- top: -scrollDelta.y,
1213
- behavior: scrollBehavior
1214
- });
1215
- }
1216
- break;
1217
- }
1218
- }
1219
- this.handleMove(event, add(subtract(newCoordinates, this.referenceCoordinates), scrollDelta));
1220
- }
1221
- }
1222
- }
1223
- handleMove(event, coordinates) {
1224
- const {
1225
- onMove
1226
- } = this.props;
1227
- event.preventDefault();
1228
- onMove(coordinates);
1229
- }
1230
- handleEnd(event) {
1231
- const {
1232
- onEnd
1233
- } = this.props;
1234
- event.preventDefault();
1235
- this.detach();
1236
- onEnd();
1237
- }
1238
- handleCancel(event) {
1239
- const {
1240
- onCancel
1241
- } = this.props;
1242
- event.preventDefault();
1243
- this.detach();
1244
- onCancel();
1245
- }
1246
- detach() {
1247
- this.listeners.removeAll();
1248
- this.windowListeners.removeAll();
1249
- }
1250
- }
1251
- KeyboardSensor.activators = [{
1252
- eventName: "onKeyDown",
1253
- handler: (event, _ref, _ref2) => {
1254
- let {
1255
- keyboardCodes = defaultKeyboardCodes,
1256
- onActivation
1257
- } = _ref;
1258
- let {
1259
- active
1260
- } = _ref2;
1261
- const {
1262
- code
1263
- } = event.nativeEvent;
1264
- if (keyboardCodes.start.includes(code)) {
1265
- const activator = active.activatorNode.current;
1266
- if (activator && event.target !== activator) {
1267
- return false;
1268
- }
1269
- event.preventDefault();
1270
- onActivation == null ? void 0 : onActivation({
1271
- event: event.nativeEvent
1272
- });
1273
- return true;
1274
- }
1275
- return false;
1276
- }
1277
- }];
1278
- function isDistanceConstraint(constraint) {
1279
- return Boolean(constraint && "distance" in constraint);
1280
- }
1281
- function isDelayConstraint(constraint) {
1282
- return Boolean(constraint && "delay" in constraint);
1283
- }
1284
- class AbstractPointerSensor {
1285
- constructor(props, events2, listenerTarget) {
1286
- var _getEventCoordinates;
1287
- if (listenerTarget === void 0) {
1288
- listenerTarget = getEventListenerTarget(props.event.target);
1289
- }
1290
- this.props = void 0;
1291
- this.events = void 0;
1292
- this.autoScrollEnabled = true;
1293
- this.document = void 0;
1294
- this.activated = false;
1295
- this.initialCoordinates = void 0;
1296
- this.timeoutId = null;
1297
- this.listeners = void 0;
1298
- this.documentListeners = void 0;
1299
- this.windowListeners = void 0;
1300
- this.props = props;
1301
- this.events = events2;
1302
- const {
1303
- event
1304
- } = props;
1305
- const {
1306
- target
1307
- } = event;
1308
- this.props = props;
1309
- this.events = events2;
1310
- this.document = getOwnerDocument(target);
1311
- this.documentListeners = new Listeners(this.document);
1312
- this.listeners = new Listeners(listenerTarget);
1313
- this.windowListeners = new Listeners(getWindow(target));
1314
- this.initialCoordinates = (_getEventCoordinates = getEventCoordinates(event)) != null ? _getEventCoordinates : defaultCoordinates;
1315
- this.handleStart = this.handleStart.bind(this);
1316
- this.handleMove = this.handleMove.bind(this);
1317
- this.handleEnd = this.handleEnd.bind(this);
1318
- this.handleCancel = this.handleCancel.bind(this);
1319
- this.handleKeydown = this.handleKeydown.bind(this);
1320
- this.removeTextSelection = this.removeTextSelection.bind(this);
1321
- this.attach();
1322
- }
1323
- attach() {
1324
- const {
1325
- events: events2,
1326
- props: {
1327
- options: {
1328
- activationConstraint,
1329
- bypassActivationConstraint
1330
- }
1331
- }
1332
- } = this;
1333
- this.listeners.add(events2.move.name, this.handleMove, {
1334
- passive: false
1335
- });
1336
- this.listeners.add(events2.end.name, this.handleEnd);
1337
- if (events2.cancel) {
1338
- this.listeners.add(events2.cancel.name, this.handleCancel);
1339
- }
1340
- this.windowListeners.add(EventName.Resize, this.handleCancel);
1341
- this.windowListeners.add(EventName.DragStart, preventDefault);
1342
- this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
1343
- this.windowListeners.add(EventName.ContextMenu, preventDefault);
1344
- this.documentListeners.add(EventName.Keydown, this.handleKeydown);
1345
- if (activationConstraint) {
1346
- if (bypassActivationConstraint != null && bypassActivationConstraint({
1347
- event: this.props.event,
1348
- activeNode: this.props.activeNode,
1349
- options: this.props.options
1350
- })) {
1351
- return this.handleStart();
1352
- }
1353
- if (isDelayConstraint(activationConstraint)) {
1354
- this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
1355
- this.handlePending(activationConstraint);
1356
- return;
1357
- }
1358
- if (isDistanceConstraint(activationConstraint)) {
1359
- this.handlePending(activationConstraint);
1360
- return;
1361
- }
1362
- }
1363
- this.handleStart();
1364
- }
1365
- detach() {
1366
- this.listeners.removeAll();
1367
- this.windowListeners.removeAll();
1368
- setTimeout(this.documentListeners.removeAll, 50);
1369
- if (this.timeoutId !== null) {
1370
- clearTimeout(this.timeoutId);
1371
- this.timeoutId = null;
1372
- }
1373
- }
1374
- handlePending(constraint, offset) {
1375
- const {
1376
- active,
1377
- onPending
1378
- } = this.props;
1379
- onPending(active, constraint, this.initialCoordinates, offset);
1380
- }
1381
- handleStart() {
1382
- const {
1383
- initialCoordinates
1384
- } = this;
1385
- const {
1386
- onStart
1387
- } = this.props;
1388
- if (initialCoordinates) {
1389
- this.activated = true;
1390
- this.documentListeners.add(EventName.Click, stopPropagation, {
1391
- capture: true
1392
- });
1393
- this.removeTextSelection();
1394
- this.documentListeners.add(EventName.SelectionChange, this.removeTextSelection);
1395
- onStart(initialCoordinates);
1396
- }
1397
- }
1398
- handleMove(event) {
1399
- var _getEventCoordinates2;
1400
- const {
1401
- activated,
1402
- initialCoordinates,
1403
- props
1404
- } = this;
1405
- const {
1406
- onMove,
1407
- options: {
1408
- activationConstraint
1409
- }
1410
- } = props;
1411
- if (!initialCoordinates) {
1412
- return;
1413
- }
1414
- const coordinates = (_getEventCoordinates2 = getEventCoordinates(event)) != null ? _getEventCoordinates2 : defaultCoordinates;
1415
- const delta = subtract(initialCoordinates, coordinates);
1416
- if (!activated && activationConstraint) {
1417
- if (isDistanceConstraint(activationConstraint)) {
1418
- if (activationConstraint.tolerance != null && hasExceededDistance(delta, activationConstraint.tolerance)) {
1419
- return this.handleCancel();
1420
- }
1421
- if (hasExceededDistance(delta, activationConstraint.distance)) {
1422
- return this.handleStart();
1423
- }
1424
- }
1425
- if (isDelayConstraint(activationConstraint)) {
1426
- if (hasExceededDistance(delta, activationConstraint.tolerance)) {
1427
- return this.handleCancel();
1428
- }
1429
- }
1430
- this.handlePending(activationConstraint, delta);
1431
- return;
1432
- }
1433
- if (event.cancelable) {
1434
- event.preventDefault();
1435
- }
1436
- onMove(coordinates);
1437
- }
1438
- handleEnd() {
1439
- const {
1440
- onAbort,
1441
- onEnd
1442
- } = this.props;
1443
- this.detach();
1444
- if (!this.activated) {
1445
- onAbort(this.props.active);
1446
- }
1447
- onEnd();
1448
- }
1449
- handleCancel() {
1450
- const {
1451
- onAbort,
1452
- onCancel
1453
- } = this.props;
1454
- this.detach();
1455
- if (!this.activated) {
1456
- onAbort(this.props.active);
1457
- }
1458
- onCancel();
1459
- }
1460
- handleKeydown(event) {
1461
- if (event.code === KeyboardCode.Esc) {
1462
- this.handleCancel();
1463
- }
1464
- }
1465
- removeTextSelection() {
1466
- var _this$document$getSel;
1467
- (_this$document$getSel = this.document.getSelection()) == null ? void 0 : _this$document$getSel.removeAllRanges();
1468
- }
1469
- }
1470
- const events = {
1471
- cancel: {
1472
- name: "pointercancel"
1473
- },
1474
- move: {
1475
- name: "pointermove"
1476
- },
1477
- end: {
1478
- name: "pointerup"
1479
- }
1480
- };
1481
- class PointerSensor extends AbstractPointerSensor {
1482
- constructor(props) {
1483
- const {
1484
- event
1485
- } = props;
1486
- const listenerTarget = getOwnerDocument(event.target);
1487
- super(props, events, listenerTarget);
1488
- }
1489
- }
1490
- PointerSensor.activators = [{
1491
- eventName: "onPointerDown",
1492
- handler: (_ref, _ref2) => {
1493
- let {
1494
- nativeEvent: event
1495
- } = _ref;
1496
- let {
1497
- onActivation
1498
- } = _ref2;
1499
- if (!event.isPrimary || event.button !== 0) {
1500
- return false;
1501
- }
1502
- onActivation == null ? void 0 : onActivation({
1503
- event
1504
- });
1505
- return true;
1506
- }
1507
- }];
1508
- const events$1 = {
1509
- move: {
1510
- name: "mousemove"
1511
- },
1512
- end: {
1513
- name: "mouseup"
1514
- }
1515
- };
1516
- var MouseButton;
1517
- (function(MouseButton2) {
1518
- MouseButton2[MouseButton2["RightClick"] = 2] = "RightClick";
1519
- })(MouseButton || (MouseButton = {}));
1520
- class MouseSensor extends AbstractPointerSensor {
1521
- constructor(props) {
1522
- super(props, events$1, getOwnerDocument(props.event.target));
1523
- }
1524
- }
1525
- MouseSensor.activators = [{
1526
- eventName: "onMouseDown",
1527
- handler: (_ref, _ref2) => {
1528
- let {
1529
- nativeEvent: event
1530
- } = _ref;
1531
- let {
1532
- onActivation
1533
- } = _ref2;
1534
- if (event.button === MouseButton.RightClick) {
1535
- return false;
1536
- }
1537
- onActivation == null ? void 0 : onActivation({
1538
- event
1539
- });
1540
- return true;
1541
- }
1542
- }];
1543
- const events$2 = {
1544
- cancel: {
1545
- name: "touchcancel"
1546
- },
1547
- move: {
1548
- name: "touchmove"
1549
- },
1550
- end: {
1551
- name: "touchend"
1552
- }
1553
- };
1554
- class TouchSensor extends AbstractPointerSensor {
1555
- constructor(props) {
1556
- super(props, events$2);
1557
- }
1558
- static setup() {
1559
- window.addEventListener(events$2.move.name, noop2, {
1560
- capture: false,
1561
- passive: false
1562
- });
1563
- return function teardown() {
1564
- window.removeEventListener(events$2.move.name, noop2);
1565
- };
1566
- function noop2() {
1567
- }
1568
- }
1569
- }
1570
- TouchSensor.activators = [{
1571
- eventName: "onTouchStart",
1572
- handler: (_ref, _ref2) => {
1573
- let {
1574
- nativeEvent: event
1575
- } = _ref;
1576
- let {
1577
- onActivation
1578
- } = _ref2;
1579
- const {
1580
- touches
1581
- } = event;
1582
- if (touches.length > 1) {
1583
- return false;
1584
- }
1585
- onActivation == null ? void 0 : onActivation({
1586
- event
1587
- });
1588
- return true;
1589
- }
1590
- }];
1591
- var AutoScrollActivator;
1592
- (function(AutoScrollActivator2) {
1593
- AutoScrollActivator2[AutoScrollActivator2["Pointer"] = 0] = "Pointer";
1594
- AutoScrollActivator2[AutoScrollActivator2["DraggableRect"] = 1] = "DraggableRect";
1595
- })(AutoScrollActivator || (AutoScrollActivator = {}));
1596
- var TraversalOrder;
1597
- (function(TraversalOrder2) {
1598
- TraversalOrder2[TraversalOrder2["TreeOrder"] = 0] = "TreeOrder";
1599
- TraversalOrder2[TraversalOrder2["ReversedTreeOrder"] = 1] = "ReversedTreeOrder";
1600
- })(TraversalOrder || (TraversalOrder = {}));
1601
- function useAutoScroller(_ref) {
1602
- let {
1603
- acceleration,
1604
- activator = AutoScrollActivator.Pointer,
1605
- canScroll,
1606
- draggingRect,
1607
- enabled,
1608
- interval = 5,
1609
- order = TraversalOrder.TreeOrder,
1610
- pointerCoordinates,
1611
- scrollableAncestors,
1612
- scrollableAncestorRects,
1613
- delta,
1614
- threshold
1615
- } = _ref;
1616
- const scrollIntent = useScrollIntent({
1617
- delta,
1618
- disabled: !enabled
1619
- });
1620
- const [setAutoScrollInterval, clearAutoScrollInterval] = useInterval();
1621
- const scrollSpeed = useRef({
1622
- x: 0,
1623
- y: 0
1624
- });
1625
- const scrollDirection = useRef({
1626
- x: 0,
1627
- y: 0
1628
- });
1629
- const rect = useMemo(() => {
1630
- switch (activator) {
1631
- case AutoScrollActivator.Pointer:
1632
- return pointerCoordinates ? {
1633
- top: pointerCoordinates.y,
1634
- bottom: pointerCoordinates.y,
1635
- left: pointerCoordinates.x,
1636
- right: pointerCoordinates.x
1637
- } : null;
1638
- case AutoScrollActivator.DraggableRect:
1639
- return draggingRect;
1640
- }
1641
- }, [activator, draggingRect, pointerCoordinates]);
1642
- const scrollContainerRef = useRef(null);
1643
- const autoScroll = useCallback(() => {
1644
- const scrollContainer = scrollContainerRef.current;
1645
- if (!scrollContainer) {
1646
- return;
1647
- }
1648
- const scrollLeft = scrollSpeed.current.x * scrollDirection.current.x;
1649
- const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;
1650
- scrollContainer.scrollBy(scrollLeft, scrollTop);
1651
- }, []);
1652
- const sortedScrollableAncestors = useMemo(() => order === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order, scrollableAncestors]);
1653
- useEffect(
1654
- () => {
1655
- if (!enabled || !scrollableAncestors.length || !rect) {
1656
- clearAutoScrollInterval();
1657
- return;
1658
- }
1659
- for (const scrollContainer of sortedScrollableAncestors) {
1660
- if ((canScroll == null ? void 0 : canScroll(scrollContainer)) === false) {
1661
- continue;
1662
- }
1663
- const index = scrollableAncestors.indexOf(scrollContainer);
1664
- const scrollContainerRect = scrollableAncestorRects[index];
1665
- if (!scrollContainerRect) {
1666
- continue;
1667
- }
1668
- const {
1669
- direction,
1670
- speed
1671
- } = getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, rect, acceleration, threshold);
1672
- for (const axis of ["x", "y"]) {
1673
- if (!scrollIntent[axis][direction[axis]]) {
1674
- speed[axis] = 0;
1675
- direction[axis] = 0;
1676
- }
1677
- }
1678
- if (speed.x > 0 || speed.y > 0) {
1679
- clearAutoScrollInterval();
1680
- scrollContainerRef.current = scrollContainer;
1681
- setAutoScrollInterval(autoScroll, interval);
1682
- scrollSpeed.current = speed;
1683
- scrollDirection.current = direction;
1684
- return;
1685
- }
1686
- }
1687
- scrollSpeed.current = {
1688
- x: 0,
1689
- y: 0
1690
- };
1691
- scrollDirection.current = {
1692
- x: 0,
1693
- y: 0
1694
- };
1695
- clearAutoScrollInterval();
1696
- },
1697
- // eslint-disable-next-line react-hooks/exhaustive-deps
1698
- [
1699
- acceleration,
1700
- autoScroll,
1701
- canScroll,
1702
- clearAutoScrollInterval,
1703
- enabled,
1704
- interval,
1705
- // eslint-disable-next-line react-hooks/exhaustive-deps
1706
- JSON.stringify(rect),
1707
- // eslint-disable-next-line react-hooks/exhaustive-deps
1708
- JSON.stringify(scrollIntent),
1709
- setAutoScrollInterval,
1710
- scrollableAncestors,
1711
- sortedScrollableAncestors,
1712
- scrollableAncestorRects,
1713
- // eslint-disable-next-line react-hooks/exhaustive-deps
1714
- JSON.stringify(threshold)
1715
- ]
1716
- );
1717
- }
1718
- const defaultScrollIntent = {
1719
- x: {
1720
- [Direction.Backward]: false,
1721
- [Direction.Forward]: false
1722
- },
1723
- y: {
1724
- [Direction.Backward]: false,
1725
- [Direction.Forward]: false
1726
- }
1727
- };
1728
- function useScrollIntent(_ref2) {
1729
- let {
1730
- delta,
1731
- disabled
1732
- } = _ref2;
1733
- const previousDelta = usePrevious(delta);
1734
- return useLazyMemo((previousIntent) => {
1735
- if (disabled || !previousDelta || !previousIntent) {
1736
- return defaultScrollIntent;
1737
- }
1738
- const direction = {
1739
- x: Math.sign(delta.x - previousDelta.x),
1740
- y: Math.sign(delta.y - previousDelta.y)
1741
- };
1742
- return {
1743
- x: {
1744
- [Direction.Backward]: previousIntent.x[Direction.Backward] || direction.x === -1,
1745
- [Direction.Forward]: previousIntent.x[Direction.Forward] || direction.x === 1
1746
- },
1747
- y: {
1748
- [Direction.Backward]: previousIntent.y[Direction.Backward] || direction.y === -1,
1749
- [Direction.Forward]: previousIntent.y[Direction.Forward] || direction.y === 1
1750
- }
1751
- };
1752
- }, [disabled, delta, previousDelta]);
1753
- }
1754
- function useCachedNode(draggableNodes, id) {
1755
- const draggableNode = id != null ? draggableNodes.get(id) : void 0;
1756
- const node = draggableNode ? draggableNode.node.current : null;
1757
- return useLazyMemo((cachedNode) => {
1758
- var _ref;
1759
- if (id == null) {
1760
- return null;
1761
- }
1762
- return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
1763
- }, [node, id]);
1764
- }
1765
- function useCombineActivators(sensors, getSyntheticHandler) {
1766
- return useMemo(() => sensors.reduce((accumulator, sensor) => {
1767
- const {
1768
- sensor: Sensor
1769
- } = sensor;
1770
- const sensorActivators = Sensor.activators.map((activator) => ({
1771
- eventName: activator.eventName,
1772
- handler: getSyntheticHandler(activator.handler, sensor)
1773
- }));
1774
- return [...accumulator, ...sensorActivators];
1775
- }, []), [sensors, getSyntheticHandler]);
1776
- }
1777
- var MeasuringStrategy;
1778
- (function(MeasuringStrategy2) {
1779
- MeasuringStrategy2[MeasuringStrategy2["Always"] = 0] = "Always";
1780
- MeasuringStrategy2[MeasuringStrategy2["BeforeDragging"] = 1] = "BeforeDragging";
1781
- MeasuringStrategy2[MeasuringStrategy2["WhileDragging"] = 2] = "WhileDragging";
1782
- })(MeasuringStrategy || (MeasuringStrategy = {}));
1783
- var MeasuringFrequency;
1784
- (function(MeasuringFrequency2) {
1785
- MeasuringFrequency2["Optimized"] = "optimized";
1786
- })(MeasuringFrequency || (MeasuringFrequency = {}));
1787
- const defaultValue = /* @__PURE__ */ new Map();
1788
- function useDroppableMeasuring(containers, _ref) {
1789
- let {
1790
- dragging,
1791
- dependencies,
1792
- config
1793
- } = _ref;
1794
- const [queue, setQueue] = useState(null);
1795
- const {
1796
- frequency,
1797
- measure,
1798
- strategy
1799
- } = config;
1800
- const containersRef = useRef(containers);
1801
- const disabled = isDisabled();
1802
- const disabledRef = useLatestValue(disabled);
1803
- const measureDroppableContainers = useCallback(function(ids2) {
1804
- if (ids2 === void 0) {
1805
- ids2 = [];
1806
- }
1807
- if (disabledRef.current) {
1808
- return;
1809
- }
1810
- setQueue((value) => {
1811
- if (value === null) {
1812
- return ids2;
1813
- }
1814
- return value.concat(ids2.filter((id) => !value.includes(id)));
1815
- });
1816
- }, [disabledRef]);
1817
- const timeoutId = useRef(null);
1818
- const droppableRects = useLazyMemo((previousValue) => {
1819
- if (disabled && !dragging) {
1820
- return defaultValue;
1821
- }
1822
- if (!previousValue || previousValue === defaultValue || containersRef.current !== containers || queue != null) {
1823
- const map = /* @__PURE__ */ new Map();
1824
- for (let container of containers) {
1825
- if (!container) {
1826
- continue;
1827
- }
1828
- if (queue && queue.length > 0 && !queue.includes(container.id) && container.rect.current) {
1829
- map.set(container.id, container.rect.current);
1830
- continue;
1831
- }
1832
- const node = container.node.current;
1833
- const rect = node ? new Rect(measure(node), node) : null;
1834
- container.rect.current = rect;
1835
- if (rect) {
1836
- map.set(container.id, rect);
1837
- }
1838
- }
1839
- return map;
1840
- }
1841
- return previousValue;
1842
- }, [containers, queue, dragging, disabled, measure]);
1843
- useEffect(() => {
1844
- containersRef.current = containers;
1845
- }, [containers]);
1846
- useEffect(
1847
- () => {
1848
- if (disabled) {
1849
- return;
1850
- }
1851
- measureDroppableContainers();
1852
- },
1853
- // eslint-disable-next-line react-hooks/exhaustive-deps
1854
- [dragging, disabled]
1855
- );
1856
- useEffect(
1857
- () => {
1858
- if (queue && queue.length > 0) {
1859
- setQueue(null);
1860
- }
1861
- },
1862
- //eslint-disable-next-line react-hooks/exhaustive-deps
1863
- [JSON.stringify(queue)]
1864
- );
1865
- useEffect(
1866
- () => {
1867
- if (disabled || typeof frequency !== "number" || timeoutId.current !== null) {
1868
- return;
1869
- }
1870
- timeoutId.current = setTimeout(() => {
1871
- measureDroppableContainers();
1872
- timeoutId.current = null;
1873
- }, frequency);
1874
- },
1875
- // eslint-disable-next-line react-hooks/exhaustive-deps
1876
- [frequency, disabled, measureDroppableContainers, ...dependencies]
1877
- );
1878
- return {
1879
- droppableRects,
1880
- measureDroppableContainers,
1881
- measuringScheduled: queue != null
1882
- };
1883
- function isDisabled() {
1884
- switch (strategy) {
1885
- case MeasuringStrategy.Always:
1886
- return false;
1887
- case MeasuringStrategy.BeforeDragging:
1888
- return dragging;
1889
- default:
1890
- return !dragging;
1891
- }
1892
- }
1893
- }
1894
- function useInitialValue(value, computeFn) {
1895
- return useLazyMemo((previousValue) => {
1896
- if (!value) {
1897
- return null;
1898
- }
1899
- if (previousValue) {
1900
- return previousValue;
1901
- }
1902
- return typeof computeFn === "function" ? computeFn(value) : value;
1903
- }, [computeFn, value]);
1904
- }
1905
- function useInitialRect(node, measure) {
1906
- return useInitialValue(node, measure);
1907
- }
1908
- function useMutationObserver(_ref) {
1909
- let {
1910
- callback,
1911
- disabled
1912
- } = _ref;
1913
- const handleMutations = useEvent(callback);
1914
- const mutationObserver = useMemo(() => {
1915
- if (disabled || typeof window === "undefined" || typeof window.MutationObserver === "undefined") {
1916
- return void 0;
1917
- }
1918
- const {
1919
- MutationObserver
1920
- } = window;
1921
- return new MutationObserver(handleMutations);
1922
- }, [handleMutations, disabled]);
1923
- useEffect(() => {
1924
- return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
1925
- }, [mutationObserver]);
1926
- return mutationObserver;
1927
- }
1928
- function useResizeObserver(_ref) {
1929
- let {
1930
- callback,
1931
- disabled
1932
- } = _ref;
1933
- const handleResize = useEvent(callback);
1934
- const resizeObserver = useMemo(
1935
- () => {
1936
- if (disabled || typeof window === "undefined" || typeof window.ResizeObserver === "undefined") {
1937
- return void 0;
1938
- }
1939
- const {
1940
- ResizeObserver
1941
- } = window;
1942
- return new ResizeObserver(handleResize);
1943
- },
1944
- // eslint-disable-next-line react-hooks/exhaustive-deps
1945
- [disabled]
1946
- );
1947
- useEffect(() => {
1948
- return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
1949
- }, [resizeObserver]);
1950
- return resizeObserver;
1951
- }
1952
- function defaultMeasure(element) {
1953
- return new Rect(getClientRect(element), element);
1954
- }
1955
- function useRect(element, measure, fallbackRect) {
1956
- if (measure === void 0) {
1957
- measure = defaultMeasure;
1958
- }
1959
- const [rect, setRect] = useState(null);
1960
- function measureRect() {
1961
- setRect((currentRect) => {
1962
- if (!element) {
1963
- return null;
1964
- }
1965
- if (element.isConnected === false) {
1966
- var _ref;
1967
- return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
1968
- }
1969
- const newRect = measure(element);
1970
- if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
1971
- return currentRect;
1972
- }
1973
- return newRect;
1974
- });
1975
- }
1976
- const mutationObserver = useMutationObserver({
1977
- callback(records) {
1978
- if (!element) {
1979
- return;
1980
- }
1981
- for (const record of records) {
1982
- const {
1983
- type,
1984
- target
1985
- } = record;
1986
- if (type === "childList" && target instanceof HTMLElement && target.contains(element)) {
1987
- measureRect();
1988
- break;
1989
- }
1990
- }
1991
- }
1992
- });
1993
- const resizeObserver = useResizeObserver({
1994
- callback: measureRect
1995
- });
1996
- useIsomorphicLayoutEffect(() => {
1997
- measureRect();
1998
- if (element) {
1999
- resizeObserver == null ? void 0 : resizeObserver.observe(element);
2000
- mutationObserver == null ? void 0 : mutationObserver.observe(document.body, {
2001
- childList: true,
2002
- subtree: true
2003
- });
2004
- } else {
2005
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
2006
- mutationObserver == null ? void 0 : mutationObserver.disconnect();
2007
- }
2008
- }, [element]);
2009
- return rect;
2010
- }
2011
- function useRectDelta(rect) {
2012
- const initialRect = useInitialValue(rect);
2013
- return getRectDelta(rect, initialRect);
2014
- }
2015
- const defaultValue$1 = [];
2016
- function useScrollableAncestors(node) {
2017
- const previousNode = useRef(node);
2018
- const ancestors = useLazyMemo((previousValue) => {
2019
- if (!node) {
2020
- return defaultValue$1;
2021
- }
2022
- if (previousValue && previousValue !== defaultValue$1 && node && previousNode.current && node.parentNode === previousNode.current.parentNode) {
2023
- return previousValue;
2024
- }
2025
- return getScrollableAncestors(node);
2026
- }, [node]);
2027
- useEffect(() => {
2028
- previousNode.current = node;
2029
- }, [node]);
2030
- return ancestors;
2031
- }
2032
- function useScrollOffsets(elements) {
2033
- const [scrollCoordinates, setScrollCoordinates] = useState(null);
2034
- const prevElements = useRef(elements);
2035
- const handleScroll = useCallback((event) => {
2036
- const scrollingElement = getScrollableElement(event.target);
2037
- if (!scrollingElement) {
2038
- return;
2039
- }
2040
- setScrollCoordinates((scrollCoordinates2) => {
2041
- if (!scrollCoordinates2) {
2042
- return null;
2043
- }
2044
- scrollCoordinates2.set(scrollingElement, getScrollCoordinates(scrollingElement));
2045
- return new Map(scrollCoordinates2);
2046
- });
2047
- }, []);
2048
- useEffect(() => {
2049
- const previousElements = prevElements.current;
2050
- if (elements !== previousElements) {
2051
- cleanup(previousElements);
2052
- const entries = elements.map((element) => {
2053
- const scrollableElement = getScrollableElement(element);
2054
- if (scrollableElement) {
2055
- scrollableElement.addEventListener("scroll", handleScroll, {
2056
- passive: true
2057
- });
2058
- return [scrollableElement, getScrollCoordinates(scrollableElement)];
2059
- }
2060
- return null;
2061
- }).filter((entry) => entry != null);
2062
- setScrollCoordinates(entries.length ? new Map(entries) : null);
2063
- prevElements.current = elements;
2064
- }
2065
- return () => {
2066
- cleanup(elements);
2067
- cleanup(previousElements);
2068
- };
2069
- function cleanup(elements2) {
2070
- elements2.forEach((element) => {
2071
- const scrollableElement = getScrollableElement(element);
2072
- scrollableElement == null ? void 0 : scrollableElement.removeEventListener("scroll", handleScroll);
2073
- });
2074
- }
2075
- }, [handleScroll, elements]);
2076
- return useMemo(() => {
2077
- if (elements.length) {
2078
- return scrollCoordinates ? Array.from(scrollCoordinates.values()).reduce((acc, coordinates) => add(acc, coordinates), defaultCoordinates) : getScrollOffsets(elements);
2079
- }
2080
- return defaultCoordinates;
2081
- }, [elements, scrollCoordinates]);
2082
- }
2083
- function useScrollOffsetsDelta(scrollOffsets, dependencies) {
2084
- if (dependencies === void 0) {
2085
- dependencies = [];
2086
- }
2087
- const initialScrollOffsets = useRef(null);
2088
- useEffect(
2089
- () => {
2090
- initialScrollOffsets.current = null;
2091
- },
2092
- // eslint-disable-next-line react-hooks/exhaustive-deps
2093
- dependencies
2094
- );
2095
- useEffect(() => {
2096
- const hasScrollOffsets = scrollOffsets !== defaultCoordinates;
2097
- if (hasScrollOffsets && !initialScrollOffsets.current) {
2098
- initialScrollOffsets.current = scrollOffsets;
2099
- }
2100
- if (!hasScrollOffsets && initialScrollOffsets.current) {
2101
- initialScrollOffsets.current = null;
2102
- }
2103
- }, [scrollOffsets]);
2104
- return initialScrollOffsets.current ? subtract(scrollOffsets, initialScrollOffsets.current) : defaultCoordinates;
2105
- }
2106
- function useSensorSetup(sensors) {
2107
- useEffect(
2108
- () => {
2109
- if (!canUseDOM) {
2110
- return;
2111
- }
2112
- const teardownFns = sensors.map((_ref) => {
2113
- let {
2114
- sensor
2115
- } = _ref;
2116
- return sensor.setup == null ? void 0 : sensor.setup();
2117
- });
2118
- return () => {
2119
- for (const teardown of teardownFns) {
2120
- teardown == null ? void 0 : teardown();
2121
- }
2122
- };
2123
- },
2124
- // TO-DO: Sensors length could theoretically change which would not be a valid dependency
2125
- // eslint-disable-next-line react-hooks/exhaustive-deps
2126
- sensors.map((_ref2) => {
2127
- let {
2128
- sensor
2129
- } = _ref2;
2130
- return sensor;
2131
- })
2132
- );
2133
- }
2134
- function useSyntheticListeners(listeners, id) {
2135
- return useMemo(() => {
2136
- return listeners.reduce((acc, _ref) => {
2137
- let {
2138
- eventName,
2139
- handler
2140
- } = _ref;
2141
- acc[eventName] = (event) => {
2142
- handler(event, id);
2143
- };
2144
- return acc;
2145
- }, {});
2146
- }, [listeners, id]);
2147
- }
2148
- function useWindowRect(element) {
2149
- return useMemo(() => element ? getWindowClientRect(element) : null, [element]);
2150
- }
2151
- const defaultValue$2 = [];
2152
- function useRects(elements, measure) {
2153
- if (measure === void 0) {
2154
- measure = getClientRect;
2155
- }
2156
- const [firstElement] = elements;
2157
- const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
2158
- const [rects, setRects] = useState(defaultValue$2);
2159
- function measureRects() {
2160
- setRects(() => {
2161
- if (!elements.length) {
2162
- return defaultValue$2;
2163
- }
2164
- return elements.map((element) => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
2165
- });
2166
- }
2167
- const resizeObserver = useResizeObserver({
2168
- callback: measureRects
2169
- });
2170
- useIsomorphicLayoutEffect(() => {
2171
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
2172
- measureRects();
2173
- elements.forEach((element) => resizeObserver == null ? void 0 : resizeObserver.observe(element));
2174
- }, [elements]);
2175
- return rects;
2176
- }
2177
- function getMeasurableNode(node) {
2178
- if (!node) {
2179
- return null;
2180
- }
2181
- if (node.children.length > 1) {
2182
- return node;
2183
- }
2184
- const firstChild = node.children[0];
2185
- return isHTMLElement(firstChild) ? firstChild : node;
2186
- }
2187
- function useDragOverlayMeasuring(_ref) {
2188
- let {
2189
- measure
2190
- } = _ref;
2191
- const [rect, setRect] = useState(null);
2192
- const handleResize = useCallback((entries) => {
2193
- for (const {
2194
- target
2195
- } of entries) {
2196
- if (isHTMLElement(target)) {
2197
- setRect((rect2) => {
2198
- const newRect = measure(target);
2199
- return rect2 ? {
2200
- ...rect2,
2201
- width: newRect.width,
2202
- height: newRect.height
2203
- } : newRect;
2204
- });
2205
- break;
2206
- }
2207
- }
2208
- }, [measure]);
2209
- const resizeObserver = useResizeObserver({
2210
- callback: handleResize
2211
- });
2212
- const handleNodeChange = useCallback((element) => {
2213
- const node = getMeasurableNode(element);
2214
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
2215
- if (node) {
2216
- resizeObserver == null ? void 0 : resizeObserver.observe(node);
2217
- }
2218
- setRect(node ? measure(node) : null);
2219
- }, [measure, resizeObserver]);
2220
- const [nodeRef, setRef] = useNodeRef(handleNodeChange);
2221
- return useMemo(() => ({
2222
- nodeRef,
2223
- rect,
2224
- setRef
2225
- }), [rect, nodeRef, setRef]);
2226
- }
2227
- const defaultSensors = [{
2228
- sensor: PointerSensor,
2229
- options: {}
2230
- }, {
2231
- sensor: KeyboardSensor,
2232
- options: {}
2233
- }];
2234
- const defaultData = {
2235
- current: {}
2236
- };
2237
- const defaultMeasuringConfiguration = {
2238
- draggable: {
2239
- measure: getTransformAgnosticClientRect
2240
- },
2241
- droppable: {
2242
- measure: getTransformAgnosticClientRect,
2243
- strategy: MeasuringStrategy.WhileDragging,
2244
- frequency: MeasuringFrequency.Optimized
2245
- },
2246
- dragOverlay: {
2247
- measure: getClientRect
2248
- }
2249
- };
2250
- class DroppableContainersMap extends Map {
2251
- get(id) {
2252
- var _super$get;
2253
- return id != null ? (_super$get = super.get(id)) != null ? _super$get : void 0 : void 0;
2254
- }
2255
- toArray() {
2256
- return Array.from(this.values());
2257
- }
2258
- getEnabled() {
2259
- return this.toArray().filter((_ref) => {
2260
- let {
2261
- disabled
2262
- } = _ref;
2263
- return !disabled;
2264
- });
2265
- }
2266
- getNodeFor(id) {
2267
- var _this$get$node$curren, _this$get;
2268
- return (_this$get$node$curren = (_this$get = this.get(id)) == null ? void 0 : _this$get.node.current) != null ? _this$get$node$curren : void 0;
2269
- }
2270
- }
2271
- const defaultPublicContext = {
2272
- activatorEvent: null,
2273
- active: null,
2274
- activeNode: null,
2275
- activeNodeRect: null,
2276
- collisions: null,
2277
- containerNodeRect: null,
2278
- draggableNodes: /* @__PURE__ */ new Map(),
2279
- droppableRects: /* @__PURE__ */ new Map(),
2280
- droppableContainers: /* @__PURE__ */ new DroppableContainersMap(),
2281
- over: null,
2282
- dragOverlay: {
2283
- nodeRef: {
2284
- current: null
2285
- },
2286
- rect: null,
2287
- setRef: noop
2288
- },
2289
- scrollableAncestors: [],
2290
- scrollableAncestorRects: [],
2291
- measuringConfiguration: defaultMeasuringConfiguration,
2292
- measureDroppableContainers: noop,
2293
- windowRect: null,
2294
- measuringScheduled: false
2295
- };
2296
- const defaultInternalContext = {
2297
- activatorEvent: null,
2298
- activators: [],
2299
- active: null,
2300
- activeNodeRect: null,
2301
- ariaDescribedById: {
2302
- draggable: ""
2303
- },
2304
- dispatch: noop,
2305
- draggableNodes: /* @__PURE__ */ new Map(),
2306
- over: null,
2307
- measureDroppableContainers: noop
2308
- };
2309
- const InternalContext = /* @__PURE__ */ createContext(defaultInternalContext);
2310
- const PublicContext = /* @__PURE__ */ createContext(defaultPublicContext);
2311
- function getInitialState() {
2312
- return {
2313
- draggable: {
2314
- active: null,
2315
- initialCoordinates: {
2316
- x: 0,
2317
- y: 0
2318
- },
2319
- nodes: /* @__PURE__ */ new Map(),
2320
- translate: {
2321
- x: 0,
2322
- y: 0
2323
- }
2324
- },
2325
- droppable: {
2326
- containers: new DroppableContainersMap()
2327
- }
2328
- };
2329
- }
2330
- function reducer(state, action) {
2331
- switch (action.type) {
2332
- case Action.DragStart:
2333
- return {
2334
- ...state,
2335
- draggable: {
2336
- ...state.draggable,
2337
- initialCoordinates: action.initialCoordinates,
2338
- active: action.active
2339
- }
2340
- };
2341
- case Action.DragMove:
2342
- if (state.draggable.active == null) {
2343
- return state;
2344
- }
2345
- return {
2346
- ...state,
2347
- draggable: {
2348
- ...state.draggable,
2349
- translate: {
2350
- x: action.coordinates.x - state.draggable.initialCoordinates.x,
2351
- y: action.coordinates.y - state.draggable.initialCoordinates.y
2352
- }
2353
- }
2354
- };
2355
- case Action.DragEnd:
2356
- case Action.DragCancel:
2357
- return {
2358
- ...state,
2359
- draggable: {
2360
- ...state.draggable,
2361
- active: null,
2362
- initialCoordinates: {
2363
- x: 0,
2364
- y: 0
2365
- },
2366
- translate: {
2367
- x: 0,
2368
- y: 0
2369
- }
2370
- }
2371
- };
2372
- case Action.RegisterDroppable: {
2373
- const {
2374
- element
2375
- } = action;
2376
- const {
2377
- id
2378
- } = element;
2379
- const containers = new DroppableContainersMap(state.droppable.containers);
2380
- containers.set(id, element);
2381
- return {
2382
- ...state,
2383
- droppable: {
2384
- ...state.droppable,
2385
- containers
2386
- }
2387
- };
2388
- }
2389
- case Action.SetDroppableDisabled: {
2390
- const {
2391
- id,
2392
- key,
2393
- disabled
2394
- } = action;
2395
- const element = state.droppable.containers.get(id);
2396
- if (!element || key !== element.key) {
2397
- return state;
2398
- }
2399
- const containers = new DroppableContainersMap(state.droppable.containers);
2400
- containers.set(id, {
2401
- ...element,
2402
- disabled
2403
- });
2404
- return {
2405
- ...state,
2406
- droppable: {
2407
- ...state.droppable,
2408
- containers
2409
- }
2410
- };
2411
- }
2412
- case Action.UnregisterDroppable: {
2413
- const {
2414
- id,
2415
- key
2416
- } = action;
2417
- const element = state.droppable.containers.get(id);
2418
- if (!element || key !== element.key) {
2419
- return state;
2420
- }
2421
- const containers = new DroppableContainersMap(state.droppable.containers);
2422
- containers.delete(id);
2423
- return {
2424
- ...state,
2425
- droppable: {
2426
- ...state.droppable,
2427
- containers
2428
- }
2429
- };
2430
- }
2431
- default: {
2432
- return state;
2433
- }
2434
- }
2435
- }
2436
- function RestoreFocus(_ref) {
2437
- let {
2438
- disabled
2439
- } = _ref;
2440
- const {
2441
- active,
2442
- activatorEvent,
2443
- draggableNodes
2444
- } = useContext(InternalContext);
2445
- const previousActivatorEvent = usePrevious(activatorEvent);
2446
- const previousActiveId = usePrevious(active == null ? void 0 : active.id);
2447
- useEffect(() => {
2448
- if (disabled) {
2449
- return;
2450
- }
2451
- if (!activatorEvent && previousActivatorEvent && previousActiveId != null) {
2452
- if (!isKeyboardEvent(previousActivatorEvent)) {
2453
- return;
2454
- }
2455
- if (document.activeElement === previousActivatorEvent.target) {
2456
- return;
2457
- }
2458
- const draggableNode = draggableNodes.get(previousActiveId);
2459
- if (!draggableNode) {
2460
- return;
2461
- }
2462
- const {
2463
- activatorNode,
2464
- node
2465
- } = draggableNode;
2466
- if (!activatorNode.current && !node.current) {
2467
- return;
2468
- }
2469
- requestAnimationFrame(() => {
2470
- for (const element of [activatorNode.current, node.current]) {
2471
- if (!element) {
2472
- continue;
2473
- }
2474
- const focusableNode = findFirstFocusableNode(element);
2475
- if (focusableNode) {
2476
- focusableNode.focus();
2477
- break;
2478
- }
2479
- }
2480
- });
2481
- }
2482
- }, [activatorEvent, disabled, draggableNodes, previousActiveId, previousActivatorEvent]);
2483
- return null;
2484
- }
2485
- function applyModifiers(modifiers, _ref) {
2486
- let {
2487
- transform,
2488
- ...args
2489
- } = _ref;
2490
- return modifiers != null && modifiers.length ? modifiers.reduce((accumulator, modifier) => {
2491
- return modifier({
2492
- transform: accumulator,
2493
- ...args
2494
- });
2495
- }, transform) : transform;
2496
- }
2497
- function useMeasuringConfiguration(config) {
2498
- return useMemo(
2499
- () => ({
2500
- draggable: {
2501
- ...defaultMeasuringConfiguration.draggable,
2502
- ...config == null ? void 0 : config.draggable
2503
- },
2504
- droppable: {
2505
- ...defaultMeasuringConfiguration.droppable,
2506
- ...config == null ? void 0 : config.droppable
2507
- },
2508
- dragOverlay: {
2509
- ...defaultMeasuringConfiguration.dragOverlay,
2510
- ...config == null ? void 0 : config.dragOverlay
2511
- }
2512
- }),
2513
- // eslint-disable-next-line react-hooks/exhaustive-deps
2514
- [config == null ? void 0 : config.draggable, config == null ? void 0 : config.droppable, config == null ? void 0 : config.dragOverlay]
2515
- );
2516
- }
2517
- function useLayoutShiftScrollCompensation(_ref) {
2518
- let {
2519
- activeNode,
2520
- measure,
2521
- initialRect,
2522
- config = true
2523
- } = _ref;
2524
- const initialized = useRef(false);
2525
- const {
2526
- x,
2527
- y
2528
- } = typeof config === "boolean" ? {
2529
- x: config,
2530
- y: config
2531
- } : config;
2532
- useIsomorphicLayoutEffect(() => {
2533
- const disabled = !x && !y;
2534
- if (disabled || !activeNode) {
2535
- initialized.current = false;
2536
- return;
2537
- }
2538
- if (initialized.current || !initialRect) {
2539
- return;
2540
- }
2541
- const node = activeNode == null ? void 0 : activeNode.node.current;
2542
- if (!node || node.isConnected === false) {
2543
- return;
2544
- }
2545
- const rect = measure(node);
2546
- const rectDelta = getRectDelta(rect, initialRect);
2547
- if (!x) {
2548
- rectDelta.x = 0;
2549
- }
2550
- if (!y) {
2551
- rectDelta.y = 0;
2552
- }
2553
- initialized.current = true;
2554
- if (Math.abs(rectDelta.x) > 0 || Math.abs(rectDelta.y) > 0) {
2555
- const firstScrollableAncestor = getFirstScrollableAncestor(node);
2556
- if (firstScrollableAncestor) {
2557
- firstScrollableAncestor.scrollBy({
2558
- top: rectDelta.y,
2559
- left: rectDelta.x
2560
- });
2561
- }
2562
- }
2563
- }, [activeNode, x, y, initialRect, measure]);
2564
- }
2565
- const ActiveDraggableContext = /* @__PURE__ */ createContext({
2566
- ...defaultCoordinates,
2567
- scaleX: 1,
2568
- scaleY: 1
2569
- });
2570
- var Status;
2571
- (function(Status2) {
2572
- Status2[Status2["Uninitialized"] = 0] = "Uninitialized";
2573
- Status2[Status2["Initializing"] = 1] = "Initializing";
2574
- Status2[Status2["Initialized"] = 2] = "Initialized";
2575
- })(Status || (Status = {}));
2576
- const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
2577
- var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
2578
- let {
2579
- id,
2580
- accessibility,
2581
- autoScroll = true,
2582
- children,
2583
- sensors = defaultSensors,
2584
- collisionDetection = rectIntersection,
2585
- measuring,
2586
- modifiers,
2587
- ...props
2588
- } = _ref;
2589
- const store = useReducer(reducer, void 0, getInitialState);
2590
- const [state, dispatch] = store;
2591
- const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
2592
- const [status, setStatus] = useState(Status.Uninitialized);
2593
- const isInitialized = status === Status.Initialized;
2594
- const {
2595
- draggable: {
2596
- active: activeId,
2597
- nodes: draggableNodes,
2598
- translate
2599
- },
2600
- droppable: {
2601
- containers: droppableContainers
2602
- }
2603
- } = state;
2604
- const node = activeId != null ? draggableNodes.get(activeId) : null;
2605
- const activeRects = useRef({
2606
- initial: null,
2607
- translated: null
2608
- });
2609
- const active = useMemo(() => {
2610
- var _node$data;
2611
- return activeId != null ? {
2612
- id: activeId,
2613
- // It's possible for the active node to unmount while dragging
2614
- data: (_node$data = node == null ? void 0 : node.data) != null ? _node$data : defaultData,
2615
- rect: activeRects
2616
- } : null;
2617
- }, [activeId, node]);
2618
- const activeRef = useRef(null);
2619
- const [activeSensor, setActiveSensor] = useState(null);
2620
- const [activatorEvent, setActivatorEvent] = useState(null);
2621
- const latestProps = useLatestValue(props, Object.values(props));
2622
- const draggableDescribedById = useUniqueId("DndDescribedBy", id);
2623
- const enabledDroppableContainers = useMemo(() => droppableContainers.getEnabled(), [droppableContainers]);
2624
- const measuringConfiguration = useMeasuringConfiguration(measuring);
2625
- const {
2626
- droppableRects,
2627
- measureDroppableContainers,
2628
- measuringScheduled
2629
- } = useDroppableMeasuring(enabledDroppableContainers, {
2630
- dragging: isInitialized,
2631
- dependencies: [translate.x, translate.y],
2632
- config: measuringConfiguration.droppable
2633
- });
2634
- const activeNode = useCachedNode(draggableNodes, activeId);
2635
- const activationCoordinates = useMemo(() => activatorEvent ? getEventCoordinates(activatorEvent) : null, [activatorEvent]);
2636
- const autoScrollOptions = getAutoScrollerOptions();
2637
- const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
2638
- useLayoutShiftScrollCompensation({
2639
- activeNode: activeId != null ? draggableNodes.get(activeId) : null,
2640
- config: autoScrollOptions.layoutShiftCompensation,
2641
- initialRect: initialActiveNodeRect,
2642
- measure: measuringConfiguration.draggable.measure
2643
- });
2644
- const activeNodeRect = useRect(activeNode, measuringConfiguration.draggable.measure, initialActiveNodeRect);
2645
- const containerNodeRect = useRect(activeNode ? activeNode.parentElement : null);
2646
- const sensorContext = useRef({
2647
- activatorEvent: null,
2648
- active: null,
2649
- activeNode,
2650
- collisionRect: null,
2651
- collisions: null,
2652
- droppableRects,
2653
- draggableNodes,
2654
- draggingNode: null,
2655
- draggingNodeRect: null,
2656
- droppableContainers,
2657
- over: null,
2658
- scrollableAncestors: [],
2659
- scrollAdjustedTranslate: null
2660
- });
2661
- const overNode = droppableContainers.getNodeFor((_sensorContext$curren = sensorContext.current.over) == null ? void 0 : _sensorContext$curren.id);
2662
- const dragOverlay = useDragOverlayMeasuring({
2663
- measure: measuringConfiguration.dragOverlay.measure
2664
- });
2665
- const draggingNode = (_dragOverlay$nodeRef$ = dragOverlay.nodeRef.current) != null ? _dragOverlay$nodeRef$ : activeNode;
2666
- const draggingNodeRect = isInitialized ? (_dragOverlay$rect = dragOverlay.rect) != null ? _dragOverlay$rect : activeNodeRect : null;
2667
- const usesDragOverlay = Boolean(dragOverlay.nodeRef.current && dragOverlay.rect);
2668
- const nodeRectDelta = useRectDelta(usesDragOverlay ? null : activeNodeRect);
2669
- const windowRect = useWindowRect(draggingNode ? getWindow(draggingNode) : null);
2670
- const scrollableAncestors = useScrollableAncestors(isInitialized ? overNode != null ? overNode : activeNode : null);
2671
- const scrollableAncestorRects = useRects(scrollableAncestors);
2672
- const modifiedTranslate = applyModifiers(modifiers, {
2673
- transform: {
2674
- x: translate.x - nodeRectDelta.x,
2675
- y: translate.y - nodeRectDelta.y,
2676
- scaleX: 1,
2677
- scaleY: 1
2678
- },
2679
- activatorEvent,
2680
- active,
2681
- activeNodeRect,
2682
- containerNodeRect,
2683
- draggingNodeRect,
2684
- over: sensorContext.current.over,
2685
- overlayNodeRect: dragOverlay.rect,
2686
- scrollableAncestors,
2687
- scrollableAncestorRects,
2688
- windowRect
2689
- });
2690
- const pointerCoordinates = activationCoordinates ? add(activationCoordinates, translate) : null;
2691
- const scrollOffsets = useScrollOffsets(scrollableAncestors);
2692
- const scrollAdjustment = useScrollOffsetsDelta(scrollOffsets);
2693
- const activeNodeScrollDelta = useScrollOffsetsDelta(scrollOffsets, [activeNodeRect]);
2694
- const scrollAdjustedTranslate = add(modifiedTranslate, scrollAdjustment);
2695
- const collisionRect = draggingNodeRect ? getAdjustedRect(draggingNodeRect, modifiedTranslate) : null;
2696
- const collisions = active && collisionRect ? collisionDetection({
2697
- active,
2698
- collisionRect,
2699
- droppableRects,
2700
- droppableContainers: enabledDroppableContainers,
2701
- pointerCoordinates
2702
- }) : null;
2703
- const overId = getFirstCollision(collisions, "id");
2704
- const [over, setOver] = useState(null);
2705
- const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
2706
- const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
2707
- const activeSensorRef = useRef(null);
2708
- const instantiateSensor = useCallback(
2709
- (event, _ref2) => {
2710
- let {
2711
- sensor: Sensor,
2712
- options
2713
- } = _ref2;
2714
- if (activeRef.current == null) {
2715
- return;
2716
- }
2717
- const activeNode2 = draggableNodes.get(activeRef.current);
2718
- if (!activeNode2) {
2719
- return;
2720
- }
2721
- const activatorEvent2 = event.nativeEvent;
2722
- const sensorInstance = new Sensor({
2723
- active: activeRef.current,
2724
- activeNode: activeNode2,
2725
- event: activatorEvent2,
2726
- options,
2727
- // Sensors need to be instantiated with refs for arguments that change over time
2728
- // otherwise they are frozen in time with the stale arguments
2729
- context: sensorContext,
2730
- onAbort(id2) {
2731
- const draggableNode = draggableNodes.get(id2);
2732
- if (!draggableNode) {
2733
- return;
2734
- }
2735
- const {
2736
- onDragAbort
2737
- } = latestProps.current;
2738
- const event2 = {
2739
- id: id2
2740
- };
2741
- onDragAbort == null ? void 0 : onDragAbort(event2);
2742
- dispatchMonitorEvent({
2743
- type: "onDragAbort",
2744
- event: event2
2745
- });
2746
- },
2747
- onPending(id2, constraint, initialCoordinates, offset) {
2748
- const draggableNode = draggableNodes.get(id2);
2749
- if (!draggableNode) {
2750
- return;
2751
- }
2752
- const {
2753
- onDragPending
2754
- } = latestProps.current;
2755
- const event2 = {
2756
- id: id2,
2757
- constraint,
2758
- initialCoordinates,
2759
- offset
2760
- };
2761
- onDragPending == null ? void 0 : onDragPending(event2);
2762
- dispatchMonitorEvent({
2763
- type: "onDragPending",
2764
- event: event2
2765
- });
2766
- },
2767
- onStart(initialCoordinates) {
2768
- const id2 = activeRef.current;
2769
- if (id2 == null) {
2770
- return;
2771
- }
2772
- const draggableNode = draggableNodes.get(id2);
2773
- if (!draggableNode) {
2774
- return;
2775
- }
2776
- const {
2777
- onDragStart
2778
- } = latestProps.current;
2779
- const event2 = {
2780
- activatorEvent: activatorEvent2,
2781
- active: {
2782
- id: id2,
2783
- data: draggableNode.data,
2784
- rect: activeRects
2785
- }
2786
- };
2787
- reactDomExports.unstable_batchedUpdates(() => {
2788
- onDragStart == null ? void 0 : onDragStart(event2);
2789
- setStatus(Status.Initializing);
2790
- dispatch({
2791
- type: Action.DragStart,
2792
- initialCoordinates,
2793
- active: id2
2794
- });
2795
- dispatchMonitorEvent({
2796
- type: "onDragStart",
2797
- event: event2
2798
- });
2799
- setActiveSensor(activeSensorRef.current);
2800
- setActivatorEvent(activatorEvent2);
2801
- });
2802
- },
2803
- onMove(coordinates) {
2804
- dispatch({
2805
- type: Action.DragMove,
2806
- coordinates
2807
- });
2808
- },
2809
- onEnd: createHandler(Action.DragEnd),
2810
- onCancel: createHandler(Action.DragCancel)
2811
- });
2812
- activeSensorRef.current = sensorInstance;
2813
- function createHandler(type) {
2814
- return async function handler() {
2815
- const {
2816
- active: active2,
2817
- collisions: collisions2,
2818
- over: over2,
2819
- scrollAdjustedTranslate: scrollAdjustedTranslate2
2820
- } = sensorContext.current;
2821
- let event2 = null;
2822
- if (active2 && scrollAdjustedTranslate2) {
2823
- const {
2824
- cancelDrop
2825
- } = latestProps.current;
2826
- event2 = {
2827
- activatorEvent: activatorEvent2,
2828
- active: active2,
2829
- collisions: collisions2,
2830
- delta: scrollAdjustedTranslate2,
2831
- over: over2
2832
- };
2833
- if (type === Action.DragEnd && typeof cancelDrop === "function") {
2834
- const shouldCancel = await Promise.resolve(cancelDrop(event2));
2835
- if (shouldCancel) {
2836
- type = Action.DragCancel;
2837
- }
2838
- }
2839
- }
2840
- activeRef.current = null;
2841
- reactDomExports.unstable_batchedUpdates(() => {
2842
- dispatch({
2843
- type
2844
- });
2845
- setStatus(Status.Uninitialized);
2846
- setOver(null);
2847
- setActiveSensor(null);
2848
- setActivatorEvent(null);
2849
- activeSensorRef.current = null;
2850
- const eventName = type === Action.DragEnd ? "onDragEnd" : "onDragCancel";
2851
- if (event2) {
2852
- const handler2 = latestProps.current[eventName];
2853
- handler2 == null ? void 0 : handler2(event2);
2854
- dispatchMonitorEvent({
2855
- type: eventName,
2856
- event: event2
2857
- });
2858
- }
2859
- });
2860
- };
2861
- }
2862
- },
2863
- // eslint-disable-next-line react-hooks/exhaustive-deps
2864
- [draggableNodes]
2865
- );
2866
- const bindActivatorToSensorInstantiator = useCallback((handler, sensor) => {
2867
- return (event, active2) => {
2868
- const nativeEvent = event.nativeEvent;
2869
- const activeDraggableNode = draggableNodes.get(active2);
2870
- if (
2871
- // Another sensor is already instantiating
2872
- activeRef.current !== null || // No active draggable
2873
- !activeDraggableNode || // Event has already been captured
2874
- nativeEvent.dndKit || nativeEvent.defaultPrevented
2875
- ) {
2876
- return;
2877
- }
2878
- const activationContext = {
2879
- active: activeDraggableNode
2880
- };
2881
- const shouldActivate = handler(event, sensor.options, activationContext);
2882
- if (shouldActivate === true) {
2883
- nativeEvent.dndKit = {
2884
- capturedBy: sensor.sensor
2885
- };
2886
- activeRef.current = active2;
2887
- instantiateSensor(event, sensor);
2888
- }
2889
- };
2890
- }, [draggableNodes, instantiateSensor]);
2891
- const activators = useCombineActivators(sensors, bindActivatorToSensorInstantiator);
2892
- useSensorSetup(sensors);
2893
- useIsomorphicLayoutEffect(() => {
2894
- if (activeNodeRect && status === Status.Initializing) {
2895
- setStatus(Status.Initialized);
2896
- }
2897
- }, [activeNodeRect, status]);
2898
- useEffect(
2899
- () => {
2900
- const {
2901
- onDragMove
2902
- } = latestProps.current;
2903
- const {
2904
- active: active2,
2905
- activatorEvent: activatorEvent2,
2906
- collisions: collisions2,
2907
- over: over2
2908
- } = sensorContext.current;
2909
- if (!active2 || !activatorEvent2) {
2910
- return;
2911
- }
2912
- const event = {
2913
- active: active2,
2914
- activatorEvent: activatorEvent2,
2915
- collisions: collisions2,
2916
- delta: {
2917
- x: scrollAdjustedTranslate.x,
2918
- y: scrollAdjustedTranslate.y
2919
- },
2920
- over: over2
2921
- };
2922
- reactDomExports.unstable_batchedUpdates(() => {
2923
- onDragMove == null ? void 0 : onDragMove(event);
2924
- dispatchMonitorEvent({
2925
- type: "onDragMove",
2926
- event
2927
- });
2928
- });
2929
- },
2930
- // eslint-disable-next-line react-hooks/exhaustive-deps
2931
- [scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]
2932
- );
2933
- useEffect(
2934
- () => {
2935
- const {
2936
- active: active2,
2937
- activatorEvent: activatorEvent2,
2938
- collisions: collisions2,
2939
- droppableContainers: droppableContainers2,
2940
- scrollAdjustedTranslate: scrollAdjustedTranslate2
2941
- } = sensorContext.current;
2942
- if (!active2 || activeRef.current == null || !activatorEvent2 || !scrollAdjustedTranslate2) {
2943
- return;
2944
- }
2945
- const {
2946
- onDragOver
2947
- } = latestProps.current;
2948
- const overContainer = droppableContainers2.get(overId);
2949
- const over2 = overContainer && overContainer.rect.current ? {
2950
- id: overContainer.id,
2951
- rect: overContainer.rect.current,
2952
- data: overContainer.data,
2953
- disabled: overContainer.disabled
2954
- } : null;
2955
- const event = {
2956
- active: active2,
2957
- activatorEvent: activatorEvent2,
2958
- collisions: collisions2,
2959
- delta: {
2960
- x: scrollAdjustedTranslate2.x,
2961
- y: scrollAdjustedTranslate2.y
2962
- },
2963
- over: over2
2964
- };
2965
- reactDomExports.unstable_batchedUpdates(() => {
2966
- setOver(over2);
2967
- onDragOver == null ? void 0 : onDragOver(event);
2968
- dispatchMonitorEvent({
2969
- type: "onDragOver",
2970
- event
2971
- });
2972
- });
2973
- },
2974
- // eslint-disable-next-line react-hooks/exhaustive-deps
2975
- [overId]
2976
- );
2977
- useIsomorphicLayoutEffect(() => {
2978
- sensorContext.current = {
2979
- activatorEvent,
2980
- active,
2981
- activeNode,
2982
- collisionRect,
2983
- collisions,
2984
- droppableRects,
2985
- draggableNodes,
2986
- draggingNode,
2987
- draggingNodeRect,
2988
- droppableContainers,
2989
- over,
2990
- scrollableAncestors,
2991
- scrollAdjustedTranslate
2992
- };
2993
- activeRects.current = {
2994
- initial: draggingNodeRect,
2995
- translated: collisionRect
2996
- };
2997
- }, [active, activeNode, collisions, collisionRect, draggableNodes, draggingNode, draggingNodeRect, droppableRects, droppableContainers, over, scrollableAncestors, scrollAdjustedTranslate]);
2998
- useAutoScroller({
2999
- ...autoScrollOptions,
3000
- delta: translate,
3001
- draggingRect: collisionRect,
3002
- pointerCoordinates,
3003
- scrollableAncestors,
3004
- scrollableAncestorRects
3005
- });
3006
- const publicContext = useMemo(() => {
3007
- const context = {
3008
- active,
3009
- activeNode,
3010
- activeNodeRect,
3011
- activatorEvent,
3012
- collisions,
3013
- containerNodeRect,
3014
- dragOverlay,
3015
- draggableNodes,
3016
- droppableContainers,
3017
- droppableRects,
3018
- over,
3019
- measureDroppableContainers,
3020
- scrollableAncestors,
3021
- scrollableAncestorRects,
3022
- measuringConfiguration,
3023
- measuringScheduled,
3024
- windowRect
3025
- };
3026
- return context;
3027
- }, [active, activeNode, activeNodeRect, activatorEvent, collisions, containerNodeRect, dragOverlay, draggableNodes, droppableContainers, droppableRects, over, measureDroppableContainers, scrollableAncestors, scrollableAncestorRects, measuringConfiguration, measuringScheduled, windowRect]);
3028
- const internalContext = useMemo(() => {
3029
- const context = {
3030
- activatorEvent,
3031
- activators,
3032
- active,
3033
- activeNodeRect,
3034
- ariaDescribedById: {
3035
- draggable: draggableDescribedById
3036
- },
3037
- dispatch,
3038
- draggableNodes,
3039
- over,
3040
- measureDroppableContainers
3041
- };
3042
- return context;
3043
- }, [activatorEvent, activators, active, activeNodeRect, dispatch, draggableDescribedById, draggableNodes, over, measureDroppableContainers]);
3044
- return React__default.createElement(DndMonitorContext.Provider, {
3045
- value: registerMonitorListener
3046
- }, React__default.createElement(InternalContext.Provider, {
3047
- value: internalContext
3048
- }, React__default.createElement(PublicContext.Provider, {
3049
- value: publicContext
3050
- }, React__default.createElement(ActiveDraggableContext.Provider, {
3051
- value: transform
3052
- }, children)), React__default.createElement(RestoreFocus, {
3053
- disabled: (accessibility == null ? void 0 : accessibility.restoreFocus) === false
3054
- })), React__default.createElement(Accessibility, {
3055
- ...accessibility,
3056
- hiddenTextDescribedById: draggableDescribedById
3057
- }));
3058
- function getAutoScrollerOptions() {
3059
- const activeSensorDisablesAutoscroll = (activeSensor == null ? void 0 : activeSensor.autoScrollEnabled) === false;
3060
- const autoScrollGloballyDisabled = typeof autoScroll === "object" ? autoScroll.enabled === false : autoScroll === false;
3061
- const enabled = isInitialized && !activeSensorDisablesAutoscroll && !autoScrollGloballyDisabled;
3062
- if (typeof autoScroll === "object") {
3063
- return {
3064
- ...autoScroll,
3065
- enabled
3066
- };
3067
- }
3068
- return {
3069
- enabled
3070
- };
3071
- }
3072
- });
3073
- const NullContext = /* @__PURE__ */ createContext(null);
3074
- const defaultRole = "button";
3075
- const ID_PREFIX$1 = "Draggable";
3076
- function useDraggable(_ref) {
3077
- let {
3078
- id,
3079
- data,
3080
- disabled = false,
3081
- attributes
3082
- } = _ref;
3083
- const key = useUniqueId(ID_PREFIX$1);
3084
- const {
3085
- activators,
3086
- activatorEvent,
3087
- active,
3088
- activeNodeRect,
3089
- ariaDescribedById,
3090
- draggableNodes,
3091
- over
3092
- } = useContext(InternalContext);
3093
- const {
3094
- role = defaultRole,
3095
- roleDescription = "draggable",
3096
- tabIndex = 0
3097
- } = attributes != null ? attributes : {};
3098
- const isDragging = (active == null ? void 0 : active.id) === id;
3099
- const transform = useContext(isDragging ? ActiveDraggableContext : NullContext);
3100
- const [node, setNodeRef] = useNodeRef();
3101
- const [activatorNode, setActivatorNodeRef] = useNodeRef();
3102
- const listeners = useSyntheticListeners(activators, id);
3103
- const dataRef = useLatestValue(data);
3104
- useIsomorphicLayoutEffect(
3105
- () => {
3106
- draggableNodes.set(id, {
3107
- id,
3108
- key,
3109
- node,
3110
- activatorNode,
3111
- data: dataRef
3112
- });
3113
- return () => {
3114
- const node2 = draggableNodes.get(id);
3115
- if (node2 && node2.key === key) {
3116
- draggableNodes.delete(id);
3117
- }
3118
- };
3119
- },
3120
- // eslint-disable-next-line react-hooks/exhaustive-deps
3121
- [draggableNodes, id]
3122
- );
3123
- const memoizedAttributes = useMemo(() => ({
3124
- role,
3125
- tabIndex,
3126
- "aria-disabled": disabled,
3127
- "aria-pressed": isDragging && role === defaultRole ? true : void 0,
3128
- "aria-roledescription": roleDescription,
3129
- "aria-describedby": ariaDescribedById.draggable
3130
- }), [disabled, role, tabIndex, isDragging, roleDescription, ariaDescribedById.draggable]);
3131
- return {
3132
- active,
3133
- activatorEvent,
3134
- activeNodeRect,
3135
- attributes: memoizedAttributes,
3136
- isDragging,
3137
- listeners: disabled ? void 0 : listeners,
3138
- node,
3139
- over,
3140
- setNodeRef,
3141
- setActivatorNodeRef,
3142
- transform
3143
- };
3144
- }
3145
- function useDndContext() {
3146
- return useContext(PublicContext);
3147
- }
3148
- const ID_PREFIX$1$1 = "Droppable";
3149
- const defaultResizeObserverConfig = {
3150
- timeout: 25
3151
- };
3152
- function useDroppable(_ref) {
3153
- let {
3154
- data,
3155
- disabled = false,
3156
- id,
3157
- resizeObserverConfig
3158
- } = _ref;
3159
- const key = useUniqueId(ID_PREFIX$1$1);
3160
- const {
3161
- active,
3162
- dispatch,
3163
- over,
3164
- measureDroppableContainers
3165
- } = useContext(InternalContext);
3166
- const previous = useRef({
3167
- disabled
3168
- });
3169
- const resizeObserverConnected = useRef(false);
3170
- const rect = useRef(null);
3171
- const callbackId = useRef(null);
3172
- const {
3173
- disabled: resizeObserverDisabled,
3174
- updateMeasurementsFor,
3175
- timeout: resizeObserverTimeout
3176
- } = {
3177
- ...defaultResizeObserverConfig,
3178
- ...resizeObserverConfig
3179
- };
3180
- const ids2 = useLatestValue(updateMeasurementsFor != null ? updateMeasurementsFor : id);
3181
- const handleResize = useCallback(
3182
- () => {
3183
- if (!resizeObserverConnected.current) {
3184
- resizeObserverConnected.current = true;
3185
- return;
3186
- }
3187
- if (callbackId.current != null) {
3188
- clearTimeout(callbackId.current);
3189
- }
3190
- callbackId.current = setTimeout(() => {
3191
- measureDroppableContainers(Array.isArray(ids2.current) ? ids2.current : [ids2.current]);
3192
- callbackId.current = null;
3193
- }, resizeObserverTimeout);
3194
- },
3195
- //eslint-disable-next-line react-hooks/exhaustive-deps
3196
- [resizeObserverTimeout]
3197
- );
3198
- const resizeObserver = useResizeObserver({
3199
- callback: handleResize,
3200
- disabled: resizeObserverDisabled || !active
3201
- });
3202
- const handleNodeChange = useCallback((newElement, previousElement) => {
3203
- if (!resizeObserver) {
3204
- return;
3205
- }
3206
- if (previousElement) {
3207
- resizeObserver.unobserve(previousElement);
3208
- resizeObserverConnected.current = false;
3209
- }
3210
- if (newElement) {
3211
- resizeObserver.observe(newElement);
3212
- }
3213
- }, [resizeObserver]);
3214
- const [nodeRef, setNodeRef] = useNodeRef(handleNodeChange);
3215
- const dataRef = useLatestValue(data);
3216
- useEffect(() => {
3217
- if (!resizeObserver || !nodeRef.current) {
3218
- return;
3219
- }
3220
- resizeObserver.disconnect();
3221
- resizeObserverConnected.current = false;
3222
- resizeObserver.observe(nodeRef.current);
3223
- }, [nodeRef, resizeObserver]);
3224
- useEffect(
3225
- () => {
3226
- dispatch({
3227
- type: Action.RegisterDroppable,
3228
- element: {
3229
- id,
3230
- key,
3231
- disabled,
3232
- node: nodeRef,
3233
- rect,
3234
- data: dataRef
3235
- }
3236
- });
3237
- return () => dispatch({
3238
- type: Action.UnregisterDroppable,
3239
- key,
3240
- id
3241
- });
3242
- },
3243
- // eslint-disable-next-line react-hooks/exhaustive-deps
3244
- [id]
3245
- );
3246
- useEffect(() => {
3247
- if (disabled !== previous.current.disabled) {
3248
- dispatch({
3249
- type: Action.SetDroppableDisabled,
3250
- id,
3251
- key,
3252
- disabled
3253
- });
3254
- previous.current.disabled = disabled;
3255
- }
3256
- }, [id, key, disabled, dispatch]);
3257
- return {
3258
- active,
3259
- rect,
3260
- isOver: (over == null ? void 0 : over.id) === id,
3261
- node: nodeRef,
3262
- over,
3263
- setNodeRef
3264
- };
3265
- }
3266
- function arrayMove(array, from, to) {
3267
- const newArray = array.slice();
3268
- newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
3269
- return newArray;
3270
- }
3271
- function getSortedRects(items, rects) {
3272
- return items.reduce((accumulator, id, index) => {
3273
- const rect = rects.get(id);
3274
- if (rect) {
3275
- accumulator[index] = rect;
3276
- }
3277
- return accumulator;
3278
- }, Array(items.length));
3279
- }
3280
- function isValidIndex(index) {
3281
- return index !== null && index >= 0;
3282
- }
3283
- function itemsEqual(a, b) {
3284
- if (a === b) {
3285
- return true;
3286
- }
3287
- if (a.length !== b.length) {
3288
- return false;
3289
- }
3290
- for (let i = 0; i < a.length; i++) {
3291
- if (a[i] !== b[i]) {
3292
- return false;
3293
- }
3294
- }
3295
- return true;
3296
- }
3297
- function normalizeDisabled(disabled) {
3298
- if (typeof disabled === "boolean") {
3299
- return {
3300
- draggable: disabled,
3301
- droppable: disabled
3302
- };
3303
- }
3304
- return disabled;
3305
- }
3306
- const rectSortingStrategy = (_ref) => {
3307
- let {
3308
- rects,
3309
- activeIndex,
3310
- overIndex,
3311
- index
3312
- } = _ref;
3313
- const newRects = arrayMove(rects, overIndex, activeIndex);
3314
- const oldRect = rects[index];
3315
- const newRect = newRects[index];
3316
- if (!newRect || !oldRect) {
3317
- return null;
3318
- }
3319
- return {
3320
- x: newRect.left - oldRect.left,
3321
- y: newRect.top - oldRect.top,
3322
- scaleX: newRect.width / oldRect.width,
3323
- scaleY: newRect.height / oldRect.height
3324
- };
3325
- };
3326
- const ID_PREFIX = "Sortable";
3327
- const Context = /* @__PURE__ */ React__default.createContext({
3328
- activeIndex: -1,
3329
- containerId: ID_PREFIX,
3330
- disableTransforms: false,
3331
- items: [],
3332
- overIndex: -1,
3333
- useDragOverlay: false,
3334
- sortedRects: [],
3335
- strategy: rectSortingStrategy,
3336
- disabled: {
3337
- draggable: false,
3338
- droppable: false
3339
- }
3340
- });
3341
- function SortableContext(_ref) {
3342
- let {
3343
- children,
3344
- id,
3345
- items: userDefinedItems,
3346
- strategy = rectSortingStrategy,
3347
- disabled: disabledProp = false
3348
- } = _ref;
3349
- const {
3350
- active,
3351
- dragOverlay,
3352
- droppableRects,
3353
- over,
3354
- measureDroppableContainers
3355
- } = useDndContext();
3356
- const containerId = useUniqueId(ID_PREFIX, id);
3357
- const useDragOverlay = Boolean(dragOverlay.rect !== null);
3358
- const items = useMemo(() => userDefinedItems.map((item) => typeof item === "object" && "id" in item ? item.id : item), [userDefinedItems]);
3359
- const isDragging = active != null;
3360
- const activeIndex = active ? items.indexOf(active.id) : -1;
3361
- const overIndex = over ? items.indexOf(over.id) : -1;
3362
- const previousItemsRef = useRef(items);
3363
- const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
3364
- const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
3365
- const disabled = normalizeDisabled(disabledProp);
3366
- useIsomorphicLayoutEffect(() => {
3367
- if (itemsHaveChanged && isDragging) {
3368
- measureDroppableContainers(items);
3369
- }
3370
- }, [itemsHaveChanged, items, isDragging, measureDroppableContainers]);
3371
- useEffect(() => {
3372
- previousItemsRef.current = items;
3373
- }, [items]);
3374
- const contextValue = useMemo(
3375
- () => ({
3376
- activeIndex,
3377
- containerId,
3378
- disabled,
3379
- disableTransforms,
3380
- items,
3381
- overIndex,
3382
- useDragOverlay,
3383
- sortedRects: getSortedRects(items, droppableRects),
3384
- strategy
3385
- }),
3386
- // eslint-disable-next-line react-hooks/exhaustive-deps
3387
- [activeIndex, containerId, disabled.draggable, disabled.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]
3388
- );
3389
- return React__default.createElement(Context.Provider, {
3390
- value: contextValue
3391
- }, children);
3392
- }
3393
- const defaultNewIndexGetter = (_ref) => {
3394
- let {
3395
- id,
3396
- items,
3397
- activeIndex,
3398
- overIndex
3399
- } = _ref;
3400
- return arrayMove(items, activeIndex, overIndex).indexOf(id);
3401
- };
3402
- const defaultAnimateLayoutChanges = (_ref2) => {
3403
- let {
3404
- containerId,
3405
- isSorting,
3406
- wasDragging,
3407
- index,
3408
- items,
3409
- newIndex,
3410
- previousItems,
3411
- previousContainerId,
3412
- transition
3413
- } = _ref2;
3414
- if (!transition || !wasDragging) {
3415
- return false;
3416
- }
3417
- if (previousItems !== items && index === newIndex) {
3418
- return false;
3419
- }
3420
- if (isSorting) {
3421
- return true;
3422
- }
3423
- return newIndex !== index && containerId === previousContainerId;
3424
- };
3425
- const defaultTransition = {
3426
- duration: 200,
3427
- easing: "ease"
3428
- };
3429
- const transitionProperty = "transform";
3430
- const disabledTransition = /* @__PURE__ */ CSS.Transition.toString({
3431
- property: transitionProperty,
3432
- duration: 0,
3433
- easing: "linear"
3434
- });
3435
- const defaultAttributes = {
3436
- roleDescription: "sortable"
3437
- };
3438
- function useDerivedTransform(_ref) {
3439
- let {
3440
- disabled,
3441
- index,
3442
- node,
3443
- rect
3444
- } = _ref;
3445
- const [derivedTransform, setDerivedtransform] = useState(null);
3446
- const previousIndex = useRef(index);
3447
- useIsomorphicLayoutEffect(() => {
3448
- if (!disabled && index !== previousIndex.current && node.current) {
3449
- const initial = rect.current;
3450
- if (initial) {
3451
- const current = getClientRect(node.current, {
3452
- ignoreTransform: true
3453
- });
3454
- const delta = {
3455
- x: initial.left - current.left,
3456
- y: initial.top - current.top,
3457
- scaleX: initial.width / current.width,
3458
- scaleY: initial.height / current.height
3459
- };
3460
- if (delta.x || delta.y) {
3461
- setDerivedtransform(delta);
3462
- }
3463
- }
3464
- }
3465
- if (index !== previousIndex.current) {
3466
- previousIndex.current = index;
3467
- }
3468
- }, [disabled, index, node, rect]);
3469
- useEffect(() => {
3470
- if (derivedTransform) {
3471
- setDerivedtransform(null);
3472
- }
3473
- }, [derivedTransform]);
3474
- return derivedTransform;
3475
- }
3476
- function useSortable(_ref) {
3477
- let {
3478
- animateLayoutChanges = defaultAnimateLayoutChanges,
3479
- attributes: userDefinedAttributes,
3480
- disabled: localDisabled,
3481
- data: customData,
3482
- getNewIndex = defaultNewIndexGetter,
3483
- id,
3484
- strategy: localStrategy,
3485
- resizeObserverConfig,
3486
- transition = defaultTransition
3487
- } = _ref;
3488
- const {
3489
- items,
3490
- containerId,
3491
- activeIndex,
3492
- disabled: globalDisabled,
3493
- disableTransforms,
3494
- sortedRects,
3495
- overIndex,
3496
- useDragOverlay,
3497
- strategy: globalStrategy
3498
- } = useContext(Context);
3499
- const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
3500
- const index = items.indexOf(id);
3501
- const data = useMemo(() => ({
3502
- sortable: {
3503
- containerId,
3504
- index,
3505
- items
3506
- },
3507
- ...customData
3508
- }), [containerId, customData, index, items]);
3509
- const itemsAfterCurrentSortable = useMemo(() => items.slice(items.indexOf(id)), [items, id]);
3510
- const {
3511
- rect,
3512
- node,
3513
- isOver,
3514
- setNodeRef: setDroppableNodeRef
3515
- } = useDroppable({
3516
- id,
3517
- data,
3518
- disabled: disabled.droppable,
3519
- resizeObserverConfig: {
3520
- updateMeasurementsFor: itemsAfterCurrentSortable,
3521
- ...resizeObserverConfig
3522
- }
3523
- });
3524
- const {
3525
- active,
3526
- activatorEvent,
3527
- activeNodeRect,
3528
- attributes,
3529
- setNodeRef: setDraggableNodeRef,
3530
- listeners,
3531
- isDragging,
3532
- over,
3533
- setActivatorNodeRef,
3534
- transform
3535
- } = useDraggable({
3536
- id,
3537
- data,
3538
- attributes: {
3539
- ...defaultAttributes,
3540
- ...userDefinedAttributes
3541
- },
3542
- disabled: disabled.draggable
3543
- });
3544
- const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
3545
- const isSorting = Boolean(active);
3546
- const displaceItem = isSorting && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
3547
- const shouldDisplaceDragSource = !useDragOverlay && isDragging;
3548
- const dragSourceDisplacement = shouldDisplaceDragSource && displaceItem ? transform : null;
3549
- const strategy = localStrategy != null ? localStrategy : globalStrategy;
3550
- const finalTransform = displaceItem ? dragSourceDisplacement != null ? dragSourceDisplacement : strategy({
3551
- rects: sortedRects,
3552
- activeNodeRect,
3553
- activeIndex,
3554
- overIndex,
3555
- index
3556
- }) : null;
3557
- const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
3558
- id,
3559
- items,
3560
- activeIndex,
3561
- overIndex
3562
- }) : index;
3563
- const activeId = active == null ? void 0 : active.id;
3564
- const previous = useRef({
3565
- activeId,
3566
- items,
3567
- newIndex,
3568
- containerId
3569
- });
3570
- const itemsHaveChanged = items !== previous.current.items;
3571
- const shouldAnimateLayoutChanges = animateLayoutChanges({
3572
- active,
3573
- containerId,
3574
- isDragging,
3575
- isSorting,
3576
- id,
3577
- index,
3578
- items,
3579
- newIndex: previous.current.newIndex,
3580
- previousItems: previous.current.items,
3581
- previousContainerId: previous.current.containerId,
3582
- transition,
3583
- wasDragging: previous.current.activeId != null
3584
- });
3585
- const derivedTransform = useDerivedTransform({
3586
- disabled: !shouldAnimateLayoutChanges,
3587
- index,
3588
- node,
3589
- rect
3590
- });
3591
- useEffect(() => {
3592
- if (isSorting && previous.current.newIndex !== newIndex) {
3593
- previous.current.newIndex = newIndex;
3594
- }
3595
- if (containerId !== previous.current.containerId) {
3596
- previous.current.containerId = containerId;
3597
- }
3598
- if (items !== previous.current.items) {
3599
- previous.current.items = items;
3600
- }
3601
- }, [isSorting, newIndex, containerId, items]);
3602
- useEffect(() => {
3603
- if (activeId === previous.current.activeId) {
3604
- return;
3605
- }
3606
- if (activeId != null && previous.current.activeId == null) {
3607
- previous.current.activeId = activeId;
3608
- return;
3609
- }
3610
- const timeoutId = setTimeout(() => {
3611
- previous.current.activeId = activeId;
3612
- }, 50);
3613
- return () => clearTimeout(timeoutId);
3614
- }, [activeId]);
3615
- return {
3616
- active,
3617
- activeIndex,
3618
- attributes,
3619
- data,
3620
- rect,
3621
- index,
3622
- newIndex,
3623
- items,
3624
- isOver,
3625
- isSorting,
3626
- isDragging,
3627
- listeners,
3628
- node,
3629
- overIndex,
3630
- over,
3631
- setNodeRef,
3632
- setActivatorNodeRef,
3633
- setDroppableNodeRef,
3634
- setDraggableNodeRef,
3635
- transform: derivedTransform != null ? derivedTransform : finalTransform,
3636
- transition: getTransition()
3637
- };
3638
- function getTransition() {
3639
- if (
3640
- // Temporarily disable transitions for a single frame to set up derived transforms
3641
- derivedTransform || // Or to prevent items jumping to back to their "new" position when items change
3642
- itemsHaveChanged && previous.current.newIndex === index
3643
- ) {
3644
- return disabledTransition;
3645
- }
3646
- if (shouldDisplaceDragSource && !isKeyboardEvent(activatorEvent) || !transition) {
3647
- return void 0;
3648
- }
3649
- if (isSorting || shouldAnimateLayoutChanges) {
3650
- return CSS.Transition.toString({
3651
- ...transition,
3652
- property: transitionProperty
3653
- });
3654
- }
3655
- return void 0;
3656
- }
3657
- }
3658
- function normalizeLocalDisabled(localDisabled, globalDisabled) {
3659
- var _localDisabled$dragga, _localDisabled$droppa;
3660
- if (typeof localDisabled === "boolean") {
3661
- return {
3662
- draggable: localDisabled,
3663
- // Backwards compatibility
3664
- droppable: false
3665
- };
3666
- }
3667
- return {
3668
- draggable: (_localDisabled$dragga = localDisabled == null ? void 0 : localDisabled.draggable) != null ? _localDisabled$dragga : globalDisabled.draggable,
3669
- droppable: (_localDisabled$droppa = localDisabled == null ? void 0 : localDisabled.droppable) != null ? _localDisabled$droppa : globalDisabled.droppable
3670
- };
3671
- }
3672
- [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
3673
- const getDragEndHandler = (onChange, items) => {
3674
- return (event) => {
3675
- const { active, over } = event;
3676
- if (!active || !over) {
3677
- return;
3678
- }
3679
- if (active?.id !== over?.id && items) {
3680
- const mappedItems = items.map(({ id }) => id);
3681
- const oldIndex = mappedItems?.indexOf(active.id) ?? -1;
3682
- const newIndex = mappedItems?.indexOf(over.id) ?? -1;
3683
- onChange(arrayMove([...items], oldIndex, newIndex));
3684
- }
3685
- };
3686
- };
3687
- const getMultiValue = (ComponentToRender) => {
3688
- return (props) => {
3689
- const onMouseDown = (e) => {
3690
- e.preventDefault();
3691
- e.stopPropagation();
3692
- };
3693
- const innerProps = { ...props.innerProps, onMouseDown };
3694
- const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
3695
- id: props.data.id
3696
- });
3697
- const style = {
3698
- transform: CSS.Translate.toString(transform),
3699
- transition
3700
- };
3701
- return /* @__PURE__ */ jsx(
3702
- "div",
3703
- {
3704
- style,
3705
- ref: setNodeRef,
3706
- className: clsx(
3707
- "es:any-focus:outline-hidden",
3708
- // Make non-dragged tiles have no pointer events, so you don't see hover styles on things like the remove button.
3709
- CSS.Translate.toString(transform) && "es:[&_>_div]:pointer-events-none",
3710
- // Make the currently grabbed item into a fancy holo-like thing.
3711
- isDragging && "es:z-50 es:blur-[0.5px] es:[&_>_div]:border! es:[&_>_div]:border-dotted es:[&_>_div]:border-accent-500! es:[&_>_div]:bg-accent-100/20! es:[&_>_div]:text-accent-900/15! es:[&_>_div_[role=button]]:opacity-0"
3712
- ),
3713
- ...attributes,
3714
- ...listeners,
3715
- children: /* @__PURE__ */ jsx(
3716
- ComponentToRender,
3717
- {
3718
- ...props,
3719
- innerProps
3720
- }
3721
- )
3722
- }
3723
- );
3724
- };
3725
- };
3726
- const getMultiValueRemove = (ComponentToRender) => {
3727
- return (props) => /* @__PURE__ */ jsx(
3728
- ComponentToRender,
3729
- {
3730
- ...props,
3731
- innerProps: {
3732
- onPointerDown: (e) => e.stopPropagation(),
3733
- ...props.innerProps
3734
- }
3735
- }
3736
- );
3737
- };
3738
- export {
3739
- DndContext as D,
3740
- SortableContext as S,
3741
- getMultiValueRemove as a,
3742
- getMultiValue as b,
3743
- getDragEndHandler as g
3744
- };