@kwiz/fluentui/dist/controls/combobox.js

KWIZ common controls for FluentUI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Combobox, Option } from "@fluentui/react-components";
import { firstOrNull, isNotEmptyString } from "@kwiz/common";
import { useMemo } from "react";
const freeFormKey = "$freeform";
//** a controlled single select combo box that allows custom text typing */
export function ComboboxEX(props) {
    const { items, value, onChange, freeFormPrefix } = props;
    const selectedOption = useMemo(() => firstOrNull(items, i => i.key === value), [items, value]);
    const text = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || value;
    return _jsxs(Combobox, Object.assign({}, props, { value: text, selectedOptions: isNotEmptyString(value) ? [selectedOption ? selectedOption.key : freeFormKey] : [], onChange: (e) => {
            //console.log(e.currentTarget.value);
            onChange(e.currentTarget.value);
        }, onOptionSelect: (e, data) => {
            if (isNotEmptyString(data.optionValue)) {
                //console.log(data.optionValue);
                onChange(data.optionValue);
            }
        }, children: [!selectedOption && _jsx(Option, { value: value, children: `${freeFormPrefix}${value}` }, freeFormKey), items.map(o => _jsx(Option, { value: o.key, children: o.text }, o.key))] }));
}
//# sourceMappingURL=combobox.js.map