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

package/esm/date-picker/DatePickerPanel.js

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

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

@@ -1 +0,0 @@
-{"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":["DatePickerPanel"],"mappings":"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"}

package/esm/drag-drop/DragDropProvider.js

@@ -1,142 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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":["resumeDrag","handleDrop","dropTargets"],"mappings":"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"}

package/esm/drag-drop/DragDropState.js

@@ -1,34 +0,0 @@
-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
-    };
-  }
-}
-
-export { DragDropState };
-//# sourceMappingURL=DragDropState.js.map

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

@@ -1 +0,0 @@
-{"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/esm/drag-drop/Draggable.css.js

@@ -1,4 +0,0 @@
-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

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

package/esm/drag-drop/Draggable.js

@@ -1,85 +0,0 @@
-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";
-  return spacer;
-};
-
-export { Draggable, createDragSpacer, createDropIndicator, createDropIndicatorPosition };
-//# sourceMappingURL=Draggable.js.map

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

@@ -1 +0,0 @@
-{"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":["Draggable","Popup"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"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;;;;"}