@engie-group/fluid-design-system-react/lib/components/checkbox/NJCheckbox.js

Fluid Design System React

import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useRef, useId, useState, useEffect } from 'react';
import { useInert } from '../../utils/hook.js';
import { Utils } from '../../utils/util.js';
import { NJIcon } from '../icon/NJIcon.js';

const ROOT_CLASSNAME = 'nj-checkbox';
const NJCheckbox = React__default.forwardRef(({ label, value, size = 'md', isChecked = false, ariaLabel, ariaLabelledBy, isDisabled = false, tabIndex = 0, isRequired = false, hasError, hasSuccess, subscriptMessage, onChange, onBlur, children, isPresentational = false, className, isIndeterminate = false, ...htmlProps }, forwardedRef) => {
    const isInvalid = htmlProps['aria-invalid'] ?? hasError;
    const disabled = htmlProps.disabled ?? isDisabled;
    const checked = htmlProps.checked ?? isChecked;
    const required = htmlProps.required ?? isRequired;
    const rootRef = useRef(null);
    const inputRef = useRef(null);
    const finalInputId = htmlProps.id ?? useId();
    const [isCheckboxChecked, setIsCheckboxChecked] = useState(checked);
    useInert(rootRef, isPresentational);
    useEffect(() => {
        setIsCheckboxChecked(checked);
    }, [checked]);
    const onInputChange = (e) => {
        const isChecked = e.target.checked;
        const inputVal = checked ? value : '';
        onChange?.(e, isChecked, inputVal);
    };
    const onClick = () => {
        setIsCheckboxChecked((value) => !value);
    };
    const checkboxClass = Utils.classNames(ROOT_CLASSNAME, {
        [`${ROOT_CLASSNAME}--disabled`]: disabled,
        [`${ROOT_CLASSNAME}--presentational`]: isPresentational,
        [`${ROOT_CLASSNAME}--error`]: isInvalid,
        [`${ROOT_CLASSNAME}--success`]: hasSuccess,
        [`${ROOT_CLASSNAME}--${size}`]: size !== 'md'
    }, className);
    const subscriptId = `${finalInputId}-subscript`;
    const inputValue = isCheckboxChecked ? value : '';
    const error = (jsxs("div", { className: `${ROOT_CLASSNAME}__subscript`, id: subscriptId, children: [hasSuccess ? jsx(NJIcon, { variant: "inherit", name: "check", scale: "sm" }) : null, isInvalid ? jsx(NJIcon, { variant: "inherit", name: "warning", scale: "sm" }) : null, subscriptMessage] }));
    const input = (jsx("input", { ...htmlProps, ref: Utils.mergeRefs([forwardedRef, inputRef]), type: "checkbox", checked: isCheckboxChecked, id: finalInputId, value: !isPresentational ? inputValue : undefined, "aria-label": htmlProps['aria-label'] ?? ariaLabel, disabled: disabled, "aria-labelledby": htmlProps['aria-labelledby'] ?? ariaLabelledBy, "aria-invalid": isInvalid, "aria-describedby": subscriptMessage ? subscriptId : undefined, onChange: !isPresentational ? onInputChange : undefined, onBlur: !isPresentational ? onBlur : undefined, onClick: !isPresentational ? onClick : undefined, tabIndex: tabIndex, required: required }));
    useEffect(() => {
        if (inputRef?.current) {
            inputRef.current.indeterminate = isIndeterminate;
        }
    }, [isIndeterminate, inputRef]);
    return (jsxs("div", { ref: rootRef, className: checkboxClass, children: [label || children ? (jsxs("label", { htmlFor: finalInputId, children: [input, jsxs("span", { className: `${ROOT_CLASSNAME}__label`, children: [label ?? children, required ? (jsx("span", { "aria-hidden": "true", className: `${ROOT_CLASSNAME}__required`, children: "*" })) : null] })] })) : (input), subscriptMessage && error] }));
});
NJCheckbox.displayName = 'NJCheckbox';

export { NJCheckbox };