@yamada-ui/form-control/dist/index.js

Yamada UI form control component

"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/index.ts
var index_exports = {};
__export(index_exports, {
  ErrorMessage: () => ErrorMessage,
  Fieldset: () => Fieldset,
  FormControl: () => FormControl,
  HelperMessage: () => HelperMessage,
  Label: () => Label,
  Legend: () => Legend,
  formControlProperties: () => formControlProperties,
  getFormControlProperties: () => getFormControlProperties,
  useFormControl: () => useFormControl,
  useFormControlProps: () => useFormControlProps
});
module.exports = __toCommonJS(index_exports);

// src/fieldset.tsx
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 useFormControl = ({
  id: idProp,
  disabled: disabledProp,
  invalid: invalidProp,
  isDisabled: isDisabledProp,
  isInvalid: isInvalidProp,
  isReadOnly: isReadOnlyProp,
  isRequired: isRequiredProp,
  readOnly: readOnlyProp,
  required: requiredProp,
  ...rest
}) => {
  var _a, _b, _c, _d;
  const control = useFormControlContext();
  const id = idProp != null ? idProp : control == null ? void 0 : control.id;
  const labelId = control == null ? void 0 : control.labelId;
  const disabled = (_a = disabledProp != null ? disabledProp : isDisabledProp) != null ? _a : control == null ? void 0 : control.disabled;
  const readOnly = (_b = readOnlyProp != null ? readOnlyProp : isReadOnlyProp) != null ? _b : control == null ? void 0 : control.readOnly;
  const required = (_c = requiredProp != null ? requiredProp : isRequiredProp) != null ? _c : control == null ? void 0 : control.required;
  const invalid = (_d = invalidProp != null ? invalidProp : isInvalidProp) != null ? _d : control == null ? void 0 : control.invalid;
  return {
    id,
    disabled,
    invalid,
    /**
     * @deprecated Use `disabled` instead.
     */
    isDisabled: disabled,
    /**
     * @deprecated Use `invalid` instead.
     */
    isInvalid: invalid,
    /**
     * @deprecated Use `readOnly` instead.
     */
    isReadOnly: readOnly,
    /**
     * @deprecated Use `required` instead.
     */
    isRequired: required,
    labelId,
    readOnly,
    required,
    ...rest
  };
};
var useFormControlProps = ({
  id,
  disabled,
  invalid,
  isDisabled,
  isInvalid,
  isReadOnly,
  isRequired,
  readOnly,
  required,
  onBlur,
  onFocus,
  ...rest
}) => {
  const control = useFormControlContext();
  disabled != null ? disabled : disabled = isDisabled != null ? isDisabled : control == null ? void 0 : control.disabled;
  required != null ? required : required = isRequired != null ? isRequired : control == null ? void 0 : control.required;
  readOnly != null ? readOnly : readOnly = isReadOnly != null ? isReadOnly : control == null ? void 0 : control.readOnly;
  invalid != null ? invalid : invalid = isInvalid != null ? isInvalid : control == null ? void 0 : control.invalid;
  return {
    id: id != null ? id : control == null ? void 0 : control.id,
    "aria-disabled": (0, import_utils.ariaAttr)(disabled),
    "aria-invalid": (0, import_utils.ariaAttr)(invalid),
    "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
    "aria-required": (0, import_utils.ariaAttr)(required),
    "data-readonly": (0, import_utils.dataAttr)(readOnly),
    disabled,
    readOnly,
    required,
    onBlur: (0, import_utils.handlerAll)(control == null ? void 0 : control.onBlur, onBlur),
    onFocus: (0, import_utils.handlerAll)(control == null ? void 0 : control.onFocus, onFocus),
    ...disabled || readOnly ? {
      _active: {},
      _focus: {},
      _focusVisible: {},
      _hover: {},
      _invalid: {}
    } : {},
    ...rest
  };
};
var formControlProperties = [
  "disabled",
  "required",
  "readOnly",
  "aria-disabled",
  "aria-readonly",
  "aria-required",
  "aria-invalid",
  "data-readonly",
  "onFocus",
  "onBlur",
  "_hover",
  "_active",
  "_focus",
  "_invalid",
  "_focusVisible"
];
var getFormControlProperties = ({
  omit = [],
  pick = []
} = {}) => {
  let result = [...formControlProperties];
  if (pick.length) {
    result = result.filter((property) => pick.includes(property));
  }
  if (omit.length) {
    result = result.filter((property) => !omit.includes(property));
  }
  return result;
};
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 = {
  ErrorMessage,
  Fieldset,
  FormControl,
  HelperMessage,
  Label,
  Legend,
  formControlProperties,
  getFormControlProperties,
  useFormControl,
  useFormControlProps
});
//# sourceMappingURL=index.js.map