1 | /*
|
2 | * Copyright 2020 Adobe. All rights reserved.
|
3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
4 | * you may not use this file except in compliance with the License. You may obtain a copy
|
5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0
|
6 | *
|
7 | * Unless required by applicable law or agreed to in writing, software distributed under
|
8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
9 | * OF ANY KIND, either express or implied. See the License for the specific language
|
10 | * governing permissions and limitations under the License.
|
11 | */
|
12 |
|
13 | import {
|
14 | AriaAttributes,
|
15 | AriaRole,
|
16 | ClipboardEventHandler,
|
17 | CompositionEventHandler,
|
18 | CSSProperties,
|
19 | FormEventHandler,
|
20 | DOMAttributes as ReactDOMAttributes,
|
21 | ReactEventHandler
|
22 | } from 'react';
|
23 |
|
24 | export interface AriaLabelingProps {
|
25 | /**
|
26 | * Defines a string value that labels the current element.
|
27 | */
|
28 | 'aria-label'?: string,
|
29 |
|
30 | /**
|
31 | * Identifies the element (or elements) that labels the current element.
|
32 | */
|
33 | 'aria-labelledby'?: string,
|
34 |
|
35 | /**
|
36 | * Identifies the element (or elements) that describes the object.
|
37 | */
|
38 | 'aria-describedby'?: string,
|
39 |
|
40 | /**
|
41 | * Identifies the element (or elements) that provide a detailed, extended description for the object.
|
42 | */
|
43 | 'aria-details'?: string
|
44 | }
|
45 |
|
46 | export interface AriaValidationProps {
|
47 | // https://www.w3.org/TR/wai-aria-1.2/#aria-errormessage
|
48 | /**
|
49 | * Identifies the element that provides an error message for the object.
|
50 | */
|
51 | 'aria-errormessage'?: string
|
52 | }
|
53 |
|
54 | // A set of common DOM props that are allowed on any component
|
55 | // Ensure this is synced with DOMPropNames in filterDOMProps
|
56 | export interface DOMProps {
|
57 | /**
|
58 | * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
|
59 | */
|
60 | id?: string
|
61 | }
|
62 |
|
63 | export interface FocusableDOMProps extends DOMProps {
|
64 | /**
|
65 | * Whether to exclude the element from the sequential tab order. If true,
|
66 | * the element will not be focusable via the keyboard by tabbing. This should
|
67 | * be avoided except in rare scenarios where an alternative means of accessing
|
68 | * the element or its functionality via the keyboard is available.
|
69 | */
|
70 | excludeFromTabOrder?: boolean
|
71 | }
|
72 |
|
73 |
|
74 | export interface TextInputDOMEvents {
|
75 | // Clipboard events
|
76 | /**
|
77 | * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
|
78 | */
|
79 | onCopy?: ClipboardEventHandler<HTMLInputElement>,
|
80 |
|
81 | /**
|
82 | * Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
|
83 | */
|
84 | onCut?: ClipboardEventHandler<HTMLInputElement>,
|
85 |
|
86 | /**
|
87 | * Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
|
88 | */
|
89 | onPaste?: ClipboardEventHandler<HTMLInputElement>,
|
90 |
|
91 | // Composition events
|
92 | /**
|
93 | * Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
|
94 | */
|
95 | onCompositionStart?: CompositionEventHandler<HTMLInputElement>,
|
96 |
|
97 | /**
|
98 | * Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
|
99 | */
|
100 | onCompositionEnd?: CompositionEventHandler<HTMLInputElement>,
|
101 |
|
102 | /**
|
103 | * Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
|
104 | */
|
105 | onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>,
|
106 |
|
107 | // Selection events
|
108 | /**
|
109 | * Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
|
110 | */
|
111 | onSelect?: ReactEventHandler<HTMLInputElement>,
|
112 |
|
113 | // Input events
|
114 | /**
|
115 | * Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
|
116 | */
|
117 | onBeforeInput?: FormEventHandler<HTMLInputElement>,
|
118 | /**
|
119 | * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
|
120 | */
|
121 | onInput?: FormEventHandler<HTMLInputElement>
|
122 | }
|
123 |
|
124 | // DOM props that apply to all text inputs
|
125 | // Ensure this is synced with useTextField
|
126 | export interface TextInputDOMProps extends DOMProps, TextInputDOMEvents {
|
127 | /**
|
128 | * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
|
129 | */
|
130 | autoComplete?: string,
|
131 |
|
132 | /**
|
133 | * The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).
|
134 | */
|
135 | maxLength?: number,
|
136 |
|
137 | /**
|
138 | * The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).
|
139 | */
|
140 | minLength?: number,
|
141 |
|
142 | /**
|
143 | * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
|
144 | */
|
145 | name?: string,
|
146 |
|
147 | /**
|
148 | * Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).
|
149 | */
|
150 | pattern?: string,
|
151 |
|
152 | /**
|
153 | * Content that appears in the input when it is empty. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder).
|
154 | */
|
155 | placeholder?: string,
|
156 |
|
157 | /**
|
158 | * The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
|
159 | */
|
160 | type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {}),
|
161 |
|
162 | /**
|
163 | * Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
|
164 | */
|
165 | inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
|
166 | }
|
167 |
|
168 | /** Any focusable element, including both HTML and SVG elements. */
|
169 | export interface FocusableElement extends Element, HTMLOrSVGElement {}
|
170 |
|
171 | /** All DOM attributes supported across both HTML and SVG elements. */
|
172 | export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, ReactDOMAttributes<T> {
|
173 | id?: string | undefined,
|
174 | role?: AriaRole | undefined,
|
175 | tabIndex?: number | undefined,
|
176 | style?: CSSProperties | undefined,
|
177 | className?: string | undefined
|
178 | }
|