@oscarpalmer/toretto 0.27.0 → 0.29.0
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/event/delegation.js +18 -19
- package/dist/html.js +27 -19
- package/dist/internal/sanitize.js +6 -12
- package/dist/toretto.full.js +80 -126
- package/package.json +5 -4
- package/src/attribute/set.ts +10 -44
- package/src/data.ts +3 -15
- package/src/event/delegation.ts +29 -35
- package/src/event/index.ts +5 -23
- package/src/find/index.ts +10 -26
- package/src/find/relative.ts +4 -16
- package/src/focusable.ts +15 -51
- package/src/html.ts +48 -60
- package/src/internal/attribute.ts +11 -45
- package/src/internal/element-value.ts +0 -1
- package/src/internal/get-value.ts +2 -6
- package/src/internal/sanitize.ts +6 -44
- package/src/is.ts +1 -1
- package/src/style.ts +4 -18
- package/src/touch.ts +2 -6
- package/types/html.d.ts +2 -3
- package/types/internal/sanitize.d.ts +2 -13
package/src/attribute/set.ts
CHANGED
|
@@ -9,11 +9,7 @@ import type {Attribute, HTMLOrSVGElement, Property} from '../models';
|
|
|
9
9
|
* @param name Attribute name
|
|
10
10
|
* @param value Attribute value
|
|
11
11
|
*/
|
|
12
|
-
export function setAttribute(
|
|
13
|
-
element: HTMLOrSVGElement,
|
|
14
|
-
name: string,
|
|
15
|
-
value?: unknown,
|
|
16
|
-
): void;
|
|
12
|
+
export function setAttribute(element: HTMLOrSVGElement, name: string, value?: unknown): void;
|
|
17
13
|
|
|
18
14
|
/**
|
|
19
15
|
* Set an attribute on an element
|
|
@@ -22,16 +18,9 @@ export function setAttribute(
|
|
|
22
18
|
* @param element Element for attribute
|
|
23
19
|
* @param attribute Attribute to set
|
|
24
20
|
*/
|
|
25
|
-
export function setAttribute(
|
|
26
|
-
element: HTMLOrSVGElement,
|
|
27
|
-
attribute: Attr | Attribute,
|
|
28
|
-
): void;
|
|
21
|
+
export function setAttribute(element: HTMLOrSVGElement, attribute: Attr | Attribute): void;
|
|
29
22
|
|
|
30
|
-
export function setAttribute(
|
|
31
|
-
element: HTMLOrSVGElement,
|
|
32
|
-
first: unknown,
|
|
33
|
-
second?: unknown,
|
|
34
|
-
): void {
|
|
23
|
+
export function setAttribute(element: HTMLOrSVGElement, first: unknown, second?: unknown): void {
|
|
35
24
|
updateValue(element, first, second);
|
|
36
25
|
}
|
|
37
26
|
|
|
@@ -42,10 +31,7 @@ export function setAttribute(
|
|
|
42
31
|
* @param element Element for attributes
|
|
43
32
|
* @param attributes Attributes to set
|
|
44
33
|
*/
|
|
45
|
-
export function setAttributes(
|
|
46
|
-
element: HTMLOrSVGElement,
|
|
47
|
-
attributes: Array<Attr | Attribute>,
|
|
48
|
-
): void;
|
|
34
|
+
export function setAttributes(element: HTMLOrSVGElement, attributes: Array<Attr | Attribute>): void;
|
|
49
35
|
|
|
50
36
|
/**
|
|
51
37
|
* Set one or more attributes on an element
|
|
@@ -54,10 +40,7 @@ export function setAttributes(
|
|
|
54
40
|
* @param element Element for attributes
|
|
55
41
|
* @param attributes Attributes to set
|
|
56
42
|
*/
|
|
57
|
-
export function setAttributes(
|
|
58
|
-
element: HTMLOrSVGElement,
|
|
59
|
-
attributes: Record<string, unknown>,
|
|
60
|
-
): void;
|
|
43
|
+
export function setAttributes(element: HTMLOrSVGElement, attributes: Record<string, unknown>): void;
|
|
61
44
|
|
|
62
45
|
export function setAttributes(
|
|
63
46
|
element: HTMLOrSVGElement,
|
|
@@ -74,11 +57,7 @@ export function setAttributes(
|
|
|
74
57
|
* @param name Property name
|
|
75
58
|
* @param value Property value
|
|
76
59
|
*/
|
|
77
|
-
export function setProperty(
|
|
78
|
-
element: HTMLOrSVGElement,
|
|
79
|
-
name: string,
|
|
80
|
-
value: boolean | string,
|
|
81
|
-
): void;
|
|
60
|
+
export function setProperty(element: HTMLOrSVGElement, name: string, value: boolean | string): void;
|
|
82
61
|
|
|
83
62
|
/**
|
|
84
63
|
* Set a property on an element
|
|
@@ -87,16 +66,9 @@ export function setProperty(
|
|
|
87
66
|
* @param element Element for property
|
|
88
67
|
* @param property Property to set
|
|
89
68
|
*/
|
|
90
|
-
export function setProperty(
|
|
91
|
-
element: HTMLOrSVGElement,
|
|
92
|
-
property: Property,
|
|
93
|
-
): void;
|
|
69
|
+
export function setProperty(element: HTMLOrSVGElement, property: Property): void;
|
|
94
70
|
|
|
95
|
-
export function setProperty(
|
|
96
|
-
element: HTMLOrSVGElement,
|
|
97
|
-
first: unknown,
|
|
98
|
-
second?: unknown,
|
|
99
|
-
): void {
|
|
71
|
+
export function setProperty(element: HTMLOrSVGElement, first: unknown, second?: unknown): void {
|
|
100
72
|
updateValue(element, first, second);
|
|
101
73
|
}
|
|
102
74
|
|
|
@@ -107,10 +79,7 @@ export function setProperty(
|
|
|
107
79
|
* @param element Element for properties
|
|
108
80
|
* @param properties Properties to set
|
|
109
81
|
*/
|
|
110
|
-
export function setProperties(
|
|
111
|
-
element: HTMLOrSVGElement,
|
|
112
|
-
properties: Property[],
|
|
113
|
-
): void;
|
|
82
|
+
export function setProperties(element: HTMLOrSVGElement, properties: Property[]): void;
|
|
114
83
|
|
|
115
84
|
/**
|
|
116
85
|
* Set one or more properties on an element
|
|
@@ -119,10 +88,7 @@ export function setProperties(
|
|
|
119
88
|
* @param element Element for properties
|
|
120
89
|
* @param properties Properties to set
|
|
121
90
|
*/
|
|
122
|
-
export function setProperties(
|
|
123
|
-
element: HTMLOrSVGElement,
|
|
124
|
-
properties: Record<string, unknown>,
|
|
125
|
-
): void;
|
|
91
|
+
export function setProperties(element: HTMLOrSVGElement, properties: Record<string, unknown>): void;
|
|
126
92
|
|
|
127
93
|
export function setProperties(
|
|
128
94
|
element: HTMLOrSVGElement,
|
package/src/data.ts
CHANGED
|
@@ -12,11 +12,7 @@ import type {HTMLOrSVGElement} from './models';
|
|
|
12
12
|
* @param parse Parse values? _(defaults to `true`)_
|
|
13
13
|
* @returns Data value
|
|
14
14
|
*/
|
|
15
|
-
export function getData(
|
|
16
|
-
element: HTMLOrSVGElement,
|
|
17
|
-
key: string,
|
|
18
|
-
parse?: boolean,
|
|
19
|
-
): unknown;
|
|
15
|
+
export function getData(element: HTMLOrSVGElement, key: string, parse?: boolean): unknown;
|
|
20
16
|
|
|
21
17
|
/**
|
|
22
18
|
* Get keyed data values from an element
|
|
@@ -87,11 +83,7 @@ export function setData(element: HTMLOrSVGElement, data: PlainObject): void;
|
|
|
87
83
|
* @param key Data key
|
|
88
84
|
* @param value Data value
|
|
89
85
|
*/
|
|
90
|
-
export function setData(
|
|
91
|
-
element: HTMLOrSVGElement,
|
|
92
|
-
key: string,
|
|
93
|
-
value: unknown,
|
|
94
|
-
): void;
|
|
86
|
+
export function setData(element: HTMLOrSVGElement, key: string, value: unknown): void;
|
|
95
87
|
|
|
96
88
|
export function setData(
|
|
97
89
|
element: HTMLOrSVGElement,
|
|
@@ -101,11 +93,7 @@ export function setData(
|
|
|
101
93
|
setElementValues(element, first, second, updateDataAttribute);
|
|
102
94
|
}
|
|
103
95
|
|
|
104
|
-
function updateDataAttribute(
|
|
105
|
-
element: HTMLOrSVGElement,
|
|
106
|
-
key: string,
|
|
107
|
-
value: unknown,
|
|
108
|
-
): void {
|
|
96
|
+
function updateDataAttribute(element: HTMLOrSVGElement, key: string, value: unknown): void {
|
|
109
97
|
updateElementValue(
|
|
110
98
|
element,
|
|
111
99
|
getName(key),
|
package/src/event/delegation.ts
CHANGED
|
@@ -3,7 +3,7 @@ import type {CustomEventListener, RemovableEventListener} from '../models';
|
|
|
3
3
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
|
-
type
|
|
6
|
+
type DocumentWithListenerCounts = Document &
|
|
7
7
|
Partial<{
|
|
8
8
|
[key: string]: number;
|
|
9
9
|
}>;
|
|
@@ -14,20 +14,20 @@ export type EventTargetWithListeners = EventTarget &
|
|
|
14
14
|
}>;
|
|
15
15
|
|
|
16
16
|
function addDelegatedHandler(
|
|
17
|
-
document:
|
|
17
|
+
document: DocumentWithListenerCounts,
|
|
18
18
|
type: string,
|
|
19
19
|
name: string,
|
|
20
20
|
passive: boolean,
|
|
21
21
|
): void {
|
|
22
|
-
const
|
|
22
|
+
const count = `${name}${COUNT_SUFFIX}`;
|
|
23
23
|
|
|
24
|
-
if (document[
|
|
25
|
-
(document[
|
|
24
|
+
if (document[count] != null) {
|
|
25
|
+
(document[count] as number) += 1;
|
|
26
26
|
|
|
27
27
|
return;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
document[
|
|
30
|
+
document[count] = 1;
|
|
31
31
|
|
|
32
32
|
document.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, {
|
|
33
33
|
passive,
|
|
@@ -45,7 +45,7 @@ export function addDelegatedListener(
|
|
|
45
45
|
|
|
46
46
|
target[name]?.add(listener);
|
|
47
47
|
|
|
48
|
-
addDelegatedHandler(document as
|
|
48
|
+
addDelegatedHandler(document as DocumentWithListenerCounts, type, name, passive);
|
|
49
49
|
|
|
50
50
|
return () => {
|
|
51
51
|
removeDelegatedListener(target, type, name, listener, passive);
|
|
@@ -67,18 +67,20 @@ function delegatedEventHandler(this: boolean, event: Event): void {
|
|
|
67
67
|
const item = items[index] as EventTargetWithListeners;
|
|
68
68
|
const listeners = item[key];
|
|
69
69
|
|
|
70
|
-
if (
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
70
|
+
if ((item as unknown as HTMLButtonElement).disabled || listeners == null) {
|
|
71
|
+
continue;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
Object.defineProperty(event, 'currentTarget', {
|
|
75
|
+
configurable: true,
|
|
76
|
+
value: item,
|
|
77
|
+
});
|
|
75
78
|
|
|
76
|
-
|
|
77
|
-
|
|
79
|
+
for (const listener of listeners) {
|
|
80
|
+
(listener as EventListener).call(item, event);
|
|
78
81
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
+
if (event.cancelBubble) {
|
|
83
|
+
return;
|
|
82
84
|
}
|
|
83
85
|
}
|
|
84
86
|
}
|
|
@@ -101,22 +103,19 @@ export function getDelegatedName(
|
|
|
101
103
|
}
|
|
102
104
|
|
|
103
105
|
function removeDelegatedHandler(
|
|
104
|
-
document:
|
|
106
|
+
document: DocumentWithListenerCounts,
|
|
105
107
|
type: string,
|
|
106
108
|
name: string,
|
|
107
109
|
passive: boolean,
|
|
108
110
|
): void {
|
|
109
|
-
const
|
|
111
|
+
const count = `${name}${COUNT_SUFFIX}`;
|
|
110
112
|
|
|
111
|
-
(document[
|
|
113
|
+
(document[count] as number) -= 1;
|
|
112
114
|
|
|
113
|
-
if ((document[
|
|
114
|
-
document[
|
|
115
|
+
if ((document[count] as number) < 1) {
|
|
116
|
+
document[count] = undefined;
|
|
115
117
|
|
|
116
|
-
document.removeEventListener(
|
|
117
|
-
type,
|
|
118
|
-
passive ? HANDLER_PASSIVE : HANDLER_ACTIVE,
|
|
119
|
-
);
|
|
118
|
+
document.removeEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE);
|
|
120
119
|
}
|
|
121
120
|
}
|
|
122
121
|
|
|
@@ -135,22 +134,19 @@ export function removeDelegatedListener(
|
|
|
135
134
|
|
|
136
135
|
handlers.delete(listener);
|
|
137
136
|
|
|
138
|
-
if (handlers
|
|
137
|
+
if (handlers.size === 0) {
|
|
139
138
|
target[name] = undefined;
|
|
140
139
|
}
|
|
141
140
|
|
|
142
|
-
removeDelegatedHandler(
|
|
143
|
-
document as DocumentWithListeners,
|
|
144
|
-
type,
|
|
145
|
-
name,
|
|
146
|
-
passive,
|
|
147
|
-
);
|
|
141
|
+
removeDelegatedHandler(document as DocumentWithListenerCounts, type, name, passive);
|
|
148
142
|
|
|
149
143
|
return true;
|
|
150
144
|
}
|
|
151
145
|
|
|
152
146
|
//
|
|
153
147
|
|
|
148
|
+
const COUNT_SUFFIX = '.count';
|
|
149
|
+
|
|
154
150
|
const EVENT_PREFIX = '@';
|
|
155
151
|
|
|
156
152
|
const EVENT_SUFFIX_ACTIVE = ':active';
|
|
@@ -185,5 +181,3 @@ const EVENT_TYPES: Set<string> = new Set([
|
|
|
185
181
|
const HANDLER_ACTIVE: EventListener = delegatedEventHandler.bind(false);
|
|
186
182
|
|
|
187
183
|
const HANDLER_PASSIVE: EventListener = delegatedEventHandler.bind(true);
|
|
188
|
-
|
|
189
|
-
const LISTENERS_SUFFIX = ':listeners';
|
package/src/event/index.ts
CHANGED
|
@@ -2,11 +2,7 @@ import {noop} from '@oscarpalmer/atoms/function';
|
|
|
2
2
|
import {isPlainObject} from '@oscarpalmer/atoms/is';
|
|
3
3
|
import {getBoolean} from '../internal/get-value';
|
|
4
4
|
import {isEventTarget} from '../internal/is';
|
|
5
|
-
import type {
|
|
6
|
-
CustomEventListener,
|
|
7
|
-
EventPosition,
|
|
8
|
-
RemovableEventListener,
|
|
9
|
-
} from '../models';
|
|
5
|
+
import type {CustomEventListener, EventPosition, RemovableEventListener} from '../models';
|
|
10
6
|
import {
|
|
11
7
|
addDelegatedListener,
|
|
12
8
|
type EventTargetWithListeners,
|
|
@@ -73,11 +69,7 @@ export function dispatch<Type extends keyof HTMLElementEventMap>(
|
|
|
73
69
|
* @param type Type of event
|
|
74
70
|
* @param options Options for event _(bubbles and is cancelable by default)_
|
|
75
71
|
*/
|
|
76
|
-
export function dispatch(
|
|
77
|
-
target: EventTarget,
|
|
78
|
-
type: string,
|
|
79
|
-
options?: CustomEventInit,
|
|
80
|
-
): void;
|
|
72
|
+
export function dispatch(target: EventTarget, type: string, options?: CustomEventInit): void;
|
|
81
73
|
|
|
82
74
|
export function dispatch<Type extends keyof HTMLElementEventMap>(
|
|
83
75
|
target: EventTarget,
|
|
@@ -94,9 +86,7 @@ export function dispatch<Type extends keyof HTMLElementEventMap>(
|
|
|
94
86
|
* @param event Pointer event
|
|
95
87
|
* @returns X- and Y-coordinates
|
|
96
88
|
*/
|
|
97
|
-
export function getPosition(
|
|
98
|
-
event: MouseEvent | TouchEvent,
|
|
99
|
-
): EventPosition | undefined {
|
|
89
|
+
export function getPosition(event: MouseEvent | TouchEvent): EventPosition | undefined {
|
|
100
90
|
let x: number | undefined;
|
|
101
91
|
let y: number | undefined;
|
|
102
92
|
|
|
@@ -152,11 +142,7 @@ export function off(
|
|
|
152
142
|
listener: EventListener | CustomEventListener,
|
|
153
143
|
options?: EventListenerOptions,
|
|
154
144
|
): void {
|
|
155
|
-
if (
|
|
156
|
-
!isEventTarget(target) ||
|
|
157
|
-
typeof type !== 'string' ||
|
|
158
|
-
typeof listener !== 'function'
|
|
159
|
-
) {
|
|
145
|
+
if (!isEventTarget(target) || typeof type !== 'string' || typeof listener !== 'function') {
|
|
160
146
|
return;
|
|
161
147
|
}
|
|
162
148
|
|
|
@@ -211,11 +197,7 @@ export function on(
|
|
|
211
197
|
listener: EventListener | CustomEventListener,
|
|
212
198
|
options?: AddEventListenerOptions,
|
|
213
199
|
): RemovableEventListener {
|
|
214
|
-
if (
|
|
215
|
-
!isEventTarget(target) ||
|
|
216
|
-
typeof type !== 'string' ||
|
|
217
|
-
typeof listener !== 'function'
|
|
218
|
-
) {
|
|
200
|
+
if (!isEventTarget(target) || typeof type !== 'string' || typeof listener !== 'function') {
|
|
219
201
|
return noop;
|
|
220
202
|
}
|
|
221
203
|
|
package/src/find/index.ts
CHANGED
|
@@ -7,10 +7,7 @@ import type {Selector} from '../models';
|
|
|
7
7
|
* @param context Context to search within _(defaults to `document`)_
|
|
8
8
|
* @returns Found element or `null`
|
|
9
9
|
*/
|
|
10
|
-
export function findElement(
|
|
11
|
-
selector: string,
|
|
12
|
-
context?: Selector | null,
|
|
13
|
-
): Element | null {
|
|
10
|
+
export function findElement(selector: string, context?: Selector | null): Element | null {
|
|
14
11
|
return findElementOrElements(selector, context, true) as never;
|
|
15
12
|
}
|
|
16
13
|
|
|
@@ -24,17 +21,10 @@ function findElementOrElements(
|
|
|
24
21
|
const contexts =
|
|
25
22
|
context == null
|
|
26
23
|
? [document]
|
|
27
|
-
: (findElementOrElements(context, undefined, false) as Element[]).filter(
|
|
28
|
-
isContext,
|
|
29
|
-
);
|
|
24
|
+
: (findElementOrElements(context, undefined, false) as Element[]).filter(isContext);
|
|
30
25
|
|
|
31
26
|
if (typeof selector === 'string') {
|
|
32
|
-
return findElementOrElementsForSelector(
|
|
33
|
-
selector,
|
|
34
|
-
contexts,
|
|
35
|
-
callback,
|
|
36
|
-
single,
|
|
37
|
-
);
|
|
27
|
+
return findElementOrElementsForSelector(selector, contexts, callback, single);
|
|
38
28
|
}
|
|
39
29
|
|
|
40
30
|
let array: unknown[];
|
|
@@ -59,9 +49,10 @@ function findElementOrElementsForSelector(
|
|
|
59
49
|
const result: Element[] = [];
|
|
60
50
|
|
|
61
51
|
for (let index = 0; index < length; index += 1) {
|
|
62
|
-
const value = (
|
|
63
|
-
|
|
64
|
-
|
|
52
|
+
const value = (contexts[index][callback] as (selector: string) => Node | null)(selector) as
|
|
53
|
+
| Element
|
|
54
|
+
| Element[]
|
|
55
|
+
| null;
|
|
65
56
|
|
|
66
57
|
if (single) {
|
|
67
58
|
if (value == null) {
|
|
@@ -74,9 +65,7 @@ function findElementOrElementsForSelector(
|
|
|
74
65
|
result.push(...Array.from(value as Element[]));
|
|
75
66
|
}
|
|
76
67
|
|
|
77
|
-
return single
|
|
78
|
-
? null
|
|
79
|
-
: result.filter((value, index, array) => array.indexOf(value) === index);
|
|
68
|
+
return single ? null : result.filter((value, index, array) => array.indexOf(value) === index);
|
|
80
69
|
}
|
|
81
70
|
|
|
82
71
|
function findElementOrElementsFromNodes(
|
|
@@ -104,9 +93,7 @@ function findElementOrElementsFromNodes(
|
|
|
104
93
|
element != null &&
|
|
105
94
|
(context == null ||
|
|
106
95
|
contexts.length === 0 ||
|
|
107
|
-
contexts.some(
|
|
108
|
-
context => context === element || context.contains(element),
|
|
109
|
-
)) &&
|
|
96
|
+
contexts.some(context => context === element || context.contains(element))) &&
|
|
110
97
|
!result.includes(element)
|
|
111
98
|
) {
|
|
112
99
|
result.push(element);
|
|
@@ -122,10 +109,7 @@ function findElementOrElementsFromNodes(
|
|
|
122
109
|
* @param context Context to search within _(defaults to `document`)_
|
|
123
110
|
* @returns Found elements
|
|
124
111
|
*/
|
|
125
|
-
export function findElements(
|
|
126
|
-
selector: Selector,
|
|
127
|
-
context?: Selector | null,
|
|
128
|
-
): Element[] {
|
|
112
|
+
export function findElements(selector: Selector, context?: Selector | null): Element[] {
|
|
129
113
|
return findElementOrElements(selector, context, false) as never;
|
|
130
114
|
}
|
|
131
115
|
|
package/src/find/relative.ts
CHANGED
|
@@ -2,10 +2,7 @@
|
|
|
2
2
|
* - Get the distance between two elements _(i.e., the amount of nodes of between them)_
|
|
3
3
|
* - If the distance cannot be calculated, `-1` is returned
|
|
4
4
|
*/
|
|
5
|
-
function getDistanceBetweenElements(
|
|
6
|
-
origin: Element,
|
|
7
|
-
target: Element,
|
|
8
|
-
): number | undefined {
|
|
5
|
+
function getDistanceBetweenElements(origin: Element, target: Element): number | undefined {
|
|
9
6
|
if (origin === target || origin.parentElement === target) {
|
|
10
7
|
return 0;
|
|
11
8
|
}
|
|
@@ -20,12 +17,7 @@ function getDistanceBetweenElements(
|
|
|
20
17
|
const beforeOrInside = !!(comparison & 2 || comparison & 8);
|
|
21
18
|
|
|
22
19
|
if (beforeOrInside || !!(comparison & 4 || comparison & 16)) {
|
|
23
|
-
return (
|
|
24
|
-
traverse(
|
|
25
|
-
beforeOrInside ? origin : target,
|
|
26
|
-
beforeOrInside ? target : origin,
|
|
27
|
-
) ?? -1
|
|
28
|
-
);
|
|
20
|
+
return traverse(beforeOrInside ? origin : target, beforeOrInside ? target : origin) ?? -1;
|
|
29
21
|
}
|
|
30
22
|
}
|
|
31
23
|
|
|
@@ -137,9 +129,7 @@ export function findRelatives(
|
|
|
137
129
|
|
|
138
130
|
return minimum == null
|
|
139
131
|
? []
|
|
140
|
-
: distances
|
|
141
|
-
.filter(found => found.distance === minimum)
|
|
142
|
-
.map(found => found.element);
|
|
132
|
+
: distances.filter(found => found.distance === minimum).map(found => found.element);
|
|
143
133
|
}
|
|
144
134
|
|
|
145
135
|
function traverse(from: Element, to: Element): number | undefined {
|
|
@@ -161,9 +151,7 @@ function traverse(from: Element, to: Element): number | undefined {
|
|
|
161
151
|
const children = [...(parent.children ?? [])];
|
|
162
152
|
|
|
163
153
|
if (children.includes(to)) {
|
|
164
|
-
return (
|
|
165
|
-
distance + Math.abs(children.indexOf(current) - children.indexOf(to))
|
|
166
|
-
);
|
|
154
|
+
return distance + Math.abs(children.indexOf(current) - children.indexOf(to));
|
|
167
155
|
}
|
|
168
156
|
|
|
169
157
|
index = children.findIndex(child => child.contains(to));
|
package/src/focusable.ts
CHANGED
|
@@ -41,8 +41,7 @@ function getTabIndex(element: Element): number {
|
|
|
41
41
|
|
|
42
42
|
if (
|
|
43
43
|
tabIndex < TABINDEX_BASE &&
|
|
44
|
-
(EXPRESSION_SPECIAL_TABINDEX.test(element.tagName) ||
|
|
45
|
-
isEditable(element)) &&
|
|
44
|
+
(EXPRESSION_SPECIAL_TABINDEX.test(element.tagName) || isEditable(element)) &&
|
|
46
45
|
!hasTabIndex(element)
|
|
47
46
|
) {
|
|
48
47
|
return TABINDEX_BASE;
|
|
@@ -51,11 +50,7 @@ function getTabIndex(element: Element): number {
|
|
|
51
50
|
return tabIndex;
|
|
52
51
|
}
|
|
53
52
|
|
|
54
|
-
function getValidElements(
|
|
55
|
-
parent: Element,
|
|
56
|
-
filters: Filter[],
|
|
57
|
-
tabbable: boolean,
|
|
58
|
-
): Element[] {
|
|
53
|
+
function getValidElements(parent: Element, filters: Filter[], tabbable: boolean): Element[] {
|
|
59
54
|
if (!(parent instanceof Element)) {
|
|
60
55
|
return [];
|
|
61
56
|
}
|
|
@@ -88,10 +83,7 @@ function getValidElements(
|
|
|
88
83
|
if (item.tabIndex === TABINDEX_BASE) {
|
|
89
84
|
zeroed.push(item.element);
|
|
90
85
|
} else {
|
|
91
|
-
indiced[item.tabIndex] = [
|
|
92
|
-
...(indiced[item.tabIndex] ?? []),
|
|
93
|
-
item.element,
|
|
94
|
-
];
|
|
86
|
+
indiced[item.tabIndex] = [...(indiced[item.tabIndex] ?? []), item.element];
|
|
95
87
|
}
|
|
96
88
|
}
|
|
97
89
|
|
|
@@ -99,16 +91,11 @@ function getValidElements(
|
|
|
99
91
|
}
|
|
100
92
|
|
|
101
93
|
function hasTabIndex(element: Element): boolean {
|
|
102
|
-
return !Number.isNaN(
|
|
103
|
-
Number.parseInt(element.getAttribute(ATTRIBUTE_TABINDEX) as string, 10),
|
|
104
|
-
);
|
|
94
|
+
return !Number.isNaN(Number.parseInt(element.getAttribute(ATTRIBUTE_TABINDEX) as string, 10));
|
|
105
95
|
}
|
|
106
96
|
|
|
107
97
|
function isDisabled(item: ElementWithTabIndex): boolean {
|
|
108
|
-
if (
|
|
109
|
-
EXPRESSION_DISABLEABLE.test(item.element.tagName) &&
|
|
110
|
-
isDisabledFromFieldset(item.element)
|
|
111
|
-
) {
|
|
98
|
+
if (EXPRESSION_DISABLEABLE.test(item.element.tagName) && isDisabledFromFieldset(item.element)) {
|
|
112
99
|
return true;
|
|
113
100
|
}
|
|
114
101
|
|
|
@@ -127,10 +114,7 @@ function isDisabledFromFieldset(element: Element): boolean {
|
|
|
127
114
|
const child = children[index];
|
|
128
115
|
|
|
129
116
|
if (child instanceof HTMLLegendElement) {
|
|
130
|
-
return (
|
|
131
|
-
parent.matches(SELECTOR_FIELDSET_DISABLED) ||
|
|
132
|
-
!child.contains(element)
|
|
133
|
-
);
|
|
117
|
+
return parent.matches(SELECTOR_FIELDSET_DISABLED) || !child.contains(element);
|
|
134
118
|
}
|
|
135
119
|
}
|
|
136
120
|
|
|
@@ -144,9 +128,7 @@ function isDisabledFromFieldset(element: Element): boolean {
|
|
|
144
128
|
}
|
|
145
129
|
|
|
146
130
|
function isEditable(element: Element): boolean {
|
|
147
|
-
return EXPRESSION_TRUEISH.test(
|
|
148
|
-
element.getAttribute(ATTRIBUTE_CONTENTEDITABLE) as string,
|
|
149
|
-
);
|
|
131
|
+
return EXPRESSION_TRUEISH.test(element.getAttribute(ATTRIBUTE_CONTENTEDITABLE) as string);
|
|
150
132
|
}
|
|
151
133
|
|
|
152
134
|
/**
|
|
@@ -155,25 +137,20 @@ function isEditable(element: Element): boolean {
|
|
|
155
137
|
* @returns `true` if focusable, otherwise `false`
|
|
156
138
|
*/
|
|
157
139
|
export function isFocusable(element: Element): boolean {
|
|
158
|
-
return element instanceof Element
|
|
159
|
-
? isValidElement(element, FILTERS_FOCUSABLE, false)
|
|
160
|
-
: false;
|
|
140
|
+
return element instanceof Element ? isValidElement(element, FILTERS_FOCUSABLE, false) : false;
|
|
161
141
|
}
|
|
162
142
|
|
|
163
143
|
function isHidden(item: ElementWithTabIndex): boolean {
|
|
164
144
|
if (
|
|
165
145
|
((item.element as HTMLElement).hidden ?? false) ||
|
|
166
|
-
(item.element instanceof HTMLInputElement &&
|
|
167
|
-
item.element.type === STYLE_HIDDEN)
|
|
146
|
+
(item.element instanceof HTMLInputElement && item.element.type === STYLE_HIDDEN)
|
|
168
147
|
) {
|
|
169
148
|
return true;
|
|
170
149
|
}
|
|
171
150
|
|
|
172
151
|
const isDirectSummary = item.element.matches(SELECTOR_SUMMARY_FIRST);
|
|
173
152
|
|
|
174
|
-
const nodeUnderDetails = isDirectSummary
|
|
175
|
-
? item.element.parentElement
|
|
176
|
-
: item.element;
|
|
153
|
+
const nodeUnderDetails = isDirectSummary ? item.element.parentElement : item.element;
|
|
177
154
|
|
|
178
155
|
if (nodeUnderDetails?.matches(SELECTOR_DETAILS_CLOSED_CHILDREN) ?? false) {
|
|
179
156
|
return true;
|
|
@@ -193,9 +170,7 @@ function isHidden(item: ElementWithTabIndex): boolean {
|
|
|
193
170
|
function isInert(item: ElementWithTabIndex): boolean {
|
|
194
171
|
return (
|
|
195
172
|
((item.element as InertElement).inert ?? false) ||
|
|
196
|
-
EXPRESSION_TRUEISH.test(
|
|
197
|
-
item.element.getAttribute(ATTRIBUTE_INERT) as string,
|
|
198
|
-
) ||
|
|
173
|
+
EXPRESSION_TRUEISH.test(item.element.getAttribute(ATTRIBUTE_INERT) as string) ||
|
|
199
174
|
(item.element.parentElement != null &&
|
|
200
175
|
isInert({
|
|
201
176
|
element: item.element.parentElement,
|
|
@@ -218,10 +193,7 @@ function isNotTabbableRadio(item: ElementWithTabIndex): boolean {
|
|
|
218
193
|
return false;
|
|
219
194
|
}
|
|
220
195
|
|
|
221
|
-
const parent =
|
|
222
|
-
item.element.form ??
|
|
223
|
-
item.element.getRootNode?.() ??
|
|
224
|
-
item.element.ownerDocument;
|
|
196
|
+
const parent = item.element.form ?? item.element.getRootNode?.() ?? item.element.ownerDocument;
|
|
225
197
|
|
|
226
198
|
const realName = CSS?.escape?.(item.element.name) ?? item.element.name;
|
|
227
199
|
|
|
@@ -239,9 +211,7 @@ function isNotTabbableRadio(item: ElementWithTabIndex): boolean {
|
|
|
239
211
|
function isSummarised(item: ElementWithTabIndex): boolean {
|
|
240
212
|
return (
|
|
241
213
|
item.element instanceof HTMLDetailsElement &&
|
|
242
|
-
[...item.element.children].some(child =>
|
|
243
|
-
EXPRESSION_SUMMARY.test(child.tagName),
|
|
244
|
-
)
|
|
214
|
+
[...item.element.children].some(child => EXPRESSION_SUMMARY.test(child.tagName))
|
|
245
215
|
);
|
|
246
216
|
}
|
|
247
217
|
|
|
@@ -251,16 +221,10 @@ function isSummarised(item: ElementWithTabIndex): boolean {
|
|
|
251
221
|
* @returns `true` if tabbable, otherwise `false`
|
|
252
222
|
*/
|
|
253
223
|
export function isTabbable(element: Element): boolean {
|
|
254
|
-
return element instanceof Element
|
|
255
|
-
? isValidElement(element, FILTERS_TABBABLE, true)
|
|
256
|
-
: false;
|
|
224
|
+
return element instanceof Element ? isValidElement(element, FILTERS_TABBABLE, true) : false;
|
|
257
225
|
}
|
|
258
226
|
|
|
259
|
-
function isValidElement(
|
|
260
|
-
element: Element,
|
|
261
|
-
filters: Filter[],
|
|
262
|
-
tabbable: boolean,
|
|
263
|
-
): boolean {
|
|
227
|
+
function isValidElement(element: Element, filters: Filter[], tabbable: boolean): boolean {
|
|
264
228
|
const item = getItem(element, tabbable);
|
|
265
229
|
|
|
266
230
|
return !filters.some(filter => filter(item));
|