"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContextualMenuTest = void 0;
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const E2EContextualMenuTest_1 = require("./E2EContextualMenuTest");
const iconExamples_1 = require("../Common/iconExamples");
const Test_1 = require("../Test");
const ContextualMenuMainTest = () => {
    const stdBtnRef = React.useRef(null);
    const [showContextualMenu, setShowContextualMenu] = React.useState(false);
    const [isContextualMenuVisible, setIsContextualMenuVisible] = React.useState(false);
    const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
    const [isBeakVisible, setIsBeakVisible] = React.useState(false);
    const onIsBeakVisibleChange = React.useCallback((value) => setIsBeakVisible(value), []);
    const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
    const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
    const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
    const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
    const toggleShowContextualMenu = React.useCallback(() => {
        setShowContextualMenu(!showContextualMenu);
        setIsContextualMenuVisible(false);
    }, [showContextualMenu, setShowContextualMenu, setIsContextualMenuVisible]);
    const onShowContextualMenu = React.useCallback(() => {
        setIsContextualMenuVisible(true);
    }, [setIsContextualMenuVisible]);
    const onDismissContextualMenu = React.useCallback(() => {
        setShowContextualMenu(false);
        setIsContextualMenuVisible(false);
    }, [setShowContextualMenu]);
    const onItemClick = React.useCallback((key) => {
        setLastMenuItemClicked(key);
    }, [setLastMenuItemClicked]);
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_1.View, { style: { flexDirection: 'row', paddingVertical: 5 } },
            React.createElement(react_native_1.View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                    React.createElement(react_native_1.Text, null, "Should Focus on Mount"),
                    React.createElement(react_native_1.Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount })),
                React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                    React.createElement(react_native_1.Text, null, "Should Focus on Container"),
                    React.createElement(react_native_1.Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer })),
                React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                    React.createElement(react_native_1.Text, null, "Beak Visible"),
                    React.createElement(react_native_1.Switch, { value: isBeakVisible, onValueChange: onIsBeakVisibleChange }))),
            React.createElement(react_native_2.Separator, { vertical: true }),
            React.createElement(react_native_1.View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(react_native_1.Text, null,
                    React.createElement(react_native_1.Text, null, "Menu Visibility: "),
                    isContextualMenuVisible ? React.createElement(react_native_1.Text, { style: { color: 'green' } }, "Visible") : React.createElement(react_native_1.Text, { style: { color: 'red' } }, "Not Visible")),
                React.createElement(react_native_1.Text, null,
                    React.createElement(react_native_1.Text, null, "Last Menu Item Clicked: "),
                    lastMenuItemClicked > 0 ? (React.createElement(react_native_1.Text, { style: { color: 'blue' } }, lastMenuItemClicked)) : (React.createElement(react_native_1.Text, { style: { color: 'blue' } }, "none"))),
                React.createElement(react_native_2.ButtonV1, { onClick: toggleShowContextualMenu, componentRef: stdBtnRef }, "Press for ContextualMenu"))),
        showContextualMenu && (React.createElement(react_native_2.ContextualMenu, { target: stdBtnRef, onDismiss: onDismissContextualMenu, onShow: onShowContextualMenu, accessibilityLabel: "Standard ContextualMenu", onItemClick: onItemClick, setShowMenu: toggleShowContextualMenu, shouldFocusOnMount: focusOnMount, shouldFocusOnContainer: focusOnContainer, isBeakVisible: isBeakVisible },
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 1", itemKey: "1" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 2", itemKey: "2" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "3", disabled: true }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 4", itemKey: "4" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 5", itemKey: "5" })))));
};
const NestedContextualMenu = () => {
    const stdBtnRef = React.useRef(null);
    const [showContextualMenu, setShowContextualMenu] = React.useState(false);
    const [isContextualMenuVisible, setIsContextualMenuVisible] = React.useState(false);
    const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
    const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
    const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
    const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
    const toggleShowContextualMenu = React.useCallback(() => {
        setShowContextualMenu(!showContextualMenu);
        setIsContextualMenuVisible(!isContextualMenuVisible);
    }, [showContextualMenu, isContextualMenuVisible, setShowContextualMenu, setIsContextualMenuVisible]);
    const onShowContextualMenu = React.useCallback(() => {
        setIsContextualMenuVisible(true);
    }, [setIsContextualMenuVisible]);
    const onDismissContextualMenu = React.useCallback(() => {
        setShowContextualMenu(false);
        setIsContextualMenuVisible(false);
    }, [setShowContextualMenu]);
    const stdMenuItemRef = React.useRef(null);
    const [showSubmenu, setShowSubmenu] = React.useState(false);
    const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
    const toggleShowSubmenu = React.useCallback(() => {
        setShowSubmenu(!showSubmenu);
        setIsSubmenuVisible(!isSubmenuVisible);
    }, [showSubmenu, isSubmenuVisible, setShowSubmenu, setIsSubmenuVisible]);
    const onShowSubmenu = React.useCallback(() => {
        setIsSubmenuVisible(true);
    }, [setIsSubmenuVisible]);
    const onDismissSubmenu = React.useCallback(() => {
        setShowSubmenu(false);
    }, [setShowSubmenu]);
    const onClick = React.useCallback(() => {
        console.log('submenu item clicked');
    }, []);
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_1.View, { style: { flexDirection: 'row', paddingVertical: 5 } },
            React.createElement(react_native_1.View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                    React.createElement(react_native_1.Text, null, "Should Focus on Mount"),
                    React.createElement(react_native_1.Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount })),
                React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                    React.createElement(react_native_1.Text, null, "Should Focus on Container"),
                    React.createElement(react_native_1.Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer }))),
            React.createElement(react_native_2.Separator, { vertical: true }),
            React.createElement(react_native_1.View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(react_native_1.Text, null,
                    React.createElement(react_native_1.Text, null, "Menu Visibility: "),
                    isContextualMenuVisible ? React.createElement(react_native_1.Text, { style: { color: 'green' } }, "Visible") : React.createElement(react_native_1.Text, { style: { color: 'red' } }, "Not Visible")),
                React.createElement(react_native_1.Text, null,
                    React.createElement(react_native_1.Text, null, "Submenu Visibility: "),
                    isSubmenuVisible ? React.createElement(react_native_1.Text, { style: { color: 'green' } }, "Visible") : React.createElement(react_native_1.Text, { style: { color: 'red' } }, "Not Visible")),
                React.createElement(react_native_2.ButtonV1, { onClick: toggleShowContextualMenu, componentRef: stdBtnRef }, "Press for ContextualMenu"))),
        showContextualMenu && (React.createElement(react_native_2.ContextualMenu, { target: stdBtnRef, onDismiss: onDismissContextualMenu, onShow: onShowContextualMenu, accessibilityLabel: "Standard ContextualMenu", setShowMenu: toggleShowContextualMenu, shouldFocusOnMount: focusOnMount, shouldFocusOnContainer: focusOnContainer },
            React.createElement(react_native_2.ContextualMenuItem, { icon: iconExamples_1.testImage, text: "Menu item with png Icon", itemKey: "1" }),
            React.createElement(react_native_2.ContextualMenuItem, { icon: { fontSource: iconExamples_1.fontProps, color: 'blue' }, text: "Menu item with font icon", itemKey: "2" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "3", disabled: true }),
            React.createElement(react_native_2.SubmenuItem, { icon: { svgSource: iconExamples_1.svgProps, width: 12, height: 12 }, text: "Nested Menu", itemKey: "4", onHoverIn: toggleShowSubmenu, componentRef: stdMenuItemRef, expanded: showSubmenu }),
            showSubmenu && (React.createElement(react_native_2.Submenu, { target: stdMenuItemRef, onDismiss: onDismissSubmenu, onShow: onShowSubmenu, setShowMenu: toggleShowSubmenu },
                React.createElement(react_native_2.ContextualMenuItem, { icon: { svgSource: iconExamples_1.svgProps, width: 12, height: 12 }, text: "SubmenuItem svg icon", itemKey: "4", onClick: onClick }),
                React.createElement(react_native_2.ContextualMenuItem, { text: "SubmenuItem 2", itemKey: "2" }),
                React.createElement(react_native_2.ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "3", disabled: true }))),
            React.createElement(react_native_2.ContextualMenuItem, { text: "Menuitem 5", itemKey: "5" })))));
};
// custom text
const IndigoHeroBold = react_native_2.Text.customize({ tokens: { variant: 'heroStandard', fontWeight: '100', color: '#4b0082' } });
const IconContextualMenu = () => {
    const stdBtnRef = React.useRef(null);
    const [showContextualMenu, setShowContextualMenu] = React.useState(false);
    const [isContextualMenuVisible, setIsContextualMenuVisible] = React.useState(false);
    const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
    const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
    const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
    const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
    const toggleShowContextualMenu = React.useCallback(() => {
        setShowContextualMenu(!showContextualMenu);
        setIsContextualMenuVisible(!isContextualMenuVisible);
    }, [showContextualMenu, isContextualMenuVisible, setShowContextualMenu, setIsContextualMenuVisible]);
    const onShowContextualMenu = React.useCallback(() => {
        setIsContextualMenuVisible(true);
    }, [setIsContextualMenuVisible]);
    const onDismissContextualMenu = React.useCallback(() => {
        setShowContextualMenu(false);
        setIsContextualMenuVisible(false);
    }, [setShowContextualMenu]);
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_1.View, { style: { flexDirection: 'row', paddingVertical: 5 } },
            React.createElement(react_native_1.View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                    React.createElement(react_native_1.Text, null, "Should Focus on Mount"),
                    React.createElement(react_native_1.Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount })),
                React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                    React.createElement(react_native_1.Text, null, "Should Focus on Container"),
                    React.createElement(react_native_1.Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer }))),
            React.createElement(react_native_2.Separator, { vertical: true }),
            React.createElement(react_native_1.View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(react_native_1.Text, null,
                    React.createElement(react_native_1.Text, null, "Menu Visibility: "),
                    isContextualMenuVisible ? React.createElement(react_native_1.Text, { style: { color: 'green' } }, "Visible") : React.createElement(react_native_1.Text, { style: { color: 'red' } }, "Not Visible")),
                React.createElement(react_native_2.ButtonV1, { componentRef: stdBtnRef, style: { borderWidth: 0 }, icon: { svgSource: iconExamples_1.svgProps, width: 12, height: 12 }, onClick: toggleShowContextualMenu, accessibilityLabel: "Wheelchair icon button", tooltip: "Toggle menu" }))),
        showContextualMenu && (React.createElement(react_native_2.ContextualMenu, { target: stdBtnRef, onDismiss: onDismissContextualMenu, onShow: onShowContextualMenu, accessibilityLabel: "Standard ContextualMenu", setShowMenu: toggleShowContextualMenu, shouldFocusOnMount: focusOnMount, shouldFocusOnContainer: focusOnContainer },
            React.createElement(react_native_2.ContextualMenuItem, { itemKey: "1" },
                React.createElement(react_native_2.Checkbox, { label: "Unchecked checkbox" })),
            React.createElement(react_native_2.ContextualMenuItem, { itemKey: "2" },
                React.createElement(IndigoHeroBold, null, "IndigoHeroBold text with checkbox")),
            React.createElement(react_native_2.ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "3", disabled: true }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "Menuitem 4", itemKey: "4" })))));
};
const ScrollViewContextualMenu = () => {
    const stdBtnRef = React.useRef(null);
    const [showContextualMenu, setShowContextualMenu] = React.useState(false);
    const [isContextualMenuVisible, setIsContextualMenuVisible] = React.useState(false);
    const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
    const [isBeakVisible, setIsBeakVisible] = React.useState(false);
    const onIsBeakVisibleChange = React.useCallback((value) => setIsBeakVisible(value), []);
    const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
    const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
    const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
    const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
    const toggleShowContextualMenu = React.useCallback(() => {
        setShowContextualMenu(!showContextualMenu);
        setIsContextualMenuVisible(false);
    }, [showContextualMenu, setShowContextualMenu, setIsContextualMenuVisible]);
    const onShowContextualMenu = React.useCallback(() => {
        setIsContextualMenuVisible(true);
    }, [setIsContextualMenuVisible]);
    const onDismissContextualMenu = React.useCallback(() => {
        setShowContextualMenu(false);
        setIsContextualMenuVisible(false);
    }, [setShowContextualMenu]);
    const onItemClick = React.useCallback((key) => {
        setLastMenuItemClicked(key);
    }, [setLastMenuItemClicked]);
    const stdMenuItemRef = React.useRef(null);
    const [showSubmenu, setShowSubmenu] = React.useState(false);
    const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
    const toggleShowSubmenu = React.useCallback(() => {
        setShowSubmenu(!showSubmenu);
        setIsSubmenuVisible(!isSubmenuVisible);
    }, [showSubmenu, isSubmenuVisible, setShowSubmenu, setIsSubmenuVisible]);
    const onShowSubmenu = React.useCallback(() => {
        setIsSubmenuVisible(true);
    }, [setIsSubmenuVisible]);
    const onDismissSubmenu = React.useCallback(() => {
        setShowSubmenu(false);
    }, [setShowSubmenu]);
    const onClick = React.useCallback(() => {
        console.log('submenu item clicked');
    }, []);
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_1.View, { style: { flexDirection: 'row', paddingVertical: 5 } },
            React.createElement(react_native_1.View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                    React.createElement(react_native_1.Text, null, "Should Focus on Mount"),
                    React.createElement(react_native_1.Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount })),
                React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                    React.createElement(react_native_1.Text, null, "Should Focus on Container"),
                    React.createElement(react_native_1.Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer })),
                React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
                    React.createElement(react_native_1.Text, null, "Beak Visible"),
                    React.createElement(react_native_1.Switch, { value: isBeakVisible, onValueChange: onIsBeakVisibleChange }))),
            React.createElement(react_native_2.Separator, { vertical: true }),
            React.createElement(react_native_1.View, { style: { flexDirection: 'column', paddingHorizontal: 5 } },
                React.createElement(react_native_1.Text, null,
                    React.createElement(react_native_1.Text, null, "Menu Visibility: "),
                    isContextualMenuVisible ? React.createElement(react_native_1.Text, { style: { color: 'green' } }, "Visible") : React.createElement(react_native_1.Text, { style: { color: 'red' } }, "Not Visible")),
                React.createElement(react_native_1.Text, null,
                    React.createElement(react_native_1.Text, null, "Last Menu Item Clicked: "),
                    lastMenuItemClicked > 0 ? (React.createElement(react_native_1.Text, { style: { color: 'blue' } }, lastMenuItemClicked)) : (React.createElement(react_native_1.Text, { style: { color: 'blue' } }, "none"))),
                React.createElement(react_native_1.Text, null,
                    React.createElement(react_native_1.Text, null, "Menu and Submenu max height set to 200")),
                React.createElement(react_native_2.ButtonV1, { onClick: toggleShowContextualMenu, componentRef: stdBtnRef }, "Press for ContextualMenu"))),
        showContextualMenu && (React.createElement(react_native_2.ContextualMenu, { target: stdBtnRef, onDismiss: onDismissContextualMenu, onShow: onShowContextualMenu, accessibilityLabel: "Standard ContextualMenu", onItemClick: onItemClick, setShowMenu: toggleShowContextualMenu, shouldFocusOnMount: focusOnMount, shouldFocusOnContainer: focusOnContainer, isBeakVisible: isBeakVisible, maxHeight: 200 },
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 1", itemKey: "1" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 2", itemKey: "2" }),
            React.createElement(react_native_2.SubmenuItem, { icon: { svgSource: iconExamples_1.svgProps, width: 12, height: 12 }, text: "Nested Menu", itemKey: "3", onHoverIn: toggleShowSubmenu, componentRef: stdMenuItemRef, expanded: showSubmenu }),
            showSubmenu && (React.createElement(react_native_2.Submenu, { maxHeight: 200, target: stdMenuItemRef, onDismiss: onDismissSubmenu, onShow: onShowSubmenu, setShowMenu: toggleShowSubmenu },
                React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 4", itemKey: "4" }),
                React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 5", itemKey: "5" }),
                React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 6", itemKey: "6" }),
                React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 7", itemKey: "7" }),
                React.createElement(react_native_2.ContextualMenuItem, { icon: { svgSource: iconExamples_1.svgProps, width: 12, height: 12 }, text: "SubmenuItem svg icon", itemKey: "8", onClick: onClick }),
                React.createElement(react_native_2.ContextualMenuItem, { text: "SubmenuItem 2", itemKey: "9" }),
                React.createElement(react_native_2.ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "10", disabled: true }))),
            React.createElement(react_native_2.ContextualMenuItem, { text: "Disabled Menu Item", itemKey: "11", disabled: true }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 4", itemKey: "12" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 5", itemKey: "13" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 6", itemKey: "14" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 7", itemKey: "15" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 8", itemKey: "16" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 9", itemKey: "17" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 10", itemKey: "18" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 11", itemKey: "19" }),
            React.createElement(react_native_2.ContextualMenuItem, { text: "MenuItem 12", itemKey: "20" })))));
};
const contextualMenuSections = [
    {
        name: 'Standard ContextualMenu',
        testID: e2e_testing_1.CONTEXTUALMENU_TESTPAGE,
        component: ContextualMenuMainTest,
    },
    {
        name: 'Nested ContextualMenu',
        component: NestedContextualMenu,
    },
    {
        name: 'IconButton with Customized ContextualMenu',
        component: IconContextualMenu,
    },
    {
        name: 'ContextalMenu with ScrollView',
        component: ScrollViewContextualMenu,
    },
];
const e2eSections = [
    {
        name: 'ContextualMenu E2E Test',
        component: E2EContextualMenuTest_1.E2EContextualMenuTest,
    },
];
const ContextualMenuTest = () => {
    const status = {
        win32Status: 'Deprecated',
        uwpStatus: 'Deprecated',
        iosStatus: 'Deprecated',
        macosStatus: 'Deprecated',
        androidStatus: 'Deprecated',
    };
    const description = 'ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places.\n\nThere are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons.\n\nOrganize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.';
    return (React.createElement(Test_1.Test, { name: "ContextualMenu Test", description: description, sections: contextualMenuSections, status: status, e2eSections: e2eSections }));
};
exports.ContextualMenuTest = ContextualMenuTest;
//# sourceMappingURL=ContextualMenuTest.js.map