'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { components as SelectComponents } from 'react-select';
import { useDraggableSortable } from '../../DraggableSortable/useDraggableSortable/index.js';
import './index.scss';
const baseClass = 'multi-value';
export function generateMultiValueDraggableID(optionData, valueFunction) {
    return typeof valueFunction === 'function' ? valueFunction(optionData) : optionData?.value;
}
export const MultiValue = (props)=>{
    const { className, data, innerProps, isDisabled, // @ts-expect-error // TODO Fix this - moduleResolution 16 breaks our declare module
    selectProps: { customProps: { disableMouseDown } = {}, getOptionValue, isSortable } = {} } = props;
    const id = generateMultiValueDraggableID(data, getOptionValue);
    const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
        id,
        disabled: !isSortable
    });
    const classes = [
        baseClass,
        className,
        !isDisabled && isSortable && 'draggable',
        isDragging && `${baseClass}--is-dragging`
    ].filter(Boolean).join(' ');
    // Extract onMouseDown from listeners to preserve the MouseSensor handler
    const { onMouseDown: listenersMouseDown, ...restListeners } = listeners || {};
    return /*#__PURE__*/ _jsxDEV(React.Fragment, {
        children: /*#__PURE__*/ _jsxDEV(SelectComponents.MultiValue, {
            ...props,
            className: classes,
            innerProps: {
                ...isSortable ? {
                    ...attributes,
                    ...restListeners
                } : {},
                ...innerProps,
                onMouseDown: (e)=>{
                    // Call the MouseSensor's handler first to enable mouse dragging
                    if (isSortable && listenersMouseDown) {
                        listenersMouseDown(e);
                    }
                    if (!disableMouseDown) {
                        // we need to prevent the dropdown from opening when clicking on the drag handle, but not when a modal is open (i.e. the 'Relationship' field component)
                        e.stopPropagation();
                    }
                },
                ref: setNodeRef,
                style: isSortable ? {
                    transform,
                    ...attributes?.style
                } : {}
            }
        }, void 0, false, {
            fileName: "src/elements/ReactSelect/MultiValue/index.tsx",
            lineNumber: 48,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/ReactSelect/MultiValue/index.tsx",
        lineNumber: 47,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map