"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__, {
    EmptyState: ()=>/* binding */ EmptyState,
    CreatableMultiSelect: ()=>/* binding */ CreatableMultiSelect,
    SingleSelect: ()=>/* binding */ SingleSelect,
    default: ()=>/* binding */ Select_stories_rslib_entry_,
    MultiGroup: ()=>/* binding */ MultiGroup,
    Group: ()=>/* binding */ Group,
    DefaultMultiSelect: ()=>/* binding */ DefaultMultiSelect,
    SelectTypeInferringMulti: ()=>/* binding */ SelectTypeInferringMulti,
    SelectTypeInferring: ()=>/* binding */ SelectTypeInferring,
    MaxSelect: ()=>/* binding */ MaxSelect,
    LoadingState: ()=>/* binding */ LoadingState,
    Advanced: ()=>/* binding */ Advanced,
    NoLabelGroupMulti: ()=>/* binding */ NoLabelGroupMulti,
    DefaultSingleSelect: ()=>/* binding */ DefaultSingleSelect,
    NoLabelMulti: ()=>/* binding */ NoLabelMulti,
    NoLabelSingle: ()=>/* binding */ NoLabelSingle,
    MultiSelect: ()=>/* binding */ MultiSelect,
    CreatableSingleSelect: ()=>/* binding */ CreatableSingleSelect,
    NoLabelGroup: ()=>/* binding */ NoLabelGroup,
    WithAccordion: ()=>/* binding */ WithAccordion,
    ControlledWithRef: ()=>/* binding */ ControlledWithRef
});
const react_namespaceObject = require("@chakra-ui/react");
const test_namespaceObject = require("@storybook/test");
const external_react_namespaceObject = require("react");
const external_Select_js_namespaceObject = require("./Select.js");
var external_Select_js_default = /*#__PURE__*/ __webpack_require__.n(external_Select_js_namespaceObject);
const Accordion_js_namespaceObject = require("../../Accordion/Accordion.js");
var Accordion_js_default = /*#__PURE__*/ __webpack_require__.n(Accordion_js_namespaceObject);
const lorem = `
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
`;
const LoremIpsum = ({ iterations = 1, ...rest })=>{
    const texts = [];
    for(let i = 0; i < iterations; i++)texts.push(/*#__PURE__*/ React.createElement(react_namespaceObject.Text, rest, lorem));
    return /*#__PURE__*/ React.createElement(React.Fragment, null, texts);
};
/* ESM default export */ const content_helper = LoremIpsum;
const meta = {
    title: 'Components/Inputs/Select',
    component: external_Select_js_default(),
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=36-922&mode=design&t=cVtmR0UCPQ2Em08Q-4'
        }
    }
};
/* ESM default export */ const Select_stories_rslib_entry_ = meta;
const SingleSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'us-east-1',
                value: 'us-east-1'
            }
        ]
    },
    play: async ({ canvasElement, step })=>{
        const canvas = (0, test_namespaceObject.within)(canvasElement);
        await step('Check defaults', async ()=>{
            (0, test_namespaceObject.expect)(canvas.getByText('Select region')).toBeVisible();
        });
    }
};
const CreatableSingleSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'us-east-1',
                value: 'us-east-1'
            }
        ],
        creatable: true
    },
    play: async ({ canvasElement, step })=>{
        const canvas = (0, test_namespaceObject.within)(canvasElement);
        await step('Check defaults', async ()=>{
            (0, test_namespaceObject.expect)(canvas.getByText('Select region')).toBeVisible();
        });
    }
};
const NoLabelSingle = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        options: [
            {
                value: 'eu-central-1'
            },
            {
                value: 'us-east-1'
            }
        ]
    }
};
const NoLabelMulti = {
    args: {
        name: 'regionField',
        placeholder: 'Select regions',
        isMulti: true,
        options: [
            {
                value: 'eu-central-1'
            },
            {
                value: 'us-east-1'
            },
            {
                value: 'us-west-1'
            }
        ]
    }
};
const NoLabelGroup = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    }
};
const NoLabelGroupMulti = {
    args: {
        name: 'regionField',
        placeholder: 'Select regions',
        isMulti: true,
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    }
};
const DefaultSingleSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        defaultValue: {
            label: 'eu-central-1',
            value: 'eu-central-1'
        },
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'us-east-1',
                value: 'us-east-1'
            }
        ]
    }
};
const MultiSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select multiple regions',
        isMulti: true,
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'eu-west-1',
                value: 'eu-west-1'
            },
            {
                label: 'eu-east-1',
                value: 'eu-east-1'
            }
        ]
    }
};
const CreatableMultiSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select multiple regions',
        isMulti: true,
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'eu-west-1',
                value: 'eu-west-1'
            },
            {
                label: 'eu-east-1',
                value: 'eu-east-1'
            }
        ],
        creatable: true
    }
};
const DefaultMultiSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select multiple regions',
        isMulti: true,
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'eu-west-1',
                value: 'eu-west-1'
            },
            {
                label: 'eu-east-1',
                value: 'eu-east-1'
            }
        ],
        defaultValue: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'eu-west-1',
                value: 'eu-west-1'
            }
        ]
    }
};
const Group = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        label: 'eu-central-1',
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    }
};
const MultiGroup = {
    args: {
        name: 'regionField',
        placeholder: 'Select multiple regions',
        isMulti: true,
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        label: 'eu-central-1',
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    }
};
const MaxSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select max 2 regions',
        max: 2,
        isMulti: true,
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'eu-west-1',
                value: 'eu-west-1'
            },
            {
                label: 'eu-east-1',
                value: 'eu-east-1'
            }
        ]
    }
};
const Advanced = {
    args: {
        name: 'regionField',
        placeholder: 'Select max 2 regions',
        max: 2,
        isMulti: true,
        defaultValue: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            }
        ],
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        label: 'eu-central-1',
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        label: 'us-west-1',
                        value: 'us-west-1'
                    },
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    },
    play: async ({ canvasElement, step })=>{
        const canvas = (0, test_namespaceObject.within)(canvasElement);
        await step('Check defaults', async ()=>{
            (0, test_namespaceObject.expect)(canvas.getByText('eu-central-1')).toBeVisible();
            (0, test_namespaceObject.expect)(canvas.getByTestId('select-dropdown-indicator')).toBeVisible();
        });
        await step('Clear option', async ()=>{
            test_namespaceObject.fireEvent.click(canvas.getByRole('button'));
        });
        await step('Click dropdown', async ()=>{
            test_namespaceObject.fireEvent.click(canvas.getByTestId('select-dropdown-indicator'));
        // TODO: Check options
        });
    }
};
const SelectTypeInferring = ()=>{
    const [state, setState] = (0, external_react_namespaceObject.useState)({
        cleanupPolicy: 'delete'
    });
    return /*#__PURE__*/ React.createElement(react_namespaceObject.Box, {
        width: "100%"
    }, /*#__PURE__*/ React.createElement(external_Select_js_default(), {
        isMulti: false,
        options: [
            {
                value: 'delete'
            },
            {
                value: 'compact'
            }
        ],
        value: {
            value: state.cleanupPolicy
        },
        onChange: (e)=>{
            if (e && (0, external_Select_js_namespaceObject.isSingleValue)(e) && e.value) setState({
                cleanupPolicy: e.value
            });
        }
    }));
};
const SelectTypeInferringMulti = ()=>{
    const [state, setState] = (0, external_react_namespaceObject.useState)({
        cleanupPolicy: [
            'delete'
        ]
    });
    return /*#__PURE__*/ React.createElement(react_namespaceObject.Box, {
        width: "100%"
    }, /*#__PURE__*/ React.createElement(external_Select_js_default(), {
        isMulti: true,
        options: [
            {
                value: 'delete'
            },
            {
                value: 'compact'
            }
        ],
        value: state.cleanupPolicy?.map((policy)=>({
                value: policy
            })),
        onChange: (e)=>{
            if (e && (0, external_Select_js_namespaceObject.isMultiValue)(e)) setState({
                cleanupPolicy: e.map(({ value })=>value)
            });
        }
    }));
};
const ControlledWithRef = ()=>{
    const someRef = (0, external_react_namespaceObject.useRef)(null);
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(external_Select_js_default(), {
        innerRef: someRef,
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        label: 'eu-central-1',
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        label: 'us-west-1',
                        value: 'us-west-1'
                    },
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    }), /*#__PURE__*/ React.createElement(react_namespaceObject.ButtonGroup, {
        mt: 8
    }, /*#__PURE__*/ React.createElement(react_namespaceObject.Button, {
        onClick: ()=>someRef.current?.clearValue()
    }, "Click to reset"), /*#__PURE__*/ React.createElement(react_namespaceObject.Button, {
        onClick: ()=>someRef.current?.setValue({
                label: 'us-west-1',
                value: 'us-west-1'
            }, 'select-option')
    }, "Click to control value")));
};
const EmptyState = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        options: []
    });
const LoadingState = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        isLoading: true,
        options: []
    });
const WithAccordion = ()=>/*#__PURE__*/ React.createElement(Accordion_js_default(), {
        allowMultiple: true,
        defaultIndex: [
            0
        ],
        items: [
            {
                heading: 'Item 1',
                description: /*#__PURE__*/ React.createElement(external_Select_js_default(), {
                    options: [
                        {
                            label: 'Option 1',
                            value: 'option-1'
                        },
                        {
                            label: 'Option 2',
                            value: 'option-2'
                        },
                        {
                            label: 'Option 3',
                            value: 'option-3'
                        },
                        {
                            label: 'Option 4',
                            value: 'option-4'
                        },
                        {
                            label: 'Option 5',
                            value: 'option-5'
                        },
                        {
                            label: 'Option 6',
                            value: 'option-6'
                        },
                        {
                            label: 'Option 7',
                            value: 'option-7'
                        },
                        {
                            label: 'Option 8',
                            value: 'option-8'
                        },
                        {
                            label: 'Option 9',
                            value: 'option-9'
                        }
                    ]
                })
            },
            {
                heading: 'Item 2',
                description: /*#__PURE__*/ React.createElement(content_helper, null)
            },
            {
                heading: 'Item 3',
                description: /*#__PURE__*/ React.createElement(content_helper, null)
            }
        ]
    });
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
});
