define(["require", "exports", "tslib", "react", "@fluentui/react-tooltip", "@fluentui/react-theme-provider", "@fluentui/react-theme", "@fluentui/react-make-styles"], function (require, exports, tslib_1, React, react_tooltip_1, react_theme_provider_1, react_theme_1, react_make_styles_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.TooltipTriggerExample = void 0;
    var useStyles = react_make_styles_1.makeStyles({
        root: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start',
        },
        exampleList: {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'flex-start',
            margin: '16px 0',
            gap: '16px',
        },
        targetContainer: {
            display: 'grid',
            alignItems: 'center',
            justifyItems: 'center',
            gap: '4px',
            margin: '16px 128px',
        },
        target: {
            width: '48px',
            height: '48px',
        },
    });
    var TooltipTriggerExample = function () { return (React.createElement(react_theme_provider_1.ThemeProvider, { theme: react_theme_1.webLightTheme },
        React.createElement(react_tooltip_1.TooltipProvider, null,
            React.createElement(TooltipTriggerExampleCore, null)))); };
    exports.TooltipTriggerExample = TooltipTriggerExample;
    var TooltipOnlyIfTruncatedExample = function () {
        var text = 'This will only show a tooltip if the content is truncated';
        var _a = React.useState(false), wide = _a[0], setWide = _a[1];
        return (React.createElement("div", null,
            React.createElement("button", { onClick: function () { return setWide(!wide); } }, "Toggle Width"),
            React.createElement(react_tooltip_1.TooltipTrigger, { tooltip: text, type: "label", onlyIfTruncated: true },
                React.createElement("div", { style: {
                        width: wide ? '500px' : '100px',
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        border: '1px solid lightgray',
                    }, tabIndex: 0 }, text))));
    };
    var TooltipTriggerExampleCore = function () {
        var styles = useStyles();
        var targetRef1 = React.useRef(null);
        return (React.createElement("div", { className: styles.root },
            React.createElement("h2", null, "Basic examples"),
            "Hover or focus the buttons to show their tooltips:",
            React.createElement("div", { className: styles.exampleList },
                React.createElement(react_tooltip_1.TooltipTrigger, { tooltip: "This is a default tooltip" },
                    React.createElement("button", null, "Default")),
                React.createElement(react_tooltip_1.TooltipTrigger, { tooltip: "This is a subtle tooltip", subtle: true },
                    React.createElement("button", null, "Subtle")),
                React.createElement(react_tooltip_1.TooltipTrigger, { tooltip: "This tooltip has no arrow", noArrow: true },
                    React.createElement("button", null, "No arrow")),
                React.createElement(react_tooltip_1.TooltipTrigger, { tooltip: React.createElement(React.Fragment, null,
                        "This ",
                        React.createElement("i", null, "tooltip"),
                        " has ",
                        React.createElement("u", null, "JSX"),
                        " content") },
                    React.createElement("button", null, "JSX content")),
                React.createElement(react_tooltip_1.TooltipTrigger, { tooltip: "This tooltip targets the red square", targetRef: targetRef1 },
                    React.createElement("button", null,
                        "Custom target:",
                        ' ',
                        React.createElement("div", { ref: targetRef1, style: { display: 'inline-block', width: '8px', height: '8px', background: 'red' } }))),
                React.createElement(react_tooltip_1.TooltipTrigger, { tooltip: "The trigger button was rendered by a render function" }, function (triggerProps) { return (React.createElement("div", null,
                    React.createElement("button", tslib_1.__assign({}, triggerProps), "Custom trigger"))); })),
            React.createElement("h2", null, "Only if truncated"),
            React.createElement("div", null,
                React.createElement(TooltipOnlyIfTruncatedExample, null)),
            React.createElement("h2", null, "Position"),
            "Each of these buttons places the tooltip in a different location relative to its trigger button.",
            React.createElement("div", { className: styles.targetContainer },
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "above start", position: "above", align: "start" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '1 / 2' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "above center", position: "above", align: "center" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '1 / 3' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "above end", position: "above", align: "end" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '1 / 4' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "before top", position: "before", align: "top" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '2 / 1' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "before center", position: "before", align: "center" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '3 / 1' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "before bottom", position: "before", align: "bottom" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '4 / 1' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "after top", position: "after", align: "top" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '2 / 5' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "after center", position: "after", align: "center" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '3 / 5' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "after bottom", position: "after", align: "bottom" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '4 / 5' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "below start", position: "below", align: "start" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '5 / 2' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "below center", position: "below", align: "center" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '5 / 3' } })),
                React.createElement(react_tooltip_1.TooltipTrigger, { type: "label", tooltip: "below end", position: "below", align: "end" },
                    React.createElement("button", { className: styles.target, style: { gridArea: '5 / 4' } })))));
    };
});
//# sourceMappingURL=TooltipTrigger.stories.js.map