@primer/react
Version:
An implementation of GitHub's Primer Design System using React
219 lines (218 loc) • 9.57 kB
JavaScript
import { useId as useId$1 } from "../hooks/useId.js";
import { warning } from "../utils/warning.js";
import { isSlot } from "../utils/is-slot.js";
import { useSlots } from "../hooks/useSlots.js";
import Radio from "../Radio/Radio.js";
import TextInput_default from "../TextInput/TextInput.js";
import Autocomplete_default from "../Autocomplete/Autocomplete.js";
import ValidationAnimationContainer from "../internal/components/ValidationAnimationContainer.js";
import CheckboxOrRadioGroupContext from "../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.js";
import { FormControlContextProvider } from "./_FormControlContext.js";
import Checkbox from "../Checkbox/Checkbox.js";
import Select_default from "../Select/Select.js";
import { SelectPanel } from "../SelectPanel/SelectPanel.js";
import TextInputWithTokens from "../TextInputWithTokens/TextInputWithTokens.js";
import Textarea from "../Textarea/Textarea.js";
import { FormControlCaption } from "./FormControlCaption.js";
import FormControlLabel from "./FormControlLabel.js";
import FormControlLeadingVisual from "./FormControlLeadingVisual.js";
import FormControlValidation from "./_FormControlValidation.js";
import FormControl_module_css_default from "./FormControl.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import React, { useContext } from "react";
var FormControl_default = Object.assign(/* @__PURE__ */ React.forwardRef((t0, ref) => {
var _slots$validation, _slots$label;
const $ = c(32);
const { children, disabled: disabledProp, layout: t1, id: idProp, required, className, style } = t0;
const layout = t1 === void 0 ? "vertical" : t1;
let t2;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t2 = {
caption: FormControlCaption,
label: FormControlLabel,
leadingVisual: FormControlLeadingVisual,
validation: FormControlValidation
};
$[0] = t2;
} else t2 = $[0];
const [slots, childrenWithoutSlots] = useSlots(children, t2);
const expectedInputComponents = [
Autocomplete_default,
Checkbox,
Radio,
Select_default,
TextInput_default,
TextInputWithTokens,
Textarea,
SelectPanel
];
const disabled = useContext(CheckboxOrRadioGroupContext).disabled || disabledProp;
const id = useId$1(idProp);
const validationMessageId = slots.validation ? `${id}-validationMessage` : void 0;
const captionId = slots.caption ? `${id}-caption` : void 0;
const validationStatus = (_slots$validation = slots.validation) === null || _slots$validation === void 0 ? void 0 : _slots$validation.props.variant;
const InputComponent = childrenWithoutSlots.find((child) => expectedInputComponents.some((inputComponent) => /*#__PURE__*/ React.isValidElement(child) && (child.type === inputComponent || isSlot(child, inputComponent))));
const inputProps = /*#__PURE__*/ React.isValidElement(InputComponent) && InputComponent.props;
const isChoiceInput = /*#__PURE__*/ React.isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio || isSlot(InputComponent, Checkbox) || isSlot(InputComponent, Radio));
const isRadioInput = /*#__PURE__*/ React.isValidElement(InputComponent) && (InputComponent.type === Radio || isSlot(InputComponent, Radio));
const isSelectPanelInput = /*#__PURE__*/ React.isValidElement(InputComponent) && (InputComponent.type === SelectPanel || isSlot(InputComponent, SelectPanel));
let t3;
if ($[1] !== id || $[2] !== slots.label) {
var _ref;
t3 = slots.label ? (_ref = /*#__PURE__*/ React.isValidElement(slots.label) ? slots.label.props.id : void 0) !== null && _ref !== void 0 ? _ref : `${id}-label` : void 0;
$[1] = id;
$[2] = slots.label;
$[3] = t3;
} else t3 = $[3];
const labelId = t3;
if (InputComponent) {
warning(inputProps === null || inputProps === void 0 ? void 0 : inputProps.id, "instead of passing the 'id' prop directly to the input component, it should be passed to the parent component, <FormControl>");
warning(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, "instead of passing the 'disabled' prop directly to the input component, it should be passed to the parent component, <FormControl>");
warning(inputProps === null || inputProps === void 0 ? void 0 : inputProps.required, "instead of passing the 'required' prop directly to the input component, it should be passed to the parent component, <FormControl>");
}
if (!slots.label) console.error(`The input field with the id ${id} MUST have a FormControl.Label child.\n\nIf you want to hide the label, pass the 'visuallyHidden' prop to the FormControl.Label component.`);
if (isChoiceInput) {
warning(!!slots.validation, "Validation messages are not rendered for an individual checkbox or radio. The validation message should be shown for all options.");
warning(isRadioInput && childrenWithoutSlots.find(_temp), "An individual radio cannot be a required field.");
} else warning(!!slots.leadingVisual, "A leading visual is only rendered for a checkbox or radio form control. If you want to render a leading visual inside of your input, check if your input supports a leading visual.");
const isLabelHidden = (_slots$label = slots.label) === null || _slots$label === void 0 ? void 0 : _slots$label.props.visuallyHidden;
const t4 = /*#__PURE__*/ React.isValidElement(InputComponent) ? /*#__PURE__*/ React.cloneElement(InputComponent, {
id,
disabled,
required: required && !isRadioInput,
"aria-describedby": captionId
}) : null;
let t5;
if ($[4] !== childrenWithoutSlots) {
t5 = childrenWithoutSlots.filter(_temp2);
$[4] = childrenWithoutSlots;
$[5] = t5;
} else t5 = $[5];
let t6;
if ($[6] !== t4 || $[7] !== t5) {
t6 = /*#__PURE__*/ jsxs("div", {
className: FormControl_module_css_default.ControlChoiceInputs,
children: [t4, t5]
});
$[6] = t4;
$[7] = t5;
$[8] = t6;
} else t6 = $[8];
let t7;
if ($[9] !== disabled || $[10] !== slots.caption || $[11] !== slots.leadingVisual) {
t7 = slots.leadingVisual ? /*#__PURE__*/ jsx("div", {
className: FormControl_module_css_default.LeadingVisual,
"data-disabled": disabled ? "" : void 0,
"data-has-caption": slots.caption ? "" : void 0,
children: slots.leadingVisual
}) : null;
$[9] = disabled;
$[10] = slots.caption;
$[11] = slots.leadingVisual;
$[12] = t7;
} else t7 = $[12];
let t8;
if ($[13] !== slots.caption || $[14] !== slots.label) {
t8 = /*#__PURE__*/ jsxs("div", {
className: FormControl_module_css_default.LabelContainer,
children: [slots.label, slots.caption]
});
$[13] = slots.caption;
$[14] = slots.label;
$[15] = t8;
} else t8 = $[15];
let t9;
if ($[16] !== t6 || $[17] !== t7 || $[18] !== t8) {
t9 = /*#__PURE__*/ jsxs(Fragment, { children: [
t6,
t7,
t8
] });
$[16] = t6;
$[17] = t7;
$[18] = t8;
$[19] = t9;
} else t9 = $[19];
const InputChildren = t9;
const T0 = FormControlContextProvider;
const t10 = !isSelectPanelInput;
let t11;
if ($[20] !== captionId || $[21] !== disabled || $[22] !== id || $[23] !== labelId || $[24] !== required || $[25] !== t10 || $[26] !== validationMessageId) {
t11 = {
captionId,
disabled,
id,
required,
validationMessageId,
isReferenced: t10,
labelId
};
$[20] = captionId;
$[21] = disabled;
$[22] = id;
$[23] = labelId;
$[24] = required;
$[25] = t10;
$[26] = validationMessageId;
$[27] = t11;
} else t11 = $[27];
const t12 = isChoiceInput || layout === "horizontal" ? /*#__PURE__*/ jsx("div", {
ref,
"data-has-leading-visual": slots.leadingVisual ? "" : void 0,
className: clsx(className, FormControl_module_css_default.ControlHorizontalLayout),
style,
"data-component": "FormControl",
children: InputChildren
}) : /*#__PURE__*/ jsxs("div", {
ref,
"data-has-label": !isLabelHidden ? "" : void 0,
className: clsx(className, FormControl_module_css_default.ControlVerticalLayout),
style,
"data-component": "FormControl",
children: [
slots.label,
/*#__PURE__*/ React.isValidElement(InputComponent) && /*#__PURE__*/ React.cloneElement(InputComponent, Object.assign({
id,
required,
disabled,
validationStatus,
"aria-describedby": [validationMessageId, captionId].filter(Boolean).join(" ")
}, InputComponent.props)),
childrenWithoutSlots.filter((child_2) => /*#__PURE__*/ React.isValidElement(child_2) && !expectedInputComponents.some((inputComponent_1) => child_2.type === inputComponent_1 || isSlot(child_2, inputComponent_1))),
slots.validation ? /*#__PURE__*/ jsx(ValidationAnimationContainer, {
show: true,
children: slots.validation
}) : null,
slots.caption
]
});
let t13;
if ($[28] !== T0 || $[29] !== t11 || $[30] !== t12) {
t13 = /*#__PURE__*/ jsx(T0, {
value: t11,
children: t12
});
$[28] = T0;
$[29] = t11;
$[30] = t12;
$[31] = t13;
} else t13 = $[31];
return t13;
}), {
__SLOT__: Symbol("FormControl"),
Caption: FormControlCaption,
Label: FormControlLabel,
LeadingVisual: FormControlLeadingVisual,
Validation: FormControlValidation
});
function _temp(child_0) {
var _child_0$props;
return /*#__PURE__*/ React.isValidElement(child_0) && ((_child_0$props = child_0.props) === null || _child_0$props === void 0 ? void 0 : _child_0$props.required);
}
function _temp2(child_1) {
return /*#__PURE__*/ React.isValidElement(child_1) && ![Checkbox, Radio].some((inputComponent_0) => child_1.type === inputComponent_0 || isSlot(child_1, inputComponent_0));
}
//#endregion
export { FormControl_default as default };