@carbon/react 1.103.0-rc.0 → 1.104.0-rc.0

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -1,222 +1,150 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+const require_useId = require('../../internal/useId.js');
+const require_deprecate = require('../../prop-types/deprecate.js');
+const require_index = require('../AILabel/index.js');
+const require_utils = require('../../internal/utils.js');
+const require_mergeRefs = require('../../tools/mergeRefs.js');
+const require_createTextComponent = require('../Text/createTextComponent.js');
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_icons_react = require("@carbon/icons-react");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
-var React = require('react');
-var cx = require('classnames');
-var createTextComponent = require('../Text/createTextComponent.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var iconsReact = require('@carbon/icons-react');
-var deprecate = require('../../prop-types/deprecate.js');
-var mergeRefs = require('../../tools/mergeRefs.js');
-var useId = require('../../internal/useId.js');
-var index = require('../AILabel/index.js');
-var utils = require('../../internal/utils.js');
-
-const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    decorator,
-    defaultSelected,
-    disabled,
-    helperText,
-    invalid = false,
-    invalidText,
-    labelPosition = 'right',
-    legendText,
-    name,
-    onChange = () => {},
-    orientation = 'horizontal',
-    readOnly,
-    valueSelected,
-    warn = false,
-    warnText,
-    slug,
-    required,
-    ...rest
-  } = props;
-  const prefix = usePrefix.usePrefix();
-  const [selected, setSelected] = React.useState(valueSelected ?? defaultSelected);
-  const prevValueSelected = React.useRef(valueSelected);
-  const radioButtonGroupInstanceId = useId.useId();
-  React.useEffect(() => {
-    if (valueSelected !== prevValueSelected.current) {
-      setSelected(valueSelected);
-      prevValueSelected.current = valueSelected;
-    }
-  }, [valueSelected]);
-  function getRadioButtons() {
-    const mappedChildren = React.Children.map(children, radioButton => {
-      if (!radioButton) {
-        return;
-      }
-      const newProps = {
-        name: name,
-        key: radioButton.props.value,
-        value: radioButton.props.value,
-        onChange: handleOnChange,
-        checked: radioButton.props.value === selected,
-        required: required
-      };
-      if (!selected && radioButton.props.checked) {
-        newProps.checked = true;
-      }
-      return /*#__PURE__*/React.cloneElement(radioButton, newProps);
-    });
-    return mappedChildren;
-  }
-  function handleOnChange(newSelection, value, evt) {
-    if (!readOnly) {
-      if (newSelection !== selected) {
-        setSelected(newSelection);
-        onChange(newSelection, name, evt);
-      }
-    }
-  }
-  const showWarning = !readOnly && !disabled && !invalid && warn;
-  const showHelper = !invalid && !disabled && !warn;
-  const wrapperClasses = cx(`${prefix}--form-item`, className);
-  const fieldsetClasses = cx(`${prefix}--radio-button-group`, {
-    [`${prefix}--radio-button-group--${orientation}`]: orientation === 'vertical',
-    [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
-    [`${prefix}--radio-button-group--readonly`]: readOnly,
-    [`${prefix}--radio-button-group--invalid`]: !readOnly && !disabled && invalid,
-    [`${prefix}--radio-button-group--warning`]: showWarning,
-    [`${prefix}--radio-button-group--slug`]: slug,
-    [`${prefix}--radio-button-group--decorator`]: decorator
-  });
-  const helperClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
-  });
-  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
-  const helperId = !hasHelper ? undefined : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
-  const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
-    id: helperId,
-    className: helperClasses
-  }, helperText);
-  const divRef = React.useRef(null);
-
-  // AILabel is always size `mini`
-  const candidate = slug ?? decorator;
-  const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
-  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
-    size: 'mini',
-    kind: 'default'
-  }) : candidate;
-  return /*#__PURE__*/React.createElement("div", {
-    className: wrapperClasses,
-    ref: mergeRefs.mergeRefs(divRef, ref)
-  }, /*#__PURE__*/React.createElement("fieldset", _rollupPluginBabelHelpers.extends({
-    className: fieldsetClasses,
-    disabled: disabled,
-    "data-invalid": invalid ? true : undefined,
-    "aria-describedby": showHelper && helperText ? helperId : undefined
-  }, rest), legendText && /*#__PURE__*/React.createElement(createTextComponent.Legend, {
-    className: `${prefix}--label`
-  }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--radio-button-group-inner--decorator`
-  }, normalizedDecorator) : ''), getRadioButtons()), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--radio-button__validation-msg`
-  }, !readOnly && !disabled && invalid && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
-    className: `${prefix}--radio-button__invalid-icon`
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--form-requirement`
-  }, invalidText)), showWarning && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
-    className: `${prefix}--radio-button__invalid-icon ${prefix}--radio-button__invalid-icon--warning`
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--form-requirement`
-  }, warnText))), showHelper && helper);
+//#region src/components/RadioButtonGroup/RadioButtonGroup.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const RadioButtonGroupContext = (0, react.createContext)(null);
+const RadioButtonGroup = react.default.forwardRef((props, ref) => {
+	const { children, className, decorator, defaultSelected, disabled, helperText, invalid = false, invalidText, labelPosition = "right", legendText, name, onChange = () => {}, orientation = "horizontal", readOnly, valueSelected, warn = false, warnText, slug, required, ...rest } = props;
+	const prefix = require_usePrefix.usePrefix();
+	const [selected, setSelected] = (0, react.useState)(valueSelected ?? defaultSelected);
+	const prevValueSelected = (0, react.useRef)(valueSelected);
+	const radioButtonGroupInstanceId = require_useId.useId();
+	(0, react.useEffect)(() => {
+		if (valueSelected !== prevValueSelected.current) {
+			setSelected(valueSelected);
+			prevValueSelected.current = valueSelected;
+		}
+	}, [valueSelected]);
+	function getRadioButtons() {
+		return react.default.Children.map(children, (radioButton) => {
+			if (!radioButton) return;
+			const newProps = {
+				name,
+				key: radioButton.props.value,
+				value: radioButton.props.value,
+				onChange: handleOnChange,
+				checked: radioButton.props.value === selected,
+				required
+			};
+			if (!selected && radioButton.props.checked) newProps.checked = true;
+			return react.default.cloneElement(radioButton, newProps);
+		});
+	}
+	function handleOnChange(newSelection, value, evt) {
+		if (!readOnly) {
+			if (newSelection !== selected) {
+				setSelected(newSelection);
+				onChange(newSelection, name, evt);
+			}
+		}
+	}
+	const showWarning = !readOnly && !disabled && !invalid && warn;
+	const showHelper = !invalid && !disabled && !warn;
+	const wrapperClasses = (0, classnames.default)(`${prefix}--form-item`, className);
+	const fieldsetClasses = (0, classnames.default)(`${prefix}--radio-button-group`, {
+		[`${prefix}--radio-button-group--${orientation}`]: orientation === "vertical",
+		[`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
+		[`${prefix}--radio-button-group--readonly`]: readOnly,
+		[`${prefix}--radio-button-group--invalid`]: !readOnly && !disabled && invalid,
+		[`${prefix}--radio-button-group--warning`]: showWarning,
+		[`${prefix}--radio-button-group--slug`]: slug,
+		[`${prefix}--radio-button-group--decorator`]: decorator
+	});
+	const helperClasses = (0, classnames.default)(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
+	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const helperId = !hasHelper ? void 0 : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
+	const helper = hasHelper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		id: helperId,
+		className: helperClasses,
+		children: helperText
+	});
+	const divRef = (0, react.useRef)(null);
+	const candidate = slug ?? decorator;
+	const normalizedDecorator = require_utils.isComponentElement(candidate, require_index.AILabel) ? (0, react.cloneElement)(candidate, {
+		size: "mini",
+		kind: "default"
+	}) : candidate;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: wrapperClasses,
+		ref: require_mergeRefs.mergeRefs(divRef, ref),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+				className: fieldsetClasses,
+				disabled,
+				"data-invalid": invalid ? true : void 0,
+				"aria-describedby": showHelper && helperText ? helperId : void 0,
+				...rest,
+				children: [legendText && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_createTextComponent.Legend, {
+					className: `${prefix}--label`,
+					children: [legendText, slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `${prefix}--radio-button-group-inner--decorator`,
+						children: normalizedDecorator
+					}) : ""]
+				}), getRadioButtons()]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${prefix}--radio-button__validation-msg`,
+				children: [!readOnly && !disabled && invalid && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningFilled, { className: `${prefix}--radio-button__invalid-icon` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefix}--form-requirement`,
+					children: invalidText
+				})] }), showWarning && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningAltFilled, { className: `${prefix}--radio-button__invalid-icon ${prefix}--radio-button__invalid-icon--warning` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefix}--form-requirement`,
+					children: warnText
+				})] })]
+			}),
+			showHelper && helper
+		]
+	});
 });
 RadioButtonGroup.propTypes = {
-  /**
-   * Provide a collection of `<RadioButton>` components to render in the group
-   */
-  children: PropTypes.node,
-  /**
-   * Provide an optional className to be applied to the container node
-   */
-  className: PropTypes.string,
-  /**
-   * **Experimental**: Provide a decorator component to be rendered inside the `RadioButtonGroup` component
-   */
-  decorator: PropTypes.node,
-  /**
-   * Specify the `<RadioButton>` to be selected by default
-   */
-  defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Specify whether the group is disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Provide text that is used alongside the control label for additional help
-   */
-  helperText: PropTypes.node,
-  /**
-   * Specify whether the control is currently invalid
-   */
-  invalid: PropTypes.bool,
-  /**
-   * Provide the text that is displayed when the control is in an invalid state
-   */
-  invalidText: PropTypes.node,
-  /**
-   * Provide where label text should be placed
-   */
-  labelPosition: PropTypes.oneOf(['left', 'right']),
-  /**
-   * Provide a legend to the RadioButtonGroup input that you are
-   * exposing to the user
-   */
-  legendText: PropTypes.node,
-  /**
-   * Specify the name of the underlying `<input>` nodes
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * Provide an optional `onChange` hook that is called whenever the value of
-   * the group changes
-   */
-  onChange: PropTypes.func,
-  /**
-   * Provide where radio buttons should be placed
-   */
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * Whether the RadioButtonGroup should be read-only
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * `true` to specify if radio selection in group is required.
-   */
-  required: PropTypes.bool,
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
-   */
-  slug: deprecate.deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
-  /**
-   * Specify the value that is currently selected in the group
-   */
-  valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Specify whether the control is currently in warning state
-   */
-  warn: PropTypes.bool,
-  /**
-   * Provide the text that is displayed when the control is in warning state
-   */
-  warnText: PropTypes.node
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	decorator: prop_types.default.node,
+	defaultSelected: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
+	disabled: prop_types.default.bool,
+	helperText: prop_types.default.node,
+	invalid: prop_types.default.bool,
+	invalidText: prop_types.default.node,
+	labelPosition: prop_types.default.oneOf(["left", "right"]),
+	legendText: prop_types.default.node,
+	name: prop_types.default.string.isRequired,
+	onChange: prop_types.default.func,
+	orientation: prop_types.default.oneOf(["horizontal", "vertical"]),
+	readOnly: prop_types.default.bool,
+	required: prop_types.default.bool,
+	slug: require_deprecate.deprecate(prop_types.default.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
+	valueSelected: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
+	warn: prop_types.default.bool,
+	warnText: prop_types.default.node
 };
-RadioButtonGroup.displayName = 'RadioButtonGroup';
+RadioButtonGroup.displayName = "RadioButtonGroup";
 
-exports.default = RadioButtonGroup;
+//#endregion
+exports.default = RadioButtonGroup;