@digipair/skill-web-spectrum 0.113.1 → 0.114.2
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/README.md +7 -0
- package/{flow.cjs.js → dist/flow.cjs.js} +21 -24
- package/{flow.esm.js → dist/flow.esm.js} +21 -24
- package/dist/focus-visible.cjs.js +297 -0
- package/dist/focus-visible.esm.js +295 -0
- package/{index.cjs.js → dist/index.cjs.js} +4212 -4525
- package/{index.esm.js → dist/index.esm.js} +4212 -4525
- package/{libs/skill-web-spectrum → dist}/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -0
- package/{libs/skill-web-spectrum → dist}/src/lib/skill-web-spectrum.d.ts +1 -0
- package/dist/src/lib/skill-web-spectrum.d.ts.map +1 -0
- package/package.json +26 -5
- package/focus-visible.cjs.js +0 -289
- package/focus-visible.esm.js +0 -287
- package/index.d.ts +0 -1
- /package/{index.cjs.d.ts → dist/index.d.ts} +0 -0
- /package/{schema.fr.json → dist/schema.fr.json} +0 -0
- /package/{schema.json → dist/schema.json} +0 -0
package/README.md
ADDED
|
@@ -20,7 +20,6 @@ function _defineProperties$2(target, props) {
|
|
|
20
20
|
}
|
|
21
21
|
function _create_class$2(Constructor, protoProps, staticProps) {
|
|
22
22
|
if (protoProps) _defineProperties$2(Constructor.prototype, protoProps);
|
|
23
|
-
if (staticProps) _defineProperties$2(Constructor, staticProps);
|
|
24
23
|
return Constructor;
|
|
25
24
|
}
|
|
26
25
|
var SizeCache = /*#__PURE__*/ function() {
|
|
@@ -90,7 +89,6 @@ function _defineProperties$1(target, props) {
|
|
|
90
89
|
}
|
|
91
90
|
function _create_class$1(Constructor, protoProps, staticProps) {
|
|
92
91
|
if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
|
|
93
|
-
if (staticProps) _defineProperties$1(Constructor, staticProps);
|
|
94
92
|
return Constructor;
|
|
95
93
|
}
|
|
96
94
|
function _define_property$1(obj, key, value) {
|
|
@@ -107,7 +105,7 @@ function _define_property$1(obj, key, value) {
|
|
|
107
105
|
return obj;
|
|
108
106
|
}
|
|
109
107
|
function dim1(direction) {
|
|
110
|
-
return direction ===
|
|
108
|
+
return direction === 'horizontal' ? 'width' : 'height';
|
|
111
109
|
}
|
|
112
110
|
var BaseLayout = /*#__PURE__*/ function() {
|
|
113
111
|
function BaseLayout(hostSink, config) {
|
|
@@ -161,16 +159,16 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
161
159
|
*/ this._last = -1;
|
|
162
160
|
/**
|
|
163
161
|
* Length in the scrolling direction.
|
|
164
|
-
*/ this._sizeDim =
|
|
162
|
+
*/ this._sizeDim = 'height';
|
|
165
163
|
/**
|
|
166
164
|
* Length in the non-scrolling direction.
|
|
167
|
-
*/ this._secondarySizeDim =
|
|
165
|
+
*/ this._secondarySizeDim = 'width';
|
|
168
166
|
/**
|
|
169
167
|
* Position in the scrolling direction.
|
|
170
|
-
*/ this._positionDim =
|
|
168
|
+
*/ this._positionDim = 'top';
|
|
171
169
|
/**
|
|
172
170
|
* Position in the non-scrolling direction.
|
|
173
|
-
*/ this._secondaryPositionDim =
|
|
171
|
+
*/ this._secondaryPositionDim = 'left';
|
|
174
172
|
/**
|
|
175
173
|
* Current scroll offset in pixels.
|
|
176
174
|
*/ this._scrollPosition = 0;
|
|
@@ -202,7 +200,7 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
202
200
|
key: "_getDefaultConfig",
|
|
203
201
|
value: function _getDefaultConfig() {
|
|
204
202
|
return {
|
|
205
|
-
direction:
|
|
203
|
+
direction: 'vertical'
|
|
206
204
|
};
|
|
207
205
|
}
|
|
208
206
|
},
|
|
@@ -247,13 +245,13 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
247
245
|
},
|
|
248
246
|
set: function set(dir) {
|
|
249
247
|
// Force it to be either horizontal or vertical.
|
|
250
|
-
dir = dir ===
|
|
248
|
+
dir = dir === 'horizontal' ? dir : 'vertical';
|
|
251
249
|
if (dir !== this._direction) {
|
|
252
250
|
this._direction = dir;
|
|
253
|
-
this._sizeDim = dir ===
|
|
254
|
-
this._secondarySizeDim = dir ===
|
|
255
|
-
this._positionDim = dir ===
|
|
256
|
-
this._secondaryPositionDim = dir ===
|
|
251
|
+
this._sizeDim = dir === 'horizontal' ? 'width' : 'height';
|
|
252
|
+
this._secondarySizeDim = dir === 'horizontal' ? 'height' : 'width';
|
|
253
|
+
this._positionDim = dir === 'horizontal' ? 'left' : 'top';
|
|
254
|
+
this._secondaryPositionDim = dir === 'horizontal' ? 'top' : 'left';
|
|
257
255
|
this._triggerReflow();
|
|
258
256
|
}
|
|
259
257
|
}
|
|
@@ -419,7 +417,7 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
419
417
|
var _this_pin = this.pin, index = _this_pin.index, block = _this_pin.block;
|
|
420
418
|
this._scrollPosition = this._calculateScrollIntoViewPosition({
|
|
421
419
|
index: index,
|
|
422
|
-
block: block ||
|
|
420
|
+
block: block || 'start'
|
|
423
421
|
}) - this.offsetWithinScroller[this._positionDim];
|
|
424
422
|
this._scrollError = lastScrollPosition - this._scrollPosition;
|
|
425
423
|
}
|
|
@@ -443,13 +441,13 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
443
441
|
var index = Math.min(this.items.length, Math.max(0, options.index));
|
|
444
442
|
var itemStartPosition = this._getItemPosition(index)[this._positionDim];
|
|
445
443
|
var scrollPosition = itemStartPosition;
|
|
446
|
-
if (block !==
|
|
444
|
+
if (block !== 'start') {
|
|
447
445
|
var itemSize = this._getItemSize(index)[this._sizeDim];
|
|
448
|
-
if (block ===
|
|
446
|
+
if (block === 'center') {
|
|
449
447
|
scrollPosition = itemStartPosition - 0.5 * this._viewDim1 + 0.5 * itemSize;
|
|
450
448
|
} else {
|
|
451
449
|
var itemEndPosition = itemStartPosition - this._viewDim1 + itemSize;
|
|
452
|
-
if (block ===
|
|
450
|
+
if (block === 'end') {
|
|
453
451
|
scrollPosition = itemEndPosition;
|
|
454
452
|
} else {
|
|
455
453
|
// block === 'nearest'
|
|
@@ -472,7 +470,7 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
472
470
|
key: "_sendUnpinnedMessage",
|
|
473
471
|
value: function _sendUnpinnedMessage() {
|
|
474
472
|
this._hostSink({
|
|
475
|
-
type:
|
|
473
|
+
type: 'unpinned'
|
|
476
474
|
});
|
|
477
475
|
}
|
|
478
476
|
},
|
|
@@ -480,7 +478,7 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
480
478
|
key: "_sendVisibilityChangedMessage",
|
|
481
479
|
value: function _sendVisibilityChangedMessage() {
|
|
482
480
|
this._hostSink({
|
|
483
|
-
type:
|
|
481
|
+
type: 'visibilityChanged',
|
|
484
482
|
firstVisible: this._firstVisible,
|
|
485
483
|
lastVisible: this._lastVisible
|
|
486
484
|
});
|
|
@@ -497,7 +495,7 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
497
495
|
}
|
|
498
496
|
var _obj;
|
|
499
497
|
var message = {
|
|
500
|
-
type:
|
|
498
|
+
type: 'stateChanged',
|
|
501
499
|
scrollSize: (_obj = {}, _define_property$1(_obj, this._sizeDim, this._scrollSize), _define_property$1(_obj, this._secondarySizeDim, null), _obj),
|
|
502
500
|
range: {
|
|
503
501
|
first: this._first,
|
|
@@ -607,7 +605,6 @@ function _defineProperties(target, props) {
|
|
|
607
605
|
}
|
|
608
606
|
function _create_class(Constructor, protoProps, staticProps) {
|
|
609
607
|
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
610
|
-
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
611
608
|
return Constructor;
|
|
612
609
|
}
|
|
613
610
|
function _define_property(obj, key, value) {
|
|
@@ -729,13 +726,13 @@ var flow = function(config) {
|
|
|
729
726
|
}, config);
|
|
730
727
|
};
|
|
731
728
|
function leadingMargin(direction) {
|
|
732
|
-
return direction ===
|
|
729
|
+
return direction === 'horizontal' ? 'marginLeft' : 'marginTop';
|
|
733
730
|
}
|
|
734
731
|
function trailingMargin(direction) {
|
|
735
|
-
return direction ===
|
|
732
|
+
return direction === 'horizontal' ? 'marginRight' : 'marginBottom';
|
|
736
733
|
}
|
|
737
734
|
function offset(direction) {
|
|
738
|
-
return direction ===
|
|
735
|
+
return direction === 'horizontal' ? 'xOffset' : 'yOffset';
|
|
739
736
|
}
|
|
740
737
|
function collapseMargins(a, b) {
|
|
741
738
|
var _Math, _Math1;
|
|
@@ -18,7 +18,6 @@ function _defineProperties$2(target, props) {
|
|
|
18
18
|
}
|
|
19
19
|
function _create_class$2(Constructor, protoProps, staticProps) {
|
|
20
20
|
if (protoProps) _defineProperties$2(Constructor.prototype, protoProps);
|
|
21
|
-
if (staticProps) _defineProperties$2(Constructor, staticProps);
|
|
22
21
|
return Constructor;
|
|
23
22
|
}
|
|
24
23
|
var SizeCache = /*#__PURE__*/ function() {
|
|
@@ -88,7 +87,6 @@ function _defineProperties$1(target, props) {
|
|
|
88
87
|
}
|
|
89
88
|
function _create_class$1(Constructor, protoProps, staticProps) {
|
|
90
89
|
if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
|
|
91
|
-
if (staticProps) _defineProperties$1(Constructor, staticProps);
|
|
92
90
|
return Constructor;
|
|
93
91
|
}
|
|
94
92
|
function _define_property$1(obj, key, value) {
|
|
@@ -105,7 +103,7 @@ function _define_property$1(obj, key, value) {
|
|
|
105
103
|
return obj;
|
|
106
104
|
}
|
|
107
105
|
function dim1(direction) {
|
|
108
|
-
return direction ===
|
|
106
|
+
return direction === 'horizontal' ? 'width' : 'height';
|
|
109
107
|
}
|
|
110
108
|
var BaseLayout = /*#__PURE__*/ function() {
|
|
111
109
|
function BaseLayout(hostSink, config) {
|
|
@@ -159,16 +157,16 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
159
157
|
*/ this._last = -1;
|
|
160
158
|
/**
|
|
161
159
|
* Length in the scrolling direction.
|
|
162
|
-
*/ this._sizeDim =
|
|
160
|
+
*/ this._sizeDim = 'height';
|
|
163
161
|
/**
|
|
164
162
|
* Length in the non-scrolling direction.
|
|
165
|
-
*/ this._secondarySizeDim =
|
|
163
|
+
*/ this._secondarySizeDim = 'width';
|
|
166
164
|
/**
|
|
167
165
|
* Position in the scrolling direction.
|
|
168
|
-
*/ this._positionDim =
|
|
166
|
+
*/ this._positionDim = 'top';
|
|
169
167
|
/**
|
|
170
168
|
* Position in the non-scrolling direction.
|
|
171
|
-
*/ this._secondaryPositionDim =
|
|
169
|
+
*/ this._secondaryPositionDim = 'left';
|
|
172
170
|
/**
|
|
173
171
|
* Current scroll offset in pixels.
|
|
174
172
|
*/ this._scrollPosition = 0;
|
|
@@ -200,7 +198,7 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
200
198
|
key: "_getDefaultConfig",
|
|
201
199
|
value: function _getDefaultConfig() {
|
|
202
200
|
return {
|
|
203
|
-
direction:
|
|
201
|
+
direction: 'vertical'
|
|
204
202
|
};
|
|
205
203
|
}
|
|
206
204
|
},
|
|
@@ -245,13 +243,13 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
245
243
|
},
|
|
246
244
|
set: function set(dir) {
|
|
247
245
|
// Force it to be either horizontal or vertical.
|
|
248
|
-
dir = dir ===
|
|
246
|
+
dir = dir === 'horizontal' ? dir : 'vertical';
|
|
249
247
|
if (dir !== this._direction) {
|
|
250
248
|
this._direction = dir;
|
|
251
|
-
this._sizeDim = dir ===
|
|
252
|
-
this._secondarySizeDim = dir ===
|
|
253
|
-
this._positionDim = dir ===
|
|
254
|
-
this._secondaryPositionDim = dir ===
|
|
249
|
+
this._sizeDim = dir === 'horizontal' ? 'width' : 'height';
|
|
250
|
+
this._secondarySizeDim = dir === 'horizontal' ? 'height' : 'width';
|
|
251
|
+
this._positionDim = dir === 'horizontal' ? 'left' : 'top';
|
|
252
|
+
this._secondaryPositionDim = dir === 'horizontal' ? 'top' : 'left';
|
|
255
253
|
this._triggerReflow();
|
|
256
254
|
}
|
|
257
255
|
}
|
|
@@ -417,7 +415,7 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
417
415
|
var _this_pin = this.pin, index = _this_pin.index, block = _this_pin.block;
|
|
418
416
|
this._scrollPosition = this._calculateScrollIntoViewPosition({
|
|
419
417
|
index: index,
|
|
420
|
-
block: block ||
|
|
418
|
+
block: block || 'start'
|
|
421
419
|
}) - this.offsetWithinScroller[this._positionDim];
|
|
422
420
|
this._scrollError = lastScrollPosition - this._scrollPosition;
|
|
423
421
|
}
|
|
@@ -441,13 +439,13 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
441
439
|
var index = Math.min(this.items.length, Math.max(0, options.index));
|
|
442
440
|
var itemStartPosition = this._getItemPosition(index)[this._positionDim];
|
|
443
441
|
var scrollPosition = itemStartPosition;
|
|
444
|
-
if (block !==
|
|
442
|
+
if (block !== 'start') {
|
|
445
443
|
var itemSize = this._getItemSize(index)[this._sizeDim];
|
|
446
|
-
if (block ===
|
|
444
|
+
if (block === 'center') {
|
|
447
445
|
scrollPosition = itemStartPosition - 0.5 * this._viewDim1 + 0.5 * itemSize;
|
|
448
446
|
} else {
|
|
449
447
|
var itemEndPosition = itemStartPosition - this._viewDim1 + itemSize;
|
|
450
|
-
if (block ===
|
|
448
|
+
if (block === 'end') {
|
|
451
449
|
scrollPosition = itemEndPosition;
|
|
452
450
|
} else {
|
|
453
451
|
// block === 'nearest'
|
|
@@ -470,7 +468,7 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
470
468
|
key: "_sendUnpinnedMessage",
|
|
471
469
|
value: function _sendUnpinnedMessage() {
|
|
472
470
|
this._hostSink({
|
|
473
|
-
type:
|
|
471
|
+
type: 'unpinned'
|
|
474
472
|
});
|
|
475
473
|
}
|
|
476
474
|
},
|
|
@@ -478,7 +476,7 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
478
476
|
key: "_sendVisibilityChangedMessage",
|
|
479
477
|
value: function _sendVisibilityChangedMessage() {
|
|
480
478
|
this._hostSink({
|
|
481
|
-
type:
|
|
479
|
+
type: 'visibilityChanged',
|
|
482
480
|
firstVisible: this._firstVisible,
|
|
483
481
|
lastVisible: this._lastVisible
|
|
484
482
|
});
|
|
@@ -495,7 +493,7 @@ var BaseLayout = /*#__PURE__*/ function() {
|
|
|
495
493
|
}
|
|
496
494
|
var _obj;
|
|
497
495
|
var message = {
|
|
498
|
-
type:
|
|
496
|
+
type: 'stateChanged',
|
|
499
497
|
scrollSize: (_obj = {}, _define_property$1(_obj, this._sizeDim, this._scrollSize), _define_property$1(_obj, this._secondarySizeDim, null), _obj),
|
|
500
498
|
range: {
|
|
501
499
|
first: this._first,
|
|
@@ -605,7 +603,6 @@ function _defineProperties(target, props) {
|
|
|
605
603
|
}
|
|
606
604
|
function _create_class(Constructor, protoProps, staticProps) {
|
|
607
605
|
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
608
|
-
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
609
606
|
return Constructor;
|
|
610
607
|
}
|
|
611
608
|
function _define_property(obj, key, value) {
|
|
@@ -727,13 +724,13 @@ var flow = function(config) {
|
|
|
727
724
|
}, config);
|
|
728
725
|
};
|
|
729
726
|
function leadingMargin(direction) {
|
|
730
|
-
return direction ===
|
|
727
|
+
return direction === 'horizontal' ? 'marginLeft' : 'marginTop';
|
|
731
728
|
}
|
|
732
729
|
function trailingMargin(direction) {
|
|
733
|
-
return direction ===
|
|
730
|
+
return direction === 'horizontal' ? 'marginRight' : 'marginBottom';
|
|
734
731
|
}
|
|
735
732
|
function offset(direction) {
|
|
736
|
-
return direction ===
|
|
733
|
+
return direction === 'horizontal' ? 'xOffset' : 'yOffset';
|
|
737
734
|
}
|
|
738
735
|
function collapseMargins(a, b) {
|
|
739
736
|
var _Math, _Math1;
|
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function _mergeNamespaces(n, m) {
|
|
4
|
+
m.forEach(function (e) {
|
|
5
|
+
e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
|
|
6
|
+
if (k !== 'default' && !(k in n)) {
|
|
7
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
8
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function () { return e[k]; }
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
});
|
|
15
|
+
return Object.freeze(n);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
19
|
+
function getDefaultExportFromCjs(x) {
|
|
20
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
var focusVisible$2 = {
|
|
24
|
+
exports: {}
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
(function (module, exports) {
|
|
28
|
+
function _type_of(obj) {
|
|
29
|
+
"@swc/helpers - typeof";
|
|
30
|
+
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
31
|
+
}
|
|
32
|
+
(function(global, factory) {
|
|
33
|
+
(_type_of(exports)) === 'object' && 'object' !== 'undefined' ? factory() : factory();
|
|
34
|
+
})(commonjsGlobal, function() {
|
|
35
|
+
/**
|
|
36
|
+
* Applies the :focus-visible polyfill at the given scope.
|
|
37
|
+
* A scope in this case is either the top-level Document or a Shadow Root.
|
|
38
|
+
*
|
|
39
|
+
* @param {(Document|ShadowRoot)} scope
|
|
40
|
+
* @see https://github.com/WICG/focus-visible
|
|
41
|
+
*/ function applyFocusVisiblePolyfill(scope) {
|
|
42
|
+
var hadKeyboardEvent = true;
|
|
43
|
+
var hadFocusVisibleRecently = false;
|
|
44
|
+
var hadFocusVisibleRecentlyTimeout = null;
|
|
45
|
+
var inputTypesAllowlist = {
|
|
46
|
+
text: true,
|
|
47
|
+
search: true,
|
|
48
|
+
url: true,
|
|
49
|
+
tel: true,
|
|
50
|
+
email: true,
|
|
51
|
+
password: true,
|
|
52
|
+
number: true,
|
|
53
|
+
date: true,
|
|
54
|
+
month: true,
|
|
55
|
+
week: true,
|
|
56
|
+
time: true,
|
|
57
|
+
datetime: true,
|
|
58
|
+
'datetime-local': true
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Helper function for legacy browsers and iframes which sometimes focus
|
|
62
|
+
* elements like document, body, and non-interactive SVG.
|
|
63
|
+
* @param {Element} el
|
|
64
|
+
*/ function isValidFocusTarget(el) {
|
|
65
|
+
if (el && el !== document && el.nodeName !== 'HTML' && el.nodeName !== 'BODY' && 'classList' in el && 'contains' in el.classList) {
|
|
66
|
+
return true;
|
|
67
|
+
}
|
|
68
|
+
return false;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Computes whether the given element should automatically trigger the
|
|
72
|
+
* `focus-visible` class being added, i.e. whether it should always match
|
|
73
|
+
* `:focus-visible` when focused.
|
|
74
|
+
* @param {Element} el
|
|
75
|
+
* @return {boolean}
|
|
76
|
+
*/ function focusTriggersKeyboardModality(el) {
|
|
77
|
+
var type = el.type;
|
|
78
|
+
var tagName = el.tagName;
|
|
79
|
+
if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) {
|
|
80
|
+
return true;
|
|
81
|
+
}
|
|
82
|
+
if (tagName === 'TEXTAREA' && !el.readOnly) {
|
|
83
|
+
return true;
|
|
84
|
+
}
|
|
85
|
+
if (el.isContentEditable) {
|
|
86
|
+
return true;
|
|
87
|
+
}
|
|
88
|
+
return false;
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Add the `focus-visible` class to the given element if it was not added by
|
|
92
|
+
* the author.
|
|
93
|
+
* @param {Element} el
|
|
94
|
+
*/ function addFocusVisibleClass(el) {
|
|
95
|
+
if (el.classList.contains('focus-visible')) {
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
el.classList.add('focus-visible');
|
|
99
|
+
el.setAttribute('data-focus-visible-added', '');
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* Remove the `focus-visible` class from the given element if it was not
|
|
103
|
+
* originally added by the author.
|
|
104
|
+
* @param {Element} el
|
|
105
|
+
*/ function removeFocusVisibleClass(el) {
|
|
106
|
+
if (!el.hasAttribute('data-focus-visible-added')) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
el.classList.remove('focus-visible');
|
|
110
|
+
el.removeAttribute('data-focus-visible-added');
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* If the most recent user interaction was via the keyboard;
|
|
114
|
+
* and the key press did not include a meta, alt/option, or control key;
|
|
115
|
+
* then the modality is keyboard. Otherwise, the modality is not keyboard.
|
|
116
|
+
* Apply `focus-visible` to any current active element and keep track
|
|
117
|
+
* of our keyboard modality state with `hadKeyboardEvent`.
|
|
118
|
+
* @param {KeyboardEvent} e
|
|
119
|
+
*/ function onKeyDown(e) {
|
|
120
|
+
if (e.metaKey || e.altKey || e.ctrlKey) {
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
if (isValidFocusTarget(scope.activeElement)) {
|
|
124
|
+
addFocusVisibleClass(scope.activeElement);
|
|
125
|
+
}
|
|
126
|
+
hadKeyboardEvent = true;
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* If at any point a user clicks with a pointing device, ensure that we change
|
|
130
|
+
* the modality away from keyboard.
|
|
131
|
+
* This avoids the situation where a user presses a key on an already focused
|
|
132
|
+
* element, and then clicks on a different element, focusing it with a
|
|
133
|
+
* pointing device, while we still think we're in keyboard modality.
|
|
134
|
+
* @param {Event} e
|
|
135
|
+
*/ function onPointerDown(e) {
|
|
136
|
+
hadKeyboardEvent = false;
|
|
137
|
+
}
|
|
138
|
+
/**
|
|
139
|
+
* On `focus`, add the `focus-visible` class to the target if:
|
|
140
|
+
* - the target received focus as a result of keyboard navigation, or
|
|
141
|
+
* - the event target is an element that will likely require interaction
|
|
142
|
+
* via the keyboard (e.g. a text box)
|
|
143
|
+
* @param {Event} e
|
|
144
|
+
*/ function onFocus(e) {
|
|
145
|
+
// Prevent IE from focusing the document or HTML element.
|
|
146
|
+
if (!isValidFocusTarget(e.target)) {
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
|
|
150
|
+
addFocusVisibleClass(e.target);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
/**
|
|
154
|
+
* On `blur`, remove the `focus-visible` class from the target.
|
|
155
|
+
* @param {Event} e
|
|
156
|
+
*/ function onBlur(e) {
|
|
157
|
+
if (!isValidFocusTarget(e.target)) {
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
if (e.target.classList.contains('focus-visible') || e.target.hasAttribute('data-focus-visible-added')) {
|
|
161
|
+
// To detect a tab/window switch, we look for a blur event followed
|
|
162
|
+
// rapidly by a visibility change.
|
|
163
|
+
// If we don't see a visibility change within 100ms, it's probably a
|
|
164
|
+
// regular focus change.
|
|
165
|
+
hadFocusVisibleRecently = true;
|
|
166
|
+
window.clearTimeout(hadFocusVisibleRecentlyTimeout);
|
|
167
|
+
hadFocusVisibleRecentlyTimeout = window.setTimeout(function() {
|
|
168
|
+
hadFocusVisibleRecently = false;
|
|
169
|
+
}, 100);
|
|
170
|
+
removeFocusVisibleClass(e.target);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* If the user changes tabs, keep track of whether or not the previously
|
|
175
|
+
* focused element had .focus-visible.
|
|
176
|
+
* @param {Event} e
|
|
177
|
+
*/ function onVisibilityChange(e) {
|
|
178
|
+
if (document.visibilityState === 'hidden') {
|
|
179
|
+
// If the tab becomes active again, the browser will handle calling focus
|
|
180
|
+
// on the element (Safari actually calls it twice).
|
|
181
|
+
// If this tab change caused a blur on an element with focus-visible,
|
|
182
|
+
// re-apply the class when the user switches back to the tab.
|
|
183
|
+
if (hadFocusVisibleRecently) {
|
|
184
|
+
hadKeyboardEvent = true;
|
|
185
|
+
}
|
|
186
|
+
addInitialPointerMoveListeners();
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
/**
|
|
190
|
+
* Add a group of listeners to detect usage of any pointing devices.
|
|
191
|
+
* These listeners will be added when the polyfill first loads, and anytime
|
|
192
|
+
* the window is blurred, so that they are active when the window regains
|
|
193
|
+
* focus.
|
|
194
|
+
*/ function addInitialPointerMoveListeners() {
|
|
195
|
+
document.addEventListener('mousemove', onInitialPointerMove);
|
|
196
|
+
document.addEventListener('mousedown', onInitialPointerMove);
|
|
197
|
+
document.addEventListener('mouseup', onInitialPointerMove);
|
|
198
|
+
document.addEventListener('pointermove', onInitialPointerMove);
|
|
199
|
+
document.addEventListener('pointerdown', onInitialPointerMove);
|
|
200
|
+
document.addEventListener('pointerup', onInitialPointerMove);
|
|
201
|
+
document.addEventListener('touchmove', onInitialPointerMove);
|
|
202
|
+
document.addEventListener('touchstart', onInitialPointerMove);
|
|
203
|
+
document.addEventListener('touchend', onInitialPointerMove);
|
|
204
|
+
}
|
|
205
|
+
function removeInitialPointerMoveListeners() {
|
|
206
|
+
document.removeEventListener('mousemove', onInitialPointerMove);
|
|
207
|
+
document.removeEventListener('mousedown', onInitialPointerMove);
|
|
208
|
+
document.removeEventListener('mouseup', onInitialPointerMove);
|
|
209
|
+
document.removeEventListener('pointermove', onInitialPointerMove);
|
|
210
|
+
document.removeEventListener('pointerdown', onInitialPointerMove);
|
|
211
|
+
document.removeEventListener('pointerup', onInitialPointerMove);
|
|
212
|
+
document.removeEventListener('touchmove', onInitialPointerMove);
|
|
213
|
+
document.removeEventListener('touchstart', onInitialPointerMove);
|
|
214
|
+
document.removeEventListener('touchend', onInitialPointerMove);
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* When the polfyill first loads, assume the user is in keyboard modality.
|
|
218
|
+
* If any event is received from a pointing device (e.g. mouse, pointer,
|
|
219
|
+
* touch), turn off keyboard modality.
|
|
220
|
+
* This accounts for situations where focus enters the page from the URL bar.
|
|
221
|
+
* @param {Event} e
|
|
222
|
+
*/ function onInitialPointerMove(e) {
|
|
223
|
+
// Work around a Safari quirk that fires a mousemove on <html> whenever the
|
|
224
|
+
// window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
|
|
225
|
+
if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') {
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
hadKeyboardEvent = false;
|
|
229
|
+
removeInitialPointerMoveListeners();
|
|
230
|
+
}
|
|
231
|
+
// For some kinds of state, we are interested in changes at the global scope
|
|
232
|
+
// only. For example, global pointer input, global key presses and global
|
|
233
|
+
// visibility change should affect the state at every scope:
|
|
234
|
+
document.addEventListener('keydown', onKeyDown, true);
|
|
235
|
+
document.addEventListener('mousedown', onPointerDown, true);
|
|
236
|
+
document.addEventListener('pointerdown', onPointerDown, true);
|
|
237
|
+
document.addEventListener('touchstart', onPointerDown, true);
|
|
238
|
+
document.addEventListener('visibilitychange', onVisibilityChange, true);
|
|
239
|
+
addInitialPointerMoveListeners();
|
|
240
|
+
// For focus and blur, we specifically care about state changes in the local
|
|
241
|
+
// scope. This is because focus / blur events that originate from within a
|
|
242
|
+
// shadow root are not re-dispatched from the host element if it was already
|
|
243
|
+
// the active element in its own scope:
|
|
244
|
+
scope.addEventListener('focus', onFocus, true);
|
|
245
|
+
scope.addEventListener('blur', onBlur, true);
|
|
246
|
+
// We detect that a node is a ShadowRoot by ensuring that it is a
|
|
247
|
+
// DocumentFragment and also has a host property. This check covers native
|
|
248
|
+
// implementation and polyfill implementation transparently. If we only cared
|
|
249
|
+
// about the native implementation, we could just check if the scope was
|
|
250
|
+
// an instance of a ShadowRoot.
|
|
251
|
+
if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) {
|
|
252
|
+
// Since a ShadowRoot is a special kind of DocumentFragment, it does not
|
|
253
|
+
// have a root element to add a class to. So, we add this attribute to the
|
|
254
|
+
// host element instead:
|
|
255
|
+
scope.host.setAttribute('data-js-focus-visible', '');
|
|
256
|
+
} else if (scope.nodeType === Node.DOCUMENT_NODE) {
|
|
257
|
+
document.documentElement.classList.add('js-focus-visible');
|
|
258
|
+
document.documentElement.setAttribute('data-js-focus-visible', '');
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
// It is important to wrap all references to global window and document in
|
|
262
|
+
// these checks to support server-side rendering use cases
|
|
263
|
+
// @see https://github.com/WICG/focus-visible/issues/199
|
|
264
|
+
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
|
265
|
+
// Make the polyfill helper globally available. This can be used as a signal
|
|
266
|
+
// to interested libraries that wish to coordinate with the polyfill for e.g.,
|
|
267
|
+
// applying the polyfill to a shadow root:
|
|
268
|
+
window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
|
|
269
|
+
// Notify interested libraries of the polyfill's presence, in case the
|
|
270
|
+
// polyfill was loaded lazily:
|
|
271
|
+
var event;
|
|
272
|
+
try {
|
|
273
|
+
event = new CustomEvent('focus-visible-polyfill-ready');
|
|
274
|
+
} catch (error) {
|
|
275
|
+
// IE11 does not support using CustomEvent as a constructor directly:
|
|
276
|
+
event = document.createEvent('CustomEvent');
|
|
277
|
+
event.initCustomEvent('focus-visible-polyfill-ready', false, false, {});
|
|
278
|
+
}
|
|
279
|
+
window.dispatchEvent(event);
|
|
280
|
+
}
|
|
281
|
+
if (typeof document !== 'undefined') {
|
|
282
|
+
// Apply the polyfill to the global document, so that no JavaScript
|
|
283
|
+
// coordination is required to use the polyfill in the top-level document:
|
|
284
|
+
applyFocusVisiblePolyfill(document);
|
|
285
|
+
}
|
|
286
|
+
});
|
|
287
|
+
} (focusVisible$2, focusVisible$2.exports));
|
|
288
|
+
|
|
289
|
+
var focusVisibleExports = focusVisible$2.exports;
|
|
290
|
+
var focusVisible = /*@__PURE__*/getDefaultExportFromCjs(focusVisibleExports);
|
|
291
|
+
|
|
292
|
+
var focusVisible$1 = /*#__PURE__*/_mergeNamespaces({
|
|
293
|
+
__proto__: null,
|
|
294
|
+
default: focusVisible
|
|
295
|
+
}, [focusVisibleExports]);
|
|
296
|
+
|
|
297
|
+
exports.focusVisible = focusVisible$1;
|