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

package/src/date-input/DateInput.js

@@ -1,210 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { clsx } from "clsx";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { CalendarDate, DateFormatter, getLocalTimeZone, parseAbsoluteToLocal } from "@internationalized/date";
-import { StatusAdornment, makePrefixer, useForkRef, useFormFieldProps, useId } from "@salt-ds/core";
-import { isRangeOrOffsetSelectionWithStartDate } from "../calendar/index.js";
-import { useDatePickerContext } from "../date-picker/DatePickerContext.js";
-import DateInput_0 from "./DateInput.css";
-const withBaseName = makePrefixer("saltDateInput");
-const isInvalidDate = (value)=>value && Number.isNaN(new Date(value).getDay());
-const createDate = (date)=>{
-    if (!date || isInvalidDate(date)) return null;
-    return new Date(date);
-};
-const getIsoDate = (date)=>{
-    try {
-        return parseAbsoluteToLocal(date?.toISOString());
-    } catch (err) {
-        return;
-    }
-};
-function getCalendarDate(inputDate) {
-    const date = createDate(inputDate);
-    if (!date) return;
-    const isoDate = getIsoDate(date);
-    return isoDate && new CalendarDate(isoDate.year, isoDate.month, isoDate.day);
-}
-const defaultDateFormatter = (date)=>date ? new DateFormatter("EN-GB", {
-        day: "2-digit",
-        month: "short",
-        year: "numeric"
-    }).format(date.toDate(getLocalTimeZone())) : "";
-const DateInput_DateInput = /*#__PURE__*/ forwardRef(function({ className, disabled, "aria-label": ariaLabel, selectionVariant: selectionVariantProp, emptyReadOnlyMarker = "—", inputProps = {}, endAdornment, readOnly: readOnlyProp, validationStatus: validationStatusProp, variant = "primary", bordered = false, dateFormatter = defaultDateFormatter, placeholder = "dd mmm yyyy", startInputRef, endInputRef, onSelectionChange, onChange, ...rest }, ref) {
-    const wrapperRef = useRef(null);
-    const inputRef = useForkRef(ref, wrapperRef);
-    const inputStringFormatter = (input)=>{
-        const date = getCalendarDate(input);
-        return input && date ? dateFormatter(date) : input;
-    };
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "salt-dateInput",
-        css: DateInput_0,
-        window: targetWindow
-    });
-    const { selectedDate, setSelectedDate, selectionVariant: pickerSelectionVariant, openState, setOpen } = useDatePickerContext();
-    const selectionVariant = selectionVariantProp ?? pickerSelectionVariant;
-    const isRangePicker = isRangeOrOffsetSelectionWithStartDate(selectedDate) || "range" === selectionVariant;
-    const endDateInputID = useId();
-    const startDateInputID = useId();
-    const [focused, setFocused] = useState(false);
-    const [startDateStringValue, setStartDateStringValue] = useState(dateFormatter(isRangeOrOffsetSelectionWithStartDate(selectedDate) ? selectedDate?.startDate : selectedDate));
-    const [endDateStringValue, setEndDateStringValue] = useState(dateFormatter(isRangeOrOffsetSelectionWithStartDate(selectedDate) ? selectedDate?.endDate : void 0));
-    const { a11yProps: { "aria-describedby": formFieldDescribedBy, "aria-labelledby": formFieldLabelledBy } = {}, disabled: formFieldDisabled, readOnly: formFieldReadOnly, necessity: formFieldRequired, validationStatus: formFieldValidationStatus } = useFormFieldProps();
-    const isReadOnly = readOnlyProp || formFieldReadOnly;
-    const isDisabled = disabled || formFieldDisabled;
-    const validationStatus = formFieldValidationStatus ?? validationStatusProp;
-    const { "aria-describedby": dateInputDescribedBy, "aria-labelledby": dateInputLabelledBy, onBlur, onKeyDown, onFocus, required: dateInputPropsRequired, ...restDateInputProps } = inputProps;
-    useEffect(()=>{
-        if (isRangeOrOffsetSelectionWithStartDate(selectedDate)) {
-            selectedDate?.startDate && setStartDateStringValue(dateFormatter(selectedDate?.startDate));
-            selectedDate?.endDate && setEndDateStringValue(dateFormatter(selectedDate?.endDate));
-        } else setStartDateStringValue(dateFormatter(selectedDate));
-    }, [
-        selectedDate,
-        dateFormatter
-    ]);
-    const isRequired = formFieldRequired ? [
-        "required",
-        "asterisk"
-    ].includes(formFieldRequired) : dateInputPropsRequired;
-    const updateStartDate = (event, dateString)=>{
-        const inputDate = inputStringFormatter(dateString);
-        const calendarDate = getCalendarDate(inputDate);
-        const newSelectedDate = isRangePicker ? {
-            ...selectedDate,
-            startDate: calendarDate
-        } : calendarDate;
-        setSelectedDate(newSelectedDate);
-        onSelectionChange?.(event, newSelectedDate);
-    };
-    const updateEndDate = (event, dateString)=>{
-        const inputDate = inputStringFormatter(dateString);
-        const calendarDate = getCalendarDate(inputDate);
-        const newSelectedDate = {
-            ...selectedDate,
-            endDate: calendarDate
-        };
-        setSelectedDate(newSelectedDate);
-        onSelectionChange?.(event, newSelectedDate);
-    };
-    const handleFocus = (event)=>{
-        onFocus?.(event);
-        setFocused(true);
-    };
-    const handleStartDateBlur = (event)=>{
-        updateStartDate(event, event.target.value);
-        setFocused(false);
-    };
-    const handleStartDateChange = (event)=>{
-        const newStartValue = event.target.value;
-        setStartDateStringValue(newStartValue);
-        onChange?.(event, newStartValue, endDateStringValue);
-    };
-    const handleStartDateKeyDown = (event)=>{
-        if ("Enter" === event.key) {
-            updateStartDate(event, startDateStringValue);
-            setOpen(false);
-        }
-        if ("Tab" === event.key && event.shiftKey && openState) setOpen(false);
-    };
-    const handleEndDateBlur = (event)=>{
-        updateEndDate(event, event.target.value);
-        setFocused(false);
-    };
-    const handleEndDateChange = (event)=>{
-        const newEndValue = event.target.value;
-        setEndDateStringValue(newEndValue);
-        onChange?.(event, startDateStringValue, newEndValue);
-    };
-    const handleEndDateKeyDown = (event)=>{
-        if ("Enter" === event.key) {
-            updateEndDate(event, endDateStringValue);
-            setOpen(false);
-        }
-    };
-    const handleInputClick = (event)=>{
-        if (event.target === wrapperRef.current) startInputRef?.current?.focus();
-    };
-    return /*#__PURE__*/ jsxs("div", {
-        className: clsx(withBaseName(), withBaseName(variant), {
-            [withBaseName("focused")]: !isDisabled && focused,
-            [withBaseName("disabled")]: isDisabled,
-            [withBaseName("readOnly")]: isReadOnly,
-            [withBaseName(validationStatus ?? "")]: validationStatus,
-            [withBaseName("bordered")]: bordered
-        }, className),
-        onClick: (event)=>handleInputClick(event),
-        onKeyDown: onKeyDown,
-        onBlur: onBlur,
-        ref: inputRef,
-        ...rest,
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                autoComplete: "off",
-                "aria-describedby": clsx(formFieldDescribedBy, dateInputDescribedBy),
-                "aria-labelledby": clsx(formFieldLabelledBy, dateInputLabelledBy, startDateInputID),
-                "aria-label": clsx("Start date", ariaLabel),
-                id: startDateInputID,
-                className: withBaseName("input"),
-                disabled: isDisabled,
-                readOnly: isReadOnly,
-                ref: startInputRef,
-                tabIndex: isDisabled ? -1 : 0,
-                onBlur: handleStartDateBlur,
-                onChange: handleStartDateChange,
-                onKeyDown: handleStartDateKeyDown,
-                onFocus: isDisabled ? void 0 : handleFocus,
-                placeholder: placeholder,
-                size: placeholder.length,
-                value: isReadOnly && !startDateStringValue ? emptyReadOnlyMarker : startDateStringValue,
-                ...restDateInputProps,
-                required: isRequired
-            }),
-            "range" === selectionVariant && /*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx("span", {
-                        children: "-"
-                    }),
-                    /*#__PURE__*/ jsx("input", {
-                        autoComplete: "off",
-                        "aria-describedby": clsx(formFieldDescribedBy, dateInputDescribedBy),
-                        "aria-labelledby": clsx(formFieldLabelledBy, dateInputLabelledBy, endDateInputID),
-                        "aria-label": clsx("End date", ariaLabel),
-                        id: endDateInputID,
-                        className: withBaseName("input"),
-                        disabled: isDisabled,
-                        readOnly: isReadOnly,
-                        ref: endInputRef,
-                        tabIndex: isDisabled ? -1 : 0,
-                        onBlur: handleEndDateBlur,
-                        onChange: handleEndDateChange,
-                        onKeyDown: handleEndDateKeyDown,
-                        onFocus: isDisabled ? void 0 : handleFocus,
-                        placeholder: placeholder,
-                        size: placeholder.length,
-                        value: isReadOnly && !endDateStringValue ? emptyReadOnlyMarker : endDateStringValue,
-                        required: isRequired,
-                        ...restDateInputProps
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: withBaseName("endAdornmentContainer"),
-                children: [
-                    !isDisabled && !isReadOnly && validationStatus && /*#__PURE__*/ jsx(StatusAdornment, {
-                        status: validationStatus
-                    }),
-                    endAdornment
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: withBaseName("activationIndicator")
-            })
-        ]
-    });
-});
-export { DateInput_DateInput as DateInput };

package/src/date-input/index.js

@@ -1 +0,0 @@
-export * from "./DateInput.js";

package/src/date-picker/DatePicker.js

@@ -1,137 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { forwardRef, useRef, useState } from "react";
-import { flip, offset, useDismiss, useInteractions } from "@floating-ui/react";
-import { getLocalTimeZone, today } from "@internationalized/date";
-import { Button, makePrefixer, useControlled, useFloatingUI, useForkRef, useFormFieldProps, useId } from "@salt-ds/core";
-import { CalendarIcon } from "@salt-ds/icons";
-import { isRangeOrOffsetSelectionWithStartDate } from "../calendar/index.js";
-import { DateInput } from "../date-input/index.js";
-import { DatePickerContext } from "./DatePickerContext.js";
-import { DatePickerPanel } from "./DatePickerPanel.js";
-const withBaseName = makePrefixer("saltDatePicker");
-const DatePicker_DatePicker = /*#__PURE__*/ forwardRef(function({ selectionVariant = "default", disabled = false, placeholder = "dd mmm yyyy", selectedDate: selectedDateProp, defaultSelectedDate, dateFormatter, CalendarProps, className, id: idProp, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, helperText, readOnly: readOnlyProp, validationStatus, onSelectionChange, onChange, visibleMonths = 2, bordered, ...rest }, ref) {
-    const [open, setOpen] = useControlled({
-        controlled: openProp,
-        default: Boolean(defaultOpen),
-        name: "openPanel",
-        state: "openPanel"
-    });
-    const [selectedDate, setSelectedDate] = useControlled({
-        controlled: selectedDateProp,
-        default: defaultSelectedDate,
-        name: "Calendar",
-        state: "selectedDate"
-    });
-    const id = useId(idProp);
-    const [startVisibleMonth, setStartVisibleMonth] = useState((isRangeOrOffsetSelectionWithStartDate(selectedDate) ? selectedDate?.startDate : selectedDate) ?? today(getLocalTimeZone()));
-    const [endVisibleMonth, setEndVisibleMonth] = useState((isRangeOrOffsetSelectionWithStartDate(selectedDate) ? selectedDate.startDate?.add({
-        months: 1
-    }) : selectedDate) ?? today(getLocalTimeZone()).add({
-        months: 1
-    }));
-    const onOpenChange = (newState)=>{
-        setOpen(newState);
-        startInputRef?.current?.focus();
-        onOpenChangeProp?.(newState);
-    };
-    const { x, y, strategy, elements, floating, reference, context } = useFloatingUI({
-        open: open,
-        onOpenChange: onOpenChange,
-        placement: "bottom-start",
-        middleware: [
-            offset(1),
-            flip({
-                fallbackStrategy: "initialPlacement"
-            })
-        ]
-    });
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        useDismiss(context)
-    ]);
-    const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = useFormFieldProps();
-    const isReadOnly = readOnlyProp || formFieldReadOnly;
-    const getPanelPosition = ()=>({
-            top: y ?? 0,
-            left: x ?? 0,
-            position: strategy,
-            width: elements.floating?.offsetWidth,
-            height: elements.floating?.offsetHeight
-        });
-    const panelRef = useRef(null);
-    const startInputRef = useRef(null);
-    const endInputRef = useRef(null);
-    const inputRef = useForkRef(ref, reference);
-    const floatingRef = useForkRef(panelRef, floating);
-    const handleSelect = (event, selectedDate)=>{
-        if ("default" === selectionVariant && selectedDate) startInputRef?.current?.focus();
-        if (isRangeOrOffsetSelectionWithStartDate(selectedDate) && selectedDate.endDate) endInputRef?.current?.focus();
-        onSelectionChange?.(event, selectedDate);
-    };
-    const handleCalendarButton = ()=>{
-        startInputRef?.current?.focus();
-        const newState = !open;
-        setOpen(newState);
-        onOpenChangeProp?.(newState);
-    };
-    const datePickerContextValue = {
-        openState: open,
-        setOpen,
-        disabled,
-        selectedDate,
-        setSelectedDate,
-        defaultSelectedDate,
-        startVisibleMonth,
-        setStartVisibleMonth,
-        endVisibleMonth,
-        setEndVisibleMonth,
-        selectionVariant,
-        context,
-        getPanelPosition
-    };
-    const calendarId = `${id}-calendar`;
-    return /*#__PURE__*/ jsxs(DatePickerContext.Provider, {
-        value: datePickerContextValue,
-        children: [
-            /*#__PURE__*/ jsx(DateInput, {
-                "aria-owns": calendarId,
-                validationStatus: validationStatus,
-                bordered: bordered,
-                className: clsx(withBaseName(), className),
-                id: id,
-                ref: inputRef,
-                ...getReferenceProps(),
-                startInputRef: startInputRef,
-                endInputRef: endInputRef,
-                placeholder: placeholder,
-                dateFormatter: dateFormatter,
-                readOnly: isReadOnly,
-                onSelectionChange: onSelectionChange,
-                onChange: onChange,
-                endAdornment: /*#__PURE__*/ jsx(Button, {
-                    variant: "secondary",
-                    onClick: handleCalendarButton,
-                    disabled: disabled || isReadOnly || formFieldDisabled,
-                    "aria-label": "Open Calendar",
-                    children: /*#__PURE__*/ jsx(CalendarIcon, {
-                        "aria-hidden": true
-                    })
-                }),
-                ...rest
-            }),
-            /*#__PURE__*/ jsx(DatePickerPanel, {
-                ref: floatingRef,
-                ...getFloatingProps(),
-                onSelect: handleSelect,
-                CalendarProps: {
-                    ...CalendarProps,
-                    borderedDropdown: bordered,
-                    id: calendarId
-                },
-                helperText: helperText,
-                visibleMonths: visibleMonths
-            })
-        ]
-    });
-});
-export { DatePicker_DatePicker as DatePicker };

package/src/date-picker/DatePickerContext.js

@@ -1,20 +0,0 @@
-import { createContext } from "@salt-ds/core";
-import { useContext } from "react";
-const DatePickerContext = createContext("DatePickerContext", {
-    openState: false,
-    setOpen: ()=>void 0,
-    disabled: false,
-    selectedDate: void 0,
-    defaultSelectedDate: void 0,
-    setSelectedDate: ()=>void 0,
-    startVisibleMonth: void 0,
-    setStartVisibleMonth: ()=>void 0,
-    endVisibleMonth: void 0,
-    setEndVisibleMonth: ()=>void 0,
-    selectionVariant: "default",
-    getPanelPosition: ()=>({})
-});
-function useDatePickerContext() {
-    return useContext(DatePickerContext);
-}
-export { DatePickerContext, useDatePickerContext };

package/src/date-picker/DatePickerPanel.css.js

@@ -1,25 +0,0 @@
-const css = `
-.saltDatePickerPanel {
-  background: var(--salt-container-primary-background);
-  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
-  z-index: var(--salt-zIndex-flyover);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-  box-sizing: border-box;
-  border-radius: var(--salt-palette-corner, 0);
-  display: flex;
-  position: relative;
-  overflow: hidden auto;
-}
-
-.saltDatePickerPanel-container {
-  gap: 1px;
-  width: min-content;
-}
-
-.saltDatePickerPanel-header {
-  padding: var(--salt-spacing-100);
-}
-
-
-`;
-export default css;

package/src/date-picker/DatePickerPanel.js

@@ -1,124 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { endOfMonth, startOfMonth } from "@internationalized/date";
-import { FlexItem, FlexLayout, FormFieldContext, FormFieldHelperText, StackLayout, makePrefixer, useFloatingComponent, useFormFieldProps } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { clsx } from "clsx";
-import { forwardRef, useEffect, useState } from "react";
-import { Calendar, isRangeOrOffsetSelectionWithStartDate } from "../calendar/index.js";
-import { useDatePickerContext } from "./DatePickerContext.js";
-import DatePickerPanel_0 from "./DatePickerPanel.css";
-const withBaseName = makePrefixer("saltDatePickerPanel");
-function getHoveredDate(date, compact, hoveredDate) {
-    return date && !compact && hoveredDate && hoveredDate.compare(endOfMonth(date)) > 0 ? endOfMonth(date) : hoveredDate;
-}
-const DatePickerPanel_DatePickerPanel = /*#__PURE__*/ forwardRef(function(props, ref) {
-    const { className, onSelect, helperText, CalendarProps, visibleMonths, ...rest } = props;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "salt-date-picker-panel",
-        css: DatePickerPanel_0,
-        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) || "range" === selectionVariant && void 0 === selectedDate;
-    const compact = 1 === visibleMonths;
-    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: selectedDate,
-        onSelectedDateChange: setRangeDate,
-        maxDate: !compact && selectedDate?.startDate ? endOfMonth(selectedDate?.startDate) : void 0,
-        hideOutOfRangeDates: true
-    } : {
-        selectionVariant: "default",
-        selectedDate: selectedDate,
-        onSelectedDateChange: setSingleDate
-    };
-    return /*#__PURE__*/ jsx(FloatingComponent, {
-        open: openState,
-        className: clsx(withBaseName(), className),
-        "aria-modal": "true",
-        ref: ref,
-        focusManagerProps: context ? {
-            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: hoveredDate,
-                                onHoveredDateChange: handleHoveredDateChange,
-                                selectedDate: 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_DatePickerPanel as DatePickerPanel };

package/src/date-picker/index.js

@@ -1 +0,0 @@
-export * from "./DatePicker.js";

package/src/drag-drop/DragDropProvider.js

@@ -1,123 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useMemo } 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 = /*#__PURE__*/ createContext({
-    registerDragDropParty: unconfiguredRegistrationCall
-});
-const measureDropTargets = (dropTargetIds = [])=>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(()=>new Map(), []);
-    const dropHandlers = useMemo(()=>new Map(), []);
-    const handleDragOverDropTarget = useCallback((dropTargetId, dragDropState)=>{
-        const resumeDrag = resumeDragHandlers.get(dropTargetId);
-        if (resumeDrag) return resumeDrag(dragDropState);
-        return false;
-    }, [
-        resumeDragHandlers
-    ]);
-    const handleDrop = useCallback((dropTargetId, dragDropState)=>{
-        const handleDrop = dropHandlers.get(dropTargetId);
-        if (handleDrop) handleDrop(dragDropState);
-    }, [
-        dropHandlers
-    ]);
-    const { measuredDropTargetsRef, resumeDrag } = useGlobalDragDrop({
-        onDragOverDropTarget: handleDragOverDropTarget,
-        onDrop: handleDrop
-    });
-    const [dragSources, dropTargets] = useMemo(()=>{
-        const sources = new Map();
-        const targets = new Map();
-        for (const [sourceId, { dropTargets }] of Object.entries(dragSourcesProp)){
-            const sourceEntry = sources.get(sourceId);
-            const targetIds = Array.isArray(dropTargets) ? dropTargets : [
-                dropTargets
-            ];
-            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, resumeDrag, onDrop)=>{
-        if (resumeDrag) resumeDragHandlers.set(id, resumeDrag);
-        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: children
-    });
-};
-const useDragDropProvider = (id)=>{
-    const { dragSources, dropTargets, onDragOut, onEndOfDragOperation, registerDragDropParty } = useContext(DragDropContext);
-    if (!id || !dragSources && !dropTargets) return NO_DRAG_CONTEXT;
-    {
-        const isDragSource = dragSources?.has(id) ?? false;
-        const isDropTarget = dropTargets?.has(id) ?? false;
-        return {
-            isDragSource,
-            isDropTarget,
-            onDragOut,
-            onEndOfDragOperation,
-            register: registerDragDropParty
-        };
-    }
-};
-export { DragDropProvider, useDragDropProvider };

package/src/drag-drop/DragDropState.js

@@ -1,25 +0,0 @@
-class DragDropState {
-    mouseOffset;
-    initialDragElement;
-    draggableElement = null;
-    payload = null;
-    constructor(mousePosition, dragElement){
-        this.initialDragElement = dragElement;
-        this.mouseOffset = this.getMouseOffset(mousePosition, dragElement);
-    }
-    setDraggable = (el)=>{
-        this.draggableElement = el;
-    };
-    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 };