define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/CommandBar", "office-ui-fabric-react/lib/Callout", "office-ui-fabric-react/lib/Coachmark", "office-ui-fabric-react/lib/TeachingBubble", "office-ui-fabric-react/lib/Button"], function (require, exports, tslib_1, React, CommandBar_1, Callout_1, Coachmark_1, TeachingBubble_1, Button_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    /** Command bar button with a coachmark and teaching bubble */
    var CoachmarkCommandBarButton = function (props) {
        var targetButton = React.useRef(null);
        var defaultRender = props.defaultRender, isCoachmarkVisible = props.isCoachmarkVisible, onDismiss = props.onDismiss, buttonProps = tslib_1.__rest(props, ["defaultRender", "isCoachmarkVisible", "onDismiss"]);
        var ButtonComponent = defaultRender || Button_1.CommandBarButton;
        return (React.createElement(React.Fragment, null,
            React.createElement("div", { ref: targetButton },
                React.createElement(ButtonComponent, tslib_1.__assign({}, buttonProps))),
            isCoachmarkVisible && (React.createElement(Coachmark_1.Coachmark, { target: targetButton.current, positioningContainerProps: {
                    directionalHint: Callout_1.DirectionalHint.bottomCenter
                }, ariaAlertText: "A Coachmark has appeared", ariaDescribedBy: "coachmark-desc1", ariaLabelledBy: "coachmark-label1", ariaLabelledByText: "Coachmark notification" },
                React.createElement(TeachingBubble_1.TeachingBubbleContent, { headline: "Example Title", hasCloseIcon: true, closeButtonAriaLabel: "Close", onDismiss: onDismiss, ariaDescribedBy: "example-description1", ariaLabelledBy: "example-label1" }, "Welcome to the land of Coachmarks!")))));
    };
    var overflowButtonProps = {
        ariaLabel: 'More commands'
    };
    /** Command bar which renders the Share button with a coachmark */
    var IndividualCommandBarButtonAsExample = function (props) {
        var onDismissCoachmark = props.onDismissCoachmark, isCoachmarkVisible = props.isCoachmarkVisible;
        var items = React.useMemo(function () {
            var CoachmarkButtonWrapper = function (p) {
                return React.createElement(CoachmarkCommandBarButton, tslib_1.__assign({}, p, { isCoachmarkVisible: isCoachmarkVisible, onDismiss: onDismissCoachmark }));
            };
            return [
                { key: 'newItem', text: 'New', iconProps: { iconName: 'Add' }, onClick: function () { return console.log('New'); } },
                { key: 'upload', text: 'Upload', iconProps: { iconName: 'Upload' }, onClick: function () { return console.log('Upload'); } },
                {
                    key: 'share',
                    text: 'Share',
                    iconProps: { iconName: 'Share' },
                    // The Share button will have a coachmark
                    commandBarButtonAs: CoachmarkButtonWrapper,
                    onClick: function () { return console.log('Share'); }
                },
                { key: 'download', text: 'Download', iconProps: { iconName: 'Download' }, onClick: function () { return console.log('Download'); } }
            ];
        }, [props.onDismissCoachmark, props.isCoachmarkVisible]);
        return (React.createElement(CommandBar_1.CommandBar, { overflowButtonProps: overflowButtonProps, items: items, ariaLabel: "Use left and right arrow keys to navigate between commands" }));
    };
    exports.IndividualCommandBarButtonAsExampleWrapper = function () {
        var _a = React.useState(true), isCoachmarkVisible = _a[0], setIsCoachmarkVisible = _a[1];
        var onDismissCoachmark = React.useCallback(function () { return setIsCoachmarkVisible(false); }, []);
        return React.createElement(IndividualCommandBarButtonAsExample, { onDismissCoachmark: onDismissCoachmark, isCoachmarkVisible: isCoachmarkVisible });
    };
});
//# sourceMappingURL=CommandBar.CommandBarButtonAs.Example.js.map