@kwiz/fluentui/dist/controls/tag-picker-ex.js

KWIZ common controls for FluentUI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tag, TagPicker, TagPickerControl, TagPickerGroup, TagPickerInput, TagPickerList, TagPickerOption, useTagPickerFilter } from '@fluentui/react-components';
import { CommonLogger, isNotEmptyArray, isNullOrEmptyArray, isNullOrEmptyString, toHash } from '@kwiz/common';
import * as React from 'react';
import { useControlledStateTracker } from '../helpers/use-controlled-state-tracker';
const logger = new CommonLogger("TagPickerEx");
export function TagPickerEx(props) {
    const { valueToUse, setValue } = useControlledStateTracker({
        name: "TagPickerEx",
        value: props.selectedOptions,
        defaultValue: props.defaultSelectedOptions
    });
    //normalized as array
    const selected = isNotEmptyArray(valueToUse) ? valueToUse : [];
    const optionsHash = React.useMemo(() => {
        return toHash(props.options, o => o.key, undefined, o => o.text);
    }, [props.options]);
    const getOptionText = React.useCallback((option) => {
        return optionsHash[option];
    }, [optionsHash]);
    const [query, setQuery] = React.useState("");
    const children = useTagPickerFilter({
        query,
        options: Object.keys(optionsHash),
        noOptionsElement: (_jsx(TagPickerOption, { value: "no-matches", children: isNullOrEmptyString(query)
                ? "No more options"
                : "We couldn't find any matches" })),
        renderOption: (option) => {
            var _a;
            return (_jsx(TagPickerOption, Object.assign({ value: option, text: getOptionText(option), children: getOptionText(option) }, (((_a = props.getTagProps) === null || _a === void 0 ? void 0 : _a.call(props, option)) || {})), option));
        },
        filter: (option) => !selected.includes(option) &&
            getOptionText(option).toLowerCase().includes(query.toLowerCase()),
    });
    const showPlaceholder = isNullOrEmptyArray(selected);
    const inputTitle = showPlaceholder ? props.placeholder : props.selectTagsTitle;
    return _jsxs(TagPicker, Object.assign({}, props, { onOptionSelect: (e, data) => {
            var _a;
            setValue(data.selectedOptions);
            (_a = props.onOptionSelect) === null || _a === void 0 ? void 0 : _a.call(props, e, data);
        }, children: [_jsxs(TagPickerControl, { children: [_jsx(TagPickerGroup, { "aria-label": props.selectedTagsTitle || "Selected tags", title: props.selectedTagsTitle || "Selected tags", children: selected.map((option) => {
                            var _a;
                            return (_jsx(Tag, Object.assign({ value: option, as: 'span', children: getOptionText(option) }, (((_a = props.getSelectedTagProps) === null || _a === void 0 ? void 0 : _a.call(props, option)) || {})), option));
                        }) }), _jsx(TagPickerInput, { "aria-label": inputTitle || "Select tags", title: inputTitle || "Select tags", placeholder: showPlaceholder ? inputTitle : undefined, value: query, onChange: (e) => setQuery(e.target.value) })] }), _jsx(TagPickerList, { children: children })] }));
}
//# sourceMappingURL=tag-picker-ex.js.map