1 | /*
|
2 | * Copyright 2020 Ladifire. 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 {ClipboardEventHandler, CompositionEventHandler, FormEventHandler, ReactEventHandler} from 'react';
|
14 |
|
15 | export interface AriaLabelingProps {
|
16 | /**
|
17 | * Defines a string value that labels the current element.
|
18 | */
|
19 | 'aria-label'?: string,
|
20 |
|
21 | /**
|
22 | * Identifies the element (or elements) that labels the current element.
|
23 | */
|
24 | 'aria-labelledby'?: string,
|
25 |
|
26 | /**
|
27 | * Identifies the element (or elements) that describes the object.
|
28 | */
|
29 | 'aria-describedby'?: string,
|
30 |
|
31 | /**
|
32 | * Identifies the element (or elements) that provide a detailed, extended description for the object.
|
33 | */
|
34 | 'aria-details'?: string
|
35 | }
|
36 |
|
37 | export interface AriaValidationProps {
|
38 | // https://www.w3.org/TR/wai-aria-1.2/#aria-errormessage
|
39 | /**
|
40 | * Identifies the element that provides an error message for the object.
|
41 | */
|
42 | 'aria-errormessage'?: string
|
43 | }
|
44 |
|
45 | // A set of common DOM props that are allowed on any component
|
46 | // Ensure this is synced with DOMPropNames in filterDOMProps
|
47 | export interface DOMProps {
|
48 | /**
|
49 | * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
|
50 | */
|
51 | id?: string
|
52 | }
|
53 |
|
54 | export interface FocusableDOMProps extends DOMProps {
|
55 | /**
|
56 | * Whether to exclude the element from the sequential tab order. If true,
|
57 | * the element will not be focusable via the keyboard by tabbing. This should
|
58 | * be avoided except in rare scenarios where an alternative means of accessing
|
59 | * the element or its functionality via the keyboard is available.
|
60 | */
|
61 | excludeFromTabOrder?: boolean
|
62 | }
|
63 |
|
64 | // DOM props that apply to all text inputs
|
65 | // Ensure this is synced with useTextField
|
66 | export interface TextInputDOMProps extends DOMProps {
|
67 | /**
|
68 | * 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).
|
69 | */
|
70 | autoComplete?: string,
|
71 |
|
72 | /**
|
73 | * The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).
|
74 | */
|
75 | maxLength?: number,
|
76 |
|
77 | /**
|
78 | * The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).
|
79 | */
|
80 | minLength?: number,
|
81 |
|
82 | /**
|
83 | * 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).
|
84 | */
|
85 | name?: string,
|
86 |
|
87 | /**
|
88 | * 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).
|
89 | */
|
90 | pattern?: string,
|
91 |
|
92 | /**
|
93 | * Content that appears in the input when it is empty. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder).
|
94 | */
|
95 | placeholder?: string,
|
96 |
|
97 | /**
|
98 | * The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
|
99 | */
|
100 | type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | string,
|
101 |
|
102 | /**
|
103 | * 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).
|
104 | */
|
105 | inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search',
|
106 |
|
107 | // Clipboard events
|
108 | /**
|
109 | * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
|
110 | */
|
111 | onCopy?: ClipboardEventHandler<HTMLInputElement>,
|
112 |
|
113 | /**
|
114 | * Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
|
115 | */
|
116 | onCut?: ClipboardEventHandler<HTMLInputElement>,
|
117 |
|
118 | /**
|
119 | * Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
|
120 | */
|
121 | onPaste?: ClipboardEventHandler<HTMLInputElement>,
|
122 |
|
123 | // Composition events
|
124 | /**
|
125 | * 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/compositionend_event).
|
126 | */
|
127 | onCompositionEnd?: CompositionEventHandler<HTMLInputElement>,
|
128 |
|
129 | /**
|
130 | * 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/compositionstart_event).
|
131 | */
|
132 | onCompositionStart?: CompositionEventHandler<HTMLInputElement>,
|
133 |
|
134 | /**
|
135 | * 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).
|
136 | */
|
137 | onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>,
|
138 |
|
139 | // Selection events
|
140 | /**
|
141 | * 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).
|
142 | */
|
143 | onSelect?: ReactEventHandler<HTMLInputElement>,
|
144 |
|
145 | // Input events
|
146 | /**
|
147 | * 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).
|
148 | */
|
149 | onBeforeInput?: FormEventHandler<HTMLInputElement>,
|
150 | /**
|
151 | * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
|
152 | */
|
153 | onInput?: FormEventHandler<HTMLInputElement>
|
154 | }
|