@carbon/react
Version:
React components for the Carbon Design System
118 lines (116 loc) • 5.41 kB
JavaScript
/**
* 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 require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_Text = require("../Text/Text.js");
const require_keys = require("../../internal/keyboard/keys.js");
const require_match = require("../../internal/keyboard/match.js");
const require_useId = require("../../internal/useId.js");
const require_noopFn = require("../../internal/noopFn.js");
const require_deprecate = require("../../prop-types/deprecate.js");
const require_utils = require("../../internal/utils.js");
const require_index = require("../FeatureFlags/index.js");
const require_index$1 = require("../AILabel/index.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");
//#region src/components/RadioTile/RadioTile.tsx
/**
* Copyright IBM Corp. 2016, 2025
*
* 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 RadioTile = react.default.forwardRef(({ children, className: customClassName, decorator, disabled, light, checked, name, value, id, onChange = require_noopFn.noopFn, tabIndex = 0, hasRoundedCorners, slug, required, ...rest }, ref) => {
const prefix = require_usePrefix.usePrefix();
const inputId = require_useId.useFallbackId(id);
const className = (0, classnames.default)(customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, `${prefix}--tile--radio`, {
[`${prefix}--tile--is-selected`]: checked,
[`${prefix}--tile--light`]: light,
[`${prefix}--tile--disabled`]: disabled,
[`${prefix}--tile--slug`]: slug,
[`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
[`${prefix}--tile--decorator`]: decorator,
[`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
});
const { "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...labelProps } = rest;
const v12TileRadioIcons = require_index.useFeatureFlag("enable-v12-tile-radio-icons");
function icon() {
if (v12TileRadioIcons) if (checked) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.RadioButtonChecked, {});
else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.RadioButton, {});
else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.CheckmarkFilled, {});
}
function handleOnChange(evt) {
onChange(value, name, evt);
}
function handleOnKeyDown(evt) {
if (require_match.matches(evt, [require_keys.Enter, require_keys.Space])) {
evt.preventDefault();
onChange(value, name, evt);
}
}
const candidate = slug ?? decorator;
const normalizedDecorator = require_utils.isComponentElement(candidate, require_index$1.AILabel) ? (0, react.cloneElement)(candidate, { size: "xs" }) : candidate;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
checked,
className: `${prefix}--tile-input`,
disabled,
id: inputId,
name,
onChange: !disabled ? handleOnChange : void 0,
onKeyDown: !disabled ? handleOnKeyDown : void 0,
tabIndex: !disabled ? tabIndex : void 0,
type: "radio",
value,
...ariaDescribedBy && { "aria-describedby": ariaDescribedBy },
...ariaLabelledBy && { "aria-labelledby": ariaLabelledBy },
ref,
required
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
...labelProps,
htmlFor: inputId,
className,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${prefix}--tile__checkmark`,
children: icon()
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
className: `${prefix}--tile-content`,
children
}),
slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--tile--inner-decorator`,
children: normalizedDecorator
}) : ""
]
})] });
});
RadioTile.displayName = "RadioTile";
RadioTile.propTypes = {
checked: prop_types.default.bool,
children: prop_types.default.node,
className: prop_types.default.string,
decorator: prop_types.default.node,
disabled: prop_types.default.bool,
hasRoundedCorners: prop_types.default.bool,
id: prop_types.default.string,
light: require_deprecate.deprecate(prop_types.default.bool, "The `light` prop for `RadioTile` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component. It will be removed in the next major release."),
name: prop_types.default.string,
onChange: prop_types.default.func,
required: prop_types.default.bool,
slug: require_deprecate.deprecate(prop_types.default.node, "The `slug` prop for `RadioTile` has been deprecated in favor of the new `decorator` prop. It will be removed in the next major release."),
tabIndex: prop_types.default.number,
value: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]).isRequired
};
//#endregion
exports.default = RadioTile;