@hitachivantara/uikit-react-core/dist/esm/Radio/Radio.js

Core React components for the NEXT Design System.

import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, useState, useCallback } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useControlled } from "../hooks/useControlled.js";
import { useUniqueId } from "../hooks/useUniqueId.js";
import { setId } from "../utils/setId.js";
import { useClasses } from "./Radio.styles.js";
import { staticClasses } from "./Radio.styles.js";
import { HvBaseRadio } from "../BaseRadio/BaseRadio.js";
import { isInvalid } from "../FormElement/utils.js";
import { HvFormElement } from "../FormElement/FormElement.js";
import { HvLabel } from "../FormElement/Label/Label.js";
import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
const HvRadio = forwardRef(
  function HvRadio2(props, ref) {
    const {
      classes: classesProp,
      className,
      id,
      name,
      value = "on",
      required,
      readOnly,
      disabled,
      label,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy,
      "aria-describedby": ariaDescribedBy,
      labelProps,
      checked,
      defaultChecked = false,
      onChange,
      status = "standBy",
      statusMessage,
      "aria-errormessage": ariaErrorMessage,
      semantic,
      inputProps,
      onFocusVisible,
      onBlur,
      ...others
    } = useDefaultProps("HvRadio", props);
    const { classes, cx } = useClasses(classesProp);
    const elementId = useUniqueId(id);
    const [focusVisible, setFocusVisible] = useState(false);
    const onFocusVisibleCallback = useCallback(
      (evt) => {
        setFocusVisible(true);
        onFocusVisible?.(evt);
      },
      [onFocusVisible]
    );
    const onBlurCallback = useCallback(
      (evt) => {
        setFocusVisible(false);
        onBlur?.(evt);
      },
      [onBlur]
    );
    const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);
    const onLocalChange = useCallback(
      (evt, newChecked) => {
        setIsChecked(newChecked);
        onChange?.(evt, newChecked, value);
      },
      [onChange, setIsChecked, value]
    );
    const canShowError = ariaErrorMessage == null && status !== void 0 && statusMessage !== void 0;
    const hasLabel = label != null;
    const isStateInvalid = isInvalid(status);
    let errorMessageId;
    if (isStateInvalid) {
      errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
    }
    const radio = /* @__PURE__ */ jsx(
      HvBaseRadio,
      {
        ref,
        id: label ? setId(elementId, "input") : setId(id, "input"),
        name,
        className: cx(classes.radio, {
          [classes.invalidRadio]: isStateInvalid
        }),
        disabled,
        readOnly,
        onChange: onLocalChange,
        value,
        checked: isChecked,
        semantic,
        inputProps: {
          "aria-invalid": isStateInvalid ? true : void 0,
          "aria-errormessage": errorMessageId,
          "aria-label": ariaLabel,
          "aria-labelledby": ariaLabelledBy,
          "aria-describedby": ariaDescribedBy,
          ...inputProps
        },
        onFocusVisible: onFocusVisibleCallback,
        onBlur: onBlurCallback,
        ...others
      }
    );
    return /* @__PURE__ */ jsxs(
      HvFormElement,
      {
        id,
        name,
        status: status || "standBy",
        disabled,
        required,
        readOnly,
        className: cx(classes.root, className),
        children: [
          hasLabel ? /* @__PURE__ */ jsxs(
            "div",
            {
              className: cx(classes.container, {
                [classes.disabled]: disabled,
                [classes.focusVisible]: !!(focusVisible && label),
                [classes.invalidContainer]: isStateInvalid,
                [classes.checked]: isChecked,
                [classes.semantic]: semantic
              }),
              children: [
                radio,
                /* @__PURE__ */ jsx(
                  HvLabel,
                  {
                    noWrap: true,
                    id: setId(elementId, "label"),
                    htmlFor: setId(elementId, "input"),
                    label,
                    className: classes.label,
                    ...labelProps
                  }
                )
              ]
            }
          ) : radio,
          canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(elementId, "error"), children: statusMessage })
        ]
      }
    );
  }
);
export {
  HvRadio,
  staticClasses as radioClasses
};