@progress/kendo-react-inputs/radiobutton/RadioGroup.mjs

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as t from "react";
import e from "prop-types";
import { RadioButton as J } from "./RadioButton.mjs";
import { createPropsContext as M, usePropsContext as Q, useUnstyled as W, focusFirstFocusableChild as X, dispatchEvent as k, useId as Y, classNames as P, uRadioGroup as E, useRtl as Z } from "@progress/kendo-react-common";
const _ = M(), G = t.forwardRef((r, I) => {
  const m = Q(_, r), {
    id: N,
    ariaLabelledBy: B,
    ariaDescribedBy: F,
    className: x,
    data: b,
    defaultValue: V,
    disabled: s,
    name: O,
    labelPlacement: j,
    layout: n,
    style: q,
    value: p,
    valid: z,
    item: D = $.item,
    onChange: c,
    onFocus: d
  } = m, f = W(), y = f && f.uRadioGroup, o = t.useRef(null), C = t.useCallback(() => {
    o.current && X(o.current);
  }, []), i = t.useCallback(
    () => ({
      element: o.current,
      focus: C
    }),
    [C]
  );
  t.useImperativeHandle(I, i);
  const [H, h] = t.useState(V), v = p !== void 0, u = v ? p : H, L = t.useCallback(
    (a) => {
      const l = a.value;
      !v && !s && h(l), c && !s && k(
        c,
        a.syntheticEvent,
        i(),
        { value: l }
      );
    },
    [h, c, s]
  ), S = t.useCallback(
    (a) => {
      d && !s && k(
        d,
        a.syntheticEvent,
        i(),
        void 0
      );
    },
    [d, s]
  ), T = Y(), w = P(
    E.ul({
      c: y,
      horizontal: n === "horizontal",
      vertical: n === "vertical" || n === void 0
    }),
    x
  ), K = Z(o, m.dir), U = b && b.map((a, l) => {
    const g = u === a.value, A = u == null, R = {
      ...a,
      valid: z,
      checked: g,
      disabled: !!(a.disabled || s),
      labelPlacement: a.labelPlacement ? a.labelPlacement : j,
      tabIndex: a.tabIndex ? a.tabIndex : A && l === 0 || g ? 0 : -1,
      index: l,
      name: O || T,
      required: a.required,
      onChange: L,
      onFocus: S
    };
    return /* @__PURE__ */ t.createElement(
      D,
      {
        className: P(
          E.item({
            c: y,
            disabled: R.disabled || s
          })
        ),
        key: l,
        role: "none"
      },
      /* @__PURE__ */ t.createElement(J, { ...R })
    );
  });
  return /* @__PURE__ */ t.createElement(
    "ul",
    {
      id: N,
      role: "radiogroup",
      className: w,
      ref: o,
      dir: K,
      style: q,
      "aria-labelledby": B,
      "aria-describedby": F
    },
    U
  );
}), $ = {
  item: (r) => /* @__PURE__ */ t.createElement("li", { ...r })
};
G.propTypes = {
  ariaLabelledBy: e.string,
  ariaDescribedBy: e.string,
  className: e.string,
  data: e.arrayOf(e.object),
  defaultValue: e.any,
  dir: e.string,
  disabled: e.bool,
  labelPlacement: e.string,
  layout: e.string,
  name: e.string,
  style: e.object,
  value: e.any,
  onChange: e.func,
  onFocus: e.func
};
G.displayName = "KendoRadioGroup";
export {
  G as RadioGroup,
  _ as RadioGroupPropsContext
};