@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
108 lines (104 loc) • 4.33 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_children = require('../../utils/children.cjs');
const require_context = require('../../utils/context.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_fieldset_style = require('./fieldset.style.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/fieldset/fieldset.tsx
const [FieldsetContext, useFieldsetContext] = require_context.createContext({
name: "FieldsetContext",
strict: false
});
const { PropsContext: FieldsetPropsContext, usePropsContext: useFieldsetPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("fieldset", require_fieldset_style.fieldsetStyle);
/**
* `Fieldset` is a component used to group multiple controls.
*
* @see https://yamada-ui.com/docs/components/fieldset
*/
const FieldsetRoot = withProvider(({ id, children, disabled, errorMessage, helperMessage, invalid, legend, readOnly, required, contentProps, errorMessageProps, headerProps, helperMessageProps, legendProps,...rest }) => {
const uuid = (0, react.useId)();
const [omittedChildren, customLegend, customHeader, customContent, customHelperMessage, customErrorMessage] = require_children.useSplitChildren(children, FieldsetLegend, FieldsetHeader, FieldsetContent, FieldsetHelperMessage, FieldsetErrorMessage);
id ??= uuid;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsetContext, {
value: (0, react.useMemo)(() => ({
id,
disabled,
invalid,
readOnly,
required
}), [
id,
disabled,
invalid,
readOnly,
required
]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.fieldset, {
...rest,
children: [
customHeader || /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FieldsetHeader, {
...headerProps,
children: [customLegend || (legend ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsetLegend, {
...legendProps,
children: legend
}) : null), customHelperMessage || (helperMessage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsetHelperMessage, {
...helperMessageProps,
children: helperMessage
}) : null)]
}),
customContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsetContent, {
...contentProps,
children: omittedChildren
}),
customErrorMessage || (errorMessage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsetErrorMessage, {
...errorMessageProps,
children: errorMessage
}) : null)
]
})
});
}, "root")();
const FieldsetLegend = withContext("legend", "legend")(void 0, (props) => {
const { id, disabled, invalid } = useFieldsetContext() ?? {};
return {
id,
"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
"data-invalid": (0, require_utils_index.utils_exports.dataAttr)(invalid),
...props
};
});
const FieldsetHeader = withContext("div", "header")();
const FieldsetContent = withContext("div", "content")();
const FieldsetHelperMessage = withContext("span", "helperMessage")(void 0, (props) => {
const { id } = useFieldsetContext() ?? {};
return {
"aria-describedby": id,
...props
};
});
const FieldsetErrorMessage = withContext((props) => {
const { invalid } = useFieldsetContext() ?? {};
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.span, {
"aria-live": invalid ? "polite" : void 0,
hidden: !invalid,
...props
});
}, "errorMessage")();
//#endregion
exports.FieldsetContent = FieldsetContent;
exports.FieldsetContext = FieldsetContext;
exports.FieldsetErrorMessage = FieldsetErrorMessage;
exports.FieldsetHeader = FieldsetHeader;
exports.FieldsetHelperMessage = FieldsetHelperMessage;
exports.FieldsetLegend = FieldsetLegend;
exports.FieldsetPropsContext = FieldsetPropsContext;
exports.FieldsetRoot = FieldsetRoot;
exports.useFieldsetContext = useFieldsetContext;
exports.useFieldsetPropsContext = useFieldsetPropsContext;
//# sourceMappingURL=fieldset.cjs.map