import type { ReactElement, ReactNode, Ref } from "react"; import React, { forwardRef, useCallback, useId, useState } from "react"; import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form"; import { FormProvider, useFormContext } from "react-hook-form"; import classNames from "@calcom/lib/classNames"; import { getErrorFromUnknown } from "@calcom/lib/errors"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Alert, showToast, Skeleton, Tooltip, UnstyledSelect } from "../../.."; import { Eye, EyeOff, X } from "../../icon"; import { HintsOrErrors } from "./HintOrErrors"; import { Label } from "./Label"; type InputProps = JSX.IntrinsicElements["input"] & { isFullWidth?: boolean; isStandaloneField?: boolean }; export const Input = forwardRef(function Input( { isFullWidth = true, isStandaloneField = true, ...props }, ref ) { return ( ); }); export function InputLeading(props: JSX.IntrinsicElements["div"]) { return ( {props.children} ); } type InputFieldProps = { label?: ReactNode; LockedIcon?: React.ReactNode; hint?: ReactNode; hintErrors?: string[]; addOnLeading?: ReactNode; addOnSuffix?: ReactNode; inputIsFullWidth?: boolean; addOnFilled?: boolean; addOnClassname?: string; error?: string; labelSrOnly?: boolean; containerClassName?: string; t?: (key: string) => string; } & React.ComponentProps & { labelProps?: React.ComponentProps; labelClassName?: string; }; type AddonProps = { children: React.ReactNode; isFilled?: boolean; className?: string; error?: boolean; }; const Addon = ({ isFilled, children, className, error }: AddonProps) => (
{children}
); export const InputField = forwardRef(function InputField(props, ref) { const id = useId(); const { t: _t, isLocaleReady, i18n } = useLocale(); const t = props.t || _t; const name = props.name || ""; const { label = t(name), labelProps, labelClassName, disabled, LockedIcon, placeholder = isLocaleReady && i18n.exists(name + "_placeholder") ? t(name + "_placeholder") : "", className, addOnLeading, addOnSuffix, addOnFilled = true, addOnClassname, inputIsFullWidth, hint, type, hintErrors, labelSrOnly, containerClassName, readOnly, // eslint-disable-next-line @typescript-eslint/no-unused-vars t: __t, ...passThrough } = props; const [inputValue, setInputValue] = useState(""); return (
{!!name && ( {label} {LockedIcon} )} {addOnLeading || addOnSuffix ? (
{addOnLeading && ( {addOnLeading} )} { setInputValue(e.target.value); props.onChange && props.onChange(e); }, value: inputValue, })} disabled={readOnly || disabled} ref={ref} /> {addOnSuffix && ( {addOnSuffix} )} {type === "search" && inputValue?.toString().length > 0 && ( { setInputValue(""); props.onChange && props.onChange(e as unknown as React.ChangeEvent); }} /> )}
) : ( )} {hint &&
{hint}
}
); }); export const TextField = forwardRef(function TextField(props, ref) { return ; }); export const PasswordField = forwardRef(function PasswordField( props, ref ) { const { t } = useLocale(); const [isPasswordVisible, setIsPasswordVisible] = useState(false); const toggleIsPasswordVisible = useCallback( () => setIsPasswordVisible(!isPasswordVisible), [isPasswordVisible, setIsPasswordVisible] ); const textLabel = isPasswordVisible ? t("hide_password") : t("show_password"); return (
} />
); }); export const EmailInput = forwardRef(function EmailInput(props, ref) { return ( ); }); export const EmailField = forwardRef(function EmailField(props, ref) { return ( ); }); type TextAreaProps = JSX.IntrinsicElements["textarea"]; export const TextArea = forwardRef(function TextAreaInput(props, ref) { return (