@vuu-ui/vuu-ui-controls 0.0.26

package/esm/date-popup/useDatePopup.js

@@ -0,0 +1,75 @@
+import { useState, useRef, useMemo, useCallback } from 'react';
+
+const SELECTED_DAY = ".saltCalendarDay-selected:not(.saltCalendarDay-outOfRange)";
+const useDatePopup = ({
+  onChange,
+  onPopupClose,
+  onPopupOpen,
+  selectedDate
+}) => {
+  const [date, setDate] = useState(selectedDate);
+  const [, forceUpdate] = useState({});
+  const [isOpen, setIsOpen] = useState(false);
+  const triggererRef = useRef(null);
+  const calendarRef = useRef(null);
+  const visibleMonthRef = useRef(selectedDate);
+  const setVisibleMonth = useMemo(() => {
+    const setValue = (v) => {
+      if (v.toString() !== visibleMonthRef.current.toString()) {
+        visibleMonthRef.current = v;
+        forceUpdate({});
+      }
+    };
+    setValue(selectedDate);
+    return setValue;
+  }, [selectedDate]);
+  const handleOpenChange = useCallback(
+    (open, reason) => {
+      setIsOpen(open);
+      if (open) {
+        onPopupOpen?.();
+        requestAnimationFrame(() => {
+          const el = calendarRef.current?.querySelector(
+            SELECTED_DAY
+          );
+          el?.focus();
+        });
+      } else {
+        if (reason !== "Tab") {
+          triggererRef.current?.focus();
+        }
+        onPopupClose?.(reason);
+      }
+    },
+    [onPopupClose, onPopupOpen]
+  );
+  const handleDateSelection = useCallback(
+    (e, date2) => {
+      setDate(date2);
+      console.log(date2.toString());
+      visibleMonthRef.current = date2;
+      handleOpenChange(false, "select");
+      onChange(date2);
+    },
+    [handleOpenChange, onChange]
+  );
+  const handleVisibleMonthChange = useCallback(
+    (e, date2) => {
+      setVisibleMonth(date2);
+    },
+    [setVisibleMonth]
+  );
+  return {
+    calendarRef,
+    date,
+    handleOpenChange,
+    isOpen,
+    onSelectedDateChange: handleDateSelection,
+    onVisibleMonthChange: handleVisibleMonthChange,
+    triggererRef,
+    visibleMonth: visibleMonthRef.current
+  };
+};
+
+export { useDatePopup };
+//# sourceMappingURL=useDatePopup.js.map

package/esm/date-popup/useDatePopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePopup.js","sources":["../../src/date-popup/useDatePopup.ts"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\nimport { OpenChangeHandler } from \"../dropdown\";\nimport { DateValue } from \"@internationalized/date\";\nimport { DatePopupProps } from \"./DatePopup\";\n\nconst SELECTED_DAY =\n  \".saltCalendarDay-selected:not(.saltCalendarDay-outOfRange)\";\n\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\nexport interface DatePopupHookProps\n  extends Pick<DatePopupProps, \"onPopupClose\" | \"onPopupOpen\">,\n    WithRequired<DatePopupProps, \"onChange\" | \"selectedDate\"> {}\n\nexport const useDatePopup = ({\n  onChange,\n  onPopupClose,\n  onPopupOpen,\n  selectedDate,\n}: // selectionVariant,\nDatePopupHookProps) => {\n  const [date, setDate] = useState<DateValue>(selectedDate);\n  const [, forceUpdate] = useState({});\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const triggererRef = useRef<HTMLButtonElement>(null);\n  const calendarRef = useRef<HTMLDivElement>(null);\n\n  const visibleMonthRef = useRef<DateValue>(selectedDate);\n  const setVisibleMonth = useMemo(() => {\n    const setValue = (v: DateValue) => {\n      if (v.toString() !== visibleMonthRef.current.toString()) {\n        visibleMonthRef.current = v;\n        forceUpdate({});\n      }\n    };\n    setValue(selectedDate);\n    return setValue;\n  }, [selectedDate]);\n\n  const handleOpenChange = useCallback<OpenChangeHandler>(\n    (open, reason) => {\n      setIsOpen(open);\n      if (open) {\n        onPopupOpen?.();\n        requestAnimationFrame(() => {\n          const el = calendarRef.current?.querySelector(\n            SELECTED_DAY\n          ) as HTMLElement;\n          el?.focus();\n        });\n      } else {\n        if (reason !== \"Tab\") {\n          triggererRef.current?.focus();\n        }\n        onPopupClose?.(reason);\n      }\n    },\n    [onPopupClose, onPopupOpen]\n  );\n\n  const handleDateSelection = useCallback(\n    (e, date) => {\n      setDate(date);\n      console.log(date.toString());\n      visibleMonthRef.current = date;\n      handleOpenChange(false, \"select\");\n      onChange(date);\n    },\n    [handleOpenChange, onChange]\n  );\n\n  const handleVisibleMonthChange = useCallback(\n    (e, date) => {\n      setVisibleMonth(date);\n    },\n    [setVisibleMonth]\n  );\n\n  return {\n    calendarRef,\n    date,\n    handleOpenChange: handleOpenChange,\n    isOpen,\n    onSelectedDateChange: handleDateSelection,\n    onVisibleMonthChange: handleVisibleMonthChange,\n    triggererRef,\n    visibleMonth: visibleMonthRef.current,\n  };\n};\n"],"names":["date"],"mappings":"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"}

package/esm/drag-drop/DragDropProvider.js

@@ -0,0 +1,142 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useCallback, useContext } from 'react';
+import { useGlobalDragDrop } from './useGlobalDragDrop.js';
+
+const NO_DRAG_CONTEXT = {
+  isDragSource: void 0,
+  isDropTarget: void 0,
+  register: () => void 0
+};
+const unconfiguredRegistrationCall = () => console.log(`have you forgotten to provide a DragDrop Provider ?`);
+const DragDropContext = createContext({
+  registerDragDropParty: unconfiguredRegistrationCall
+});
+const measureDropTargets = (dropTargetIds = []) => {
+  return dropTargetIds.reduce((map, id) => {
+    const el = document.getElementById(id);
+    if (el) {
+      const { top, right, bottom, left } = el.getBoundingClientRect();
+      map[id] = { top, right, bottom, left };
+    }
+    return map;
+  }, {});
+};
+const DragDropProvider = ({
+  children,
+  dragSources: dragSourcesProp
+}) => {
+  const resumeDragHandlers = useMemo(
+    () => /* @__PURE__ */ new Map(),
+    []
+  );
+  const dropHandlers = useMemo(() => /* @__PURE__ */ new Map(), []);
+  const handleDragOverDropTarget = useCallback(
+    (dropTargetId, dragDropState) => {
+      const resumeDrag2 = resumeDragHandlers.get(dropTargetId);
+      if (resumeDrag2) {
+        return resumeDrag2(dragDropState);
+      } else {
+        return false;
+      }
+    },
+    [resumeDragHandlers]
+  );
+  const handleDrop = useCallback(
+    (dropTargetId, dragDropState) => {
+      const handleDrop2 = dropHandlers.get(dropTargetId);
+      if (handleDrop2) {
+        handleDrop2(dragDropState);
+      }
+    },
+    [dropHandlers]
+  );
+  const { measuredDropTargetsRef, resumeDrag } = useGlobalDragDrop({
+    onDragOverDropTarget: handleDragOverDropTarget,
+    onDrop: handleDrop
+  });
+  const [dragSources, dropTargets] = useMemo(() => {
+    const sources = /* @__PURE__ */ new Map();
+    const targets = /* @__PURE__ */ new Map();
+    for (const [sourceId, { dropTargets: dropTargets2 }] of Object.entries(dragSourcesProp)) {
+      const sourceEntry = sources.get(sourceId);
+      const targetIds = Array.isArray(dropTargets2) ? dropTargets2 : [dropTargets2];
+      if (sourceEntry) {
+        sourceEntry.push(...targetIds);
+      } else {
+        sources.set(sourceId, targetIds);
+      }
+      for (const targetId of targetIds) {
+        const targetEntry = targets.get(targetId);
+        if (targetEntry) {
+          targetEntry.push(sourceId);
+        } else {
+          targets.set(targetId, [sourceId]);
+        }
+      }
+    }
+    return [sources, targets];
+  }, [dragSourcesProp]);
+  const onDragOut = useCallback(
+    (id, dragDropState) => {
+      measuredDropTargetsRef.current = measureDropTargets(dragSources.get(id));
+      resumeDrag(dragDropState);
+      return true;
+    },
+    [dragSources, measuredDropTargetsRef, resumeDrag]
+  );
+  const onEndOfDragOperation = useCallback((id) => {
+    console.log(`end of drag operation, id= ${id}`);
+  }, []);
+  const registerDragDropParty = useCallback(
+    (id, resumeDrag2, onDrop) => {
+      if (resumeDrag2) {
+        resumeDragHandlers.set(id, resumeDrag2);
+      } else if (onDrop) {
+        dropHandlers.set(id, onDrop);
+      }
+    },
+    [dropHandlers, resumeDragHandlers]
+  );
+  const contextValue = useMemo(
+    () => ({
+      dragSources,
+      dropTargets,
+      onDragOut,
+      onEndOfDragOperation,
+      registerDragDropParty
+    }),
+    [
+      dragSources,
+      dropTargets,
+      onDragOut,
+      onEndOfDragOperation,
+      registerDragDropParty
+    ]
+  );
+  return /* @__PURE__ */ jsx(DragDropContext.Provider, { value: contextValue, children });
+};
+const useDragDropProvider = (id) => {
+  const {
+    dragSources,
+    dropTargets,
+    onDragOut,
+    onEndOfDragOperation,
+    registerDragDropParty
+  } = useContext(DragDropContext);
+  if (id && (dragSources || dropTargets)) {
+    const isDragSource = dragSources?.has(id) ?? false;
+    const isDropTarget = dropTargets?.has(id) ?? false;
+    return {
+      isDragSource,
+      isDropTarget,
+      onDragOut,
+      onEndOfDragOperation,
+      register: registerDragDropParty
+    };
+  } else {
+    return NO_DRAG_CONTEXT;
+  }
+};
+
+export { DragDropProvider, useDragDropProvider };
+//# sourceMappingURL=DragDropProvider.js.map

package/esm/drag-drop/DragDropProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropProvider.js","sources":["../../src/drag-drop/DragDropProvider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { DragDropState } from \"./DragDropState\";\nimport {\n  GlobalDropHandler,\n  ResumeDragHandler,\n  useGlobalDragDrop,\n} from \"./useGlobalDragDrop\";\n\nconst NO_DRAG_CONTEXT = {\n  isDragSource: undefined,\n  isDropTarget: undefined,\n  register: () => undefined,\n};\n\nconst unconfiguredRegistrationCall = () =>\n  console.log(`have you forgotten to provide a DragDrop Provider ?`);\n\nexport type DragOutHandler = (\n  id: string,\n  dragDropState: DragDropState\n) => boolean;\n\nexport type DragDropRegistrationFn = (\n  id: string,\n  resumeDrag: ResumeDragHandler | false,\n  onDrop?: GlobalDropHandler\n) => void;\n\nexport type EndOfDragOperationHandler = (id: string) => void;\n\nexport interface DragDropContextProps {\n  dragSources?: Map<string, string[]>;\n  dropTargets?: Map<string, string[]>;\n  onDragOut?: DragOutHandler;\n  onEndOfDragOperation?: EndOfDragOperationHandler;\n  registerDragDropParty: DragDropRegistrationFn;\n}\n\nconst DragDropContext = createContext<DragDropContextProps>({\n  registerDragDropParty: unconfiguredRegistrationCall,\n});\n\nexport type DragSources = {\n  [key: string]: { dropTargets: string | string[]; payloadType?: string };\n};\nexport interface DragDropProviderProps {\n  children: ReactNode;\n  dragSources: DragSources;\n}\n\nexport type MeasuredTarget = {\n  bottom: number;\n  left: number;\n  right: number;\n  top: number;\n};\n\nconst measureDropTargets = (dropTargetIds: string[] = []) => {\n  return dropTargetIds.reduce<Record<string, MeasuredTarget>>((map, id) => {\n    const el = document.getElementById(id);\n    if (el) {\n      const { top, right, bottom, left } = el.getBoundingClientRect();\n      map[id] = { top, right, bottom, left };\n    }\n    return map;\n  }, {});\n};\n\nexport const DragDropProvider = ({\n  children,\n  dragSources: dragSourcesProp,\n}: DragDropProviderProps) => {\n  const resumeDragHandlers = useMemo(\n    () => new Map<string, ResumeDragHandler>(),\n    []\n  );\n  const dropHandlers = useMemo(() => new Map<string, GlobalDropHandler>(), []);\n  const handleDragOverDropTarget = useCallback(\n    (dropTargetId: string, dragDropState: DragDropState) => {\n      const resumeDrag = resumeDragHandlers.get(dropTargetId);\n      if (resumeDrag) {\n        return resumeDrag(dragDropState);\n      } else {\n        return false;\n      }\n    },\n    [resumeDragHandlers]\n  );\n\n  const handleDrop = useCallback(\n    (dropTargetId: string, dragDropState: DragDropState) => {\n      const handleDrop = dropHandlers.get(dropTargetId);\n      if (handleDrop) {\n        handleDrop(dragDropState);\n      }\n    },\n    [dropHandlers]\n  );\n\n  const { measuredDropTargetsRef, resumeDrag } = useGlobalDragDrop({\n    onDragOverDropTarget: handleDragOverDropTarget,\n    onDrop: handleDrop,\n  });\n  const [dragSources, dropTargets] = useMemo(() => {\n    const sources = new Map<string, string[]>();\n    // TODO do we need the targets ?\n    const targets = new Map<string, string[]>();\n\n    for (const [sourceId, { dropTargets }] of Object.entries(dragSourcesProp)) {\n      const sourceEntry = sources.get(sourceId);\n      const targetIds = Array.isArray(dropTargets)\n        ? dropTargets\n        : [dropTargets];\n      if (sourceEntry) {\n        sourceEntry.push(...targetIds);\n      } else {\n        sources.set(sourceId, targetIds);\n      }\n      for (const targetId of targetIds) {\n        const targetEntry = targets.get(targetId);\n        if (targetEntry) {\n          targetEntry.push(sourceId);\n        } else {\n          targets.set(targetId, [sourceId]);\n        }\n      }\n    }\n    return [sources, targets];\n  }, [dragSourcesProp]);\n\n  const onDragOut = useCallback<DragOutHandler>(\n    (id, dragDropState) => {\n      // we call releaseItem if and when the dragged item is dropped onto a remote dropTarget\n      measuredDropTargetsRef.current = measureDropTargets(dragSources.get(id));\n      resumeDrag(dragDropState);\n      return true;\n    },\n    [dragSources, measuredDropTargetsRef, resumeDrag]\n  );\n\n  const onEndOfDragOperation = useCallback<EndOfDragOperationHandler>((id) => {\n    console.log(`end of drag operation, id= ${id}`);\n  }, []);\n\n  const registerDragDropParty = useCallback<DragDropRegistrationFn>(\n    (id, resumeDrag, onDrop) => {\n      if (resumeDrag) {\n        resumeDragHandlers.set(id, resumeDrag);\n      } else if (onDrop) {\n        dropHandlers.set(id, onDrop);\n      }\n    },\n    [dropHandlers, resumeDragHandlers]\n  );\n\n  const contextValue: DragDropContextProps = useMemo(\n    () => ({\n      dragSources,\n      dropTargets,\n      onDragOut,\n      onEndOfDragOperation,\n      registerDragDropParty,\n    }),\n    [\n      dragSources,\n      dropTargets,\n      onDragOut,\n      onEndOfDragOperation,\n      registerDragDropParty,\n    ]\n  );\n\n  return (\n    <DragDropContext.Provider value={contextValue}>\n      {children}\n    </DragDropContext.Provider>\n  );\n};\n\nexport interface DragDropProviderResult {\n  isDragSource?: boolean;\n  isDropTarget?: boolean;\n  onDragOut?: DragOutHandler;\n  onEndOfDragOperation?: (id: string) => void;\n  register: DragDropRegistrationFn;\n}\n\nexport const useDragDropProvider = (id?: string): DragDropProviderResult => {\n  const {\n    dragSources,\n    dropTargets,\n    onDragOut,\n    onEndOfDragOperation,\n    registerDragDropParty,\n  } = useContext(DragDropContext);\n  if (id && (dragSources || dropTargets)) {\n    const isDragSource = dragSources?.has(id) ?? false;\n    const isDropTarget = dropTargets?.has(id) ?? false;\n\n    return {\n      isDragSource,\n      isDropTarget,\n      onDragOut,\n      onEndOfDragOperation,\n      register: registerDragDropParty,\n    };\n  } else {\n    return NO_DRAG_CONTEXT;\n  }\n};\n"],"names":["resumeDrag","handleDrop","dropTargets"],"mappings":"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"}

package/esm/drag-drop/DragDropState.js

@@ -0,0 +1,27 @@
+class DragDropState {
+  constructor(mousePosition, dragElement) {
+    /** Element being dragged, (initial element cloned and rendered in portal). */
+    this.draggableElement = null;
+    this.payload = null;
+    /** Used to capture a ref to the Draggable JSX.Element */
+    this.setDraggable = (el) => {
+      this.draggableElement = el;
+    };
+    this.initialDragElement = dragElement;
+    this.mouseOffset = this.getMouseOffset(mousePosition, dragElement);
+  }
+  setPayload(payload) {
+    this.payload = payload;
+  }
+  getMouseOffset(mousePosition, dragElement) {
+    const { clientX, clientY } = mousePosition;
+    const draggableRect = dragElement.getBoundingClientRect();
+    return {
+      x: clientX - draggableRect.left,
+      y: clientY - draggableRect.top
+    };
+  }
+}
+
+export { DragDropState };
+//# sourceMappingURL=DragDropState.js.map

package/esm/drag-drop/DragDropState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropState.js","sources":["../../src/drag-drop/DragDropState.ts"],"sourcesContent":["import { MouseOffset, MousePosition } from \"./dragDropTypes\";\n\nexport class DragDropState {\n  /** Distance between start (top | left) of dragged element and point where user pressed to drag */\n  readonly mouseOffset: MouseOffset;\n  /** Element where the initial mousedown triggered the drag operation */\n  readonly initialDragElement: HTMLElement;\n  /** Element being dragged, (initial element cloned and rendered in portal). */\n  draggableElement: HTMLElement | null = null;\n\n  payload: unknown = null;\n\n  constructor(mousePosition: MousePosition, dragElement: HTMLElement) {\n    this.initialDragElement = dragElement;\n    this.mouseOffset = this.getMouseOffset(mousePosition, dragElement);\n  }\n\n  /** Used to capture a ref to the Draggable JSX.Element */\n  setDraggable = (el: HTMLElement | null) => {\n    this.draggableElement = el;\n  };\n\n  setPayload(payload: unknown) {\n    this.payload = payload;\n  }\n\n  private getMouseOffset(\n    mousePosition: MousePosition,\n    dragElement: HTMLElement\n  ) {\n    const { clientX, clientY } = mousePosition;\n    const draggableRect = dragElement.getBoundingClientRect();\n\n    return {\n      x: clientX - draggableRect.left,\n      y: clientY - draggableRect.top,\n    };\n  }\n}\n"],"names":[],"mappings":"AAEO,MAAM,aAAc,CAAA;AAAA,EAUzB,WAAA,CAAY,eAA8B,WAA0B,EAAA;AAJpE;AAAA,IAAuC,IAAA,CAAA,gBAAA,GAAA,IAAA,CAAA;AAEvC,IAAmB,IAAA,CAAA,OAAA,GAAA,IAAA,CAAA;AAQnB;AAAA,IAAA,IAAA,CAAA,YAAA,GAAe,CAAC,EAA2B,KAAA;AACzC,MAAA,IAAA,CAAK,gBAAmB,GAAA,EAAA,CAAA;AAAA,KAC1B,CAAA;AAPE,IAAA,IAAA,CAAK,kBAAqB,GAAA,WAAA,CAAA;AAC1B,IAAA,IAAA,CAAK,WAAc,GAAA,IAAA,CAAK,cAAe,CAAA,aAAA,EAAe,WAAW,CAAA,CAAA;AAAA,GACnE;AAAA,EAOA,WAAW,OAAkB,EAAA;AAC3B,IAAA,IAAA,CAAK,OAAU,GAAA,OAAA,CAAA;AAAA,GACjB;AAAA,EAEQ,cAAA,CACN,eACA,WACA,EAAA;AACA,IAAM,MAAA,EAAE,OAAS,EAAA,OAAA,EAAY,GAAA,aAAA,CAAA;AAC7B,IAAM,MAAA,aAAA,GAAgB,YAAY,qBAAsB,EAAA,CAAA;AAExD,IAAO,OAAA;AAAA,MACL,CAAA,EAAG,UAAU,aAAc,CAAA,IAAA;AAAA,MAC3B,CAAA,EAAG,UAAU,aAAc,CAAA,GAAA;AAAA,KAC7B,CAAA;AAAA,GACF;AACF;;;;"}

package/esm/drag-drop/Draggable.css.js

@@ -0,0 +1,4 @@
+var draggableCss = ".vuuDraggable {\n  background: transparent;\n  box-shadow: var(--salt-overlayable-shadow-drag);\n  cursor: var(--salt-draggable-grab-cursor-active);\n  position: absolute;\n  opacity: .95;\n  z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n  display: var(--vuuDraggable-display, inline-block);\n  height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));\n  transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;\n  width: var(--vuuDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n  display: var(--saltDraggable-display, inline-block);\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  height: 0px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n  transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  background-color: var(--salt-palette-accent-background);\n  height: 2px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n  background-color: var(--salt-palette-accent-background);\n  position: absolute;\n  top: -2px;\n  left: -3px;\n}\n\n.vuuDraggable-settling {\n  transition-property: left, top;\n  transition-duration: .15s;\n  transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n  order: 1;\n}";
+
+export { draggableCss as default };
+//# sourceMappingURL=Draggable.css.js.map

package/esm/drag-drop/Draggable.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Draggable.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/drag-drop/Draggable.js

@@ -0,0 +1,90 @@
+import { jsx } from 'react/jsx-runtime';
+import { useForkRef } from '@salt-ds/core';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef, useCallback, useMemo } from 'react';
+import { Portal, PopupComponent } from '@vuu-ui/vuu-popups';
+import draggableCss from './Draggable.css.js';
+
+const makeClassNames = (classNames) => classNames.split(" ").map((className) => `vuuDraggable-${className}`);
+const Draggable = forwardRef(
+  function Draggable2({ wrapperClassName, element, onDropped, onTransitionEnd, style, scale = 1 }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-draggable",
+      css: draggableCss,
+      window: targetWindow
+    });
+    const handleVuuDrop = useCallback(() => {
+      onDropped?.();
+    }, [onDropped]);
+    const callbackRef = useCallback(
+      (el) => {
+        if (el) {
+          el.innerHTML = "";
+          el.appendChild(element);
+          if (scale !== 1) {
+            el.style.transform = `scale(${scale},${scale})`;
+          }
+          el.addEventListener("vuu-dropped", handleVuuDrop);
+        }
+      },
+      [element, handleVuuDrop, scale]
+    );
+    const forkedRef = useForkRef(forwardedRef, callbackRef);
+    const position = useMemo(
+      () => ({
+        left: 0,
+        top: 0
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      PopupComponent,
+      {
+        anchorElement: { current: document.body },
+        className: "vuuPopup",
+        placement: "absolute",
+        position,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx("vuuDraggable", ...makeClassNames(wrapperClassName)),
+            ref: forkedRef,
+            onTransitionEnd,
+            style
+          }
+        )
+      }
+    ) });
+  }
+);
+const createDragSpacer = (transitioning) => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-spacer";
+  if (transitioning) {
+    spacer.addEventListener("transitionend", () => {
+      transitioning.current = false;
+    });
+  }
+  return spacer;
+};
+const createDropIndicatorPosition = () => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-dropIndicatorPosition";
+  return spacer;
+};
+const createDropIndicator = (transitioning) => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-dropIndicator";
+  if (transitioning) {
+    spacer.addEventListener("transitionend", () => {
+      transitioning.current = false;
+    });
+  }
+  return spacer;
+};
+
+export { Draggable, createDragSpacer, createDropIndicator, createDropIndicatorPosition };
+//# sourceMappingURL=Draggable.js.map

package/esm/drag-drop/Draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Draggable.js","sources":["../../src/drag-drop/Draggable.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  MutableRefObject,\n  RefCallback,\n  TransitionEventHandler,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { PopupComponent as Popup, Portal } from \"@vuu-ui/vuu-popups\";\n\nimport draggableCss from \"./Draggable.css\";\n\nconst makeClassNames = (classNames: string) =>\n  classNames.split(\" \").map((className) => `vuuDraggable-${className}`);\n\nexport interface DraggableProps extends HTMLAttributes<HTMLDivElement> {\n  wrapperClassName: string;\n  element: HTMLElement;\n  onDropped?: () => void;\n  onTransitionEnd?: TransitionEventHandler;\n  scale?: number;\n  style: CSSProperties;\n}\n\nexport const Draggable = forwardRef<HTMLDivElement, DraggableProps>(\n  function Draggable(\n    { wrapperClassName, element, onDropped, onTransitionEnd, style, scale = 1 },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-draggable\",\n      css: draggableCss,\n      window: targetWindow,\n    });\n\n    const handleVuuDrop = useCallback(() => {\n      onDropped?.();\n    }, [onDropped]);\n\n    const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n      (el: HTMLDivElement) => {\n        if (el) {\n          el.innerHTML = \"\";\n          el.appendChild(element);\n          if (scale !== 1) {\n            el.style.transform = `scale(${scale},${scale})`;\n          }\n          el.addEventListener(\"vuu-dropped\", handleVuuDrop);\n        }\n      },\n      [element, handleVuuDrop, scale]\n    );\n    const forkedRef = useForkRef<HTMLDivElement>(forwardedRef, callbackRef);\n\n    const position = useMemo(\n      () => ({\n        left: 0,\n        top: 0,\n      }),\n      []\n    );\n\n    return (\n      <Portal>\n        <Popup\n          anchorElement={{ current: document.body }}\n          className=\"vuuPopup\"\n          placement=\"absolute\"\n          position={position}\n        >\n          <div\n            className={cx(\"vuuDraggable\", ...makeClassNames(wrapperClassName))}\n            ref={forkedRef}\n            onTransitionEnd={onTransitionEnd}\n            style={style}\n          />\n        </Popup>\n      </Portal>\n    );\n  }\n);\n\n// const colors = [\"black\", \"red\", \"green\", \"yellow\"];\n// let color_idx = 0;\nexport const createDragSpacer = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  // const idx = color_idx++ % 4;\n\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-spacer\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n\nexport const createDropIndicatorPosition = (): HTMLElement => {\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-dropIndicatorPosition\";\n  return spacer;\n};\n\nexport const createDropIndicator = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  // const idx = color_idx++ % 4;\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-dropIndicator\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n"],"names":["Draggable","Popup"],"mappings":"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"}

package/esm/drag-drop/dragDropTypes.js

@@ -0,0 +1,5 @@
+const FWD = "fwd";
+const BWD = "bwd";
+
+export { BWD, FWD };
+//# sourceMappingURL=dragDropTypes.js.map

package/esm/drag-drop/dragDropTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragDropTypes.js","sources":["../../src/drag-drop/dragDropTypes.ts"],"sourcesContent":["import { MouseEventHandler, RefObject } from \"react\";\nimport { orientationType } from \"@vuu-ui/vuu-utils\";\nimport { DragDropState } from \"./DragDropState\";\n\n//-----------------------------------\n// From useScrollPosition in List\nexport type ViewportRange = {\n  atEnd: boolean;\n  atStart: boolean;\n  from: number;\n  to: number;\n};\n\n// From overflow types - probably don't need\ntype dimension = \"width\" | \"height\" | \"scrollWidth\" | \"scrollHeight\";\n\ntype dimensions = {\n  size: dimension;\n  depth: dimension;\n  scrollDepth: dimension;\n};\n\nexport type dimensionsType = {\n  horizontal: dimensions;\n  vertical: dimensions;\n};\n\n//-----------------------------------\n\nexport type dragStrategy =\n  | \"drop-indicator\"\n  | \"natural-movement\"\n  | \"drag-copy\"\n  | \"drop-only\";\n\nexport type Direction = \"fwd\" | \"bwd\";\nexport const FWD: Direction = \"fwd\";\nexport const BWD: Direction = \"bwd\";\n\nexport interface MousePosition {\n  clientX: number;\n  clientY: number;\n}\n\nexport interface MouseOffset {\n  x: number;\n  y: number;\n}\n\nexport type Rect = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport interface DragHookResult {\n  draggable?: JSX.Element;\n  dropIndicator?: JSX.Element;\n  draggedItemIndex?: number;\n  isDragging: boolean;\n  isScrolling: RefObject<boolean>;\n  onMouseDown?: MouseEventHandler;\n  revealOverflowedItems?: boolean;\n}\n\nexport interface InternalDragHookResult\n  extends Omit<DragHookResult, \"isDragging\" | \"isScrolling\"> {\n  beginDrag: (dragElement: HTMLElement) => void;\n  drag: (dragPos: number, mouseMoveDirection: \"fwd\" | \"bwd\") => void;\n  drop: () => DropOptions;\n  handleScrollStart?: (scrollDirection: \"fwd\" | \"bwd\") => void;\n  handleScrollStop?: (\n    scrollDirection: \"fwd\" | \"bwd\",\n    _scrollPos: number,\n    atEnd: boolean\n  ) => void;\n  /**\n   * Draggable item has been dragged out of container. Remove any local drop\n   * indicators. Dragged element itself should not yet be removed from DOM.\n   */\n  releaseDrag?: () => void;\n}\n\nexport interface DropOptions {\n  fromIndex: number;\n  toIndex: number;\n  isExternal?: boolean;\n  payload?: unknown;\n}\n\nexport type DragStartHandler = (dragDropState: DragDropState) => void;\n\nexport type DropHandler = (options: DropOptions) => void;\n\nexport interface DragDropProps {\n  allowDragDrop?: boolean | dragStrategy;\n  containerRef: RefObject<HTMLElement>;\n  /** this is the className that will be assigned during drag to the dragged element  */\n  draggableClassName: string;\n  extendedDropZone?: boolean;\n  getDragPayload?: (dragElement: HTMLElement) => unknown;\n  id?: string;\n  isDragSource?: boolean;\n  isDropTarget?: boolean;\n  itemQuery?: string;\n  onDragStart?: DragStartHandler;\n  onDrop: DropHandler;\n  onDropSettle?: (toIndex: number) => void;\n  orientation: orientationType;\n  /**\n   * The scrolling container does not necessarily have to be a\n   * descendant of the container, it may be an ancestor element;\n   */\n  scrollingContainerRef?: RefObject<HTMLElement>;\n  // selected?: CollectionItem<unknown> | CollectionItem<unknown>[] | null;\n  viewportRange?: ViewportRange;\n}\n\nexport type DragDropHook = (props: DragDropProps) => DragHookResult;\n\nexport interface InternalDragDropProps\n  extends Omit<DragDropProps, \"draggableClassName\" | \"id\" | \"onDrop\"> {\n  isDragSource?: boolean;\n  isDropTarget?: boolean;\n  selected?: unknown;\n}\n\nexport type DragDropContext = {\n  dragElement: HTMLElement;\n  dragPayload: unknown;\n  mouseOffset: MouseOffset;\n};\n"],"names":[],"mappings":"AAoCO,MAAM,GAAiB,GAAA,MAAA;AACvB,MAAM,GAAiB,GAAA;;;;"}

package/esm/drag-drop/drop-target-utils.js

@@ -0,0 +1,228 @@
+const LEFT_RIGHT = ["left", "right"];
+const TOP_BOTTOM = ["top", "bottom"];
+const NOT_OVERFLOWED = ":not(.wrapped)";
+const NOT_HIDDEN = ':not([aria-hidden="true"])';
+const cloneElement = (element) => {
+  const dolly = element.cloneNode(true);
+  dolly.removeAttribute("id");
+  dolly.dataset.index = "-1";
+  return dolly;
+};
+const measureElementSizeAndPosition = (element, dimension = "width", includeAutoMargin = false) => {
+  const pos = dimension === "width" ? "left" : "top";
+  const { [dimension]: size, [pos]: position } = element.getBoundingClientRect();
+  const { padEnd = false, padStart = false } = element.dataset;
+  const style = getComputedStyle(element);
+  const [start, end] = dimension === "width" ? LEFT_RIGHT : TOP_BOTTOM;
+  const marginStart = padStart && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${start}`), 10);
+  const marginEnd = padEnd && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${end}`), 10);
+  let minWidth = size;
+  const flexShrink = parseInt(style.getPropertyValue("flex-shrink"), 10);
+  if (flexShrink > 0) {
+    const flexBasis = parseInt(style.getPropertyValue("flex-basis"), 10);
+    if (!isNaN(flexBasis) && flexBasis > 0) {
+      minWidth = flexBasis;
+    }
+  }
+  return [position, marginStart + minWidth + marginEnd];
+};
+const DIMENSIONS = {
+  horizontal: {
+    CLIENT_POS: "clientX",
+    CLIENT_SIZE: "clientWidth",
+    CONTRA: "top",
+    CONTRA_CLIENT_POS: "clientY",
+    CONTRA_END: "bottom",
+    CONTRA_POS: "y",
+    DIMENSION: "width",
+    END: "right",
+    POS: "x",
+    SCROLL_POS: "scrollLeft",
+    SCROLL_SIZE: "scrollWidth",
+    START: "left"
+  },
+  vertical: {
+    CLIENT_POS: "clientY",
+    CLIENT_SIZE: "clientHeight",
+    CONTRA: "left",
+    CONTRA_CLIENT_POS: "clientX",
+    CONTRA_END: "right",
+    CONTRA_POS: "x",
+    DIMENSION: "height",
+    END: "bottom",
+    POS: "y",
+    SCROLL_POS: "scrollTop",
+    SCROLL_SIZE: "scrollHeight",
+    START: "top"
+  }
+};
+const dimensions = (orientation) => DIMENSIONS[orientation];
+const getItemById = (measuredItems, id) => {
+  const result = measuredItems.find((item) => item.id === id);
+  if (result) {
+    return result;
+  }
+};
+const removeDraggedItem = (measuredItems, index) => {
+  measuredItems.splice(index, 1);
+  for (let i = index; i < measuredItems.length; i++) {
+    measuredItems[i].currentIndex -= 1;
+  }
+};
+const measureDropTargets = (container, orientation, itemQuery, viewportRange, draggedItemId) => {
+  const dragThresholds = [];
+  const { DIMENSION } = dimensions(orientation);
+  const children = Array.from(
+    itemQuery ? container.querySelectorAll(itemQuery) : container.children
+  );
+  const itemCount = children.length;
+  const start = typeof viewportRange?.from === "number" ? viewportRange.atEnd ? Math.max(0, viewportRange.from - 1) : viewportRange.from : 0;
+  const end = typeof viewportRange?.to === "number" ? Math.min(viewportRange.to + 2, itemCount - 1) : itemCount - 1;
+  for (let index = start; index <= end; index++) {
+    const element = children[index];
+    const [start2, size] = measureElementSizeAndPosition(element, DIMENSION);
+    const isLast = index === itemCount - 1;
+    const id = element.id;
+    dragThresholds.push({
+      currentIndex: index,
+      id,
+      index,
+      isDraggedItem: draggedItemId === id,
+      isLast,
+      isOverflowIndicator: element.dataset.index === "overflow",
+      element,
+      start: start2,
+      end: start2 + size,
+      size,
+      mid: start2 + size / 2
+    });
+  }
+  return dragThresholds;
+};
+const getIndexOfDraggedItem = (dropTargets) => dropTargets.findIndex((d) => d.isDraggedItem);
+const mutateDropTargetsSwitchDropTargetPosition = (dropTargets, direction) => {
+  const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+  const indexOfTarget = direction === "fwd" ? indexOfDraggedItem + 1 : indexOfDraggedItem - 1;
+  if (indexOfTarget < 0 || indexOfTarget >= dropTargets.length) {
+    throw Error("switchDropTargetPosition index out of range");
+  }
+  const draggedItem = dropTargets.at(indexOfDraggedItem);
+  const targetItem = dropTargets.at(indexOfTarget);
+  const diff = targetItem.size - draggedItem.size;
+  if (direction === "fwd") {
+    const draggedStart = targetItem.start + diff;
+    const draggedEnd = targetItem.end;
+    const newDraggedItem = {
+      ...draggedItem,
+      start: draggedStart,
+      mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),
+      end: draggedEnd
+    };
+    const targetStart = draggedItem.start;
+    const targetEnd = draggedItem.end + diff;
+    const newTargetItem = {
+      ...targetItem,
+      start: targetStart,
+      mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),
+      end: targetEnd
+    };
+    dropTargets.splice(indexOfDraggedItem, 2, newTargetItem, newDraggedItem);
+  } else {
+    const draggedStart = targetItem.start;
+    const draggedEnd = targetItem.end - diff;
+    const newDraggedItem = {
+      ...draggedItem,
+      start: draggedStart,
+      mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),
+      end: draggedEnd
+    };
+    const targetStart = draggedItem.start - diff;
+    const targetEnd = draggedItem.end;
+    const newTargetItem = {
+      ...targetItem,
+      start: targetStart,
+      mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),
+      end: targetEnd
+    };
+    dropTargets.splice(indexOfTarget, 2, newDraggedItem, newTargetItem);
+  }
+};
+const getNextDropTarget = (dropTargets, pos, draggedItemSize, mouseMoveDirection) => {
+  const len = dropTargets.length;
+  const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+  const draggedItem = dropTargets[indexOfDraggedItem];
+  if (mouseMoveDirection === "fwd") {
+    const leadingEdge = Math.round(pos + draggedItemSize);
+    for (let index = len - 1; index >= 0; index--) {
+      const dropTarget = dropTargets[index];
+      if (leadingEdge > dropTarget.mid) {
+        if (draggedItem && index < indexOfDraggedItem) {
+          return draggedItem;
+        } else {
+          return dropTarget;
+        }
+      }
+    }
+  } else {
+    const leadingEdge = Math.round(pos);
+    for (let index = 0; index < len; index++) {
+      const dropTarget = dropTargets[index];
+      if (leadingEdge < dropTarget.mid) {
+        if (index > indexOfDraggedItem) {
+          return draggedItem;
+        } else {
+          return dropTarget;
+        }
+      }
+    }
+  }
+  throw Error("no dropTarget identified");
+};
+function constrainRect(targetRect, constraintRect) {
+  const { height, left, top, width } = targetRect;
+  const { height: constrainedHeight, width: constrainedWidth } = constraintRect;
+  return {
+    height: Math.min(height, constrainedHeight),
+    left,
+    top,
+    width: Math.min(width, constrainedWidth)
+  };
+}
+const dropTargetsDebugString = (dropTargets) => dropTargets.map(
+  (d, i) => `
+${d.isDraggedItem ? "*" : " "}[${i}] width : ${Math.floor(
+    d.size
+  )}    ${Math.floor(d.start)} - ${Math.floor(d.end)} (mid ${Math.floor(
+    d.mid
+  )})  ${d.element?.textContent} `
+).join("");
+const getItemParentContainer = (container, itemQuery) => {
+  const firstItem = container?.querySelector(
+    `${itemQuery}:not([aria-hidden="true"])`
+  );
+  if (firstItem) {
+    return firstItem.parentElement;
+  } else {
+    return null;
+  }
+};
+const getScrollableContainer = (container, itemQuery) => {
+  const immediateParent = getItemParentContainer(container, itemQuery);
+  if (immediateParent === container) {
+    return container;
+  } else {
+    return immediateParent?.parentElement;
+  }
+};
+const isContainerScrollable = (scrollableContainer, orientation) => {
+  if (scrollableContainer === null) {
+    return false;
+  } else {
+    const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
+    const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = scrollableContainer;
+    return scrollSize > clientSize;
+  }
+};
+
+export { NOT_HIDDEN, NOT_OVERFLOWED, cloneElement, constrainRect, dimensions, dropTargetsDebugString, getIndexOfDraggedItem, getItemById, getItemParentContainer, getNextDropTarget, getScrollableContainer, isContainerScrollable, measureDropTargets, measureElementSizeAndPosition, mutateDropTargetsSwitchDropTargetPosition, removeDraggedItem };
+//# sourceMappingURL=drop-target-utils.js.map