@ozen-ui/kit/__inner__/esm/components/CheckboxGroup/CheckboxGroup.js

React component library

import { __assign, __read, __rest, __spreadArray } from "tslib";
import './CheckboxGroup.css';
import React from 'react';
import { useControlled } from '../../hooks/useControlled';
import { useDeprecatedComponent } from '../../hooks/useDeprecated';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { FormGroup } from '../FormGroup';
import { FormTitle } from '../FormTitle';
import { CheckboxGroupContext } from './CheckboxGroupContext';
import { CHECKBOX_GROUP_DEFAULT_DIRECTION, CHECKBOX_GROUP_DEFAULT_SIZE, CHECKBOX_GROUP_DEFAULT_AS, } from './constants';
export var cnCheckboxGroup = cn('CheckboxGroup');
/**
 * @deprecated Компонент устарел. Для замены используйте компонент CheckboxGroupNext
 */
export var CheckboxGroup = polymorphicComponentWithRef(function (inProps, ref) {
    useDeprecatedComponent('CheckboxGroup');
    var props = useThemeProps({
        props: inProps,
        name: 'CheckboxGroup',
    });
    var _a = props.direction, direction = _a === void 0 ? CHECKBOX_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? CHECKBOX_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? CHECKBOX_GROUP_DEFAULT_AS : _c, title = props.title, className = props.className, children = props.children, name = props.name, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, other = __rest(props, ["direction", "size", "as", "title", "className", "children", "name", "value", "defaultValue", "onChange"]);
    var _d = __read(useControlled({
        value: valueProp,
        defaultValue: defaultValue,
        name: 'CheckboxGroup',
        state: 'value',
    }), 2), valueState = _d[0], setValueState = _d[1];
    var handleChange = function (event) {
        var itemValue = event.currentTarget.value;
        var value = (valueState === null || valueState === void 0 ? void 0 : valueState.includes(itemValue))
            ? valueState.filter(function (item) { return item !== itemValue; })
            : __spreadArray(__spreadArray([], __read((valueState || [])), false), [itemValue], false);
        setValueState(value);
        onChange === null || onChange === void 0 ? void 0 : onChange(value);
    };
    return (React.createElement(Tag, __assign({ className: cnCheckboxGroup({ size: size }, [className]), role: "radiogroup" }, other, { ref: ref }),
        React.createElement(CheckboxGroupContext.Provider, { value: {
                value: valueState,
                onChange: handleChange,
                name: name,
                size: size,
            } },
            title && React.createElement(FormTitle, { size: size }, title),
            React.createElement(FormGroup, { direction: direction, size: size }, children))));
});
CheckboxGroup.displayName = 'CheckboxGroup';