import React, { useEffect, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { Dropdown } from '@wix/design-system';
export function _MultiLevelSortingColumnSelect(props) {
    const { sortableColumn, state, index } = props;
    const ref = useRef();
    const options = state.getAvailableOptions(sortableColumn.columnId);
    useEffect(() => {
        const id = window.requestAnimationFrame(() => {
            if (!ref.current) {
                return;
            }
            // focus the last added column
            if (sortableColumn.columnId === state.lastManuallyAddedColumnId) {
                state.lastManuallyAddedColumnId = null;
                ref.current.focus();
            }
        });
        return () => {
            window.cancelAnimationFrame(id);
        };
    }, []);
    return (React.createElement(Dropdown, { inputRef: (node) => {
            if (ref) {
                ref.current = node;
            }
        }, dataHook: `multi-level-sorting-select-column-${index}`, onSelect: ({ id }) => {
            state.replaceSort(sortableColumn.columnId, id);
        }, popoverProps: {
            appendTo: 'window',
        }, options: options, selectedId: sortableColumn.columnId, size: "small" }));
}
export const MultiLevelSortingColumnSelect = observer(_MultiLevelSortingColumnSelect);
//# sourceMappingURL=MultiLevelSortingColumnSelect.js.map