@yamada-ui/react/dist/cjs/components/field/field.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"field.cjs","names":["createContext","createSlotComponent","fieldStyle","useSplitChildren","styled","useFieldsetContext"],"sources":["../../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldStyle } from \"./field.style\"\nimport { isValidElement, useId, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, dataAttr, useSplitChildren } from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { fieldStyle } from \"./field.style\"\n\nexport interface FieldContext\n  extends FieldProps,\n    Pick<FieldRootProps, \"replace\"> {\n  id: string\n  errorMessageId: string\n  focused: boolean\n  helperMessageId: string\n  labelId: string\n  onBlur: () => void\n  onFocus: () => void\n}\n\nconst [FieldContext, useFieldContext] = createContext<FieldContext>({\n  name: \"FieldContext\",\n  strict: false,\n})\n\nexport { FieldContext, useFieldContext }\n\nexport interface FieldProps {\n  /**\n   * If `true`, the field will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the field will be invalid.\n   *\n   * @default false\n   */\n  invalid?: boolean\n  /**\n   * If `true`, the field will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * If `true`, the field will be required.\n   *\n   * @default false\n   */\n  required?: boolean\n}\n\nexport interface FieldRootProps\n  extends HTMLStyledProps,\n    ThemeProps<FieldStyle>,\n    Pick<FieldLabelProps, \"optionalIndicator\" | \"requiredIndicator\">,\n    FieldProps {\n  /**\n   * The field error message to use.\n   */\n  errorMessage?: ReactNode\n  /**\n   * The field helper message to use.\n   */\n  helperMessage?: ReactNode\n  /**\n   * The field label to use.\n   */\n  label?: ReactNode\n  /**\n   * If `true`, switch between helper message and error message using invalid.\n   *\n   * @default true\n   */\n  replace?: boolean\n  /**\n   * Props the error message component.\n   */\n  errorMessageProps?: FieldErrorMessageProps\n  /**\n   * Props the helper message component.\n   */\n  helperMessageProps?: FieldHelperMessageProps\n  /**\n   * Props the label component.\n   */\n  labelProps?: FieldLabelProps\n}\n\nconst {\n  PropsContext: FieldPropsContext,\n  usePropsContext: useFieldPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FieldRootProps, FieldStyle>(\"field\", fieldStyle)\n\nexport { FieldPropsContext, useFieldPropsContext }\n\n/**\n * `Field` is a component used to group form elements with label, helper message, error message, etc.\n *\n * @see https://yamada-ui.com/docs/components/field\n */\nexport const FieldRoot = withProvider<\"div\", FieldRootProps>(\n  ({\n    id,\n    children,\n    disabled,\n    errorMessage,\n    helperMessage,\n    invalid,\n    label,\n    optionalIndicator,\n    readOnly,\n    replace = true,\n    required,\n    requiredIndicator,\n    errorMessageProps,\n    helperMessageProps,\n    labelProps,\n    ...rest\n  }) => {\n    const uuid = useId()\n    const labelId = useId()\n    const helperMessageId = useId()\n    const errorMessageId = useId()\n    const [focused, setFocused] = useState<boolean>(false)\n    const [\n      omittedChildren,\n      customLabel,\n      customHelperMessage,\n      customErrorMessage,\n    ] = useSplitChildren(\n      children,\n      FieldLabel,\n      FieldHelperMessage,\n      FieldErrorMessage,\n    )\n\n    id ??= uuid\n\n    const context = useMemo(\n      () => ({\n        id,\n        disabled,\n        errorMessageId,\n        focused,\n        helperMessageId,\n        invalid,\n        labelId,\n        readOnly,\n        replace,\n        required,\n        onBlur: () => setFocused(false),\n        onFocus: () => setFocused(true),\n      }),\n      [\n        id,\n        disabled,\n        labelId,\n        focused,\n        invalid,\n        helperMessageId,\n        errorMessageId,\n        readOnly,\n        replace,\n        required,\n      ],\n    )\n\n    return (\n      <FieldContext value={context}>\n        <styled.div\n          data-disabled={dataAttr(disabled)}\n          data-focus={dataAttr(focused)}\n          data-invalid={dataAttr(invalid)}\n          data-readonly={dataAttr(readOnly)}\n          {...rest}\n        >\n          {customLabel ||\n            (label ? (\n              <FieldLabel\n                optionalIndicator={optionalIndicator}\n                requiredIndicator={requiredIndicator}\n                {...labelProps}\n              >\n                {label}\n              </FieldLabel>\n            ) : null)}\n\n          {omittedChildren}\n\n          {customHelperMessage ||\n            (helperMessage ? (\n              <FieldHelperMessage {...helperMessageProps}>\n                {helperMessage}\n              </FieldHelperMessage>\n            ) : null)}\n\n          {customErrorMessage ||\n            (errorMessage ? (\n              <FieldErrorMessage {...errorMessageProps}>\n                {errorMessage}\n              </FieldErrorMessage>\n            ) : null)}\n        </styled.div>\n      </FieldContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface FieldLabelProps extends HTMLStyledProps<\"label\"> {\n  /**\n   * The optional indicator to use.\n   */\n  optionalIndicator?: ReactNode\n  /**\n   * If `true`, the field will be required.\n   *\n   * @default false\n   */\n  required?: boolean\n  /**\n   * The required indicator to use.\n   */\n  requiredIndicator?: ReactNode\n}\n\nexport const FieldLabel = withContext<\"label\", FieldLabelProps>(\n  ({\n    id,\n    htmlFor,\n    children,\n    optionalIndicator = null,\n    required,\n    requiredIndicator = null,\n    ...rest\n  }) => {\n    const fieldsetContext = useFieldsetContext()\n    const fieldContext = useFieldContext()\n\n    id ??= fieldContext?.labelId\n    htmlFor ??= fieldContext?.id\n    required ??= fieldContext?.required ?? fieldsetContext?.required\n\n    const disabled = fieldContext?.disabled ?? fieldsetContext?.disabled\n    const invalid = fieldContext?.invalid ?? fieldsetContext?.invalid\n    const readOnly = fieldContext?.readOnly ?? fieldsetContext?.readOnly\n    const focused = fieldContext?.focused\n\n    return (\n      <styled.label\n        id={id}\n        htmlFor={htmlFor}\n        data-disabled={dataAttr(disabled)}\n        data-focus={dataAttr(focused)}\n        data-invalid={dataAttr(invalid)}\n        data-readonly={dataAttr(readOnly)}\n        {...rest}\n      >\n        {children}\n\n        {required ? (\n          requiredIndicator ? (\n            <FieldRequiredIndicator>{requiredIndicator}</FieldRequiredIndicator>\n          ) : (\n            <FieldRequiredIndicator />\n          )\n        ) : (\n          optionalIndicator\n        )}\n      </styled.label>\n    )\n  },\n  \"label\",\n)()\n\ninterface FieldRequiredIndicatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst FieldRequiredIndicator = withContext<\"span\", FieldRequiredIndicatorProps>(\n  ({ children, ...rest }) => {\n    if (!isValidElement(children)) {\n      return (\n        <styled.span aria-hidden role=\"presentation\" {...rest}>\n          {children ?? <>*</>}\n        </styled.span>\n      )\n    } else {\n      return children\n    }\n  },\n  \"requiredIndicator\",\n)()\n\nexport interface FieldHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldHelperMessage = withContext<\"span\", FieldHelperMessageProps>(\n  (props) => {\n    const fieldsetContext = useFieldsetContext()\n    const {\n      helperMessageId,\n      invalid = fieldsetContext?.invalid,\n      replace,\n    } = useFieldContext() ?? {}\n\n    return (\n      <styled.span\n        id={helperMessageId}\n        hidden={replace && invalid ? true : false}\n        {...props}\n      />\n    )\n  },\n  \"helperMessage\",\n)()\n\nexport interface FieldErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldErrorMessage = withContext<\"span\", FieldErrorMessageProps>(\n  (props) => {\n    const fieldsetContext = useFieldsetContext()\n    const { errorMessageId, invalid = fieldsetContext?.invalid } =\n      useFieldContext() ?? {}\n\n    return (\n      <styled.span\n        id={errorMessageId}\n        aria-live={invalid ? \"polite\" : undefined}\n        hidden={!invalid}\n        {...props}\n      />\n    )\n  },\n  \"errorMessage\",\n)()\n"],"mappings":"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"}