define(["require", "exports", "react", "@fluentui/react/lib/Button", "@fluentui/react/lib/Toggle", "@fluentui/react/lib/ContextualMenu", "@fluentui/react/lib/Dropdown", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Stack", "@fluentui/react-hooks"], function (require, exports, React, Button_1, Toggle_1, ContextualMenu_1, Dropdown_1, Utilities_1, Stack_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ContextualMenuDirectionalExample = void 0;
    var ContextualMenuDirectionalExample = function () {
        var _a = react_hooks_1.useBoolean(false), isBeakVisible = _a[0], toggleIsBeakVisible = _a[1].toggle;
        var _b = react_hooks_1.useBoolean(false), useDirectionalHintForRTL = _b[0], toggleUseDirectionalHintForRTL = _b[1].toggle;
        var _c = React.useState(ContextualMenu_1.DirectionalHint.bottomLeftEdge), directionalHint = _c[0], setDirectionalHint = _c[1];
        var _d = React.useState(ContextualMenu_1.DirectionalHint.bottomLeftEdge), directionalHintForRTL = _d[0], setDirectionalHintForRTL = _d[1];
        var onDirectionalChanged = React.useCallback(function (event, option) {
            setDirectionalHint(option.key);
        }, []);
        var onDirectionalRtlChanged = React.useCallback(function (event, option) {
            setDirectionalHintForRTL(option.key);
        }, []);
        var menuProps = React.useMemo(function () { return ({
            isBeakVisible: isBeakVisible,
            directionalHint: directionalHint,
            directionalHintForRTL: useDirectionalHintForRTL ? directionalHintForRTL : undefined,
            gapSpace: 0,
            beakWidth: 20,
            directionalHintFixed: false,
            items: menuItems,
        }); }, [isBeakVisible, directionalHint, directionalHintForRTL, useDirectionalHintForRTL]);
        return (React.createElement("div", null,
            React.createElement(Stack_1.Stack, { horizontal: true, wrap: true, tokens: stackTokens },
                React.createElement(Toggle_1.Toggle, { label: "Show beak", checked: isBeakVisible, onChange: toggleIsBeakVisible }),
                React.createElement(Dropdown_1.Dropdown, { label: "Directional hint", selectedKey: directionalHint, options: directionOptions, onChange: onDirectionalChanged, styles: dropdownStyles }),
                Utilities_1.getRTL() && (React.createElement(Toggle_1.Toggle, { label: "Use RTL directional hint", checked: useDirectionalHintForRTL, onChange: toggleUseDirectionalHintForRTL })),
                Utilities_1.getRTL() && (React.createElement(Dropdown_1.Dropdown, { label: "Directional hint for RTL", selectedKey: directionalHintForRTL, options: directionOptions, onChange: onDirectionalRtlChanged, disabled: !useDirectionalHintForRTL, styles: dropdownStyles }))),
            React.createElement("br", null),
            React.createElement(Button_1.DefaultButton, { text: "Show context menu", menuProps: menuProps })));
    };
    exports.ContextualMenuDirectionalExample = ContextualMenuDirectionalExample;
    var menuItems = [
        { key: 'newItem', text: 'New' },
        { key: 'divider_1', itemType: ContextualMenu_1.ContextualMenuItemType.Divider },
        { key: 'rename', text: 'Rename' },
        { key: 'edit', text: 'Edit' },
        { key: 'properties', text: 'Properties' },
        { key: 'disabled', text: 'Disabled item', disabled: true },
    ];
    var directionOptions = [
        { key: ContextualMenu_1.DirectionalHint.topLeftEdge, text: 'Top left edge' },
        { key: ContextualMenu_1.DirectionalHint.topCenter, text: 'Top center' },
        { key: ContextualMenu_1.DirectionalHint.topRightEdge, text: 'Top right edge' },
        { key: ContextualMenu_1.DirectionalHint.topAutoEdge, text: 'Top auto edge' },
        { key: ContextualMenu_1.DirectionalHint.bottomLeftEdge, text: 'Bottom left edge' },
        { key: ContextualMenu_1.DirectionalHint.bottomCenter, text: 'Bottom center' },
        { key: ContextualMenu_1.DirectionalHint.bottomRightEdge, text: 'Bottom right edge' },
        { key: ContextualMenu_1.DirectionalHint.bottomAutoEdge, text: 'Bottom auto edge' },
        { key: ContextualMenu_1.DirectionalHint.leftTopEdge, text: 'Left top edge' },
        { key: ContextualMenu_1.DirectionalHint.leftCenter, text: 'Left center' },
        { key: ContextualMenu_1.DirectionalHint.leftBottomEdge, text: 'Left bottom edge' },
        { key: ContextualMenu_1.DirectionalHint.rightTopEdge, text: 'Right top edge' },
        { key: ContextualMenu_1.DirectionalHint.rightCenter, text: 'Right center' },
        { key: ContextualMenu_1.DirectionalHint.rightBottomEdge, text: 'Right bottom edge' },
    ];
    var stackTokens = { childrenGap: 30 };
    var dropdownStyles = { root: { width: 200 } };
});
//# sourceMappingURL=ContextualMenu.Directional.Example.js.map