@eightshift/ui-components 1.7.2 → 1.9.0

package/dist/{multi-select-components-DTvEidE3.js → multi-select-components-DM3GsNfb.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import React__default, { useMemo, useLayoutEffect, useEffect, useRef, useCallback, useState, createContext, memo, useReducer, useContext } from "react";
-import { r as reactDomExports } from "./index-BTCzc3zb.js";
+import { r as reactDomExports } from "./index-BYHhzLf-.js";
 import { c as clsx } from "./lite-DVmmD_-j.js";
 function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -296,6 +296,8 @@ function LiveRegion(_ref) {
   } = _ref;
   const visuallyHidden = {
     position: "fixed",
+    top: 0,
+    left: 0,
     width: 1,
     height: 1,
     margin: -1,
@@ -1032,11 +1034,12 @@ var KeyboardCode;
   KeyboardCode2["Up"] = "ArrowUp";
   KeyboardCode2["Esc"] = "Escape";
   KeyboardCode2["Enter"] = "Enter";
+  KeyboardCode2["Tab"] = "Tab";
 })(KeyboardCode || (KeyboardCode = {}));
 const defaultKeyboardCodes = {
   start: [KeyboardCode.Space, KeyboardCode.Enter],
   cancel: [KeyboardCode.Esc],
-  end: [KeyboardCode.Space, KeyboardCode.Enter]
+  end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
 };
 const defaultKeyboardCoordinateGetter = (event, _ref) => {
   let {
@@ -1331,6 +1334,9 @@ class AbstractPointerSensor {
       passive: false
     });
     this.listeners.add(events2.end.name, this.handleEnd);
+    if (events2.cancel) {
+      this.listeners.add(events2.cancel.name, this.handleCancel);
+    }
     this.windowListeners.add(EventName.Resize, this.handleCancel);
     this.windowListeners.add(EventName.DragStart, preventDefault);
     this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -1346,9 +1352,11 @@ class AbstractPointerSensor {
       }
       if (isDelayConstraint(activationConstraint)) {
         this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
+        this.handlePending(activationConstraint);
         return;
       }
       if (isDistanceConstraint(activationConstraint)) {
+        this.handlePending(activationConstraint);
         return;
       }
     }
@@ -1363,6 +1371,13 @@ class AbstractPointerSensor {
       this.timeoutId = null;
     }
   }
+  handlePending(constraint, offset) {
+    const {
+      active,
+      onPending
+    } = this.props;
+    onPending(active, constraint, this.initialCoordinates, offset);
+  }
   handleStart() {
     const {
       initialCoordinates
@@ -1412,6 +1427,7 @@ class AbstractPointerSensor {
           return this.handleCancel();
         }
       }
+      this.handlePending(activationConstraint, delta);
       return;
     }
     if (event.cancelable) {
@@ -1421,16 +1437,24 @@ class AbstractPointerSensor {
   }
   handleEnd() {
     const {
+      onAbort,
       onEnd
     } = this.props;
     this.detach();
+    if (!this.activated) {
+      onAbort(this.props.active);
+    }
     onEnd();
   }
   handleCancel() {
     const {
+      onAbort,
       onCancel
     } = this.props;
     this.detach();
+    if (!this.activated) {
+      onAbort(this.props.active);
+    }
     onCancel();
   }
   handleKeydown(event) {
@@ -1444,6 +1468,9 @@ class AbstractPointerSensor {
   }
 }
 const events = {
+  cancel: {
+    name: "pointercancel"
+  },
   move: {
     name: "pointermove"
   },
@@ -1514,6 +1541,9 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
+  cancel: {
+    name: "touchcancel"
+  },
   move: {
     name: "touchmove"
   },
@@ -1722,11 +1752,11 @@ function useScrollIntent(_ref2) {
   }, [disabled, delta, previousDelta]);
 }
 function useCachedNode(draggableNodes, id) {
-  const draggableNode = id !== null ? draggableNodes.get(id) : void 0;
+  const draggableNode = id != null ? draggableNodes.get(id) : void 0;
   const node = draggableNode ? draggableNode.node.current : null;
   return useLazyMemo((cachedNode) => {
     var _ref;
-    if (id === null) {
+    if (id == null) {
       return null;
     }
     return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
@@ -1926,7 +1956,23 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, measureRect] = useReducer(reducer2, null);
+  const [rect, setRect] = useState(null);
+  function measureRect() {
+    setRect((currentRect) => {
+      if (!element) {
+        return null;
+      }
+      if (element.isConnected === false) {
+        var _ref;
+        return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
+      }
+      const newRect = measure(element);
+      if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
+        return currentRect;
+      }
+      return newRect;
+    });
+  }
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -1961,20 +2007,6 @@ function useRect(element, measure, fallbackRect) {
     }
   }, [element]);
   return rect;
-  function reducer2(currentRect) {
-    if (!element) {
-      return null;
-    }
-    if (element.isConnected === false) {
-      var _ref;
-      return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
-    }
-    const newRect = measure(element);
-    if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
-      return currentRect;
-    }
-    return newRect;
-  }
 }
 function useRectDelta(rect) {
   const initialRect = useInitialValue(rect);
@@ -2123,28 +2155,24 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, measureRects] = useReducer(reducer2, defaultValue$2);
+  const [rects, setRects] = useState(defaultValue$2);
+  function measureRects() {
+    setRects(() => {
+      if (!elements.length) {
+        return defaultValue$2;
+      }
+      return elements.map((element) => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
+    });
+  }
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  if (elements.length > 0 && rects === defaultValue$2) {
-    measureRects();
-  }
   useIsomorphicLayoutEffect(() => {
-    if (elements.length) {
-      elements.forEach((element) => resizeObserver == null ? void 0 : resizeObserver.observe(element));
-    } else {
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      measureRects();
-    }
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    measureRects();
+    elements.forEach((element) => resizeObserver == null ? void 0 : resizeObserver.observe(element));
   }, [elements]);
   return rects;
-  function reducer2() {
-    if (!elements.length) {
-      return defaultValue$2;
-    }
-    return elements.map((element) => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
-  }
 }
 function getMeasurableNode(node) {
   if (!node) {
@@ -2311,7 +2339,7 @@ function reducer(state, action) {
         }
       };
     case Action.DragMove:
-      if (!state.draggable.active) {
+      if (state.draggable.active == null) {
         return state;
       }
       return {
@@ -2573,7 +2601,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId ? draggableNodes.get(activeId) : null;
+  const node = activeId != null ? draggableNodes.get(activeId) : null;
   const activeRects = useRef({
     initial: null,
     translated: null
@@ -2608,7 +2636,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId ? draggableNodes.get(activeId) : null,
+    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -2676,6 +2704,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   const [over, setOver] = useState(null);
   const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
   const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
+  const activeSensorRef = useRef(null);
   const instantiateSensor = useCallback(
     (event, _ref2) => {
       let {
@@ -2698,6 +2727,43 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
         // Sensors need to be instantiated with refs for arguments that change over time
         // otherwise they are frozen in time with the stale arguments
         context: sensorContext,
+        onAbort(id2) {
+          const draggableNode = draggableNodes.get(id2);
+          if (!draggableNode) {
+            return;
+          }
+          const {
+            onDragAbort
+          } = latestProps.current;
+          const event2 = {
+            id: id2
+          };
+          onDragAbort == null ? void 0 : onDragAbort(event2);
+          dispatchMonitorEvent({
+            type: "onDragAbort",
+            event: event2
+          });
+        },
+        onPending(id2, constraint, initialCoordinates, offset) {
+          const draggableNode = draggableNodes.get(id2);
+          if (!draggableNode) {
+            return;
+          }
+          const {
+            onDragPending
+          } = latestProps.current;
+          const event2 = {
+            id: id2,
+            constraint,
+            initialCoordinates,
+            offset
+          };
+          onDragPending == null ? void 0 : onDragPending(event2);
+          dispatchMonitorEvent({
+            type: "onDragPending",
+            event: event2
+          });
+        },
         onStart(initialCoordinates) {
           const id2 = activeRef.current;
           if (id2 == null) {
@@ -2711,6 +2777,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
             onDragStart
           } = latestProps.current;
           const event2 = {
+            activatorEvent: activatorEvent2,
             active: {
               id: id2,
               data: draggableNode.data,
@@ -2729,6 +2796,8 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
               type: "onDragStart",
               event: event2
             });
+            setActiveSensor(activeSensorRef.current);
+            setActivatorEvent(activatorEvent2);
           });
         },
         onMove(coordinates) {
@@ -2740,10 +2809,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
         onEnd: createHandler(Action.DragEnd),
         onCancel: createHandler(Action.DragCancel)
       });
-      reactDomExports.unstable_batchedUpdates(() => {
-        setActiveSensor(sensorInstance);
-        setActivatorEvent(event.nativeEvent);
-      });
+      activeSensorRef.current = sensorInstance;
       function createHandler(type) {
         return async function handler() {
           const {
@@ -2780,6 +2846,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
             setOver(null);
             setActiveSensor(null);
             setActivatorEvent(null);
+            activeSensorRef.current = null;
             const eventName = type === Action.DragEnd ? "onDragEnd" : "onDragCancel";
             if (event2) {
               const handler2 = latestProps.current[eventName];
@@ -3005,7 +3072,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
 });
 const NullContext = /* @__PURE__ */ createContext(null);
 const defaultRole = "button";
-const ID_PREFIX$1 = "Droppable";
+const ID_PREFIX$1 = "Draggable";
 function useDraggable(_ref) {
   let {
     id,
@@ -3154,7 +3221,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useIsomorphicLayoutEffect(
+  useEffect(
     () => {
       dispatch({
         type: Action.RegisterDroppable,
@@ -3536,7 +3603,7 @@ function useSortable(_ref) {
     if (activeId === previous.current.activeId) {
       return;
     }
-    if (activeId && !previous.current.activeId) {
+    if (activeId != null && previous.current.activeId == null) {
       previous.current.activeId = activeId;
       return;
     }