@vuu-ui/vuu-ui-controls 2.1.19-beta.2 → 2.1.19-beta.3

package/cjs/date-picker/DatePickerPanel.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var date = require('@internationalized/date');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
+var Calendar = require('../calendar/Calendar.js');
+require('../calendar/internal/CalendarContext.js');
+require('../calendar/internal/utils.js');
+var useSelection = require('../calendar/useSelection.js');
+var DatePickerContext = require('./DatePickerContext.js');
+var DatePickerPanel$1 = require('./DatePickerPanel.css.js');
+
+const withBaseName = core.makePrefixer("saltDatePickerPanel");
+function getHoveredDate(date$1, compact, hoveredDate) {
+  return date$1 && !compact && hoveredDate && hoveredDate.compare(date.endOfMonth(date$1)) > 0 ? date.endOfMonth(date$1) : hoveredDate;
+}
+const DatePickerPanel = React.forwardRef(function DatePickerPanel2(props, ref) {
+  const {
+    className,
+    onSelect,
+    helperText,
+    CalendarProps,
+    visibleMonths,
+    ...rest
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-date-picker-panel",
+    css: DatePickerPanel$1,
+    window: targetWindow
+  });
+  const { Component: FloatingComponent } = core.useFloatingComponent();
+  const [hoveredDate, setHoveredDate] = React.useState(null);
+  const {
+    openState,
+    selectedDate,
+    setSelectedDate,
+    startVisibleMonth,
+    setStartVisibleMonth,
+    endVisibleMonth,
+    setEndVisibleMonth,
+    setOpen,
+    context,
+    getPanelPosition,
+    selectionVariant
+  } = DatePickerContext.useDatePickerContext();
+  const { a11yProps } = core.useFormFieldProps();
+  const isRangePicker = useSelection.isRangeOrOffsetSelectionWithStartDate(selectedDate) || selectionVariant === "range" && selectedDate === void 0;
+  const compact = visibleMonths === 1;
+  const setRangeDate = (event, newDate) => {
+    setSelectedDate(newDate);
+    onSelect?.(event, newDate);
+    if (newDate.startDate && newDate.endDate) {
+      setOpen(false);
+    }
+  };
+  const setSingleDate = (event, newDate) => {
+    setSelectedDate(newDate);
+    onSelect?.(event, newDate);
+    setOpen(false);
+  };
+  const handleHoveredDateChange = (_, newHoveredDate) => {
+    setHoveredDate(newHoveredDate);
+  };
+  React.useEffect(() => {
+    if (isRangePicker) {
+      if (selectedDate?.startDate) {
+        setStartVisibleMonth(selectedDate.startDate);
+        setEndVisibleMonth(selectedDate.startDate.add({ months: 1 }));
+      }
+    } else {
+      setStartVisibleMonth(selectedDate);
+    }
+  }, [isRangePicker, selectedDate, setEndVisibleMonth, setStartVisibleMonth]);
+  const firstCalendarProps = isRangePicker ? {
+    selectionVariant: "range",
+    hoveredDate: getHoveredDate(
+      selectedDate?.startDate,
+      compact,
+      hoveredDate
+    ),
+    onHoveredDateChange: handleHoveredDateChange,
+    selectedDate,
+    onSelectedDateChange: setRangeDate,
+    maxDate: !compact && selectedDate?.startDate ? date.endOfMonth(selectedDate?.startDate) : void 0,
+    hideOutOfRangeDates: true
+  } : {
+    selectionVariant: "default",
+    selectedDate,
+    onSelectedDateChange: setSingleDate
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FloatingComponent,
+    {
+      open: openState,
+      className: cx.clsx(withBaseName(), className),
+      "aria-modal": "true",
+      ref,
+      focusManagerProps: context ? {
+        context,
+        initialFocus: 4
+      } : void 0,
+      ...getPanelPosition(),
+      ...a11yProps,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(core.StackLayout, { separators: true, gap: 0, className: withBaseName("container"), children: [
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, { className: withBaseName("header"), children: /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldHelperText, { children: helperText }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(core.FormFieldContext.Provider, { value: {}, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Calendar.Calendar,
+            {
+              visibleMonth: startVisibleMonth,
+              onVisibleMonthChange: (_, month) => setStartVisibleMonth(month),
+              ...firstCalendarProps,
+              ...CalendarProps
+            }
+          ),
+          isRangePicker && !compact && /* @__PURE__ */ jsxRuntime.jsx(
+            Calendar.Calendar,
+            {
+              selectionVariant: "range",
+              hoveredDate,
+              onHoveredDateChange: handleHoveredDateChange,
+              selectedDate,
+              onSelectedDateChange: setRangeDate,
+              visibleMonth: endVisibleMonth,
+              onVisibleMonthChange: (_, month) => setEndVisibleMonth(month),
+              hideOutOfRangeDates: true,
+              minDate: selectedDate?.startDate ? date.startOfMonth(selectedDate?.startDate)?.add({
+                months: 1
+              }) : void 0,
+              ...CalendarProps
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+});
+
+exports.DatePickerPanel = DatePickerPanel;
+//# sourceMappingURL=DatePickerPanel.js.map

package/cjs/date-picker/DatePickerPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerPanel.js","sources":["../../../../packages/vuu-ui-controls/src/date-picker/DatePickerPanel.tsx"],"sourcesContent":["import {\n  type DateValue,\n  endOfMonth,\n  startOfMonth,\n} from \"@internationalized/date\";\nimport {\n  FlexItem,\n  FlexLayout,\n  FormFieldContext,\n  type FormFieldContextValue,\n  FormFieldHelperText,\n  StackLayout,\n  makePrefixer,\n  useFloatingComponent,\n  useFormFieldProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  Calendar,\n  type CalendarProps,\n  type RangeSelectionValueType,\n  type SingleSelectionValueType,\n  type UseRangeSelectionCalendarProps,\n  type UseSingleSelectionCalendarProps,\n  isRangeOrOffsetSelectionWithStartDate,\n} from \"../calendar\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport dateInputPanelCss from \"./DatePickerPanel.css\";\n\nexport interface DatePickerPanelProps<SelectionVariantType>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  onSelect?: (\n    event: SyntheticEvent,\n    selectedDate?: SelectionVariantType,\n  ) => void;\n  helperText?: string;\n  visibleMonths?: 1 | 2;\n  CalendarProps?: Partial<\n    Omit<\n      CalendarProps,\n      | \"selectionVariant\"\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n    >\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nfunction getHoveredDate(\n  date?: DateValue | null,\n  compact?: boolean,\n  hoveredDate?: DateValue | null,\n) {\n  return date &&\n    !compact &&\n    hoveredDate &&\n    hoveredDate.compare(endOfMonth(date)) > 0\n    ? endOfMonth(date)\n    : hoveredDate;\n}\n\nexport const DatePickerPanel = forwardRef<\n  HTMLDivElement,\n  DatePickerPanelProps<SingleSelectionValueType | RangeSelectionValueType>\n>(function DatePickerPanel(props, ref) {\n  const {\n    className,\n    onSelect,\n    helperText,\n    CalendarProps,\n    visibleMonths,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-panel\",\n    css: dateInputPanelCss,\n    window: targetWindow,\n  });\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n  const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n  const {\n    openState,\n    selectedDate,\n    setSelectedDate,\n    startVisibleMonth,\n    setStartVisibleMonth,\n    endVisibleMonth,\n    setEndVisibleMonth,\n    setOpen,\n    context,\n    getPanelPosition,\n    selectionVariant,\n  } = useDatePickerContext();\n\n  const { a11yProps } = useFormFieldProps();\n  const isRangePicker =\n    isRangeOrOffsetSelectionWithStartDate(selectedDate) ||\n    (selectionVariant === \"range\" && selectedDate === undefined);\n  const compact = visibleMonths === 1;\n\n  const setRangeDate: UseRangeSelectionCalendarProps[\"onSelectedDateChange\"] = (\n    event,\n    newDate,\n  ) => {\n    setSelectedDate(newDate);\n    onSelect?.(event, newDate);\n    if (newDate.startDate && newDate.endDate) {\n      setOpen(false);\n    }\n  };\n  const setSingleDate: UseSingleSelectionCalendarProps[\"onSelectedDateChange\"] =\n    (event, newDate) => {\n      setSelectedDate(newDate);\n      onSelect?.(event, newDate);\n      setOpen(false);\n    };\n  const handleHoveredDateChange: CalendarProps[\"onHoveredDateChange\"] = (\n    _,\n    newHoveredDate,\n  ) => {\n    setHoveredDate(newHoveredDate);\n  };\n  useEffect(() => {\n    if (isRangePicker) {\n      if (selectedDate?.startDate) {\n        setStartVisibleMonth(selectedDate.startDate);\n        setEndVisibleMonth(selectedDate.startDate.add({ months: 1 }));\n      }\n    } else {\n      setStartVisibleMonth(selectedDate);\n    }\n  }, [isRangePicker, selectedDate, setEndVisibleMonth, setStartVisibleMonth]);\n\n  const firstCalendarProps: CalendarProps = isRangePicker\n    ? {\n        selectionVariant: \"range\",\n        hoveredDate: getHoveredDate(\n          selectedDate?.startDate,\n          compact,\n          hoveredDate,\n        ),\n        onHoveredDateChange: handleHoveredDateChange,\n        selectedDate: selectedDate,\n        onSelectedDateChange: setRangeDate,\n        maxDate:\n          !compact && selectedDate?.startDate\n            ? endOfMonth(selectedDate?.startDate)\n            : undefined,\n        hideOutOfRangeDates: true,\n      }\n    : {\n        selectionVariant: \"default\",\n        selectedDate: selectedDate,\n        onSelectedDateChange: setSingleDate,\n      };\n  return (\n    <FloatingComponent\n      open={openState}\n      className={clsx(withBaseName(), className)}\n      aria-modal=\"true\"\n      ref={ref}\n      focusManagerProps={\n        context\n          ? {\n              context: context,\n              initialFocus: 4,\n            }\n          : undefined\n      }\n      {...getPanelPosition()}\n      {...a11yProps}\n      {...rest}\n    >\n      <StackLayout separators gap={0} className={withBaseName(\"container\")}>\n        {helperText && (\n          <FlexItem className={withBaseName(\"header\")}>\n            <FormFieldHelperText>{helperText}</FormFieldHelperText>\n          </FlexItem>\n        )}\n        <FlexLayout>\n          {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n          <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n            <Calendar\n              visibleMonth={startVisibleMonth}\n              onVisibleMonthChange={(_, month) => setStartVisibleMonth(month)}\n              {...firstCalendarProps}\n              {...CalendarProps}\n            />\n            {isRangePicker && !compact && (\n              <Calendar\n                selectionVariant=\"range\"\n                hoveredDate={hoveredDate}\n                onHoveredDateChange={handleHoveredDateChange}\n                selectedDate={selectedDate}\n                onSelectedDateChange={setRangeDate}\n                visibleMonth={endVisibleMonth}\n                onVisibleMonthChange={(_, month) => setEndVisibleMonth(month)}\n                hideOutOfRangeDates\n                minDate={\n                  selectedDate?.startDate\n                    ? startOfMonth(selectedDate?.startDate)?.add({\n                        months: 1,\n                      })\n                    : undefined\n                }\n                {...CalendarProps}\n              />\n            )}\n          </FormFieldContext.Provider>\n        </FlexLayout>\n      </StackLayout>\n    </FloatingComponent>\n  );\n});\n"],"names":["makePrefixer","date","endOfMonth","forwardRef","DatePickerPanel","useWindow","useComponentCssInjection","dateInputPanelCss","useFloatingComponent","useState","useDatePickerContext","useFormFieldProps","isRangeOrOffsetSelectionWithStartDate","useEffect","jsx","clsx","jsxs","StackLayout","FlexItem","FormFieldHelperText","FlexLayout","FormFieldContext","Calendar","startOfMonth"],"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":["../../../../packages/vuu-ui-controls/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,36 @@
+'use strict';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class DragDropState {
+  constructor(mousePosition, dragElement) {
+    /** Distance between start (top | left) of dragged element and point where user pressed to drag */
+    __publicField(this, "mouseOffset");
+    /** Element where the initial mousedown triggered the drag operation */
+    __publicField(this, "initialDragElement");
+    /** Element being dragged, (initial element cloned and rendered in portal). */
+    __publicField(this, "draggableElement", null);
+    __publicField(this, "payload", null);
+    /** Used to capture a ref to the Draggable ReactElement */
+    __publicField(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":["../../../../packages/vuu-ui-controls/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 ReactElement */\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;AARpE;AAAA,IAAS,aAAA,CAAA,IAAA,EAAA,aAAA,CAAA;AAET;AAAA,IAAS,aAAA,CAAA,IAAA,EAAA,oBAAA,CAAA;AAET;AAAA,IAAuC,aAAA,CAAA,IAAA,EAAA,kBAAA,EAAA,IAAA,CAAA;AAEvC,IAAmB,aAAA,CAAA,IAAA,EAAA,SAAA,EAAA,IAAA,CAAA;AAQnB;AAAA,IAAA,aAAA,CAAA,IAAA,EAAA,cAAA,EAAe,CAAC,EAA2B,KAAA;AACzC,MAAA,IAAA,CAAK,gBAAmB,GAAA,EAAA;AAAA,KAC1B,CAAA;AAPE,IAAA,IAAA,CAAK,kBAAqB,GAAA,WAAA;AAC1B,IAAA,IAAA,CAAK,WAAc,GAAA,IAAA,CAAK,cAAe,CAAA,aAAA,EAAe,WAAW,CAAA;AAAA;AACnE,EAOA,WAAW,OAAkB,EAAA;AAC3B,IAAA,IAAA,CAAK,OAAU,GAAA,OAAA;AAAA;AACjB,EAEQ,cAAA,CACN,eACA,WACA,EAAA;AACA,IAAM,MAAA,EAAE,OAAS,EAAA,OAAA,EAAY,GAAA,aAAA;AAC7B,IAAM,MAAA,aAAA,GAAgB,YAAY,qBAAsB,EAAA;AAExD,IAAO,OAAA;AAAA,MACL,CAAA,EAAG,UAAU,aAAc,CAAA,IAAA;AAAA,MAC3B,CAAA,EAAG,UAAU,aAAc,CAAA;AAAA,KAC7B;AAAA;AAEJ;;;;"}

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,90 @@
+'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";
+  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":["../../../../packages/vuu-ui-controls/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":["../../../../packages/vuu-ui-controls/src/drag-drop/dragDropTypes.ts"],"sourcesContent":["import { MouseEventHandler, ReactElement, RefObject } from \"react\";\nimport type { 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?: ReactElement;\n  dropIndicator?: ReactElement;\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 | null>;\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 | null>;\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;AACvB,MAAM,GAAiB,GAAA;;;;;"}