"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__, {
    Placeholder: ()=>/* binding */ Placeholder,
    NoOptionsMessage: ()=>/* binding */ NoOptionsMessage,
    SingleValue: ()=>/* binding */ SingleValue,
    IndicatorsContainer: ()=>/* binding */ IndicatorsContainer,
    CustomFilterOptionWithCreateFilter: ()=>/* binding */ CustomFilterOptionWithCreateFilter,
    GroupHeading: ()=>/* binding */ GroupHeading,
    Control: ()=>/* binding */ Control,
    ReplaceMenuBuffer: ()=>/* binding */ ReplaceMenuBuffer,
    CustomFilterOptionFunction: ()=>/* binding */ CustomFilterOptionFunction,
    LoadingMessage: ()=>/* binding */ LoadingMessage,
    MultiValueRemove: ()=>/* binding */ MultiValueRemove,
    Menu: ()=>/* binding */ Menu,
    MenuList: ()=>/* binding */ MenuList,
    MultiValueContainer: ()=>/* binding */ MultiValueContainer,
    FormatGroupLabel: ()=>/* binding */ FormatGroupLabel,
    CustomAriaLive: ()=>/* binding */ CustomAriaLive,
    DropdownIndicator: ()=>/* binding */ DropdownIndicator,
    ValueContainer: ()=>/* binding */ ValueContainer,
    IsOptionDisabled: ()=>/* binding */ IsOptionDisabled,
    IndicatorSeparator: ()=>/* binding */ IndicatorSeparator,
    default: ()=>/* binding */ ReactSelectExamples_stories_rslib_entry_,
    Group: ()=>/* binding */ Group,
    Input: ()=>/* binding */ Input,
    GetOptionLabel: ()=>/* binding */ GetOptionLabel,
    SelectContainer: ()=>/* binding */ SelectContainer,
    MultiValueLabel: ()=>/* binding */ MultiValueLabel,
    ClearIndicator: ()=>/* binding */ ClearIndicator,
    Option: ()=>/* binding */ Option,
    ControlEmoji: ()=>/* binding */ ControlEmoji,
    GetOptionValue: ()=>/* binding */ GetOptionValue,
    LoadingIndicator: ()=>/* binding */ LoadingIndicator
});
const react_namespaceObject = require("@chakra-ui/react");
const external_chakra_react_select_namespaceObject = require("chakra-react-select");
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 selectComponents_js_namespaceObject = require("./storyHelpers/selectComponents.js");
const selectData_js_namespaceObject = require("./storyHelpers/selectData.js");
const selectStyles_js_namespaceObject = require("./storyHelpers/selectStyles.js");
const selectUtilities_js_namespaceObject = require("./storyHelpers/selectUtilities.js");
const meta = {
    title: 'Components/Inputs/ReactSelectExamples',
    component: external_Select_js_default()
};
/* ESM default export */ const ReactSelectExamples_stories_rslib_entry_ = meta;
/**
 *
 * @see https://react-select.com/advanced#accessibility
 */ const CustomAriaLive = ()=>{
    const [ariaFocusMessage, setAriaFocusMessage] = (0, external_react_namespaceObject.useState)('');
    const [isMenuOpen, setIsMenuOpen] = (0, external_react_namespaceObject.useState)(false);
    const style = {
        blockquote: {
            fontStyle: 'italic',
            fontSize: '.75rem',
            margin: '1rem 0'
        },
        label: {
            fontSize: '.75rem',
            fontWeight: 'bold',
            lineHeight: 2
        }
    };
    const onFocus = ({ focused, isDisabled })=>{
        const msg = `You are currently focused on option ${focused.label}${isDisabled ? ', disabled' : ''}`;
        setAriaFocusMessage(msg);
        return msg;
    };
    const onMenuOpen = ()=>setIsMenuOpen(true);
    const onMenuClose = ()=>setIsMenuOpen(false);
    return /*#__PURE__*/ React.createElement(react_namespaceObject.chakra.form, null, /*#__PURE__*/ React.createElement(react_namespaceObject.FormLabel, {
        style: style.label,
        id: "aria-label",
        htmlFor: "aria-example-input"
    }, "Select a color"), !!ariaFocusMessage && !!isMenuOpen && /*#__PURE__*/ React.createElement(react_namespaceObject.chakra.blockquote, {
        style: style.blockquote
    }, '"', ariaFocusMessage, '"'), /*#__PURE__*/ React.createElement(external_Select_js_default(), {
        "aria-labelledby": "aria-label",
        ariaLiveMessages: {
            onFocus
        },
        inputId: "aria-example-input",
        name: "aria-live-color",
        onMenuOpen: onMenuOpen,
        onMenuClose: onMenuClose,
        menuIsOpen: isMenuOpen,
        options: selectData_js_namespaceObject.colourOptions
    }));
};
/**
 *
 * @see https://react-select.com/advanced#custom-filter-logic
 */ const CustomFilterOptionWithCreateFilter = ()=>{
    const [ignoreCase, setIgnoreCase] = (0, external_react_namespaceObject.useState)(false);
    const [ignoreAccents, setIgnoreAccents] = (0, external_react_namespaceObject.useState)(false);
    const [trim, setTrim] = (0, external_react_namespaceObject.useState)(false);
    const [matchFromStart, setMatchFromStart] = (0, external_react_namespaceObject.useState)(false);
    const filterConfig = {
        ignoreCase,
        ignoreAccents,
        trim,
        matchFrom: matchFromStart ? 'start' : 'any'
    };
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["0"],
        isClearable: true,
        isSearchable: true,
        name: "color",
        options: selectData_js_namespaceObject.colourOptions,
        filterOption: (0, external_chakra_react_select_namespaceObject.createFilter)(filterConfig)
    }), /*#__PURE__*/ React.createElement(react_namespaceObject.HStack, {
        spacing: 4,
        mt: 4
    }, /*#__PURE__*/ React.createElement(selectComponents_js_namespaceObject.Note, null, /*#__PURE__*/ React.createElement(react_namespaceObject.Checkbox, {
        checked: ignoreCase,
        onChange: ()=>setIgnoreCase((prev)=>!prev),
        id: "single__clearable-checkbox"
    }), "Ignore Case"), /*#__PURE__*/ React.createElement(selectComponents_js_namespaceObject.Note, null, /*#__PURE__*/ React.createElement(react_namespaceObject.Checkbox, {
        checked: ignoreAccents,
        onChange: ()=>setIgnoreAccents((prev)=>!prev),
        id: "single__clearable-checkbox"
    }), "Ignore Accents"), /*#__PURE__*/ React.createElement(selectComponents_js_namespaceObject.Note, null, /*#__PURE__*/ React.createElement(react_namespaceObject.Checkbox, {
        checked: trim,
        onChange: ()=>setTrim((prev)=>!prev),
        id: "single__clearable-checkbox"
    }), "Trim"), /*#__PURE__*/ React.createElement(selectComponents_js_namespaceObject.Note, null, /*#__PURE__*/ React.createElement(react_namespaceObject.Checkbox, {
        checked: matchFromStart,
        onChange: ()=>setMatchFromStart((prev)=>!prev),
        id: "single__clearable-checkbox"
    }), "Match from the start")));
};
/**
 *
 * @see https://react-select.com/advanced#custom-filter-logic
 */ const CustomFilterOptionFunction = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectUtilities_js_namespaceObject.customOptions["0"],
        isClearable: true,
        isSearchable: true,
        name: "color",
        options: selectUtilities_js_namespaceObject.customOptions,
        filterOption: selectUtilities_js_namespaceObject.filterOptions
    });
/**
 *
 * @see https://react-select.com/advanced#replacing-builtins
 */ const FormatGroupLabel = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["1"],
        options: selectData_js_namespaceObject.groupedOptions,
        formatGroupLabel: selectComponents_js_namespaceObject.formatGroupLabel
    });
const GetOptionLabel = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(react_namespaceObject.Text, null, "Composing a display label from the label property and rating property in the options object"), /*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.flavourOptions["0"],
        isClearable: true,
        isSearchable: true,
        name: "color",
        options: selectData_js_namespaceObject.flavourOptions,
        getOptionLabel: (option)=>{
            const optionAsFlavour = option;
            return `${optionAsFlavour.label}: ${optionAsFlavour.rating}`;
        }
    }));
const GetOptionValue = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(react_namespaceObject.Text, null, "Using id property, instead of value property."), /*#__PURE__*/ React.createElement(external_Select_js_default(), {
        // We need to cast it since we are using a different property name
        defaultValue: selectData_js_namespaceObject.dogOptions["0"],
        isClearable: true,
        isSearchable: true,
        name: "dog",
        options: selectData_js_namespaceObject.dogOptions,
        getOptionValue: (option)=>{
            const optionAsDogBreed = option;
            return `${optionAsDogBreed.id}`;
        }
    }));
const IsOptionDisabled = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(react_namespaceObject.Text, null, "Disable all options that do not have a 'safe' rating, via the isOptionsDisabled fn prop"), /*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.flavourOptions["0"],
        isClearable: true,
        isSearchable: true,
        name: "color",
        options: selectData_js_namespaceObject.flavourOptions,
        isOptionDisabled: (option)=>'safe' !== option.rating
    }));
const ReplaceMenuBuffer = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["0"],
        options: selectData_js_namespaceObject.colourOptions,
        styles: {
            menu: (base)=>({
                    ...base,
                    marginBottom: 144
                })
        }
    });
/**
 *
 * @param props https://react-select.com/components#adjusting-the-styling
 */ const ControlEmoji = (props)=>{
    const [clickCount, setClickCount] = (0, external_react_namespaceObject.useState)(0);
    const onClick = (e)=>{
        setClickCount(clickCount + 1);
        e.preventDefault();
        e.stopPropagation();
    };
    const styles = {
        control: (css)=>({
                ...css,
                paddingLeft: '1rem'
            })
    };
    const emoji = selectUtilities_js_namespaceObject.EMOJIS[clickCount % selectUtilities_js_namespaceObject.EMOJIS.length];
    return /*#__PURE__*/ React.createElement(external_Select_js_default(), {
        ...props,
        // @ts-ignore Pass to Control component
        emoji: emoji,
        onEmojiClick: onClick,
        components: {
            Control: selectComponents_js_namespaceObject.CustomControlEmoji
        },
        isSearchable: true,
        name: "emoji",
        options: selectData_js_namespaceObject.colourOptions,
        styles: styles
    });
};
const ClearIndicator = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        closeMenuOnSelect: false,
        components: {
            ClearIndicator: selectComponents_js_namespaceObject.CustomClearIndicator
        },
        styles: {
            clearIndicator: selectComponents_js_namespaceObject.ClearIndicatorStyles
        },
        defaultValue: [
            selectData_js_namespaceObject.colourOptions["4"],
            selectData_js_namespaceObject.colourOptions["5"]
        ],
        isMulti: true,
        options: selectData_js_namespaceObject.colourOptions
    });
const Control = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["0"],
        isClearable: true,
        components: {
            Control: selectComponents_js_namespaceObject.CustomControl
        },
        isSearchable: true,
        name: "color",
        options: selectData_js_namespaceObject.colourOptions
    });
const DropdownIndicator = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["0"],
        isClearable: true,
        components: {
            DropdownIndicator: selectComponents_js_namespaceObject.CustomDropdownIndicator
        },
        isSearchable: true,
        name: "color",
        options: selectData_js_namespaceObject.colourOptions
    });
const Group = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["1"],
        options: selectData_js_namespaceObject.groupedOptions,
        components: {
            Group: selectComponents_js_namespaceObject.CustomGroup
        }
    });
const GroupHeading = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["1"],
        options: selectData_js_namespaceObject.groupedOptions,
        components: {
            GroupHeading: selectComponents_js_namespaceObject.CustomGroupHeading
        },
        styles: {
            groupHeading: (base)=>({
                    ...base,
                    flex: '1 1',
                    color: 'white',
                    margin: 0
                })
        }
    });
const IndicatorsContainer = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        closeMenuOnSelect: false,
        components: {
            IndicatorsContainer: selectComponents_js_namespaceObject.CustomIndicatorsContainer
        },
        defaultValue: [
            selectData_js_namespaceObject.colourOptions["4"],
            selectData_js_namespaceObject.colourOptions["5"]
        ],
        isMulti: true,
        options: selectData_js_namespaceObject.colourOptions
    });
const IndicatorSeparator = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        closeMenuOnSelect: false,
        components: {
            IndicatorSeparator: selectComponents_js_namespaceObject.CustomIndicatorSeparator
        },
        defaultValue: [
            selectData_js_namespaceObject.colourOptions["4"],
            selectData_js_namespaceObject.colourOptions["5"]
        ],
        isMulti: true,
        options: selectData_js_namespaceObject.colourOptions
    });
const Input = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        closeMenuOnSelect: false,
        components: {
            Input: selectComponents_js_namespaceObject.CustomInput
        },
        defaultValue: [
            selectData_js_namespaceObject.colourOptions["4"],
            selectData_js_namespaceObject.colourOptions["5"]
        ],
        isMulti: true,
        options: selectData_js_namespaceObject.colourOptions
    });
const LoadingIndicator = ()=>/*#__PURE__*/ React.createElement(external_chakra_react_select_namespaceObject.AsyncSelect, {
        cacheOptions: true,
        defaultOptions: true,
        loadOptions: selectUtilities_js_namespaceObject.promiseOptions,
        components: {
            LoadingIndicator: selectComponents_js_namespaceObject.CustomLoadingIndicator
        }
    });
const Menu = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["1"],
        options: selectData_js_namespaceObject.groupedOptions,
        components: {
            Menu: selectComponents_js_namespaceObject.CustomMenu
        }
    });
const MenuList = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["1"],
        options: selectData_js_namespaceObject.groupedOptions,
        components: {
            MenuList: selectComponents_js_namespaceObject.CustomMenuList
        }
    });
const LoadingMessage = ()=>/*#__PURE__*/ React.createElement(external_chakra_react_select_namespaceObject.AsyncSelect, {
        cacheOptions: true,
        defaultOptions: true,
        loadOptions: selectUtilities_js_namespaceObject.promiseOptions,
        styles: {
            loadingMessage: (base)=>({
                    ...base,
                    backgroundColor: selectData_js_namespaceObject.colourOptions["2"].color,
                    color: 'white'
                })
        },
        components: {
            LoadingMessage: selectComponents_js_namespaceObject.CustomLoadingMessage
        }
    });
const NoOptionsMessage = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        isClearable: true,
        components: {
            NoOptionsMessage: selectComponents_js_namespaceObject.CustomNoOptionsMessage
        },
        styles: {
            noOptionsMessage: (base)=>({
                    ...base,
                    ...selectStyles_js_namespaceObject.msgStyles
                })
        },
        isSearchable: true,
        name: "color",
        options: []
    });
const MultiValueContainer = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        closeMenuOnSelect: false,
        components: {
            MultiValueContainer: selectComponents_js_namespaceObject.CustomMultiValueContainer
        },
        styles: {
            multiValue: (base)=>({
                    ...base,
                    border: `2px dotted ${selectData_js_namespaceObject.colourOptions["2"].color}`
                })
        },
        defaultValue: [
            selectData_js_namespaceObject.colourOptions["4"],
            selectData_js_namespaceObject.colourOptions["5"]
        ],
        isMulti: true,
        options: selectData_js_namespaceObject.colourOptions
    });
const MultiValueLabel = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        closeMenuOnSelect: false,
        components: {
            MultiValueLabel: selectComponents_js_namespaceObject.CustomMultiValueLabel
        },
        styles: {
            multiValueLabel: (base)=>({
                    ...base,
                    backgroundColor: selectData_js_namespaceObject.colourOptions["2"].color,
                    color: 'white'
                })
        },
        defaultValue: [
            selectData_js_namespaceObject.colourOptions["4"],
            selectData_js_namespaceObject.colourOptions["5"]
        ],
        isMulti: true,
        options: selectData_js_namespaceObject.colourOptions
    });
const MultiValueRemove = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        closeMenuOnSelect: false,
        components: {
            MultiValueRemove: selectComponents_js_namespaceObject.CustomMultiValueRemove
        },
        styles: {
            multiValueRemove: (base)=>({
                    ...base,
                    border: `1px dotted ${selectData_js_namespaceObject.colourOptions["2"].color}`,
                    height: '100%'
                })
        },
        defaultValue: [
            selectData_js_namespaceObject.colourOptions["4"],
            selectData_js_namespaceObject.colourOptions["5"]
        ],
        isMulti: true,
        options: selectData_js_namespaceObject.colourOptions
    });
const Option = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        closeMenuOnSelect: false,
        components: {
            Option: selectComponents_js_namespaceObject.CustomOption
        },
        styles: {
            option: (base)=>({
                    ...base,
                    border: `1px dotted ${selectData_js_namespaceObject.colourOptions["2"].color}`,
                    height: '100%'
                })
        },
        defaultValue: selectData_js_namespaceObject.colourOptions["4"],
        options: selectData_js_namespaceObject.colourOptions
    });
const Placeholder = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        closeMenuOnSelect: false,
        components: {
            Placeholder: selectComponents_js_namespaceObject.CustomPlaceholder
        },
        placeholder: "custom placeholder component",
        styles: {
            placeholder: (base)=>({
                    ...base,
                    fontSize: '1em',
                    color: selectData_js_namespaceObject.colourOptions["2"].color,
                    fontWeight: 400
                })
        },
        options: selectData_js_namespaceObject.colourOptions
    });
const SelectContainer = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        closeMenuOnSelect: false,
        components: {
            SelectContainer: selectComponents_js_namespaceObject.CustomSelectContainer
        },
        styles: {
            container: (base)=>({
                    ...base,
                    backgroundColor: selectData_js_namespaceObject.colourOptions["2"].color,
                    padding: 15
                })
        },
        options: selectData_js_namespaceObject.colourOptions
    });
const SingleValue = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["0"],
        isClearable: true,
        styles: {
            singleValue: (base)=>({
                    ...base,
                    padding: 5,
                    borderRadius: 5,
                    background: selectData_js_namespaceObject.colourOptions["2"].color,
                    color: 'white',
                    display: 'flex'
                })
        },
        components: {
            SingleValue: selectComponents_js_namespaceObject.CustomSingleValue
        },
        isSearchable: true,
        name: "color",
        options: selectData_js_namespaceObject.colourOptions
    });
const ValueContainer = ()=>/*#__PURE__*/ React.createElement(external_Select_js_default(), {
        defaultValue: selectData_js_namespaceObject.colourOptions["0"],
        isClearable: true,
        styles: {
            singleValue: (base)=>({
                    ...base,
                    color: 'white'
                }),
            valueContainer: (base)=>({
                    ...base,
                    background: selectData_js_namespaceObject.colourOptions["2"].color,
                    color: 'white',
                    width: '100%'
                })
        },
        components: {
            ValueContainer: selectComponents_js_namespaceObject.CustomValueContainer
        },
        isSearchable: true,
        name: "color",
        options: selectData_js_namespaceObject.colourOptions
    });
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
});
