import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { CheckboxInput } from '../../fields/Checkbox/Input.js';
import { Popup } from '../Popup/index.js';
import './index.scss';
const baseClass = 'checkbox-popup';
export function CheckboxPopup({ Button, className, onChange, options, selectedValues, ...popupProps }) {
    return /*#__PURE__*/ _jsxDEV(Popup, {
        button: Button,
        className: [
            baseClass,
            className
        ].filter(Boolean).join(' '),
        horizontalAlign: "right",
        render: ({ close })=>/*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__options`,
                children: options.map(({ label, value })=>/*#__PURE__*/ _jsxDEV(CheckboxInput, {
                        checked: selectedValues?.includes(value),
                        label: label,
                        onToggle: ()=>{
                            const newSelectedValues = selectedValues?.includes(value) ? selectedValues.filter((v)=>v !== value) : [
                                ...selectedValues,
                                value
                            ];
                            onChange({
                                close,
                                selectedValues: newSelectedValues
                            });
                        }
                    }, value, false, {
                        fileName: "src/elements/CheckboxPopup/index.tsx",
                        lineNumber: 34,
                        columnNumber: 13
                    }, void 0))
            }, void 0, false, {
                fileName: "src/elements/CheckboxPopup/index.tsx",
                lineNumber: 32,
                columnNumber: 9
            }, void 0),
        showScrollbar: true,
        verticalAlign: "bottom",
        ...popupProps
    }, void 0, false, {
        fileName: "src/elements/CheckboxPopup/index.tsx",
        lineNumber: 27,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map