@yamada-ui/form-control/dist/chunk-UTKIIZMO.mjs.map

Yamada UI form control component

{"version":3,"sources":["../src/fieldset.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport type { ErrorMessageProps, HelperMessageProps } from \"./form-control\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx, dataAttr, findChild, getValidChildren } from \"@yamada-ui/utils\"\nimport { VisuallyHidden } from \"@yamada-ui/visually-hidden\"\nimport { useId, useState } from \"react\"\nimport {\n  ErrorMessage,\n  FormControlContextProvider,\n  FormControlStylesProvider,\n  HelperMessage,\n  RequiredIndicator,\n  useFormControlContext,\n  useFormControlStyles,\n} from \"./form-control\"\n\ninterface FieldsetOptions {\n  /**\n   * If `true`, the fieldset will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The fieldset error message to use.\n   */\n  errorMessage?: ReactNode\n  /**\n   * The fieldset helper message to use.\n   */\n  helperMessage?: ReactNode\n  /**\n   * If `true`, the fieldset will be invalid.\n   *\n   * @default false\n   */\n  invalid?: boolean\n  /**\n   * If `true`, the fieldset will be disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the fieldset will be invalid.\n   *\n   * @default false\n   *\n   * @deprecated Use `invalid` instead.\n   */\n  isInvalid?: boolean\n  /**\n   * If `true`, the fieldset will be readonly.\n   *\n   * @default false\n   *\n   * @deprecated Use `readOnly` instead.\n   */\n  isReadOnly?: boolean\n  /**\n   * If `true`, switch between helper message and error message using isInvalid.\n   *\n   * @default true\n   *\n   * @deprecated Use `replace` instead.\n   */\n  isReplace?: boolean\n  /**\n   * If `true`, the fieldset will be required.\n   *\n   * @default false\n   *\n   * @deprecated Use `required` instead.\n   */\n  isRequired?: boolean\n  /**\n   * The fieldset legend to use.\n   */\n  legend?: ReactNode\n  /**\n   * If `true`, the fieldset will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * If `true`, switch between helper message and error message using isInvalid.\n   *\n   * @default true\n   */\n  replace?: boolean\n  /**\n   * If `true`, the fieldset will be required.\n   *\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Props the error message component.\n   */\n  errorMessageProps?: ErrorMessageProps\n  /**\n   * Props the helper message component.\n   */\n  helperMessageProps?: HelperMessageProps\n  /**\n   * Props the label component.\n   */\n  legendProps?: LegendProps\n}\n\nexport interface FieldsetProps\n  extends HTMLUIProps<\"fieldset\">,\n    ThemeProps<\"Fieldset\">,\n    LegendOptions,\n    FieldsetOptions {}\n\n/**\n * `Fieldset` is a component used to fieldset elements with legend, helper message, error message, etc.\n *\n * @see Docs https://yamada-ui.com/components/forms/fieldset\n */\nexport const Fieldset = forwardRef<FieldsetProps, \"fieldset\">(\n  ({ id, ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Fieldset\", props)\n    const uuid = useId()\n    const {\n      className,\n      children,\n      isDisabled = false,\n      disabled = isDisabled,\n      errorMessage,\n      helperMessage,\n      isInvalid = false,\n      invalid = isInvalid,\n      isReadOnly = false,\n      isReplace = true,\n      isRequired = false,\n      legend,\n      optionalIndicator,\n      readOnly = isReadOnly,\n      replace = isReplace,\n      required = isRequired,\n      requiredIndicator,\n      errorMessageProps,\n      helperMessageProps,\n      legendProps,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const [focused, setFocused] = useState<boolean>(false)\n    const validChildren = getValidChildren(children)\n    const customLegend = findChild(validChildren, Legend)\n    const customHelperMessage = findChild(validChildren, HelperMessage)\n    const customErrorMessage = findChild(validChildren, ErrorMessage)\n    const isCustomLegend = !!customLegend\n    const isCustomHelperMessage = !!customHelperMessage\n    const isCustomErrorMessage = !!customErrorMessage\n    const css: CSSUIObject = { ...styles.container }\n\n    id ??= uuid\n\n    return (\n      <FormControlContextProvider\n        value={{\n          disabled,\n          focused,\n          invalid,\n          readOnly,\n          replace,\n          required,\n          onBlur: () => setFocused(false),\n          onFocus: () => setFocused(true),\n        }}\n      >\n        <FormControlStylesProvider value={styles}>\n          <ui.fieldset\n            ref={ref}\n            className={cx(\"ui-fieldset\", className)}\n            data-disabled={dataAttr(disabled)}\n            data-focus={dataAttr(focused)}\n            data-invalid={dataAttr(invalid)}\n            data-readonly={dataAttr(readOnly)}\n            disabled={disabled}\n            __css={css}\n            {...rest}\n          >\n            {!isCustomLegend && legend ? (\n              <Legend\n                optionalIndicator={optionalIndicator}\n                requiredIndicator={requiredIndicator}\n                {...legendProps}\n              >\n                {legend}\n                {(!replace || !invalid) && helperMessage ? (\n                  <VisuallyHidden>{helperMessage}</VisuallyHidden>\n                ) : null}\n                {invalid && errorMessage ? (\n                  <VisuallyHidden>{errorMessage}</VisuallyHidden>\n                ) : null}\n              </Legend>\n            ) : null}\n            {children}\n            {!isCustomHelperMessage && helperMessage ? (\n              <HelperMessage {...helperMessageProps}>\n                {helperMessage}\n              </HelperMessage>\n            ) : null}\n            {!isCustomErrorMessage && errorMessage ? (\n              <ErrorMessage {...errorMessageProps}>{errorMessage}</ErrorMessage>\n            ) : null}\n          </ui.fieldset>\n        </FormControlStylesProvider>\n      </FormControlContextProvider>\n    )\n  },\n)\n\nFieldset.displayName = \"Fieldset\"\nFieldset.__ui__ = \"Fieldset\"\n\ninterface LegendOptions {\n  /**\n   * @deprecated Use `required` instead.\n   */\n  isRequired?: boolean\n  optionalIndicator?: ReactNode\n  required?: boolean\n  requiredIndicator?: ReactNode\n}\n\nexport interface LegendProps extends HTMLUIProps<\"legend\">, LegendOptions {}\n\nexport const Legend = forwardRef<LegendProps, \"legend\">(\n  (\n    {\n      className,\n      children,\n      isRequired,\n      optionalIndicator = null,\n      required: requiredProp = isRequired,\n      requiredIndicator = null,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { disabled, focused, invalid, readOnly, required } =\n      useFormControlContext() ?? {}\n    const styles = useFormControlStyles() ?? {}\n    const css: CSSUIObject = { ...styles.legend }\n\n    requiredProp ??= required\n\n    return (\n      <ui.legend\n        ref={ref}\n        className={cx(\"ui-fieldset__legend\", className)}\n        data-disabled={dataAttr(disabled)}\n        data-focus={dataAttr(focused)}\n        data-invalid={dataAttr(invalid)}\n        data-readonly={dataAttr(readOnly)}\n        __css={css}\n        {...rest}\n      >\n        {children}\n        {requiredProp ? (\n          requiredIndicator ? (\n            <RequiredIndicator>{requiredIndicator}</RequiredIndicator>\n          ) : (\n            <RequiredIndicator />\n          )\n        ) : (\n          optionalIndicator\n        )}\n      </ui.legend>\n    )\n  },\n)\n\nLegend.displayName = \"Legend\"\nLegend.__ui__ = \"Legend\"\n"],"mappings":"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","names":[]}