@pnkx-lib/ui 1.9.9 → 1.9.11

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.
@@ -1,10 +1,10 @@
1
- import { j as jsxRuntimeExports, b as Icon, _ as _extends, c as _typeof, P as PnkxField, C as CheckboxField, u as useForm, I as Input, d as classNames, e as _arrayLikeToArray, f as _unsupportedIterableToArray, w as warningOnce, h as _createClass, i as _classCallCheck, k as _defineProperty, l as _slicedToArray, m as warning$1, n as canUseDom, o as _objectSpread2, p as updateCSS, r as removeCSS, q as _arrayWithHoles, s as _nonIterableRest, t as resetWarned$1, F as FastColor, v as generate, x as presetPrimaryColors, y as presetPalettes, z as _inherits, A as _createSuper, B as _assertThisInitialized, G as _objectWithoutProperties, H as IconContext } from './Switch-za5Skgtp.js';
2
- import { Button as Button$1, Cascader, Space as Space$1, Card, Skeleton as Skeleton$1, Modal as Modal$1, Tooltip as Tooltip$1, Popconfirm as Popconfirm$1, Typography, Table as Table$1, Tabs as Tabs$1, Popover as Popover$1, Badge as Badge$1, Col as Col$1, Row as Row$1, Dropdown as Dropdown$1, Breadcrumb as Breadcrumb$1, Flex as Flex$1, Splitter as Splitter$1, Menu as Menu$1, Pagination as Pagination$1, Steps as Steps$1, Tag as Tag$1, Divider as Divider$2, Alert as Alert$1, Spin as Spin$1, Drawer as Drawer$1, QRCode as QRCode$1, Result as Result$1, Rate as Rate$1, Segmented as Segmented$1, Statistic as Statistic$1, Timeline as Timeline$1, Tour as Tour$1, Tree as Tree$1, Watermark as Watermark$1, Anchor as Anchor$1, Affix, AutoComplete as AutoComplete$1, Input as Input$1, Collapse, ColorPicker, Empty as Empty$2, Image as Image$1 } from 'antd';
1
+ import { j as jsxRuntimeExports, b as Icon, _ as _extends, c as _typeof, u as useForm, P as PnkxField, I as Input, d as classNames, e as _arrayLikeToArray, f as _unsupportedIterableToArray, w as warningOnce, h as _createClass, i as _classCallCheck, k as _defineProperty, l as _slicedToArray, m as warning$1, n as canUseDom, o as _objectSpread2, p as updateCSS, r as removeCSS, q as _arrayWithHoles, s as _nonIterableRest, t as resetWarned$1, F as FastColor, v as generate, x as presetPrimaryColors, y as presetPalettes, z as _inherits, A as _createSuper, B as _assertThisInitialized, C as _objectWithoutProperties, G as IconContext } from './Switch-eMq9KkOy.js';
2
+ import { Button as Button$1, Cascader, Space as Space$1, Card, Skeleton as Skeleton$1, Tooltip as Tooltip$1, Popconfirm as Popconfirm$1, Typography, Table as Table$1, Modal as Modal$1, Tabs as Tabs$1, Popover as Popover$1, Badge as Badge$1, Col as Col$1, Row as Row$1, Dropdown as Dropdown$1, Breadcrumb as Breadcrumb$1, Flex as Flex$1, Splitter as Splitter$1, Menu as Menu$1, Pagination as Pagination$1, Steps as Steps$1, Tag as Tag$1, Divider as Divider$2, Alert as Alert$1, Spin as Spin$1, Drawer as Drawer$1, QRCode as QRCode$1, Result as Result$1, Rate as Rate$1, Segmented as Segmented$1, Statistic as Statistic$1, Timeline as Timeline$1, Tour as Tour$1, Tree as Tree$1, Watermark as Watermark$1, Anchor as Anchor$1, Affix, AutoComplete as AutoComplete$1, Input as Input$1, Collapse, ColorPicker, Empty as Empty$2, Image as Image$1 } from 'antd';
3
3
  import * as React from 'react';
4
- import React__default, { version as version$1, isValidElement, useLayoutEffect as useLayoutEffect$1, useEffect, useRef, useMemo as useMemo$1, useCallback, useState, createContext, memo, useReducer, useContext, Component } from 'react';
5
- import ReactDOM__default, { unstable_batchedUpdates, createPortal } from 'react-dom';
4
+ import React__default, { version as version$1, isValidElement, useState, useEffect, useContext, createContext, useRef, useLayoutEffect as useLayoutEffect$1, useMemo as useMemo$1, Component } from 'react';
6
5
  import { useNavigate, useLocation } from 'react-router';
7
6
  import { u as useToast } from './cloneDeep-BLYi2V0G.js';
7
+ import ReactDOM__default from 'react-dom';
8
8
 
9
9
  const Button = (props) => {
10
10
  return /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { ...props });
@@ -2190,4387 +2190,6 @@ const styles$1 = {
2190
2190
  }
2191
2191
  };
2192
2192
 
2193
- const Modal = ({ children, onOk, onSubmit, ...rest }) => {
2194
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal$1, { onOk: onSubmit ? onSubmit : onOk, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-[20rem] overflow-y-auto", children: onSubmit ? /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit, children }) : children }) });
2195
- };
2196
-
2197
- const SettingColumnItem = ({ lable, name, control }) => {
2198
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full pt-2 pb-2 inline-flex", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2199
- PnkxField,
2200
- {
2201
- label: lable,
2202
- component: CheckboxField,
2203
- name,
2204
- control,
2205
- afterOnChange: () => {
2206
- }
2207
- }
2208
- ) }, name);
2209
- };
2210
-
2211
- function useCombinedRefs() {
2212
- for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
2213
- refs[_key] = arguments[_key];
2214
- }
2215
-
2216
- return useMemo$1(() => node => {
2217
- refs.forEach(ref => ref(node));
2218
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
2219
- refs);
2220
- }
2221
-
2222
- // https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
2223
- const canUseDOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
2224
-
2225
- function isWindow(element) {
2226
- const elementString = Object.prototype.toString.call(element);
2227
- return elementString === '[object Window]' || // In Electron context the Window object serializes to [object global]
2228
- elementString === '[object global]';
2229
- }
2230
-
2231
- function isNode(node) {
2232
- return 'nodeType' in node;
2233
- }
2234
-
2235
- function getWindow(target) {
2236
- var _target$ownerDocument, _target$ownerDocument2;
2237
-
2238
- if (!target) {
2239
- return window;
2240
- }
2241
-
2242
- if (isWindow(target)) {
2243
- return target;
2244
- }
2245
-
2246
- if (!isNode(target)) {
2247
- return window;
2248
- }
2249
-
2250
- return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
2251
- }
2252
-
2253
- function isDocument(node) {
2254
- const {
2255
- Document
2256
- } = getWindow(node);
2257
- return node instanceof Document;
2258
- }
2259
-
2260
- function isHTMLElement(node) {
2261
- if (isWindow(node)) {
2262
- return false;
2263
- }
2264
-
2265
- return node instanceof getWindow(node).HTMLElement;
2266
- }
2267
-
2268
- function isSVGElement(node) {
2269
- return node instanceof getWindow(node).SVGElement;
2270
- }
2271
-
2272
- function getOwnerDocument(target) {
2273
- if (!target) {
2274
- return document;
2275
- }
2276
-
2277
- if (isWindow(target)) {
2278
- return target.document;
2279
- }
2280
-
2281
- if (!isNode(target)) {
2282
- return document;
2283
- }
2284
-
2285
- if (isDocument(target)) {
2286
- return target;
2287
- }
2288
-
2289
- if (isHTMLElement(target) || isSVGElement(target)) {
2290
- return target.ownerDocument;
2291
- }
2292
-
2293
- return document;
2294
- }
2295
-
2296
- /**
2297
- * A hook that resolves to useEffect on the server and useLayoutEffect on the client
2298
- * @param callback {function} Callback function that is invoked when the dependencies of the hook change
2299
- */
2300
-
2301
- const useIsomorphicLayoutEffect$1 = canUseDOM ? useLayoutEffect$1 : useEffect;
2302
-
2303
- function useEvent$1(handler) {
2304
- const handlerRef = useRef(handler);
2305
- useIsomorphicLayoutEffect$1(() => {
2306
- handlerRef.current = handler;
2307
- });
2308
- return useCallback(function () {
2309
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
2310
- args[_key] = arguments[_key];
2311
- }
2312
-
2313
- return handlerRef.current == null ? void 0 : handlerRef.current(...args);
2314
- }, []);
2315
- }
2316
-
2317
- function useInterval() {
2318
- const intervalRef = useRef(null);
2319
- const set = useCallback((listener, duration) => {
2320
- intervalRef.current = setInterval(listener, duration);
2321
- }, []);
2322
- const clear = useCallback(() => {
2323
- if (intervalRef.current !== null) {
2324
- clearInterval(intervalRef.current);
2325
- intervalRef.current = null;
2326
- }
2327
- }, []);
2328
- return [set, clear];
2329
- }
2330
-
2331
- function useLatestValue(value, dependencies) {
2332
- if (dependencies === void 0) {
2333
- dependencies = [value];
2334
- }
2335
-
2336
- const valueRef = useRef(value);
2337
- useIsomorphicLayoutEffect$1(() => {
2338
- if (valueRef.current !== value) {
2339
- valueRef.current = value;
2340
- }
2341
- }, dependencies);
2342
- return valueRef;
2343
- }
2344
-
2345
- function useLazyMemo(callback, dependencies) {
2346
- const valueRef = useRef();
2347
- return useMemo$1(() => {
2348
- const newValue = callback(valueRef.current);
2349
- valueRef.current = newValue;
2350
- return newValue;
2351
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
2352
- [...dependencies]);
2353
- }
2354
-
2355
- function useNodeRef(onChange) {
2356
- const onChangeHandler = useEvent$1(onChange);
2357
- const node = useRef(null);
2358
- const setNodeRef = useCallback(element => {
2359
- if (element !== node.current) {
2360
- onChangeHandler == null ? void 0 : onChangeHandler(element, node.current);
2361
- }
2362
-
2363
- node.current = element;
2364
- }, //eslint-disable-next-line
2365
- []);
2366
- return [node, setNodeRef];
2367
- }
2368
-
2369
- function usePrevious(value) {
2370
- const ref = useRef();
2371
- useEffect(() => {
2372
- ref.current = value;
2373
- }, [value]);
2374
- return ref.current;
2375
- }
2376
-
2377
- let ids = {};
2378
- function useUniqueId(prefix, value) {
2379
- return useMemo$1(() => {
2380
- if (value) {
2381
- return value;
2382
- }
2383
-
2384
- const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
2385
- ids[prefix] = id;
2386
- return prefix + "-" + id;
2387
- }, [prefix, value]);
2388
- }
2389
-
2390
- function createAdjustmentFn(modifier) {
2391
- return function (object) {
2392
- for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
2393
- adjustments[_key - 1] = arguments[_key];
2394
- }
2395
-
2396
- return adjustments.reduce((accumulator, adjustment) => {
2397
- const entries = Object.entries(adjustment);
2398
-
2399
- for (const [key, valueAdjustment] of entries) {
2400
- const value = accumulator[key];
2401
-
2402
- if (value != null) {
2403
- accumulator[key] = value + modifier * valueAdjustment;
2404
- }
2405
- }
2406
-
2407
- return accumulator;
2408
- }, { ...object
2409
- });
2410
- };
2411
- }
2412
-
2413
- const add = /*#__PURE__*/createAdjustmentFn(1);
2414
- const subtract = /*#__PURE__*/createAdjustmentFn(-1);
2415
-
2416
- function hasViewportRelativeCoordinates(event) {
2417
- return 'clientX' in event && 'clientY' in event;
2418
- }
2419
-
2420
- function isKeyboardEvent(event) {
2421
- if (!event) {
2422
- return false;
2423
- }
2424
-
2425
- const {
2426
- KeyboardEvent
2427
- } = getWindow(event.target);
2428
- return KeyboardEvent && event instanceof KeyboardEvent;
2429
- }
2430
-
2431
- function isTouchEvent(event) {
2432
- if (!event) {
2433
- return false;
2434
- }
2435
-
2436
- const {
2437
- TouchEvent
2438
- } = getWindow(event.target);
2439
- return TouchEvent && event instanceof TouchEvent;
2440
- }
2441
-
2442
- /**
2443
- * Returns the normalized x and y coordinates for mouse and touch events.
2444
- */
2445
-
2446
- function getEventCoordinates(event) {
2447
- if (isTouchEvent(event)) {
2448
- if (event.touches && event.touches.length) {
2449
- const {
2450
- clientX: x,
2451
- clientY: y
2452
- } = event.touches[0];
2453
- return {
2454
- x,
2455
- y
2456
- };
2457
- } else if (event.changedTouches && event.changedTouches.length) {
2458
- const {
2459
- clientX: x,
2460
- clientY: y
2461
- } = event.changedTouches[0];
2462
- return {
2463
- x,
2464
- y
2465
- };
2466
- }
2467
- }
2468
-
2469
- if (hasViewportRelativeCoordinates(event)) {
2470
- return {
2471
- x: event.clientX,
2472
- y: event.clientY
2473
- };
2474
- }
2475
-
2476
- return null;
2477
- }
2478
-
2479
- const CSS = /*#__PURE__*/Object.freeze({
2480
- Translate: {
2481
- toString(transform) {
2482
- if (!transform) {
2483
- return;
2484
- }
2485
-
2486
- const {
2487
- x,
2488
- y
2489
- } = transform;
2490
- return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
2491
- }
2492
-
2493
- },
2494
- Scale: {
2495
- toString(transform) {
2496
- if (!transform) {
2497
- return;
2498
- }
2499
-
2500
- const {
2501
- scaleX,
2502
- scaleY
2503
- } = transform;
2504
- return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
2505
- }
2506
-
2507
- },
2508
- Transform: {
2509
- toString(transform) {
2510
- if (!transform) {
2511
- return;
2512
- }
2513
-
2514
- return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(' ');
2515
- }
2516
-
2517
- },
2518
- Transition: {
2519
- toString(_ref) {
2520
- let {
2521
- property,
2522
- duration,
2523
- easing
2524
- } = _ref;
2525
- return property + " " + duration + "ms " + easing;
2526
- }
2527
-
2528
- }
2529
- });
2530
-
2531
- const SELECTOR = 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]';
2532
- function findFirstFocusableNode(element) {
2533
- if (element.matches(SELECTOR)) {
2534
- return element;
2535
- }
2536
-
2537
- return element.querySelector(SELECTOR);
2538
- }
2539
-
2540
- const hiddenStyles = {
2541
- display: 'none'
2542
- };
2543
- function HiddenText(_ref) {
2544
- let {
2545
- id,
2546
- value
2547
- } = _ref;
2548
- return React__default.createElement("div", {
2549
- id: id,
2550
- style: hiddenStyles
2551
- }, value);
2552
- }
2553
-
2554
- function LiveRegion(_ref) {
2555
- let {
2556
- id,
2557
- announcement,
2558
- ariaLiveType = "assertive"
2559
- } = _ref;
2560
- // Hide element visually but keep it readable by screen readers
2561
- const visuallyHidden = {
2562
- position: 'fixed',
2563
- top: 0,
2564
- left: 0,
2565
- width: 1,
2566
- height: 1,
2567
- margin: -1,
2568
- border: 0,
2569
- padding: 0,
2570
- overflow: 'hidden',
2571
- clip: 'rect(0 0 0 0)',
2572
- clipPath: 'inset(100%)',
2573
- whiteSpace: 'nowrap'
2574
- };
2575
- return React__default.createElement("div", {
2576
- id: id,
2577
- style: visuallyHidden,
2578
- role: "status",
2579
- "aria-live": ariaLiveType,
2580
- "aria-atomic": true
2581
- }, announcement);
2582
- }
2583
-
2584
- function useAnnouncement() {
2585
- const [announcement, setAnnouncement] = useState('');
2586
- const announce = useCallback(value => {
2587
- if (value != null) {
2588
- setAnnouncement(value);
2589
- }
2590
- }, []);
2591
- return {
2592
- announce,
2593
- announcement
2594
- };
2595
- }
2596
-
2597
- const DndMonitorContext = /*#__PURE__*/createContext(null);
2598
-
2599
- function useDndMonitor(listener) {
2600
- const registerListener = useContext(DndMonitorContext);
2601
- useEffect(() => {
2602
- if (!registerListener) {
2603
- throw new Error('useDndMonitor must be used within a children of <DndContext>');
2604
- }
2605
-
2606
- const unsubscribe = registerListener(listener);
2607
- return unsubscribe;
2608
- }, [listener, registerListener]);
2609
- }
2610
-
2611
- function useDndMonitorProvider() {
2612
- const [listeners] = useState(() => new Set());
2613
- const registerListener = useCallback(listener => {
2614
- listeners.add(listener);
2615
- return () => listeners.delete(listener);
2616
- }, [listeners]);
2617
- const dispatch = useCallback(_ref => {
2618
- let {
2619
- type,
2620
- event
2621
- } = _ref;
2622
- listeners.forEach(listener => {
2623
- var _listener$type;
2624
-
2625
- return (_listener$type = listener[type]) == null ? void 0 : _listener$type.call(listener, event);
2626
- });
2627
- }, [listeners]);
2628
- return [dispatch, registerListener];
2629
- }
2630
-
2631
- const defaultScreenReaderInstructions = {
2632
- 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 "
2633
- };
2634
- const defaultAnnouncements = {
2635
- onDragStart(_ref) {
2636
- let {
2637
- active
2638
- } = _ref;
2639
- return "Picked up draggable item " + active.id + ".";
2640
- },
2641
-
2642
- onDragOver(_ref2) {
2643
- let {
2644
- active,
2645
- over
2646
- } = _ref2;
2647
-
2648
- if (over) {
2649
- return "Draggable item " + active.id + " was moved over droppable area " + over.id + ".";
2650
- }
2651
-
2652
- return "Draggable item " + active.id + " is no longer over a droppable area.";
2653
- },
2654
-
2655
- onDragEnd(_ref3) {
2656
- let {
2657
- active,
2658
- over
2659
- } = _ref3;
2660
-
2661
- if (over) {
2662
- return "Draggable item " + active.id + " was dropped over droppable area " + over.id;
2663
- }
2664
-
2665
- return "Draggable item " + active.id + " was dropped.";
2666
- },
2667
-
2668
- onDragCancel(_ref4) {
2669
- let {
2670
- active
2671
- } = _ref4;
2672
- return "Dragging was cancelled. Draggable item " + active.id + " was dropped.";
2673
- }
2674
-
2675
- };
2676
-
2677
- function Accessibility(_ref) {
2678
- let {
2679
- announcements = defaultAnnouncements,
2680
- container,
2681
- hiddenTextDescribedById,
2682
- screenReaderInstructions = defaultScreenReaderInstructions
2683
- } = _ref;
2684
- const {
2685
- announce,
2686
- announcement
2687
- } = useAnnouncement();
2688
- const liveRegionId = useUniqueId("DndLiveRegion");
2689
- const [mounted, setMounted] = useState(false);
2690
- useEffect(() => {
2691
- setMounted(true);
2692
- }, []);
2693
- useDndMonitor(useMemo$1(() => ({
2694
- onDragStart(_ref2) {
2695
- let {
2696
- active
2697
- } = _ref2;
2698
- announce(announcements.onDragStart({
2699
- active
2700
- }));
2701
- },
2702
-
2703
- onDragMove(_ref3) {
2704
- let {
2705
- active,
2706
- over
2707
- } = _ref3;
2708
-
2709
- if (announcements.onDragMove) {
2710
- announce(announcements.onDragMove({
2711
- active,
2712
- over
2713
- }));
2714
- }
2715
- },
2716
-
2717
- onDragOver(_ref4) {
2718
- let {
2719
- active,
2720
- over
2721
- } = _ref4;
2722
- announce(announcements.onDragOver({
2723
- active,
2724
- over
2725
- }));
2726
- },
2727
-
2728
- onDragEnd(_ref5) {
2729
- let {
2730
- active,
2731
- over
2732
- } = _ref5;
2733
- announce(announcements.onDragEnd({
2734
- active,
2735
- over
2736
- }));
2737
- },
2738
-
2739
- onDragCancel(_ref6) {
2740
- let {
2741
- active,
2742
- over
2743
- } = _ref6;
2744
- announce(announcements.onDragCancel({
2745
- active,
2746
- over
2747
- }));
2748
- }
2749
-
2750
- }), [announce, announcements]));
2751
-
2752
- if (!mounted) {
2753
- return null;
2754
- }
2755
-
2756
- const markup = React__default.createElement(React__default.Fragment, null, React__default.createElement(HiddenText, {
2757
- id: hiddenTextDescribedById,
2758
- value: screenReaderInstructions.draggable
2759
- }), React__default.createElement(LiveRegion, {
2760
- id: liveRegionId,
2761
- announcement: announcement
2762
- }));
2763
- return container ? createPortal(markup, container) : markup;
2764
- }
2765
-
2766
- var Action;
2767
-
2768
- (function (Action) {
2769
- Action["DragStart"] = "dragStart";
2770
- Action["DragMove"] = "dragMove";
2771
- Action["DragEnd"] = "dragEnd";
2772
- Action["DragCancel"] = "dragCancel";
2773
- Action["DragOver"] = "dragOver";
2774
- Action["RegisterDroppable"] = "registerDroppable";
2775
- Action["SetDroppableDisabled"] = "setDroppableDisabled";
2776
- Action["UnregisterDroppable"] = "unregisterDroppable";
2777
- })(Action || (Action = {}));
2778
-
2779
- function noop$2() {}
2780
-
2781
- const defaultCoordinates = /*#__PURE__*/Object.freeze({
2782
- x: 0,
2783
- y: 0
2784
- });
2785
-
2786
- /**
2787
- * Returns the distance between two points
2788
- */
2789
- function distanceBetween(p1, p2) {
2790
- return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
2791
- }
2792
-
2793
- /**
2794
- * Sort collisions from smallest to greatest value
2795
- */
2796
- function sortCollisionsAsc(_ref, _ref2) {
2797
- let {
2798
- data: {
2799
- value: a
2800
- }
2801
- } = _ref;
2802
- let {
2803
- data: {
2804
- value: b
2805
- }
2806
- } = _ref2;
2807
- return a - b;
2808
- }
2809
- /**
2810
- * Sort collisions from greatest to smallest value
2811
- */
2812
-
2813
- function sortCollisionsDesc(_ref3, _ref4) {
2814
- let {
2815
- data: {
2816
- value: a
2817
- }
2818
- } = _ref3;
2819
- let {
2820
- data: {
2821
- value: b
2822
- }
2823
- } = _ref4;
2824
- return b - a;
2825
- }
2826
- function getFirstCollision(collisions, property) {
2827
- if (!collisions || collisions.length === 0) {
2828
- return null;
2829
- }
2830
-
2831
- const [firstCollision] = collisions;
2832
- return firstCollision[property] ;
2833
- }
2834
-
2835
- /**
2836
- * Returns the coordinates of the center of a given ClientRect
2837
- */
2838
-
2839
- function centerOfRectangle(rect, left, top) {
2840
- if (left === void 0) {
2841
- left = rect.left;
2842
- }
2843
-
2844
- if (top === void 0) {
2845
- top = rect.top;
2846
- }
2847
-
2848
- return {
2849
- x: left + rect.width * 0.5,
2850
- y: top + rect.height * 0.5
2851
- };
2852
- }
2853
- /**
2854
- * Returns the closest rectangles from an array of rectangles to the center of a given
2855
- * rectangle.
2856
- */
2857
-
2858
-
2859
- const closestCenter = _ref => {
2860
- let {
2861
- collisionRect,
2862
- droppableRects,
2863
- droppableContainers
2864
- } = _ref;
2865
- const centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
2866
- const collisions = [];
2867
-
2868
- for (const droppableContainer of droppableContainers) {
2869
- const {
2870
- id
2871
- } = droppableContainer;
2872
- const rect = droppableRects.get(id);
2873
-
2874
- if (rect) {
2875
- const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);
2876
- collisions.push({
2877
- id,
2878
- data: {
2879
- droppableContainer,
2880
- value: distBetween
2881
- }
2882
- });
2883
- }
2884
- }
2885
-
2886
- return collisions.sort(sortCollisionsAsc);
2887
- };
2888
-
2889
- /**
2890
- * Returns the intersecting rectangle area between two rectangles
2891
- */
2892
-
2893
- function getIntersectionRatio(entry, target) {
2894
- const top = Math.max(target.top, entry.top);
2895
- const left = Math.max(target.left, entry.left);
2896
- const right = Math.min(target.left + target.width, entry.left + entry.width);
2897
- const bottom = Math.min(target.top + target.height, entry.top + entry.height);
2898
- const width = right - left;
2899
- const height = bottom - top;
2900
-
2901
- if (left < right && top < bottom) {
2902
- const targetArea = target.width * target.height;
2903
- const entryArea = entry.width * entry.height;
2904
- const intersectionArea = width * height;
2905
- const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
2906
- return Number(intersectionRatio.toFixed(4));
2907
- } // Rectangles do not overlap, or overlap has an area of zero (edge/corner overlap)
2908
-
2909
-
2910
- return 0;
2911
- }
2912
- /**
2913
- * Returns the rectangles that has the greatest intersection area with a given
2914
- * rectangle in an array of rectangles.
2915
- */
2916
-
2917
- const rectIntersection = _ref => {
2918
- let {
2919
- collisionRect,
2920
- droppableRects,
2921
- droppableContainers
2922
- } = _ref;
2923
- const collisions = [];
2924
-
2925
- for (const droppableContainer of droppableContainers) {
2926
- const {
2927
- id
2928
- } = droppableContainer;
2929
- const rect = droppableRects.get(id);
2930
-
2931
- if (rect) {
2932
- const intersectionRatio = getIntersectionRatio(rect, collisionRect);
2933
-
2934
- if (intersectionRatio > 0) {
2935
- collisions.push({
2936
- id,
2937
- data: {
2938
- droppableContainer,
2939
- value: intersectionRatio
2940
- }
2941
- });
2942
- }
2943
- }
2944
- }
2945
-
2946
- return collisions.sort(sortCollisionsDesc);
2947
- };
2948
-
2949
- function adjustScale(transform, rect1, rect2) {
2950
- return { ...transform,
2951
- scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,
2952
- scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1
2953
- };
2954
- }
2955
-
2956
- function getRectDelta(rect1, rect2) {
2957
- return rect1 && rect2 ? {
2958
- x: rect1.left - rect2.left,
2959
- y: rect1.top - rect2.top
2960
- } : defaultCoordinates;
2961
- }
2962
-
2963
- function createRectAdjustmentFn(modifier) {
2964
- return function adjustClientRect(rect) {
2965
- for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
2966
- adjustments[_key - 1] = arguments[_key];
2967
- }
2968
-
2969
- return adjustments.reduce((acc, adjustment) => ({ ...acc,
2970
- top: acc.top + modifier * adjustment.y,
2971
- bottom: acc.bottom + modifier * adjustment.y,
2972
- left: acc.left + modifier * adjustment.x,
2973
- right: acc.right + modifier * adjustment.x
2974
- }), { ...rect
2975
- });
2976
- };
2977
- }
2978
- const getAdjustedRect = /*#__PURE__*/createRectAdjustmentFn(1);
2979
-
2980
- function parseTransform(transform) {
2981
- if (transform.startsWith('matrix3d(')) {
2982
- const transformArray = transform.slice(9, -1).split(/, /);
2983
- return {
2984
- x: +transformArray[12],
2985
- y: +transformArray[13],
2986
- scaleX: +transformArray[0],
2987
- scaleY: +transformArray[5]
2988
- };
2989
- } else if (transform.startsWith('matrix(')) {
2990
- const transformArray = transform.slice(7, -1).split(/, /);
2991
- return {
2992
- x: +transformArray[4],
2993
- y: +transformArray[5],
2994
- scaleX: +transformArray[0],
2995
- scaleY: +transformArray[3]
2996
- };
2997
- }
2998
-
2999
- return null;
3000
- }
3001
-
3002
- function inverseTransform(rect, transform, transformOrigin) {
3003
- const parsedTransform = parseTransform(transform);
3004
-
3005
- if (!parsedTransform) {
3006
- return rect;
3007
- }
3008
-
3009
- const {
3010
- scaleX,
3011
- scaleY,
3012
- x: translateX,
3013
- y: translateY
3014
- } = parsedTransform;
3015
- const x = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);
3016
- const y = rect.top - translateY - (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(' ') + 1));
3017
- const w = scaleX ? rect.width / scaleX : rect.width;
3018
- const h = scaleY ? rect.height / scaleY : rect.height;
3019
- return {
3020
- width: w,
3021
- height: h,
3022
- top: y,
3023
- right: x + w,
3024
- bottom: y + h,
3025
- left: x
3026
- };
3027
- }
3028
-
3029
- const defaultOptions = {
3030
- ignoreTransform: false
3031
- };
3032
- /**
3033
- * Returns the bounding client rect of an element relative to the viewport.
3034
- */
3035
-
3036
- function getClientRect(element, options) {
3037
- if (options === void 0) {
3038
- options = defaultOptions;
3039
- }
3040
-
3041
- let rect = element.getBoundingClientRect();
3042
-
3043
- if (options.ignoreTransform) {
3044
- const {
3045
- transform,
3046
- transformOrigin
3047
- } = getWindow(element).getComputedStyle(element);
3048
-
3049
- if (transform) {
3050
- rect = inverseTransform(rect, transform, transformOrigin);
3051
- }
3052
- }
3053
-
3054
- const {
3055
- top,
3056
- left,
3057
- width,
3058
- height,
3059
- bottom,
3060
- right
3061
- } = rect;
3062
- return {
3063
- top,
3064
- left,
3065
- width,
3066
- height,
3067
- bottom,
3068
- right
3069
- };
3070
- }
3071
- /**
3072
- * Returns the bounding client rect of an element relative to the viewport.
3073
- *
3074
- * @remarks
3075
- * The ClientRect returned by this method does not take into account transforms
3076
- * applied to the element it measures.
3077
- *
3078
- */
3079
-
3080
- function getTransformAgnosticClientRect(element) {
3081
- return getClientRect(element, {
3082
- ignoreTransform: true
3083
- });
3084
- }
3085
-
3086
- function getWindowClientRect(element) {
3087
- const width = element.innerWidth;
3088
- const height = element.innerHeight;
3089
- return {
3090
- top: 0,
3091
- left: 0,
3092
- right: width,
3093
- bottom: height,
3094
- width,
3095
- height
3096
- };
3097
- }
3098
-
3099
- function isFixed(node, computedStyle) {
3100
- if (computedStyle === void 0) {
3101
- computedStyle = getWindow(node).getComputedStyle(node);
3102
- }
3103
-
3104
- return computedStyle.position === 'fixed';
3105
- }
3106
-
3107
- function isScrollable(element, computedStyle) {
3108
- if (computedStyle === void 0) {
3109
- computedStyle = getWindow(element).getComputedStyle(element);
3110
- }
3111
-
3112
- const overflowRegex = /(auto|scroll|overlay)/;
3113
- const properties = ['overflow', 'overflowX', 'overflowY'];
3114
- return properties.some(property => {
3115
- const value = computedStyle[property];
3116
- return typeof value === 'string' ? overflowRegex.test(value) : false;
3117
- });
3118
- }
3119
-
3120
- function getScrollableAncestors(element, limit) {
3121
- const scrollParents = [];
3122
-
3123
- function findScrollableAncestors(node) {
3124
- if (limit != null && scrollParents.length >= limit) {
3125
- return scrollParents;
3126
- }
3127
-
3128
- if (!node) {
3129
- return scrollParents;
3130
- }
3131
-
3132
- if (isDocument(node) && node.scrollingElement != null && !scrollParents.includes(node.scrollingElement)) {
3133
- scrollParents.push(node.scrollingElement);
3134
- return scrollParents;
3135
- }
3136
-
3137
- if (!isHTMLElement(node) || isSVGElement(node)) {
3138
- return scrollParents;
3139
- }
3140
-
3141
- if (scrollParents.includes(node)) {
3142
- return scrollParents;
3143
- }
3144
-
3145
- const computedStyle = getWindow(element).getComputedStyle(node);
3146
-
3147
- if (node !== element) {
3148
- if (isScrollable(node, computedStyle)) {
3149
- scrollParents.push(node);
3150
- }
3151
- }
3152
-
3153
- if (isFixed(node, computedStyle)) {
3154
- return scrollParents;
3155
- }
3156
-
3157
- return findScrollableAncestors(node.parentNode);
3158
- }
3159
-
3160
- if (!element) {
3161
- return scrollParents;
3162
- }
3163
-
3164
- return findScrollableAncestors(element);
3165
- }
3166
- function getFirstScrollableAncestor(node) {
3167
- const [firstScrollableAncestor] = getScrollableAncestors(node, 1);
3168
- return firstScrollableAncestor != null ? firstScrollableAncestor : null;
3169
- }
3170
-
3171
- function getScrollableElement(element) {
3172
- if (!canUseDOM || !element) {
3173
- return null;
3174
- }
3175
-
3176
- if (isWindow(element)) {
3177
- return element;
3178
- }
3179
-
3180
- if (!isNode(element)) {
3181
- return null;
3182
- }
3183
-
3184
- if (isDocument(element) || element === getOwnerDocument(element).scrollingElement) {
3185
- return window;
3186
- }
3187
-
3188
- if (isHTMLElement(element)) {
3189
- return element;
3190
- }
3191
-
3192
- return null;
3193
- }
3194
-
3195
- function getScrollXCoordinate(element) {
3196
- if (isWindow(element)) {
3197
- return element.scrollX;
3198
- }
3199
-
3200
- return element.scrollLeft;
3201
- }
3202
- function getScrollYCoordinate(element) {
3203
- if (isWindow(element)) {
3204
- return element.scrollY;
3205
- }
3206
-
3207
- return element.scrollTop;
3208
- }
3209
- function getScrollCoordinates(element) {
3210
- return {
3211
- x: getScrollXCoordinate(element),
3212
- y: getScrollYCoordinate(element)
3213
- };
3214
- }
3215
-
3216
- var Direction;
3217
-
3218
- (function (Direction) {
3219
- Direction[Direction["Forward"] = 1] = "Forward";
3220
- Direction[Direction["Backward"] = -1] = "Backward";
3221
- })(Direction || (Direction = {}));
3222
-
3223
- function isDocumentScrollingElement(element) {
3224
- if (!canUseDOM || !element) {
3225
- return false;
3226
- }
3227
-
3228
- return element === document.scrollingElement;
3229
- }
3230
-
3231
- function getScrollPosition(scrollingContainer) {
3232
- const minScroll = {
3233
- x: 0,
3234
- y: 0
3235
- };
3236
- const dimensions = isDocumentScrollingElement(scrollingContainer) ? {
3237
- height: window.innerHeight,
3238
- width: window.innerWidth
3239
- } : {
3240
- height: scrollingContainer.clientHeight,
3241
- width: scrollingContainer.clientWidth
3242
- };
3243
- const maxScroll = {
3244
- x: scrollingContainer.scrollWidth - dimensions.width,
3245
- y: scrollingContainer.scrollHeight - dimensions.height
3246
- };
3247
- const isTop = scrollingContainer.scrollTop <= minScroll.y;
3248
- const isLeft = scrollingContainer.scrollLeft <= minScroll.x;
3249
- const isBottom = scrollingContainer.scrollTop >= maxScroll.y;
3250
- const isRight = scrollingContainer.scrollLeft >= maxScroll.x;
3251
- return {
3252
- isTop,
3253
- isLeft,
3254
- isBottom,
3255
- isRight,
3256
- maxScroll,
3257
- minScroll
3258
- };
3259
- }
3260
-
3261
- const defaultThreshold = {
3262
- x: 0.2,
3263
- y: 0.2
3264
- };
3265
- function getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, _ref, acceleration, thresholdPercentage) {
3266
- let {
3267
- top,
3268
- left,
3269
- right,
3270
- bottom
3271
- } = _ref;
3272
-
3273
- if (acceleration === void 0) {
3274
- acceleration = 10;
3275
- }
3276
-
3277
- if (thresholdPercentage === void 0) {
3278
- thresholdPercentage = defaultThreshold;
3279
- }
3280
-
3281
- const {
3282
- isTop,
3283
- isBottom,
3284
- isLeft,
3285
- isRight
3286
- } = getScrollPosition(scrollContainer);
3287
- const direction = {
3288
- x: 0,
3289
- y: 0
3290
- };
3291
- const speed = {
3292
- x: 0,
3293
- y: 0
3294
- };
3295
- const threshold = {
3296
- height: scrollContainerRect.height * thresholdPercentage.y,
3297
- width: scrollContainerRect.width * thresholdPercentage.x
3298
- };
3299
-
3300
- if (!isTop && top <= scrollContainerRect.top + threshold.height) {
3301
- // Scroll Up
3302
- direction.y = Direction.Backward;
3303
- speed.y = acceleration * Math.abs((scrollContainerRect.top + threshold.height - top) / threshold.height);
3304
- } else if (!isBottom && bottom >= scrollContainerRect.bottom - threshold.height) {
3305
- // Scroll Down
3306
- direction.y = Direction.Forward;
3307
- speed.y = acceleration * Math.abs((scrollContainerRect.bottom - threshold.height - bottom) / threshold.height);
3308
- }
3309
-
3310
- if (!isRight && right >= scrollContainerRect.right - threshold.width) {
3311
- // Scroll Right
3312
- direction.x = Direction.Forward;
3313
- speed.x = acceleration * Math.abs((scrollContainerRect.right - threshold.width - right) / threshold.width);
3314
- } else if (!isLeft && left <= scrollContainerRect.left + threshold.width) {
3315
- // Scroll Left
3316
- direction.x = Direction.Backward;
3317
- speed.x = acceleration * Math.abs((scrollContainerRect.left + threshold.width - left) / threshold.width);
3318
- }
3319
-
3320
- return {
3321
- direction,
3322
- speed
3323
- };
3324
- }
3325
-
3326
- function getScrollElementRect(element) {
3327
- if (element === document.scrollingElement) {
3328
- const {
3329
- innerWidth,
3330
- innerHeight
3331
- } = window;
3332
- return {
3333
- top: 0,
3334
- left: 0,
3335
- right: innerWidth,
3336
- bottom: innerHeight,
3337
- width: innerWidth,
3338
- height: innerHeight
3339
- };
3340
- }
3341
-
3342
- const {
3343
- top,
3344
- left,
3345
- right,
3346
- bottom
3347
- } = element.getBoundingClientRect();
3348
- return {
3349
- top,
3350
- left,
3351
- right,
3352
- bottom,
3353
- width: element.clientWidth,
3354
- height: element.clientHeight
3355
- };
3356
- }
3357
-
3358
- function getScrollOffsets(scrollableAncestors) {
3359
- return scrollableAncestors.reduce((acc, node) => {
3360
- return add(acc, getScrollCoordinates(node));
3361
- }, defaultCoordinates);
3362
- }
3363
- function getScrollXOffset(scrollableAncestors) {
3364
- return scrollableAncestors.reduce((acc, node) => {
3365
- return acc + getScrollXCoordinate(node);
3366
- }, 0);
3367
- }
3368
- function getScrollYOffset(scrollableAncestors) {
3369
- return scrollableAncestors.reduce((acc, node) => {
3370
- return acc + getScrollYCoordinate(node);
3371
- }, 0);
3372
- }
3373
-
3374
- function scrollIntoViewIfNeeded(element, measure) {
3375
- if (measure === void 0) {
3376
- measure = getClientRect;
3377
- }
3378
-
3379
- if (!element) {
3380
- return;
3381
- }
3382
-
3383
- const {
3384
- top,
3385
- left,
3386
- bottom,
3387
- right
3388
- } = measure(element);
3389
- const firstScrollableAncestor = getFirstScrollableAncestor(element);
3390
-
3391
- if (!firstScrollableAncestor) {
3392
- return;
3393
- }
3394
-
3395
- if (bottom <= 0 || right <= 0 || top >= window.innerHeight || left >= window.innerWidth) {
3396
- element.scrollIntoView({
3397
- block: 'center',
3398
- inline: 'center'
3399
- });
3400
- }
3401
- }
3402
-
3403
- const properties = [['x', ['left', 'right'], getScrollXOffset], ['y', ['top', 'bottom'], getScrollYOffset]];
3404
- class Rect {
3405
- constructor(rect, element) {
3406
- this.rect = void 0;
3407
- this.width = void 0;
3408
- this.height = void 0;
3409
- this.top = void 0;
3410
- this.bottom = void 0;
3411
- this.right = void 0;
3412
- this.left = void 0;
3413
- const scrollableAncestors = getScrollableAncestors(element);
3414
- const scrollOffsets = getScrollOffsets(scrollableAncestors);
3415
- this.rect = { ...rect
3416
- };
3417
- this.width = rect.width;
3418
- this.height = rect.height;
3419
-
3420
- for (const [axis, keys, getScrollOffset] of properties) {
3421
- for (const key of keys) {
3422
- Object.defineProperty(this, key, {
3423
- get: () => {
3424
- const currentOffsets = getScrollOffset(scrollableAncestors);
3425
- const scrollOffsetsDeltla = scrollOffsets[axis] - currentOffsets;
3426
- return this.rect[key] + scrollOffsetsDeltla;
3427
- },
3428
- enumerable: true
3429
- });
3430
- }
3431
- }
3432
-
3433
- Object.defineProperty(this, 'rect', {
3434
- enumerable: false
3435
- });
3436
- }
3437
-
3438
- }
3439
-
3440
- class Listeners {
3441
- constructor(target) {
3442
- this.target = void 0;
3443
- this.listeners = [];
3444
-
3445
- this.removeAll = () => {
3446
- this.listeners.forEach(listener => {
3447
- var _this$target;
3448
-
3449
- return (_this$target = this.target) == null ? void 0 : _this$target.removeEventListener(...listener);
3450
- });
3451
- };
3452
-
3453
- this.target = target;
3454
- }
3455
-
3456
- add(eventName, handler, options) {
3457
- var _this$target2;
3458
-
3459
- (_this$target2 = this.target) == null ? void 0 : _this$target2.addEventListener(eventName, handler, options);
3460
- this.listeners.push([eventName, handler, options]);
3461
- }
3462
-
3463
- }
3464
-
3465
- function getEventListenerTarget(target) {
3466
- // If the `event.target` element is removed from the document events will still be targeted
3467
- // at it, and hence won't always bubble up to the window or document anymore.
3468
- // If there is any risk of an element being removed while it is being dragged,
3469
- // the best practice is to attach the event listeners directly to the target.
3470
- // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
3471
- const {
3472
- EventTarget
3473
- } = getWindow(target);
3474
- return target instanceof EventTarget ? target : getOwnerDocument(target);
3475
- }
3476
-
3477
- function hasExceededDistance(delta, measurement) {
3478
- const dx = Math.abs(delta.x);
3479
- const dy = Math.abs(delta.y);
3480
-
3481
- if (typeof measurement === 'number') {
3482
- return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
3483
- }
3484
-
3485
- if ('x' in measurement && 'y' in measurement) {
3486
- return dx > measurement.x && dy > measurement.y;
3487
- }
3488
-
3489
- if ('x' in measurement) {
3490
- return dx > measurement.x;
3491
- }
3492
-
3493
- if ('y' in measurement) {
3494
- return dy > measurement.y;
3495
- }
3496
-
3497
- return false;
3498
- }
3499
-
3500
- var EventName;
3501
-
3502
- (function (EventName) {
3503
- EventName["Click"] = "click";
3504
- EventName["DragStart"] = "dragstart";
3505
- EventName["Keydown"] = "keydown";
3506
- EventName["ContextMenu"] = "contextmenu";
3507
- EventName["Resize"] = "resize";
3508
- EventName["SelectionChange"] = "selectionchange";
3509
- EventName["VisibilityChange"] = "visibilitychange";
3510
- })(EventName || (EventName = {}));
3511
-
3512
- function preventDefault(event) {
3513
- event.preventDefault();
3514
- }
3515
- function stopPropagation(event) {
3516
- event.stopPropagation();
3517
- }
3518
-
3519
- var KeyboardCode;
3520
-
3521
- (function (KeyboardCode) {
3522
- KeyboardCode["Space"] = "Space";
3523
- KeyboardCode["Down"] = "ArrowDown";
3524
- KeyboardCode["Right"] = "ArrowRight";
3525
- KeyboardCode["Left"] = "ArrowLeft";
3526
- KeyboardCode["Up"] = "ArrowUp";
3527
- KeyboardCode["Esc"] = "Escape";
3528
- KeyboardCode["Enter"] = "Enter";
3529
- KeyboardCode["Tab"] = "Tab";
3530
- })(KeyboardCode || (KeyboardCode = {}));
3531
-
3532
- const defaultKeyboardCodes = {
3533
- start: [KeyboardCode.Space, KeyboardCode.Enter],
3534
- cancel: [KeyboardCode.Esc],
3535
- end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
3536
- };
3537
- const defaultKeyboardCoordinateGetter = (event, _ref) => {
3538
- let {
3539
- currentCoordinates
3540
- } = _ref;
3541
-
3542
- switch (event.code) {
3543
- case KeyboardCode.Right:
3544
- return { ...currentCoordinates,
3545
- x: currentCoordinates.x + 25
3546
- };
3547
-
3548
- case KeyboardCode.Left:
3549
- return { ...currentCoordinates,
3550
- x: currentCoordinates.x - 25
3551
- };
3552
-
3553
- case KeyboardCode.Down:
3554
- return { ...currentCoordinates,
3555
- y: currentCoordinates.y + 25
3556
- };
3557
-
3558
- case KeyboardCode.Up:
3559
- return { ...currentCoordinates,
3560
- y: currentCoordinates.y - 25
3561
- };
3562
- }
3563
-
3564
- return undefined;
3565
- };
3566
-
3567
- class KeyboardSensor {
3568
- constructor(props) {
3569
- this.props = void 0;
3570
- this.autoScrollEnabled = false;
3571
- this.referenceCoordinates = void 0;
3572
- this.listeners = void 0;
3573
- this.windowListeners = void 0;
3574
- this.props = props;
3575
- const {
3576
- event: {
3577
- target
3578
- }
3579
- } = props;
3580
- this.props = props;
3581
- this.listeners = new Listeners(getOwnerDocument(target));
3582
- this.windowListeners = new Listeners(getWindow(target));
3583
- this.handleKeyDown = this.handleKeyDown.bind(this);
3584
- this.handleCancel = this.handleCancel.bind(this);
3585
- this.attach();
3586
- }
3587
-
3588
- attach() {
3589
- this.handleStart();
3590
- this.windowListeners.add(EventName.Resize, this.handleCancel);
3591
- this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
3592
- setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
3593
- }
3594
-
3595
- handleStart() {
3596
- const {
3597
- activeNode,
3598
- onStart
3599
- } = this.props;
3600
- const node = activeNode.node.current;
3601
-
3602
- if (node) {
3603
- scrollIntoViewIfNeeded(node);
3604
- }
3605
-
3606
- onStart(defaultCoordinates);
3607
- }
3608
-
3609
- handleKeyDown(event) {
3610
- if (isKeyboardEvent(event)) {
3611
- const {
3612
- active,
3613
- context,
3614
- options
3615
- } = this.props;
3616
- const {
3617
- keyboardCodes = defaultKeyboardCodes,
3618
- coordinateGetter = defaultKeyboardCoordinateGetter,
3619
- scrollBehavior = 'smooth'
3620
- } = options;
3621
- const {
3622
- code
3623
- } = event;
3624
-
3625
- if (keyboardCodes.end.includes(code)) {
3626
- this.handleEnd(event);
3627
- return;
3628
- }
3629
-
3630
- if (keyboardCodes.cancel.includes(code)) {
3631
- this.handleCancel(event);
3632
- return;
3633
- }
3634
-
3635
- const {
3636
- collisionRect
3637
- } = context.current;
3638
- const currentCoordinates = collisionRect ? {
3639
- x: collisionRect.left,
3640
- y: collisionRect.top
3641
- } : defaultCoordinates;
3642
-
3643
- if (!this.referenceCoordinates) {
3644
- this.referenceCoordinates = currentCoordinates;
3645
- }
3646
-
3647
- const newCoordinates = coordinateGetter(event, {
3648
- active,
3649
- context: context.current,
3650
- currentCoordinates
3651
- });
3652
-
3653
- if (newCoordinates) {
3654
- const coordinatesDelta = subtract(newCoordinates, currentCoordinates);
3655
- const scrollDelta = {
3656
- x: 0,
3657
- y: 0
3658
- };
3659
- const {
3660
- scrollableAncestors
3661
- } = context.current;
3662
-
3663
- for (const scrollContainer of scrollableAncestors) {
3664
- const direction = event.code;
3665
- const {
3666
- isTop,
3667
- isRight,
3668
- isLeft,
3669
- isBottom,
3670
- maxScroll,
3671
- minScroll
3672
- } = getScrollPosition(scrollContainer);
3673
- const scrollElementRect = getScrollElementRect(scrollContainer);
3674
- const clampedCoordinates = {
3675
- 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)),
3676
- 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))
3677
- };
3678
- const canScrollX = direction === KeyboardCode.Right && !isRight || direction === KeyboardCode.Left && !isLeft;
3679
- const canScrollY = direction === KeyboardCode.Down && !isBottom || direction === KeyboardCode.Up && !isTop;
3680
-
3681
- if (canScrollX && clampedCoordinates.x !== newCoordinates.x) {
3682
- const newScrollCoordinates = scrollContainer.scrollLeft + coordinatesDelta.x;
3683
- const canScrollToNewCoordinates = direction === KeyboardCode.Right && newScrollCoordinates <= maxScroll.x || direction === KeyboardCode.Left && newScrollCoordinates >= minScroll.x;
3684
-
3685
- if (canScrollToNewCoordinates && !coordinatesDelta.y) {
3686
- // We don't need to update coordinates, the scroll adjustment alone will trigger
3687
- // logic to auto-detect the new container we are over
3688
- scrollContainer.scrollTo({
3689
- left: newScrollCoordinates,
3690
- behavior: scrollBehavior
3691
- });
3692
- return;
3693
- }
3694
-
3695
- if (canScrollToNewCoordinates) {
3696
- scrollDelta.x = scrollContainer.scrollLeft - newScrollCoordinates;
3697
- } else {
3698
- scrollDelta.x = direction === KeyboardCode.Right ? scrollContainer.scrollLeft - maxScroll.x : scrollContainer.scrollLeft - minScroll.x;
3699
- }
3700
-
3701
- if (scrollDelta.x) {
3702
- scrollContainer.scrollBy({
3703
- left: -scrollDelta.x,
3704
- behavior: scrollBehavior
3705
- });
3706
- }
3707
-
3708
- break;
3709
- } else if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {
3710
- const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;
3711
- const canScrollToNewCoordinates = direction === KeyboardCode.Down && newScrollCoordinates <= maxScroll.y || direction === KeyboardCode.Up && newScrollCoordinates >= minScroll.y;
3712
-
3713
- if (canScrollToNewCoordinates && !coordinatesDelta.x) {
3714
- // We don't need to update coordinates, the scroll adjustment alone will trigger
3715
- // logic to auto-detect the new container we are over
3716
- scrollContainer.scrollTo({
3717
- top: newScrollCoordinates,
3718
- behavior: scrollBehavior
3719
- });
3720
- return;
3721
- }
3722
-
3723
- if (canScrollToNewCoordinates) {
3724
- scrollDelta.y = scrollContainer.scrollTop - newScrollCoordinates;
3725
- } else {
3726
- scrollDelta.y = direction === KeyboardCode.Down ? scrollContainer.scrollTop - maxScroll.y : scrollContainer.scrollTop - minScroll.y;
3727
- }
3728
-
3729
- if (scrollDelta.y) {
3730
- scrollContainer.scrollBy({
3731
- top: -scrollDelta.y,
3732
- behavior: scrollBehavior
3733
- });
3734
- }
3735
-
3736
- break;
3737
- }
3738
- }
3739
-
3740
- this.handleMove(event, add(subtract(newCoordinates, this.referenceCoordinates), scrollDelta));
3741
- }
3742
- }
3743
- }
3744
-
3745
- handleMove(event, coordinates) {
3746
- const {
3747
- onMove
3748
- } = this.props;
3749
- event.preventDefault();
3750
- onMove(coordinates);
3751
- }
3752
-
3753
- handleEnd(event) {
3754
- const {
3755
- onEnd
3756
- } = this.props;
3757
- event.preventDefault();
3758
- this.detach();
3759
- onEnd();
3760
- }
3761
-
3762
- handleCancel(event) {
3763
- const {
3764
- onCancel
3765
- } = this.props;
3766
- event.preventDefault();
3767
- this.detach();
3768
- onCancel();
3769
- }
3770
-
3771
- detach() {
3772
- this.listeners.removeAll();
3773
- this.windowListeners.removeAll();
3774
- }
3775
-
3776
- }
3777
- KeyboardSensor.activators = [{
3778
- eventName: 'onKeyDown',
3779
- handler: (event, _ref, _ref2) => {
3780
- let {
3781
- keyboardCodes = defaultKeyboardCodes,
3782
- onActivation
3783
- } = _ref;
3784
- let {
3785
- active
3786
- } = _ref2;
3787
- const {
3788
- code
3789
- } = event.nativeEvent;
3790
-
3791
- if (keyboardCodes.start.includes(code)) {
3792
- const activator = active.activatorNode.current;
3793
-
3794
- if (activator && event.target !== activator) {
3795
- return false;
3796
- }
3797
-
3798
- event.preventDefault();
3799
- onActivation == null ? void 0 : onActivation({
3800
- event: event.nativeEvent
3801
- });
3802
- return true;
3803
- }
3804
-
3805
- return false;
3806
- }
3807
- }];
3808
-
3809
- function isDistanceConstraint(constraint) {
3810
- return Boolean(constraint && 'distance' in constraint);
3811
- }
3812
-
3813
- function isDelayConstraint(constraint) {
3814
- return Boolean(constraint && 'delay' in constraint);
3815
- }
3816
-
3817
- class AbstractPointerSensor {
3818
- constructor(props, events, listenerTarget) {
3819
- var _getEventCoordinates;
3820
-
3821
- if (listenerTarget === void 0) {
3822
- listenerTarget = getEventListenerTarget(props.event.target);
3823
- }
3824
-
3825
- this.props = void 0;
3826
- this.events = void 0;
3827
- this.autoScrollEnabled = true;
3828
- this.document = void 0;
3829
- this.activated = false;
3830
- this.initialCoordinates = void 0;
3831
- this.timeoutId = null;
3832
- this.listeners = void 0;
3833
- this.documentListeners = void 0;
3834
- this.windowListeners = void 0;
3835
- this.props = props;
3836
- this.events = events;
3837
- const {
3838
- event
3839
- } = props;
3840
- const {
3841
- target
3842
- } = event;
3843
- this.props = props;
3844
- this.events = events;
3845
- this.document = getOwnerDocument(target);
3846
- this.documentListeners = new Listeners(this.document);
3847
- this.listeners = new Listeners(listenerTarget);
3848
- this.windowListeners = new Listeners(getWindow(target));
3849
- this.initialCoordinates = (_getEventCoordinates = getEventCoordinates(event)) != null ? _getEventCoordinates : defaultCoordinates;
3850
- this.handleStart = this.handleStart.bind(this);
3851
- this.handleMove = this.handleMove.bind(this);
3852
- this.handleEnd = this.handleEnd.bind(this);
3853
- this.handleCancel = this.handleCancel.bind(this);
3854
- this.handleKeydown = this.handleKeydown.bind(this);
3855
- this.removeTextSelection = this.removeTextSelection.bind(this);
3856
- this.attach();
3857
- }
3858
-
3859
- attach() {
3860
- const {
3861
- events,
3862
- props: {
3863
- options: {
3864
- activationConstraint,
3865
- bypassActivationConstraint
3866
- }
3867
- }
3868
- } = this;
3869
- this.listeners.add(events.move.name, this.handleMove, {
3870
- passive: false
3871
- });
3872
- this.listeners.add(events.end.name, this.handleEnd);
3873
-
3874
- if (events.cancel) {
3875
- this.listeners.add(events.cancel.name, this.handleCancel);
3876
- }
3877
-
3878
- this.windowListeners.add(EventName.Resize, this.handleCancel);
3879
- this.windowListeners.add(EventName.DragStart, preventDefault);
3880
- this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
3881
- this.windowListeners.add(EventName.ContextMenu, preventDefault);
3882
- this.documentListeners.add(EventName.Keydown, this.handleKeydown);
3883
-
3884
- if (activationConstraint) {
3885
- if (bypassActivationConstraint != null && bypassActivationConstraint({
3886
- event: this.props.event,
3887
- activeNode: this.props.activeNode,
3888
- options: this.props.options
3889
- })) {
3890
- return this.handleStart();
3891
- }
3892
-
3893
- if (isDelayConstraint(activationConstraint)) {
3894
- this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
3895
- this.handlePending(activationConstraint);
3896
- return;
3897
- }
3898
-
3899
- if (isDistanceConstraint(activationConstraint)) {
3900
- this.handlePending(activationConstraint);
3901
- return;
3902
- }
3903
- }
3904
-
3905
- this.handleStart();
3906
- }
3907
-
3908
- detach() {
3909
- this.listeners.removeAll();
3910
- this.windowListeners.removeAll(); // Wait until the next event loop before removing document listeners
3911
- // This is necessary because we listen for `click` and `selection` events on the document
3912
-
3913
- setTimeout(this.documentListeners.removeAll, 50);
3914
-
3915
- if (this.timeoutId !== null) {
3916
- clearTimeout(this.timeoutId);
3917
- this.timeoutId = null;
3918
- }
3919
- }
3920
-
3921
- handlePending(constraint, offset) {
3922
- const {
3923
- active,
3924
- onPending
3925
- } = this.props;
3926
- onPending(active, constraint, this.initialCoordinates, offset);
3927
- }
3928
-
3929
- handleStart() {
3930
- const {
3931
- initialCoordinates
3932
- } = this;
3933
- const {
3934
- onStart
3935
- } = this.props;
3936
-
3937
- if (initialCoordinates) {
3938
- this.activated = true; // Stop propagation of click events once activation constraints are met
3939
-
3940
- this.documentListeners.add(EventName.Click, stopPropagation, {
3941
- capture: true
3942
- }); // Remove any text selection from the document
3943
-
3944
- this.removeTextSelection(); // Prevent further text selection while dragging
3945
-
3946
- this.documentListeners.add(EventName.SelectionChange, this.removeTextSelection);
3947
- onStart(initialCoordinates);
3948
- }
3949
- }
3950
-
3951
- handleMove(event) {
3952
- var _getEventCoordinates2;
3953
-
3954
- const {
3955
- activated,
3956
- initialCoordinates,
3957
- props
3958
- } = this;
3959
- const {
3960
- onMove,
3961
- options: {
3962
- activationConstraint
3963
- }
3964
- } = props;
3965
-
3966
- if (!initialCoordinates) {
3967
- return;
3968
- }
3969
-
3970
- const coordinates = (_getEventCoordinates2 = getEventCoordinates(event)) != null ? _getEventCoordinates2 : defaultCoordinates;
3971
- const delta = subtract(initialCoordinates, coordinates); // Constraint validation
3972
-
3973
- if (!activated && activationConstraint) {
3974
- if (isDistanceConstraint(activationConstraint)) {
3975
- if (activationConstraint.tolerance != null && hasExceededDistance(delta, activationConstraint.tolerance)) {
3976
- return this.handleCancel();
3977
- }
3978
-
3979
- if (hasExceededDistance(delta, activationConstraint.distance)) {
3980
- return this.handleStart();
3981
- }
3982
- }
3983
-
3984
- if (isDelayConstraint(activationConstraint)) {
3985
- if (hasExceededDistance(delta, activationConstraint.tolerance)) {
3986
- return this.handleCancel();
3987
- }
3988
- }
3989
-
3990
- this.handlePending(activationConstraint, delta);
3991
- return;
3992
- }
3993
-
3994
- if (event.cancelable) {
3995
- event.preventDefault();
3996
- }
3997
-
3998
- onMove(coordinates);
3999
- }
4000
-
4001
- handleEnd() {
4002
- const {
4003
- onAbort,
4004
- onEnd
4005
- } = this.props;
4006
- this.detach();
4007
-
4008
- if (!this.activated) {
4009
- onAbort(this.props.active);
4010
- }
4011
-
4012
- onEnd();
4013
- }
4014
-
4015
- handleCancel() {
4016
- const {
4017
- onAbort,
4018
- onCancel
4019
- } = this.props;
4020
- this.detach();
4021
-
4022
- if (!this.activated) {
4023
- onAbort(this.props.active);
4024
- }
4025
-
4026
- onCancel();
4027
- }
4028
-
4029
- handleKeydown(event) {
4030
- if (event.code === KeyboardCode.Esc) {
4031
- this.handleCancel();
4032
- }
4033
- }
4034
-
4035
- removeTextSelection() {
4036
- var _this$document$getSel;
4037
-
4038
- (_this$document$getSel = this.document.getSelection()) == null ? void 0 : _this$document$getSel.removeAllRanges();
4039
- }
4040
-
4041
- }
4042
-
4043
- const events = {
4044
- cancel: {
4045
- name: 'pointercancel'
4046
- },
4047
- move: {
4048
- name: 'pointermove'
4049
- },
4050
- end: {
4051
- name: 'pointerup'
4052
- }
4053
- };
4054
- class PointerSensor extends AbstractPointerSensor {
4055
- constructor(props) {
4056
- const {
4057
- event
4058
- } = props; // Pointer events stop firing if the target is unmounted while dragging
4059
- // Therefore we attach listeners to the owner document instead
4060
-
4061
- const listenerTarget = getOwnerDocument(event.target);
4062
- super(props, events, listenerTarget);
4063
- }
4064
-
4065
- }
4066
- PointerSensor.activators = [{
4067
- eventName: 'onPointerDown',
4068
- handler: (_ref, _ref2) => {
4069
- let {
4070
- nativeEvent: event
4071
- } = _ref;
4072
- let {
4073
- onActivation
4074
- } = _ref2;
4075
-
4076
- if (!event.isPrimary || event.button !== 0) {
4077
- return false;
4078
- }
4079
-
4080
- onActivation == null ? void 0 : onActivation({
4081
- event
4082
- });
4083
- return true;
4084
- }
4085
- }];
4086
-
4087
- const events$1 = {
4088
- move: {
4089
- name: 'mousemove'
4090
- },
4091
- end: {
4092
- name: 'mouseup'
4093
- }
4094
- };
4095
- var MouseButton;
4096
-
4097
- (function (MouseButton) {
4098
- MouseButton[MouseButton["RightClick"] = 2] = "RightClick";
4099
- })(MouseButton || (MouseButton = {}));
4100
-
4101
- class MouseSensor extends AbstractPointerSensor {
4102
- constructor(props) {
4103
- super(props, events$1, getOwnerDocument(props.event.target));
4104
- }
4105
-
4106
- }
4107
- MouseSensor.activators = [{
4108
- eventName: 'onMouseDown',
4109
- handler: (_ref, _ref2) => {
4110
- let {
4111
- nativeEvent: event
4112
- } = _ref;
4113
- let {
4114
- onActivation
4115
- } = _ref2;
4116
-
4117
- if (event.button === MouseButton.RightClick) {
4118
- return false;
4119
- }
4120
-
4121
- onActivation == null ? void 0 : onActivation({
4122
- event
4123
- });
4124
- return true;
4125
- }
4126
- }];
4127
-
4128
- const events$2 = {
4129
- cancel: {
4130
- name: 'touchcancel'
4131
- },
4132
- move: {
4133
- name: 'touchmove'
4134
- },
4135
- end: {
4136
- name: 'touchend'
4137
- }
4138
- };
4139
- class TouchSensor extends AbstractPointerSensor {
4140
- constructor(props) {
4141
- super(props, events$2);
4142
- }
4143
-
4144
- static setup() {
4145
- // Adding a non-capture and non-passive `touchmove` listener in order
4146
- // to force `event.preventDefault()` calls to work in dynamically added
4147
- // touchmove event handlers. This is required for iOS Safari.
4148
- window.addEventListener(events$2.move.name, noop, {
4149
- capture: false,
4150
- passive: false
4151
- });
4152
- return function teardown() {
4153
- window.removeEventListener(events$2.move.name, noop);
4154
- }; // We create a new handler because the teardown function of another sensor
4155
- // could remove our event listener if we use a referentially equal listener.
4156
-
4157
- function noop() {}
4158
- }
4159
-
4160
- }
4161
- TouchSensor.activators = [{
4162
- eventName: 'onTouchStart',
4163
- handler: (_ref, _ref2) => {
4164
- let {
4165
- nativeEvent: event
4166
- } = _ref;
4167
- let {
4168
- onActivation
4169
- } = _ref2;
4170
- const {
4171
- touches
4172
- } = event;
4173
-
4174
- if (touches.length > 1) {
4175
- return false;
4176
- }
4177
-
4178
- onActivation == null ? void 0 : onActivation({
4179
- event
4180
- });
4181
- return true;
4182
- }
4183
- }];
4184
-
4185
- var AutoScrollActivator;
4186
-
4187
- (function (AutoScrollActivator) {
4188
- AutoScrollActivator[AutoScrollActivator["Pointer"] = 0] = "Pointer";
4189
- AutoScrollActivator[AutoScrollActivator["DraggableRect"] = 1] = "DraggableRect";
4190
- })(AutoScrollActivator || (AutoScrollActivator = {}));
4191
-
4192
- var TraversalOrder;
4193
-
4194
- (function (TraversalOrder) {
4195
- TraversalOrder[TraversalOrder["TreeOrder"] = 0] = "TreeOrder";
4196
- TraversalOrder[TraversalOrder["ReversedTreeOrder"] = 1] = "ReversedTreeOrder";
4197
- })(TraversalOrder || (TraversalOrder = {}));
4198
-
4199
- function useAutoScroller(_ref) {
4200
- let {
4201
- acceleration,
4202
- activator = AutoScrollActivator.Pointer,
4203
- canScroll,
4204
- draggingRect,
4205
- enabled,
4206
- interval = 5,
4207
- order = TraversalOrder.TreeOrder,
4208
- pointerCoordinates,
4209
- scrollableAncestors,
4210
- scrollableAncestorRects,
4211
- delta,
4212
- threshold
4213
- } = _ref;
4214
- const scrollIntent = useScrollIntent({
4215
- delta,
4216
- disabled: !enabled
4217
- });
4218
- const [setAutoScrollInterval, clearAutoScrollInterval] = useInterval();
4219
- const scrollSpeed = useRef({
4220
- x: 0,
4221
- y: 0
4222
- });
4223
- const scrollDirection = useRef({
4224
- x: 0,
4225
- y: 0
4226
- });
4227
- const rect = useMemo$1(() => {
4228
- switch (activator) {
4229
- case AutoScrollActivator.Pointer:
4230
- return pointerCoordinates ? {
4231
- top: pointerCoordinates.y,
4232
- bottom: pointerCoordinates.y,
4233
- left: pointerCoordinates.x,
4234
- right: pointerCoordinates.x
4235
- } : null;
4236
-
4237
- case AutoScrollActivator.DraggableRect:
4238
- return draggingRect;
4239
- }
4240
- }, [activator, draggingRect, pointerCoordinates]);
4241
- const scrollContainerRef = useRef(null);
4242
- const autoScroll = useCallback(() => {
4243
- const scrollContainer = scrollContainerRef.current;
4244
-
4245
- if (!scrollContainer) {
4246
- return;
4247
- }
4248
-
4249
- const scrollLeft = scrollSpeed.current.x * scrollDirection.current.x;
4250
- const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;
4251
- scrollContainer.scrollBy(scrollLeft, scrollTop);
4252
- }, []);
4253
- const sortedScrollableAncestors = useMemo$1(() => order === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order, scrollableAncestors]);
4254
- useEffect(() => {
4255
- if (!enabled || !scrollableAncestors.length || !rect) {
4256
- clearAutoScrollInterval();
4257
- return;
4258
- }
4259
-
4260
- for (const scrollContainer of sortedScrollableAncestors) {
4261
- if ((canScroll == null ? void 0 : canScroll(scrollContainer)) === false) {
4262
- continue;
4263
- }
4264
-
4265
- const index = scrollableAncestors.indexOf(scrollContainer);
4266
- const scrollContainerRect = scrollableAncestorRects[index];
4267
-
4268
- if (!scrollContainerRect) {
4269
- continue;
4270
- }
4271
-
4272
- const {
4273
- direction,
4274
- speed
4275
- } = getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, rect, acceleration, threshold);
4276
-
4277
- for (const axis of ['x', 'y']) {
4278
- if (!scrollIntent[axis][direction[axis]]) {
4279
- speed[axis] = 0;
4280
- direction[axis] = 0;
4281
- }
4282
- }
4283
-
4284
- if (speed.x > 0 || speed.y > 0) {
4285
- clearAutoScrollInterval();
4286
- scrollContainerRef.current = scrollContainer;
4287
- setAutoScrollInterval(autoScroll, interval);
4288
- scrollSpeed.current = speed;
4289
- scrollDirection.current = direction;
4290
- return;
4291
- }
4292
- }
4293
-
4294
- scrollSpeed.current = {
4295
- x: 0,
4296
- y: 0
4297
- };
4298
- scrollDirection.current = {
4299
- x: 0,
4300
- y: 0
4301
- };
4302
- clearAutoScrollInterval();
4303
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
4304
- [acceleration, autoScroll, canScroll, clearAutoScrollInterval, enabled, interval, // eslint-disable-next-line react-hooks/exhaustive-deps
4305
- JSON.stringify(rect), // eslint-disable-next-line react-hooks/exhaustive-deps
4306
- JSON.stringify(scrollIntent), setAutoScrollInterval, scrollableAncestors, sortedScrollableAncestors, scrollableAncestorRects, // eslint-disable-next-line react-hooks/exhaustive-deps
4307
- JSON.stringify(threshold)]);
4308
- }
4309
- const defaultScrollIntent = {
4310
- x: {
4311
- [Direction.Backward]: false,
4312
- [Direction.Forward]: false
4313
- },
4314
- y: {
4315
- [Direction.Backward]: false,
4316
- [Direction.Forward]: false
4317
- }
4318
- };
4319
-
4320
- function useScrollIntent(_ref2) {
4321
- let {
4322
- delta,
4323
- disabled
4324
- } = _ref2;
4325
- const previousDelta = usePrevious(delta);
4326
- return useLazyMemo(previousIntent => {
4327
- if (disabled || !previousDelta || !previousIntent) {
4328
- // Reset scroll intent tracking when auto-scrolling is disabled
4329
- return defaultScrollIntent;
4330
- }
4331
-
4332
- const direction = {
4333
- x: Math.sign(delta.x - previousDelta.x),
4334
- y: Math.sign(delta.y - previousDelta.y)
4335
- }; // Keep track of the user intent to scroll in each direction for both axis
4336
-
4337
- return {
4338
- x: {
4339
- [Direction.Backward]: previousIntent.x[Direction.Backward] || direction.x === -1,
4340
- [Direction.Forward]: previousIntent.x[Direction.Forward] || direction.x === 1
4341
- },
4342
- y: {
4343
- [Direction.Backward]: previousIntent.y[Direction.Backward] || direction.y === -1,
4344
- [Direction.Forward]: previousIntent.y[Direction.Forward] || direction.y === 1
4345
- }
4346
- };
4347
- }, [disabled, delta, previousDelta]);
4348
- }
4349
-
4350
- function useCachedNode(draggableNodes, id) {
4351
- const draggableNode = id != null ? draggableNodes.get(id) : undefined;
4352
- const node = draggableNode ? draggableNode.node.current : null;
4353
- return useLazyMemo(cachedNode => {
4354
- var _ref;
4355
-
4356
- if (id == null) {
4357
- return null;
4358
- } // In some cases, the draggable node can unmount while dragging
4359
- // This is the case for virtualized lists. In those situations,
4360
- // we fall back to the last known value for that node.
4361
-
4362
-
4363
- return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
4364
- }, [node, id]);
4365
- }
4366
-
4367
- function useCombineActivators(sensors, getSyntheticHandler) {
4368
- return useMemo$1(() => sensors.reduce((accumulator, sensor) => {
4369
- const {
4370
- sensor: Sensor
4371
- } = sensor;
4372
- const sensorActivators = Sensor.activators.map(activator => ({
4373
- eventName: activator.eventName,
4374
- handler: getSyntheticHandler(activator.handler, sensor)
4375
- }));
4376
- return [...accumulator, ...sensorActivators];
4377
- }, []), [sensors, getSyntheticHandler]);
4378
- }
4379
-
4380
- var MeasuringStrategy;
4381
-
4382
- (function (MeasuringStrategy) {
4383
- MeasuringStrategy[MeasuringStrategy["Always"] = 0] = "Always";
4384
- MeasuringStrategy[MeasuringStrategy["BeforeDragging"] = 1] = "BeforeDragging";
4385
- MeasuringStrategy[MeasuringStrategy["WhileDragging"] = 2] = "WhileDragging";
4386
- })(MeasuringStrategy || (MeasuringStrategy = {}));
4387
-
4388
- var MeasuringFrequency;
4389
-
4390
- (function (MeasuringFrequency) {
4391
- MeasuringFrequency["Optimized"] = "optimized";
4392
- })(MeasuringFrequency || (MeasuringFrequency = {}));
4393
-
4394
- const defaultValue = /*#__PURE__*/new Map();
4395
- function useDroppableMeasuring(containers, _ref) {
4396
- let {
4397
- dragging,
4398
- dependencies,
4399
- config
4400
- } = _ref;
4401
- const [queue, setQueue] = useState(null);
4402
- const {
4403
- frequency,
4404
- measure,
4405
- strategy
4406
- } = config;
4407
- const containersRef = useRef(containers);
4408
- const disabled = isDisabled();
4409
- const disabledRef = useLatestValue(disabled);
4410
- const measureDroppableContainers = useCallback(function (ids) {
4411
- if (ids === void 0) {
4412
- ids = [];
4413
- }
4414
-
4415
- if (disabledRef.current) {
4416
- return;
4417
- }
4418
-
4419
- setQueue(value => {
4420
- if (value === null) {
4421
- return ids;
4422
- }
4423
-
4424
- return value.concat(ids.filter(id => !value.includes(id)));
4425
- });
4426
- }, [disabledRef]);
4427
- const timeoutId = useRef(null);
4428
- const droppableRects = useLazyMemo(previousValue => {
4429
- if (disabled && !dragging) {
4430
- return defaultValue;
4431
- }
4432
-
4433
- if (!previousValue || previousValue === defaultValue || containersRef.current !== containers || queue != null) {
4434
- const map = new Map();
4435
-
4436
- for (let container of containers) {
4437
- if (!container) {
4438
- continue;
4439
- }
4440
-
4441
- if (queue && queue.length > 0 && !queue.includes(container.id) && container.rect.current) {
4442
- // This container does not need to be re-measured
4443
- map.set(container.id, container.rect.current);
4444
- continue;
4445
- }
4446
-
4447
- const node = container.node.current;
4448
- const rect = node ? new Rect(measure(node), node) : null;
4449
- container.rect.current = rect;
4450
-
4451
- if (rect) {
4452
- map.set(container.id, rect);
4453
- }
4454
- }
4455
-
4456
- return map;
4457
- }
4458
-
4459
- return previousValue;
4460
- }, [containers, queue, dragging, disabled, measure]);
4461
- useEffect(() => {
4462
- containersRef.current = containers;
4463
- }, [containers]);
4464
- useEffect(() => {
4465
- if (disabled) {
4466
- return;
4467
- }
4468
-
4469
- measureDroppableContainers();
4470
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
4471
- [dragging, disabled]);
4472
- useEffect(() => {
4473
- if (queue && queue.length > 0) {
4474
- setQueue(null);
4475
- }
4476
- }, //eslint-disable-next-line react-hooks/exhaustive-deps
4477
- [JSON.stringify(queue)]);
4478
- useEffect(() => {
4479
- if (disabled || typeof frequency !== 'number' || timeoutId.current !== null) {
4480
- return;
4481
- }
4482
-
4483
- timeoutId.current = setTimeout(() => {
4484
- measureDroppableContainers();
4485
- timeoutId.current = null;
4486
- }, frequency);
4487
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
4488
- [frequency, disabled, measureDroppableContainers, ...dependencies]);
4489
- return {
4490
- droppableRects,
4491
- measureDroppableContainers,
4492
- measuringScheduled: queue != null
4493
- };
4494
-
4495
- function isDisabled() {
4496
- switch (strategy) {
4497
- case MeasuringStrategy.Always:
4498
- return false;
4499
-
4500
- case MeasuringStrategy.BeforeDragging:
4501
- return dragging;
4502
-
4503
- default:
4504
- return !dragging;
4505
- }
4506
- }
4507
- }
4508
-
4509
- function useInitialValue(value, computeFn) {
4510
- return useLazyMemo(previousValue => {
4511
- if (!value) {
4512
- return null;
4513
- }
4514
-
4515
- if (previousValue) {
4516
- return previousValue;
4517
- }
4518
-
4519
- return typeof computeFn === 'function' ? computeFn(value) : value;
4520
- }, [computeFn, value]);
4521
- }
4522
-
4523
- function useInitialRect(node, measure) {
4524
- return useInitialValue(node, measure);
4525
- }
4526
-
4527
- /**
4528
- * Returns a new MutationObserver instance.
4529
- * If `MutationObserver` is undefined in the execution environment, returns `undefined`.
4530
- */
4531
-
4532
- function useMutationObserver(_ref) {
4533
- let {
4534
- callback,
4535
- disabled
4536
- } = _ref;
4537
- const handleMutations = useEvent$1(callback);
4538
- const mutationObserver = useMemo$1(() => {
4539
- if (disabled || typeof window === 'undefined' || typeof window.MutationObserver === 'undefined') {
4540
- return undefined;
4541
- }
4542
-
4543
- const {
4544
- MutationObserver
4545
- } = window;
4546
- return new MutationObserver(handleMutations);
4547
- }, [handleMutations, disabled]);
4548
- useEffect(() => {
4549
- return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
4550
- }, [mutationObserver]);
4551
- return mutationObserver;
4552
- }
4553
-
4554
- /**
4555
- * Returns a new ResizeObserver instance bound to the `onResize` callback.
4556
- * If `ResizeObserver` is undefined in the execution environment, returns `undefined`.
4557
- */
4558
-
4559
- function useResizeObserver(_ref) {
4560
- let {
4561
- callback,
4562
- disabled
4563
- } = _ref;
4564
- const handleResize = useEvent$1(callback);
4565
- const resizeObserver = useMemo$1(() => {
4566
- if (disabled || typeof window === 'undefined' || typeof window.ResizeObserver === 'undefined') {
4567
- return undefined;
4568
- }
4569
-
4570
- const {
4571
- ResizeObserver
4572
- } = window;
4573
- return new ResizeObserver(handleResize);
4574
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
4575
- [disabled]);
4576
- useEffect(() => {
4577
- return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
4578
- }, [resizeObserver]);
4579
- return resizeObserver;
4580
- }
4581
-
4582
- function defaultMeasure(element) {
4583
- return new Rect(getClientRect(element), element);
4584
- }
4585
-
4586
- function useRect(element, measure, fallbackRect) {
4587
- if (measure === void 0) {
4588
- measure = defaultMeasure;
4589
- }
4590
-
4591
- const [rect, setRect] = useState(null);
4592
-
4593
- function measureRect() {
4594
- setRect(currentRect => {
4595
- if (!element) {
4596
- return null;
4597
- }
4598
-
4599
- if (element.isConnected === false) {
4600
- var _ref;
4601
-
4602
- // Fall back to last rect we measured if the element is
4603
- // no longer connected to the DOM.
4604
- return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
4605
- }
4606
-
4607
- const newRect = measure(element);
4608
-
4609
- if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
4610
- return currentRect;
4611
- }
4612
-
4613
- return newRect;
4614
- });
4615
- }
4616
-
4617
- const mutationObserver = useMutationObserver({
4618
- callback(records) {
4619
- if (!element) {
4620
- return;
4621
- }
4622
-
4623
- for (const record of records) {
4624
- const {
4625
- type,
4626
- target
4627
- } = record;
4628
-
4629
- if (type === 'childList' && target instanceof HTMLElement && target.contains(element)) {
4630
- measureRect();
4631
- break;
4632
- }
4633
- }
4634
- }
4635
-
4636
- });
4637
- const resizeObserver = useResizeObserver({
4638
- callback: measureRect
4639
- });
4640
- useIsomorphicLayoutEffect$1(() => {
4641
- measureRect();
4642
-
4643
- if (element) {
4644
- resizeObserver == null ? void 0 : resizeObserver.observe(element);
4645
- mutationObserver == null ? void 0 : mutationObserver.observe(document.body, {
4646
- childList: true,
4647
- subtree: true
4648
- });
4649
- } else {
4650
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
4651
- mutationObserver == null ? void 0 : mutationObserver.disconnect();
4652
- }
4653
- }, [element]);
4654
- return rect;
4655
- }
4656
-
4657
- function useRectDelta(rect) {
4658
- const initialRect = useInitialValue(rect);
4659
- return getRectDelta(rect, initialRect);
4660
- }
4661
-
4662
- const defaultValue$1 = [];
4663
- function useScrollableAncestors(node) {
4664
- const previousNode = useRef(node);
4665
- const ancestors = useLazyMemo(previousValue => {
4666
- if (!node) {
4667
- return defaultValue$1;
4668
- }
4669
-
4670
- if (previousValue && previousValue !== defaultValue$1 && node && previousNode.current && node.parentNode === previousNode.current.parentNode) {
4671
- return previousValue;
4672
- }
4673
-
4674
- return getScrollableAncestors(node);
4675
- }, [node]);
4676
- useEffect(() => {
4677
- previousNode.current = node;
4678
- }, [node]);
4679
- return ancestors;
4680
- }
4681
-
4682
- function useScrollOffsets(elements) {
4683
- const [scrollCoordinates, setScrollCoordinates] = useState(null);
4684
- const prevElements = useRef(elements); // To-do: Throttle the handleScroll callback
4685
-
4686
- const handleScroll = useCallback(event => {
4687
- const scrollingElement = getScrollableElement(event.target);
4688
-
4689
- if (!scrollingElement) {
4690
- return;
4691
- }
4692
-
4693
- setScrollCoordinates(scrollCoordinates => {
4694
- if (!scrollCoordinates) {
4695
- return null;
4696
- }
4697
-
4698
- scrollCoordinates.set(scrollingElement, getScrollCoordinates(scrollingElement));
4699
- return new Map(scrollCoordinates);
4700
- });
4701
- }, []);
4702
- useEffect(() => {
4703
- const previousElements = prevElements.current;
4704
-
4705
- if (elements !== previousElements) {
4706
- cleanup(previousElements);
4707
- const entries = elements.map(element => {
4708
- const scrollableElement = getScrollableElement(element);
4709
-
4710
- if (scrollableElement) {
4711
- scrollableElement.addEventListener('scroll', handleScroll, {
4712
- passive: true
4713
- });
4714
- return [scrollableElement, getScrollCoordinates(scrollableElement)];
4715
- }
4716
-
4717
- return null;
4718
- }).filter(entry => entry != null);
4719
- setScrollCoordinates(entries.length ? new Map(entries) : null);
4720
- prevElements.current = elements;
4721
- }
4722
-
4723
- return () => {
4724
- cleanup(elements);
4725
- cleanup(previousElements);
4726
- };
4727
-
4728
- function cleanup(elements) {
4729
- elements.forEach(element => {
4730
- const scrollableElement = getScrollableElement(element);
4731
- scrollableElement == null ? void 0 : scrollableElement.removeEventListener('scroll', handleScroll);
4732
- });
4733
- }
4734
- }, [handleScroll, elements]);
4735
- return useMemo$1(() => {
4736
- if (elements.length) {
4737
- return scrollCoordinates ? Array.from(scrollCoordinates.values()).reduce((acc, coordinates) => add(acc, coordinates), defaultCoordinates) : getScrollOffsets(elements);
4738
- }
4739
-
4740
- return defaultCoordinates;
4741
- }, [elements, scrollCoordinates]);
4742
- }
4743
-
4744
- function useScrollOffsetsDelta(scrollOffsets, dependencies) {
4745
- if (dependencies === void 0) {
4746
- dependencies = [];
4747
- }
4748
-
4749
- const initialScrollOffsets = useRef(null);
4750
- useEffect(() => {
4751
- initialScrollOffsets.current = null;
4752
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
4753
- dependencies);
4754
- useEffect(() => {
4755
- const hasScrollOffsets = scrollOffsets !== defaultCoordinates;
4756
-
4757
- if (hasScrollOffsets && !initialScrollOffsets.current) {
4758
- initialScrollOffsets.current = scrollOffsets;
4759
- }
4760
-
4761
- if (!hasScrollOffsets && initialScrollOffsets.current) {
4762
- initialScrollOffsets.current = null;
4763
- }
4764
- }, [scrollOffsets]);
4765
- return initialScrollOffsets.current ? subtract(scrollOffsets, initialScrollOffsets.current) : defaultCoordinates;
4766
- }
4767
-
4768
- function useSensorSetup(sensors) {
4769
- useEffect(() => {
4770
- if (!canUseDOM) {
4771
- return;
4772
- }
4773
-
4774
- const teardownFns = sensors.map(_ref => {
4775
- let {
4776
- sensor
4777
- } = _ref;
4778
- return sensor.setup == null ? void 0 : sensor.setup();
4779
- });
4780
- return () => {
4781
- for (const teardown of teardownFns) {
4782
- teardown == null ? void 0 : teardown();
4783
- }
4784
- };
4785
- }, // TO-DO: Sensors length could theoretically change which would not be a valid dependency
4786
- // eslint-disable-next-line react-hooks/exhaustive-deps
4787
- sensors.map(_ref2 => {
4788
- let {
4789
- sensor
4790
- } = _ref2;
4791
- return sensor;
4792
- }));
4793
- }
4794
-
4795
- function useSyntheticListeners(listeners, id) {
4796
- return useMemo$1(() => {
4797
- return listeners.reduce((acc, _ref) => {
4798
- let {
4799
- eventName,
4800
- handler
4801
- } = _ref;
4802
-
4803
- acc[eventName] = event => {
4804
- handler(event, id);
4805
- };
4806
-
4807
- return acc;
4808
- }, {});
4809
- }, [listeners, id]);
4810
- }
4811
-
4812
- function useWindowRect(element) {
4813
- return useMemo$1(() => element ? getWindowClientRect(element) : null, [element]);
4814
- }
4815
-
4816
- const defaultValue$2 = [];
4817
- function useRects(elements, measure) {
4818
- if (measure === void 0) {
4819
- measure = getClientRect;
4820
- }
4821
-
4822
- const [firstElement] = elements;
4823
- const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
4824
- const [rects, setRects] = useState(defaultValue$2);
4825
-
4826
- function measureRects() {
4827
- setRects(() => {
4828
- if (!elements.length) {
4829
- return defaultValue$2;
4830
- }
4831
-
4832
- return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
4833
- });
4834
- }
4835
-
4836
- const resizeObserver = useResizeObserver({
4837
- callback: measureRects
4838
- });
4839
- useIsomorphicLayoutEffect$1(() => {
4840
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
4841
- measureRects();
4842
- elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
4843
- }, [elements]);
4844
- return rects;
4845
- }
4846
-
4847
- function getMeasurableNode(node) {
4848
- if (!node) {
4849
- return null;
4850
- }
4851
-
4852
- if (node.children.length > 1) {
4853
- return node;
4854
- }
4855
-
4856
- const firstChild = node.children[0];
4857
- return isHTMLElement(firstChild) ? firstChild : node;
4858
- }
4859
-
4860
- function useDragOverlayMeasuring(_ref) {
4861
- let {
4862
- measure
4863
- } = _ref;
4864
- const [rect, setRect] = useState(null);
4865
- const handleResize = useCallback(entries => {
4866
- for (const {
4867
- target
4868
- } of entries) {
4869
- if (isHTMLElement(target)) {
4870
- setRect(rect => {
4871
- const newRect = measure(target);
4872
- return rect ? { ...rect,
4873
- width: newRect.width,
4874
- height: newRect.height
4875
- } : newRect;
4876
- });
4877
- break;
4878
- }
4879
- }
4880
- }, [measure]);
4881
- const resizeObserver = useResizeObserver({
4882
- callback: handleResize
4883
- });
4884
- const handleNodeChange = useCallback(element => {
4885
- const node = getMeasurableNode(element);
4886
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
4887
-
4888
- if (node) {
4889
- resizeObserver == null ? void 0 : resizeObserver.observe(node);
4890
- }
4891
-
4892
- setRect(node ? measure(node) : null);
4893
- }, [measure, resizeObserver]);
4894
- const [nodeRef, setRef] = useNodeRef(handleNodeChange);
4895
- return useMemo$1(() => ({
4896
- nodeRef,
4897
- rect,
4898
- setRef
4899
- }), [rect, nodeRef, setRef]);
4900
- }
4901
-
4902
- const defaultSensors = [{
4903
- sensor: PointerSensor,
4904
- options: {}
4905
- }, {
4906
- sensor: KeyboardSensor,
4907
- options: {}
4908
- }];
4909
- const defaultData = {
4910
- current: {}
4911
- };
4912
- const defaultMeasuringConfiguration = {
4913
- draggable: {
4914
- measure: getTransformAgnosticClientRect
4915
- },
4916
- droppable: {
4917
- measure: getTransformAgnosticClientRect,
4918
- strategy: MeasuringStrategy.WhileDragging,
4919
- frequency: MeasuringFrequency.Optimized
4920
- },
4921
- dragOverlay: {
4922
- measure: getClientRect
4923
- }
4924
- };
4925
-
4926
- class DroppableContainersMap extends Map {
4927
- get(id) {
4928
- var _super$get;
4929
-
4930
- return id != null ? (_super$get = super.get(id)) != null ? _super$get : undefined : undefined;
4931
- }
4932
-
4933
- toArray() {
4934
- return Array.from(this.values());
4935
- }
4936
-
4937
- getEnabled() {
4938
- return this.toArray().filter(_ref => {
4939
- let {
4940
- disabled
4941
- } = _ref;
4942
- return !disabled;
4943
- });
4944
- }
4945
-
4946
- getNodeFor(id) {
4947
- var _this$get$node$curren, _this$get;
4948
-
4949
- return (_this$get$node$curren = (_this$get = this.get(id)) == null ? void 0 : _this$get.node.current) != null ? _this$get$node$curren : undefined;
4950
- }
4951
-
4952
- }
4953
-
4954
- const defaultPublicContext = {
4955
- activatorEvent: null,
4956
- active: null,
4957
- activeNode: null,
4958
- activeNodeRect: null,
4959
- collisions: null,
4960
- containerNodeRect: null,
4961
- draggableNodes: /*#__PURE__*/new Map(),
4962
- droppableRects: /*#__PURE__*/new Map(),
4963
- droppableContainers: /*#__PURE__*/new DroppableContainersMap(),
4964
- over: null,
4965
- dragOverlay: {
4966
- nodeRef: {
4967
- current: null
4968
- },
4969
- rect: null,
4970
- setRef: noop$2
4971
- },
4972
- scrollableAncestors: [],
4973
- scrollableAncestorRects: [],
4974
- measuringConfiguration: defaultMeasuringConfiguration,
4975
- measureDroppableContainers: noop$2,
4976
- windowRect: null,
4977
- measuringScheduled: false
4978
- };
4979
- const defaultInternalContext = {
4980
- activatorEvent: null,
4981
- activators: [],
4982
- active: null,
4983
- activeNodeRect: null,
4984
- ariaDescribedById: {
4985
- draggable: ''
4986
- },
4987
- dispatch: noop$2,
4988
- draggableNodes: /*#__PURE__*/new Map(),
4989
- over: null,
4990
- measureDroppableContainers: noop$2
4991
- };
4992
- const InternalContext = /*#__PURE__*/createContext(defaultInternalContext);
4993
- const PublicContext = /*#__PURE__*/createContext(defaultPublicContext);
4994
-
4995
- function getInitialState() {
4996
- return {
4997
- draggable: {
4998
- active: null,
4999
- initialCoordinates: {
5000
- x: 0,
5001
- y: 0
5002
- },
5003
- nodes: new Map(),
5004
- translate: {
5005
- x: 0,
5006
- y: 0
5007
- }
5008
- },
5009
- droppable: {
5010
- containers: new DroppableContainersMap()
5011
- }
5012
- };
5013
- }
5014
- function reducer(state, action) {
5015
- switch (action.type) {
5016
- case Action.DragStart:
5017
- return { ...state,
5018
- draggable: { ...state.draggable,
5019
- initialCoordinates: action.initialCoordinates,
5020
- active: action.active
5021
- }
5022
- };
5023
-
5024
- case Action.DragMove:
5025
- if (state.draggable.active == null) {
5026
- return state;
5027
- }
5028
-
5029
- return { ...state,
5030
- draggable: { ...state.draggable,
5031
- translate: {
5032
- x: action.coordinates.x - state.draggable.initialCoordinates.x,
5033
- y: action.coordinates.y - state.draggable.initialCoordinates.y
5034
- }
5035
- }
5036
- };
5037
-
5038
- case Action.DragEnd:
5039
- case Action.DragCancel:
5040
- return { ...state,
5041
- draggable: { ...state.draggable,
5042
- active: null,
5043
- initialCoordinates: {
5044
- x: 0,
5045
- y: 0
5046
- },
5047
- translate: {
5048
- x: 0,
5049
- y: 0
5050
- }
5051
- }
5052
- };
5053
-
5054
- case Action.RegisterDroppable:
5055
- {
5056
- const {
5057
- element
5058
- } = action;
5059
- const {
5060
- id
5061
- } = element;
5062
- const containers = new DroppableContainersMap(state.droppable.containers);
5063
- containers.set(id, element);
5064
- return { ...state,
5065
- droppable: { ...state.droppable,
5066
- containers
5067
- }
5068
- };
5069
- }
5070
-
5071
- case Action.SetDroppableDisabled:
5072
- {
5073
- const {
5074
- id,
5075
- key,
5076
- disabled
5077
- } = action;
5078
- const element = state.droppable.containers.get(id);
5079
-
5080
- if (!element || key !== element.key) {
5081
- return state;
5082
- }
5083
-
5084
- const containers = new DroppableContainersMap(state.droppable.containers);
5085
- containers.set(id, { ...element,
5086
- disabled
5087
- });
5088
- return { ...state,
5089
- droppable: { ...state.droppable,
5090
- containers
5091
- }
5092
- };
5093
- }
5094
-
5095
- case Action.UnregisterDroppable:
5096
- {
5097
- const {
5098
- id,
5099
- key
5100
- } = action;
5101
- const element = state.droppable.containers.get(id);
5102
-
5103
- if (!element || key !== element.key) {
5104
- return state;
5105
- }
5106
-
5107
- const containers = new DroppableContainersMap(state.droppable.containers);
5108
- containers.delete(id);
5109
- return { ...state,
5110
- droppable: { ...state.droppable,
5111
- containers
5112
- }
5113
- };
5114
- }
5115
-
5116
- default:
5117
- {
5118
- return state;
5119
- }
5120
- }
5121
- }
5122
-
5123
- function RestoreFocus(_ref) {
5124
- let {
5125
- disabled
5126
- } = _ref;
5127
- const {
5128
- active,
5129
- activatorEvent,
5130
- draggableNodes
5131
- } = useContext(InternalContext);
5132
- const previousActivatorEvent = usePrevious(activatorEvent);
5133
- const previousActiveId = usePrevious(active == null ? void 0 : active.id); // Restore keyboard focus on the activator node
5134
-
5135
- useEffect(() => {
5136
- if (disabled) {
5137
- return;
5138
- }
5139
-
5140
- if (!activatorEvent && previousActivatorEvent && previousActiveId != null) {
5141
- if (!isKeyboardEvent(previousActivatorEvent)) {
5142
- return;
5143
- }
5144
-
5145
- if (document.activeElement === previousActivatorEvent.target) {
5146
- // No need to restore focus
5147
- return;
5148
- }
5149
-
5150
- const draggableNode = draggableNodes.get(previousActiveId);
5151
-
5152
- if (!draggableNode) {
5153
- return;
5154
- }
5155
-
5156
- const {
5157
- activatorNode,
5158
- node
5159
- } = draggableNode;
5160
-
5161
- if (!activatorNode.current && !node.current) {
5162
- return;
5163
- }
5164
-
5165
- requestAnimationFrame(() => {
5166
- for (const element of [activatorNode.current, node.current]) {
5167
- if (!element) {
5168
- continue;
5169
- }
5170
-
5171
- const focusableNode = findFirstFocusableNode(element);
5172
-
5173
- if (focusableNode) {
5174
- focusableNode.focus();
5175
- break;
5176
- }
5177
- }
5178
- });
5179
- }
5180
- }, [activatorEvent, disabled, draggableNodes, previousActiveId, previousActivatorEvent]);
5181
- return null;
5182
- }
5183
-
5184
- function applyModifiers(modifiers, _ref) {
5185
- let {
5186
- transform,
5187
- ...args
5188
- } = _ref;
5189
- return modifiers != null && modifiers.length ? modifiers.reduce((accumulator, modifier) => {
5190
- return modifier({
5191
- transform: accumulator,
5192
- ...args
5193
- });
5194
- }, transform) : transform;
5195
- }
5196
-
5197
- function useMeasuringConfiguration(config) {
5198
- return useMemo$1(() => ({
5199
- draggable: { ...defaultMeasuringConfiguration.draggable,
5200
- ...(config == null ? void 0 : config.draggable)
5201
- },
5202
- droppable: { ...defaultMeasuringConfiguration.droppable,
5203
- ...(config == null ? void 0 : config.droppable)
5204
- },
5205
- dragOverlay: { ...defaultMeasuringConfiguration.dragOverlay,
5206
- ...(config == null ? void 0 : config.dragOverlay)
5207
- }
5208
- }), // eslint-disable-next-line react-hooks/exhaustive-deps
5209
- [config == null ? void 0 : config.draggable, config == null ? void 0 : config.droppable, config == null ? void 0 : config.dragOverlay]);
5210
- }
5211
-
5212
- function useLayoutShiftScrollCompensation(_ref) {
5213
- let {
5214
- activeNode,
5215
- measure,
5216
- initialRect,
5217
- config = true
5218
- } = _ref;
5219
- const initialized = useRef(false);
5220
- const {
5221
- x,
5222
- y
5223
- } = typeof config === 'boolean' ? {
5224
- x: config,
5225
- y: config
5226
- } : config;
5227
- useIsomorphicLayoutEffect$1(() => {
5228
- const disabled = !x && !y;
5229
-
5230
- if (disabled || !activeNode) {
5231
- initialized.current = false;
5232
- return;
5233
- }
5234
-
5235
- if (initialized.current || !initialRect) {
5236
- // Return early if layout shift scroll compensation was already attempted
5237
- // or if there is no initialRect to compare to.
5238
- return;
5239
- } // Get the most up to date node ref for the active draggable
5240
-
5241
-
5242
- const node = activeNode == null ? void 0 : activeNode.node.current;
5243
-
5244
- if (!node || node.isConnected === false) {
5245
- // Return early if there is no attached node ref or if the node is
5246
- // disconnected from the document.
5247
- return;
5248
- }
5249
-
5250
- const rect = measure(node);
5251
- const rectDelta = getRectDelta(rect, initialRect);
5252
-
5253
- if (!x) {
5254
- rectDelta.x = 0;
5255
- }
5256
-
5257
- if (!y) {
5258
- rectDelta.y = 0;
5259
- } // Only perform layout shift scroll compensation once
5260
-
5261
-
5262
- initialized.current = true;
5263
-
5264
- if (Math.abs(rectDelta.x) > 0 || Math.abs(rectDelta.y) > 0) {
5265
- const firstScrollableAncestor = getFirstScrollableAncestor(node);
5266
-
5267
- if (firstScrollableAncestor) {
5268
- firstScrollableAncestor.scrollBy({
5269
- top: rectDelta.y,
5270
- left: rectDelta.x
5271
- });
5272
- }
5273
- }
5274
- }, [activeNode, x, y, initialRect, measure]);
5275
- }
5276
-
5277
- const ActiveDraggableContext = /*#__PURE__*/createContext({ ...defaultCoordinates,
5278
- scaleX: 1,
5279
- scaleY: 1
5280
- });
5281
- var Status;
5282
-
5283
- (function (Status) {
5284
- Status[Status["Uninitialized"] = 0] = "Uninitialized";
5285
- Status[Status["Initializing"] = 1] = "Initializing";
5286
- Status[Status["Initialized"] = 2] = "Initialized";
5287
- })(Status || (Status = {}));
5288
-
5289
- const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
5290
- var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
5291
-
5292
- let {
5293
- id,
5294
- accessibility,
5295
- autoScroll = true,
5296
- children,
5297
- sensors = defaultSensors,
5298
- collisionDetection = rectIntersection,
5299
- measuring,
5300
- modifiers,
5301
- ...props
5302
- } = _ref;
5303
- const store = useReducer(reducer, undefined, getInitialState);
5304
- const [state, dispatch] = store;
5305
- const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
5306
- const [status, setStatus] = useState(Status.Uninitialized);
5307
- const isInitialized = status === Status.Initialized;
5308
- const {
5309
- draggable: {
5310
- active: activeId,
5311
- nodes: draggableNodes,
5312
- translate
5313
- },
5314
- droppable: {
5315
- containers: droppableContainers
5316
- }
5317
- } = state;
5318
- const node = activeId != null ? draggableNodes.get(activeId) : null;
5319
- const activeRects = useRef({
5320
- initial: null,
5321
- translated: null
5322
- });
5323
- const active = useMemo$1(() => {
5324
- var _node$data;
5325
-
5326
- return activeId != null ? {
5327
- id: activeId,
5328
- // It's possible for the active node to unmount while dragging
5329
- data: (_node$data = node == null ? void 0 : node.data) != null ? _node$data : defaultData,
5330
- rect: activeRects
5331
- } : null;
5332
- }, [activeId, node]);
5333
- const activeRef = useRef(null);
5334
- const [activeSensor, setActiveSensor] = useState(null);
5335
- const [activatorEvent, setActivatorEvent] = useState(null);
5336
- const latestProps = useLatestValue(props, Object.values(props));
5337
- const draggableDescribedById = useUniqueId("DndDescribedBy", id);
5338
- const enabledDroppableContainers = useMemo$1(() => droppableContainers.getEnabled(), [droppableContainers]);
5339
- const measuringConfiguration = useMeasuringConfiguration(measuring);
5340
- const {
5341
- droppableRects,
5342
- measureDroppableContainers,
5343
- measuringScheduled
5344
- } = useDroppableMeasuring(enabledDroppableContainers, {
5345
- dragging: isInitialized,
5346
- dependencies: [translate.x, translate.y],
5347
- config: measuringConfiguration.droppable
5348
- });
5349
- const activeNode = useCachedNode(draggableNodes, activeId);
5350
- const activationCoordinates = useMemo$1(() => activatorEvent ? getEventCoordinates(activatorEvent) : null, [activatorEvent]);
5351
- const autoScrollOptions = getAutoScrollerOptions();
5352
- const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
5353
- useLayoutShiftScrollCompensation({
5354
- activeNode: activeId != null ? draggableNodes.get(activeId) : null,
5355
- config: autoScrollOptions.layoutShiftCompensation,
5356
- initialRect: initialActiveNodeRect,
5357
- measure: measuringConfiguration.draggable.measure
5358
- });
5359
- const activeNodeRect = useRect(activeNode, measuringConfiguration.draggable.measure, initialActiveNodeRect);
5360
- const containerNodeRect = useRect(activeNode ? activeNode.parentElement : null);
5361
- const sensorContext = useRef({
5362
- activatorEvent: null,
5363
- active: null,
5364
- activeNode,
5365
- collisionRect: null,
5366
- collisions: null,
5367
- droppableRects,
5368
- draggableNodes,
5369
- draggingNode: null,
5370
- draggingNodeRect: null,
5371
- droppableContainers,
5372
- over: null,
5373
- scrollableAncestors: [],
5374
- scrollAdjustedTranslate: null
5375
- });
5376
- const overNode = droppableContainers.getNodeFor((_sensorContext$curren = sensorContext.current.over) == null ? void 0 : _sensorContext$curren.id);
5377
- const dragOverlay = useDragOverlayMeasuring({
5378
- measure: measuringConfiguration.dragOverlay.measure
5379
- }); // Use the rect of the drag overlay if it is mounted
5380
-
5381
- const draggingNode = (_dragOverlay$nodeRef$ = dragOverlay.nodeRef.current) != null ? _dragOverlay$nodeRef$ : activeNode;
5382
- const draggingNodeRect = isInitialized ? (_dragOverlay$rect = dragOverlay.rect) != null ? _dragOverlay$rect : activeNodeRect : null;
5383
- const usesDragOverlay = Boolean(dragOverlay.nodeRef.current && dragOverlay.rect); // The delta between the previous and new position of the draggable node
5384
- // is only relevant when there is no drag overlay
5385
-
5386
- const nodeRectDelta = useRectDelta(usesDragOverlay ? null : activeNodeRect); // Get the window rect of the dragging node
5387
-
5388
- const windowRect = useWindowRect(draggingNode ? getWindow(draggingNode) : null); // Get scrollable ancestors of the dragging node
5389
-
5390
- const scrollableAncestors = useScrollableAncestors(isInitialized ? overNode != null ? overNode : activeNode : null);
5391
- const scrollableAncestorRects = useRects(scrollableAncestors); // Apply modifiers
5392
-
5393
- const modifiedTranslate = applyModifiers(modifiers, {
5394
- transform: {
5395
- x: translate.x - nodeRectDelta.x,
5396
- y: translate.y - nodeRectDelta.y,
5397
- scaleX: 1,
5398
- scaleY: 1
5399
- },
5400
- activatorEvent,
5401
- active,
5402
- activeNodeRect,
5403
- containerNodeRect,
5404
- draggingNodeRect,
5405
- over: sensorContext.current.over,
5406
- overlayNodeRect: dragOverlay.rect,
5407
- scrollableAncestors,
5408
- scrollableAncestorRects,
5409
- windowRect
5410
- });
5411
- const pointerCoordinates = activationCoordinates ? add(activationCoordinates, translate) : null;
5412
- const scrollOffsets = useScrollOffsets(scrollableAncestors); // Represents the scroll delta since dragging was initiated
5413
-
5414
- const scrollAdjustment = useScrollOffsetsDelta(scrollOffsets); // Represents the scroll delta since the last time the active node rect was measured
5415
-
5416
- const activeNodeScrollDelta = useScrollOffsetsDelta(scrollOffsets, [activeNodeRect]);
5417
- const scrollAdjustedTranslate = add(modifiedTranslate, scrollAdjustment);
5418
- const collisionRect = draggingNodeRect ? getAdjustedRect(draggingNodeRect, modifiedTranslate) : null;
5419
- const collisions = active && collisionRect ? collisionDetection({
5420
- active,
5421
- collisionRect,
5422
- droppableRects,
5423
- droppableContainers: enabledDroppableContainers,
5424
- pointerCoordinates
5425
- }) : null;
5426
- const overId = getFirstCollision(collisions, 'id');
5427
- const [over, setOver] = useState(null); // When there is no drag overlay used, we need to account for the
5428
- // window scroll delta
5429
-
5430
- const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
5431
- const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
5432
- const activeSensorRef = useRef(null);
5433
- const instantiateSensor = useCallback((event, _ref2) => {
5434
- let {
5435
- sensor: Sensor,
5436
- options
5437
- } = _ref2;
5438
-
5439
- if (activeRef.current == null) {
5440
- return;
5441
- }
5442
-
5443
- const activeNode = draggableNodes.get(activeRef.current);
5444
-
5445
- if (!activeNode) {
5446
- return;
5447
- }
5448
-
5449
- const activatorEvent = event.nativeEvent;
5450
- const sensorInstance = new Sensor({
5451
- active: activeRef.current,
5452
- activeNode,
5453
- event: activatorEvent,
5454
- options,
5455
- // Sensors need to be instantiated with refs for arguments that change over time
5456
- // otherwise they are frozen in time with the stale arguments
5457
- context: sensorContext,
5458
-
5459
- onAbort(id) {
5460
- const draggableNode = draggableNodes.get(id);
5461
-
5462
- if (!draggableNode) {
5463
- return;
5464
- }
5465
-
5466
- const {
5467
- onDragAbort
5468
- } = latestProps.current;
5469
- const event = {
5470
- id
5471
- };
5472
- onDragAbort == null ? void 0 : onDragAbort(event);
5473
- dispatchMonitorEvent({
5474
- type: 'onDragAbort',
5475
- event
5476
- });
5477
- },
5478
-
5479
- onPending(id, constraint, initialCoordinates, offset) {
5480
- const draggableNode = draggableNodes.get(id);
5481
-
5482
- if (!draggableNode) {
5483
- return;
5484
- }
5485
-
5486
- const {
5487
- onDragPending
5488
- } = latestProps.current;
5489
- const event = {
5490
- id,
5491
- constraint,
5492
- initialCoordinates,
5493
- offset
5494
- };
5495
- onDragPending == null ? void 0 : onDragPending(event);
5496
- dispatchMonitorEvent({
5497
- type: 'onDragPending',
5498
- event
5499
- });
5500
- },
5501
-
5502
- onStart(initialCoordinates) {
5503
- const id = activeRef.current;
5504
-
5505
- if (id == null) {
5506
- return;
5507
- }
5508
-
5509
- const draggableNode = draggableNodes.get(id);
5510
-
5511
- if (!draggableNode) {
5512
- return;
5513
- }
5514
-
5515
- const {
5516
- onDragStart
5517
- } = latestProps.current;
5518
- const event = {
5519
- activatorEvent,
5520
- active: {
5521
- id,
5522
- data: draggableNode.data,
5523
- rect: activeRects
5524
- }
5525
- };
5526
- unstable_batchedUpdates(() => {
5527
- onDragStart == null ? void 0 : onDragStart(event);
5528
- setStatus(Status.Initializing);
5529
- dispatch({
5530
- type: Action.DragStart,
5531
- initialCoordinates,
5532
- active: id
5533
- });
5534
- dispatchMonitorEvent({
5535
- type: 'onDragStart',
5536
- event
5537
- });
5538
- setActiveSensor(activeSensorRef.current);
5539
- setActivatorEvent(activatorEvent);
5540
- });
5541
- },
5542
-
5543
- onMove(coordinates) {
5544
- dispatch({
5545
- type: Action.DragMove,
5546
- coordinates
5547
- });
5548
- },
5549
-
5550
- onEnd: createHandler(Action.DragEnd),
5551
- onCancel: createHandler(Action.DragCancel)
5552
- });
5553
- activeSensorRef.current = sensorInstance;
5554
-
5555
- function createHandler(type) {
5556
- return async function handler() {
5557
- const {
5558
- active,
5559
- collisions,
5560
- over,
5561
- scrollAdjustedTranslate
5562
- } = sensorContext.current;
5563
- let event = null;
5564
-
5565
- if (active && scrollAdjustedTranslate) {
5566
- const {
5567
- cancelDrop
5568
- } = latestProps.current;
5569
- event = {
5570
- activatorEvent,
5571
- active: active,
5572
- collisions,
5573
- delta: scrollAdjustedTranslate,
5574
- over
5575
- };
5576
-
5577
- if (type === Action.DragEnd && typeof cancelDrop === 'function') {
5578
- const shouldCancel = await Promise.resolve(cancelDrop(event));
5579
-
5580
- if (shouldCancel) {
5581
- type = Action.DragCancel;
5582
- }
5583
- }
5584
- }
5585
-
5586
- activeRef.current = null;
5587
- unstable_batchedUpdates(() => {
5588
- dispatch({
5589
- type
5590
- });
5591
- setStatus(Status.Uninitialized);
5592
- setOver(null);
5593
- setActiveSensor(null);
5594
- setActivatorEvent(null);
5595
- activeSensorRef.current = null;
5596
- const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
5597
-
5598
- if (event) {
5599
- const handler = latestProps.current[eventName];
5600
- handler == null ? void 0 : handler(event);
5601
- dispatchMonitorEvent({
5602
- type: eventName,
5603
- event
5604
- });
5605
- }
5606
- });
5607
- };
5608
- }
5609
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
5610
- [draggableNodes]);
5611
- const bindActivatorToSensorInstantiator = useCallback((handler, sensor) => {
5612
- return (event, active) => {
5613
- const nativeEvent = event.nativeEvent;
5614
- const activeDraggableNode = draggableNodes.get(active);
5615
-
5616
- if ( // Another sensor is already instantiating
5617
- activeRef.current !== null || // No active draggable
5618
- !activeDraggableNode || // Event has already been captured
5619
- nativeEvent.dndKit || nativeEvent.defaultPrevented) {
5620
- return;
5621
- }
5622
-
5623
- const activationContext = {
5624
- active: activeDraggableNode
5625
- };
5626
- const shouldActivate = handler(event, sensor.options, activationContext);
5627
-
5628
- if (shouldActivate === true) {
5629
- nativeEvent.dndKit = {
5630
- capturedBy: sensor.sensor
5631
- };
5632
- activeRef.current = active;
5633
- instantiateSensor(event, sensor);
5634
- }
5635
- };
5636
- }, [draggableNodes, instantiateSensor]);
5637
- const activators = useCombineActivators(sensors, bindActivatorToSensorInstantiator);
5638
- useSensorSetup(sensors);
5639
- useIsomorphicLayoutEffect$1(() => {
5640
- if (activeNodeRect && status === Status.Initializing) {
5641
- setStatus(Status.Initialized);
5642
- }
5643
- }, [activeNodeRect, status]);
5644
- useEffect(() => {
5645
- const {
5646
- onDragMove
5647
- } = latestProps.current;
5648
- const {
5649
- active,
5650
- activatorEvent,
5651
- collisions,
5652
- over
5653
- } = sensorContext.current;
5654
-
5655
- if (!active || !activatorEvent) {
5656
- return;
5657
- }
5658
-
5659
- const event = {
5660
- active,
5661
- activatorEvent,
5662
- collisions,
5663
- delta: {
5664
- x: scrollAdjustedTranslate.x,
5665
- y: scrollAdjustedTranslate.y
5666
- },
5667
- over
5668
- };
5669
- unstable_batchedUpdates(() => {
5670
- onDragMove == null ? void 0 : onDragMove(event);
5671
- dispatchMonitorEvent({
5672
- type: 'onDragMove',
5673
- event
5674
- });
5675
- });
5676
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
5677
- [scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]);
5678
- useEffect(() => {
5679
- const {
5680
- active,
5681
- activatorEvent,
5682
- collisions,
5683
- droppableContainers,
5684
- scrollAdjustedTranslate
5685
- } = sensorContext.current;
5686
-
5687
- if (!active || activeRef.current == null || !activatorEvent || !scrollAdjustedTranslate) {
5688
- return;
5689
- }
5690
-
5691
- const {
5692
- onDragOver
5693
- } = latestProps.current;
5694
- const overContainer = droppableContainers.get(overId);
5695
- const over = overContainer && overContainer.rect.current ? {
5696
- id: overContainer.id,
5697
- rect: overContainer.rect.current,
5698
- data: overContainer.data,
5699
- disabled: overContainer.disabled
5700
- } : null;
5701
- const event = {
5702
- active,
5703
- activatorEvent,
5704
- collisions,
5705
- delta: {
5706
- x: scrollAdjustedTranslate.x,
5707
- y: scrollAdjustedTranslate.y
5708
- },
5709
- over
5710
- };
5711
- unstable_batchedUpdates(() => {
5712
- setOver(over);
5713
- onDragOver == null ? void 0 : onDragOver(event);
5714
- dispatchMonitorEvent({
5715
- type: 'onDragOver',
5716
- event
5717
- });
5718
- });
5719
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
5720
- [overId]);
5721
- useIsomorphicLayoutEffect$1(() => {
5722
- sensorContext.current = {
5723
- activatorEvent,
5724
- active,
5725
- activeNode,
5726
- collisionRect,
5727
- collisions,
5728
- droppableRects,
5729
- draggableNodes,
5730
- draggingNode,
5731
- draggingNodeRect,
5732
- droppableContainers,
5733
- over,
5734
- scrollableAncestors,
5735
- scrollAdjustedTranslate
5736
- };
5737
- activeRects.current = {
5738
- initial: draggingNodeRect,
5739
- translated: collisionRect
5740
- };
5741
- }, [active, activeNode, collisions, collisionRect, draggableNodes, draggingNode, draggingNodeRect, droppableRects, droppableContainers, over, scrollableAncestors, scrollAdjustedTranslate]);
5742
- useAutoScroller({ ...autoScrollOptions,
5743
- delta: translate,
5744
- draggingRect: collisionRect,
5745
- pointerCoordinates,
5746
- scrollableAncestors,
5747
- scrollableAncestorRects
5748
- });
5749
- const publicContext = useMemo$1(() => {
5750
- const context = {
5751
- active,
5752
- activeNode,
5753
- activeNodeRect,
5754
- activatorEvent,
5755
- collisions,
5756
- containerNodeRect,
5757
- dragOverlay,
5758
- draggableNodes,
5759
- droppableContainers,
5760
- droppableRects,
5761
- over,
5762
- measureDroppableContainers,
5763
- scrollableAncestors,
5764
- scrollableAncestorRects,
5765
- measuringConfiguration,
5766
- measuringScheduled,
5767
- windowRect
5768
- };
5769
- return context;
5770
- }, [active, activeNode, activeNodeRect, activatorEvent, collisions, containerNodeRect, dragOverlay, draggableNodes, droppableContainers, droppableRects, over, measureDroppableContainers, scrollableAncestors, scrollableAncestorRects, measuringConfiguration, measuringScheduled, windowRect]);
5771
- const internalContext = useMemo$1(() => {
5772
- const context = {
5773
- activatorEvent,
5774
- activators,
5775
- active,
5776
- activeNodeRect,
5777
- ariaDescribedById: {
5778
- draggable: draggableDescribedById
5779
- },
5780
- dispatch,
5781
- draggableNodes,
5782
- over,
5783
- measureDroppableContainers
5784
- };
5785
- return context;
5786
- }, [activatorEvent, activators, active, activeNodeRect, dispatch, draggableDescribedById, draggableNodes, over, measureDroppableContainers]);
5787
- return React__default.createElement(DndMonitorContext.Provider, {
5788
- value: registerMonitorListener
5789
- }, React__default.createElement(InternalContext.Provider, {
5790
- value: internalContext
5791
- }, React__default.createElement(PublicContext.Provider, {
5792
- value: publicContext
5793
- }, React__default.createElement(ActiveDraggableContext.Provider, {
5794
- value: transform
5795
- }, children)), React__default.createElement(RestoreFocus, {
5796
- disabled: (accessibility == null ? void 0 : accessibility.restoreFocus) === false
5797
- })), React__default.createElement(Accessibility, { ...accessibility,
5798
- hiddenTextDescribedById: draggableDescribedById
5799
- }));
5800
-
5801
- function getAutoScrollerOptions() {
5802
- const activeSensorDisablesAutoscroll = (activeSensor == null ? void 0 : activeSensor.autoScrollEnabled) === false;
5803
- const autoScrollGloballyDisabled = typeof autoScroll === 'object' ? autoScroll.enabled === false : autoScroll === false;
5804
- const enabled = isInitialized && !activeSensorDisablesAutoscroll && !autoScrollGloballyDisabled;
5805
-
5806
- if (typeof autoScroll === 'object') {
5807
- return { ...autoScroll,
5808
- enabled
5809
- };
5810
- }
5811
-
5812
- return {
5813
- enabled
5814
- };
5815
- }
5816
- });
5817
-
5818
- const NullContext = /*#__PURE__*/createContext(null);
5819
- const defaultRole = 'button';
5820
- const ID_PREFIX$1 = 'Draggable';
5821
- function useDraggable(_ref) {
5822
- let {
5823
- id,
5824
- data,
5825
- disabled = false,
5826
- attributes
5827
- } = _ref;
5828
- const key = useUniqueId(ID_PREFIX$1);
5829
- const {
5830
- activators,
5831
- activatorEvent,
5832
- active,
5833
- activeNodeRect,
5834
- ariaDescribedById,
5835
- draggableNodes,
5836
- over
5837
- } = useContext(InternalContext);
5838
- const {
5839
- role = defaultRole,
5840
- roleDescription = 'draggable',
5841
- tabIndex = 0
5842
- } = attributes != null ? attributes : {};
5843
- const isDragging = (active == null ? void 0 : active.id) === id;
5844
- const transform = useContext(isDragging ? ActiveDraggableContext : NullContext);
5845
- const [node, setNodeRef] = useNodeRef();
5846
- const [activatorNode, setActivatorNodeRef] = useNodeRef();
5847
- const listeners = useSyntheticListeners(activators, id);
5848
- const dataRef = useLatestValue(data);
5849
- useIsomorphicLayoutEffect$1(() => {
5850
- draggableNodes.set(id, {
5851
- id,
5852
- key,
5853
- node,
5854
- activatorNode,
5855
- data: dataRef
5856
- });
5857
- return () => {
5858
- const node = draggableNodes.get(id);
5859
-
5860
- if (node && node.key === key) {
5861
- draggableNodes.delete(id);
5862
- }
5863
- };
5864
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
5865
- [draggableNodes, id]);
5866
- const memoizedAttributes = useMemo$1(() => ({
5867
- role,
5868
- tabIndex,
5869
- 'aria-disabled': disabled,
5870
- 'aria-pressed': isDragging && role === defaultRole ? true : undefined,
5871
- 'aria-roledescription': roleDescription,
5872
- 'aria-describedby': ariaDescribedById.draggable
5873
- }), [disabled, role, tabIndex, isDragging, roleDescription, ariaDescribedById.draggable]);
5874
- return {
5875
- active,
5876
- activatorEvent,
5877
- activeNodeRect,
5878
- attributes: memoizedAttributes,
5879
- isDragging,
5880
- listeners: disabled ? undefined : listeners,
5881
- node,
5882
- over,
5883
- setNodeRef,
5884
- setActivatorNodeRef,
5885
- transform
5886
- };
5887
- }
5888
-
5889
- function useDndContext() {
5890
- return useContext(PublicContext);
5891
- }
5892
-
5893
- const ID_PREFIX$1$1 = 'Droppable';
5894
- const defaultResizeObserverConfig = {
5895
- timeout: 25
5896
- };
5897
- function useDroppable(_ref) {
5898
- let {
5899
- data,
5900
- disabled = false,
5901
- id,
5902
- resizeObserverConfig
5903
- } = _ref;
5904
- const key = useUniqueId(ID_PREFIX$1$1);
5905
- const {
5906
- active,
5907
- dispatch,
5908
- over,
5909
- measureDroppableContainers
5910
- } = useContext(InternalContext);
5911
- const previous = useRef({
5912
- disabled
5913
- });
5914
- const resizeObserverConnected = useRef(false);
5915
- const rect = useRef(null);
5916
- const callbackId = useRef(null);
5917
- const {
5918
- disabled: resizeObserverDisabled,
5919
- updateMeasurementsFor,
5920
- timeout: resizeObserverTimeout
5921
- } = { ...defaultResizeObserverConfig,
5922
- ...resizeObserverConfig
5923
- };
5924
- const ids = useLatestValue(updateMeasurementsFor != null ? updateMeasurementsFor : id);
5925
- const handleResize = useCallback(() => {
5926
- if (!resizeObserverConnected.current) {
5927
- // ResizeObserver invokes the `handleResize` callback as soon as `observe` is called,
5928
- // assuming the element is rendered and displayed.
5929
- resizeObserverConnected.current = true;
5930
- return;
5931
- }
5932
-
5933
- if (callbackId.current != null) {
5934
- clearTimeout(callbackId.current);
5935
- }
5936
-
5937
- callbackId.current = setTimeout(() => {
5938
- measureDroppableContainers(Array.isArray(ids.current) ? ids.current : [ids.current]);
5939
- callbackId.current = null;
5940
- }, resizeObserverTimeout);
5941
- }, //eslint-disable-next-line react-hooks/exhaustive-deps
5942
- [resizeObserverTimeout]);
5943
- const resizeObserver = useResizeObserver({
5944
- callback: handleResize,
5945
- disabled: resizeObserverDisabled || !active
5946
- });
5947
- const handleNodeChange = useCallback((newElement, previousElement) => {
5948
- if (!resizeObserver) {
5949
- return;
5950
- }
5951
-
5952
- if (previousElement) {
5953
- resizeObserver.unobserve(previousElement);
5954
- resizeObserverConnected.current = false;
5955
- }
5956
-
5957
- if (newElement) {
5958
- resizeObserver.observe(newElement);
5959
- }
5960
- }, [resizeObserver]);
5961
- const [nodeRef, setNodeRef] = useNodeRef(handleNodeChange);
5962
- const dataRef = useLatestValue(data);
5963
- useEffect(() => {
5964
- if (!resizeObserver || !nodeRef.current) {
5965
- return;
5966
- }
5967
-
5968
- resizeObserver.disconnect();
5969
- resizeObserverConnected.current = false;
5970
- resizeObserver.observe(nodeRef.current);
5971
- }, [nodeRef, resizeObserver]);
5972
- useEffect(() => {
5973
- dispatch({
5974
- type: Action.RegisterDroppable,
5975
- element: {
5976
- id,
5977
- key,
5978
- disabled,
5979
- node: nodeRef,
5980
- rect,
5981
- data: dataRef
5982
- }
5983
- });
5984
- return () => dispatch({
5985
- type: Action.UnregisterDroppable,
5986
- key,
5987
- id
5988
- });
5989
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
5990
- [id]);
5991
- useEffect(() => {
5992
- if (disabled !== previous.current.disabled) {
5993
- dispatch({
5994
- type: Action.SetDroppableDisabled,
5995
- id,
5996
- key,
5997
- disabled
5998
- });
5999
- previous.current.disabled = disabled;
6000
- }
6001
- }, [id, key, disabled, dispatch]);
6002
- return {
6003
- active,
6004
- rect,
6005
- isOver: (over == null ? void 0 : over.id) === id,
6006
- node: nodeRef,
6007
- over,
6008
- setNodeRef
6009
- };
6010
- }
6011
-
6012
- /**
6013
- * Move an array item to a different position. Returns a new array with the item moved to the new position.
6014
- */
6015
- function arrayMove(array, from, to) {
6016
- const newArray = array.slice();
6017
- newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
6018
- return newArray;
6019
- }
6020
-
6021
- function getSortedRects(items, rects) {
6022
- return items.reduce((accumulator, id, index) => {
6023
- const rect = rects.get(id);
6024
-
6025
- if (rect) {
6026
- accumulator[index] = rect;
6027
- }
6028
-
6029
- return accumulator;
6030
- }, Array(items.length));
6031
- }
6032
-
6033
- function isValidIndex(index) {
6034
- return index !== null && index >= 0;
6035
- }
6036
-
6037
- function itemsEqual(a, b) {
6038
- if (a === b) {
6039
- return true;
6040
- }
6041
-
6042
- if (a.length !== b.length) {
6043
- return false;
6044
- }
6045
-
6046
- for (let i = 0; i < a.length; i++) {
6047
- if (a[i] !== b[i]) {
6048
- return false;
6049
- }
6050
- }
6051
-
6052
- return true;
6053
- }
6054
-
6055
- function normalizeDisabled(disabled) {
6056
- if (typeof disabled === 'boolean') {
6057
- return {
6058
- draggable: disabled,
6059
- droppable: disabled
6060
- };
6061
- }
6062
-
6063
- return disabled;
6064
- }
6065
-
6066
- const rectSortingStrategy = _ref => {
6067
- let {
6068
- rects,
6069
- activeIndex,
6070
- overIndex,
6071
- index
6072
- } = _ref;
6073
- const newRects = arrayMove(rects, overIndex, activeIndex);
6074
- const oldRect = rects[index];
6075
- const newRect = newRects[index];
6076
-
6077
- if (!newRect || !oldRect) {
6078
- return null;
6079
- }
6080
-
6081
- return {
6082
- x: newRect.left - oldRect.left,
6083
- y: newRect.top - oldRect.top,
6084
- scaleX: newRect.width / oldRect.width,
6085
- scaleY: newRect.height / oldRect.height
6086
- };
6087
- };
6088
-
6089
- // To-do: We should be calculating scale transformation
6090
- const defaultScale$1 = {
6091
- scaleX: 1,
6092
- scaleY: 1
6093
- };
6094
- const verticalListSortingStrategy = _ref => {
6095
- var _rects$activeIndex;
6096
-
6097
- let {
6098
- activeIndex,
6099
- activeNodeRect: fallbackActiveRect,
6100
- index,
6101
- rects,
6102
- overIndex
6103
- } = _ref;
6104
- const activeNodeRect = (_rects$activeIndex = rects[activeIndex]) != null ? _rects$activeIndex : fallbackActiveRect;
6105
-
6106
- if (!activeNodeRect) {
6107
- return null;
6108
- }
6109
-
6110
- if (index === activeIndex) {
6111
- const overIndexRect = rects[overIndex];
6112
-
6113
- if (!overIndexRect) {
6114
- return null;
6115
- }
6116
-
6117
- return {
6118
- x: 0,
6119
- y: activeIndex < overIndex ? overIndexRect.top + overIndexRect.height - (activeNodeRect.top + activeNodeRect.height) : overIndexRect.top - activeNodeRect.top,
6120
- ...defaultScale$1
6121
- };
6122
- }
6123
-
6124
- const itemGap = getItemGap$1(rects, index, activeIndex);
6125
-
6126
- if (index > activeIndex && index <= overIndex) {
6127
- return {
6128
- x: 0,
6129
- y: -activeNodeRect.height - itemGap,
6130
- ...defaultScale$1
6131
- };
6132
- }
6133
-
6134
- if (index < activeIndex && index >= overIndex) {
6135
- return {
6136
- x: 0,
6137
- y: activeNodeRect.height + itemGap,
6138
- ...defaultScale$1
6139
- };
6140
- }
6141
-
6142
- return {
6143
- x: 0,
6144
- y: 0,
6145
- ...defaultScale$1
6146
- };
6147
- };
6148
-
6149
- function getItemGap$1(clientRects, index, activeIndex) {
6150
- const currentRect = clientRects[index];
6151
- const previousRect = clientRects[index - 1];
6152
- const nextRect = clientRects[index + 1];
6153
-
6154
- if (!currentRect) {
6155
- return 0;
6156
- }
6157
-
6158
- if (activeIndex < index) {
6159
- return previousRect ? currentRect.top - (previousRect.top + previousRect.height) : nextRect ? nextRect.top - (currentRect.top + currentRect.height) : 0;
6160
- }
6161
-
6162
- return nextRect ? nextRect.top - (currentRect.top + currentRect.height) : previousRect ? currentRect.top - (previousRect.top + previousRect.height) : 0;
6163
- }
6164
-
6165
- const ID_PREFIX = 'Sortable';
6166
- const Context$1 = /*#__PURE__*/React__default.createContext({
6167
- activeIndex: -1,
6168
- containerId: ID_PREFIX,
6169
- disableTransforms: false,
6170
- items: [],
6171
- overIndex: -1,
6172
- useDragOverlay: false,
6173
- sortedRects: [],
6174
- strategy: rectSortingStrategy,
6175
- disabled: {
6176
- draggable: false,
6177
- droppable: false
6178
- }
6179
- });
6180
- function SortableContext(_ref) {
6181
- let {
6182
- children,
6183
- id,
6184
- items: userDefinedItems,
6185
- strategy = rectSortingStrategy,
6186
- disabled: disabledProp = false
6187
- } = _ref;
6188
- const {
6189
- active,
6190
- dragOverlay,
6191
- droppableRects,
6192
- over,
6193
- measureDroppableContainers
6194
- } = useDndContext();
6195
- const containerId = useUniqueId(ID_PREFIX, id);
6196
- const useDragOverlay = Boolean(dragOverlay.rect !== null);
6197
- const items = useMemo$1(() => userDefinedItems.map(item => typeof item === 'object' && 'id' in item ? item.id : item), [userDefinedItems]);
6198
- const isDragging = active != null;
6199
- const activeIndex = active ? items.indexOf(active.id) : -1;
6200
- const overIndex = over ? items.indexOf(over.id) : -1;
6201
- const previousItemsRef = useRef(items);
6202
- const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
6203
- const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
6204
- const disabled = normalizeDisabled(disabledProp);
6205
- useIsomorphicLayoutEffect$1(() => {
6206
- if (itemsHaveChanged && isDragging) {
6207
- measureDroppableContainers(items);
6208
- }
6209
- }, [itemsHaveChanged, items, isDragging, measureDroppableContainers]);
6210
- useEffect(() => {
6211
- previousItemsRef.current = items;
6212
- }, [items]);
6213
- const contextValue = useMemo$1(() => ({
6214
- activeIndex,
6215
- containerId,
6216
- disabled,
6217
- disableTransforms,
6218
- items,
6219
- overIndex,
6220
- useDragOverlay,
6221
- sortedRects: getSortedRects(items, droppableRects),
6222
- strategy
6223
- }), // eslint-disable-next-line react-hooks/exhaustive-deps
6224
- [activeIndex, containerId, disabled.draggable, disabled.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]);
6225
- return React__default.createElement(Context$1.Provider, {
6226
- value: contextValue
6227
- }, children);
6228
- }
6229
-
6230
- const defaultNewIndexGetter = _ref => {
6231
- let {
6232
- id,
6233
- items,
6234
- activeIndex,
6235
- overIndex
6236
- } = _ref;
6237
- return arrayMove(items, activeIndex, overIndex).indexOf(id);
6238
- };
6239
- const defaultAnimateLayoutChanges = _ref2 => {
6240
- let {
6241
- containerId,
6242
- isSorting,
6243
- wasDragging,
6244
- index,
6245
- items,
6246
- newIndex,
6247
- previousItems,
6248
- previousContainerId,
6249
- transition
6250
- } = _ref2;
6251
-
6252
- if (!transition || !wasDragging) {
6253
- return false;
6254
- }
6255
-
6256
- if (previousItems !== items && index === newIndex) {
6257
- return false;
6258
- }
6259
-
6260
- if (isSorting) {
6261
- return true;
6262
- }
6263
-
6264
- return newIndex !== index && containerId === previousContainerId;
6265
- };
6266
- const defaultTransition = {
6267
- duration: 200,
6268
- easing: 'ease'
6269
- };
6270
- const transitionProperty = 'transform';
6271
- const disabledTransition = /*#__PURE__*/CSS.Transition.toString({
6272
- property: transitionProperty,
6273
- duration: 0,
6274
- easing: 'linear'
6275
- });
6276
- const defaultAttributes = {
6277
- roleDescription: 'sortable'
6278
- };
6279
-
6280
- /*
6281
- * When the index of an item changes while sorting,
6282
- * we need to temporarily disable the transforms
6283
- */
6284
-
6285
- function useDerivedTransform(_ref) {
6286
- let {
6287
- disabled,
6288
- index,
6289
- node,
6290
- rect
6291
- } = _ref;
6292
- const [derivedTransform, setDerivedtransform] = useState(null);
6293
- const previousIndex = useRef(index);
6294
- useIsomorphicLayoutEffect$1(() => {
6295
- if (!disabled && index !== previousIndex.current && node.current) {
6296
- const initial = rect.current;
6297
-
6298
- if (initial) {
6299
- const current = getClientRect(node.current, {
6300
- ignoreTransform: true
6301
- });
6302
- const delta = {
6303
- x: initial.left - current.left,
6304
- y: initial.top - current.top,
6305
- scaleX: initial.width / current.width,
6306
- scaleY: initial.height / current.height
6307
- };
6308
-
6309
- if (delta.x || delta.y) {
6310
- setDerivedtransform(delta);
6311
- }
6312
- }
6313
- }
6314
-
6315
- if (index !== previousIndex.current) {
6316
- previousIndex.current = index;
6317
- }
6318
- }, [disabled, index, node, rect]);
6319
- useEffect(() => {
6320
- if (derivedTransform) {
6321
- setDerivedtransform(null);
6322
- }
6323
- }, [derivedTransform]);
6324
- return derivedTransform;
6325
- }
6326
-
6327
- function useSortable(_ref) {
6328
- let {
6329
- animateLayoutChanges = defaultAnimateLayoutChanges,
6330
- attributes: userDefinedAttributes,
6331
- disabled: localDisabled,
6332
- data: customData,
6333
- getNewIndex = defaultNewIndexGetter,
6334
- id,
6335
- strategy: localStrategy,
6336
- resizeObserverConfig,
6337
- transition = defaultTransition
6338
- } = _ref;
6339
- const {
6340
- items,
6341
- containerId,
6342
- activeIndex,
6343
- disabled: globalDisabled,
6344
- disableTransforms,
6345
- sortedRects,
6346
- overIndex,
6347
- useDragOverlay,
6348
- strategy: globalStrategy
6349
- } = useContext(Context$1);
6350
- const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
6351
- const index = items.indexOf(id);
6352
- const data = useMemo$1(() => ({
6353
- sortable: {
6354
- containerId,
6355
- index,
6356
- items
6357
- },
6358
- ...customData
6359
- }), [containerId, customData, index, items]);
6360
- const itemsAfterCurrentSortable = useMemo$1(() => items.slice(items.indexOf(id)), [items, id]);
6361
- const {
6362
- rect,
6363
- node,
6364
- isOver,
6365
- setNodeRef: setDroppableNodeRef
6366
- } = useDroppable({
6367
- id,
6368
- data,
6369
- disabled: disabled.droppable,
6370
- resizeObserverConfig: {
6371
- updateMeasurementsFor: itemsAfterCurrentSortable,
6372
- ...resizeObserverConfig
6373
- }
6374
- });
6375
- const {
6376
- active,
6377
- activatorEvent,
6378
- activeNodeRect,
6379
- attributes,
6380
- setNodeRef: setDraggableNodeRef,
6381
- listeners,
6382
- isDragging,
6383
- over,
6384
- setActivatorNodeRef,
6385
- transform
6386
- } = useDraggable({
6387
- id,
6388
- data,
6389
- attributes: { ...defaultAttributes,
6390
- ...userDefinedAttributes
6391
- },
6392
- disabled: disabled.draggable
6393
- });
6394
- const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
6395
- const isSorting = Boolean(active);
6396
- const displaceItem = isSorting && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
6397
- const shouldDisplaceDragSource = !useDragOverlay && isDragging;
6398
- const dragSourceDisplacement = shouldDisplaceDragSource && displaceItem ? transform : null;
6399
- const strategy = localStrategy != null ? localStrategy : globalStrategy;
6400
- const finalTransform = displaceItem ? dragSourceDisplacement != null ? dragSourceDisplacement : strategy({
6401
- rects: sortedRects,
6402
- activeNodeRect,
6403
- activeIndex,
6404
- overIndex,
6405
- index
6406
- }) : null;
6407
- const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
6408
- id,
6409
- items,
6410
- activeIndex,
6411
- overIndex
6412
- }) : index;
6413
- const activeId = active == null ? void 0 : active.id;
6414
- const previous = useRef({
6415
- activeId,
6416
- items,
6417
- newIndex,
6418
- containerId
6419
- });
6420
- const itemsHaveChanged = items !== previous.current.items;
6421
- const shouldAnimateLayoutChanges = animateLayoutChanges({
6422
- active,
6423
- containerId,
6424
- isDragging,
6425
- isSorting,
6426
- id,
6427
- index,
6428
- items,
6429
- newIndex: previous.current.newIndex,
6430
- previousItems: previous.current.items,
6431
- previousContainerId: previous.current.containerId,
6432
- transition,
6433
- wasDragging: previous.current.activeId != null
6434
- });
6435
- const derivedTransform = useDerivedTransform({
6436
- disabled: !shouldAnimateLayoutChanges,
6437
- index,
6438
- node,
6439
- rect
6440
- });
6441
- useEffect(() => {
6442
- if (isSorting && previous.current.newIndex !== newIndex) {
6443
- previous.current.newIndex = newIndex;
6444
- }
6445
-
6446
- if (containerId !== previous.current.containerId) {
6447
- previous.current.containerId = containerId;
6448
- }
6449
-
6450
- if (items !== previous.current.items) {
6451
- previous.current.items = items;
6452
- }
6453
- }, [isSorting, newIndex, containerId, items]);
6454
- useEffect(() => {
6455
- if (activeId === previous.current.activeId) {
6456
- return;
6457
- }
6458
-
6459
- if (activeId != null && previous.current.activeId == null) {
6460
- previous.current.activeId = activeId;
6461
- return;
6462
- }
6463
-
6464
- const timeoutId = setTimeout(() => {
6465
- previous.current.activeId = activeId;
6466
- }, 50);
6467
- return () => clearTimeout(timeoutId);
6468
- }, [activeId]);
6469
- return {
6470
- active,
6471
- activeIndex,
6472
- attributes,
6473
- data,
6474
- rect,
6475
- index,
6476
- newIndex,
6477
- items,
6478
- isOver,
6479
- isSorting,
6480
- isDragging,
6481
- listeners,
6482
- node,
6483
- overIndex,
6484
- over,
6485
- setNodeRef,
6486
- setActivatorNodeRef,
6487
- setDroppableNodeRef,
6488
- setDraggableNodeRef,
6489
- transform: derivedTransform != null ? derivedTransform : finalTransform,
6490
- transition: getTransition()
6491
- };
6492
-
6493
- function getTransition() {
6494
- if ( // Temporarily disable transitions for a single frame to set up derived transforms
6495
- derivedTransform || // Or to prevent items jumping to back to their "new" position when items change
6496
- itemsHaveChanged && previous.current.newIndex === index) {
6497
- return disabledTransition;
6498
- }
6499
-
6500
- if (shouldDisplaceDragSource && !isKeyboardEvent(activatorEvent) || !transition) {
6501
- return undefined;
6502
- }
6503
-
6504
- if (isSorting || shouldAnimateLayoutChanges) {
6505
- return CSS.Transition.toString({ ...transition,
6506
- property: transitionProperty
6507
- });
6508
- }
6509
-
6510
- return undefined;
6511
- }
6512
- }
6513
-
6514
- function normalizeLocalDisabled(localDisabled, globalDisabled) {
6515
- var _localDisabled$dragga, _localDisabled$droppa;
6516
-
6517
- if (typeof localDisabled === 'boolean') {
6518
- return {
6519
- draggable: localDisabled,
6520
- // Backwards compatibility
6521
- droppable: false
6522
- };
6523
- }
6524
-
6525
- return {
6526
- draggable: (_localDisabled$dragga = localDisabled == null ? void 0 : localDisabled.draggable) != null ? _localDisabled$dragga : globalDisabled.draggable,
6527
- droppable: (_localDisabled$droppa = localDisabled == null ? void 0 : localDisabled.droppable) != null ? _localDisabled$droppa : globalDisabled.droppable
6528
- };
6529
- }
6530
-
6531
- [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
6532
-
6533
- const SettingIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
6534
- "svg",
6535
- {
6536
- xmlns: "http://www.w3.org/2000/svg",
6537
- width: 30,
6538
- height: 30,
6539
- fill: "none",
6540
- ...props,
6541
- children: [
6542
- /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: 29, height: 29, x: 0.5, y: 0.5, fill: "#fff", rx: 14.5 }),
6543
- /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: 29, height: 29, x: 0.5, y: 0.5, stroke: "#D6E6FE", rx: 14.5 }),
6544
- /* @__PURE__ */ jsxRuntimeExports.jsx(
6545
- "path",
6546
- {
6547
- fill: "#116DFF",
6548
- d: "M16.085 11a1.5 1.5 0 0 1 2.83 0H21v1h-2.085a1.5 1.5 0 0 1-2.83 0H9v-1h5.987M17 11v1h1v-1h-1Zm.5 7a1.5 1.5 0 0 1 1.415 1H21v1h-2.085a1.5 1.5 0 0 1-2.83 0H9v-1h7.085a1.5 1.5 0 0 1 1.415-1Zm-.5 1v1h1v-1h-1Zm4-4v1h-7.085a1.5 1.5 0 0 1-2.83 0H9v-1h2.085a1.5 1.5 0 0 1 2.83 0H21Zm-9 0v1h1v-1h-1Z"
6549
- }
6550
- )
6551
- ]
6552
- }
6553
- );
6554
- const DragIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
6555
- "svg",
6556
- {
6557
- xmlns: "http://www.w3.org/2000/svg",
6558
- width: 18,
6559
- height: 24,
6560
- fill: "none",
6561
- ...props,
6562
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
6563
- "path",
6564
- {
6565
- fill: "#116DFF",
6566
- fillRule: "evenodd",
6567
- d: "M6 1h2v2H6V1Zm0 5h2v2H6V6Zm4-5h2v2h-2V1Zm0 5h2v2h-2V6Zm-4 5h2v2H6v-2Zm4 0h2v2h-2v-2Zm-4 5h2v2H6v-2Zm4 0h2v2h-2v-2Zm-4 5h2v2H6v-2Zm4 0h2v2h-2v-2Z",
6568
- clipRule: "evenodd"
6569
- }
6570
- )
6571
- }
6572
- );
6573
-
6574
2193
  const CLASS_PART_SEPARATOR = '-';
6575
2194
  const createClassGroupUtils = config => {
6576
2195
  const classMap = createClassMap(config);
@@ -9526,144 +5145,31 @@ const getDefaultConfig = () => {
9526
5145
  };
9527
5146
  const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
9528
5147
 
9529
- const SortableItem = ({
9530
- id,
9531
- children,
9532
- isLastIndex
9533
- }) => {
9534
- const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
9535
- const style = {
9536
- transform: CSS.Transform.toString(transform),
9537
- transition
9538
- };
9539
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
9540
- "div",
9541
- {
9542
- ref: setNodeRef,
9543
- style,
9544
- className: twMerge(
9545
- "flex items-center border-t-1 !border-t-[#F0F0F0] ",
9546
- isLastIndex ? "!border-b-1 !border-b-[#F0F0F0]" : ""
9547
- ),
9548
- children: [
9549
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pl-2 pr-3.5 cursor-grab", ...attributes, ...listeners, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DragIcon, {}) }),
9550
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children })
9551
- ]
9552
- }
9553
- );
5148
+ const Tooltip = ({ children, ...props }) => {
5149
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { ...props, children });
9554
5150
  };
9555
5151
 
9556
- const SettingTable = (props) => {
9557
- const {
9558
- open,
9559
- setOpen,
9560
- title,
9561
- showSetting,
9562
- setDefaultSettingColumnItems,
9563
- defaultSettingColumnItems
9564
- } = props;
9565
- const { handleSubmit, control } = useForm();
9566
- const [columns, setColumns] = useState([]);
9567
- const handleCloseModal = () => {
9568
- setOpen(false);
9569
- };
9570
- const handleOkModal = () => {
9571
- setOpen(false);
9572
- };
9573
- const onSubmit = (data) => {
9574
- console.log("datasubmit", data);
9575
- };
9576
- const handleDragEnd = (event) => {
9577
- const { active, over } = event;
9578
- if (!over || active.id === over.id) return;
9579
- const oldIndex = columns.findIndex((col) => col.key === active.id);
9580
- const newIndex = columns.findIndex((col) => col.key === over.id);
9581
- const newColumns = arrayMove(columns, oldIndex, newIndex);
9582
- setColumns(newColumns);
9583
- };
9584
- useEffect(() => {
9585
- setColumns(defaultSettingColumnItems);
9586
- }, [defaultSettingColumnItems]);
9587
- const titleHeader = () => {
9588
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
9589
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Cài đặt hiển thị bảng" }),
9590
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[14px] text-[#5C657D] font-normal", children: "Chọn cột muốn hiển thị và kéo thả vị trí muốn hiển thị" })
9591
- ] });
9592
- };
9593
- const footer = () => {
9594
- const handleCancel = () => {
9595
- setDefaultSettingColumnItems && setDefaultSettingColumnItems(defaultSettingColumnItems);
9596
- setColumns(defaultSettingColumnItems);
9597
- setOpen(false);
9598
- };
9599
- const handleSubmit2 = () => {
9600
- setOpen(false);
9601
- setDefaultSettingColumnItems && setDefaultSettingColumnItems(columns);
9602
- };
9603
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
9604
- /* @__PURE__ */ jsxRuntimeExports.jsx(
9605
- Button,
9606
- {
9607
- className: " !rounded-3xl !text-[#007BE5] !border-[#BDE3FF]",
9608
- onClick: handleCancel,
9609
- children: "Về chế độ mặc định"
9610
- }
9611
- ),
5152
+ const SettingIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
5153
+ "svg",
5154
+ {
5155
+ xmlns: "http://www.w3.org/2000/svg",
5156
+ width: 30,
5157
+ height: 30,
5158
+ fill: "none",
5159
+ ...props,
5160
+ children: [
5161
+ /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: 29, height: 29, x: 0.5, y: 0.5, fill: "#fff", rx: 14.5 }),
5162
+ /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: 29, height: 29, x: 0.5, y: 0.5, stroke: "#D6E6FE", rx: 14.5 }),
9612
5163
  /* @__PURE__ */ jsxRuntimeExports.jsx(
9613
- Button,
5164
+ "path",
9614
5165
  {
9615
- className: "ml-2 !rounded-3xl !bg-[#007BE5] !text-[white] !border-[#007BE5]",
9616
- onClick: handleSubmit2,
9617
- children: "Xác nhận"
5166
+ fill: "#116DFF",
5167
+ d: "M16.085 11a1.5 1.5 0 0 1 2.83 0H21v1h-2.085a1.5 1.5 0 0 1-2.83 0H9v-1h5.987M17 11v1h1v-1h-1Zm.5 7a1.5 1.5 0 0 1 1.415 1H21v1h-2.085a1.5 1.5 0 0 1-2.83 0H9v-1h7.085a1.5 1.5 0 0 1 1.415-1Zm-.5 1v1h1v-1h-1Zm4-4v1h-7.085a1.5 1.5 0 0 1-2.83 0H9v-1h2.085a1.5 1.5 0 0 1 2.83 0H21Zm-9 0v1h1v-1h-1Z"
9618
5168
  }
9619
5169
  )
9620
- ] });
9621
- };
9622
- if (!showSetting) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
9623
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
9624
- Modal,
9625
- {
9626
- open,
9627
- title: title || titleHeader(),
9628
- closable: true,
9629
- onClose: handleCloseModal,
9630
- onOk: handleOkModal,
9631
- className: "setting-table-modal",
9632
- onSubmit: handleSubmit(onSubmit),
9633
- footer: footer(),
9634
- onCancel: handleCloseModal,
9635
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
9636
- SortableContext,
9637
- {
9638
- items: columns.map((item) => String(item.key)),
9639
- strategy: verticalListSortingStrategy,
9640
- children: columns.map((item, index) => {
9641
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
9642
- SortableItem,
9643
- {
9644
- id: String(item.key),
9645
- isLastIndex: index === columns.length - 1,
9646
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
9647
- SettingColumnItem,
9648
- {
9649
- lable: String(item.title),
9650
- control,
9651
- name: item.key
9652
- }
9653
- )
9654
- },
9655
- item.key
9656
- );
9657
- })
9658
- }
9659
- ) })
9660
- }
9661
- );
9662
- };
9663
-
9664
- const Tooltip = ({ children, ...props }) => {
9665
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { ...props, children });
9666
- };
5170
+ ]
5171
+ }
5172
+ );
9667
5173
 
9668
5174
  const EditableCell = ({
9669
5175
  editing,
@@ -9897,17 +5403,6 @@ const Table = ({
9897
5403
  } : void 0,
9898
5404
  ...rest
9899
5405
  }
9900
- ),
9901
- /* @__PURE__ */ jsxRuntimeExports.jsx(
9902
- SettingTable,
9903
- {
9904
- open: openSetting,
9905
- setOpen: setOpenStting,
9906
- title: titleSettingTableModal,
9907
- showSetting,
9908
- defaultSettingColumnItems: columns,
9909
- setDefaultSettingColumnItems: setColumns
9910
- }
9911
5406
  )
9912
5407
  ] });
9913
5408
  const renderTableContent = () => {
@@ -9921,6 +5416,10 @@ const Table = ({
9921
5416
  return renderTableContent();
9922
5417
  };
9923
5418
 
5419
+ const Modal = ({ children, onOk, onSubmit, ...rest }) => {
5420
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal$1, { onOk: onSubmit ? onSubmit : onOk, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-[20rem] overflow-y-auto", children: onSubmit ? /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit, children }) : children }) });
5421
+ };
5422
+
9924
5423
  const createStoreImpl = (createState) => {
9925
5424
  let state;
9926
5425
  const listeners = /* @__PURE__ */ new Set();