@patreon/studio
Version:
Patreon Studio Design System
215 lines (214 loc) • 8.27 kB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
import type { BaseProps } from '../../types/component';
import type { Corners } from '../../types/corners';
import type { ValueOrResponsive } from '../../utilities/opaque-responsive';
import type { IconComponent } from '../Icon/types';
import type { InlineHelpTextProps } from '../InlineHelpText';
declare type Size = 'sm' | 'md';
declare type TextAlign = 'left' | 'center' | 'right';
declare type InputType = 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'number' | 'date' | 'time' | 'datetime-local';
declare type DisabledVariant = 'default' | 'static';
declare type Variant = 'outlined' | 'solid' | 'transparent';
declare type BaseWithAria = BaseProps & Pick<React.AriaAttributes, 'aria-activedescendant' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'aria-owns' | 'aria-label'>;
declare 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
* `showCharacterCount`, 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: Pick<React.ChangeEvent<T>, 'target'>) => 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;
/**
* 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 declare type TextInputProps = TextInputBaseProps<HTMLInputElement | HTMLTextAreaElement>;
declare type SingleLineInputProps = TextInputBaseProps<HTMLInputElement> & {
multiline?: false;
};
declare type MultiLineInputProps = TextInputBaseProps<HTMLTextAreaElement> & {
multiline: true | number;
};
export declare type TextInputComponentProps = SingleLineInputProps | MultiLineInputProps;
export {};