@primer/behaviors 1.6.0 → 1.7.0-rc.09d1a86
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/cjs/anchored-position.js +4 -4
- package/dist/cjs/dimensions.js +7 -7
- package/dist/cjs/focus-trap.js +11 -10
- package/dist/cjs/focus-zone.js +50 -45
- package/dist/cjs/index.js +26 -21
- package/dist/cjs/polyfills/event-listener-signal.js +3 -3
- package/dist/cjs/scroll-into-view.js +3 -3
- package/dist/cjs/utils/index.js +14 -19
- package/dist/cjs/utils/iterate-focusable-elements.js +6 -6
- package/dist/cjs/utils/unique-id.js +3 -3
- package/dist/cjs/utils/user-agent.js +3 -3
- package/dist/esm/{anchored-position.js → anchored-position.mjs} +3 -1
- package/dist/esm/{dimensions.js → dimensions.mjs} +6 -4
- package/dist/esm/{focus-trap.js → focus-trap.mjs} +7 -4
- package/dist/esm/{focus-zone.js → focus-zone.mjs} +14 -11
- package/dist/esm/index.mjs +5 -0
- package/dist/esm/package.json +1 -0
- package/dist/esm/polyfills/{event-listener-signal.js → event-listener-signal.mjs} +3 -1
- package/dist/esm/{scroll-into-view.js → scroll-into-view.mjs} +3 -1
- package/dist/esm/utils/index.mjs +3 -0
- package/dist/esm/utils/{iterate-focusable-elements.js → iterate-focusable-elements.mjs} +6 -4
- package/dist/esm/utils/{unique-id.js → unique-id.mjs} +3 -1
- package/dist/esm/utils/{user-agent.js → user-agent.mjs} +3 -1
- package/package.json +31 -21
- package/dist/esm/index.js +0 -5
- package/dist/esm/utils/index.js +0 -3
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.getAnchoredPosition = void 0;
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
4
3
|
const alternateOrders = {
|
|
5
4
|
'outside-top': ['outside-bottom', 'outside-right', 'outside-left', 'outside-bottom'],
|
|
6
5
|
'outside-bottom': ['outside-top', 'outside-right', 'outside-left', 'outside-bottom'],
|
|
@@ -24,7 +23,6 @@ function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
|
|
|
24
23
|
};
|
|
25
24
|
return pureCalculateAnchoredPosition(clippingRect, relativeRect, floatingElement.getBoundingClientRect(), anchorElement instanceof Element ? anchorElement.getBoundingClientRect() : anchorElement, getDefaultSettings(settings));
|
|
26
25
|
}
|
|
27
|
-
exports.getAnchoredPosition = getAnchoredPosition;
|
|
28
26
|
function getPositionedParent(element) {
|
|
29
27
|
if (isOnTopLayer(element))
|
|
30
28
|
return document.body;
|
|
@@ -254,3 +252,5 @@ function shouldRecalculateAlignment(align, currentPos, containerDimensions, elem
|
|
|
254
252
|
currentPos.left < containerDimensions.left);
|
|
255
253
|
}
|
|
256
254
|
}
|
|
255
|
+
|
|
256
|
+
exports.getAnchoredPosition = getAnchoredPosition;
|
package/dist/cjs/dimensions.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.positionedOffset = exports.overflowOffset = exports.overflowParent = exports.offset = void 0;
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
4
3
|
function offset(element) {
|
|
5
4
|
const rect = element.getBoundingClientRect();
|
|
6
5
|
return {
|
|
@@ -8,7 +7,6 @@ function offset(element) {
|
|
|
8
7
|
left: rect.left + window.pageXOffset,
|
|
9
8
|
};
|
|
10
9
|
}
|
|
11
|
-
exports.offset = offset;
|
|
12
10
|
function overflowParent(targetElement) {
|
|
13
11
|
let element = targetElement;
|
|
14
12
|
const document = element.ownerDocument;
|
|
@@ -40,7 +38,6 @@ function overflowParent(targetElement) {
|
|
|
40
38
|
}
|
|
41
39
|
return element instanceof Document ? null : element;
|
|
42
40
|
}
|
|
43
|
-
exports.overflowParent = overflowParent;
|
|
44
41
|
function overflowOffset(element, targetContainer) {
|
|
45
42
|
let container = targetContainer;
|
|
46
43
|
const document = element.ownerDocument;
|
|
@@ -76,7 +73,6 @@ function overflowOffset(element, targetContainer) {
|
|
|
76
73
|
const right = width - (left + element.offsetWidth);
|
|
77
74
|
return { top, left, bottom, right, height, width };
|
|
78
75
|
}
|
|
79
|
-
exports.overflowOffset = overflowOffset;
|
|
80
76
|
function positionedOffset(targetElement, container) {
|
|
81
77
|
let element = targetElement;
|
|
82
78
|
const document = element.ownerDocument;
|
|
@@ -126,10 +122,14 @@ function positionedOffset(targetElement, container) {
|
|
|
126
122
|
const right = scrollWidth - (left + width);
|
|
127
123
|
return { top, left, bottom, right, _container: measuredContainer };
|
|
128
124
|
}
|
|
129
|
-
exports.positionedOffset = positionedOffset;
|
|
130
125
|
function getDocumentHeight(documentBody, documentElement) {
|
|
131
126
|
return Math.max(documentBody.scrollHeight, documentElement.scrollHeight, documentBody.offsetHeight, documentElement.offsetHeight, documentElement.clientHeight);
|
|
132
127
|
}
|
|
133
128
|
function getDocumentWidth(documentBody, documentElement) {
|
|
134
129
|
return Math.max(documentBody.scrollWidth, documentElement.scrollWidth, documentBody.offsetWidth, documentElement.offsetWidth, documentElement.clientWidth);
|
|
135
130
|
}
|
|
131
|
+
|
|
132
|
+
exports.offset = offset;
|
|
133
|
+
exports.overflowOffset = overflowOffset;
|
|
134
|
+
exports.overflowParent = overflowParent;
|
|
135
|
+
exports.positionedOffset = positionedOffset;
|
package/dist/cjs/focus-trap.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var iterateFocusableElements = require('./utils/iterate-focusable-elements.js');
|
|
4
|
+
var eventListenerSignal = require('./polyfills/event-listener-signal.js');
|
|
5
|
+
|
|
6
|
+
eventListenerSignal.polyfill();
|
|
7
7
|
const suspendedTrapStack = [];
|
|
8
8
|
let activeTrap = undefined;
|
|
9
9
|
function tryReactivate() {
|
|
@@ -28,7 +28,7 @@ function focusTrap(container, initialFocus, abortSignal) {
|
|
|
28
28
|
sentinelStart.setAttribute('tabindex', '0');
|
|
29
29
|
sentinelStart.setAttribute('aria-hidden', 'true');
|
|
30
30
|
sentinelStart.onfocus = () => {
|
|
31
|
-
const lastFocusableChild =
|
|
31
|
+
const lastFocusableChild = iterateFocusableElements.getFocusableChild(container, true);
|
|
32
32
|
lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
|
|
33
33
|
};
|
|
34
34
|
const sentinelEnd = document.createElement('span');
|
|
@@ -36,7 +36,7 @@ function focusTrap(container, initialFocus, abortSignal) {
|
|
|
36
36
|
sentinelEnd.setAttribute('tabindex', '0');
|
|
37
37
|
sentinelEnd.setAttribute('aria-hidden', 'true');
|
|
38
38
|
sentinelEnd.onfocus = () => {
|
|
39
|
-
const firstFocusableChild =
|
|
39
|
+
const firstFocusableChild = iterateFocusableElements.getFocusableChild(container);
|
|
40
40
|
firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
|
|
41
41
|
};
|
|
42
42
|
container.prepend(sentinelStart);
|
|
@@ -49,7 +49,7 @@ function focusTrap(container, initialFocus, abortSignal) {
|
|
|
49
49
|
return;
|
|
50
50
|
}
|
|
51
51
|
else {
|
|
52
|
-
if (lastFocusedChild &&
|
|
52
|
+
if (lastFocusedChild && iterateFocusableElements.isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
|
|
53
53
|
lastFocusedChild.focus();
|
|
54
54
|
return;
|
|
55
55
|
}
|
|
@@ -58,7 +58,7 @@ function focusTrap(container, initialFocus, abortSignal) {
|
|
|
58
58
|
return;
|
|
59
59
|
}
|
|
60
60
|
else {
|
|
61
|
-
const firstFocusableChild =
|
|
61
|
+
const firstFocusableChild = iterateFocusableElements.getFocusableChild(container);
|
|
62
62
|
firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
|
|
63
63
|
return;
|
|
64
64
|
}
|
|
@@ -104,4 +104,5 @@ function focusTrap(container, initialFocus, abortSignal) {
|
|
|
104
104
|
return controller;
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
|
+
|
|
107
108
|
exports.focusTrap = focusTrap;
|
package/dist/cjs/focus-zone.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var eventListenerSignal = require('./polyfills/event-listener-signal.js');
|
|
4
|
+
var userAgent = require('./utils/user-agent.js');
|
|
5
|
+
var iterateFocusableElements = require('./utils/iterate-focusable-elements.js');
|
|
6
|
+
var uniqueId = require('./utils/unique-id.js');
|
|
7
|
+
|
|
8
|
+
eventListenerSignal.polyfill();
|
|
9
|
+
exports.FocusKeys = void 0;
|
|
10
10
|
(function (FocusKeys) {
|
|
11
11
|
FocusKeys[FocusKeys["ArrowHorizontal"] = 1] = "ArrowHorizontal";
|
|
12
12
|
FocusKeys[FocusKeys["ArrowVertical"] = 2] = "ArrowVertical";
|
|
@@ -22,26 +22,26 @@ var FocusKeys;
|
|
|
22
22
|
FocusKeys[FocusKeys["HJKL"] = 12] = "HJKL";
|
|
23
23
|
FocusKeys[FocusKeys["WASD"] = 96] = "WASD";
|
|
24
24
|
FocusKeys[FocusKeys["All"] = 511] = "All";
|
|
25
|
-
})(FocusKeys || (exports.FocusKeys =
|
|
25
|
+
})(exports.FocusKeys || (exports.FocusKeys = {}));
|
|
26
26
|
const KEY_TO_BIT = {
|
|
27
|
-
ArrowLeft: FocusKeys.ArrowHorizontal,
|
|
28
|
-
ArrowDown: FocusKeys.ArrowVertical,
|
|
29
|
-
ArrowUp: FocusKeys.ArrowVertical,
|
|
30
|
-
ArrowRight: FocusKeys.ArrowHorizontal,
|
|
31
|
-
h: FocusKeys.HL,
|
|
32
|
-
j: FocusKeys.JK,
|
|
33
|
-
k: FocusKeys.JK,
|
|
34
|
-
l: FocusKeys.HL,
|
|
35
|
-
a: FocusKeys.AD,
|
|
36
|
-
s: FocusKeys.WS,
|
|
37
|
-
w: FocusKeys.WS,
|
|
38
|
-
d: FocusKeys.AD,
|
|
39
|
-
Tab: FocusKeys.Tab,
|
|
40
|
-
Home: FocusKeys.HomeAndEnd,
|
|
41
|
-
End: FocusKeys.HomeAndEnd,
|
|
42
|
-
PageUp: FocusKeys.PageUpDown,
|
|
43
|
-
PageDown: FocusKeys.PageUpDown,
|
|
44
|
-
Backspace: FocusKeys.Backspace,
|
|
27
|
+
ArrowLeft: exports.FocusKeys.ArrowHorizontal,
|
|
28
|
+
ArrowDown: exports.FocusKeys.ArrowVertical,
|
|
29
|
+
ArrowUp: exports.FocusKeys.ArrowVertical,
|
|
30
|
+
ArrowRight: exports.FocusKeys.ArrowHorizontal,
|
|
31
|
+
h: exports.FocusKeys.HL,
|
|
32
|
+
j: exports.FocusKeys.JK,
|
|
33
|
+
k: exports.FocusKeys.JK,
|
|
34
|
+
l: exports.FocusKeys.HL,
|
|
35
|
+
a: exports.FocusKeys.AD,
|
|
36
|
+
s: exports.FocusKeys.WS,
|
|
37
|
+
w: exports.FocusKeys.WS,
|
|
38
|
+
d: exports.FocusKeys.AD,
|
|
39
|
+
Tab: exports.FocusKeys.Tab,
|
|
40
|
+
Home: exports.FocusKeys.HomeAndEnd,
|
|
41
|
+
End: exports.FocusKeys.HomeAndEnd,
|
|
42
|
+
PageUp: exports.FocusKeys.PageUpDown,
|
|
43
|
+
PageDown: exports.FocusKeys.PageUpDown,
|
|
44
|
+
Backspace: exports.FocusKeys.Backspace,
|
|
45
45
|
};
|
|
46
46
|
const KEY_TO_DIRECTION = {
|
|
47
47
|
ArrowLeft: 'previous',
|
|
@@ -68,7 +68,7 @@ function getDirection(keyboardEvent) {
|
|
|
68
68
|
if (keyboardEvent.key === 'Tab' && keyboardEvent.shiftKey) {
|
|
69
69
|
return 'previous';
|
|
70
70
|
}
|
|
71
|
-
const isMac =
|
|
71
|
+
const isMac = userAgent.isMacOS();
|
|
72
72
|
if ((isMac && keyboardEvent.metaKey) || (!isMac && keyboardEvent.ctrlKey)) {
|
|
73
73
|
if (keyboardEvent.key === 'ArrowLeft' || keyboardEvent.key === 'ArrowUp') {
|
|
74
74
|
return 'start';
|
|
@@ -91,10 +91,10 @@ function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
|
|
|
91
91
|
if (keyLength === 1) {
|
|
92
92
|
return true;
|
|
93
93
|
}
|
|
94
|
-
if (key === 'ArrowDown' &&
|
|
94
|
+
if (key === 'ArrowDown' && userAgent.isMacOS() && !keyboardEvent.metaKey) {
|
|
95
95
|
return true;
|
|
96
96
|
}
|
|
97
|
-
if (key === 'ArrowDown' && !
|
|
97
|
+
if (key === 'ArrowDown' && !userAgent.isMacOS() && keyboardEvent.altKey) {
|
|
98
98
|
return true;
|
|
99
99
|
}
|
|
100
100
|
}
|
|
@@ -122,15 +122,15 @@ function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
|
|
|
122
122
|
}
|
|
123
123
|
return false;
|
|
124
124
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
125
|
+
const isActiveDescendantAttribute = 'data-is-active-descendant';
|
|
126
|
+
const activeDescendantActivatedDirectly = 'activated-directly';
|
|
127
|
+
const activeDescendantActivatedIndirectly = 'activated-indirectly';
|
|
128
|
+
const hasActiveDescendantAttribute = 'data-has-active-descendant';
|
|
129
129
|
function focusZone(container, settings) {
|
|
130
130
|
var _a, _b, _c, _d, _e;
|
|
131
131
|
const focusableElements = [];
|
|
132
132
|
const savedTabIndex = new WeakMap();
|
|
133
|
-
const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? FocusKeys.ArrowAll : FocusKeys.ArrowVertical) | FocusKeys.HomeAndEnd;
|
|
133
|
+
const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? exports.FocusKeys.ArrowAll : exports.FocusKeys.ArrowVertical) | exports.FocusKeys.HomeAndEnd;
|
|
134
134
|
const focusOutBehavior = (_b = settings === null || settings === void 0 ? void 0 : settings.focusOutBehavior) !== null && _b !== void 0 ? _b : 'stop';
|
|
135
135
|
const focusInStrategy = (_c = settings === null || settings === void 0 ? void 0 : settings.focusInStrategy) !== null && _c !== void 0 ? _c : 'previous';
|
|
136
136
|
const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
|
|
@@ -162,18 +162,18 @@ function focusZone(container, settings) {
|
|
|
162
162
|
}
|
|
163
163
|
function setActiveDescendant(from, to, directlyActivated = false) {
|
|
164
164
|
if (!to.id) {
|
|
165
|
-
to.setAttribute('id',
|
|
165
|
+
to.setAttribute('id', uniqueId.uniqueId());
|
|
166
166
|
}
|
|
167
167
|
if (from && from !== to) {
|
|
168
|
-
from.removeAttribute(
|
|
168
|
+
from.removeAttribute(isActiveDescendantAttribute);
|
|
169
169
|
}
|
|
170
170
|
if (!activeDescendantControl ||
|
|
171
171
|
(!directlyActivated && activeDescendantControl.getAttribute('aria-activedescendant') === to.id)) {
|
|
172
172
|
return;
|
|
173
173
|
}
|
|
174
174
|
activeDescendantControl.setAttribute('aria-activedescendant', to.id);
|
|
175
|
-
container.setAttribute(
|
|
176
|
-
to.setAttribute(
|
|
175
|
+
container.setAttribute(hasActiveDescendantAttribute, to.id);
|
|
176
|
+
to.setAttribute(isActiveDescendantAttribute, directlyActivated ? activeDescendantActivatedDirectly : activeDescendantActivatedIndirectly);
|
|
177
177
|
activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(to, from, directlyActivated);
|
|
178
178
|
}
|
|
179
179
|
function clearActiveDescendant(previouslyActiveElement = currentFocusedElement) {
|
|
@@ -181,8 +181,8 @@ function focusZone(container, settings) {
|
|
|
181
181
|
currentFocusedElement = undefined;
|
|
182
182
|
}
|
|
183
183
|
activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
|
|
184
|
-
container.removeAttribute(
|
|
185
|
-
previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(
|
|
184
|
+
container.removeAttribute(hasActiveDescendantAttribute);
|
|
185
|
+
previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(isActiveDescendantAttribute);
|
|
186
186
|
activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
|
|
187
187
|
}
|
|
188
188
|
function beginFocusManagement(...elements) {
|
|
@@ -249,14 +249,14 @@ function focusZone(container, settings) {
|
|
|
249
249
|
strict: settings === null || settings === void 0 ? void 0 : settings.strict,
|
|
250
250
|
onlyTabbable: settings === null || settings === void 0 ? void 0 : settings.onlyTabbable,
|
|
251
251
|
};
|
|
252
|
-
beginFocusManagement(...
|
|
252
|
+
beginFocusManagement(...iterateFocusableElements.iterateFocusableElements(container, iterateFocusableElementsOptions));
|
|
253
253
|
const initialElement = typeof focusInStrategy === 'function' ? focusInStrategy(document.body) : getFirstFocusableElement();
|
|
254
254
|
updateFocusedElement(initialElement);
|
|
255
255
|
const observer = new MutationObserver(mutations => {
|
|
256
256
|
for (const mutation of mutations) {
|
|
257
257
|
for (const removedNode of mutation.removedNodes) {
|
|
258
258
|
if (removedNode instanceof HTMLElement) {
|
|
259
|
-
endFocusManagement(...
|
|
259
|
+
endFocusManagement(...iterateFocusableElements.iterateFocusableElements(removedNode));
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
262
|
if (mutation.type === 'attributes' && mutation.oldValue === null) {
|
|
@@ -268,7 +268,7 @@ function focusZone(container, settings) {
|
|
|
268
268
|
for (const mutation of mutations) {
|
|
269
269
|
for (const addedNode of mutation.addedNodes) {
|
|
270
270
|
if (addedNode instanceof HTMLElement) {
|
|
271
|
-
beginFocusManagement(...
|
|
271
|
+
beginFocusManagement(...iterateFocusableElements.iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
|
|
272
272
|
}
|
|
273
273
|
}
|
|
274
274
|
if (mutation.type === 'attributes' && mutation.oldValue !== null) {
|
|
@@ -449,4 +449,9 @@ function focusZone(container, settings) {
|
|
|
449
449
|
}, { signal });
|
|
450
450
|
return controller;
|
|
451
451
|
}
|
|
452
|
+
|
|
453
|
+
exports.activeDescendantActivatedDirectly = activeDescendantActivatedDirectly;
|
|
454
|
+
exports.activeDescendantActivatedIndirectly = activeDescendantActivatedIndirectly;
|
|
452
455
|
exports.focusZone = focusZone;
|
|
456
|
+
exports.hasActiveDescendantAttribute = hasActiveDescendantAttribute;
|
|
457
|
+
exports.isActiveDescendantAttribute = isActiveDescendantAttribute;
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,21 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var anchoredPosition = require('./anchored-position.js');
|
|
4
|
+
var focusTrap = require('./focus-trap.js');
|
|
5
|
+
var focusZone = require('./focus-zone.js');
|
|
6
|
+
var scrollIntoView = require('./scroll-into-view.js');
|
|
7
|
+
var dimensions = require('./dimensions.js');
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
exports.getAnchoredPosition = anchoredPosition.getAnchoredPosition;
|
|
12
|
+
exports.focusTrap = focusTrap.focusTrap;
|
|
13
|
+
Object.defineProperty(exports, "FocusKeys", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () { return focusZone.FocusKeys; }
|
|
16
|
+
});
|
|
17
|
+
exports.activeDescendantActivatedDirectly = focusZone.activeDescendantActivatedDirectly;
|
|
18
|
+
exports.activeDescendantActivatedIndirectly = focusZone.activeDescendantActivatedIndirectly;
|
|
19
|
+
exports.focusZone = focusZone.focusZone;
|
|
20
|
+
exports.hasActiveDescendantAttribute = focusZone.hasActiveDescendantAttribute;
|
|
21
|
+
exports.isActiveDescendantAttribute = focusZone.isActiveDescendantAttribute;
|
|
22
|
+
exports.scrollIntoView = scrollIntoView.scrollIntoView;
|
|
23
|
+
exports.offset = dimensions.offset;
|
|
24
|
+
exports.overflowOffset = dimensions.overflowOffset;
|
|
25
|
+
exports.overflowParent = dimensions.overflowParent;
|
|
26
|
+
exports.positionedOffset = dimensions.positionedOffset;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.polyfill = void 0;
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
4
3
|
let signalSupported = false;
|
|
5
4
|
function noop() { }
|
|
6
5
|
try {
|
|
@@ -41,4 +40,5 @@ function polyfill() {
|
|
|
41
40
|
signalSupported = true;
|
|
42
41
|
}
|
|
43
42
|
}
|
|
43
|
+
|
|
44
44
|
exports.polyfill = polyfill;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.scrollIntoView = void 0;
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
4
3
|
function scrollIntoView(child, viewingArea, { direction = 'vertical', startMargin = 0, endMargin = 0, behavior = 'smooth' } = {}) {
|
|
5
4
|
const startSide = direction === 'vertical' ? 'top' : 'left';
|
|
6
5
|
const endSide = direction === 'vertical' ? 'bottom' : 'right';
|
|
@@ -18,4 +17,5 @@ function scrollIntoView(child, viewingArea, { direction = 'vertical', startMargi
|
|
|
18
17
|
viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildBottom + endMargin });
|
|
19
18
|
}
|
|
20
19
|
}
|
|
20
|
+
|
|
21
21
|
exports.scrollIntoView = scrollIntoView;
|
package/dist/cjs/utils/index.js
CHANGED
|
@@ -1,19 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./iterate-focusable-elements.js"), exports);
|
|
18
|
-
__exportStar(require("./unique-id.js"), exports);
|
|
19
|
-
__exportStar(require("./user-agent.js"), exports);
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var iterateFocusableElements = require('./iterate-focusable-elements.js');
|
|
4
|
+
var uniqueId = require('./unique-id.js');
|
|
5
|
+
var userAgent = require('./user-agent.js');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.getFocusableChild = iterateFocusableElements.getFocusableChild;
|
|
10
|
+
exports.isFocusable = iterateFocusableElements.isFocusable;
|
|
11
|
+
exports.isTabbable = iterateFocusableElements.isTabbable;
|
|
12
|
+
exports.iterateFocusableElements = iterateFocusableElements.iterateFocusableElements;
|
|
13
|
+
exports.uniqueId = uniqueId.uniqueId;
|
|
14
|
+
exports.isMacOS = userAgent.isMacOS;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.iterateFocusableElements = void 0;
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
4
3
|
function* iterateFocusableElements(container, options = {}) {
|
|
5
4
|
var _a, _b;
|
|
6
5
|
const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
|
|
@@ -31,11 +30,9 @@ function* iterateFocusableElements(container, options = {}) {
|
|
|
31
30
|
}
|
|
32
31
|
return undefined;
|
|
33
32
|
}
|
|
34
|
-
exports.iterateFocusableElements = iterateFocusableElements;
|
|
35
33
|
function getFocusableChild(container, lastChild = false) {
|
|
36
34
|
return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
|
|
37
35
|
}
|
|
38
|
-
exports.getFocusableChild = getFocusableChild;
|
|
39
36
|
function isFocusable(elem, strict = false) {
|
|
40
37
|
const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
|
|
41
38
|
elem.disabled;
|
|
@@ -66,8 +63,11 @@ function isFocusable(elem, strict = false) {
|
|
|
66
63
|
}
|
|
67
64
|
return elem.tabIndex !== -1;
|
|
68
65
|
}
|
|
69
|
-
exports.isFocusable = isFocusable;
|
|
70
66
|
function isTabbable(elem, strict = false) {
|
|
71
67
|
return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
|
|
72
68
|
}
|
|
69
|
+
|
|
70
|
+
exports.getFocusableChild = getFocusableChild;
|
|
71
|
+
exports.isFocusable = isFocusable;
|
|
73
72
|
exports.isTabbable = isTabbable;
|
|
73
|
+
exports.iterateFocusableElements = iterateFocusableElements;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.isMacOS = void 0;
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
4
3
|
let isMac = undefined;
|
|
5
4
|
function isMacOS() {
|
|
6
5
|
if (isMac === undefined) {
|
|
@@ -8,4 +7,5 @@ function isMacOS() {
|
|
|
8
7
|
}
|
|
9
8
|
return isMac;
|
|
10
9
|
}
|
|
10
|
+
|
|
11
11
|
exports.isMacOS = isMacOS;
|
|
@@ -9,7 +9,7 @@ const alternateAlignments = {
|
|
|
9
9
|
end: ['start', 'center'],
|
|
10
10
|
center: ['end', 'start'],
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
|
|
13
13
|
const parentElement = getPositionedParent(floatingElement);
|
|
14
14
|
const clippingRect = getClippingRect(parentElement);
|
|
15
15
|
const parentElementStyle = getComputedStyle(parentElement);
|
|
@@ -250,3 +250,5 @@ function shouldRecalculateAlignment(align, currentPos, containerDimensions, elem
|
|
|
250
250
|
currentPos.left < containerDimensions.left);
|
|
251
251
|
}
|
|
252
252
|
}
|
|
253
|
+
|
|
254
|
+
export { getAnchoredPosition };
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
function offset(element) {
|
|
2
2
|
const rect = element.getBoundingClientRect();
|
|
3
3
|
return {
|
|
4
4
|
top: rect.top + window.pageYOffset,
|
|
5
5
|
left: rect.left + window.pageXOffset,
|
|
6
6
|
};
|
|
7
7
|
}
|
|
8
|
-
|
|
8
|
+
function overflowParent(targetElement) {
|
|
9
9
|
let element = targetElement;
|
|
10
10
|
const document = element.ownerDocument;
|
|
11
11
|
if (!document) {
|
|
@@ -36,7 +36,7 @@ export function overflowParent(targetElement) {
|
|
|
36
36
|
}
|
|
37
37
|
return element instanceof Document ? null : element;
|
|
38
38
|
}
|
|
39
|
-
|
|
39
|
+
function overflowOffset(element, targetContainer) {
|
|
40
40
|
let container = targetContainer;
|
|
41
41
|
const document = element.ownerDocument;
|
|
42
42
|
if (!document) {
|
|
@@ -71,7 +71,7 @@ export function overflowOffset(element, targetContainer) {
|
|
|
71
71
|
const right = width - (left + element.offsetWidth);
|
|
72
72
|
return { top, left, bottom, right, height, width };
|
|
73
73
|
}
|
|
74
|
-
|
|
74
|
+
function positionedOffset(targetElement, container) {
|
|
75
75
|
let element = targetElement;
|
|
76
76
|
const document = element.ownerDocument;
|
|
77
77
|
if (!document) {
|
|
@@ -126,3 +126,5 @@ function getDocumentHeight(documentBody, documentElement) {
|
|
|
126
126
|
function getDocumentWidth(documentBody, documentElement) {
|
|
127
127
|
return Math.max(documentBody.scrollWidth, documentElement.scrollWidth, documentBody.offsetWidth, documentElement.offsetWidth, documentElement.clientWidth);
|
|
128
128
|
}
|
|
129
|
+
|
|
130
|
+
export { offset, overflowOffset, overflowParent, positionedOffset };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.
|
|
2
|
-
import { polyfill
|
|
3
|
-
|
|
1
|
+
import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.mjs';
|
|
2
|
+
import { polyfill } from './polyfills/event-listener-signal.mjs';
|
|
3
|
+
|
|
4
|
+
polyfill();
|
|
4
5
|
const suspendedTrapStack = [];
|
|
5
6
|
let activeTrap = undefined;
|
|
6
7
|
function tryReactivate() {
|
|
@@ -16,7 +17,7 @@ function followSignal(signal) {
|
|
|
16
17
|
});
|
|
17
18
|
return controller;
|
|
18
19
|
}
|
|
19
|
-
|
|
20
|
+
function focusTrap(container, initialFocus, abortSignal) {
|
|
20
21
|
const controller = new AbortController();
|
|
21
22
|
const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
|
|
22
23
|
container.setAttribute('data-focus-trap', 'active');
|
|
@@ -101,3 +102,5 @@ export function focusTrap(container, initialFocus, abortSignal) {
|
|
|
101
102
|
return controller;
|
|
102
103
|
}
|
|
103
104
|
}
|
|
105
|
+
|
|
106
|
+
export { focusTrap };
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { polyfill
|
|
2
|
-
import { isMacOS } from './utils/user-agent.
|
|
3
|
-
import { iterateFocusableElements } from './utils/iterate-focusable-elements.
|
|
4
|
-
import { uniqueId } from './utils/unique-id.
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { polyfill } from './polyfills/event-listener-signal.mjs';
|
|
2
|
+
import { isMacOS } from './utils/user-agent.mjs';
|
|
3
|
+
import { iterateFocusableElements } from './utils/iterate-focusable-elements.mjs';
|
|
4
|
+
import { uniqueId } from './utils/unique-id.mjs';
|
|
5
|
+
|
|
6
|
+
polyfill();
|
|
7
|
+
var FocusKeys;
|
|
7
8
|
(function (FocusKeys) {
|
|
8
9
|
FocusKeys[FocusKeys["ArrowHorizontal"] = 1] = "ArrowHorizontal";
|
|
9
10
|
FocusKeys[FocusKeys["ArrowVertical"] = 2] = "ArrowVertical";
|
|
@@ -119,11 +120,11 @@ function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
|
|
|
119
120
|
}
|
|
120
121
|
return false;
|
|
121
122
|
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
123
|
+
const isActiveDescendantAttribute = 'data-is-active-descendant';
|
|
124
|
+
const activeDescendantActivatedDirectly = 'activated-directly';
|
|
125
|
+
const activeDescendantActivatedIndirectly = 'activated-indirectly';
|
|
126
|
+
const hasActiveDescendantAttribute = 'data-has-active-descendant';
|
|
127
|
+
function focusZone(container, settings) {
|
|
127
128
|
var _a, _b, _c, _d, _e;
|
|
128
129
|
const focusableElements = [];
|
|
129
130
|
const savedTabIndex = new WeakMap();
|
|
@@ -446,3 +447,5 @@ export function focusZone(container, settings) {
|
|
|
446
447
|
}, { signal });
|
|
447
448
|
return controller;
|
|
448
449
|
}
|
|
450
|
+
|
|
451
|
+
export { FocusKeys, activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, focusZone, hasActiveDescendantAttribute, isActiveDescendantAttribute };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { getAnchoredPosition } from './anchored-position.mjs';
|
|
2
|
+
export { focusTrap } from './focus-trap.mjs';
|
|
3
|
+
export { FocusKeys, activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, focusZone, hasActiveDescendantAttribute, isActiveDescendantAttribute } from './focus-zone.mjs';
|
|
4
|
+
export { scrollIntoView } from './scroll-into-view.mjs';
|
|
5
|
+
export { offset, overflowOffset, overflowParent, positionedOffset } from './dimensions.mjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type":"module"}
|
|
@@ -32,9 +32,11 @@ function monkeyPatch() {
|
|
|
32
32
|
return originalAddEventListener.call(this, name, originalCallback, optionsOrCapture);
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
|
-
|
|
35
|
+
function polyfill() {
|
|
36
36
|
if (!featureSupported()) {
|
|
37
37
|
monkeyPatch();
|
|
38
38
|
signalSupported = true;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
+
|
|
42
|
+
export { polyfill };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
function scrollIntoView(child, viewingArea, { direction = 'vertical', startMargin = 0, endMargin = 0, behavior = 'smooth' } = {}) {
|
|
2
2
|
const startSide = direction === 'vertical' ? 'top' : 'left';
|
|
3
3
|
const endSide = direction === 'vertical' ? 'bottom' : 'right';
|
|
4
4
|
const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
|
|
@@ -15,3 +15,5 @@ export function scrollIntoView(child, viewingArea, { direction = 'vertical', sta
|
|
|
15
15
|
viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildBottom + endMargin });
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
+
|
|
19
|
+
export { scrollIntoView };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
function* iterateFocusableElements(container, options = {}) {
|
|
2
2
|
var _a, _b;
|
|
3
3
|
const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
|
|
4
4
|
const acceptFn = ((_b = options.onlyTabbable) !== null && _b !== void 0 ? _b : false) ? isTabbable : isFocusable;
|
|
@@ -28,10 +28,10 @@ export function* iterateFocusableElements(container, options = {}) {
|
|
|
28
28
|
}
|
|
29
29
|
return undefined;
|
|
30
30
|
}
|
|
31
|
-
|
|
31
|
+
function getFocusableChild(container, lastChild = false) {
|
|
32
32
|
return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
|
|
33
33
|
}
|
|
34
|
-
|
|
34
|
+
function isFocusable(elem, strict = false) {
|
|
35
35
|
const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
|
|
36
36
|
elem.disabled;
|
|
37
37
|
const hiddenInert = elem.hidden;
|
|
@@ -61,6 +61,8 @@ export function isFocusable(elem, strict = false) {
|
|
|
61
61
|
}
|
|
62
62
|
return elem.tabIndex !== -1;
|
|
63
63
|
}
|
|
64
|
-
|
|
64
|
+
function isTabbable(elem, strict = false) {
|
|
65
65
|
return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
|
|
66
66
|
}
|
|
67
|
+
|
|
68
|
+
export { getFocusableChild, isFocusable, isTabbable, iterateFocusableElements };
|
package/package.json
CHANGED
|
@@ -1,21 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/behaviors",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0-rc.09d1a86",
|
|
4
4
|
"description": "Shared behaviors for JavaScript components",
|
|
5
|
+
"type": "commonjs",
|
|
5
6
|
"main": "dist/cjs/index.js",
|
|
6
|
-
"module": "dist/esm/index.
|
|
7
|
+
"module": "dist/esm/index.mjs",
|
|
7
8
|
"exports": {
|
|
8
9
|
".": {
|
|
9
|
-
"
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
"types": {
|
|
11
|
+
"import": "./dist/esm/index.d.ts",
|
|
12
|
+
"require": "./dist/cjs/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"import": "./dist/esm/index.mjs",
|
|
15
|
+
"require": "./dist/cjs/index.js"
|
|
13
16
|
},
|
|
14
17
|
"./utils": {
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
"types": {
|
|
19
|
+
"import": "./dist/esm/utils/index.d.ts",
|
|
20
|
+
"require": "./dist/cjs/utils/index.d.ts"
|
|
21
|
+
},
|
|
22
|
+
"import": "./dist/esm/utils/index.mjs",
|
|
23
|
+
"require": "./dist/cjs/utils/index.js"
|
|
19
24
|
}
|
|
20
25
|
},
|
|
21
26
|
"types": "dist/esm/index.d.ts",
|
|
@@ -24,16 +29,14 @@
|
|
|
24
29
|
"utils"
|
|
25
30
|
],
|
|
26
31
|
"sideEffects": [
|
|
27
|
-
"dist/esm/focus-zone.
|
|
28
|
-
"dist/esm/focus-trap.
|
|
32
|
+
"dist/esm/focus-zone.mjs",
|
|
33
|
+
"dist/esm/focus-trap.mjs",
|
|
29
34
|
"dist/cjs/focus-zone.js",
|
|
30
35
|
"dist/cjs/focus-trap.js"
|
|
31
36
|
],
|
|
32
37
|
"scripts": {
|
|
33
|
-
"clean": "
|
|
34
|
-
"build": "
|
|
35
|
-
"build:esm": "tsc",
|
|
36
|
-
"build:cjs": "tsc --module commonjs --outDir dist/cjs",
|
|
38
|
+
"clean": "rimraf dist",
|
|
39
|
+
"build": "rollup -c",
|
|
37
40
|
"lint": "eslint src/",
|
|
38
41
|
"test": "jest",
|
|
39
42
|
"test:watch": "jest --watch",
|
|
@@ -62,20 +65,22 @@
|
|
|
62
65
|
"size-limit": [
|
|
63
66
|
{
|
|
64
67
|
"limit": "10kb",
|
|
65
|
-
"path": "dist/esm/index.
|
|
68
|
+
"path": "dist/esm/index.mjs"
|
|
66
69
|
}
|
|
67
70
|
],
|
|
68
71
|
"devDependencies": {
|
|
72
|
+
"@arethetypeswrong/cli": "^0.15.3",
|
|
69
73
|
"@changesets/changelog-github": "^0.5.0",
|
|
70
74
|
"@changesets/cli": "^2.18.1",
|
|
71
75
|
"@github/prettier-config": "^0.0.6",
|
|
72
|
-
"@
|
|
73
|
-
"@
|
|
76
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
|
77
|
+
"@size-limit/preset-small-lib": "^11.1.4",
|
|
78
|
+
"@testing-library/react": "^16.0.0",
|
|
74
79
|
"@testing-library/user-event": "^14.5.1",
|
|
75
80
|
"@types/jest": "^29.5.11",
|
|
76
81
|
"@types/node": "^20.10.5",
|
|
77
82
|
"@types/react": "^18.2.23",
|
|
78
|
-
"esbuild": "^0.
|
|
83
|
+
"esbuild": "^0.23.0",
|
|
79
84
|
"esbuild-jest": "^0.5.0",
|
|
80
85
|
"eslint": "^8.50.0",
|
|
81
86
|
"eslint-plugin-github": "^5.0.0",
|
|
@@ -85,7 +90,12 @@
|
|
|
85
90
|
"prettier": "^3.0.3",
|
|
86
91
|
"react": "^18.2.0",
|
|
87
92
|
"react-dom": "^18.2.0",
|
|
88
|
-
"
|
|
93
|
+
"rimraf": "^5.0.7",
|
|
94
|
+
"rollup": "^4.18.0",
|
|
95
|
+
"size-limit": "^11.1.4",
|
|
89
96
|
"typescript": "^5.2.2"
|
|
97
|
+
},
|
|
98
|
+
"optionalDependencies": {
|
|
99
|
+
"@rollup/rollup-linux-x64-gnu": "^4.18.0"
|
|
90
100
|
}
|
|
91
101
|
}
|
package/dist/esm/index.js
DELETED
package/dist/esm/utils/index.js
DELETED