@spectrum-web-components/reactive-controllers 0.46.0 → 0.47.1
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/package.json +2 -2
- package/src/FocusGroup.d.ts +5 -0
- package/src/FocusGroup.dev.js +26 -3
- package/src/FocusGroup.dev.js.map +2 -2
- package/src/FocusGroup.js +1 -1
- package/src/FocusGroup.js.map +3 -3
- package/src/MatchMedia.d.ts +1 -1
- package/src/MatchMedia.dev.js +1 -1
- package/src/MatchMedia.dev.js.map +1 -1
- package/src/MatchMedia.js +1 -1
- package/src/MatchMedia.js.map +2 -2
- package/src/RovingTabindex.dev.js +7 -1
- package/src/RovingTabindex.dev.js.map +2 -2
- package/src/RovingTabindex.js +1 -1
- package/src/RovingTabindex.js.map +2 -2
- package/test/roving-tabindex-integration.test.js +69 -79
- package/test/roving-tabindex-integration.test.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/reactive-controllers",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.47.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"sideEffects": [
|
|
84
84
|
"./**/*.dev.js"
|
|
85
85
|
],
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "151a3e21c39150dbc3f3a884b660be0bd352bda1"
|
|
87
87
|
}
|
package/src/FocusGroup.d.ts
CHANGED
|
@@ -43,6 +43,11 @@ export declare class FocusGroupController<T extends HTMLElement> implements Reac
|
|
|
43
43
|
hostNoLongerContainsFocus(): void;
|
|
44
44
|
isRelatedTargetOrContainAnElement(event: FocusEvent): boolean;
|
|
45
45
|
handleFocusin: (event: FocusEvent) => void;
|
|
46
|
+
/**
|
|
47
|
+
* handleClick - Finds the element that was clicked and sets the tabindex to 0
|
|
48
|
+
* @returns void
|
|
49
|
+
*/
|
|
50
|
+
handleClick: () => void;
|
|
46
51
|
handleFocusout: (event: FocusEvent) => void;
|
|
47
52
|
acceptsEventCode(code: string): boolean;
|
|
48
53
|
handleKeydown: (event: KeyboardEvent) => void;
|
package/src/FocusGroup.dev.js
CHANGED
|
@@ -35,9 +35,6 @@ export class FocusGroupController {
|
|
|
35
35
|
this.recentlyConnected = false;
|
|
36
36
|
this.handleFocusin = (event) => {
|
|
37
37
|
if (!this.isEventWithinListenerScope(event)) return;
|
|
38
|
-
if (this.isRelatedTargetOrContainAnElement(event)) {
|
|
39
|
-
this.hostContainsFocus();
|
|
40
|
-
}
|
|
41
38
|
const path = event.composedPath();
|
|
42
39
|
let targetIndex = -1;
|
|
43
40
|
path.find((el) => {
|
|
@@ -46,6 +43,30 @@ export class FocusGroupController {
|
|
|
46
43
|
});
|
|
47
44
|
this.prevIndex = this.currentIndex;
|
|
48
45
|
this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;
|
|
46
|
+
if (this.isRelatedTargetOrContainAnElement(event)) {
|
|
47
|
+
this.hostContainsFocus();
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
/**
|
|
51
|
+
* handleClick - Finds the element that was clicked and sets the tabindex to 0
|
|
52
|
+
* @returns void
|
|
53
|
+
*/
|
|
54
|
+
this.handleClick = () => {
|
|
55
|
+
var _a;
|
|
56
|
+
const elements = this.elements;
|
|
57
|
+
if (!elements.length) return;
|
|
58
|
+
let focusElement = elements[this.currentIndex];
|
|
59
|
+
if (this.currentIndex < 0) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
if (!focusElement || !this.isFocusableElement(focusElement)) {
|
|
63
|
+
this.setCurrentIndexCircularly(1);
|
|
64
|
+
focusElement = elements[this.currentIndex];
|
|
65
|
+
}
|
|
66
|
+
if (focusElement && this.isFocusableElement(focusElement)) {
|
|
67
|
+
(_a = elements[this.prevIndex]) == null ? void 0 : _a.setAttribute("tabindex", "-1");
|
|
68
|
+
focusElement.setAttribute("tabindex", "0");
|
|
69
|
+
}
|
|
49
70
|
};
|
|
50
71
|
this.handleFocusout = (event) => {
|
|
51
72
|
if (this.isRelatedTargetOrContainAnElement(event)) {
|
|
@@ -257,11 +278,13 @@ export class FocusGroupController {
|
|
|
257
278
|
}
|
|
258
279
|
addEventListeners() {
|
|
259
280
|
this.host.addEventListener("focusin", this.handleFocusin);
|
|
281
|
+
this.host.addEventListener("click", this.handleClick);
|
|
260
282
|
}
|
|
261
283
|
removeEventListeners() {
|
|
262
284
|
this.host.removeEventListener("focusin", this.handleFocusin);
|
|
263
285
|
this.host.removeEventListener("focusout", this.handleFocusout);
|
|
264
286
|
this.host.removeEventListener("keydown", this.handleKeydown);
|
|
287
|
+
this.host.removeEventListener("click", this.handleClick);
|
|
265
288
|
}
|
|
266
289
|
hostConnected() {
|
|
267
290
|
this.recentlyConnected = true;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["FocusGroup.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport type { ReactiveController, ReactiveElement } from 'lit';\n\ntype DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';\nexport type FocusGroupConfig<T> = {\n focusInIndex?: (_elements: T[]) => number;\n direction?: DirectionTypes | (() => DirectionTypes);\n elementEnterAction?: (el: T) => void;\n elements: () => T[];\n isFocusableElement?: (el: T) => boolean;\n listenerScope?: HTMLElement | (() => HTMLElement);\n};\n\nfunction ensureMethod<T, RT>(\n value: T | RT | undefined,\n type: string,\n fallback: T\n): T {\n if (typeof value === type) {\n return (() => value) as T;\n } else if (typeof value === 'function') {\n return value as T;\n }\n return fallback;\n}\n\nexport class FocusGroupController<T extends HTMLElement>\n implements ReactiveController\n{\n protected cachedElements?: T[];\n private mutationObserver: MutationObserver;\n\n get currentIndex(): number {\n if (this._currentIndex === -1) {\n this._currentIndex = this.focusInIndex;\n }\n return this._currentIndex - this.offset;\n }\n\n set currentIndex(currentIndex) {\n this._currentIndex = currentIndex + this.offset;\n }\n\n private _currentIndex = -1;\n\n private prevIndex = -1;\n\n get direction(): DirectionTypes {\n return this._direction();\n }\n\n _direction = (): DirectionTypes => 'both';\n\n public directionLength = 5;\n\n elementEnterAction = (_el: T): void => {\n return;\n };\n\n get elements(): T[] {\n if (!this.cachedElements) {\n this.cachedElements = this._elements();\n }\n return this.cachedElements;\n }\n\n private _elements!: () => T[];\n\n protected set focused(focused: boolean) {\n /* c8 ignore next 1 */\n if (focused === this.focused) return;\n this._focused = focused;\n }\n\n protected get focused(): boolean {\n return this._focused;\n }\n\n private _focused = false;\n\n get focusInElement(): T {\n return this.elements[this.focusInIndex];\n }\n\n get focusInIndex(): number {\n return this._focusInIndex(this.elements);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n _focusInIndex = (_elements: T[]): number => 0;\n\n host: ReactiveElement;\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n isFocusableElement = (_el: T): boolean => true;\n\n isEventWithinListenerScope(event: Event): boolean {\n if (this._listenerScope() === this.host) return true;\n return event.composedPath().includes(this._listenerScope());\n }\n\n _listenerScope = (): HTMLElement => this.host;\n\n // When elements are virtualized, the delta between the first element\n // and the first rendered element.\n offset = 0;\n\n recentlyConnected = false;\n\n constructor(\n host: ReactiveElement,\n {\n direction,\n elementEnterAction,\n elements,\n focusInIndex,\n isFocusableElement,\n listenerScope,\n }: FocusGroupConfig<T> = { elements: () => [] }\n ) {\n this.mutationObserver = new MutationObserver(() => {\n this.handleItemMutation();\n });\n this.host = host;\n this.host.addController(this);\n this._elements = elements;\n this.isFocusableElement = isFocusableElement || this.isFocusableElement;\n this._direction = ensureMethod<() => DirectionTypes, DirectionTypes>(\n direction,\n 'string',\n this._direction\n );\n this.elementEnterAction = elementEnterAction || this.elementEnterAction;\n this._focusInIndex = ensureMethod<(_elements: T[]) => number, number>(\n focusInIndex,\n 'number',\n this._focusInIndex\n );\n this._listenerScope = ensureMethod<() => HTMLElement, HTMLElement>(\n listenerScope,\n 'object',\n this._listenerScope\n );\n }\n /* In handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.\n Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;\n */\n handleItemMutation(): void {\n if (\n this._currentIndex == -1 ||\n this.elements.length <= this._elements().length\n )\n return;\n const focusedElement = this.elements[this.currentIndex];\n this.clearElementCache();\n if (this.elements.includes(focusedElement)) return;\n const moveToNextElement = this.currentIndex !== this.elements.length;\n const diff = moveToNextElement ? 1 : -1;\n if (moveToNextElement) {\n this.setCurrentIndexCircularly(-1);\n }\n this.setCurrentIndexCircularly(diff);\n this.focus();\n }\n\n update({ elements }: FocusGroupConfig<T> = { elements: () => [] }): void {\n this.unmanage();\n this._elements = elements;\n this.clearElementCache();\n this.manage();\n }\n\n focus(options?: FocusOptions): void {\n const elements = this.elements;\n if (!elements.length) return;\n let focusElement = elements[this.currentIndex];\n if (!focusElement || !this.isFocusableElement(focusElement)) {\n this.setCurrentIndexCircularly(1);\n focusElement = elements[this.currentIndex];\n }\n if (focusElement && this.isFocusableElement(focusElement)) {\n elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n focusElement.tabIndex = 0;\n focusElement.focus(options);\n }\n }\n\n clearElementCache(offset = 0): void {\n this.mutationObserver.disconnect();\n delete this.cachedElements;\n this.offset = offset;\n requestAnimationFrame(() => {\n this.elements.forEach((element) => {\n this.mutationObserver.observe(element, {\n attributes: true,\n });\n });\n });\n }\n\n setCurrentIndexCircularly(diff: number): void {\n const { length } = this.elements;\n let steps = length;\n this.prevIndex = this.currentIndex;\n // start at a possibly not 0 index\n let nextIndex = (length + this.currentIndex + diff) % length;\n while (\n // don't cycle the elements more than once\n steps &&\n this.elements[nextIndex] &&\n !this.isFocusableElement(this.elements[nextIndex])\n ) {\n nextIndex = (length + nextIndex + diff) % length;\n steps -= 1;\n }\n this.currentIndex = nextIndex;\n }\n\n hostContainsFocus(): void {\n this.host.addEventListener('focusout', this.handleFocusout);\n this.host.addEventListener('keydown', this.handleKeydown);\n this.focused = true;\n }\n\n hostNoLongerContainsFocus(): void {\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n this.host.removeEventListener('keydown', this.handleKeydown);\n this.focused = false;\n }\n\n isRelatedTargetOrContainAnElement(event: FocusEvent): boolean {\n const relatedTarget = event.relatedTarget as null | Element;\n\n const isRelatedTargetAnElement = this.elements.includes(\n relatedTarget as T\n );\n const isRelatedTargetContainedWithinElements = this.elements.some(\n (el) => el.contains(relatedTarget)\n );\n return !(\n isRelatedTargetAnElement || isRelatedTargetContainedWithinElements\n );\n }\n\n handleFocusin = (event: FocusEvent): void => {\n if (!this.isEventWithinListenerScope(event)) return;\n if (this.isRelatedTargetOrContainAnElement(event)) {\n this.hostContainsFocus();\n }\n const path = event.composedPath() as T[];\n let targetIndex = -1;\n path.find((el) => {\n targetIndex = this.elements.indexOf(el);\n return targetIndex !== -1;\n });\n this.prevIndex = this.currentIndex;\n this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;\n };\n\n handleFocusout = (event: FocusEvent): void => {\n if (this.isRelatedTargetOrContainAnElement(event)) {\n this.hostNoLongerContainsFocus();\n }\n };\n\n acceptsEventCode(code: string): boolean {\n if (code === 'End' || code === 'Home') {\n return true;\n }\n switch (this.direction) {\n case 'horizontal':\n return code === 'ArrowLeft' || code === 'ArrowRight';\n case 'vertical':\n return code === 'ArrowUp' || code === 'ArrowDown';\n case 'both':\n case 'grid':\n return code.startsWith('Arrow');\n }\n }\n\n handleKeydown = (event: KeyboardEvent): void => {\n if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {\n return;\n }\n let diff = 0;\n this.prevIndex = this.currentIndex;\n switch (event.code) {\n case 'ArrowRight':\n diff += 1;\n break;\n case 'ArrowDown':\n diff += this.direction === 'grid' ? this.directionLength : 1;\n break;\n case 'ArrowLeft':\n diff -= 1;\n break;\n case 'ArrowUp':\n diff -= this.direction === 'grid' ? this.directionLength : 1;\n break;\n case 'End':\n this.currentIndex = 0;\n diff -= 1;\n break;\n case 'Home':\n this.currentIndex = this.elements.length - 1;\n diff += 1;\n break;\n }\n event.preventDefault();\n if (this.direction === 'grid' && this.currentIndex + diff < 0) {\n this.currentIndex = 0;\n } else if (\n this.direction === 'grid' &&\n this.currentIndex + diff > this.elements.length - 1\n ) {\n this.currentIndex = this.elements.length - 1;\n } else {\n this.setCurrentIndexCircularly(diff);\n }\n // To allow the `focusInIndex` to be calculated with the \"after\" state of the keyboard interaction\n // do `elementEnterAction` _before_ focusing the next element.\n this.elementEnterAction(this.elements[this.currentIndex]);\n this.focus();\n };\n\n manage(): void {\n this.addEventListeners();\n }\n\n unmanage(): void {\n this.removeEventListeners();\n }\n\n addEventListeners(): void {\n this.host.addEventListener('focusin', this.handleFocusin);\n }\n\n removeEventListeners(): void {\n this.host.removeEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n this.host.removeEventListener('keydown', this.handleKeydown);\n }\n\n hostConnected(): void {\n this.recentlyConnected = true;\n this.addEventListeners();\n }\n\n hostDisconnected(): void {\n this.mutationObserver.disconnect();\n this.removeEventListeners();\n }\n\n hostUpdated(): void {\n if (this.recentlyConnected) {\n this.recentlyConnected = false;\n this.elements.forEach((element) => {\n this.mutationObserver.observe(element, {\n attributes: true,\n });\n });\n }\n }\n}\n"],
|
|
5
|
-
"mappings": ";AAuBA,SAAS,aACL,OACA,MACA,UACC;AACD,MAAI,OAAO,UAAU,MAAM;AACvB,WAAQ,MAAM;AAAA,EAClB,WAAW,OAAO,UAAU,YAAY;AACpC,WAAO;AAAA,EACX;AACA,SAAO;AACX;AAEO,aAAM,qBAEb;AAAA,EAiFI,YACI,MACA;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAyB,EAAE,UAAU,MAAM,CAAC,EAAE,GAChD;AA5EF,SAAQ,gBAAgB;AAExB,SAAQ,YAAY;AAMpB,sBAAa,MAAsB;AAEnC,SAAO,kBAAkB;AAEzB,8BAAqB,CAAC,QAAiB;AACnC;AAAA,IACJ;AAqBA,SAAQ,WAAW;AAWnB;AAAA,yBAAgB,CAAC,cAA2B;AAK5C;AAAA,8BAAqB,CAAC,QAAoB;AAO1C,0BAAiB,MAAmB,KAAK;AAIzC;AAAA;AAAA,kBAAS;AAET,6BAAoB;AA0IpB,yBAAgB,CAAC,UAA4B;AACzC,UAAI,CAAC,KAAK,2BAA2B,KAAK,EAAG;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport type { ReactiveController, ReactiveElement } from 'lit';\n\ntype DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';\nexport type FocusGroupConfig<T> = {\n focusInIndex?: (_elements: T[]) => number;\n direction?: DirectionTypes | (() => DirectionTypes);\n elementEnterAction?: (el: T) => void;\n elements: () => T[];\n isFocusableElement?: (el: T) => boolean;\n listenerScope?: HTMLElement | (() => HTMLElement);\n};\n\nfunction ensureMethod<T, RT>(\n value: T | RT | undefined,\n type: string,\n fallback: T\n): T {\n if (typeof value === type) {\n return (() => value) as T;\n } else if (typeof value === 'function') {\n return value as T;\n }\n return fallback;\n}\n\nexport class FocusGroupController<T extends HTMLElement>\n implements ReactiveController\n{\n protected cachedElements?: T[];\n private mutationObserver: MutationObserver;\n\n get currentIndex(): number {\n if (this._currentIndex === -1) {\n this._currentIndex = this.focusInIndex;\n }\n return this._currentIndex - this.offset;\n }\n\n set currentIndex(currentIndex) {\n this._currentIndex = currentIndex + this.offset;\n }\n\n private _currentIndex = -1;\n\n private prevIndex = -1;\n\n get direction(): DirectionTypes {\n return this._direction();\n }\n\n _direction = (): DirectionTypes => 'both';\n\n public directionLength = 5;\n\n elementEnterAction = (_el: T): void => {\n return;\n };\n\n get elements(): T[] {\n if (!this.cachedElements) {\n this.cachedElements = this._elements();\n }\n return this.cachedElements;\n }\n\n private _elements!: () => T[];\n\n protected set focused(focused: boolean) {\n /* c8 ignore next 1 */\n if (focused === this.focused) return;\n this._focused = focused;\n }\n\n protected get focused(): boolean {\n return this._focused;\n }\n\n private _focused = false;\n\n get focusInElement(): T {\n return this.elements[this.focusInIndex];\n }\n\n get focusInIndex(): number {\n return this._focusInIndex(this.elements);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n _focusInIndex = (_elements: T[]): number => 0;\n\n host: ReactiveElement;\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n isFocusableElement = (_el: T): boolean => true;\n\n isEventWithinListenerScope(event: Event): boolean {\n if (this._listenerScope() === this.host) return true;\n return event.composedPath().includes(this._listenerScope());\n }\n\n _listenerScope = (): HTMLElement => this.host;\n\n // When elements are virtualized, the delta between the first element\n // and the first rendered element.\n offset = 0;\n\n recentlyConnected = false;\n\n constructor(\n host: ReactiveElement,\n {\n direction,\n elementEnterAction,\n elements,\n focusInIndex,\n isFocusableElement,\n listenerScope,\n }: FocusGroupConfig<T> = { elements: () => [] }\n ) {\n this.mutationObserver = new MutationObserver(() => {\n this.handleItemMutation();\n });\n this.host = host;\n this.host.addController(this);\n this._elements = elements;\n this.isFocusableElement = isFocusableElement || this.isFocusableElement;\n this._direction = ensureMethod<() => DirectionTypes, DirectionTypes>(\n direction,\n 'string',\n this._direction\n );\n this.elementEnterAction = elementEnterAction || this.elementEnterAction;\n this._focusInIndex = ensureMethod<(_elements: T[]) => number, number>(\n focusInIndex,\n 'number',\n this._focusInIndex\n );\n this._listenerScope = ensureMethod<() => HTMLElement, HTMLElement>(\n listenerScope,\n 'object',\n this._listenerScope\n );\n }\n /* In handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.\n Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;\n */\n handleItemMutation(): void {\n if (\n this._currentIndex == -1 ||\n this.elements.length <= this._elements().length\n )\n return;\n const focusedElement = this.elements[this.currentIndex];\n this.clearElementCache();\n if (this.elements.includes(focusedElement)) return;\n const moveToNextElement = this.currentIndex !== this.elements.length;\n const diff = moveToNextElement ? 1 : -1;\n if (moveToNextElement) {\n this.setCurrentIndexCircularly(-1);\n }\n this.setCurrentIndexCircularly(diff);\n this.focus();\n }\n\n update({ elements }: FocusGroupConfig<T> = { elements: () => [] }): void {\n this.unmanage();\n this._elements = elements;\n this.clearElementCache();\n this.manage();\n }\n\n focus(options?: FocusOptions): void {\n const elements = this.elements;\n if (!elements.length) return;\n let focusElement = elements[this.currentIndex];\n if (!focusElement || !this.isFocusableElement(focusElement)) {\n this.setCurrentIndexCircularly(1);\n focusElement = elements[this.currentIndex];\n }\n if (focusElement && this.isFocusableElement(focusElement)) {\n elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n focusElement.tabIndex = 0;\n focusElement.focus(options);\n }\n }\n\n clearElementCache(offset = 0): void {\n this.mutationObserver.disconnect();\n delete this.cachedElements;\n this.offset = offset;\n requestAnimationFrame(() => {\n this.elements.forEach((element) => {\n this.mutationObserver.observe(element, {\n attributes: true,\n });\n });\n });\n }\n\n setCurrentIndexCircularly(diff: number): void {\n const { length } = this.elements;\n let steps = length;\n this.prevIndex = this.currentIndex;\n // start at a possibly not 0 index\n let nextIndex = (length + this.currentIndex + diff) % length;\n while (\n // don't cycle the elements more than once\n steps &&\n this.elements[nextIndex] &&\n !this.isFocusableElement(this.elements[nextIndex])\n ) {\n nextIndex = (length + nextIndex + diff) % length;\n steps -= 1;\n }\n this.currentIndex = nextIndex;\n }\n\n hostContainsFocus(): void {\n this.host.addEventListener('focusout', this.handleFocusout);\n this.host.addEventListener('keydown', this.handleKeydown);\n this.focused = true;\n }\n\n hostNoLongerContainsFocus(): void {\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n this.host.removeEventListener('keydown', this.handleKeydown);\n this.focused = false;\n }\n\n isRelatedTargetOrContainAnElement(event: FocusEvent): boolean {\n const relatedTarget = event.relatedTarget as null | Element;\n\n const isRelatedTargetAnElement = this.elements.includes(\n relatedTarget as T\n );\n const isRelatedTargetContainedWithinElements = this.elements.some(\n (el) => el.contains(relatedTarget)\n );\n return !(\n isRelatedTargetAnElement || isRelatedTargetContainedWithinElements\n );\n }\n\n handleFocusin = (event: FocusEvent): void => {\n if (!this.isEventWithinListenerScope(event)) return;\n\n const path = event.composedPath() as T[];\n let targetIndex = -1;\n path.find((el) => {\n targetIndex = this.elements.indexOf(el);\n return targetIndex !== -1;\n });\n this.prevIndex = this.currentIndex;\n this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;\n\n if (this.isRelatedTargetOrContainAnElement(event)) {\n this.hostContainsFocus();\n }\n };\n\n /**\n * handleClick - Finds the element that was clicked and sets the tabindex to 0\n * @returns void\n */\n handleClick = (): void => {\n // Manually set the tabindex to 0 for the current element on receiving focus (from keyboard or mouse)\n const elements = this.elements;\n if (!elements.length) return;\n let focusElement = elements[this.currentIndex];\n if (this.currentIndex < 0) {\n return;\n }\n if (!focusElement || !this.isFocusableElement(focusElement)) {\n this.setCurrentIndexCircularly(1);\n focusElement = elements[this.currentIndex];\n }\n if (focusElement && this.isFocusableElement(focusElement)) {\n elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n focusElement.setAttribute('tabindex', '0');\n }\n };\n\n handleFocusout = (event: FocusEvent): void => {\n if (this.isRelatedTargetOrContainAnElement(event)) {\n this.hostNoLongerContainsFocus();\n }\n };\n\n acceptsEventCode(code: string): boolean {\n if (code === 'End' || code === 'Home') {\n return true;\n }\n switch (this.direction) {\n case 'horizontal':\n return code === 'ArrowLeft' || code === 'ArrowRight';\n case 'vertical':\n return code === 'ArrowUp' || code === 'ArrowDown';\n case 'both':\n case 'grid':\n return code.startsWith('Arrow');\n }\n }\n\n handleKeydown = (event: KeyboardEvent): void => {\n if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {\n return;\n }\n let diff = 0;\n this.prevIndex = this.currentIndex;\n switch (event.code) {\n case 'ArrowRight':\n diff += 1;\n break;\n case 'ArrowDown':\n diff += this.direction === 'grid' ? this.directionLength : 1;\n break;\n case 'ArrowLeft':\n diff -= 1;\n break;\n case 'ArrowUp':\n diff -= this.direction === 'grid' ? this.directionLength : 1;\n break;\n case 'End':\n this.currentIndex = 0;\n diff -= 1;\n break;\n case 'Home':\n this.currentIndex = this.elements.length - 1;\n diff += 1;\n break;\n }\n event.preventDefault();\n if (this.direction === 'grid' && this.currentIndex + diff < 0) {\n this.currentIndex = 0;\n } else if (\n this.direction === 'grid' &&\n this.currentIndex + diff > this.elements.length - 1\n ) {\n this.currentIndex = this.elements.length - 1;\n } else {\n this.setCurrentIndexCircularly(diff);\n }\n // To allow the `focusInIndex` to be calculated with the \"after\" state of the keyboard interaction\n // do `elementEnterAction` _before_ focusing the next element.\n this.elementEnterAction(this.elements[this.currentIndex]);\n this.focus();\n };\n\n manage(): void {\n this.addEventListeners();\n }\n\n unmanage(): void {\n this.removeEventListeners();\n }\n\n addEventListeners(): void {\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.addEventListener('click', this.handleClick);\n }\n\n removeEventListeners(): void {\n this.host.removeEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n this.host.removeEventListener('keydown', this.handleKeydown);\n this.host.removeEventListener('click', this.handleClick);\n }\n\n hostConnected(): void {\n this.recentlyConnected = true;\n this.addEventListeners();\n }\n\n hostDisconnected(): void {\n this.mutationObserver.disconnect();\n this.removeEventListeners();\n }\n\n hostUpdated(): void {\n if (this.recentlyConnected) {\n this.recentlyConnected = false;\n this.elements.forEach((element) => {\n this.mutationObserver.observe(element, {\n attributes: true,\n });\n });\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/FocusGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function o(i,e,t){return typeof i===e?()=>i:typeof i=="function"?i:t}export class FocusGroupController{constructor(e,{direction:t,elementEnterAction:n,elements:s,focusInIndex:r,isFocusableElement:h,listenerScope:c}={elements:()=>[]}){this._currentIndex=-1;this.prevIndex=-1;this._direction=()=>"both";this.directionLength=5;this.elementEnterAction=e=>{};this._focused=!1;this._focusInIndex=e=>0;this.isFocusableElement=e=>!0;this._listenerScope=()=>this.host;this.offset=0;this.recentlyConnected=!1;this.handleFocusin=e=>{if(!this.isEventWithinListenerScope(e))return;
|
|
1
|
+
"use strict";function o(i,e,t){return typeof i===e?()=>i:typeof i=="function"?i:t}export class FocusGroupController{constructor(e,{direction:t,elementEnterAction:n,elements:s,focusInIndex:r,isFocusableElement:h,listenerScope:c}={elements:()=>[]}){this._currentIndex=-1;this.prevIndex=-1;this._direction=()=>"both";this.directionLength=5;this.elementEnterAction=e=>{};this._focused=!1;this._focusInIndex=e=>0;this.isFocusableElement=e=>!0;this._listenerScope=()=>this.host;this.offset=0;this.recentlyConnected=!1;this.handleFocusin=e=>{if(!this.isEventWithinListenerScope(e))return;const t=e.composedPath();let n=-1;t.find(s=>(n=this.elements.indexOf(s),n!==-1)),this.prevIndex=this.currentIndex,this.currentIndex=n>-1?n:this.currentIndex,this.isRelatedTargetOrContainAnElement(e)&&this.hostContainsFocus()};this.handleClick=()=>{var n;const e=this.elements;if(!e.length)return;let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")))};this.handleFocusout=e=>{this.isRelatedTargetOrContainAnElement(e)&&this.hostNoLongerContainsFocus()};this.handleKeydown=e=>{if(!this.acceptsEventCode(e.code)||e.defaultPrevented)return;let t=0;switch(this.prevIndex=this.currentIndex,e.code){case"ArrowRight":t+=1;break;case"ArrowDown":t+=this.direction==="grid"?this.directionLength:1;break;case"ArrowLeft":t-=1;break;case"ArrowUp":t-=this.direction==="grid"?this.directionLength:1;break;case"End":this.currentIndex=0,t-=1;break;case"Home":this.currentIndex=this.elements.length-1,t+=1;break}e.preventDefault(),this.direction==="grid"&&this.currentIndex+t<0?this.currentIndex=0:this.direction==="grid"&&this.currentIndex+t>this.elements.length-1?this.currentIndex=this.elements.length-1:this.setCurrentIndexCircularly(t),this.elementEnterAction(this.elements[this.currentIndex]),this.focus()};this.mutationObserver=new MutationObserver(()=>{this.handleItemMutation()}),this.host=e,this.host.addController(this),this._elements=s,this.isFocusableElement=h||this.isFocusableElement,this._direction=o(t,"string",this._direction),this.elementEnterAction=n||this.elementEnterAction,this._focusInIndex=o(r,"number",this._focusInIndex),this._listenerScope=o(c,"object",this._listenerScope)}get currentIndex(){return this._currentIndex===-1&&(this._currentIndex=this.focusInIndex),this._currentIndex-this.offset}set currentIndex(e){this._currentIndex=e+this.offset}get direction(){return this._direction()}get elements(){return this.cachedElements||(this.cachedElements=this._elements()),this.cachedElements}set focused(e){e!==this.focused&&(this._focused=e)}get focused(){return this._focused}get focusInElement(){return this.elements[this.focusInIndex]}get focusInIndex(){return this._focusInIndex(this.elements)}isEventWithinListenerScope(e){return this._listenerScope()===this.host?!0:e.composedPath().includes(this._listenerScope())}handleItemMutation(){if(this._currentIndex==-1||this.elements.length<=this._elements().length)return;const e=this.elements[this.currentIndex];if(this.clearElementCache(),this.elements.includes(e))return;const t=this.currentIndex!==this.elements.length,n=t?1:-1;t&&this.setCurrentIndexCircularly(-1),this.setCurrentIndexCircularly(n),this.focus()}update({elements:e}={elements:()=>[]}){this.unmanage(),this._elements=e,this.clearElementCache(),this.manage()}focus(e){var s;const t=this.elements;if(!t.length)return;let n=t[this.currentIndex];(!n||!this.isFocusableElement(n))&&(this.setCurrentIndexCircularly(1),n=t[this.currentIndex]),n&&this.isFocusableElement(n)&&((s=t[this.prevIndex])==null||s.setAttribute("tabindex","-1"),n.tabIndex=0,n.focus(e))}clearElementCache(e=0){this.mutationObserver.disconnect(),delete this.cachedElements,this.offset=e,requestAnimationFrame(()=>{this.elements.forEach(t=>{this.mutationObserver.observe(t,{attributes:!0})})})}setCurrentIndexCircularly(e){const{length:t}=this.elements;let n=t;this.prevIndex=this.currentIndex;let s=(t+this.currentIndex+e)%t;for(;n&&this.elements[s]&&!this.isFocusableElement(this.elements[s]);)s=(t+s+e)%t,n-=1;this.currentIndex=s}hostContainsFocus(){this.host.addEventListener("focusout",this.handleFocusout),this.host.addEventListener("keydown",this.handleKeydown),this.focused=!0}hostNoLongerContainsFocus(){this.host.addEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.focused=!1}isRelatedTargetOrContainAnElement(e){const t=e.relatedTarget,n=this.elements.includes(t),s=this.elements.some(r=>r.contains(t));return!(n||s)}acceptsEventCode(e){if(e==="End"||e==="Home")return!0;switch(this.direction){case"horizontal":return e==="ArrowLeft"||e==="ArrowRight";case"vertical":return e==="ArrowUp"||e==="ArrowDown";case"both":case"grid":return e.startsWith("Arrow")}}manage(){this.addEventListeners()}unmanage(){this.removeEventListeners()}addEventListeners(){this.host.addEventListener("focusin",this.handleFocusin),this.host.addEventListener("click",this.handleClick)}removeEventListeners(){this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.host.removeEventListener("click",this.handleClick)}hostConnected(){this.recentlyConnected=!0,this.addEventListeners()}hostDisconnected(){this.mutationObserver.disconnect(),this.removeEventListeners()}hostUpdated(){this.recentlyConnected&&(this.recentlyConnected=!1,this.elements.forEach(e=>{this.mutationObserver.observe(e,{attributes:!0})}))}}
|
|
2
2
|
//# sourceMappingURL=FocusGroup.js.map
|
package/src/FocusGroup.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["FocusGroup.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport type { ReactiveController, ReactiveElement } from 'lit';\n\ntype DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';\nexport type FocusGroupConfig<T> = {\n focusInIndex?: (_elements: T[]) => number;\n direction?: DirectionTypes | (() => DirectionTypes);\n elementEnterAction?: (el: T) => void;\n elements: () => T[];\n isFocusableElement?: (el: T) => boolean;\n listenerScope?: HTMLElement | (() => HTMLElement);\n};\n\nfunction ensureMethod<T, RT>(\n value: T | RT | undefined,\n type: string,\n fallback: T\n): T {\n if (typeof value === type) {\n return (() => value) as T;\n } else if (typeof value === 'function') {\n return value as T;\n }\n return fallback;\n}\n\nexport class FocusGroupController<T extends HTMLElement>\n implements ReactiveController\n{\n protected cachedElements?: T[];\n private mutationObserver: MutationObserver;\n\n get currentIndex(): number {\n if (this._currentIndex === -1) {\n this._currentIndex = this.focusInIndex;\n }\n return this._currentIndex - this.offset;\n }\n\n set currentIndex(currentIndex) {\n this._currentIndex = currentIndex + this.offset;\n }\n\n private _currentIndex = -1;\n\n private prevIndex = -1;\n\n get direction(): DirectionTypes {\n return this._direction();\n }\n\n _direction = (): DirectionTypes => 'both';\n\n public directionLength = 5;\n\n elementEnterAction = (_el: T): void => {\n return;\n };\n\n get elements(): T[] {\n if (!this.cachedElements) {\n this.cachedElements = this._elements();\n }\n return this.cachedElements;\n }\n\n private _elements!: () => T[];\n\n protected set focused(focused: boolean) {\n /* c8 ignore next 1 */\n if (focused === this.focused) return;\n this._focused = focused;\n }\n\n protected get focused(): boolean {\n return this._focused;\n }\n\n private _focused = false;\n\n get focusInElement(): T {\n return this.elements[this.focusInIndex];\n }\n\n get focusInIndex(): number {\n return this._focusInIndex(this.elements);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n _focusInIndex = (_elements: T[]): number => 0;\n\n host: ReactiveElement;\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n isFocusableElement = (_el: T): boolean => true;\n\n isEventWithinListenerScope(event: Event): boolean {\n if (this._listenerScope() === this.host) return true;\n return event.composedPath().includes(this._listenerScope());\n }\n\n _listenerScope = (): HTMLElement => this.host;\n\n // When elements are virtualized, the delta between the first element\n // and the first rendered element.\n offset = 0;\n\n recentlyConnected = false;\n\n constructor(\n host: ReactiveElement,\n {\n direction,\n elementEnterAction,\n elements,\n focusInIndex,\n isFocusableElement,\n listenerScope,\n }: FocusGroupConfig<T> = { elements: () => [] }\n ) {\n this.mutationObserver = new MutationObserver(() => {\n this.handleItemMutation();\n });\n this.host = host;\n this.host.addController(this);\n this._elements = elements;\n this.isFocusableElement = isFocusableElement || this.isFocusableElement;\n this._direction = ensureMethod<() => DirectionTypes, DirectionTypes>(\n direction,\n 'string',\n this._direction\n );\n this.elementEnterAction = elementEnterAction || this.elementEnterAction;\n this._focusInIndex = ensureMethod<(_elements: T[]) => number, number>(\n focusInIndex,\n 'number',\n this._focusInIndex\n );\n this._listenerScope = ensureMethod<() => HTMLElement, HTMLElement>(\n listenerScope,\n 'object',\n this._listenerScope\n );\n }\n /* In handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.\n Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;\n */\n handleItemMutation(): void {\n if (\n this._currentIndex == -1 ||\n this.elements.length <= this._elements().length\n )\n return;\n const focusedElement = this.elements[this.currentIndex];\n this.clearElementCache();\n if (this.elements.includes(focusedElement)) return;\n const moveToNextElement = this.currentIndex !== this.elements.length;\n const diff = moveToNextElement ? 1 : -1;\n if (moveToNextElement) {\n this.setCurrentIndexCircularly(-1);\n }\n this.setCurrentIndexCircularly(diff);\n this.focus();\n }\n\n update({ elements }: FocusGroupConfig<T> = { elements: () => [] }): void {\n this.unmanage();\n this._elements = elements;\n this.clearElementCache();\n this.manage();\n }\n\n focus(options?: FocusOptions): void {\n const elements = this.elements;\n if (!elements.length) return;\n let focusElement = elements[this.currentIndex];\n if (!focusElement || !this.isFocusableElement(focusElement)) {\n this.setCurrentIndexCircularly(1);\n focusElement = elements[this.currentIndex];\n }\n if (focusElement && this.isFocusableElement(focusElement)) {\n elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n focusElement.tabIndex = 0;\n focusElement.focus(options);\n }\n }\n\n clearElementCache(offset = 0): void {\n this.mutationObserver.disconnect();\n delete this.cachedElements;\n this.offset = offset;\n requestAnimationFrame(() => {\n this.elements.forEach((element) => {\n this.mutationObserver.observe(element, {\n attributes: true,\n });\n });\n });\n }\n\n setCurrentIndexCircularly(diff: number): void {\n const { length } = this.elements;\n let steps = length;\n this.prevIndex = this.currentIndex;\n // start at a possibly not 0 index\n let nextIndex = (length + this.currentIndex + diff) % length;\n while (\n // don't cycle the elements more than once\n steps &&\n this.elements[nextIndex] &&\n !this.isFocusableElement(this.elements[nextIndex])\n ) {\n nextIndex = (length + nextIndex + diff) % length;\n steps -= 1;\n }\n this.currentIndex = nextIndex;\n }\n\n hostContainsFocus(): void {\n this.host.addEventListener('focusout', this.handleFocusout);\n this.host.addEventListener('keydown', this.handleKeydown);\n this.focused = true;\n }\n\n hostNoLongerContainsFocus(): void {\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n this.host.removeEventListener('keydown', this.handleKeydown);\n this.focused = false;\n }\n\n isRelatedTargetOrContainAnElement(event: FocusEvent): boolean {\n const relatedTarget = event.relatedTarget as null | Element;\n\n const isRelatedTargetAnElement = this.elements.includes(\n relatedTarget as T\n );\n const isRelatedTargetContainedWithinElements = this.elements.some(\n (el) => el.contains(relatedTarget)\n );\n return !(\n isRelatedTargetAnElement || isRelatedTargetContainedWithinElements\n );\n }\n\n handleFocusin = (event: FocusEvent): void => {\n if (!this.isEventWithinListenerScope(event)) return;\n if (this.isRelatedTargetOrContainAnElement(event)) {\n this.hostContainsFocus();\n }\n const path = event.composedPath() as T[];\n let targetIndex = -1;\n path.find((el) => {\n targetIndex = this.elements.indexOf(el);\n return targetIndex !== -1;\n });\n this.prevIndex = this.currentIndex;\n this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;\n };\n\n handleFocusout = (event: FocusEvent): void => {\n if (this.isRelatedTargetOrContainAnElement(event)) {\n this.hostNoLongerContainsFocus();\n }\n };\n\n acceptsEventCode(code: string): boolean {\n if (code === 'End' || code === 'Home') {\n return true;\n }\n switch (this.direction) {\n case 'horizontal':\n return code === 'ArrowLeft' || code === 'ArrowRight';\n case 'vertical':\n return code === 'ArrowUp' || code === 'ArrowDown';\n case 'both':\n case 'grid':\n return code.startsWith('Arrow');\n }\n }\n\n handleKeydown = (event: KeyboardEvent): void => {\n if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {\n return;\n }\n let diff = 0;\n this.prevIndex = this.currentIndex;\n switch (event.code) {\n case 'ArrowRight':\n diff += 1;\n break;\n case 'ArrowDown':\n diff += this.direction === 'grid' ? this.directionLength : 1;\n break;\n case 'ArrowLeft':\n diff -= 1;\n break;\n case 'ArrowUp':\n diff -= this.direction === 'grid' ? this.directionLength : 1;\n break;\n case 'End':\n this.currentIndex = 0;\n diff -= 1;\n break;\n case 'Home':\n this.currentIndex = this.elements.length - 1;\n diff += 1;\n break;\n }\n event.preventDefault();\n if (this.direction === 'grid' && this.currentIndex + diff < 0) {\n this.currentIndex = 0;\n } else if (\n this.direction === 'grid' &&\n this.currentIndex + diff > this.elements.length - 1\n ) {\n this.currentIndex = this.elements.length - 1;\n } else {\n this.setCurrentIndexCircularly(diff);\n }\n // To allow the `focusInIndex` to be calculated with the \"after\" state of the keyboard interaction\n // do `elementEnterAction` _before_ focusing the next element.\n this.elementEnterAction(this.elements[this.currentIndex]);\n this.focus();\n };\n\n manage(): void {\n this.addEventListeners();\n }\n\n unmanage(): void {\n this.removeEventListeners();\n }\n\n addEventListeners(): void {\n this.host.addEventListener('focusin', this.handleFocusin);\n }\n\n removeEventListeners(): void {\n this.host.removeEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n this.host.removeEventListener('keydown', this.handleKeydown);\n }\n\n hostConnected(): void {\n this.recentlyConnected = true;\n this.addEventListeners();\n }\n\n hostDisconnected(): void {\n this.mutationObserver.disconnect();\n this.removeEventListeners();\n }\n\n hostUpdated(): void {\n if (this.recentlyConnected) {\n this.recentlyConnected = false;\n this.elements.forEach((element) => {\n this.mutationObserver.observe(element, {\n attributes: true,\n });\n });\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "aAuBA,SAASA,EACLC,EACAC,EACAC,EACC,CACD,OAAI,OAAOF,IAAUC,EACT,IAAMD,EACP,OAAOA,GAAU,WACjBA,EAEJE,CACX,CAEO,aAAM,oBAEb,CAiFI,YACIC,EACA,CACI,UAAAC,EACA,mBAAAC,EACA,SAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,cAAAC,CACJ,EAAyB,CAAE,SAAU,IAAM,CAAC,CAAE,EAChD,CA5EF,KAAQ,cAAgB,GAExB,KAAQ,UAAY,GAMpB,gBAAa,IAAsB,OAEnC,KAAO,gBAAkB,EAEzB,wBAAsBC,GAAiB,CAEvC,EAqBA,KAAQ,SAAW,GAWnB,mBAAiBC,GAA2B,EAK5C,wBAAsBD,GAAoB,GAO1C,oBAAiB,IAAmB,KAAK,KAIzC,YAAS,EAET,uBAAoB,GA0IpB,mBAAiBE,GAA4B,CACzC,GAAI,CAAC,KAAK,2BAA2BA,CAAK,EAAG,
|
|
6
|
-
"names": ["ensureMethod", "value", "type", "fallback", "host", "direction", "elementEnterAction", "elements", "focusInIndex", "isFocusableElement", "listenerScope", "_el", "_elements", "event", "path", "targetIndex", "el", "
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport type { ReactiveController, ReactiveElement } from 'lit';\n\ntype DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';\nexport type FocusGroupConfig<T> = {\n focusInIndex?: (_elements: T[]) => number;\n direction?: DirectionTypes | (() => DirectionTypes);\n elementEnterAction?: (el: T) => void;\n elements: () => T[];\n isFocusableElement?: (el: T) => boolean;\n listenerScope?: HTMLElement | (() => HTMLElement);\n};\n\nfunction ensureMethod<T, RT>(\n value: T | RT | undefined,\n type: string,\n fallback: T\n): T {\n if (typeof value === type) {\n return (() => value) as T;\n } else if (typeof value === 'function') {\n return value as T;\n }\n return fallback;\n}\n\nexport class FocusGroupController<T extends HTMLElement>\n implements ReactiveController\n{\n protected cachedElements?: T[];\n private mutationObserver: MutationObserver;\n\n get currentIndex(): number {\n if (this._currentIndex === -1) {\n this._currentIndex = this.focusInIndex;\n }\n return this._currentIndex - this.offset;\n }\n\n set currentIndex(currentIndex) {\n this._currentIndex = currentIndex + this.offset;\n }\n\n private _currentIndex = -1;\n\n private prevIndex = -1;\n\n get direction(): DirectionTypes {\n return this._direction();\n }\n\n _direction = (): DirectionTypes => 'both';\n\n public directionLength = 5;\n\n elementEnterAction = (_el: T): void => {\n return;\n };\n\n get elements(): T[] {\n if (!this.cachedElements) {\n this.cachedElements = this._elements();\n }\n return this.cachedElements;\n }\n\n private _elements!: () => T[];\n\n protected set focused(focused: boolean) {\n /* c8 ignore next 1 */\n if (focused === this.focused) return;\n this._focused = focused;\n }\n\n protected get focused(): boolean {\n return this._focused;\n }\n\n private _focused = false;\n\n get focusInElement(): T {\n return this.elements[this.focusInIndex];\n }\n\n get focusInIndex(): number {\n return this._focusInIndex(this.elements);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n _focusInIndex = (_elements: T[]): number => 0;\n\n host: ReactiveElement;\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n isFocusableElement = (_el: T): boolean => true;\n\n isEventWithinListenerScope(event: Event): boolean {\n if (this._listenerScope() === this.host) return true;\n return event.composedPath().includes(this._listenerScope());\n }\n\n _listenerScope = (): HTMLElement => this.host;\n\n // When elements are virtualized, the delta between the first element\n // and the first rendered element.\n offset = 0;\n\n recentlyConnected = false;\n\n constructor(\n host: ReactiveElement,\n {\n direction,\n elementEnterAction,\n elements,\n focusInIndex,\n isFocusableElement,\n listenerScope,\n }: FocusGroupConfig<T> = { elements: () => [] }\n ) {\n this.mutationObserver = new MutationObserver(() => {\n this.handleItemMutation();\n });\n this.host = host;\n this.host.addController(this);\n this._elements = elements;\n this.isFocusableElement = isFocusableElement || this.isFocusableElement;\n this._direction = ensureMethod<() => DirectionTypes, DirectionTypes>(\n direction,\n 'string',\n this._direction\n );\n this.elementEnterAction = elementEnterAction || this.elementEnterAction;\n this._focusInIndex = ensureMethod<(_elements: T[]) => number, number>(\n focusInIndex,\n 'number',\n this._focusInIndex\n );\n this._listenerScope = ensureMethod<() => HTMLElement, HTMLElement>(\n listenerScope,\n 'object',\n this._listenerScope\n );\n }\n /* In handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.\n Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;\n */\n handleItemMutation(): void {\n if (\n this._currentIndex == -1 ||\n this.elements.length <= this._elements().length\n )\n return;\n const focusedElement = this.elements[this.currentIndex];\n this.clearElementCache();\n if (this.elements.includes(focusedElement)) return;\n const moveToNextElement = this.currentIndex !== this.elements.length;\n const diff = moveToNextElement ? 1 : -1;\n if (moveToNextElement) {\n this.setCurrentIndexCircularly(-1);\n }\n this.setCurrentIndexCircularly(diff);\n this.focus();\n }\n\n update({ elements }: FocusGroupConfig<T> = { elements: () => [] }): void {\n this.unmanage();\n this._elements = elements;\n this.clearElementCache();\n this.manage();\n }\n\n focus(options?: FocusOptions): void {\n const elements = this.elements;\n if (!elements.length) return;\n let focusElement = elements[this.currentIndex];\n if (!focusElement || !this.isFocusableElement(focusElement)) {\n this.setCurrentIndexCircularly(1);\n focusElement = elements[this.currentIndex];\n }\n if (focusElement && this.isFocusableElement(focusElement)) {\n elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n focusElement.tabIndex = 0;\n focusElement.focus(options);\n }\n }\n\n clearElementCache(offset = 0): void {\n this.mutationObserver.disconnect();\n delete this.cachedElements;\n this.offset = offset;\n requestAnimationFrame(() => {\n this.elements.forEach((element) => {\n this.mutationObserver.observe(element, {\n attributes: true,\n });\n });\n });\n }\n\n setCurrentIndexCircularly(diff: number): void {\n const { length } = this.elements;\n let steps = length;\n this.prevIndex = this.currentIndex;\n // start at a possibly not 0 index\n let nextIndex = (length + this.currentIndex + diff) % length;\n while (\n // don't cycle the elements more than once\n steps &&\n this.elements[nextIndex] &&\n !this.isFocusableElement(this.elements[nextIndex])\n ) {\n nextIndex = (length + nextIndex + diff) % length;\n steps -= 1;\n }\n this.currentIndex = nextIndex;\n }\n\n hostContainsFocus(): void {\n this.host.addEventListener('focusout', this.handleFocusout);\n this.host.addEventListener('keydown', this.handleKeydown);\n this.focused = true;\n }\n\n hostNoLongerContainsFocus(): void {\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n this.host.removeEventListener('keydown', this.handleKeydown);\n this.focused = false;\n }\n\n isRelatedTargetOrContainAnElement(event: FocusEvent): boolean {\n const relatedTarget = event.relatedTarget as null | Element;\n\n const isRelatedTargetAnElement = this.elements.includes(\n relatedTarget as T\n );\n const isRelatedTargetContainedWithinElements = this.elements.some(\n (el) => el.contains(relatedTarget)\n );\n return !(\n isRelatedTargetAnElement || isRelatedTargetContainedWithinElements\n );\n }\n\n handleFocusin = (event: FocusEvent): void => {\n if (!this.isEventWithinListenerScope(event)) return;\n\n const path = event.composedPath() as T[];\n let targetIndex = -1;\n path.find((el) => {\n targetIndex = this.elements.indexOf(el);\n return targetIndex !== -1;\n });\n this.prevIndex = this.currentIndex;\n this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;\n\n if (this.isRelatedTargetOrContainAnElement(event)) {\n this.hostContainsFocus();\n }\n };\n\n /**\n * handleClick - Finds the element that was clicked and sets the tabindex to 0\n * @returns void\n */\n handleClick = (): void => {\n // Manually set the tabindex to 0 for the current element on receiving focus (from keyboard or mouse)\n const elements = this.elements;\n if (!elements.length) return;\n let focusElement = elements[this.currentIndex];\n if (this.currentIndex < 0) {\n return;\n }\n if (!focusElement || !this.isFocusableElement(focusElement)) {\n this.setCurrentIndexCircularly(1);\n focusElement = elements[this.currentIndex];\n }\n if (focusElement && this.isFocusableElement(focusElement)) {\n elements[this.prevIndex]?.setAttribute('tabindex', '-1');\n focusElement.setAttribute('tabindex', '0');\n }\n };\n\n handleFocusout = (event: FocusEvent): void => {\n if (this.isRelatedTargetOrContainAnElement(event)) {\n this.hostNoLongerContainsFocus();\n }\n };\n\n acceptsEventCode(code: string): boolean {\n if (code === 'End' || code === 'Home') {\n return true;\n }\n switch (this.direction) {\n case 'horizontal':\n return code === 'ArrowLeft' || code === 'ArrowRight';\n case 'vertical':\n return code === 'ArrowUp' || code === 'ArrowDown';\n case 'both':\n case 'grid':\n return code.startsWith('Arrow');\n }\n }\n\n handleKeydown = (event: KeyboardEvent): void => {\n if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {\n return;\n }\n let diff = 0;\n this.prevIndex = this.currentIndex;\n switch (event.code) {\n case 'ArrowRight':\n diff += 1;\n break;\n case 'ArrowDown':\n diff += this.direction === 'grid' ? this.directionLength : 1;\n break;\n case 'ArrowLeft':\n diff -= 1;\n break;\n case 'ArrowUp':\n diff -= this.direction === 'grid' ? this.directionLength : 1;\n break;\n case 'End':\n this.currentIndex = 0;\n diff -= 1;\n break;\n case 'Home':\n this.currentIndex = this.elements.length - 1;\n diff += 1;\n break;\n }\n event.preventDefault();\n if (this.direction === 'grid' && this.currentIndex + diff < 0) {\n this.currentIndex = 0;\n } else if (\n this.direction === 'grid' &&\n this.currentIndex + diff > this.elements.length - 1\n ) {\n this.currentIndex = this.elements.length - 1;\n } else {\n this.setCurrentIndexCircularly(diff);\n }\n // To allow the `focusInIndex` to be calculated with the \"after\" state of the keyboard interaction\n // do `elementEnterAction` _before_ focusing the next element.\n this.elementEnterAction(this.elements[this.currentIndex]);\n this.focus();\n };\n\n manage(): void {\n this.addEventListeners();\n }\n\n unmanage(): void {\n this.removeEventListeners();\n }\n\n addEventListeners(): void {\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.addEventListener('click', this.handleClick);\n }\n\n removeEventListeners(): void {\n this.host.removeEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n this.host.removeEventListener('keydown', this.handleKeydown);\n this.host.removeEventListener('click', this.handleClick);\n }\n\n hostConnected(): void {\n this.recentlyConnected = true;\n this.addEventListeners();\n }\n\n hostDisconnected(): void {\n this.mutationObserver.disconnect();\n this.removeEventListeners();\n }\n\n hostUpdated(): void {\n if (this.recentlyConnected) {\n this.recentlyConnected = false;\n this.elements.forEach((element) => {\n this.mutationObserver.observe(element, {\n attributes: true,\n });\n });\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ensureMethod", "value", "type", "fallback", "host", "direction", "elementEnterAction", "elements", "focusInIndex", "isFocusableElement", "listenerScope", "_el", "_elements", "event", "path", "targetIndex", "el", "_a", "focusElement", "diff", "currentIndex", "focused", "focusedElement", "moveToNextElement", "options", "offset", "element", "length", "steps", "nextIndex", "relatedTarget", "isRelatedTargetAnElement", "isRelatedTargetContainedWithinElements", "code"]
|
|
7
7
|
}
|
package/src/MatchMedia.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ReactiveController, ReactiveElement } from 'lit';
|
|
2
2
|
export declare const DARK_MODE = "(prefers-color-scheme: dark)";
|
|
3
|
-
export declare const IS_MOBILE = "(max-width:
|
|
3
|
+
export declare const IS_MOBILE = "(max-width: 743px) and (hover: none) and (pointer: coarse)";
|
|
4
4
|
export declare class MatchMediaController implements ReactiveController {
|
|
5
5
|
key: symbol;
|
|
6
6
|
matches: boolean;
|
package/src/MatchMedia.dev.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
export const DARK_MODE = "(prefers-color-scheme: dark)";
|
|
3
|
-
export const IS_MOBILE = "(max-width:
|
|
3
|
+
export const IS_MOBILE = "(max-width: 743px) and (hover: none) and (pointer: coarse)";
|
|
4
4
|
export class MatchMediaController {
|
|
5
5
|
constructor(host, query) {
|
|
6
6
|
this.key = Symbol("match-media-key");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["MatchMedia.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport type { ReactiveController, ReactiveElement } from 'lit';\n\nexport const DARK_MODE = '(prefers-color-scheme: dark)';\nexport const IS_MOBILE =\n '(max-width:
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport type { ReactiveController, ReactiveElement } from 'lit';\n\nexport const DARK_MODE = '(prefers-color-scheme: dark)';\nexport const IS_MOBILE =\n '(max-width: 743px) and (hover: none) and (pointer: coarse)';\n\nexport class MatchMediaController implements ReactiveController {\n key = Symbol('match-media-key');\n\n matches = false;\n\n protected host: ReactiveElement;\n\n protected media: MediaQueryList;\n\n constructor(host: ReactiveElement, query: string) {\n this.host = host;\n this.host.addController(this);\n this.media = window.matchMedia(query);\n this.matches = this.media.matches;\n this.onChange = this.onChange.bind(this);\n host.addController(this);\n }\n\n public hostConnected(): void {\n this.media?.addEventListener('change', this.onChange);\n }\n\n public hostDisconnected(): void {\n this.media?.removeEventListener('change', this.onChange);\n }\n\n protected onChange(event: MediaQueryListEvent): void {\n if (this.matches === event.matches) return;\n this.matches = event.matches;\n this.host.requestUpdate(this.key, !this.matches);\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAaO,aAAM,YAAY;AAClB,aAAM,YACT;AAEG,aAAM,qBAAmD;AAAA,EAS5D,YAAY,MAAuB,OAAe;AARlD,eAAM,OAAO,iBAAiB;AAE9B,mBAAU;AAON,SAAK,OAAO;AACZ,SAAK,KAAK,cAAc,IAAI;AAC5B,SAAK,QAAQ,OAAO,WAAW,KAAK;AACpC,SAAK,UAAU,KAAK,MAAM;AAC1B,SAAK,WAAW,KAAK,SAAS,KAAK,IAAI;AACvC,SAAK,cAAc,IAAI;AAAA,EAC3B;AAAA,EAEO,gBAAsB;AAnCjC;AAoCQ,eAAK,UAAL,mBAAY,iBAAiB,UAAU,KAAK;AAAA,EAChD;AAAA,EAEO,mBAAyB;AAvCpC;AAwCQ,eAAK,UAAL,mBAAY,oBAAoB,UAAU,KAAK;AAAA,EACnD;AAAA,EAEU,SAAS,OAAkC;AACjD,QAAI,KAAK,YAAY,MAAM,QAAS;AACpC,SAAK,UAAU,MAAM;AACrB,SAAK,KAAK,cAAc,KAAK,KAAK,CAAC,KAAK,OAAO;AAAA,EACnD;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/MatchMedia.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";export const DARK_MODE="(prefers-color-scheme: dark)",IS_MOBILE="(max-width:
|
|
1
|
+
"use strict";export const DARK_MODE="(prefers-color-scheme: dark)",IS_MOBILE="(max-width: 743px) and (hover: none) and (pointer: coarse)";export class MatchMediaController{constructor(e,t){this.key=Symbol("match-media-key");this.matches=!1;this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}}
|
|
2
2
|
//# sourceMappingURL=MatchMedia.js.map
|
package/src/MatchMedia.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["MatchMedia.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport type { ReactiveController, ReactiveElement } from 'lit';\n\nexport const DARK_MODE = '(prefers-color-scheme: dark)';\nexport const IS_MOBILE =\n '(max-width:
|
|
5
|
-
"mappings": "aAaO,aAAM,UAAY,+BACZ,UACT,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport type { ReactiveController, ReactiveElement } from 'lit';\n\nexport const DARK_MODE = '(prefers-color-scheme: dark)';\nexport const IS_MOBILE =\n '(max-width: 743px) and (hover: none) and (pointer: coarse)';\n\nexport class MatchMediaController implements ReactiveController {\n key = Symbol('match-media-key');\n\n matches = false;\n\n protected host: ReactiveElement;\n\n protected media: MediaQueryList;\n\n constructor(host: ReactiveElement, query: string) {\n this.host = host;\n this.host.addController(this);\n this.media = window.matchMedia(query);\n this.matches = this.media.matches;\n this.onChange = this.onChange.bind(this);\n host.addController(this);\n }\n\n public hostConnected(): void {\n this.media?.addEventListener('change', this.onChange);\n }\n\n public hostDisconnected(): void {\n this.media?.removeEventListener('change', this.onChange);\n }\n\n protected onChange(event: MediaQueryListEvent): void {\n if (this.matches === event.matches) return;\n this.matches = event.matches;\n this.host.requestUpdate(this.key, !this.matches);\n }\n}\n"],
|
|
5
|
+
"mappings": "aAaO,aAAM,UAAY,+BACZ,UACT,6DAEG,aAAM,oBAAmD,CAS5D,YAAYA,EAAuBC,EAAe,CARlD,SAAM,OAAO,iBAAiB,EAE9B,aAAU,GAON,KAAK,KAAOD,EACZ,KAAK,KAAK,cAAc,IAAI,EAC5B,KAAK,MAAQ,OAAO,WAAWC,CAAK,EACpC,KAAK,QAAU,KAAK,MAAM,QAC1B,KAAK,SAAW,KAAK,SAAS,KAAK,IAAI,EACvCD,EAAK,cAAc,IAAI,CAC3B,CAEO,eAAsB,CAnCjC,IAAAE,GAoCQA,EAAA,KAAK,QAAL,MAAAA,EAAY,iBAAiB,SAAU,KAAK,SAChD,CAEO,kBAAyB,CAvCpC,IAAAA,GAwCQA,EAAA,KAAK,QAAL,MAAAA,EAAY,oBAAoB,SAAU,KAAK,SACnD,CAEU,SAASC,EAAkC,CAC7C,KAAK,UAAYA,EAAM,UAC3B,KAAK,QAAUA,EAAM,QACrB,KAAK,KAAK,cAAc,KAAK,IAAK,CAAC,KAAK,OAAO,EACnD,CACJ",
|
|
6
6
|
"names": ["host", "query", "_a", "event"]
|
|
7
7
|
}
|
|
@@ -38,7 +38,13 @@ export class RovingTabindexController extends FocusGroupController {
|
|
|
38
38
|
this.elements.forEach((el) => {
|
|
39
39
|
const { tabIndex, removeTabIndex } = getTabIndex(el);
|
|
40
40
|
if (!removeTabIndex) {
|
|
41
|
-
|
|
41
|
+
if (this.focused) {
|
|
42
|
+
if (el !== this.elements[this.currentIndex]) {
|
|
43
|
+
el.tabIndex = tabIndex;
|
|
44
|
+
}
|
|
45
|
+
} else {
|
|
46
|
+
el.tabIndex = tabIndex;
|
|
47
|
+
}
|
|
42
48
|
return;
|
|
43
49
|
}
|
|
44
50
|
el.removeAttribute("tabindex");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["RovingTabindex.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { FocusGroupConfig, FocusGroupController } from './FocusGroup.dev.js'\n\nexport type RovingTabindexConfig<T> = FocusGroupConfig<T>;\ninterface UpdateTabIndexes {\n tabIndex: number;\n removeTabIndex?: boolean;\n}\n\nexport class RovingTabindexController<\n T extends HTMLElement,\n> extends FocusGroupController<T> {\n protected override set focused(focused: boolean) {\n if (focused === this.focused) return;\n super.focused = focused;\n this.manageTabindexes();\n }\n\n protected override get focused(): boolean {\n return super.focused;\n }\n\n private managed = true;\n\n private manageIndexesAnimationFrame = 0;\n\n override clearElementCache(offset = 0): void {\n cancelAnimationFrame(this.manageIndexesAnimationFrame);\n super.clearElementCache(offset);\n if (!this.managed) return;\n\n this.manageIndexesAnimationFrame = requestAnimationFrame(() =>\n this.manageTabindexes()\n );\n }\n\n manageTabindexes(): void {\n if (this.focused) {\n this.updateTabindexes(() => ({ tabIndex: -1 }));\n } else {\n this.updateTabindexes((el: HTMLElement): UpdateTabIndexes => {\n return {\n removeTabIndex:\n el.contains(this.focusInElement) &&\n el !== this.focusInElement,\n tabIndex: el === this.focusInElement ? 0 : -1,\n };\n });\n }\n }\n\n updateTabindexes(getTabIndex: (el: HTMLElement) => UpdateTabIndexes): void {\n this.elements.forEach((el) => {\n const { tabIndex, removeTabIndex } = getTabIndex(el);\n if (!removeTabIndex) {\n el.tabIndex = tabIndex;\n return;\n }\n el.removeAttribute('tabindex');\n const updatable = el as unknown as {\n requestUpdate?: () => void;\n };\n if (updatable.requestUpdate) updatable.requestUpdate();\n });\n }\n\n override manage(): void {\n this.managed = true;\n this.manageTabindexes();\n super.manage();\n }\n\n override unmanage(): void {\n this.managed = false;\n this.updateTabindexes(() => ({ tabIndex: 0 }));\n super.unmanage();\n }\n\n override hostUpdated(): void {\n super.hostUpdated();\n if (!this.host.hasUpdated) {\n this.manageTabindexes();\n }\n }\n}\n"],
|
|
5
|
-
"mappings": ";AAWA,SAA2B,4BAA4B;AAQhD,aAAM,iCAEH,qBAAwB;AAAA,EAF3B;AAAA;AAaH,SAAQ,UAAU;AAElB,SAAQ,8BAA8B;AAAA;AAAA,EAZtC,IAAuB,QAAQ,SAAkB;AAC7C,QAAI,YAAY,KAAK,QAAS;AAC9B,UAAM,UAAU;AAChB,SAAK,iBAAiB;AAAA,EAC1B;AAAA,EAEA,IAAuB,UAAmB;AACtC,WAAO,MAAM;AAAA,EACjB;AAAA,EAMS,kBAAkB,SAAS,GAAS;AACzC,yBAAqB,KAAK,2BAA2B;AACrD,UAAM,kBAAkB,MAAM;AAC9B,QAAI,CAAC,KAAK,QAAS;AAEnB,SAAK,8BAA8B;AAAA,MAAsB,MACrD,KAAK,iBAAiB;AAAA,IAC1B;AAAA,EACJ;AAAA,EAEA,mBAAyB;AACrB,QAAI,KAAK,SAAS;AACd,WAAK,iBAAiB,OAAO,EAAE,UAAU,GAAG,EAAE;AAAA,IAClD,OAAO;AACH,WAAK,iBAAiB,CAAC,OAAsC;AACzD,eAAO;AAAA,UACH,gBACI,GAAG,SAAS,KAAK,cAAc,KAC/B,OAAO,KAAK;AAAA,UAChB,UAAU,OAAO,KAAK,iBAAiB,IAAI;AAAA,QAC/C;AAAA,MACJ,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEA,iBAAiB,aAA0D;AACvE,SAAK,SAAS,QAAQ,CAAC,OAAO;AAC1B,YAAM,EAAE,UAAU,eAAe,IAAI,YAAY,EAAE;AACnD,UAAI,CAAC,gBAAgB;AACjB,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { FocusGroupConfig, FocusGroupController } from './FocusGroup.dev.js'\n\nexport type RovingTabindexConfig<T> = FocusGroupConfig<T>;\ninterface UpdateTabIndexes {\n tabIndex: number;\n removeTabIndex?: boolean;\n}\n\nexport class RovingTabindexController<\n T extends HTMLElement,\n> extends FocusGroupController<T> {\n protected override set focused(focused: boolean) {\n if (focused === this.focused) return;\n super.focused = focused;\n this.manageTabindexes();\n }\n\n protected override get focused(): boolean {\n return super.focused;\n }\n\n private managed = true;\n\n private manageIndexesAnimationFrame = 0;\n\n override clearElementCache(offset = 0): void {\n cancelAnimationFrame(this.manageIndexesAnimationFrame);\n super.clearElementCache(offset);\n if (!this.managed) return;\n\n this.manageIndexesAnimationFrame = requestAnimationFrame(() =>\n this.manageTabindexes()\n );\n }\n\n manageTabindexes(): void {\n if (this.focused) {\n this.updateTabindexes(() => ({ tabIndex: -1 }));\n } else {\n this.updateTabindexes((el: HTMLElement): UpdateTabIndexes => {\n return {\n removeTabIndex:\n el.contains(this.focusInElement) &&\n el !== this.focusInElement,\n tabIndex: el === this.focusInElement ? 0 : -1,\n };\n });\n }\n }\n\n updateTabindexes(getTabIndex: (el: HTMLElement) => UpdateTabIndexes): void {\n this.elements.forEach((el) => {\n const { tabIndex, removeTabIndex } = getTabIndex(el);\n if (!removeTabIndex) {\n if (this.focused) {\n if (el !== this.elements[this.currentIndex]) {\n el.tabIndex = tabIndex;\n }\n } else {\n el.tabIndex = tabIndex;\n }\n return;\n }\n el.removeAttribute('tabindex');\n const updatable = el as unknown as {\n requestUpdate?: () => void;\n };\n if (updatable.requestUpdate) updatable.requestUpdate();\n });\n }\n\n override manage(): void {\n this.managed = true;\n this.manageTabindexes();\n super.manage();\n }\n\n override unmanage(): void {\n this.managed = false;\n this.updateTabindexes(() => ({ tabIndex: 0 }));\n super.unmanage();\n }\n\n override hostUpdated(): void {\n super.hostUpdated();\n if (!this.host.hasUpdated) {\n this.manageTabindexes();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAWA,SAA2B,4BAA4B;AAQhD,aAAM,iCAEH,qBAAwB;AAAA,EAF3B;AAAA;AAaH,SAAQ,UAAU;AAElB,SAAQ,8BAA8B;AAAA;AAAA,EAZtC,IAAuB,QAAQ,SAAkB;AAC7C,QAAI,YAAY,KAAK,QAAS;AAC9B,UAAM,UAAU;AAChB,SAAK,iBAAiB;AAAA,EAC1B;AAAA,EAEA,IAAuB,UAAmB;AACtC,WAAO,MAAM;AAAA,EACjB;AAAA,EAMS,kBAAkB,SAAS,GAAS;AACzC,yBAAqB,KAAK,2BAA2B;AACrD,UAAM,kBAAkB,MAAM;AAC9B,QAAI,CAAC,KAAK,QAAS;AAEnB,SAAK,8BAA8B;AAAA,MAAsB,MACrD,KAAK,iBAAiB;AAAA,IAC1B;AAAA,EACJ;AAAA,EAEA,mBAAyB;AACrB,QAAI,KAAK,SAAS;AACd,WAAK,iBAAiB,OAAO,EAAE,UAAU,GAAG,EAAE;AAAA,IAClD,OAAO;AACH,WAAK,iBAAiB,CAAC,OAAsC;AACzD,eAAO;AAAA,UACH,gBACI,GAAG,SAAS,KAAK,cAAc,KAC/B,OAAO,KAAK;AAAA,UAChB,UAAU,OAAO,KAAK,iBAAiB,IAAI;AAAA,QAC/C;AAAA,MACJ,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEA,iBAAiB,aAA0D;AACvE,SAAK,SAAS,QAAQ,CAAC,OAAO;AAC1B,YAAM,EAAE,UAAU,eAAe,IAAI,YAAY,EAAE;AACnD,UAAI,CAAC,gBAAgB;AACjB,YAAI,KAAK,SAAS;AACd,cAAI,OAAO,KAAK,SAAS,KAAK,YAAY,GAAG;AACzC,eAAG,WAAW;AAAA,UAClB;AAAA,QACJ,OAAO;AACH,aAAG,WAAW;AAAA,QAClB;AACA;AAAA,MACJ;AACA,SAAG,gBAAgB,UAAU;AAC7B,YAAM,YAAY;AAGlB,UAAI,UAAU,cAAe,WAAU,cAAc;AAAA,IACzD,CAAC;AAAA,EACL;AAAA,EAES,SAAe;AACpB,SAAK,UAAU;AACf,SAAK,iBAAiB;AACtB,UAAM,OAAO;AAAA,EACjB;AAAA,EAES,WAAiB;AACtB,SAAK,UAAU;AACf,SAAK,iBAAiB,OAAO,EAAE,UAAU,EAAE,EAAE;AAC7C,UAAM,SAAS;AAAA,EACnB;AAAA,EAES,cAAoB;AACzB,UAAM,YAAY;AAClB,QAAI,CAAC,KAAK,KAAK,YAAY;AACvB,WAAK,iBAAiB;AAAA,IAC1B;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/RovingTabindex.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{FocusGroupController as i}from"./FocusGroup.js";export class RovingTabindexController extends i{constructor(){super(...arguments);this.managed=!0;this.manageIndexesAnimationFrame=0}set focused(e){e!==this.focused&&(super.focused=e,this.manageTabindexes())}get focused(){return super.focused}clearElementCache(e=0){cancelAnimationFrame(this.manageIndexesAnimationFrame),super.clearElementCache(e),this.managed&&(this.manageIndexesAnimationFrame=requestAnimationFrame(()=>this.manageTabindexes()))}manageTabindexes(){this.focused?this.updateTabindexes(()=>({tabIndex:-1})):this.updateTabindexes(e=>({removeTabIndex:e.contains(this.focusInElement)&&e!==this.focusInElement,tabIndex:e===this.focusInElement?0:-1}))}updateTabindexes(e){this.elements.forEach(a=>{const{tabIndex:
|
|
1
|
+
"use strict";import{FocusGroupController as i}from"./FocusGroup.js";export class RovingTabindexController extends i{constructor(){super(...arguments);this.managed=!0;this.manageIndexesAnimationFrame=0}set focused(e){e!==this.focused&&(super.focused=e,this.manageTabindexes())}get focused(){return super.focused}clearElementCache(e=0){cancelAnimationFrame(this.manageIndexesAnimationFrame),super.clearElementCache(e),this.managed&&(this.manageIndexesAnimationFrame=requestAnimationFrame(()=>this.manageTabindexes()))}manageTabindexes(){this.focused?this.updateTabindexes(()=>({tabIndex:-1})):this.updateTabindexes(e=>({removeTabIndex:e.contains(this.focusInElement)&&e!==this.focusInElement,tabIndex:e===this.focusInElement?0:-1}))}updateTabindexes(e){this.elements.forEach(a=>{const{tabIndex:n,removeTabIndex:s}=e(a);if(!s){this.focused?a!==this.elements[this.currentIndex]&&(a.tabIndex=n):a.tabIndex=n;return}a.removeAttribute("tabindex");const t=a;t.requestUpdate&&t.requestUpdate()})}manage(){this.managed=!0,this.manageTabindexes(),super.manage()}unmanage(){this.managed=!1,this.updateTabindexes(()=>({tabIndex:0})),super.unmanage()}hostUpdated(){super.hostUpdated(),this.host.hasUpdated||this.manageTabindexes()}}
|
|
2
2
|
//# sourceMappingURL=RovingTabindex.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["RovingTabindex.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { FocusGroupConfig, FocusGroupController } from './FocusGroup.js';\n\nexport type RovingTabindexConfig<T> = FocusGroupConfig<T>;\ninterface UpdateTabIndexes {\n tabIndex: number;\n removeTabIndex?: boolean;\n}\n\nexport class RovingTabindexController<\n T extends HTMLElement,\n> extends FocusGroupController<T> {\n protected override set focused(focused: boolean) {\n if (focused === this.focused) return;\n super.focused = focused;\n this.manageTabindexes();\n }\n\n protected override get focused(): boolean {\n return super.focused;\n }\n\n private managed = true;\n\n private manageIndexesAnimationFrame = 0;\n\n override clearElementCache(offset = 0): void {\n cancelAnimationFrame(this.manageIndexesAnimationFrame);\n super.clearElementCache(offset);\n if (!this.managed) return;\n\n this.manageIndexesAnimationFrame = requestAnimationFrame(() =>\n this.manageTabindexes()\n );\n }\n\n manageTabindexes(): void {\n if (this.focused) {\n this.updateTabindexes(() => ({ tabIndex: -1 }));\n } else {\n this.updateTabindexes((el: HTMLElement): UpdateTabIndexes => {\n return {\n removeTabIndex:\n el.contains(this.focusInElement) &&\n el !== this.focusInElement,\n tabIndex: el === this.focusInElement ? 0 : -1,\n };\n });\n }\n }\n\n updateTabindexes(getTabIndex: (el: HTMLElement) => UpdateTabIndexes): void {\n this.elements.forEach((el) => {\n const { tabIndex, removeTabIndex } = getTabIndex(el);\n if (!removeTabIndex) {\n el.tabIndex = tabIndex;\n return;\n }\n el.removeAttribute('tabindex');\n const updatable = el as unknown as {\n requestUpdate?: () => void;\n };\n if (updatable.requestUpdate) updatable.requestUpdate();\n });\n }\n\n override manage(): void {\n this.managed = true;\n this.manageTabindexes();\n super.manage();\n }\n\n override unmanage(): void {\n this.managed = false;\n this.updateTabindexes(() => ({ tabIndex: 0 }));\n super.unmanage();\n }\n\n override hostUpdated(): void {\n super.hostUpdated();\n if (!this.host.hasUpdated) {\n this.manageTabindexes();\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "aAWA,OAA2B,wBAAAA,MAA4B,kBAQhD,aAAM,iCAEHA,CAAwB,CAF3B,kCAaH,KAAQ,QAAU,GAElB,KAAQ,4BAA8B,EAZtC,IAAuB,QAAQC,EAAkB,CACzCA,IAAY,KAAK,UACrB,MAAM,QAAUA,EAChB,KAAK,iBAAiB,EAC1B,CAEA,IAAuB,SAAmB,CACtC,OAAO,MAAM,OACjB,CAMS,kBAAkBC,EAAS,EAAS,CACzC,qBAAqB,KAAK,2BAA2B,EACrD,MAAM,kBAAkBA,CAAM,EACzB,KAAK,UAEV,KAAK,4BAA8B,sBAAsB,IACrD,KAAK,iBAAiB,CAC1B,EACJ,CAEA,kBAAyB,CACjB,KAAK,QACL,KAAK,iBAAiB,KAAO,CAAE,SAAU,EAAG,EAAE,EAE9C,KAAK,iBAAkBC,IACZ,CACH,eACIA,EAAG,SAAS,KAAK,cAAc,GAC/BA,IAAO,KAAK,eAChB,SAAUA,IAAO,KAAK,eAAiB,EAAI,EAC/C,EACH,CAET,CAEA,iBAAiBC,EAA0D,CACvE,KAAK,SAAS,QAASD,GAAO,CAC1B,KAAM,CAAE,SAAAE,EAAU,eAAAC,CAAe,EAAIF,EAAYD,CAAE,EACnD,GAAI,CAACG,EAAgB,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { FocusGroupConfig, FocusGroupController } from './FocusGroup.js';\n\nexport type RovingTabindexConfig<T> = FocusGroupConfig<T>;\ninterface UpdateTabIndexes {\n tabIndex: number;\n removeTabIndex?: boolean;\n}\n\nexport class RovingTabindexController<\n T extends HTMLElement,\n> extends FocusGroupController<T> {\n protected override set focused(focused: boolean) {\n if (focused === this.focused) return;\n super.focused = focused;\n this.manageTabindexes();\n }\n\n protected override get focused(): boolean {\n return super.focused;\n }\n\n private managed = true;\n\n private manageIndexesAnimationFrame = 0;\n\n override clearElementCache(offset = 0): void {\n cancelAnimationFrame(this.manageIndexesAnimationFrame);\n super.clearElementCache(offset);\n if (!this.managed) return;\n\n this.manageIndexesAnimationFrame = requestAnimationFrame(() =>\n this.manageTabindexes()\n );\n }\n\n manageTabindexes(): void {\n if (this.focused) {\n this.updateTabindexes(() => ({ tabIndex: -1 }));\n } else {\n this.updateTabindexes((el: HTMLElement): UpdateTabIndexes => {\n return {\n removeTabIndex:\n el.contains(this.focusInElement) &&\n el !== this.focusInElement,\n tabIndex: el === this.focusInElement ? 0 : -1,\n };\n });\n }\n }\n\n updateTabindexes(getTabIndex: (el: HTMLElement) => UpdateTabIndexes): void {\n this.elements.forEach((el) => {\n const { tabIndex, removeTabIndex } = getTabIndex(el);\n if (!removeTabIndex) {\n if (this.focused) {\n if (el !== this.elements[this.currentIndex]) {\n el.tabIndex = tabIndex;\n }\n } else {\n el.tabIndex = tabIndex;\n }\n return;\n }\n el.removeAttribute('tabindex');\n const updatable = el as unknown as {\n requestUpdate?: () => void;\n };\n if (updatable.requestUpdate) updatable.requestUpdate();\n });\n }\n\n override manage(): void {\n this.managed = true;\n this.manageTabindexes();\n super.manage();\n }\n\n override unmanage(): void {\n this.managed = false;\n this.updateTabindexes(() => ({ tabIndex: 0 }));\n super.unmanage();\n }\n\n override hostUpdated(): void {\n super.hostUpdated();\n if (!this.host.hasUpdated) {\n this.manageTabindexes();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "aAWA,OAA2B,wBAAAA,MAA4B,kBAQhD,aAAM,iCAEHA,CAAwB,CAF3B,kCAaH,KAAQ,QAAU,GAElB,KAAQ,4BAA8B,EAZtC,IAAuB,QAAQC,EAAkB,CACzCA,IAAY,KAAK,UACrB,MAAM,QAAUA,EAChB,KAAK,iBAAiB,EAC1B,CAEA,IAAuB,SAAmB,CACtC,OAAO,MAAM,OACjB,CAMS,kBAAkBC,EAAS,EAAS,CACzC,qBAAqB,KAAK,2BAA2B,EACrD,MAAM,kBAAkBA,CAAM,EACzB,KAAK,UAEV,KAAK,4BAA8B,sBAAsB,IACrD,KAAK,iBAAiB,CAC1B,EACJ,CAEA,kBAAyB,CACjB,KAAK,QACL,KAAK,iBAAiB,KAAO,CAAE,SAAU,EAAG,EAAE,EAE9C,KAAK,iBAAkBC,IACZ,CACH,eACIA,EAAG,SAAS,KAAK,cAAc,GAC/BA,IAAO,KAAK,eAChB,SAAUA,IAAO,KAAK,eAAiB,EAAI,EAC/C,EACH,CAET,CAEA,iBAAiBC,EAA0D,CACvE,KAAK,SAAS,QAASD,GAAO,CAC1B,KAAM,CAAE,SAAAE,EAAU,eAAAC,CAAe,EAAIF,EAAYD,CAAE,EACnD,GAAI,CAACG,EAAgB,CACb,KAAK,QACDH,IAAO,KAAK,SAAS,KAAK,YAAY,IACtCA,EAAG,SAAWE,GAGlBF,EAAG,SAAWE,EAElB,MACJ,CACAF,EAAG,gBAAgB,UAAU,EAC7B,MAAMI,EAAYJ,EAGdI,EAAU,eAAeA,EAAU,cAAc,CACzD,CAAC,CACL,CAES,QAAe,CACpB,KAAK,QAAU,GACf,KAAK,iBAAiB,EACtB,MAAM,OAAO,CACjB,CAES,UAAiB,CACtB,KAAK,QAAU,GACf,KAAK,iBAAiB,KAAO,CAAE,SAAU,CAAE,EAAE,EAC7C,MAAM,SAAS,CACnB,CAES,aAAoB,CACzB,MAAM,YAAY,EACb,KAAK,KAAK,YACX,KAAK,iBAAiB,CAE9B,CACJ",
|
|
6
6
|
"names": ["FocusGroupController", "focused", "offset", "el", "getTabIndex", "tabIndex", "removeTabIndex", "updatable"]
|
|
7
7
|
}
|
|
@@ -12,80 +12,72 @@ import { html } from "@spectrum-web-components/base";
|
|
|
12
12
|
import { sendKeys } from "@web/test-runner-commands";
|
|
13
13
|
import { sendMouse } from "../../../test/plugins/browser.js";
|
|
14
14
|
const createTabs = async () => {
|
|
15
|
-
const tabs = await fixture(
|
|
16
|
-
|
|
17
|
-
<sp-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<sp-
|
|
22
|
-
<sp-action-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
<sp-
|
|
35
|
-
<sp-action-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<sp-
|
|
48
|
-
<sp-action-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
</sp-action-button>
|
|
58
|
-
</sp-action-group>
|
|
59
|
-
</sp-tab-panel>
|
|
60
|
-
</sp-tabs>
|
|
61
|
-
`
|
|
62
|
-
);
|
|
15
|
+
const tabs = await fixture(html`
|
|
16
|
+
<sp-tabs selected="second">
|
|
17
|
+
<sp-tab label="Tab 1" value="first"></sp-tab>
|
|
18
|
+
<sp-tab label="Tab 2" value="second"></sp-tab>
|
|
19
|
+
<sp-tab label="Tab 3" value="third"></sp-tab>
|
|
20
|
+
<sp-tab-panel value="first">
|
|
21
|
+
<sp-action-group selects="single">
|
|
22
|
+
<sp-action-button selected value="1">
|
|
23
|
+
Single Button 1
|
|
24
|
+
</sp-action-button>
|
|
25
|
+
<sp-action-button value="2">
|
|
26
|
+
Single Button 2
|
|
27
|
+
</sp-action-button>
|
|
28
|
+
<sp-action-button value="3">
|
|
29
|
+
Single Button 3
|
|
30
|
+
</sp-action-button>
|
|
31
|
+
</sp-action-group>
|
|
32
|
+
</sp-tab-panel>
|
|
33
|
+
<sp-tab-panel value="second">
|
|
34
|
+
<sp-action-group selects="multiple">
|
|
35
|
+
<sp-action-button value="1">
|
|
36
|
+
Multiple Button 1
|
|
37
|
+
</sp-action-button>
|
|
38
|
+
<sp-action-button selected value="2">
|
|
39
|
+
Multiple Button 2
|
|
40
|
+
</sp-action-button>
|
|
41
|
+
<sp-action-button selected value="3">
|
|
42
|
+
Multiple Button 3
|
|
43
|
+
</sp-action-button>
|
|
44
|
+
</sp-action-group>
|
|
45
|
+
</sp-tab-panel>
|
|
46
|
+
<sp-tab-panel value="third">
|
|
47
|
+
<sp-action-group>
|
|
48
|
+
<sp-action-button value="1">None Button 1</sp-action-button>
|
|
49
|
+
<sp-action-button value="2">None Button 2</sp-action-button>
|
|
50
|
+
<sp-action-button selected value="3">
|
|
51
|
+
None Button 3
|
|
52
|
+
</sp-action-button>
|
|
53
|
+
</sp-action-group>
|
|
54
|
+
</sp-tab-panel>
|
|
55
|
+
</sp-tabs>
|
|
56
|
+
`);
|
|
63
57
|
await elementUpdated(tabs);
|
|
64
58
|
return tabs;
|
|
65
59
|
};
|
|
66
60
|
const createGroup = async () => {
|
|
67
|
-
const group = await fixture(
|
|
68
|
-
|
|
69
|
-
<sp-action-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<sp-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<sp-menu
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
`
|
|
88
|
-
);
|
|
61
|
+
const group = await fixture(html`
|
|
62
|
+
<sp-action-group>
|
|
63
|
+
<sp-action-button>Button 1</sp-action-button>
|
|
64
|
+
<sp-action-button>Longer Button 2</sp-action-button>
|
|
65
|
+
<sp-action-button>Short 3</sp-action-button>
|
|
66
|
+
<sp-action-menu label="More Actions">
|
|
67
|
+
<sp-menu-item>One</sp-menu-item>
|
|
68
|
+
<sp-menu-item>Two</sp-menu-item>
|
|
69
|
+
<sp-menu-item>Three</sp-menu-item>
|
|
70
|
+
<sp-menu-item>
|
|
71
|
+
Select some items
|
|
72
|
+
<sp-menu slot="submenu" selects="multiple">
|
|
73
|
+
<sp-menu-item>A</sp-menu-item>
|
|
74
|
+
<sp-menu-item selected>B</sp-menu-item>
|
|
75
|
+
<sp-menu-item>C</sp-menu-item>
|
|
76
|
+
</sp-menu>
|
|
77
|
+
</sp-menu-item>
|
|
78
|
+
</sp-action-menu>
|
|
79
|
+
</sp-action-group>
|
|
80
|
+
`);
|
|
89
81
|
await elementUpdated(group);
|
|
90
82
|
return group;
|
|
91
83
|
};
|
|
@@ -222,15 +214,13 @@ describe("Action Menu inside of Action Group", () => {
|
|
|
222
214
|
describe("tabIndex is cached properly", () => {
|
|
223
215
|
it("cache is managed properly", async () => {
|
|
224
216
|
var _a, _b, _c, _d, _e;
|
|
225
|
-
const menuEl = await fixture(
|
|
226
|
-
|
|
227
|
-
<sp-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
`
|
|
233
|
-
);
|
|
217
|
+
const menuEl = await fixture(html`
|
|
218
|
+
<sp-action-menu label="More Actions">
|
|
219
|
+
<sp-menu-item>One</sp-menu-item>
|
|
220
|
+
<sp-menu-item>Two</sp-menu-item>
|
|
221
|
+
<sp-menu-item>Three</sp-menu-item>
|
|
222
|
+
</sp-action-menu>
|
|
223
|
+
`);
|
|
234
224
|
expect(menuEl.tabIndex).to.equal(0);
|
|
235
225
|
expect((_a = menuEl.focusElement) == null ? void 0 : _a.tabIndex).to.equal(0);
|
|
236
226
|
menuEl.tabIndex = 1;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["roving-tabindex-integration.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport '@spectrum-web-components/tabs/sp-tab-panel.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport { Tab, TabPanel, Tabs } from '@spectrum-web-components/tabs';\nimport { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';\nimport { html } from '@spectrum-web-components/base';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\nconst createTabs = async (): Promise<Tabs> => {\n const tabs = await fixture<Tabs>(\n html`\n <sp-tabs selected=\"second\">\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n <sp-tab-panel value=\"first\">\n <sp-action-group selects=\"single\">\n <sp-action-button selected value=\"1\">\n Single Button 1\n </sp-action-button>\n <sp-action-button value=\"2\">\n Single Button 2\n </sp-action-button>\n <sp-action-button value=\"3\">\n Single Button 3\n </sp-action-button>\n </sp-action-group>\n </sp-tab-panel>\n <sp-tab-panel value=\"second\">\n <sp-action-group selects=\"multiple\">\n <sp-action-button value=\"1\">\n Multiple Button 1\n </sp-action-button>\n <sp-action-button selected value=\"2\">\n Multiple Button 2\n </sp-action-button>\n <sp-action-button selected value=\"3\">\n Multiple Button 3\n </sp-action-button>\n </sp-action-group>\n </sp-tab-panel>\n <sp-tab-panel value=\"third\">\n <sp-action-group>\n <sp-action-button value=\"1\">\n None Button 1\n </sp-action-button>\n <sp-action-button value=\"2\">\n None Button 2\n </sp-action-button>\n <sp-action-button selected value=\"3\">\n None Button 3\n </sp-action-button>\n </sp-action-group>\n </sp-tab-panel>\n </sp-tabs>\n `\n );\n await elementUpdated(tabs);\n return tabs;\n};\n\nconst createGroup = async (): Promise<ActionGroup> => {\n const group = await fixture<ActionGroup>(\n html`\n <sp-action-group>\n <sp-action-button>Button 1</sp-action-button>\n <sp-action-button>Longer Button 2</sp-action-button>\n <sp-action-button>Short 3</sp-action-button>\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item>Two</sp-menu-item>\n <sp-menu-item>Three</sp-menu-item>\n <sp-menu-item>\n Select some items\n <sp-menu slot=\"submenu\" selects=\"multiple\">\n <sp-menu-item>A</sp-menu-item>\n <sp-menu-item selected>B</sp-menu-item>\n <sp-menu-item>C</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n </sp-action-group>\n `\n );\n await elementUpdated(group);\n return group;\n};\n\ndescribe('Action Group inside of Tabs', () => {\n it('accurately navigates the desired element', async () => {\n const el = await createTabs();\n const tab1 = el.querySelector('sp-tab[value=\"first\"]') as Tab;\n const tab2 = el.querySelector('sp-tab[value=\"second\"]');\n const tab3 = el.querySelector('sp-tab[value=\"third\"]') as Tab;\n const tabPanel1 = el.querySelector(\n 'sp-tab-panel[value=\"first\"]'\n ) as TabPanel;\n const tabPanel2 = el.querySelector(\n 'sp-tab-panel[value=\"second\"]'\n ) as TabPanel;\n const tabPanel3 = el.querySelector(\n 'sp-tab-panel[value=\"third\"]'\n ) as TabPanel;\n const actionGroup1 = tabPanel1.querySelector(\n 'sp-action-group'\n ) as ActionGroup;\n const actionGroup2 = tabPanel2.querySelector(\n 'sp-action-group'\n ) as ActionGroup;\n const actionGroup3 = tabPanel3.querySelector(\n 'sp-action-group'\n ) as ActionGroup;\n const actionButton1 = actionGroup1.querySelector(\n '[selected]'\n ) as ActionButton;\n const actionButton2 = actionGroup2.querySelector(\n '[selected]'\n ) as ActionButton;\n const actionButton3 = actionGroup3.querySelector(\n '[selected]'\n ) as ActionButton;\n\n el.focus();\n expect(el.contains(document.activeElement)).to.be.true;\n expect(document.activeElement === tab2).to.be.true;\n\n actionGroup2.focus();\n expect(document.activeElement === actionButton2).to.be.true;\n\n await nextFrame();\n await sendKeys({\n press: 'ArrowLeft',\n });\n\n expect(document.activeElement === tab1).to.be.false;\n expect(actionGroup2.contains(document.activeElement)).to.be.true;\n\n el.focus();\n expect(document.activeElement === tab2).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n\n expect(document.activeElement === tab3).to.be.true;\n\n await sendKeys({\n press: 'Enter',\n });\n\n expect(document.activeElement === tab3).to.be.true;\n\n actionGroup3.focus();\n expect(document.activeElement === actionButton3).to.be.true;\n\n await sendKeys({\n press: 'ArrowLeft',\n });\n\n expect(document.activeElement === tab2).to.be.false;\n expect(actionGroup3.contains(document.activeElement)).to.be.true;\n\n const boundingRect = tab1.getBoundingClientRect();\n // tab1.click() doesn't current reach into the focus management here.\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n boundingRect.left + boundingRect.width / 2,\n boundingRect.top + boundingRect.height / 2,\n ],\n },\n ],\n });\n expect(document.activeElement === tab1).to.be.true;\n\n actionGroup1.focus();\n expect(document.activeElement === actionButton1).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n\n expect(document.activeElement === tab2).to.be.false;\n expect(actionGroup1.contains(document.activeElement)).to.be.true;\n });\n});\n\ndescribe('Action Menu inside of Action Group', () => {\n it('accurately manages the tabindex of all the elements', async () => {\n const el = await createGroup();\n const actionButton1 = el.querySelector(\n 'sp-action-button:nth-child(1)'\n ) as ActionButton;\n const actionButton2 = el.querySelector(\n 'sp-action-button:nth-child(2)'\n ) as ActionButton;\n const actionButton3 = el.querySelector(\n 'sp-action-button:nth-child(3)'\n ) as ActionButton;\n const actionMenu = el.querySelector('sp-action-menu') as ActionMenu;\n\n el.focus();\n expect(document.activeElement === actionButton1).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n\n expect(document.activeElement === actionButton2).to.be.true;\n\n // expect the focused element to have a tabindex of 0 and everyone else to be -1\n expect(actionButton2.tabIndex).to.equal(0);\n expect(actionButton1.tabIndex).to.equal(-1);\n expect(actionButton3.tabIndex).to.equal(-1);\n expect(actionMenu.tabIndex).to.equal(-1);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n\n expect(document.activeElement === actionButton3).to.be.true;\n\n // expect the focused element to have a tabindex of 0 and everyone else to be -1\n expect(actionButton3.tabIndex).to.equal(0);\n expect(actionButton2.tabIndex).to.equal(-1);\n expect(actionButton1.tabIndex).to.equal(-1);\n expect(actionMenu.tabIndex).to.equal(-1);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n\n expect(document.activeElement === actionMenu).to.be.true;\n\n // expect the action-button inside of the shadow root of the action-menu to have a tabindex of 0 and everyone else to be -1\n expect(actionButton3.tabIndex).to.equal(-1);\n expect(actionButton2.tabIndex).to.equal(-1);\n expect(actionButton1.tabIndex).to.equal(-1);\n expect(actionMenu.shadowRoot?.querySelector('sp-action-button')).to\n .exist;\n expect(\n (\n actionMenu.shadowRoot?.querySelector(\n 'sp-action-button'\n ) as ActionButton\n ).tabIndex\n ).to.equal(0);\n });\n});\n\ndescribe('tabIndex is cached properly', () => {\n it('cache is managed properly', async () => {\n const menuEl = await fixture<ActionMenu>(\n html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item>Two</sp-menu-item>\n <sp-menu-item>Three</sp-menu-item>\n </sp-action-menu>\n `\n );\n\n expect(menuEl.tabIndex).to.equal(0);\n expect(menuEl.focusElement?.tabIndex).to.equal(0);\n\n menuEl.tabIndex = 1;\n\n await elementUpdated(menuEl);\n\n expect(menuEl.tabIndex).to.equal(1);\n expect(menuEl.focusElement?.tabIndex).to.equal(1);\n\n menuEl.disabled = true;\n\n await elementUpdated(menuEl);\n\n expect(menuEl.tabIndex).to.equal(-1);\n expect(menuEl.focusElement?.tabIndex).to.equal(-1);\n\n menuEl.tabIndex = 2;\n\n await elementUpdated(menuEl);\n\n expect(menuEl.tabIndex).to.equal(-1);\n expect(menuEl.focusElement?.tabIndex).to.equal(-1);\n\n menuEl.disabled = false;\n\n await elementUpdated(menuEl);\n\n expect(menuEl.tabIndex).to.equal(2);\n expect(menuEl.focusElement?.tabIndex).to.equal(2);\n });\n});\n"],
|
|
5
|
-
"mappings": ";AAWA,OAAO;AAEP,OAAO;AAGP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,SAAS,gBAAgB,QAAQ,SAAS,iBAAiB;AAC3D,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,MAAM,aAAa,YAA2B;AAC1C,QAAM,OAAO,MAAM
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport '@spectrum-web-components/tabs/sp-tab-panel.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport { Tab, TabPanel, Tabs } from '@spectrum-web-components/tabs';\nimport { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';\nimport { html } from '@spectrum-web-components/base';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\nconst createTabs = async (): Promise<Tabs> => {\n const tabs = await fixture<Tabs>(html`\n <sp-tabs selected=\"second\">\n <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n <sp-tab-panel value=\"first\">\n <sp-action-group selects=\"single\">\n <sp-action-button selected value=\"1\">\n Single Button 1\n </sp-action-button>\n <sp-action-button value=\"2\">\n Single Button 2\n </sp-action-button>\n <sp-action-button value=\"3\">\n Single Button 3\n </sp-action-button>\n </sp-action-group>\n </sp-tab-panel>\n <sp-tab-panel value=\"second\">\n <sp-action-group selects=\"multiple\">\n <sp-action-button value=\"1\">\n Multiple Button 1\n </sp-action-button>\n <sp-action-button selected value=\"2\">\n Multiple Button 2\n </sp-action-button>\n <sp-action-button selected value=\"3\">\n Multiple Button 3\n </sp-action-button>\n </sp-action-group>\n </sp-tab-panel>\n <sp-tab-panel value=\"third\">\n <sp-action-group>\n <sp-action-button value=\"1\">None Button 1</sp-action-button>\n <sp-action-button value=\"2\">None Button 2</sp-action-button>\n <sp-action-button selected value=\"3\">\n None Button 3\n </sp-action-button>\n </sp-action-group>\n </sp-tab-panel>\n </sp-tabs>\n `);\n await elementUpdated(tabs);\n return tabs;\n};\n\nconst createGroup = async (): Promise<ActionGroup> => {\n const group = await fixture<ActionGroup>(html`\n <sp-action-group>\n <sp-action-button>Button 1</sp-action-button>\n <sp-action-button>Longer Button 2</sp-action-button>\n <sp-action-button>Short 3</sp-action-button>\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item>Two</sp-menu-item>\n <sp-menu-item>Three</sp-menu-item>\n <sp-menu-item>\n Select some items\n <sp-menu slot=\"submenu\" selects=\"multiple\">\n <sp-menu-item>A</sp-menu-item>\n <sp-menu-item selected>B</sp-menu-item>\n <sp-menu-item>C</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n </sp-action-group>\n `);\n await elementUpdated(group);\n return group;\n};\n\ndescribe('Action Group inside of Tabs', () => {\n it('accurately navigates the desired element', async () => {\n const el = await createTabs();\n const tab1 = el.querySelector('sp-tab[value=\"first\"]') as Tab;\n const tab2 = el.querySelector('sp-tab[value=\"second\"]');\n const tab3 = el.querySelector('sp-tab[value=\"third\"]') as Tab;\n const tabPanel1 = el.querySelector(\n 'sp-tab-panel[value=\"first\"]'\n ) as TabPanel;\n const tabPanel2 = el.querySelector(\n 'sp-tab-panel[value=\"second\"]'\n ) as TabPanel;\n const tabPanel3 = el.querySelector(\n 'sp-tab-panel[value=\"third\"]'\n ) as TabPanel;\n const actionGroup1 = tabPanel1.querySelector(\n 'sp-action-group'\n ) as ActionGroup;\n const actionGroup2 = tabPanel2.querySelector(\n 'sp-action-group'\n ) as ActionGroup;\n const actionGroup3 = tabPanel3.querySelector(\n 'sp-action-group'\n ) as ActionGroup;\n const actionButton1 = actionGroup1.querySelector(\n '[selected]'\n ) as ActionButton;\n const actionButton2 = actionGroup2.querySelector(\n '[selected]'\n ) as ActionButton;\n const actionButton3 = actionGroup3.querySelector(\n '[selected]'\n ) as ActionButton;\n\n el.focus();\n expect(el.contains(document.activeElement)).to.be.true;\n expect(document.activeElement === tab2).to.be.true;\n\n actionGroup2.focus();\n expect(document.activeElement === actionButton2).to.be.true;\n\n await nextFrame();\n await sendKeys({\n press: 'ArrowLeft',\n });\n\n expect(document.activeElement === tab1).to.be.false;\n expect(actionGroup2.contains(document.activeElement)).to.be.true;\n\n el.focus();\n expect(document.activeElement === tab2).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n\n expect(document.activeElement === tab3).to.be.true;\n\n await sendKeys({\n press: 'Enter',\n });\n\n expect(document.activeElement === tab3).to.be.true;\n\n actionGroup3.focus();\n expect(document.activeElement === actionButton3).to.be.true;\n\n await sendKeys({\n press: 'ArrowLeft',\n });\n\n expect(document.activeElement === tab2).to.be.false;\n expect(actionGroup3.contains(document.activeElement)).to.be.true;\n\n const boundingRect = tab1.getBoundingClientRect();\n // tab1.click() doesn't current reach into the focus management here.\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n boundingRect.left + boundingRect.width / 2,\n boundingRect.top + boundingRect.height / 2,\n ],\n },\n ],\n });\n expect(document.activeElement === tab1).to.be.true;\n\n actionGroup1.focus();\n expect(document.activeElement === actionButton1).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n\n expect(document.activeElement === tab2).to.be.false;\n expect(actionGroup1.contains(document.activeElement)).to.be.true;\n });\n});\n\ndescribe('Action Menu inside of Action Group', () => {\n it('accurately manages the tabindex of all the elements', async () => {\n const el = await createGroup();\n const actionButton1 = el.querySelector(\n 'sp-action-button:nth-child(1)'\n ) as ActionButton;\n const actionButton2 = el.querySelector(\n 'sp-action-button:nth-child(2)'\n ) as ActionButton;\n const actionButton3 = el.querySelector(\n 'sp-action-button:nth-child(3)'\n ) as ActionButton;\n const actionMenu = el.querySelector('sp-action-menu') as ActionMenu;\n\n el.focus();\n expect(document.activeElement === actionButton1).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n\n expect(document.activeElement === actionButton2).to.be.true;\n\n // expect the focused element to have a tabindex of 0 and everyone else to be -1\n expect(actionButton2.tabIndex).to.equal(0);\n expect(actionButton1.tabIndex).to.equal(-1);\n expect(actionButton3.tabIndex).to.equal(-1);\n expect(actionMenu.tabIndex).to.equal(-1);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n\n expect(document.activeElement === actionButton3).to.be.true;\n\n // expect the focused element to have a tabindex of 0 and everyone else to be -1\n expect(actionButton3.tabIndex).to.equal(0);\n expect(actionButton2.tabIndex).to.equal(-1);\n expect(actionButton1.tabIndex).to.equal(-1);\n expect(actionMenu.tabIndex).to.equal(-1);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n\n expect(document.activeElement === actionMenu).to.be.true;\n\n // expect the action-button inside of the shadow root of the action-menu to have a tabindex of 0 and everyone else to be -1\n expect(actionButton3.tabIndex).to.equal(-1);\n expect(actionButton2.tabIndex).to.equal(-1);\n expect(actionButton1.tabIndex).to.equal(-1);\n expect(actionMenu.shadowRoot?.querySelector('sp-action-button')).to\n .exist;\n expect(\n (\n actionMenu.shadowRoot?.querySelector(\n 'sp-action-button'\n ) as ActionButton\n ).tabIndex\n ).to.equal(0);\n });\n});\n\ndescribe('tabIndex is cached properly', () => {\n it('cache is managed properly', async () => {\n const menuEl = await fixture<ActionMenu>(html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item>Two</sp-menu-item>\n <sp-menu-item>Three</sp-menu-item>\n </sp-action-menu>\n `);\n\n expect(menuEl.tabIndex).to.equal(0);\n expect(menuEl.focusElement?.tabIndex).to.equal(0);\n\n menuEl.tabIndex = 1;\n\n await elementUpdated(menuEl);\n\n expect(menuEl.tabIndex).to.equal(1);\n expect(menuEl.focusElement?.tabIndex).to.equal(1);\n\n menuEl.disabled = true;\n\n await elementUpdated(menuEl);\n\n expect(menuEl.tabIndex).to.equal(-1);\n expect(menuEl.focusElement?.tabIndex).to.equal(-1);\n\n menuEl.tabIndex = 2;\n\n await elementUpdated(menuEl);\n\n expect(menuEl.tabIndex).to.equal(-1);\n expect(menuEl.focusElement?.tabIndex).to.equal(-1);\n\n menuEl.disabled = false;\n\n await elementUpdated(menuEl);\n\n expect(menuEl.tabIndex).to.equal(2);\n expect(menuEl.focusElement?.tabIndex).to.equal(2);\n });\n});\n"],
|
|
5
|
+
"mappings": ";AAWA,OAAO;AAEP,OAAO;AAGP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,SAAS,gBAAgB,QAAQ,SAAS,iBAAiB;AAC3D,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,MAAM,aAAa,YAA2B;AAC1C,QAAM,OAAO,MAAM,QAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAyChC;AACD,QAAM,eAAe,IAAI;AACzB,SAAO;AACX;AAEA,MAAM,cAAc,YAAkC;AAClD,QAAM,QAAQ,MAAM,QAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAmBxC;AACD,QAAM,eAAe,KAAK;AAC1B,SAAO;AACX;AAEA,SAAS,+BAA+B,MAAM;AAC1C,KAAG,4CAA4C,YAAY;AACvD,UAAM,KAAK,MAAM,WAAW;AAC5B,UAAM,OAAO,GAAG,cAAc,uBAAuB;AACrD,UAAM,OAAO,GAAG,cAAc,wBAAwB;AACtD,UAAM,OAAO,GAAG,cAAc,uBAAuB;AACrD,UAAM,YAAY,GAAG;AAAA,MACjB;AAAA,IACJ;AACA,UAAM,YAAY,GAAG;AAAA,MACjB;AAAA,IACJ;AACA,UAAM,YAAY,GAAG;AAAA,MACjB;AAAA,IACJ;AACA,UAAM,eAAe,UAAU;AAAA,MAC3B;AAAA,IACJ;AACA,UAAM,eAAe,UAAU;AAAA,MAC3B;AAAA,IACJ;AACA,UAAM,eAAe,UAAU;AAAA,MAC3B;AAAA,IACJ;AACA,UAAM,gBAAgB,aAAa;AAAA,MAC/B;AAAA,IACJ;AACA,UAAM,gBAAgB,aAAa;AAAA,MAC/B;AAAA,IACJ;AACA,UAAM,gBAAgB,aAAa;AAAA,MAC/B;AAAA,IACJ;AAEA,OAAG,MAAM;AACT,WAAO,GAAG,SAAS,SAAS,aAAa,CAAC,EAAE,GAAG,GAAG;AAClD,WAAO,SAAS,kBAAkB,IAAI,EAAE,GAAG,GAAG;AAE9C,iBAAa,MAAM;AACnB,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AAEvD,UAAM,UAAU;AAChB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,WAAO,SAAS,kBAAkB,IAAI,EAAE,GAAG,GAAG;AAC9C,WAAO,aAAa,SAAS,SAAS,aAAa,CAAC,EAAE,GAAG,GAAG;AAE5D,OAAG,MAAM;AACT,WAAO,SAAS,kBAAkB,IAAI,EAAE,GAAG,GAAG;AAE9C,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,WAAO,SAAS,kBAAkB,IAAI,EAAE,GAAG,GAAG;AAE9C,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,WAAO,SAAS,kBAAkB,IAAI,EAAE,GAAG,GAAG;AAE9C,iBAAa,MAAM;AACnB,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AAEvD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,WAAO,SAAS,kBAAkB,IAAI,EAAE,GAAG,GAAG;AAC9C,WAAO,aAAa,SAAS,SAAS,aAAa,CAAC,EAAE,GAAG,GAAG;AAE5D,UAAM,eAAe,KAAK,sBAAsB;AAEhD,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU;AAAA,YACN,aAAa,OAAO,aAAa,QAAQ;AAAA,YACzC,aAAa,MAAM,aAAa,SAAS;AAAA,UAC7C;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ,CAAC;AACD,WAAO,SAAS,kBAAkB,IAAI,EAAE,GAAG,GAAG;AAE9C,iBAAa,MAAM;AACnB,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AAEvD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,WAAO,SAAS,kBAAkB,IAAI,EAAE,GAAG,GAAG;AAC9C,WAAO,aAAa,SAAS,SAAS,aAAa,CAAC,EAAE,GAAG,GAAG;AAAA,EAChE,CAAC;AACL,CAAC;AAED,SAAS,sCAAsC,MAAM;AACjD,KAAG,uDAAuD,YAAY;AA1M1E;AA2MQ,UAAM,KAAK,MAAM,YAAY;AAC7B,UAAM,gBAAgB,GAAG;AAAA,MACrB;AAAA,IACJ;AACA,UAAM,gBAAgB,GAAG;AAAA,MACrB;AAAA,IACJ;AACA,UAAM,gBAAgB,GAAG;AAAA,MACrB;AAAA,IACJ;AACA,UAAM,aAAa,GAAG,cAAc,gBAAgB;AAEpD,OAAG,MAAM;AACT,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AAEvD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AAGvD,WAAO,cAAc,QAAQ,EAAE,GAAG,MAAM,CAAC;AACzC,WAAO,cAAc,QAAQ,EAAE,GAAG,MAAM,EAAE;AAC1C,WAAO,cAAc,QAAQ,EAAE,GAAG,MAAM,EAAE;AAC1C,WAAO,WAAW,QAAQ,EAAE,GAAG,MAAM,EAAE;AAEvC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AAGvD,WAAO,cAAc,QAAQ,EAAE,GAAG,MAAM,CAAC;AACzC,WAAO,cAAc,QAAQ,EAAE,GAAG,MAAM,EAAE;AAC1C,WAAO,cAAc,QAAQ,EAAE,GAAG,MAAM,EAAE;AAC1C,WAAO,WAAW,QAAQ,EAAE,GAAG,MAAM,EAAE;AAEvC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,WAAO,SAAS,kBAAkB,UAAU,EAAE,GAAG,GAAG;AAGpD,WAAO,cAAc,QAAQ,EAAE,GAAG,MAAM,EAAE;AAC1C,WAAO,cAAc,QAAQ,EAAE,GAAG,MAAM,EAAE;AAC1C,WAAO,cAAc,QAAQ,EAAE,GAAG,MAAM,EAAE;AAC1C,YAAO,gBAAW,eAAX,mBAAuB,cAAc,mBAAmB,EAAE,GAC5D;AACL;AAAA,QAEQ,gBAAW,eAAX,mBAAuB;AAAA,QACnB;AAAA,SAEN;AAAA,IACN,EAAE,GAAG,MAAM,CAAC;AAAA,EAChB,CAAC;AACL,CAAC;AAED,SAAS,+BAA+B,MAAM;AAC1C,KAAG,6BAA6B,YAAY;AAzQhD;AA0QQ,UAAM,SAAS,MAAM,QAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAMxC;AAED,WAAO,OAAO,QAAQ,EAAE,GAAG,MAAM,CAAC;AAClC,YAAO,YAAO,iBAAP,mBAAqB,QAAQ,EAAE,GAAG,MAAM,CAAC;AAEhD,WAAO,WAAW;AAElB,UAAM,eAAe,MAAM;AAE3B,WAAO,OAAO,QAAQ,EAAE,GAAG,MAAM,CAAC;AAClC,YAAO,YAAO,iBAAP,mBAAqB,QAAQ,EAAE,GAAG,MAAM,CAAC;AAEhD,WAAO,WAAW;AAElB,UAAM,eAAe,MAAM;AAE3B,WAAO,OAAO,QAAQ,EAAE,GAAG,MAAM,EAAE;AACnC,YAAO,YAAO,iBAAP,mBAAqB,QAAQ,EAAE,GAAG,MAAM,EAAE;AAEjD,WAAO,WAAW;AAElB,UAAM,eAAe,MAAM;AAE3B,WAAO,OAAO,QAAQ,EAAE,GAAG,MAAM,EAAE;AACnC,YAAO,YAAO,iBAAP,mBAAqB,QAAQ,EAAE,GAAG,MAAM,EAAE;AAEjD,WAAO,WAAW;AAElB,UAAM,eAAe,MAAM;AAE3B,WAAO,OAAO,QAAQ,EAAE,GAAG,MAAM,CAAC;AAClC,YAAO,YAAO,iBAAP,mBAAqB,QAAQ,EAAE,GAAG,MAAM,CAAC;AAAA,EACpD,CAAC;AACL,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|