@vuu-ui/vuu-ui-controls 0.0.26

package/cjs/date-popup/DatePopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePopup.js","sources":["../../src/date-popup/DatePopup.tsx"],"sourcesContent":["import {\n  DateValue,\n  getLocalTimeZone,\n  today as getTodayDate,\n} from \"@internationalized/date\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { Calendar, CalendarProps } from \"../calendar\";\nimport { DropdownBase, DropdownCloseHandler } from \"../dropdown\";\nimport { IconButton } from \"../icon-button\";\nimport { useDatePopup } from \"./useDatePopup\";\n\nconst classBase = \"vuuDatePopup\";\n\nexport interface DatePopupProps\n  extends Pick<CalendarProps, \"selectionVariant\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"onKeyDown\"> {\n  \"data-embedded\"?: boolean;\n  selectedDate?: DateValue;\n  onPopupClose?: DropdownCloseHandler;\n  onPopupOpen?: () => void;\n  onChange: (date: DateValue) => void;\n}\n\nconst tz = getLocalTimeZone();\nconst today = getTodayDate(tz);\n\nexport const DatePopup = forwardRef<HTMLButtonElement, DatePopupProps>(\n  function DatePopup(\n    {\n      selectedDate,\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectionVariant,\n      \"data-embedded\": dataEmbedded,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const {\n      calendarRef,\n      date,\n      isOpen,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      handleOpenChange,\n      triggererRef,\n      visibleMonth,\n    } = useDatePopup({\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectedDate: selectedDate || today,\n      selectionVariant,\n    });\n\n    return (\n      <DropdownBase\n        {...htmlAttributes}\n        className={classBase}\n        isOpen={isOpen}\n        placement=\"below\"\n        onOpenChange={handleOpenChange}\n      >\n        <IconButton\n          data-embedded={dataEmbedded}\n          icon=\"date\"\n          ref={useForkRef(forwardedRef, triggererRef)}\n          variant=\"secondary\"\n          className={cx({ \"saltButton-active\": isOpen })}\n        />\n        <Calendar\n          visibleMonth={visibleMonth}\n          ref={calendarRef}\n          selectedDate={date}\n          selectionVariant=\"default\"\n          onSelectedDateChange={onSelectedDateChange}\n          onVisibleMonthChange={onVisibleMonthChange}\n          className={`${classBase}-calendar`}\n        />\n      </DropdownBase>\n    );\n  }\n);\n"],"names":["getLocalTimeZone","getTodayDate","forwardRef","DatePopup","useDatePopup","jsxs","DropdownBase","jsx","IconButton","useForkRef","Calendar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAYlB,MAAM,KAAKA,qBAAiB,EAAA,CAAA;AAC5B,MAAM,KAAA,GAAQC,WAAa,EAAE,CAAA,CAAA;AAEtB,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,YAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAiB,EAAA,YAAA;AAAA,IACjB,GAAG,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,QACEC,yBAAa,CAAA;AAAA,MACf,QAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAc,YAAgB,IAAA,KAAA;AAAA,MAC9B,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IACE,uBAAAC,eAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAW,EAAA,SAAA;AAAA,QACX,MAAA;AAAA,QACA,SAAU,EAAA,OAAA;AAAA,QACV,YAAc,EAAA,gBAAA;AAAA,QAEd,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,qBAAA;AAAA,YAAA;AAAA,cACC,eAAe,EAAA,YAAA;AAAA,cACf,IAAK,EAAA,MAAA;AAAA,cACL,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAAA,cAC1C,OAAQ,EAAA,WAAA;AAAA,cACR,SAAW,EAAA,EAAA,CAAG,EAAE,mBAAA,EAAqB,QAAQ,CAAA;AAAA,aAAA;AAAA,WAC/C;AAAA,0BACAF,cAAA;AAAA,YAACG,iBAAA;AAAA,YAAA;AAAA,cACC,YAAA;AAAA,cACA,GAAK,EAAA,WAAA;AAAA,cACL,YAAc,EAAA,IAAA;AAAA,cACd,gBAAiB,EAAA,SAAA;AAAA,cACjB,oBAAA;AAAA,cACA,oBAAA;AAAA,cACA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,aAAA;AAAA,WACzB;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/cjs/date-popup/useDatePopup.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var React = require('react');
+
+const SELECTED_DAY = ".saltCalendarDay-selected:not(.saltCalendarDay-outOfRange)";
+const useDatePopup = ({
+  onChange,
+  onPopupClose,
+  onPopupOpen,
+  selectedDate
+}) => {
+  const [date, setDate] = React.useState(selectedDate);
+  const [, forceUpdate] = React.useState({});
+  const [isOpen, setIsOpen] = React.useState(false);
+  const triggererRef = React.useRef(null);
+  const calendarRef = React.useRef(null);
+  const visibleMonthRef = React.useRef(selectedDate);
+  const setVisibleMonth = React.useMemo(() => {
+    const setValue = (v) => {
+      if (v.toString() !== visibleMonthRef.current.toString()) {
+        visibleMonthRef.current = v;
+        forceUpdate({});
+      }
+    };
+    setValue(selectedDate);
+    return setValue;
+  }, [selectedDate]);
+  const handleOpenChange = React.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 = React.useCallback(
+    (e, date2) => {
+      setDate(date2);
+      console.log(date2.toString());
+      visibleMonthRef.current = date2;
+      handleOpenChange(false, "select");
+      onChange(date2);
+    },
+    [handleOpenChange, onChange]
+  );
+  const handleVisibleMonthChange = React.useCallback(
+    (e, date2) => {
+      setVisibleMonth(date2);
+    },
+    [setVisibleMonth]
+  );
+  return {
+    calendarRef,
+    date,
+    handleOpenChange,
+    isOpen,
+    onSelectedDateChange: handleDateSelection,
+    onVisibleMonthChange: handleVisibleMonthChange,
+    triggererRef,
+    visibleMonth: visibleMonthRef.current
+  };
+};
+
+exports.useDatePopup = useDatePopup;
+//# sourceMappingURL=useDatePopup.js.map

package/cjs/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":["useState","useRef","useMemo","useCallback","date"],"mappings":"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"}

package/cjs/drag-drop/DragDropProvider.js

@@ -0,0 +1,145 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useGlobalDragDrop = require('./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 = React.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 = React.useMemo(
+    () => /* @__PURE__ */ new Map(),
+    []
+  );
+  const dropHandlers = React.useMemo(() => /* @__PURE__ */ new Map(), []);
+  const handleDragOverDropTarget = React.useCallback(
+    (dropTargetId, dragDropState) => {
+      const resumeDrag2 = resumeDragHandlers.get(dropTargetId);
+      if (resumeDrag2) {
+        return resumeDrag2(dragDropState);
+      } else {
+        return false;
+      }
+    },
+    [resumeDragHandlers]
+  );
+  const handleDrop = React.useCallback(
+    (dropTargetId, dragDropState) => {
+      const handleDrop2 = dropHandlers.get(dropTargetId);
+      if (handleDrop2) {
+        handleDrop2(dragDropState);
+      }
+    },
+    [dropHandlers]
+  );
+  const { measuredDropTargetsRef, resumeDrag } = useGlobalDragDrop.useGlobalDragDrop({
+    onDragOverDropTarget: handleDragOverDropTarget,
+    onDrop: handleDrop
+  });
+  const [dragSources, dropTargets] = React.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 = React.useCallback(
+    (id, dragDropState) => {
+      measuredDropTargetsRef.current = measureDropTargets(dragSources.get(id));
+      resumeDrag(dragDropState);
+      return true;
+    },
+    [dragSources, measuredDropTargetsRef, resumeDrag]
+  );
+  const onEndOfDragOperation = React.useCallback((id) => {
+    console.log(`end of drag operation, id= ${id}`);
+  }, []);
+  const registerDragDropParty = React.useCallback(
+    (id, resumeDrag2, onDrop) => {
+      if (resumeDrag2) {
+        resumeDragHandlers.set(id, resumeDrag2);
+      } else if (onDrop) {
+        dropHandlers.set(id, onDrop);
+      }
+    },
+    [dropHandlers, resumeDragHandlers]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      dragSources,
+      dropTargets,
+      onDragOut,
+      onEndOfDragOperation,
+      registerDragDropParty
+    }),
+    [
+      dragSources,
+      dropTargets,
+      onDragOut,
+      onEndOfDragOperation,
+      registerDragDropParty
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DragDropContext.Provider, { value: contextValue, children });
+};
+const useDragDropProvider = (id) => {
+  const {
+    dragSources,
+    dropTargets,
+    onDragOut,
+    onEndOfDragOperation,
+    registerDragDropParty
+  } = React.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;
+  }
+};
+
+exports.DragDropProvider = DragDropProvider;
+exports.useDragDropProvider = useDragDropProvider;
+//# sourceMappingURL=DragDropProvider.js.map

package/cjs/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":["createContext","useMemo","useCallback","resumeDrag","handleDrop","useGlobalDragDrop","dropTargets","useContext"],"mappings":"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"}

package/cjs/drag-drop/DragDropState.js

@@ -0,0 +1,29 @@
+'use strict';
+
+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
+    };
+  }
+}
+
+exports.DragDropState = DragDropState;
+//# sourceMappingURL=DragDropState.js.map

package/cjs/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/cjs/drag-drop/Draggable.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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}";
+
+module.exports = draggableCss;
+//# sourceMappingURL=Draggable.css.js.map

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

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

package/cjs/drag-drop/Draggable.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var vuuPopups = require('@vuu-ui/vuu-popups');
+var Draggable$1 = require('./Draggable.css.js');
+
+const makeClassNames = (classNames) => classNames.split(" ").map((className) => `vuuDraggable-${className}`);
+const Draggable = React.forwardRef(
+  function Draggable2({ wrapperClassName, element, onDropped, onTransitionEnd, style, scale = 1 }, forwardedRef) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "vuu-draggable",
+      css: Draggable$1,
+      window: targetWindow
+    });
+    const handleVuuDrop = React.useCallback(() => {
+      onDropped?.();
+    }, [onDropped]);
+    const callbackRef = React.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 = core.useForkRef(forwardedRef, callbackRef);
+    const position = React.useMemo(
+      () => ({
+        left: 0,
+        top: 0
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(vuuPopups.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      vuuPopups.PopupComponent,
+      {
+        anchorElement: { current: document.body },
+        className: "vuuPopup",
+        placement: "absolute",
+        position,
+        children: /* @__PURE__ */ jsxRuntime.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;
+};
+
+exports.Draggable = Draggable;
+exports.createDragSpacer = createDragSpacer;
+exports.createDropIndicator = createDropIndicator;
+exports.createDropIndicatorPosition = createDropIndicatorPosition;
+//# sourceMappingURL=Draggable.js.map

package/cjs/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":["forwardRef","Draggable","useWindow","useComponentCssInjection","draggableCss","useCallback","useForkRef","useMemo","Portal","jsx","Popup"],"mappings":"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"}

package/cjs/drag-drop/dragDropTypes.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const FWD = "fwd";
+const BWD = "bwd";
+
+exports.BWD = BWD;
+exports.FWD = FWD;
+//# sourceMappingURL=dragDropTypes.js.map

package/cjs/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;;;;;"}