import { classes, st } from './DragHandle.st.css.js';
import React from 'react';
import { DragAndDropLarge, DragAndDropSmall, } from '@wix/wix-ui-icons-common/system';
import Tooltip from '../Tooltip';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
export function DragHandle(props) {
    const { dataHook, domRef, dragging, disabled, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, tooltipContent, tooltipProps, dragHandleSize, ...rest } = props;
    const icons = useIcons('DragHandle', {
        DragAndDropLarge,
        DragAndDropSmall,
    });
    const dragHandleIcon = dragHandleSize === 'small' ? (React.createElement(icons.DragAndDropSmall, { "data-hook": "dnd" })) : (React.createElement(icons.DragAndDropLarge, { "data-hook": "dnd" }));
    return (React.createElement(Tooltip, { dataHook: dataHook, disabled: !tooltipContent, content: tooltipContent, appendTo: "window", ...tooltipProps, "aria-describedby": tooltipContent ? undefined : ariaDescribedBy },
        React.createElement("div", { "data-hook": "drag-handle-button", "data-disabled": !!disabled, "aria-label": tooltipContent || ariaLabel, "aria-describedby": ariaDescribedBy, ref: domRef, ...rest, role: "button", className: st(classes.root, {
                disabled,
                dragging,
            }) }, dragHandleIcon)));
}
//# sourceMappingURL=DragHandle.js.map