1 line
11 KiB
Plaintext
1 line
11 KiB
Plaintext
{"version":3,"sources":["../src/form-control.tsx"],"sourcesContent":["import { createContext } from \"@chakra-ui/react-context\"\nimport { PropGetter } from \"@chakra-ui/react-types\"\nimport { mergeRefs } from \"@chakra-ui/react-use-merge-refs\"\nimport {\n chakra,\n forwardRef,\n HTMLChakraProps,\n omitThemingProps,\n SystemStyleObject,\n ThemingProps,\n useMultiStyleConfig,\n} from \"@chakra-ui/system\"\nimport { cx, dataAttr } from \"@chakra-ui/shared-utils\"\nimport { useCallback, useId, useState } from \"react\"\n\nconst [FormControlStylesProvider, useFormControlStyles] = createContext<\n Record<string, SystemStyleObject>\n>({\n name: `FormControlStylesContext`,\n errorMessage: `useFormControlStyles returned is 'undefined'. Seems you forgot to wrap the components in \"<FormControl />\" `,\n})\n\nexport { useFormControlContext, useFormControlStyles }\n\nexport interface FormControlOptions {\n /**\n * If `true`, the form control will be required. This has 2 side effects:\n * - The `FormLabel` will show a required indicator\n * - The form element (e.g, Input) will have `aria-required` set to `true`\n *\n * @default false\n */\n isRequired?: boolean\n /**\n * If `true`, the form control will be disabled. This has 2 side effects:\n * - The `FormLabel` will have `data-disabled` attribute\n * - The form element (e.g, Input) will be disabled\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the form control will be invalid. This has 2 side effects:\n * - The `FormLabel` and `FormErrorIcon` will have `data-invalid` set to `true`\n * - The form element (e.g, Input) will have `aria-invalid` set to `true`\n *\n * @default false\n */\n isInvalid?: boolean\n /**\n * If `true`, the form control will be readonly\n *\n * @default false\n */\n isReadOnly?: boolean\n}\n\ninterface FormControlContext extends FormControlOptions {\n /**\n * The label text used to inform users as to what information is\n * requested for a text field.\n */\n label?: string\n /**\n * The custom `id` to use for the form control. This is passed directly to the form element (e.g, Input).\n * - The form element (e.g. Input) gets the `id`\n * - The form label id: `form-label-${id}`\n * - The form error text id: `form-error-text-${id}`\n * - The form helper text id: `form-helper-text-${id}`\n */\n id?: string\n}\n\ntype FormControlProviderContext = Omit<\n ReturnType<typeof useFormControlProvider>,\n \"getRootProps\" | \"htmlProps\"\n>\n\nconst [FormControlProvider, useFormControlContext] =\n createContext<FormControlProviderContext>({\n strict: false,\n name: \"FormControlContext\",\n })\n\nfunction useFormControlProvider(props: FormControlContext) {\n const {\n id: idProp,\n isRequired,\n isInvalid,\n isDisabled,\n isReadOnly,\n ...htmlProps\n } = props\n\n // Generate all the required ids\n const uuid = useId()\n const id = idProp || `field-${uuid}`\n\n const labelId = `${id}-label`\n const feedbackId = `${id}-feedback`\n const helpTextId = `${id}-helptext`\n\n /**\n * Track whether the `FormErrorMessage` has been rendered.\n * We use this to append its id the `aria-describedby` of the `input`.\n */\n const [hasFeedbackText, setHasFeedbackText] = useState(false)\n\n /**\n * Track whether the `FormHelperText` has been rendered.\n * We use this to append its id the `aria-describedby` of the `input`.\n */\n const [hasHelpText, setHasHelpText] = useState(false)\n\n // Track whether the form element (e.g, `input`) has focus.\n const [isFocused, setFocus] = useState(false)\n\n const getHelpTextProps = useCallback<PropGetter>(\n (props = {}, forwardedRef = null) => ({\n id: helpTextId,\n ...props,\n /**\n * Notify the field context when the help text is rendered on screen,\n * so we can apply the correct `aria-describedby` to the field (e.g. input, textarea).\n */\n ref: mergeRefs(forwardedRef, (node) => {\n if (!node) return\n setHasHelpText(true)\n }),\n }),\n [helpTextId],\n )\n\n const getLabelProps = useCallback<PropGetter>(\n (props = {}, forwardedRef = null) => ({\n ...props,\n ref: forwardedRef,\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"data-invalid\": dataAttr(isInvalid),\n \"data-readonly\": dataAttr(isReadOnly),\n id: props.id !== undefined ? props.id : labelId,\n htmlFor: props.htmlFor !== undefined ? props.htmlFor : id,\n }),\n [id, isDisabled, isFocused, isInvalid, isReadOnly, labelId],\n )\n\n const getErrorMessageProps = useCallback<PropGetter>(\n (props = {}, forwardedRef = null) => ({\n id: feedbackId,\n ...props,\n /**\n * Notify the field context when the error message is rendered on screen,\n * so we can apply the correct `aria-describedby` to the field (e.g. input, textarea).\n */\n ref: mergeRefs(forwardedRef, (node) => {\n if (!node) return\n setHasFeedbackText(true)\n }),\n \"aria-live\": \"polite\",\n }),\n [feedbackId],\n )\n\n const getRootProps = useCallback<PropGetter>(\n (props = {}, forwardedRef = null) => ({\n ...props,\n ...htmlProps,\n ref: forwardedRef,\n role: \"group\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"data-invalid\": dataAttr(isInvalid),\n \"data-readonly\": dataAttr(isReadOnly),\n }),\n [htmlProps, isDisabled, isFocused, isInvalid, isReadOnly],\n )\n\n const getRequiredIndicatorProps = useCallback<PropGetter>(\n (props = {}, forwardedRef = null) => ({\n ...props,\n ref: forwardedRef,\n role: \"presentation\",\n \"aria-hidden\": true,\n children: props.children || \"*\",\n }),\n [],\n )\n\n return {\n isRequired: !!isRequired,\n isInvalid: !!isInvalid,\n isReadOnly: !!isReadOnly,\n isDisabled: !!isDisabled,\n isFocused: !!isFocused,\n onFocus: () => setFocus(true),\n onBlur: () => setFocus(false),\n hasFeedbackText,\n setHasFeedbackText,\n hasHelpText,\n setHasHelpText,\n id,\n labelId,\n feedbackId,\n helpTextId,\n htmlProps,\n getHelpTextProps,\n getErrorMessageProps,\n getRootProps,\n getLabelProps,\n getRequiredIndicatorProps,\n }\n}\n\nexport interface FormControlProps\n extends HTMLChakraProps<\"div\">,\n ThemingProps<\"FormControl\">,\n FormControlContext {}\n\n/**\n * FormControl provides context such as\n * `isInvalid`, `isDisabled`, and `isRequired` to form elements.\n *\n * This is commonly used in form elements such as `input`,\n * `select`, `textarea`, etc.\n *\n * @see Docs https://chakra-ui.com/docs/components/form-control\n */\nexport const FormControl = forwardRef<FormControlProps, \"div\">(\n function FormControl(props, ref) {\n const styles = useMultiStyleConfig(\"Form\", props)\n const ownProps = omitThemingProps(props)\n const {\n getRootProps,\n htmlProps: _,\n ...context\n } = useFormControlProvider(ownProps)\n\n const className = cx(\"chakra-form-control\", props.className)\n\n return (\n <FormControlProvider value={context}>\n <FormControlStylesProvider value={styles}>\n <chakra.div\n {...getRootProps({}, ref)}\n className={className}\n __css={styles[\"container\"]}\n />\n </FormControlStylesProvider>\n </FormControlProvider>\n )\n },\n)\n\nFormControl.displayName = \"FormControl\"\n\nexport interface FormHelperTextProps extends HTMLChakraProps<\"div\"> {}\n\n/**\n * FormHelperText\n *\n * Assistive component that conveys additional guidance\n * about the field, such as how it will be used and what\n * types in values should be provided.\n */\nexport const FormHelperText = forwardRef<FormHelperTextProps, \"div\">(\n function FormHelperText(props, ref) {\n const field = useFormControlContext()\n const styles = useFormControlStyles()\n const className = cx(\"chakra-form__helper-text\", props.className)\n return (\n <chakra.div\n {...field?.getHelpTextProps(props, ref)}\n __css={styles.helperText}\n className={className}\n />\n )\n },\n)\n\nFormHelperText.displayName = \"FormHelperText\"\n"],"mappings":"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","names":["props","FormControl","FormHelperText"]} |