@yamada-ui/form-control
Version:
Yamada UI form control component
381 lines (378 loc) • 14 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/fieldset.tsx
var fieldset_exports = {};
__export(fieldset_exports, {
Fieldset: () => Fieldset,
Legend: () => Legend
});
module.exports = __toCommonJS(fieldset_exports);
var import_core2 = require("@yamada-ui/core");
var import_utils2 = require("@yamada-ui/utils");
var import_visually_hidden = require("@yamada-ui/visually-hidden");
var import_react2 = require("react");
// src/form-control.tsx
var import_core = require("@yamada-ui/core");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var [FormControlContextProvider, useFormControlContext] = (0, import_utils.createContext)({
name: "FormControlContext",
strict: false
});
var [FormControlStylesProvider, useFormControlStyles] = (0, import_utils.createContext)({
name: "FormControlStyleContext",
strict: false
});
var FormControl = (0, import_core.forwardRef)(
({ id, ...props }, ref) => {
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("FormControl", props);
const uuid = (0, import_react.useId)();
const labelId = (0, import_react.useId)();
const {
className,
children,
isDisabled = false,
disabled = isDisabled,
errorMessage,
helperMessage,
isInvalid = false,
invalid = isInvalid,
isReadOnly = false,
isReplace = true,
isRequired = false,
label,
optionalIndicator,
readOnly = isReadOnly,
replace = isReplace,
required = isRequired,
requiredIndicator,
errorMessageProps,
helperMessageProps,
labelProps,
...rest
} = (0, import_core.omitThemeProps)(mergedProps);
const [focused, setFocused] = (0, import_react.useState)(false);
const validChildren = (0, import_utils.getValidChildren)(children);
const customLabel = (0, import_utils.findChild)(validChildren, Label);
const customHelperMessage = (0, import_utils.findChild)(validChildren, HelperMessage);
const customErrorMessage = (0, import_utils.findChild)(validChildren, ErrorMessage);
const isCustomLabel = !!customLabel;
const isCustomHelperMessage = !!customHelperMessage;
const isCustomErrorMessage = !!customErrorMessage;
const css = { ...styles.container };
id != null ? id : id = uuid;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
FormControlContextProvider,
{
value: {
id,
disabled,
focused,
invalid,
labelId,
readOnly,
replace,
required,
onBlur: () => setFocused(false),
onFocus: () => setFocused(true)
},
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormControlStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_core.ui.div,
{
ref,
className: (0, import_utils.cx)("ui-form__control", className),
"data-disabled": (0, import_utils.dataAttr)(disabled),
"data-focus": (0, import_utils.dataAttr)(focused),
"data-invalid": (0, import_utils.dataAttr)(invalid),
"data-readonly": (0, import_utils.dataAttr)(readOnly),
__css: css,
...rest,
children: [
!isCustomLabel && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Label,
{
optionalIndicator,
requiredIndicator,
...labelProps,
children: label
}
) : null,
children,
!isCustomHelperMessage && helperMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelperMessage, { ...helperMessageProps, children: helperMessage }) : null,
!isCustomErrorMessage && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorMessage, { ...errorMessageProps, children: errorMessage }) : null
]
}
) })
}
);
}
);
FormControl.displayName = "FormControl";
FormControl.__ui__ = "FormControl";
var Label = (0, import_core.forwardRef)(
({
id,
htmlFor,
className,
children,
isRequired,
optionalIndicator = null,
required: requiredProp = isRequired,
requiredIndicator = null,
...rest
}, ref) => {
var _a, _b;
const {
id: formControlId,
disabled,
focused,
invalid,
labelId,
readOnly,
required
} = (_a = useFormControlContext()) != null ? _a : {};
const styles = (_b = useFormControlStyles()) != null ? _b : {};
const css = {
display: "block",
pointerEvents: readOnly ? "none" : void 0,
...styles.label
};
id != null ? id : id = labelId;
requiredProp != null ? requiredProp : requiredProp = required;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_core.ui.label,
{
id,
ref,
htmlFor: htmlFor != null ? htmlFor : formControlId,
className: (0, import_utils.cx)("ui-form__label", className),
style: { cursor: disabled ? "not-allowed" : void 0 },
"data-disabled": (0, import_utils.dataAttr)(disabled),
"data-focus": (0, import_utils.dataAttr)(focused),
"data-invalid": (0, import_utils.dataAttr)(invalid),
"data-readonly": (0, import_utils.dataAttr)(readOnly),
__css: css,
...rest,
children: [
children,
requiredProp ? requiredIndicator ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredIndicator, { children: requiredIndicator }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredIndicator, {}) : optionalIndicator
]
}
);
}
);
Label.displayName = "Label";
Label.__ui__ = "Label";
var RequiredIndicator = (0, import_core.forwardRef)(
({ className, children, ...rest }, ref) => {
var _a;
const styles = (_a = useFormControlStyles()) != null ? _a : {};
const css = { ...styles.requiredIndicator };
return !(0, import_react.isValidElement)(children) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.span,
{
ref,
className: (0, import_utils.cx)("ui-form__required-indicator", className),
"aria-hidden": true,
role: "presentation",
__css: css,
...rest,
children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "*" })
}
) : children;
}
);
RequiredIndicator.displayName = "RequiredIndicator";
RequiredIndicator.__ui__ = "RequiredIndicator";
var HelperMessage = (0, import_core.forwardRef)(
({ className, ...rest }, ref) => {
var _a, _b;
const { id, invalid, replace } = (_a = useFormControlContext()) != null ? _a : {};
const styles = (_b = useFormControlStyles()) != null ? _b : {};
const css = { ...styles.helperMessage };
if (replace && invalid) return null;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.span,
{
ref,
className: (0, import_utils.cx)("ui-form__helper-message", className),
"aria-describedby": id,
__css: css,
...rest
}
);
}
);
HelperMessage.displayName = "HelperMessage";
HelperMessage.__ui__ = "HelperMessage";
var ErrorMessage = (0, import_core.forwardRef)(
({ className, ...rest }, ref) => {
var _a, _b;
const { invalid } = (_a = useFormControlContext()) != null ? _a : {};
const styles = (_b = useFormControlStyles()) != null ? _b : {};
const css = { ...styles.errorMessage };
if (!invalid) return null;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.span,
{
ref,
className: (0, import_utils.cx)("ui-form__error-message", className),
"aria-live": "polite",
__css: css,
...rest
}
);
}
);
ErrorMessage.displayName = "ErrorMessage";
ErrorMessage.__ui__ = "ErrorMessage";
// src/fieldset.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Fieldset = (0, import_core2.forwardRef)(
({ id, ...props }, ref) => {
const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Fieldset", props);
const uuid = (0, import_react2.useId)();
const {
className,
children,
isDisabled = false,
disabled = isDisabled,
errorMessage,
helperMessage,
isInvalid = false,
invalid = isInvalid,
isReadOnly = false,
isReplace = true,
isRequired = false,
legend,
optionalIndicator,
readOnly = isReadOnly,
replace = isReplace,
required = isRequired,
requiredIndicator,
errorMessageProps,
helperMessageProps,
legendProps,
...rest
} = (0, import_core2.omitThemeProps)(mergedProps);
const [focused, setFocused] = (0, import_react2.useState)(false);
const validChildren = (0, import_utils2.getValidChildren)(children);
const customLegend = (0, import_utils2.findChild)(validChildren, Legend);
const customHelperMessage = (0, import_utils2.findChild)(validChildren, HelperMessage);
const customErrorMessage = (0, import_utils2.findChild)(validChildren, ErrorMessage);
const isCustomLegend = !!customLegend;
const isCustomHelperMessage = !!customHelperMessage;
const isCustomErrorMessage = !!customErrorMessage;
const css = { ...styles.container };
id != null ? id : id = uuid;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
FormControlContextProvider,
{
value: {
disabled,
focused,
invalid,
readOnly,
replace,
required,
onBlur: () => setFocused(false),
onFocus: () => setFocused(true)
},
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormControlStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_core2.ui.fieldset,
{
ref,
className: (0, import_utils2.cx)("ui-fieldset", className),
"data-disabled": (0, import_utils2.dataAttr)(disabled),
"data-focus": (0, import_utils2.dataAttr)(focused),
"data-invalid": (0, import_utils2.dataAttr)(invalid),
"data-readonly": (0, import_utils2.dataAttr)(readOnly),
disabled,
__css: css,
...rest,
children: [
!isCustomLegend && legend ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
Legend,
{
optionalIndicator,
requiredIndicator,
...legendProps,
children: [
legend,
(!replace || !invalid) && helperMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_visually_hidden.VisuallyHidden, { children: helperMessage }) : null,
invalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_visually_hidden.VisuallyHidden, { children: errorMessage }) : null
]
}
) : null,
children,
!isCustomHelperMessage && helperMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelperMessage, { ...helperMessageProps, children: helperMessage }) : null,
!isCustomErrorMessage && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { ...errorMessageProps, children: errorMessage }) : null
]
}
) })
}
);
}
);
Fieldset.displayName = "Fieldset";
Fieldset.__ui__ = "Fieldset";
var Legend = (0, import_core2.forwardRef)(
({
className,
children,
isRequired,
optionalIndicator = null,
required: requiredProp = isRequired,
requiredIndicator = null,
...rest
}, ref) => {
var _a, _b;
const { disabled, focused, invalid, readOnly, required } = (_a = useFormControlContext()) != null ? _a : {};
const styles = (_b = useFormControlStyles()) != null ? _b : {};
const css = { ...styles.legend };
requiredProp != null ? requiredProp : requiredProp = required;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_core2.ui.legend,
{
ref,
className: (0, import_utils2.cx)("ui-fieldset__legend", className),
"data-disabled": (0, import_utils2.dataAttr)(disabled),
"data-focus": (0, import_utils2.dataAttr)(focused),
"data-invalid": (0, import_utils2.dataAttr)(invalid),
"data-readonly": (0, import_utils2.dataAttr)(readOnly),
__css: css,
...rest,
children: [
children,
requiredProp ? requiredIndicator ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RequiredIndicator, { children: requiredIndicator }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RequiredIndicator, {}) : optionalIndicator
]
}
);
}
);
Legend.displayName = "Legend";
Legend.__ui__ = "Legend";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Fieldset,
Legend
});
//# sourceMappingURL=fieldset.js.map