define(["require", "exports", "react", "@fluentui/react-next/lib/Dropdown"], function (require, exports, React, Dropdown_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var dropdownStyles = { dropdown: { width: 300 } };
    var dropdownControlledExampleOptions = [
        { key: 'fruitsHeader', text: 'Fruits', itemType: Dropdown_1.DropdownMenuItemType.Header },
        { key: 'apple', text: 'Apple' },
        { key: 'banana', text: 'Banana' },
        { key: 'orange', text: 'Orange', disabled: true },
        { key: 'grape', text: 'Grape' },
        { key: 'divider_1', text: '-', itemType: Dropdown_1.DropdownMenuItemType.Divider },
        { key: 'vegetablesHeader', text: 'Vegetables', itemType: Dropdown_1.DropdownMenuItemType.Header },
        { key: 'broccoli', text: 'Broccoli' },
        { key: 'carrot', text: 'Carrot' },
        { key: 'lettuce', text: 'Lettuce' },
    ];
    exports.DropdownControlledExample = function () {
        var _a = React.useState(), selectedItem = _a[0], setSelectedItem = _a[1];
        var onChange = function (event, item) {
            setSelectedItem(item);
        };
        return (React.createElement(Dropdown_1.Dropdown, { label: "Controlled example", selectedKey: selectedItem ? selectedItem.key : undefined, 
            // eslint-disable-next-line react/jsx-no-bind
            onChange: onChange, placeholder: "Select an option", options: dropdownControlledExampleOptions, styles: dropdownStyles }));
    };
});
//# sourceMappingURL=Dropdown.Controlled.Example.js.map