"use strict";
// The require scope
var __webpack_require__ = {};
/************************************************************************/ // webpack/runtime/compat_get_default_export
(()=>{
    // getDefaultExport function for compatibility with non-ESM modules
    __webpack_require__.n = function(module) {
        var getter = module && module.__esModule ? function() {
            return module['default'];
        } : function() {
            return module;
        };
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
// webpack/runtime/define_property_getters
(()=>{
    __webpack_require__.d = function(exports1, definition) {
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
// webpack/runtime/has_own_property
(()=>{
    __webpack_require__.o = function(obj, prop) {
        return Object.prototype.hasOwnProperty.call(obj, prop);
    };
})();
// webpack/runtime/make_namespace_object
(()=>{
    // define __esModule on exports
    __webpack_require__.r = function(exports1) {
        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
/************************************************************************/ var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
    PopoverOnHover: ()=>/* binding */ PopoverOnHover,
    PopoverWithFocusRef: ()=>/* binding */ PopoverWithFocusRef,
    PopoverWithProps: ()=>/* binding */ PopoverWithProps,
    PopoverWithSize: ()=>/* binding */ PopoverWithSize,
    FocusElementOnPopoverOpen: ()=>/* binding */ FocusElementOnPopoverOpen,
    default: ()=>/* binding */ Popover_stories_rslib_entry_,
    Default: ()=>/* binding */ Default
});
const external_react_namespaceObject = require("react");
var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
const react_namespaceObject = require("@chakra-ui/react");
const external_Popover_js_namespaceObject = require("./Popover.js");
var external_Popover_js_default = /*#__PURE__*/ __webpack_require__.n(external_Popover_js_namespaceObject);
const external_PopoverContent_js_namespaceObject = require("./PopoverContent.js");
var external_PopoverContent_js_default = /*#__PURE__*/ __webpack_require__.n(external_PopoverContent_js_namespaceObject);
const test_namespaceObject = require("@storybook/test");
const meta = {
    title: 'Components/RedPandaPopover',
    component: external_Popover_js_default(),
    argTypes: {
        trigger: {
            control: 'radio',
            options: [
                'hover',
                'click'
            ]
        },
        size: {
            control: 'select',
            options: [
                'sm',
                'md',
                'lg',
                'xl',
                'auto'
            ]
        },
        placement: {
            control: 'select',
            options: [
                'top',
                'right',
                'bottom',
                'left'
            ]
        }
    },
    args: {
        trigger: 'hover',
        size: 'sm',
        placement: 'top'
    }
};
/* ESM default export */ const Popover_stories_rslib_entry_ = meta;
const Default = {
    render: (args)=>/*#__PURE__*/ external_react_default().createElement(external_Popover_js_default(), args, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverTrigger, null, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Button, null, "Trigger (", args.trigger, ")")), /*#__PURE__*/ external_react_default().createElement(external_PopoverContent_js_default(), null, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverArrow, null), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverCloseButton, {
            "data-testid": "popover-close-button"
        }), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverHeader, null, "Confirmation!"), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverBody, {
            "data-testid": "popover-body"
        }, "Are you sure you want to have that milkshake?"))),
    play: async ({ canvasElement, step })=>{
        const user = test_namespaceObject.userEvent.setup();
        const canvas = (0, test_namespaceObject.within)(canvasElement);
        await step('Check defaults', async ()=>{
            await (0, test_namespaceObject.waitFor)(()=>{
                (0, test_namespaceObject.expect)(canvas.getByTestId('popover-body')).toBeInTheDocument();
                (0, test_namespaceObject.expect)(canvas.getByTestId('popover-body')).not.toBeVisible();
            });
        });
        user.hover(canvas.getByText('Trigger (hover)'));
        await step('Triggering hover event shows visibility', async ()=>{
            await (0, test_namespaceObject.waitFor)(()=>{
                (0, test_namespaceObject.expect)(canvas.getByTestId('popover-body')).toBeInTheDocument();
                (0, test_namespaceObject.expect)(canvas.getByTestId('popover-body')).toBeVisible();
            });
        });
        test_namespaceObject.fireEvent.click(canvas.getByTestId('popover-close-button'));
        await step('Dismissing popover hides popover body', async ()=>{
            await (0, test_namespaceObject.waitFor)(()=>{
                (0, test_namespaceObject.expect)(canvas.getByTestId('popover-body')).toBeInTheDocument();
                (0, test_namespaceObject.expect)(canvas.getByTestId('popover-body')).not.toBeVisible();
            });
        });
    }
};
const PopoverOnHover = {
    render: (args)=>/*#__PURE__*/ external_react_default().createElement(external_Popover_js_default(), args, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverTrigger, null, /*#__PURE__*/ external_react_default().createElement("span", null, "Trigger (", args.trigger, ")")), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Portal, null, /*#__PURE__*/ external_react_default().createElement(external_PopoverContent_js_default(), null, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverArrow, null), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverCloseButton, null), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverHeader, null, "Confirmation!"), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverBody, null, /*#__PURE__*/ external_react_default().createElement("p", null, "Are you sure you want to have that milkshake?")))))
};
const PopoverWithProps = {
    argTypes: {
        hideCloseButton: {
            control: 'boolean'
        }
    },
    args: {
        hideCloseButton: false
    },
    render: (args)=>/*#__PURE__*/ external_react_default().createElement(external_Popover_js_default(), {
            title: "My Popover Title",
            content: /*#__PURE__*/ external_react_default().createElement(external_react_default().Fragment, null, /*#__PURE__*/ external_react_default().createElement("p", null, "Due to browser restrictions, the clipboard is not accessible on unsecure connections."), /*#__PURE__*/ external_react_default().createElement("br", null), /*#__PURE__*/ external_react_default().createElement("p", null, "Please make sure to run Redpanda Console with SSL enabled to use this feature.")),
            ...args
        }, "Trigger (", args.trigger, ")")
};
const PopoverWithFocusRef = {
    render: (args)=>{
        const initialFocusRef = external_react_default().useRef(null);
        return /*#__PURE__*/ external_react_default().createElement(external_Popover_js_default(), {
            trigger: "click",
            initialFocusRef: initialFocusRef,
            content: /*#__PURE__*/ external_react_default().createElement(external_react_default().Fragment, null, /*#__PURE__*/ external_react_default().createElement("p", null, "Are you sure you want to have that burger? Type yes or no."), /*#__PURE__*/ external_react_default().createElement("p", null, /*#__PURE__*/ external_react_default().createElement("input", {
                type: "text",
                placeholder: "Enter",
                ref: initialFocusRef
            }))),
            ...args
        }, /*#__PURE__*/ external_react_default().createElement("button", {
            type: "button"
        }, "Trigger (", args.trigger, ")"));
    }
};
const PopoverWithSize = {
    render: (args)=>/*#__PURE__*/ external_react_default().createElement(external_Popover_js_default(), {
            size: "auto",
            placement: "right",
            hideCloseButton: true,
            content: /*#__PURE__*/ external_react_default().createElement("div", {
                style: {
                    maxWidth: '500px',
                    minWidth: 'max-content',
                    whiteSpace: 'pre-wrap'
                }
            }, "com.redpanda.kafka.connect.gcs.GcsSinkConnector"),
            ...args
        }, "Trigger (", args.trigger, ")")
};
const FocusElementOnPopoverOpen = {
    name: 'Focus Element on Open',
    render: (args)=>{
        const initialFocusRef = external_react_default().useRef(null);
        return /*#__PURE__*/ external_react_default().createElement(external_Popover_js_default(), {
            initialFocusRef: initialFocusRef,
            placement: "bottom",
            closeOnBlur: false,
            trigger: "click",
            ...args
        }, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverTrigger, null, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Button, null, "Trigger (", args.trigger, ")")), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Portal, null, /*#__PURE__*/ external_react_default().createElement(external_PopoverContent_js_default(), {
            color: "white",
            bg: "blue.800",
            borderColor: "blue.800"
        }, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverHeader, {
            pt: 4,
            fontWeight: "bold",
            color: "white",
            border: "0"
        }, "Manage Your Channels"), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverArrow, {
            bg: "blue.800"
        }), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverCloseButton, null), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverBody, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.PopoverFooter, {
            border: "0",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            pb: 4
        }, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Box, {
            fontSize: "sm"
        }, "Step 2 of 4"), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.ButtonGroup, {
            size: "sm"
        }, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Button, {
            colorScheme: "green"
        }, "Setup Email"), /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Button, {
            colorScheme: "blue",
            ref: initialFocusRef
        }, "Next"))))));
    }
};
var __webpack_export_target__ = exports;
for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
    value: true
});
