@manta-eu/react/input

Type Aliases

BaseInputArgs

BaseInputArgs = object

Properties

clearValue?

optional clearValue?: () => void

Returns

void

containerClassName?

optional containerClassName?: string

description?

optional description?: string

descriptionInLabelTooltip?

optional descriptionInLabelTooltip?: boolean

dontEnforceMaxLength?

optional dontEnforceMaxLength?: boolean

error?

optional error?: string

helperText?

optional helperText?: string

hiddenLabel?

optional hiddenLabel?: boolean

inlineCharacterCount?

optional inlineCharacterCount?: boolean

label?

optional label?: string

leadingElement?

optional leadingElement?: ReactNode

onAiComplete?

optional onAiComplete?: () => Promise<string> | string

Returns

Promise<string> | string

onRefine?

optional onRefine?: (_currentValue) => Promise<string> | string

Parameters

_currentValue

string

Returns

Promise<string> | string

onRemove?

optional onRemove?: () => void

Returns

void

refineContent?

optional refineContent?: ReactNode | ((args) => ReactNode)

required?

optional required?: boolean

showCharacterCount?

optional showCharacterCount?: boolean

warning?

optional warning?: string

---

BaseTextareaArgs

BaseTextareaArgs = object

Properties

containerClassName?

optional containerClassName?: string

customCountElement?

optional customCountElement?: ReactNode

description?

optional description?: string

descriptionInLabelTooltip?

optional descriptionInLabelTooltip?: boolean

dontEnforceMaxLength?

optional dontEnforceMaxLength?: boolean

error?

optional error?: string

helperText?

optional helperText?: string

hideLabel?

optional hideLabel?: boolean

label?

optional label?: string

maxLength?

optional maxLength?: number

maxRows?

optional maxRows?: number

minRows?

optional minRows?: number

onAiComplete?

optional onAiComplete?: () => Promise<string> | string

Returns

Promise<string> | string

onRefine?

optional onRefine?: (_currentValue) => Promise<string> | string

Parameters

_currentValue

string

Returns

Promise<string> | string

onRemove?

optional onRemove?: () => void

Returns

void

refineContent?

optional refineContent?: ReactNode | ((args) => ReactNode)

required?

optional required?: boolean

showCharacterCount?

optional showCharacterCount?: boolean

warning?

optional warning?: string

---

CountryOption

CountryOption = object

Properties

callingCode

callingCode: string

iso

iso: CountryCode

name?

optional name?: string

---

CountrySelectorProps

CountrySelectorProps = CountrySelectorSharedProps & object | CountrySelectorSharedProps & object

---

CountrySelectorSharedProps

CountrySelectorSharedProps = object

Properties

className?

optional className?: string

label?

optional label?: string

required?

optional required?: boolean

selectedCountryCodes

selectedCountryCodes: string[]

---

CurrencyInputArgs

CurrencyInputArgs = Omit<InputArgs, "variant"> & object

Type Declaration

currencySymbol

currencySymbol: string

---

InputArgs

InputArgs = Omit<ComponentProps<"input">, "size"> & VariantPropsOf<typeof inputConfig> & BaseInputArgs

---

InputDateArgs

InputDateArgs = object

Properties

align?

optional align?: "start" | "center" | "end"

className?

optional className?: string

disabled?

optional disabled?: boolean

maxDate?

optional maxDate?: Date

minDate?

optional minDate?: Date

onChange

onChange: (date) => void

Parameters

date

Date

Returns

void

selected?

optional selected?: Date

---

InputDateRangeProps

InputDateRangeProps = object

Properties

align?

optional align?: "center" | "start" | "end"

className?

optional className?: string

disabled?

optional disabled?: boolean

initialDateRange?

optional initialDateRange?: DateRange

maxDate?

optional maxDate?: Date

minDate?

optional minDate?: Date

onChange

onChange: (dateRange?) => void

Parameters

dateRange?

DateRange

Returns

void

showPresets?

optional showPresets?: boolean

testId?

optional testId?: string

---

InputDateTimeProps

InputDateTimeProps = object

Properties

align?

optional align?: "start" | "center" | "end"

className?

optional className?: string

disabled?

optional disabled?: boolean

id?

optional id?: string

maxDate?

optional maxDate?: Date

minDate?

optional minDate?: Date

onChange

onChange: (date) => void

Parameters

date

Date

Returns

void

selected?

optional selected?: Date

---

InputFileArgs

InputFileArgs = object

Properties

accept?

optional accept?: InputHTMLAttributes<HTMLInputElement>["accept"]

aspectRatio?

optional aspectRatio?: number

className?

optional className?: string

containerClassName?

optional containerClassName?: string

disabled?

optional disabled?: boolean

disablePreview?

optional disablePreview?: boolean

icon?

optional icon?: ComponentType<{ className?: string; }>

id

id: string

multiple?

optional multiple?: boolean

With onSelectMultiple, hands over the whole FileList in one call and skips the crop path.

onCropRequired?

optional onCropRequired?: (file, aspectRatio) => Promise<File>

Parameters

file

File

aspectRatio

number

Returns

Promise<File>

onSelect

onSelect: (file) => void

Parameters

file

File | undefined

Returns

void

onSelectMultiple?

optional onSelectMultiple?: (_files) => void

Parameters

_files

File[]

Returns

void

selected?

optional selected?: File

size?

optional size?: ButtonProps["size"]

text?

optional text?: string

variant?

optional variant?: ButtonProps["variant"]

---

InputGroupContextValue

InputGroupContextValue = object

Properties

registerInput

registerInput: (_id, _ref) => void

Parameters

_id

string

_ref

InputGroupInputRef

Returns

void

setInputFilled

setInputFilled: (_id, _filled) => void

Parameters

_id

string

_filled

boolean

Returns

void

unregisterInput

unregisterInput: (_id) => void

Parameters

_id

string

Returns

void

---

InputGroupInputRef

InputGroupInputRef = object

Properties

triggerAiComplete

triggerAiComplete: () => void

Returns

void

---

InputGroupProps

InputGroupProps = object

Properties

addLabel?

optional addLabel?: string

addNewTestId?

optional addNewTestId?: string

children

children: React.ReactNode

className?

optional className?: string

collapsible?

optional collapsible?: boolean

currentCount?

optional currentCount?: number

defaultCollapsed?

optional defaultCollapsed?: boolean

generateButtonTestId?

optional generateButtonTestId?: string

isLoading?

optional isLoading?: boolean | LoadingState

maxCount?

optional maxCount?: number

onAdd?

optional onAdd?: () => void

Returns

void

onAiComplete?

optional onAiComplete?: () => Promise<void>

Returns

Promise<void>

ref?

optional ref?: React.Ref<InputGroupRef>

refineButtonTestId?

optional refineButtonTestId?: string

refineContent?

optional refineContent?: React.ReactNode

title?

optional title?: string

---

InputGroupRef

InputGroupRef = object

Properties

triggerAiComplete

triggerAiComplete: () => void

Returns

void

---

InputNumericProps

InputNumericProps = object

Properties

aria-label?

optional aria-label?: string

className?

optional className?: string

disabled?

optional disabled?: boolean

max?

optional max?: number

min?

optional min?: number

onValueChange

onValueChange: (value) => void

Parameters

value

number

Returns

void

placeholder?

optional placeholder?: string

step?

optional step?: number

value

value: number

---

InputProps

InputProps = InputArgs

---

InputTagsProps

InputTagsProps = object

Properties

aria-label?

optional aria-label?: string

className?

optional className?: string

disabled?

optional disabled?: boolean

invalid?

optional invalid?: boolean

onChange

onChange: (value) => void

Parameters

value

string[]

Returns

void

placeholder?

optional placeholder?: string

size?

optional size?: InputTagsSize

value

value: string[]

---

InputTagsSize

InputTagsSize = "sm" | "base" | "lg"

---

InputTimeArgs

InputTimeArgs = object

Properties

align?

optional align?: "start" | "center" | "end"

className?

optional className?: string

disabled?

optional disabled?: boolean

maxDate?

optional maxDate?: Date

minDate?

optional minDate?: Date

onChange

onChange: (date) => void

Parameters

date

Date

Returns

void

selected?

optional selected?: Date

---

LoadingState

LoadingState = "refine" | "generate" | "remove"

---

MultiplierInputArgs

MultiplierInputArgs = Omit<InputArgs, "variant">

---

PhoneInputProps

PhoneInputProps = object

Properties

className?

optional className?: string

containerClassName?

optional containerClassName?: string

countries

countries: CountryOption[]

country?

optional country?: CountryOption

disabled?

optional disabled?: boolean

error?

optional error?: string

id?

optional id?: string

label?

optional label?: string | null

onChange

onChange: (phone, country, valid) => void

Parameters

phone

string

country

CountryOption

valid

boolean

Returns

void

parentClassName?

optional parentClassName?: string

required?

optional required?: boolean

value?

optional value?: string

---

RefineContentRenderArgs

RefineContentRenderArgs = object

Properties

onClose

onClose: () => void

Returns

void

setRefineLoading

setRefineLoading: (v) => void

Parameters

v

boolean

Returns

void

---

SearchInputArgs

SearchInputArgs = Omit<InputArgs, "variant">

---

TextareaArgs

TextareaArgs = Omit<ComponentProps<"textarea">, "size"> & VariantPropsOf<typeof textareaConfig> & BaseTextareaArgs

---

TextareaProps

TextareaProps = TextareaArgs

Variables

Input

const Input: ForwardRefExoticComponent<Omit<InputArgs, "ref"> & RefAttributes<HTMLInputElement>>

---

inputConfig

const inputConfig: object

Type Declaration

base

base: string[]

compoundVariants

compoundVariants: ({ className: "pl-8"; size: "xs"; variant: "search"; } | { className: "pl-8"; size: "sm"; variant: "search"; } | { className: "pl-8"; size: "default"; variant: "search"; } | { className: "pl-10"; size: "lg"; variant: "search"; } | { className: "!pl-10"; size: "xs"; variant: "currency"; } | { className: "!pl-11"; size: "sm"; variant: "currency"; } | { className: "!pl-12"; size: "default"; variant: "currency"; } | { className: "!pl-14"; size: "lg"; variant: "currency"; })[]

defaultVariants

defaultVariants: object

defaultVariants.size

readonly size: "default" = "default"

defaultVariants.variant

readonly variant: "text" = "text"

variants

variants: object

variants.size

size: object

variants.size.default

default: string = "px-3 py-2.5 typography-caption leading-[18px] h-10"

variants.size.lg

lg: string = "px-4 py-3 typography-body h-12"

variants.size.sm

sm: string = "px-3 py-2 typography-small h-8"

variants.size.xs

xs: string = "px-2 py-1.5 typography-small h-7"

variants.variant

variant: object

variants.variant.currency

currency: string = ""

variants.variant.multiplier

multiplier: string = "pr-9"

variants.variant.search

search: string = "pl-9"

variants.variant.text

text: string = ""

---

InputGroup

const InputGroup: ForwardRefExoticComponent<Omit<InputGroupProps, "ref"> & RefAttributes<InputGroupRef>>

---

Textarea

const Textarea: ForwardRefExoticComponent<Omit<TextareaArgs, "ref"> & RefAttributes<HTMLTextAreaElement>>

---

textareaConfig

const textareaConfig: object

Type Declaration

base

base: string[]

defaultVariants

defaultVariants: object

defaultVariants.size

readonly size: "default" = "default"

variants

variants: object

variants.size

size: object

variants.size.default

default: string = "px-3 pt-2 typography-caption"

variants.size.lg

lg: string = "px-4 pt-3 typography-body"

variants.size.sm

sm: string = "px-3 pt-2 typography-small"

variants.size.xs

xs: string = "px-2 pt-1.5 typography-small"

Functions

CountrySelector()

CountrySelector(props): Element

Parameters

props

CountrySelectorProps

Returns

Element

---

CurrencyInput()

CurrencyInput(props): Element

Parameters

props

CurrencyInputArgs

Returns

Element

---

getLast14DaysDateRange()

getLast14DaysDateRange(): DateRange

Returns

DateRange

---

getLast30DaysDateRange()

getLast30DaysDateRange(): DateRange

Returns

DateRange

---

InputDate()

InputDate(props): Element

Parameters

props

InputDateArgs

Returns

Element

---

InputDateRange()

InputDateRange(props): Element

Parameters

props

InputDateRangeProps

Returns

Element

---

InputDateTime()

InputDateTime(props): Element

Parameters

props

InputDateTimeProps

Returns

Element

---

InputFile()

InputFile(props): Element

Parameters

props

InputFileArgs

Returns

Element

---

InputNumeric()

InputNumeric(props): Element

Parameters

props

InputNumericProps

Returns

Element

---

InputTags()

InputTags(props): Element

Parameters

props

InputTagsProps

Returns

Element

---

InputTime()

InputTime(props): Element

Parameters

props

InputTimeArgs

Returns

Element

---

MultiplierInput()

MultiplierInput(props): Element

Parameters

props

MultiplierInputArgs

Returns

Element

---

PhoneInput()

PhoneInput(props): Element

Parameters

props

PhoneInputProps

Returns

Element

---

SearchInput()

SearchInput(props): Element

Parameters

props

SearchInputArgs

Returns

Element

---

useInputGroup()

useInputGroup(): InputGroupContextValue | null

Returns

InputGroupContextValue | null