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

KWIZ common controls for FluentUI

import { jsx as _jsx } from "react/jsx-runtime";
import { Dropdown, makeStyles, mergeClasses, Option } from '@fluentui/react-components';
import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
import React from 'react';
import { GetLogger } from '../_modules/config';
import { useKWIZFluentContext } from '../helpers/context-internal';
const logger = GetLogger("DropdownEX");
const useStyles = makeStyles({
    root: {
        minWidth: "auto"
    },
});
function $DropdownEX(props, ref) {
    const classes = useStyles();
    const ctx = useKWIZFluentContext();
    const selected = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
    //sometimes control will lose value when re-rendered
    //use case: public forms when editing other fields after the dropdown was set
    //re-set the text value manually to fix
    let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
        let v = firstOrNull(props.items, i => i.key === s);
        return v ? v.value : '';
    })).join(', ');
    return (_jsx(Dropdown, Object.assign({}, props, { onSelect: undefined, className: mergeClasses(classes.root, props.className), ref: ref, clearable: !props.required && !props.multiselect, appearance: ctx.inputAppearance, mountNode: ctx.mountNode, selectedOptions: selected, value: text, onOptionSelect: (e, data) => {
            let o = firstOrNull(props.items, i => i.key === data.optionValue);
            if (props.multiselect) {
                let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
                props.onSelect(o, current);
            }
            else
                props.onSelect(o);
        }, children: props.items.map(i => _jsx(Option, { value: i.key, text: i.value, children: i.option ? i.option : i.value }, i.key)) })));
}
export const DropdownEX = React.forwardRef($DropdownEX);
/** @deprecated use normal DropdownEX it is now generic */
export function getDropdownEX() {
    logger.warn('getDropdownEX is deprecated. use DropdownEX it now supports generic types');
    return React.forwardRef(($DropdownEX));
}
//# sourceMappingURL=dropdown.js.map