@patreon/studio

import type { HTMLAttributes, ReactNode } from 'react'; import type { IconComponent } from '~/components/Icon/types'; import type { InlineHelpTextProps } from '~/components/InlineHelpText'; import type { BaseProps } from '~/types/component'; import type { Corners } from '~/types/corners'; import type { ValueOrResponsive } from '~/utilities/opaque-responsive'; type Size = 'sm' | 'md'; type TextAlign = 'left' | 'center' | 'right'; type InputType = 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'number' | 'date' | 'time' | 'datetime-local'; type DisabledVariant = 'default' | 'static'; type Variant = 'outlined' | 'solid' | 'transparent'; type BaseWithAria = BaseProps & Pick<React.AriaAttributes, 'aria-activedescendant' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'aria-owns' | 'aria-label'>; type Affix = string | JSX.Element | IconComponent; export interface TextInputBaseProps<T extends HTMLInputElement | HTMLTextAreaElement> extends BaseWithAria, Omit<InlineHelpTextProps, 'inputId'> { /** * Enables browser autocompletion. For a list of available autocompletion * options, view the * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) */ autoComplete?: string; /** * Indicates to the browser that the input should receive focus as soon as * it mounts. See * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus) */ autoFocus?: boolean; /** * Specifies border radius for button. Default is `rounded`. */ corners?: Corners; /** * Indicates the user should not be able to interact with the input. See * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefdisabled) */ disabled?: boolean; /** * Determines the styling when the input is disabled. */ disabledVariant?: DisabledVariant; /** * Hides the label from view and sets `aria-label` on the input for * accessibility. A label should always be provided. */ hideLabel?: boolean; /** * Sets `display: inline-block;` on the outer node for inline usage. */ inline?: boolean; /** * Sets the label for the input; required. To hide the label, see * `hideLabel` prop. */ label: ReactNode; /** * Sets a maximum number of characters for the input. When combined with * `characterCount`, displays the maximum number next to the current * character count. */ maxLength?: number; /** * Enables multiline editing and renders a <textarea> instead of an <input>. * Height automatically grows as the content grows. A number value specifies * the minimum height of the textarea by number of lines. A value of `true` * sets the minimum height to one line. */ multiline?: boolean | number; /** * A string specifying a name for the input control. This name is submitted * along with the control's value when the form data is submitted. */ name?: string; /** * Called when the input loses focus. */ onBlur?: () => void; /** * Called when the input is edited and loses focus. */ onChange: (e: React.ChangeEvent<T>) => void; /** * Called immediately when the input is edited. */ onInput?: (e: Pick<React.SyntheticEvent<T>, 'target'>) => void; /** * Called when the input receives focus. */ onFocus?: () => void; /** * Called when a keydown event occurs on the input. */ onKeyDown?: (e: React.KeyboardEvent<T>) => void; /** * Placeholder text for the input. Do not use for important information, as * it does not meet accessible contrast ratio. Use `label` and `helpText` * instead for important information. */ placeholder?: string; /** * Renders a text prefix to the left of the input, inside the styled box. */ prefix?: Affix; /** * Add an onClick to `prefix`. When supplied it will wrap the prefix with a button. */ prefixOnClick?: () => void; /** * Adds `aria-label` to the Prefix. Should always be defined when `prefixOnClick` is provided for our screenreader users. */ prefixLabel?: string; /** * Prevents edits to the input’s value. See * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) */ readOnly?: boolean; /** * Marks the input as required and appends an asterisk to the label. * * When set to `'no-indicator'`, the value is required, but an asterisk isn't displayed on the label. */ required?: boolean | 'no-indicator'; /** * Specifies the role of the input for screen readers. See * [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) */ role?: string; /** * Controls how the character count is displayed. If `maxLength` is specified, * displays the maximum count next to the current count. * - `none`: No character count is shown * - `label`: Character count is shown inline with the label * - `inline`: Character count is shown at the end of the input */ characterCount?: 'none' | 'label' | 'inline'; /** * @deprecated Use `characterCount="inline"` instead. This prop will be removed in a future version. * Shows the number of characters of `value` at the end of the input. If * `maxLength` is specified, displays the maximum count next to the current * count. */ showCharacterCount?: boolean; /** * @deprecated The `size` prop has been deprecated and is ignored. */ size?: ValueOrResponsive<Size>; /** * Indicates the browser should check for spelling errors. See * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck) */ spellCheck?: boolean; /** * Renders a text suffix to the right of the input, inside the styled box. */ suffix?: Affix; /** * Add an onClick to `suffix`. When supplied it will wrap the suffix with a button. */ suffixOnClick?: () => void; /** * Adds `aria-label` to the Suffix. Should always be defined when `suffixOnClick` is provided for our screenreader users. */ suffixLabel?: string; /** * Aligns the text inside the input. * @default 'left' */ textAlign?: TextAlign; /** * Specifies the type of data being used in the input. See * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types) */ type?: InputType; /** * Value of the input. Required as this is a controlled component. */ value: string | number; /** * Changes the width of the component. Number values interpreted as Units. * @default '100%' */ width?: number | '100%'; /** * Determines the input variant style. 'outlined', 'solid' or 'transparent' * @default 'solid' */ variant?: Variant; /** * Max height of a multiline `TextInput`. Inner content will scroll when this is set. */ maxHeight?: string; /** * Max value of the input. Only applies to number, date, month, time and week. See * [docs](https://www.w3schools.com/tags/att_input_min.asp) */ maxValue?: string; /** * min value of the input. Only applies to number, date, month, time and week. See * [docs](https://www.w3schools.com/tags/att_input_min.asp) */ minValue?: string; /** * Specifies the interval between legal numbers. Only applies to number, date, month, time and week. * The step attribute can be used together with the max and min attributes to create a range of legal values. * See [docs](https://www.w3schools.com/tags/att_input_step.asp) */ step?: number | string; /** * Provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display. */ inputMode?: HTMLAttributes<T>['inputMode']; /** * Optional ref to the input element container. This is useful for positioning overlays to the input element. */ containerRef?: React.RefObject<HTMLDivElement>; } export type TextInputProps = TextInputBaseProps<HTMLInputElement | HTMLTextAreaElement>; type SingleLineInputProps = TextInputBaseProps<HTMLInputElement> & { multiline?: false; }; type MultiLineInputProps = TextInputBaseProps<HTMLTextAreaElement> & { multiline: true | number; }; export type TextInputComponentProps = SingleLineInputProps | MultiLineInputProps; export {};