@hitachivantara/uikit-react-core/dist/cjs/RadioGroup/RadioGroup.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const LabelContainer = require("../FormElement/LabelContainer.cjs");
const useControlled = require("../hooks/useControlled.cjs");
const useUniqueId = require("../hooks/useUniqueId.cjs");
const setId = require("../utils/setId.cjs");
const RadioGroup_styles = require("./RadioGroup.styles.cjs");
const FormElement = require("../FormElement/FormElement.cjs");
const WarningText = require("../FormElement/WarningText/WarningText.cjs");
const getValueFromSelectedChildren = (children) => {
  const childrenArray = React.Children.toArray(children);
  const childrenCount = childrenArray.length;
  for (let i = 0; i !== childrenCount; i += 1) {
    const child = childrenArray[i];
    const childIsControlled = child?.props?.checked !== void 0;
    const childIsSelected = childIsControlled ? child?.props?.checked : child?.props?.defaultChecked;
    if (childIsSelected) {
      return child?.props?.value;
    }
  }
  return null;
};
const HvRadioGroup = React.forwardRef(
  function HvRadioGroup2(props, ref) {
    const {
      id,
      classes: classesProp,
      className,
      children,
      name,
      value: valueProp,
      defaultValue,
      label,
      description,
      status,
      statusMessage,
      required,
      readOnly,
      disabled,
      orientation = "vertical",
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy,
      "aria-describedby": ariaDescribedBy,
      "aria-errormessage": ariaErrorMessage,
      onChange,
      ...others
    } = uikitReactUtils.useDefaultProps("HvRadioGroup", props);
    const { classes, cx } = RadioGroup_styles.useClasses(classesProp);
    const elementId = useUniqueId.useUniqueId(id);
    const [value, setValue] = useControlled.useControlled(
      valueProp,
      defaultValue !== void 0 ? defaultValue : (
        // When uncontrolled and no default value is given,
        // extract the initial selected values from the children own state
        () => getValueFromSelectedChildren(children)
      )
    );
    const onChildChangeInterceptor = React.useCallback(
      (childOnChange, event, isChecked, newValue) => {
        childOnChange?.(event, isChecked, newValue);
        onChange?.(event, newValue);
        setValue(newValue);
      },
      [onChange, setValue]
    );
    const modifiedChildren = React.useMemo(() => {
      return React.Children.map(children, (child) => {
        const childValue = child?.props?.value ?? "on";
        const childIsSelected = childValue === value;
        return React.cloneElement(child, {
          checked: childIsSelected,
          name: child?.props?.name || name || elementId,
          onChange: (event, isChecked, newValue) => onChildChangeInterceptor(
            child?.props?.onChange,
            event,
            isChecked,
            newValue
          ),
          inputProps: {
            ...child?.props?.inputProps,
            // Set the required attribute directly in the input
            // the radio form element context shouldn't be aware so the
            // label doesn't show redundant asterisk
            required
          },
          disabled: disabled || child?.props?.disabled,
          readOnly: readOnly || child?.props?.readOnly
        });
      });
    }, [
      children,
      disabled,
      elementId,
      name,
      onChildChangeInterceptor,
      readOnly,
      required,
      value
    ]);
    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
    const errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
    return /* @__PURE__ */ jsxRuntime.jsxs(
      FormElement.HvFormElement,
      {
        id,
        name,
        status: status || "standBy",
        disabled,
        required,
        readOnly,
        className: cx(classes.root, className),
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            LabelContainer.HvLabelContainer,
            {
              label,
              description,
              labelId: setId.setId(elementId, "label"),
              descriptionId: setId.setId(elementId, "description"),
              classes: {
                label: classes.label
              }
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(
            "div",
            {
              ref,
              role: "radiogroup",
              "aria-label": ariaLabel,
              "aria-labelledby": ariaLabelledBy || label && setId.setId(elementId, "label") || void 0,
              "aria-invalid": status === "invalid" ? true : void 0,
              "aria-errormessage": status === "invalid" ? errorMessageId : void 0,
              "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
              className: cx(classes.group, {
                [classes.vertical]: orientation === "vertical",
                [classes.horizontal]: orientation === "horizontal",
                [classes.invalid]: status === "invalid"
              }),
              ...others,
              children: modifiedChildren
            }
          ),
          canShowError && /* @__PURE__ */ jsxRuntime.jsx(
            WarningText.HvWarningText,
            {
              id: setId.setId(elementId, "error"),
              disableBorder: true,
              className: classes.error,
              children: statusMessage
            }
          )
        ]
      }
    );
  }
);
exports.radioGroupClasses = RadioGroup_styles.staticClasses;
exports.HvRadioGroup = HvRadioGroup;