@primer/react
Version:
An implementation of GitHub's Primer Design System using React
195 lines (194 loc) • 6.68 kB
JavaScript
import { useId as useId$1 } from "../../../hooks/useId.js";
import VisuallyHidden from "../../../_VisuallyHidden.js";
import { useSlots } from "../../../hooks/useSlots.js";
import ValidationAnimationContainer from "../ValidationAnimationContainer.js";
import CheckboxOrRadioGroupContext from "./CheckboxOrRadioGroupContext.js";
import CheckboxOrRadioGroup_module_css_default from "./CheckboxOrRadioGroup.module.css.js";
import CheckboxOrRadioGroupCaption from "./CheckboxOrRadioGroupCaption.js";
import CheckboxOrRadioGroupLabel from "./CheckboxOrRadioGroupLabel.js";
import CheckboxOrRadioGroupValidation from "./CheckboxOrRadioGroupValidation.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import React from "react";
//#region src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
const CheckboxOrRadioGroup = (t0) => {
const $ = c(51);
const { "aria-labelledby": ariaLabelledby, children, disabled: t1, id: idProp, required: t2, className, "data-component": dataComponentProp } = t0;
const disabled = t1 === void 0 ? false : t1;
const required = t2 === void 0 ? false : t2;
let t3;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t3 = {
caption: CheckboxOrRadioGroupCaption,
label: CheckboxOrRadioGroupLabel,
validation: CheckboxOrRadioGroupValidation
};
$[0] = t3;
} else t3 = $[0];
const [slots, rest] = useSlots(children, t3);
const labelChild = slots.label;
const validationChild = slots.validation;
const captionChild = slots.caption;
const id = useId$1(idProp);
const validationMessageId = validationChild ? `${id}-validationMessage` : void 0;
const captionId = captionChild ? `${id}-caption` : void 0;
const requiredMessageId = required ? `${id}-requiredMessage` : void 0;
if (!labelChild && !ariaLabelledby) console.warn("A choice group must be labelled using a `CheckboxOrRadioGroup.Label` child, or by passing `aria-labelledby` to the CheckboxOrRadioGroup component.");
let t4;
if ($[1] !== labelChild) {
t4 = /*#__PURE__*/ React.isValidElement(labelChild) && !labelChild.props.visuallyHidden;
$[1] = labelChild;
$[2] = t4;
} else t4 = $[2];
const isLegendVisible = t4;
const Component = labelChild ? "fieldset" : "div";
let t5;
if ($[3] !== captionId || $[4] !== dataComponentProp || $[5] !== disabled || $[6] !== required || $[7] !== validationMessageId) {
t5 = {
disabled,
required,
captionId,
validationMessageId,
parentName: dataComponentProp
};
$[3] = captionId;
$[4] = dataComponentProp;
$[5] = disabled;
$[6] = required;
$[7] = validationMessageId;
$[8] = t5;
} else t5 = $[8];
let t6;
if ($[9] !== className) {
t6 = clsx(className, CheckboxOrRadioGroup_module_css_default.GroupFieldset);
$[9] = className;
$[10] = t6;
} else t6 = $[10];
const t7 = validationChild ? "" : void 0;
let t8;
if ($[11] !== disabled || $[12] !== labelChild) {
t8 = labelChild ? { disabled } : {};
$[11] = disabled;
$[12] = labelChild;
$[13] = t8;
} else t8 = $[13];
let t9;
if ($[14] !== isLegendVisible || $[15] !== labelChild || $[16] !== required || $[17] !== requiredMessageId || $[18] !== slots.caption || $[19] !== slots.label || $[20] !== slots.validation) {
t9 = labelChild ? /*#__PURE__*/ jsxs("legend", {
className: CheckboxOrRadioGroup_module_css_default.GroupLegend,
"data-legend-visible": isLegendVisible ? "" : void 0,
children: [
slots.label,
required && /*#__PURE__*/ jsx(VisuallyHidden, { children: ", required" }),
slots.caption,
/*#__PURE__*/ React.isValidElement(slots.validation) && slots.validation.props.children && /*#__PURE__*/ jsx(VisuallyHidden, { children: slots.validation.props.children })
]
}) : /*#__PURE__*/ jsxs(Fragment, { children: [slots.caption, required && requiredMessageId && /*#__PURE__*/ jsx(VisuallyHidden, {
id: requiredMessageId,
children: "Required"
})] });
$[14] = isLegendVisible;
$[15] = labelChild;
$[16] = required;
$[17] = requiredMessageId;
$[18] = slots.caption;
$[19] = slots.label;
$[20] = slots.validation;
$[21] = t9;
} else t9 = $[21];
let t10;
if ($[22] !== ariaLabelledby || $[23] !== captionId || $[24] !== labelChild || $[25] !== requiredMessageId || $[26] !== validationMessageId) {
t10 = !labelChild ? {
"aria-labelledby": ariaLabelledby,
"aria-describedby": [
validationMessageId,
captionId,
requiredMessageId
].filter(Boolean).join(" "),
as: "div",
role: "group"
} : {};
$[22] = ariaLabelledby;
$[23] = captionId;
$[24] = labelChild;
$[25] = requiredMessageId;
$[26] = validationMessageId;
$[27] = t10;
} else t10 = $[27];
let t11;
if ($[28] !== rest) {
t11 = React.Children.toArray(rest).filter(_temp);
$[28] = rest;
$[29] = t11;
} else t11 = $[29];
let t12;
if ($[30] !== t10 || $[31] !== t11) {
t12 = /*#__PURE__*/ jsx("div", {
className: CheckboxOrRadioGroup_module_css_default.Body,
...t10,
children: t11
});
$[30] = t10;
$[31] = t11;
$[32] = t12;
} else t12 = $[32];
let t13;
if ($[33] !== Component || $[34] !== dataComponentProp || $[35] !== t12 || $[36] !== t6 || $[37] !== t7 || $[38] !== t8 || $[39] !== t9) {
t13 = /*#__PURE__*/ jsxs(Component, {
"data-component": dataComponentProp,
className: t6,
"data-validation": t7,
...t8,
children: [t9, t12]
});
$[33] = Component;
$[34] = dataComponentProp;
$[35] = t12;
$[36] = t6;
$[37] = t7;
$[38] = t8;
$[39] = t9;
$[40] = t13;
} else t13 = $[40];
let t14;
if ($[41] !== labelChild || $[42] !== slots.validation || $[43] !== validationChild) {
t14 = validationChild && /*#__PURE__*/ jsx(ValidationAnimationContainer, {
"aria-hidden": Boolean(labelChild),
show: true,
children: slots.validation
});
$[41] = labelChild;
$[42] = slots.validation;
$[43] = validationChild;
$[44] = t14;
} else t14 = $[44];
let t15;
if ($[45] !== t13 || $[46] !== t14) {
t15 = /*#__PURE__*/ jsxs("div", { children: [t13, t14] });
$[45] = t13;
$[46] = t14;
$[47] = t15;
} else t15 = $[47];
let t16;
if ($[48] !== t15 || $[49] !== t5) {
t16 = /*#__PURE__*/ jsx(CheckboxOrRadioGroupContext.Provider, {
value: t5,
children: t15
});
$[48] = t15;
$[49] = t5;
$[50] = t16;
} else t16 = $[50];
return t16;
};
var CheckboxOrRadioGroup_default = Object.assign(CheckboxOrRadioGroup, {
Caption: CheckboxOrRadioGroupCaption,
Label: CheckboxOrRadioGroupLabel,
Validation: CheckboxOrRadioGroupValidation
});
function _temp(child) {
return /*#__PURE__*/ React.isValidElement(child);
}
//#endregion
export { CheckboxOrRadioGroup_default as default };