import { jsx as _jsx } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { ComboBox, SelectableOptionMenuItemType } from '@fluentui/react';
import { memo, useMemo } from 'react';
import { narrowDropdownStyles } from '../styles.js';
/**
 * ComboBox that allows the user to either input a freeform value or select a column.
 * We frequently have operations where a comparison may be to a fixed value, or should
 * be dependent on per-row column values.
 */ export const ColumnCriteriaCombobox = /*#__PURE__*/ memo(function ColumnCriteriaCombobox({ options , ...props }) {
    const withHeader = useMemo(()=>{
        return [
            {
                key: 'header',
                text: 'Columns',
                itemType: SelectableOptionMenuItemType.Header
            },
            ...options, 
        ];
    }, [
        options
    ]);
    return /*#__PURE__*/ _jsx(ComboBox, {
        allowFreeform: false,
        autoComplete: 'on',
        placeholder: 'Column',
        options: withHeader,
        styles: narrowDropdownStyles,
        ...props
    });
});
