@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
113 lines (111 loc) • 3.26 kB
JavaScript
import {
FieldsetDescription
} from "./chunk-D2XZT2RA.mjs";
import {
FieldsetLegend
} from "./chunk-CD4LCDK3.mjs";
import {
ValidationMessage
} from "./chunk-7REW23LO.mjs";
import {
getValidationMessageValue
} from "./chunk-3V4GFS46.mjs";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./chunk-YOSPWY5K.mjs";
// src/form/fieldset/fieldset.tsx
import {
Children,
cloneElement,
isValidElement,
useId,
forwardRef,
createContext,
useContext
} from "react";
import { clsx } from "@postenbring/hedwig-css/typed-classname";
import { jsx, jsxs } from "react/jsx-runtime";
var FieldsetContext = createContext({
hasError: false,
size: ""
});
var useFieldsetContext = () => useContext(FieldsetContext);
var Fieldset = forwardRef(function Fieldset2(_a, ref) {
var _b = _a, {
className,
style,
"data-color": dataColor = void 0,
validationMessage,
validationMessageProps,
errorMessage,
errorMessageProps,
legendProps,
legend,
size = "",
children
} = _b, rest = __objRest(_b, [
"className",
"style",
"data-color",
"validationMessage",
"validationMessageProps",
"errorMessage",
"errorMessageProps",
"legendProps",
"legend",
"size",
"children"
]);
const validationMessageId = useId();
const validationColor = errorMessage ? "error" : dataColor;
const validationMessageValue = getValidationMessageValue(validationMessage, errorMessage);
const childArray = Children.toArray(children);
const legendChild = childArray.find(
(child) => isValidElement(child) && child.type === FieldsetLegend
);
const contentChildren = legendChild ? childArray.filter((child) => child !== legendChild) : childArray;
let renderedLegend = null;
if (legendChild) {
renderedLegend = cloneElement(legendChild, __spreadProps(__spreadValues(__spreadValues({}, legendProps), legendChild.props), {
className: clsx(
legendProps == null ? void 0 : legendProps.className,
legendChild.props.className
)
}));
} else if (legend !== void 0) {
renderedLegend = /* @__PURE__ */ jsx(FieldsetLegend, __spreadProps(__spreadValues({}, legendProps), { children: legend }));
}
return /* @__PURE__ */ jsxs(
"fieldset",
__spreadProps(__spreadValues({
"aria-describedby": validationMessageValue ? validationMessageId : void 0,
"aria-invalid": errorMessage ? true : void 0,
className: clsx("hds-fieldset", { [`hds-fieldset--${size}`]: size }, className),
"data-color": validationColor,
ref,
style
}, rest), {
children: [
renderedLegend,
/* @__PURE__ */ jsx(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage), size }, children: contentChildren }),
/* @__PURE__ */ jsx(
ValidationMessage,
__spreadProps(__spreadValues({
id: validationMessageId
}, validationMessageProps != null ? validationMessageProps : errorMessageProps), {
children: validationMessageValue
})
)
]
})
);
});
Fieldset.Description = FieldsetDescription;
Fieldset.Legend = FieldsetLegend;
export {
useFieldsetContext,
Fieldset
};
//# sourceMappingURL=chunk-4K54KSRB.mjs.map