define(["require", "exports", "react", "@fluentui/react/lib/Pickers", "@fluentui/react/lib/Styling", "@fluentui/react-hooks"], function (require, exports, React, Pickers_1, Styling_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.TagPickerInlineExample = void 0;
    var rootClass = Styling_1.mergeStyles({
        maxWidth: 500,
    });
    var pickerSuggestionsProps = {
        suggestionsHeaderText: 'Suggested colors',
        noResultsFoundText: 'No color tags found',
    };
    var testTags = [
        'black',
        'blue',
        'brown',
        'cyan',
        'green',
        'magenta',
        'mauve',
        'orange',
        'pink',
        'purple',
        'red',
        'rose',
        'violet',
        'white',
        'yellow',
    ].map(function (item) { return ({ key: item, name: item[0].toUpperCase() + item.slice(1) }); });
    var listContainsTagList = function (tag, tagList) {
        if (!tagList || !tagList.length || tagList.length === 0) {
            return false;
        }
        return tagList.some(function (compareTag) { return compareTag.key === tag.key; });
    };
    var filterSuggestedTags = function (filterText, tagList) {
        return filterText
            ? testTags.filter(function (tag) { return tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0 && !listContainsTagList(tag, tagList); })
            : [];
    };
    var getTextFromItem = function (item) { return item.name; };
    var TagPickerInlineExample = function () {
        var pickerId = react_hooks_1.useId('inline-picker');
        return (React.createElement("div", { className: rootClass },
            React.createElement("label", { htmlFor: pickerId }, "Choose a color"),
            React.createElement(Pickers_1.TagPicker, { removeButtonAriaLabel: "Remove", selectionAriaLabel: "Selected colors", onResolveSuggestions: filterSuggestedTags, getTextFromItem: getTextFromItem, pickerSuggestionsProps: pickerSuggestionsProps, itemLimit: 4, 
                // this option tells the picker's callout to render inline instead of in a new layer
                pickerCalloutProps: { doNotLayer: true }, inputProps: {
                    id: pickerId,
                } })));
    };
    exports.TagPickerInlineExample = TagPickerInlineExample;
});
//# sourceMappingURL=TagPicker.Inline.Example.js.map