@acusti/dropdown 0.17.0 → 0.18.2-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Dropdown.d.ts +33 -0
- package/dist/Dropdown.js +419 -0
- package/dist/Dropdown.js.flow +58 -0
- package/dist/Dropdown.js.map +1 -0
- package/dist/helpers.d.ts +33 -0
- package/dist/helpers.js +131 -0
- package/dist/helpers.js.flow +50 -0
- package/dist/helpers.js.map +1 -0
- package/dist/styles.d.ts +11 -0
- package/dist/styles.js +80 -0
- package/dist/styles.js.flow +18 -0
- package/dist/styles.js.map +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export declare type Item = {
|
|
3
|
+
element: HTMLElement | null;
|
|
4
|
+
value: string;
|
|
5
|
+
};
|
|
6
|
+
export declare type Props = {
|
|
7
|
+
/** Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true */
|
|
8
|
+
allowEmpty?: boolean;
|
|
9
|
+
/** Can take a single React element (e.g. ReactChild) or exactly two renderable children */
|
|
10
|
+
children: React.ReactChild | [React.ReactNode, React.ReactNode];
|
|
11
|
+
className?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Group identifier string links dropdowns together into a menu (like macOS top menubar) */
|
|
14
|
+
group?: string;
|
|
15
|
+
hasItems?: boolean;
|
|
16
|
+
isOpenOnMount?: boolean;
|
|
17
|
+
isSearchable?: boolean;
|
|
18
|
+
label?: string;
|
|
19
|
+
/** Only usable in conjunction with {isSearchable: true}; used as search input’s name */
|
|
20
|
+
name?: string;
|
|
21
|
+
onSubmitItem?: (payload: Item) => void;
|
|
22
|
+
/** Only usable in conjunction with {isSearchable: true}; used as search input’s placeholder */
|
|
23
|
+
placeholder?: string;
|
|
24
|
+
/** Only usable in conjunction with {isSearchable: true}; used as search input’s tabIndex */
|
|
25
|
+
tabIndex?: number;
|
|
26
|
+
/**
|
|
27
|
+
* Used as search input’s value if props.isSearchable === true
|
|
28
|
+
* Used to determine if value has changed to avoid triggering onSubmitItem if not
|
|
29
|
+
*/
|
|
30
|
+
value?: string;
|
|
31
|
+
};
|
|
32
|
+
declare const Dropdown: React.FC<Props>;
|
|
33
|
+
export default Dropdown;
|
package/dist/Dropdown.js
ADDED
|
@@ -0,0 +1,419 @@
|
|
|
1
|
+
// TODO add mouseout event handler to check event.target and clear active element
|
|
2
|
+
// whenever mouse leaves it
|
|
3
|
+
import InputText from '@acusti/input-text';
|
|
4
|
+
import { Style } from '@acusti/styling';
|
|
5
|
+
import useIsOutOfBounds from '@acusti/use-is-out-of-bounds';
|
|
6
|
+
import classnames from 'classnames';
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
import { BODY_CLASS_NAME, BODY_SELECTOR, LABEL_CLASS_NAME, LABEL_TEXT_CLASS_NAME, ROOT_CLASS_NAME, STYLES, TRIGGER_CLASS_NAME, } from './styles.js';
|
|
9
|
+
import { getActiveItemElement, getItemElements, ITEM_SELECTOR, KEY_EVENT_ELEMENTS, setActiveItem, } from './helpers.js';
|
|
10
|
+
const { Children, Fragment, useCallback, useLayoutEffect, useRef, useState } = React;
|
|
11
|
+
const noop = () => { };
|
|
12
|
+
const CHILDREN_ERROR = '@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.';
|
|
13
|
+
const Dropdown = ({ allowEmpty = true, children, className, disabled, hasItems = true, isOpenOnMount, isSearchable, label, name, onSubmitItem, placeholder, tabIndex, value, }) => {
|
|
14
|
+
const childrenCount = Children.count(children);
|
|
15
|
+
if (childrenCount !== 1 && childrenCount !== 2) {
|
|
16
|
+
if (childrenCount === 0) {
|
|
17
|
+
throw new Error(CHILDREN_ERROR + ' Received no children.');
|
|
18
|
+
}
|
|
19
|
+
console.error(`${CHILDREN_ERROR} Received ${childrenCount} children.`);
|
|
20
|
+
}
|
|
21
|
+
let trigger = childrenCount > 1 ? children[0] : null;
|
|
22
|
+
const isTriggerFromProps = React.isValidElement(trigger);
|
|
23
|
+
const [isOpen, setIsOpen] = useState(isOpenOnMount || false);
|
|
24
|
+
const [isOpening, setIsOpening] = useState(!isOpenOnMount);
|
|
25
|
+
const [dropdownBodyElement, setDropdownBodyElement] = useState(null);
|
|
26
|
+
const dropdownElementRef = useRef(null);
|
|
27
|
+
const inputElementRef = useRef(null);
|
|
28
|
+
const closingTimerRef = useRef(null);
|
|
29
|
+
const isOpeningTimerRef = useRef(null);
|
|
30
|
+
const currentInputMethodRef = useRef('mouse');
|
|
31
|
+
const clearEnteredCharactersTimerRef = useRef(null);
|
|
32
|
+
const enteredCharactersRef = useRef('');
|
|
33
|
+
const mouseDownPositionRef = useRef(null);
|
|
34
|
+
const outOfBounds = useIsOutOfBounds(dropdownBodyElement);
|
|
35
|
+
const allowEmptyRef = useRef(allowEmpty);
|
|
36
|
+
const hasItemsRef = useRef(hasItems);
|
|
37
|
+
const isOpenRef = useRef(isOpen);
|
|
38
|
+
const isOpeningRef = useRef(isOpening);
|
|
39
|
+
const isTriggerFromPropsRef = useRef(isOpening);
|
|
40
|
+
const onSubmitItemRef = useRef(onSubmitItem);
|
|
41
|
+
const valueRef = useRef(value);
|
|
42
|
+
useLayoutEffect(() => {
|
|
43
|
+
allowEmptyRef.current = allowEmpty;
|
|
44
|
+
hasItemsRef.current = hasItems;
|
|
45
|
+
isOpenRef.current = isOpen;
|
|
46
|
+
isOpeningRef.current = isOpening;
|
|
47
|
+
isTriggerFromPropsRef.current = isTriggerFromProps;
|
|
48
|
+
onSubmitItemRef.current = onSubmitItem;
|
|
49
|
+
valueRef.current = value;
|
|
50
|
+
}, [
|
|
51
|
+
allowEmpty,
|
|
52
|
+
hasItems,
|
|
53
|
+
isOpen,
|
|
54
|
+
isOpening,
|
|
55
|
+
isTriggerFromProps,
|
|
56
|
+
onSubmitItem,
|
|
57
|
+
value,
|
|
58
|
+
]);
|
|
59
|
+
const closeDropdown = useCallback(() => {
|
|
60
|
+
setIsOpen(false);
|
|
61
|
+
setIsOpening(false);
|
|
62
|
+
mouseDownPositionRef.current = null;
|
|
63
|
+
if (closingTimerRef.current) {
|
|
64
|
+
clearTimeout(closingTimerRef.current);
|
|
65
|
+
closingTimerRef.current = null;
|
|
66
|
+
}
|
|
67
|
+
}, []);
|
|
68
|
+
const handleSubmitItem = useCallback(() => {
|
|
69
|
+
var _a;
|
|
70
|
+
if (isOpenRef.current) {
|
|
71
|
+
// A short timeout before closing is better UX when user selects an item so dropdown
|
|
72
|
+
// doesn’t close before expected. It also enables using <Link />s in the dropdown body.
|
|
73
|
+
closingTimerRef.current = setTimeout(closeDropdown, 90);
|
|
74
|
+
}
|
|
75
|
+
if (!hasItemsRef.current)
|
|
76
|
+
return;
|
|
77
|
+
const nextElement = getActiveItemElement(dropdownElementRef.current);
|
|
78
|
+
if (!nextElement) {
|
|
79
|
+
// If not allowEmpty, don’t allow submitting an empty item
|
|
80
|
+
if (!allowEmptyRef.current)
|
|
81
|
+
return;
|
|
82
|
+
// If we have an input element as trigger & the user didn’t clear the text, do nothing
|
|
83
|
+
if ((_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.value)
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
const label = (nextElement === null || nextElement === void 0 ? void 0 : nextElement.innerText) || '';
|
|
87
|
+
const nextValue = (nextElement === null || nextElement === void 0 ? void 0 : nextElement.dataset.uktValue) || label;
|
|
88
|
+
const nextItem = { element: nextElement, value: nextValue };
|
|
89
|
+
if (inputElementRef.current) {
|
|
90
|
+
inputElementRef.current.value = label;
|
|
91
|
+
if (inputElementRef.current ===
|
|
92
|
+
inputElementRef.current.ownerDocument.activeElement) {
|
|
93
|
+
inputElementRef.current.blur();
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
// If parent is controlling Dropdown via props.value and nextValue is the same, do nothing
|
|
97
|
+
if (valueRef.current && valueRef.current === nextValue)
|
|
98
|
+
return;
|
|
99
|
+
if (onSubmitItemRef.current) {
|
|
100
|
+
onSubmitItemRef.current(nextItem);
|
|
101
|
+
}
|
|
102
|
+
}, [closeDropdown]);
|
|
103
|
+
const handleMouseMove = useCallback(({ clientX, clientY }) => {
|
|
104
|
+
currentInputMethodRef.current = 'mouse';
|
|
105
|
+
const initialPosition = mouseDownPositionRef.current;
|
|
106
|
+
if (!initialPosition)
|
|
107
|
+
return;
|
|
108
|
+
if (Math.abs(initialPosition.clientX - clientX) < 12 &&
|
|
109
|
+
Math.abs(initialPosition.clientY - clientY) < 12) {
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
setIsOpening(false);
|
|
113
|
+
}, []);
|
|
114
|
+
const handleMouseOver = useCallback((event) => {
|
|
115
|
+
if (!hasItemsRef.current)
|
|
116
|
+
return;
|
|
117
|
+
// If user isn’t currently using the mouse to navigate the dropdown, do nothing
|
|
118
|
+
if (currentInputMethodRef.current !== 'mouse')
|
|
119
|
+
return;
|
|
120
|
+
// Ensure we have the dropdown root HTMLElement
|
|
121
|
+
const dropdownElement = dropdownElementRef.current;
|
|
122
|
+
if (!dropdownElement)
|
|
123
|
+
return;
|
|
124
|
+
const itemElements = getItemElements(dropdownElement);
|
|
125
|
+
if (!itemElements)
|
|
126
|
+
return;
|
|
127
|
+
const eventTarget = event.target;
|
|
128
|
+
const item = eventTarget.closest(ITEM_SELECTOR);
|
|
129
|
+
const element = item || eventTarget;
|
|
130
|
+
for (let index = 0; index < itemElements.length; index++) {
|
|
131
|
+
if (itemElements[index] === element) {
|
|
132
|
+
setActiveItem({
|
|
133
|
+
dropdownElement,
|
|
134
|
+
element,
|
|
135
|
+
});
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}, []);
|
|
140
|
+
const cleanupEventListenersRef = useRef(noop);
|
|
141
|
+
const handleRef = useCallback((ref) => {
|
|
142
|
+
dropdownElementRef.current = ref;
|
|
143
|
+
if (!ref) {
|
|
144
|
+
// If component was unmounted, cleanup handlers
|
|
145
|
+
cleanupEventListenersRef.current();
|
|
146
|
+
cleanupEventListenersRef.current = noop;
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
const { ownerDocument } = ref;
|
|
150
|
+
let inputElement = inputElementRef.current;
|
|
151
|
+
// Check if trigger from props is an input or textarea element
|
|
152
|
+
if (isTriggerFromProps && !inputElement && ref.firstElementChild) {
|
|
153
|
+
inputElement = ref.firstElementChild.querySelector('input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea');
|
|
154
|
+
inputElementRef.current = inputElement;
|
|
155
|
+
}
|
|
156
|
+
const handleMouseDown = ({ clientX, clientY, target }) => {
|
|
157
|
+
const eventTarget = target;
|
|
158
|
+
if (dropdownElementRef.current &&
|
|
159
|
+
!dropdownElementRef.current.contains(eventTarget)) {
|
|
160
|
+
// Close dropdown on an outside click
|
|
161
|
+
closeDropdown();
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
if (isOpenRef.current)
|
|
165
|
+
return;
|
|
166
|
+
setIsOpen(true);
|
|
167
|
+
setIsOpening(true);
|
|
168
|
+
mouseDownPositionRef.current = { clientX, clientY };
|
|
169
|
+
isOpeningTimerRef.current = setTimeout(() => {
|
|
170
|
+
setIsOpening(false);
|
|
171
|
+
isOpeningTimerRef.current = null;
|
|
172
|
+
}, 1000);
|
|
173
|
+
};
|
|
174
|
+
const handleMouseUp = ({ target }) => {
|
|
175
|
+
if (!isOpenRef.current || closingTimerRef.current)
|
|
176
|
+
return;
|
|
177
|
+
// If still isOpening (gets set false 1s after open triggers), set it to false onMouseUp
|
|
178
|
+
if (isOpeningRef.current) {
|
|
179
|
+
setIsOpening(false);
|
|
180
|
+
if (isOpeningTimerRef.current) {
|
|
181
|
+
clearTimeout(isOpeningTimerRef.current);
|
|
182
|
+
isOpeningTimerRef.current = null;
|
|
183
|
+
}
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
const isTargetInBody = target.closest(BODY_SELECTOR);
|
|
187
|
+
// If mouseup is on dropdown body and there are no items, don’t close the dropdown
|
|
188
|
+
if (!hasItemsRef.current && isTargetInBody)
|
|
189
|
+
return;
|
|
190
|
+
// If mouseup is on an item, trigger submit item, else close the dropdown
|
|
191
|
+
if (isTargetInBody) {
|
|
192
|
+
handleSubmitItem();
|
|
193
|
+
}
|
|
194
|
+
else if (!inputElementRef.current ||
|
|
195
|
+
(dropdownElementRef.current &&
|
|
196
|
+
dropdownElementRef.current.contains(ownerDocument.activeElement))) {
|
|
197
|
+
// If dropdown is searchable and ref is still focused, this won’t be invoked
|
|
198
|
+
closeDropdown();
|
|
199
|
+
}
|
|
200
|
+
};
|
|
201
|
+
const handleKeyDown = (event) => {
|
|
202
|
+
const { altKey, ctrlKey, key, metaKey } = event;
|
|
203
|
+
const eventTarget = event.target;
|
|
204
|
+
const dropdownElement = dropdownElementRef.current;
|
|
205
|
+
if (!dropdownElement)
|
|
206
|
+
return;
|
|
207
|
+
const onEventHandled = () => {
|
|
208
|
+
event.stopPropagation();
|
|
209
|
+
event.preventDefault();
|
|
210
|
+
currentInputMethodRef.current = 'keyboard';
|
|
211
|
+
};
|
|
212
|
+
const isEventTargetingDropdown = dropdownElement.contains(eventTarget);
|
|
213
|
+
if (!isOpenRef.current) {
|
|
214
|
+
// If dropdown is closed, don’t handle key events if event target isn’t within dropdown
|
|
215
|
+
if (!isEventTargetingDropdown)
|
|
216
|
+
return;
|
|
217
|
+
// Open the dropdown on spacebar, enter, or if isSearchable and user hits the up/down arrows
|
|
218
|
+
if (key === ' ' ||
|
|
219
|
+
key === 'Enter' ||
|
|
220
|
+
(hasItemsRef.current &&
|
|
221
|
+
(key === 'ArrowUp' || key === 'ArrowDown'))) {
|
|
222
|
+
onEventHandled();
|
|
223
|
+
setIsOpen(true);
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
// If dropdown isOpen, hasItems, and not isSearchable, handle entering characters
|
|
229
|
+
if (hasItemsRef.current && !inputElementRef.current) {
|
|
230
|
+
let isEditingCharacters = !ctrlKey && !metaKey && /^[A-Za-z0-9]$/.test(key);
|
|
231
|
+
// User could also be editing characters if there are already characters entered
|
|
232
|
+
// and they are hitting delete or spacebar
|
|
233
|
+
if (!isEditingCharacters && enteredCharactersRef.current) {
|
|
234
|
+
isEditingCharacters = key === ' ' || key === 'Backspace';
|
|
235
|
+
}
|
|
236
|
+
if (isEditingCharacters) {
|
|
237
|
+
onEventHandled();
|
|
238
|
+
if (key === 'Backspace') {
|
|
239
|
+
enteredCharactersRef.current =
|
|
240
|
+
enteredCharactersRef.current.slice(0, -1);
|
|
241
|
+
}
|
|
242
|
+
else {
|
|
243
|
+
enteredCharactersRef.current += key;
|
|
244
|
+
}
|
|
245
|
+
setActiveItem({
|
|
246
|
+
dropdownElement,
|
|
247
|
+
// If input element came from props, only override the input’s value
|
|
248
|
+
// with an exact text match so user can enter a value not in items
|
|
249
|
+
isExactMatch: isTriggerFromPropsRef.current,
|
|
250
|
+
text: enteredCharactersRef.current,
|
|
251
|
+
});
|
|
252
|
+
if (clearEnteredCharactersTimerRef.current) {
|
|
253
|
+
clearTimeout(clearEnteredCharactersTimerRef.current);
|
|
254
|
+
}
|
|
255
|
+
clearEnteredCharactersTimerRef.current = setTimeout(() => {
|
|
256
|
+
enteredCharactersRef.current = '';
|
|
257
|
+
clearEnteredCharactersTimerRef.current = null;
|
|
258
|
+
}, 1500);
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
// If dropdown isOpen, handle submitting the value
|
|
263
|
+
if (key === 'Enter' || (key === ' ' && !inputElementRef.current)) {
|
|
264
|
+
onEventHandled();
|
|
265
|
+
handleSubmitItem();
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
// If dropdown isOpen, handle closing it on escape or spacebar if !hasItems
|
|
269
|
+
if (key === 'Escape' ||
|
|
270
|
+
(isEventTargetingDropdown && key === ' ' && !hasItemsRef.current)) {
|
|
271
|
+
// If there are no items & event target element uses key events, don’t close it
|
|
272
|
+
if (!hasItemsRef.current &&
|
|
273
|
+
(eventTarget.isContentEditable ||
|
|
274
|
+
KEY_EVENT_ELEMENTS.has(eventTarget.tagName))) {
|
|
275
|
+
return;
|
|
276
|
+
}
|
|
277
|
+
closeDropdown();
|
|
278
|
+
return;
|
|
279
|
+
}
|
|
280
|
+
// Handle ↑/↓ arrows
|
|
281
|
+
if (hasItemsRef.current) {
|
|
282
|
+
if (key === 'ArrowUp') {
|
|
283
|
+
onEventHandled();
|
|
284
|
+
if (altKey || metaKey) {
|
|
285
|
+
setActiveItem({
|
|
286
|
+
dropdownElement,
|
|
287
|
+
index: 0,
|
|
288
|
+
});
|
|
289
|
+
}
|
|
290
|
+
else {
|
|
291
|
+
setActiveItem({
|
|
292
|
+
dropdownElement,
|
|
293
|
+
indexAddend: -1,
|
|
294
|
+
});
|
|
295
|
+
}
|
|
296
|
+
return;
|
|
297
|
+
}
|
|
298
|
+
if (key === 'ArrowDown') {
|
|
299
|
+
onEventHandled();
|
|
300
|
+
if (altKey || metaKey) {
|
|
301
|
+
// Using a negative index counts back from the end
|
|
302
|
+
setActiveItem({
|
|
303
|
+
dropdownElement,
|
|
304
|
+
index: -1,
|
|
305
|
+
});
|
|
306
|
+
}
|
|
307
|
+
else {
|
|
308
|
+
setActiveItem({
|
|
309
|
+
dropdownElement,
|
|
310
|
+
indexAddend: 1,
|
|
311
|
+
});
|
|
312
|
+
}
|
|
313
|
+
return;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
};
|
|
317
|
+
// Close dropdown if any element is focused outside of this dropdown
|
|
318
|
+
const handleFocusIn = (event) => {
|
|
319
|
+
if (!isOpenRef.current)
|
|
320
|
+
return;
|
|
321
|
+
const eventTarget = event.target;
|
|
322
|
+
// If focused element is a descendant or a parent of the dropdown, do nothing
|
|
323
|
+
if (!dropdownElementRef.current ||
|
|
324
|
+
dropdownElementRef.current.contains(eventTarget) ||
|
|
325
|
+
eventTarget.contains(dropdownElementRef.current)) {
|
|
326
|
+
return;
|
|
327
|
+
}
|
|
328
|
+
closeDropdown();
|
|
329
|
+
};
|
|
330
|
+
document.addEventListener('focusin', handleFocusIn);
|
|
331
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
332
|
+
document.addEventListener('mousedown', handleMouseDown);
|
|
333
|
+
document.addEventListener('mouseup', handleMouseUp);
|
|
334
|
+
if (ownerDocument !== document) {
|
|
335
|
+
ownerDocument.addEventListener('focusin', handleFocusIn);
|
|
336
|
+
ownerDocument.addEventListener('keydown', handleKeyDown);
|
|
337
|
+
ownerDocument.addEventListener('mousedown', handleMouseDown);
|
|
338
|
+
ownerDocument.addEventListener('mouseup', handleMouseUp);
|
|
339
|
+
}
|
|
340
|
+
// If dropdown should be open on mount, focus it
|
|
341
|
+
if (isOpenOnMount) {
|
|
342
|
+
ref.focus();
|
|
343
|
+
}
|
|
344
|
+
const handleInput = (event) => {
|
|
345
|
+
const dropdownElement = dropdownElementRef.current;
|
|
346
|
+
if (!dropdownElement)
|
|
347
|
+
return;
|
|
348
|
+
if (!isOpenRef.current)
|
|
349
|
+
setIsOpen(true);
|
|
350
|
+
const input = event.target;
|
|
351
|
+
const isDeleting = enteredCharactersRef.current.length > input.value.length;
|
|
352
|
+
enteredCharactersRef.current = input.value;
|
|
353
|
+
// Don’t set a new active item if user is deleting text unless text is now empty
|
|
354
|
+
if (isDeleting && input.value.length)
|
|
355
|
+
return;
|
|
356
|
+
setActiveItem({
|
|
357
|
+
dropdownElement,
|
|
358
|
+
// If input element came from props, only override the input’s value
|
|
359
|
+
// with an exact text match so user can enter a value not in items
|
|
360
|
+
isExactMatch: isTriggerFromPropsRef.current,
|
|
361
|
+
text: enteredCharactersRef.current,
|
|
362
|
+
});
|
|
363
|
+
};
|
|
364
|
+
if (inputElement) {
|
|
365
|
+
inputElement.addEventListener('input', handleInput);
|
|
366
|
+
}
|
|
367
|
+
cleanupEventListenersRef.current = () => {
|
|
368
|
+
document.removeEventListener('focusin', handleFocusIn);
|
|
369
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
370
|
+
document.removeEventListener('mousedown', handleMouseDown);
|
|
371
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
|
372
|
+
if (ownerDocument !== document) {
|
|
373
|
+
ownerDocument.removeEventListener('focusin', handleFocusIn);
|
|
374
|
+
ownerDocument.removeEventListener('keydown', handleKeyDown);
|
|
375
|
+
ownerDocument.removeEventListener('mousedown', handleMouseDown);
|
|
376
|
+
ownerDocument.removeEventListener('mouseup', handleMouseUp);
|
|
377
|
+
}
|
|
378
|
+
if (inputElement) {
|
|
379
|
+
inputElement.removeEventListener('input', handleInput);
|
|
380
|
+
}
|
|
381
|
+
};
|
|
382
|
+
}, [closeDropdown, handleSubmitItem, isOpenOnMount, isTriggerFromProps]);
|
|
383
|
+
const handleTriggerFocus = useCallback(() => {
|
|
384
|
+
setIsOpen(true);
|
|
385
|
+
}, []);
|
|
386
|
+
if (!isTriggerFromProps) {
|
|
387
|
+
if (isSearchable) {
|
|
388
|
+
trigger = (React.createElement(InputText, { className: TRIGGER_CLASS_NAME, disabled: disabled, initialValue: value || '', name: name, onFocus: handleTriggerFocus, placeholder: placeholder, ref: inputElementRef, selectTextOnFocus: true, tabIndex: tabIndex, type: "text" }));
|
|
389
|
+
}
|
|
390
|
+
else {
|
|
391
|
+
trigger = (React.createElement("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0 }, trigger));
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
if (label) {
|
|
395
|
+
trigger = (React.createElement("label", { className: LABEL_CLASS_NAME },
|
|
396
|
+
React.createElement("div", { className: LABEL_TEXT_CLASS_NAME }, label),
|
|
397
|
+
trigger));
|
|
398
|
+
}
|
|
399
|
+
return (React.createElement(Fragment, null,
|
|
400
|
+
React.createElement(Style, null, STYLES),
|
|
401
|
+
React.createElement("div", { className: classnames(ROOT_CLASS_NAME, className, {
|
|
402
|
+
disabled,
|
|
403
|
+
'is-open': isOpen,
|
|
404
|
+
'is-searchable': isSearchable,
|
|
405
|
+
}), onMouseMove: handleMouseMove, onMouseOver: handleMouseOver, ref: handleRef, tabIndex: isSearchable || inputElementRef.current || !isTriggerFromProps
|
|
406
|
+
? undefined
|
|
407
|
+
: 0 },
|
|
408
|
+
trigger,
|
|
409
|
+
isOpen ? (React.createElement("div", { className: classnames(BODY_CLASS_NAME, {
|
|
410
|
+
'calculating-position': !outOfBounds.hasLayout,
|
|
411
|
+
'has-items': hasItems,
|
|
412
|
+
'out-of-bounds-bottom': outOfBounds.bottom,
|
|
413
|
+
'out-of-bounds-left': outOfBounds.left,
|
|
414
|
+
'out-of-bounds-right': outOfBounds.right,
|
|
415
|
+
'out-of-bounds-top': outOfBounds.top,
|
|
416
|
+
}), ref: setDropdownBodyElement }, children[1] || children[0] || children)) : null)));
|
|
417
|
+
};
|
|
418
|
+
export default Dropdown;
|
|
419
|
+
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Flowtype definitions for Dropdown
|
|
3
|
+
* Generated by Flowgen from a Typescript Definition
|
|
4
|
+
* Flowgen v1.20.0
|
|
5
|
+
* @flow
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import * as React from "react";
|
|
9
|
+
export type Item = {|
|
|
10
|
+
element: HTMLElement | null,
|
|
11
|
+
value: string,
|
|
12
|
+
|};
|
|
13
|
+
export type Props = {|
|
|
14
|
+
/**
|
|
15
|
+
* Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true
|
|
16
|
+
*/
|
|
17
|
+
allowEmpty?: boolean,
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Can take a single React element (e.g. ReactChild) or exactly two renderable children
|
|
21
|
+
*/
|
|
22
|
+
children: React.Element<any> | [React.Node, React.Node],
|
|
23
|
+
className?: string,
|
|
24
|
+
disabled?: boolean,
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Group identifier string links dropdowns together into a menu (like macOS top menubar)
|
|
28
|
+
*/
|
|
29
|
+
group?: string,
|
|
30
|
+
hasItems?: boolean,
|
|
31
|
+
isOpenOnMount?: boolean,
|
|
32
|
+
isSearchable?: boolean,
|
|
33
|
+
label?: string,
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Only usable in conjunction with {isSearchable: true}; used as search input’s name
|
|
37
|
+
*/
|
|
38
|
+
name?: string,
|
|
39
|
+
onSubmitItem?: (payload: Item) => void,
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Only usable in conjunction with {isSearchable: true}; used as search input’s placeholder
|
|
43
|
+
*/
|
|
44
|
+
placeholder?: string,
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Only usable in conjunction with {isSearchable: true}; used as search input’s tabIndex
|
|
48
|
+
*/
|
|
49
|
+
tabIndex?: number,
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Used as search input’s value if props.isSearchable === true
|
|
53
|
+
* Used to determine if value has changed to avoid triggering onSubmitItem if not
|
|
54
|
+
*/
|
|
55
|
+
value?: string,
|
|
56
|
+
|};
|
|
57
|
+
declare var Dropdown: React.StatelessFunctionalComponent<Props>;
|
|
58
|
+
declare export default typeof Dropdown;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,2BAA2B;AAC3B,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,gBAAgB,MAAM,8BAA8B,CAAC;AAC5D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACH,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,MAAM,EACN,kBAAkB,GACrB,MAAM,aAAa,CAAC;AACrB,OAAO,EACH,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,kBAAkB,EAClB,aAAa,GAChB,MAAM,cAAc,CAAC;AAmCtB,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AAErF,MAAM,IAAI,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AAEtB,MAAM,cAAc,GAChB,yHAAyH,CAAC;AAE9H,MAAM,QAAQ,GAAoB,CAAC,EAC/B,UAAU,GAAG,IAAI,EACjB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,IAAI,EACf,aAAa,EACb,YAAY,EACZ,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,KAAK,GACR,EAAE,EAAE;IACD,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC/C,IAAI,aAAa,KAAK,CAAC,IAAI,aAAa,KAAK,CAAC,EAAE;QAC5C,IAAI,aAAa,KAAK,CAAC,EAAE;YACrB,MAAM,IAAI,KAAK,CAAC,cAAc,GAAG,wBAAwB,CAAC,CAAC;SAC9D;QACD,OAAO,CAAC,KAAK,CAAC,GAAG,cAAc,aAAa,aAAa,YAAY,CAAC,CAAC;KAC1E;IAED,IAAI,OAAO,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,aAAa,IAAI,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,CAAC,aAAa,CAAC,CAAC;IACpE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC1D,IAAI,CACP,CAAC;IAEF,MAAM,kBAAkB,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC/D,MAAM,eAAe,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC9D,MAAM,eAAe,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACvD,MAAM,iBAAiB,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACzD,MAAM,qBAAqB,GAAG,MAAM,CAAuB,OAAO,CAAC,CAAC;IACpE,MAAM,8BAA8B,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACtE,MAAM,oBAAoB,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;IAChD,MAAM,oBAAoB,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IAE1D,MAAM,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACjC,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACvC,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE/B,eAAe,CAAC,GAAG,EAAE;QACjB,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC;QACnC,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;QAC/B,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAC3B,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;QACjC,qBAAqB,CAAC,OAAO,GAAG,kBAAkB,CAAC;QACnD,eAAe,CAAC,OAAO,GAAG,YAAY,CAAC;QACvC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IAC7B,CAAC,EAAE;QACC,UAAU;QACV,QAAQ;QACR,MAAM;QACN,SAAS;QACT,kBAAkB;QAClB,YAAY;QACZ,KAAK;KACR,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,oBAAoB,CAAC,OAAO,GAAG,IAAI,CAAC;QACpC,IAAI,eAAe,CAAC,OAAO,EAAE;YACzB,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACtC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;SAClC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;;QACtC,IAAI,SAAS,CAAC,OAAO,EAAE;YACnB,oFAAoF;YACpF,uFAAuF;YACvF,eAAe,CAAC,OAAO,GAAG,UAAU,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;SAC3D;QAED,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,OAAO;QAEjC,MAAM,WAAW,GAAG,oBAAoB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACrE,IAAI,CAAC,WAAW,EAAE;YACd,0DAA0D;YAC1D,IAAI,CAAC,aAAa,CAAC,OAAO;gBAAE,OAAO;YACnC,sFAAsF;YACtF,IAAI,MAAA,eAAe,CAAC,OAAO,0CAAE,KAAK;gBAAE,OAAO;SAC9C;QAED,MAAM,KAAK,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,KAAI,EAAE,CAAC;QAC3C,MAAM,SAAS,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC,QAAQ,KAAI,KAAK,CAAC;QACzD,MAAM,QAAQ,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;QAC5D,IAAI,eAAe,CAAC,OAAO,EAAE;YACzB,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;YACtC,IACI,eAAe,CAAC,OAAO;gBACvB,eAAe,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,EACrD;gBACE,eAAe,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;aAClC;SACJ;QAED,0FAA0F;QAC1F,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,SAAS;YAAE,OAAO;QAE/D,IAAI,eAAe,CAAC,OAAO,EAAE;YACzB,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;SACrC;IACL,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,eAAe,GAAG,WAAW,CAC/B,CAAC,EAAE,OAAO,EAAE,OAAO,EAAiC,EAAE,EAAE;QACpD,qBAAqB,CAAC,OAAO,GAAG,OAAO,CAAC;QACxC,MAAM,eAAe,GAAG,oBAAoB,CAAC,OAAO,CAAC;QACrD,IAAI,CAAC,eAAe;YAAE,OAAO;QAC7B,IACI,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;YAChD,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,EAClD;YACE,OAAO;SACV;QACD,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EACD,EAAE,CACL,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,KAAoC,EAAE,EAAE;QACzE,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,OAAO;QAEjC,+EAA+E;QAC/E,IAAI,qBAAqB,CAAC,OAAO,KAAK,OAAO;YAAE,OAAO;QAEtD,+CAA+C;QAC/C,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC;QACnD,IAAI,CAAC,eAAe;YAAE,OAAO;QAE7B,MAAM,YAAY,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;QACtD,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1B,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB,CAAC;QAChD,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC,aAAa,CAAuB,CAAC;QACtE,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC;QACpC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACtD,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,OAAO,EAAE;gBACjC,aAAa,CAAC;oBACV,eAAe;oBACf,OAAO;iBACV,CAAC,CAAC;gBACH,OAAO;aACV;SACJ;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,wBAAwB,GAAG,MAAM,CAAa,IAAI,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,WAAW,CACzB,CAAC,GAA0B,EAAE,EAAE;QAC3B,kBAAkB,CAAC,OAAO,GAAG,GAAG,CAAC;QACjC,IAAI,CAAC,GAAG,EAAE;YACN,+CAA+C;YAC/C,wBAAwB,CAAC,OAAO,EAAE,CAAC;YACnC,wBAAwB,CAAC,OAAO,GAAG,IAAI,CAAC;YACxC,OAAO;SACV;QAED,MAAM,EAAE,aAAa,EAAE,GAAG,GAAG,CAAC;QAC9B,IAAI,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC;QAC3C,8DAA8D;QAC9D,IAAI,kBAAkB,IAAI,CAAC,YAAY,IAAI,GAAG,CAAC,iBAAiB,EAAE;YAC9D,YAAY,GAAG,GAAG,CAAC,iBAAiB,CAAC,aAAa,CAC9C,yEAAyE,CAC5E,CAAC;YACF,eAAe,CAAC,OAAO,GAAG,YAAY,CAAC;SAC1C;QAED,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAc,EAAE,EAAE;YACjE,MAAM,WAAW,GAAG,MAAqB,CAAC;YAC1C,IACI,kBAAkB,CAAC,OAAO;gBAC1B,CAAC,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,EACnD;gBACE,qCAAqC;gBACrC,aAAa,EAAE,CAAC;gBAChB,OAAO;aACV;YAED,IAAI,SAAS,CAAC,OAAO;gBAAE,OAAO;YAE9B,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,oBAAoB,CAAC,OAAO,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;YACpD,iBAAiB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACxC,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC;YACrC,CAAC,EAAE,IAAI,CAAC,CAAC;QACb,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAc,EAAE,EAAE;YAC7C,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO;gBAAE,OAAO;YAE1D,wFAAwF;YACxF,IAAI,YAAY,CAAC,OAAO,EAAE;gBACtB,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,IAAI,iBAAiB,CAAC,OAAO,EAAE;oBAC3B,YAAY,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBACxC,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC;iBACpC;gBACD,OAAO;aACV;YAED,MAAM,cAAc,GAAI,MAAsB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YAEtE,kFAAkF;YAClF,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,cAAc;gBAAE,OAAO;YAEnD,yEAAyE;YACzE,IAAI,cAAc,EAAE;gBAChB,gBAAgB,EAAE,CAAC;aACtB;iBAAM,IACH,CAAC,eAAe,CAAC,OAAO;gBACxB,CAAC,kBAAkB,CAAC,OAAO;oBACvB,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,EACvE;gBACE,4EAA4E;gBAC5E,aAAa,EAAE,CAAC;aACnB;QACL,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC3C,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;YAChD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB,CAAC;YAChD,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC;YACnD,IAAI,CAAC,eAAe;gBAAE,OAAO;YAE7B,MAAM,cAAc,GAAG,GAAG,EAAE;gBACxB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,qBAAqB,CAAC,OAAO,GAAG,UAAU,CAAC;YAC/C,CAAC,CAAC;YAEF,MAAM,wBAAwB,GAAG,eAAe,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;YAEvE,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;gBACpB,uFAAuF;gBACvF,IAAI,CAAC,wBAAwB;oBAAE,OAAO;gBACtC,4FAA4F;gBAC5F,IACI,GAAG,KAAK,GAAG;oBACX,GAAG,KAAK,OAAO;oBACf,CAAC,WAAW,CAAC,OAAO;wBAChB,CAAC,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,WAAW,CAAC,CAAC,EACjD;oBACE,cAAc,EAAE,CAAC;oBACjB,SAAS,CAAC,IAAI,CAAC,CAAC;oBAChB,OAAO;iBACV;gBAED,OAAO;aACV;YAED,iFAAiF;YACjF,IAAI,WAAW,CAAC,OAAO,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;gBACjD,IAAI,mBAAmB,GACnB,CAAC,OAAO,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACtD,gFAAgF;gBAChF,0CAA0C;gBAC1C,IAAI,CAAC,mBAAmB,IAAI,oBAAoB,CAAC,OAAO,EAAE;oBACtD,mBAAmB,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,WAAW,CAAC;iBAC5D;gBAED,IAAI,mBAAmB,EAAE;oBACrB,cAAc,EAAE,CAAC;oBACjB,IAAI,GAAG,KAAK,WAAW,EAAE;wBACrB,oBAAoB,CAAC,OAAO;4BACxB,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;qBACjD;yBAAM;wBACH,oBAAoB,CAAC,OAAO,IAAI,GAAG,CAAC;qBACvC;oBAED,aAAa,CAAC;wBACV,eAAe;wBACf,oEAAoE;wBACpE,kEAAkE;wBAClE,YAAY,EAAE,qBAAqB,CAAC,OAAO;wBAC3C,IAAI,EAAE,oBAAoB,CAAC,OAAO;qBACrC,CAAC,CAAC;oBAEH,IAAI,8BAA8B,CAAC,OAAO,EAAE;wBACxC,YAAY,CAAC,8BAA8B,CAAC,OAAO,CAAC,CAAC;qBACxD;oBAED,8BAA8B,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;wBACrD,oBAAoB,CAAC,OAAO,GAAG,EAAE,CAAC;wBAClC,8BAA8B,CAAC,OAAO,GAAG,IAAI,CAAC;oBAClD,CAAC,EAAE,IAAI,CAAC,CAAC;oBAET,OAAO;iBACV;aACJ;YACD,kDAAkD;YAClD,IAAI,GAAG,KAAK,OAAO,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE;gBAC9D,cAAc,EAAE,CAAC;gBACjB,gBAAgB,EAAE,CAAC;gBACnB,OAAO;aACV;YACD,2EAA2E;YAC3E,IACI,GAAG,KAAK,QAAQ;gBAChB,CAAC,wBAAwB,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,EACnE;gBACE,+EAA+E;gBAC/E,IACI,CAAC,WAAW,CAAC,OAAO;oBACpB,CAAC,WAAW,CAAC,iBAAiB;wBAC1B,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,EAClD;oBACE,OAAO;iBACV;gBACD,aAAa,EAAE,CAAC;gBAChB,OAAO;aACV;YACD,oBAAoB;YACpB,IAAI,WAAW,CAAC,OAAO,EAAE;gBACrB,IAAI,GAAG,KAAK,SAAS,EAAE;oBACnB,cAAc,EAAE,CAAC;oBACjB,IAAI,MAAM,IAAI,OAAO,EAAE;wBACnB,aAAa,CAAC;4BACV,eAAe;4BACf,KAAK,EAAE,CAAC;yBACX,CAAC,CAAC;qBACN;yBAAM;wBACH,aAAa,CAAC;4BACV,eAAe;4BACf,WAAW,EAAE,CAAC,CAAC;yBAClB,CAAC,CAAC;qBACN;oBACD,OAAO;iBACV;gBACD,IAAI,GAAG,KAAK,WAAW,EAAE;oBACrB,cAAc,EAAE,CAAC;oBACjB,IAAI,MAAM,IAAI,OAAO,EAAE;wBACnB,kDAAkD;wBAClD,aAAa,CAAC;4BACV,eAAe;4BACf,KAAK,EAAE,CAAC,CAAC;yBACZ,CAAC,CAAC;qBACN;yBAAM;wBACH,aAAa,CAAC;4BACV,eAAe;4BACf,WAAW,EAAE,CAAC;yBACjB,CAAC,CAAC;qBACN;oBACD,OAAO;iBACV;aACJ;QACL,CAAC,CAAC;QAEF,oEAAoE;QACpE,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACnC,IAAI,CAAC,SAAS,CAAC,OAAO;gBAAE,OAAO;YAE/B,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB,CAAC;YAChD,6EAA6E;YAC7E,IACI,CAAC,kBAAkB,CAAC,OAAO;gBAC3B,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC;gBAChD,WAAW,CAAC,QAAQ,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAClD;gBACE,OAAO;aACV;YAED,aAAa,EAAE,CAAC;QACpB,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAEpD,IAAI,aAAa,KAAK,QAAQ,EAAE;YAC5B,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YACzD,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YACzD,aAAa,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC7D,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;SAC5D;QAED,gDAAgD;QAChD,IAAI,aAAa,EAAE;YACf,GAAG,CAAC,KAAK,EAAE,CAAC;SACf;QAED,MAAM,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACjC,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC;YACnD,IAAI,CAAC,eAAe;gBAAE,OAAO;YAE7B,IAAI,CAAC,SAAS,CAAC,OAAO;gBAAE,SAAS,CAAC,IAAI,CAAC,CAAC;YAExC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,MAAM,UAAU,GACZ,oBAAoB,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;YAC7D,oBAAoB,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC;YAC3C,gFAAgF;YAChF,IAAI,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;gBAAE,OAAO;YAE7C,aAAa,CAAC;gBACV,eAAe;gBACf,oEAAoE;gBACpE,kEAAkE;gBAClE,YAAY,EAAE,qBAAqB,CAAC,OAAO;gBAC3C,IAAI,EAAE,oBAAoB,CAAC,OAAO;aACrC,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;SACvD;QAED,wBAAwB,CAAC,OAAO,GAAG,GAAG,EAAE;YACpC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YAEvD,IAAI,aAAa,KAAK,QAAQ,EAAE;gBAC5B,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;gBAC5D,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;gBAC5D,aAAa,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;gBAChE,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;aAC/D;YAED,IAAI,YAAY,EAAE;gBACd,YAAY,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;aAC1D;QACL,CAAC,CAAC;IACN,CAAC,EACD,CAAC,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,kBAAkB,CAAC,CACvE,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,SAAS,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,kBAAkB,EAAE;QACrB,IAAI,YAAY,EAAE;YACd,OAAO,GAAG,CACN,oBAAC,SAAS,IACN,SAAS,EAAE,kBAAkB,EAC7B,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,EAAE,EACzB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,kBAAkB,EAC3B,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,eAAe,EACpB,iBAAiB,QACjB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,MAAM,GACb,CACL,CAAC;SACL;aAAM;YACH,OAAO,GAAG,CACN,gCAAQ,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAE,CAAC,IAC7C,OAAO,CACH,CACZ,CAAC;SACL;KACJ;IAED,IAAI,KAAK,EAAE;QACP,OAAO,GAAG,CACN,+BAAO,SAAS,EAAE,gBAAgB;YAC9B,6BAAK,SAAS,EAAE,qBAAqB,IAAG,KAAK,CAAO;YACnD,OAAO,CACJ,CACX,CAAC;KACL;IAED,OAAO,CACH,oBAAC,QAAQ;QACL,oBAAC,KAAK,QAAE,MAAM,CAAS;QACvB,6BACI,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,EAAE;gBAC9C,QAAQ;gBACR,SAAS,EAAE,MAAM;gBACjB,eAAe,EAAE,YAAY;aAChC,CAAC,EACF,WAAW,EAAE,eAAe,EAC5B,WAAW,EAAE,eAAe,EAC5B,GAAG,EAAE,SAAS,EACd,QAAQ,EACJ,YAAY,IAAI,eAAe,CAAC,OAAO,IAAI,CAAC,kBAAkB;gBAC1D,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,CAAC;YAGV,OAAO;YACP,MAAM,CAAC,CAAC,CAAC,CACN,6BACI,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;oBACnC,sBAAsB,EAAE,CAAC,WAAW,CAAC,SAAS;oBAC9C,WAAW,EAAE,QAAQ;oBACrB,sBAAsB,EAAE,WAAW,CAAC,MAAM;oBAC1C,oBAAoB,EAAE,WAAW,CAAC,IAAI;oBACtC,qBAAqB,EAAE,WAAW,CAAC,KAAK;oBACxC,mBAAmB,EAAE,WAAW,CAAC,GAAG;iBACvC,CAAC,EACF,GAAG,EAAE,sBAAsB,IAE1B,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CACrC,CACT,CAAC,CAAC,CAAC,IAAI,CACN,CACC,CACd,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
export declare const ITEM_SELECTOR = "[data-ukt-item], [data-ukt-value]";
|
|
2
|
+
export declare const KEY_EVENT_ELEMENTS: Set<string>;
|
|
3
|
+
export declare const getItemElements: (dropdownElement: HTMLElement | null) => NodeListOf<Element> | HTMLCollection | null;
|
|
4
|
+
export declare const getActiveItemElement: (dropdownElement: HTMLElement | null) => HTMLElement | null;
|
|
5
|
+
export declare const setActiveItem: ({ dropdownElement, element, index, indexAddend, isExactMatch, text, }: {
|
|
6
|
+
dropdownElement: HTMLElement;
|
|
7
|
+
element: HTMLElement;
|
|
8
|
+
index?: null | undefined;
|
|
9
|
+
indexAddend?: null | undefined;
|
|
10
|
+
isExactMatch?: null | undefined;
|
|
11
|
+
text?: null | undefined;
|
|
12
|
+
} | {
|
|
13
|
+
dropdownElement: HTMLElement;
|
|
14
|
+
element?: null | undefined;
|
|
15
|
+
index: number;
|
|
16
|
+
indexAddend?: null | undefined;
|
|
17
|
+
isExactMatch?: null | undefined;
|
|
18
|
+
text?: null | undefined;
|
|
19
|
+
} | {
|
|
20
|
+
dropdownElement: HTMLElement;
|
|
21
|
+
element?: null | undefined;
|
|
22
|
+
index?: null | undefined;
|
|
23
|
+
indexAddend: number;
|
|
24
|
+
isExactMatch?: null | undefined;
|
|
25
|
+
text?: null | undefined;
|
|
26
|
+
} | {
|
|
27
|
+
dropdownElement: HTMLElement;
|
|
28
|
+
element?: null | undefined;
|
|
29
|
+
index?: null | undefined;
|
|
30
|
+
indexAddend?: null | undefined;
|
|
31
|
+
isExactMatch?: boolean | undefined;
|
|
32
|
+
text: string;
|
|
33
|
+
}) => void;
|
package/dist/helpers.js
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { getBestMatch } from '@acusti/matchmaking';
|
|
2
|
+
import { BODY_SELECTOR } from './styles.js';
|
|
3
|
+
export const ITEM_SELECTOR = `[data-ukt-item], [data-ukt-value]`;
|
|
4
|
+
export const KEY_EVENT_ELEMENTS = new Set(['INPUT', 'TEXTAREA']);
|
|
5
|
+
export const getItemElements = (dropdownElement) => {
|
|
6
|
+
if (!dropdownElement)
|
|
7
|
+
return null;
|
|
8
|
+
const bodyElement = dropdownElement.querySelector(BODY_SELECTOR);
|
|
9
|
+
if (!bodyElement)
|
|
10
|
+
return null;
|
|
11
|
+
let items = bodyElement.querySelectorAll(ITEM_SELECTOR);
|
|
12
|
+
if (items.length)
|
|
13
|
+
return items;
|
|
14
|
+
// If no items found via [data-ukt-item] or [data-ukt-value] selector,
|
|
15
|
+
// use first instance of multiple children found
|
|
16
|
+
items = bodyElement.children;
|
|
17
|
+
while (items.length === 1) {
|
|
18
|
+
if (!items[0].children)
|
|
19
|
+
break;
|
|
20
|
+
items = items[0].children;
|
|
21
|
+
}
|
|
22
|
+
// If unable to find an element with more than one child, treat direct child as items
|
|
23
|
+
if (items.length === 1) {
|
|
24
|
+
items = bodyElement.children;
|
|
25
|
+
}
|
|
26
|
+
return items;
|
|
27
|
+
};
|
|
28
|
+
export const getActiveItemElement = (dropdownElement) => {
|
|
29
|
+
if (!dropdownElement)
|
|
30
|
+
return null;
|
|
31
|
+
return dropdownElement.querySelector('[data-ukt-active]');
|
|
32
|
+
};
|
|
33
|
+
const clearItemElementsState = (itemElements) => {
|
|
34
|
+
itemElements.forEach((itemElement) => {
|
|
35
|
+
if (itemElement.hasAttribute('data-ukt-active')) {
|
|
36
|
+
delete itemElement.dataset.uktActive;
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
export const setActiveItem = ({ dropdownElement, element, index, indexAddend, isExactMatch, text, }) => {
|
|
41
|
+
const items = getItemElements(dropdownElement);
|
|
42
|
+
if (!items)
|
|
43
|
+
return;
|
|
44
|
+
const itemElements = Array.from(items);
|
|
45
|
+
if (!itemElements.length)
|
|
46
|
+
return;
|
|
47
|
+
const lastIndex = itemElements.length - 1;
|
|
48
|
+
const currentActiveIndex = itemElements.findIndex((itemElement) => itemElement.hasAttribute('data-ukt-active'));
|
|
49
|
+
let nextActiveIndex = currentActiveIndex;
|
|
50
|
+
if (typeof index === 'number') {
|
|
51
|
+
// Negative index means count back from the end
|
|
52
|
+
nextActiveIndex = index < 0 ? itemElements.length + index : index;
|
|
53
|
+
}
|
|
54
|
+
if (element) {
|
|
55
|
+
nextActiveIndex = itemElements.findIndex((itemElement) => itemElement === element);
|
|
56
|
+
}
|
|
57
|
+
else if (typeof indexAddend === 'number') {
|
|
58
|
+
// If there’s no currentActiveIndex and we are handling -1, start at lastIndex
|
|
59
|
+
if (currentActiveIndex === -1 && indexAddend === -1) {
|
|
60
|
+
nextActiveIndex = lastIndex;
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
nextActiveIndex += indexAddend;
|
|
64
|
+
}
|
|
65
|
+
// Keep it within the bounds of the items list
|
|
66
|
+
if (nextActiveIndex < 0) {
|
|
67
|
+
nextActiveIndex = 0;
|
|
68
|
+
}
|
|
69
|
+
else if (nextActiveIndex > lastIndex) {
|
|
70
|
+
nextActiveIndex = lastIndex;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
else if (typeof text === 'string') {
|
|
74
|
+
// If text is empty, clear existing active items and early return
|
|
75
|
+
if (!text) {
|
|
76
|
+
clearItemElementsState(itemElements);
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
const itemTexts = itemElements.map((itemElement) => itemElement.innerText);
|
|
80
|
+
if (isExactMatch) {
|
|
81
|
+
const textToCompare = text.toLowerCase();
|
|
82
|
+
nextActiveIndex = itemTexts.findIndex((itemText) => itemText.toLowerCase().startsWith(textToCompare));
|
|
83
|
+
// If isExactMatch is required and no exact match was found, clear active items
|
|
84
|
+
if (nextActiveIndex === -1) {
|
|
85
|
+
clearItemElementsState(itemElements);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
const bestMatch = getBestMatch({ items: itemTexts, text });
|
|
90
|
+
nextActiveIndex = itemTexts.findIndex((text) => text === bestMatch);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
if (nextActiveIndex === -1 || nextActiveIndex === currentActiveIndex)
|
|
94
|
+
return;
|
|
95
|
+
// Clear any existing active dropdown body item state
|
|
96
|
+
clearItemElementsState(itemElements);
|
|
97
|
+
const nextActiveItem = items[nextActiveIndex];
|
|
98
|
+
if (nextActiveItem) {
|
|
99
|
+
nextActiveItem.setAttribute('data-ukt-active', '');
|
|
100
|
+
// Find closest scrollable parent and ensure that next active item is visible
|
|
101
|
+
let { parentElement } = nextActiveItem;
|
|
102
|
+
let scrollableParent = null;
|
|
103
|
+
while (!scrollableParent && parentElement && parentElement !== dropdownElement) {
|
|
104
|
+
const isScrollable = parentElement.scrollHeight > parentElement.clientHeight + 15;
|
|
105
|
+
if (isScrollable) {
|
|
106
|
+
scrollableParent = parentElement;
|
|
107
|
+
}
|
|
108
|
+
else {
|
|
109
|
+
parentElement = parentElement.parentElement;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
if (scrollableParent) {
|
|
113
|
+
const parentRect = scrollableParent.getBoundingClientRect();
|
|
114
|
+
const itemRect = nextActiveItem.getBoundingClientRect();
|
|
115
|
+
const isAboveTop = itemRect.top < parentRect.top;
|
|
116
|
+
const isBelowBottom = itemRect.bottom > parentRect.bottom;
|
|
117
|
+
if (isAboveTop || isBelowBottom) {
|
|
118
|
+
let { scrollTop } = scrollableParent;
|
|
119
|
+
// Item isn’t fully visible; adjust scrollTop to put item within closest edge
|
|
120
|
+
if (isAboveTop) {
|
|
121
|
+
scrollTop -= parentRect.top - itemRect.top;
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
scrollTop += itemRect.bottom - parentRect.bottom;
|
|
125
|
+
}
|
|
126
|
+
scrollableParent.scrollTop = scrollTop;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
};
|
|
131
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Flowtype definitions for helpers
|
|
3
|
+
* Generated by Flowgen from a Typescript Definition
|
|
4
|
+
* Flowgen v1.20.0
|
|
5
|
+
* @flow
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
declare export var ITEM_SELECTOR: "[data-ukt-item], [data-ukt-value]";
|
|
9
|
+
declare export var KEY_EVENT_ELEMENTS: Set<string>;
|
|
10
|
+
declare export var getItemElements: (
|
|
11
|
+
dropdownElement: HTMLElement | null
|
|
12
|
+
) => NodeListOf<Element> | HTMLCollection | null;
|
|
13
|
+
declare export var getActiveItemElement: (
|
|
14
|
+
dropdownElement: HTMLElement | null
|
|
15
|
+
) => HTMLElement | null;
|
|
16
|
+
declare export var setActiveItem: (
|
|
17
|
+
x:
|
|
18
|
+
| {|
|
|
19
|
+
dropdownElement: HTMLElement,
|
|
20
|
+
element: HTMLElement,
|
|
21
|
+
index?: null | void,
|
|
22
|
+
indexAddend?: null | void,
|
|
23
|
+
isExactMatch?: null | void,
|
|
24
|
+
text?: null | void,
|
|
25
|
+
|}
|
|
26
|
+
| {|
|
|
27
|
+
dropdownElement: HTMLElement,
|
|
28
|
+
element?: null | void,
|
|
29
|
+
index: number,
|
|
30
|
+
indexAddend?: null | void,
|
|
31
|
+
isExactMatch?: null | void,
|
|
32
|
+
text?: null | void,
|
|
33
|
+
|}
|
|
34
|
+
| {|
|
|
35
|
+
dropdownElement: HTMLElement,
|
|
36
|
+
element?: null | void,
|
|
37
|
+
index?: null | void,
|
|
38
|
+
indexAddend: number,
|
|
39
|
+
isExactMatch?: null | void,
|
|
40
|
+
text?: null | void,
|
|
41
|
+
|}
|
|
42
|
+
| {|
|
|
43
|
+
dropdownElement: HTMLElement,
|
|
44
|
+
element?: null | void,
|
|
45
|
+
index?: null | void,
|
|
46
|
+
indexAddend?: null | void,
|
|
47
|
+
isExactMatch?: boolean | void,
|
|
48
|
+
text: string,
|
|
49
|
+
|}
|
|
50
|
+
) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"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"}
|
package/dist/styles.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const ROOT_CLASS_NAME = "uktdropdown";
|
|
2
|
+
export declare const ROOT_SELECTOR: string;
|
|
3
|
+
export declare const BODY_CLASS_NAME: string;
|
|
4
|
+
export declare const LABEL_CLASS_NAME: string;
|
|
5
|
+
export declare const LABEL_TEXT_CLASS_NAME: string;
|
|
6
|
+
export declare const TRIGGER_CLASS_NAME: string;
|
|
7
|
+
export declare const BODY_SELECTOR: string;
|
|
8
|
+
export declare const LABEL_SELECTOR: string;
|
|
9
|
+
export declare const LABEL_TEXT_SELECTOR: string;
|
|
10
|
+
export declare const TRIGGER_SELECTOR: string;
|
|
11
|
+
export declare const STYLES: string;
|
package/dist/styles.js
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { SYSTEM_UI_FONT } from '@acusti/styling';
|
|
2
|
+
export const ROOT_CLASS_NAME = 'uktdropdown';
|
|
3
|
+
export const ROOT_SELECTOR = `.${ROOT_CLASS_NAME}`;
|
|
4
|
+
export const BODY_CLASS_NAME = `${ROOT_CLASS_NAME}-body`;
|
|
5
|
+
export const LABEL_CLASS_NAME = `${ROOT_CLASS_NAME}-label`;
|
|
6
|
+
export const LABEL_TEXT_CLASS_NAME = `${ROOT_CLASS_NAME}-label-text`;
|
|
7
|
+
export const TRIGGER_CLASS_NAME = `${ROOT_CLASS_NAME}-trigger`;
|
|
8
|
+
export const BODY_SELECTOR = `.${BODY_CLASS_NAME}`;
|
|
9
|
+
export const LABEL_SELECTOR = `.${LABEL_CLASS_NAME}`;
|
|
10
|
+
export const LABEL_TEXT_SELECTOR = `.${LABEL_TEXT_CLASS_NAME}`;
|
|
11
|
+
export const TRIGGER_SELECTOR = `.${TRIGGER_CLASS_NAME}`;
|
|
12
|
+
export const STYLES = `
|
|
13
|
+
:root {
|
|
14
|
+
--uktdd-font-family: ${SYSTEM_UI_FONT};
|
|
15
|
+
--uktdd-body-bg-color: #fff;
|
|
16
|
+
--uktdd-body-bg-color-hover: rgb(105,162,249);
|
|
17
|
+
--uktdd-body-color-hover: #fff;
|
|
18
|
+
--uktdd-body-pad-bottom: 10px;
|
|
19
|
+
--uktdd-body-pad-left: 12px;
|
|
20
|
+
--uktdd-body-pad-right: 12px;
|
|
21
|
+
--uktdd-body-pad-top: 10px;
|
|
22
|
+
--uktdd-label-pad-right: 10px;
|
|
23
|
+
}
|
|
24
|
+
${ROOT_SELECTOR},
|
|
25
|
+
${TRIGGER_SELECTOR} {
|
|
26
|
+
font-family: var(--uktdd-font-family);
|
|
27
|
+
}
|
|
28
|
+
${ROOT_SELECTOR} {
|
|
29
|
+
position: relative;
|
|
30
|
+
display: inline-block;
|
|
31
|
+
}
|
|
32
|
+
${ROOT_SELECTOR}.disabled {
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
}
|
|
35
|
+
${ROOT_SELECTOR} > * {
|
|
36
|
+
cursor: default;
|
|
37
|
+
}
|
|
38
|
+
${LABEL_SELECTOR} {
|
|
39
|
+
display: flex;
|
|
40
|
+
}
|
|
41
|
+
${LABEL_TEXT_SELECTOR} {
|
|
42
|
+
padding-right: var(--uktdd-label-pad-right);
|
|
43
|
+
}
|
|
44
|
+
${BODY_SELECTOR} {
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 100%;
|
|
48
|
+
max-height: calc(100vh - 50px);
|
|
49
|
+
min-height: 50px;
|
|
50
|
+
min-width: 100%;
|
|
51
|
+
overflow: auto;
|
|
52
|
+
z-index: 2;
|
|
53
|
+
padding: var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);
|
|
54
|
+
background-color: var(--uktdd-body-bg-color);
|
|
55
|
+
box-shadow: 0 8px 18px rgba(0,0,0,0.25);
|
|
56
|
+
}
|
|
57
|
+
${BODY_SELECTOR}.calculating-position {
|
|
58
|
+
visibility: hidden;
|
|
59
|
+
}
|
|
60
|
+
${BODY_SELECTOR}.out-of-bounds-bottom:not(.out-of-bounds-top) {
|
|
61
|
+
top: auto;
|
|
62
|
+
bottom: 100%;
|
|
63
|
+
}
|
|
64
|
+
${BODY_SELECTOR}.out-of-bounds-right:not(.out-of-bounds-left) {
|
|
65
|
+
left: auto;
|
|
66
|
+
right: 0px;
|
|
67
|
+
}
|
|
68
|
+
${LABEL_SELECTOR} + ${BODY_SELECTOR} {
|
|
69
|
+
left: auto;
|
|
70
|
+
right: 0;
|
|
71
|
+
}
|
|
72
|
+
${BODY_SELECTOR}.has-items {
|
|
73
|
+
user-select: none;
|
|
74
|
+
}
|
|
75
|
+
${BODY_SELECTOR} [data-ukt-active] {
|
|
76
|
+
background-color: var(--uktdd-body-bg-color-hover);
|
|
77
|
+
color: var(--uktdd-body-color-hover);
|
|
78
|
+
}
|
|
79
|
+
`;
|
|
80
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Flowtype definitions for styles
|
|
3
|
+
* Generated by Flowgen from a Typescript Definition
|
|
4
|
+
* Flowgen v1.20.0
|
|
5
|
+
* @flow
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
declare export var ROOT_CLASS_NAME: "uktdropdown";
|
|
9
|
+
declare export var ROOT_SELECTOR: string;
|
|
10
|
+
declare export var BODY_CLASS_NAME: string;
|
|
11
|
+
declare export var LABEL_CLASS_NAME: string;
|
|
12
|
+
declare export var LABEL_TEXT_CLASS_NAME: string;
|
|
13
|
+
declare export var TRIGGER_CLASS_NAME: string;
|
|
14
|
+
declare export var BODY_SELECTOR: string;
|
|
15
|
+
declare export var LABEL_SELECTOR: string;
|
|
16
|
+
declare export var LABEL_TEXT_SELECTOR: string;
|
|
17
|
+
declare export var TRIGGER_SELECTOR: string;
|
|
18
|
+
declare export var STYLES: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC;AAC7C,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,eAAe,EAAE,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,eAAe,OAAO,CAAC;AACzD,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,eAAe,QAAQ,CAAC;AAC3D,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,eAAe,aAAa,CAAC;AACrE,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,eAAe,UAAU,CAAC;AAE/D,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,eAAe,EAAE,CAAC;AACnD,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,gBAAgB,EAAE,CAAC;AACrD,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,qBAAqB,EAAE,CAAC;AAC/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,kBAAkB,EAAE,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG;;yBAEG,cAAc;;;;;;;;;;EAUrC,aAAa;EACb,gBAAgB;;;EAGhB,aAAa;;;;EAIb,aAAa;;;EAGb,aAAa;;;EAGb,cAAc;;;EAGd,mBAAmB;;;EAGnB,aAAa;;;;;;;;;;;;;EAab,aAAa;;;EAGb,aAAa;;;;EAIb,aAAa;;;;EAIb,cAAc,MAAM,aAAa;;;;EAIjC,aAAa;;;EAGb,aAAa;;;;CAId,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/dropdown",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.18.2-alpha",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"exports": "./dist/Dropdown.js",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"typescript": "~4.6.4"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@acusti/input-text": "^0.
|
|
29
|
+
"@acusti/input-text": "^0.11.0",
|
|
30
30
|
"@acusti/matchmaking": "^0.3.0",
|
|
31
|
-
"@acusti/styling": "^0.5.
|
|
31
|
+
"@acusti/styling": "^0.5.2-alpha",
|
|
32
32
|
"@acusti/use-is-out-of-bounds": "^0.5.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|