Files
wdi-dashboard/node_modules/@chakra-ui/form-control/dist/form-control.js
2024-08-16 15:06:52 +05:30

198 lines
6.9 KiB
JavaScript

'use client'
"use strict";
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/form-control.tsx
var form_control_exports = {};
__export(form_control_exports, {
FormControl: () => FormControl,
FormHelperText: () => FormHelperText,
useFormControlContext: () => useFormControlContext,
useFormControlStyles: () => useFormControlStyles
});
module.exports = __toCommonJS(form_control_exports);
var import_react_context = require("@chakra-ui/react-context");
var import_react_use_merge_refs = require("@chakra-ui/react-use-merge-refs");
var import_system = require("@chakra-ui/system");
var import_shared_utils = require("@chakra-ui/shared-utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var [FormControlStylesProvider, useFormControlStyles] = (0, import_react_context.createContext)({
name: `FormControlStylesContext`,
errorMessage: `useFormControlStyles returned is 'undefined'. Seems you forgot to wrap the components in "<FormControl />" `
});
var [FormControlProvider, useFormControlContext] = (0, import_react_context.createContext)({
strict: false,
name: "FormControlContext"
});
function useFormControlProvider(props) {
const {
id: idProp,
isRequired,
isInvalid,
isDisabled,
isReadOnly,
...htmlProps
} = props;
const uuid = (0, import_react.useId)();
const id = idProp || `field-${uuid}`;
const labelId = `${id}-label`;
const feedbackId = `${id}-feedback`;
const helpTextId = `${id}-helptext`;
const [hasFeedbackText, setHasFeedbackText] = (0, import_react.useState)(false);
const [hasHelpText, setHasHelpText] = (0, import_react.useState)(false);
const [isFocused, setFocus] = (0, import_react.useState)(false);
const getHelpTextProps = (0, import_react.useCallback)(
(props2 = {}, forwardedRef = null) => ({
id: helpTextId,
...props2,
/**
* Notify the field context when the help text is rendered on screen,
* so we can apply the correct `aria-describedby` to the field (e.g. input, textarea).
*/
ref: (0, import_react_use_merge_refs.mergeRefs)(forwardedRef, (node) => {
if (!node)
return;
setHasHelpText(true);
})
}),
[helpTextId]
);
const getLabelProps = (0, import_react.useCallback)(
(props2 = {}, forwardedRef = null) => ({
...props2,
ref: forwardedRef,
"data-focus": (0, import_shared_utils.dataAttr)(isFocused),
"data-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
"data-invalid": (0, import_shared_utils.dataAttr)(isInvalid),
"data-readonly": (0, import_shared_utils.dataAttr)(isReadOnly),
id: props2.id !== void 0 ? props2.id : labelId,
htmlFor: props2.htmlFor !== void 0 ? props2.htmlFor : id
}),
[id, isDisabled, isFocused, isInvalid, isReadOnly, labelId]
);
const getErrorMessageProps = (0, import_react.useCallback)(
(props2 = {}, forwardedRef = null) => ({
id: feedbackId,
...props2,
/**
* Notify the field context when the error message is rendered on screen,
* so we can apply the correct `aria-describedby` to the field (e.g. input, textarea).
*/
ref: (0, import_react_use_merge_refs.mergeRefs)(forwardedRef, (node) => {
if (!node)
return;
setHasFeedbackText(true);
}),
"aria-live": "polite"
}),
[feedbackId]
);
const getRootProps = (0, import_react.useCallback)(
(props2 = {}, forwardedRef = null) => ({
...props2,
...htmlProps,
ref: forwardedRef,
role: "group",
"data-focus": (0, import_shared_utils.dataAttr)(isFocused),
"data-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
"data-invalid": (0, import_shared_utils.dataAttr)(isInvalid),
"data-readonly": (0, import_shared_utils.dataAttr)(isReadOnly)
}),
[htmlProps, isDisabled, isFocused, isInvalid, isReadOnly]
);
const getRequiredIndicatorProps = (0, import_react.useCallback)(
(props2 = {}, forwardedRef = null) => ({
...props2,
ref: forwardedRef,
role: "presentation",
"aria-hidden": true,
children: props2.children || "*"
}),
[]
);
return {
isRequired: !!isRequired,
isInvalid: !!isInvalid,
isReadOnly: !!isReadOnly,
isDisabled: !!isDisabled,
isFocused: !!isFocused,
onFocus: () => setFocus(true),
onBlur: () => setFocus(false),
hasFeedbackText,
setHasFeedbackText,
hasHelpText,
setHasHelpText,
id,
labelId,
feedbackId,
helpTextId,
htmlProps,
getHelpTextProps,
getErrorMessageProps,
getRootProps,
getLabelProps,
getRequiredIndicatorProps
};
}
var FormControl = (0, import_system.forwardRef)(
function FormControl2(props, ref) {
const styles = (0, import_system.useMultiStyleConfig)("Form", props);
const ownProps = (0, import_system.omitThemingProps)(props);
const {
getRootProps,
htmlProps: _,
...context
} = useFormControlProvider(ownProps);
const className = (0, import_shared_utils.cx)("chakra-form-control", props.className);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormControlProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormControlStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_system.chakra.div,
{
...getRootProps({}, ref),
className,
__css: styles["container"]
}
) }) });
}
);
FormControl.displayName = "FormControl";
var FormHelperText = (0, import_system.forwardRef)(
function FormHelperText2(props, ref) {
const field = useFormControlContext();
const styles = useFormControlStyles();
const className = (0, import_shared_utils.cx)("chakra-form__helper-text", props.className);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_system.chakra.div,
{
...field == null ? void 0 : field.getHelpTextProps(props, ref),
__css: styles.helperText,
className
}
);
}
);
FormHelperText.displayName = "FormHelperText";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
FormControl,
FormHelperText,
useFormControlContext,
useFormControlStyles
});
//# sourceMappingURL=form-control.js.map