@spectrum-web-components/reactive-controllers - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5-devmode.79

package.json

 {
     "name": "@spectrum-web-components/reactive-controllers",
-    "version": "0.2.4",
+    "version": "0.2.5-devmode.79+07474d44f",
     "publishConfig": {
@@ -23,5 +23,23 @@ "access": "public"
     "exports": {
-        ".": "./src/index.js",
-        "./src/*": "./src/*",
-        "./package.json": "./package.json"
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/FocusGroup.js": {
+            "development": "./src/FocusGroup.dev.js",
+            "default": "./src/FocusGroup.js"
+        },
+        "./src/MatchMedia.js": {
+            "development": "./src/MatchMedia.dev.js",
+            "default": "./src/MatchMedia.js"
+        },
+        "./src/RovingTabindex.js": {
+            "development": "./src/RovingTabindex.dev.js",
+            "default": "./src/RovingTabindex.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        }
     },
@@ -51,3 +69,3 @@ "scripts": {
     "customElements": "custom-elements.json",
-    "gitHead": "275ee61b152ac3eed0cd1603d8eab2aec90876a0"
+    "gitHead": "07474d44f6cee1db241b9ccf3dc812514ffbe7fa"
 }

src/FocusGroup.js

 export class FocusGroupController {
-    constructor(host, { direction, elementEnterAction, elements, focusInIndex, isFocusableElement, listenerScope, } = { elements: () => [] }) {
-        this._currentIndex = -1;
-        this._direction = () => 'both';
-        this.directionLength = 5;
-        this.elementEnterAction = (_el) => {
-            return;
-        };
-        this._focused = false;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        this._focusInIndex = (_elements) => 0;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        this.isFocusableElement = (_el) => true;
-        this._listenerScope = () => this.host;
-        // When elements are virtualized, the delta between the first element
-        // and the first rendered element.
-        this.offset = 0;
-        this.handleFocusin = (event) => {
-            if (!this.isEventWithinListenerScope(event))
-                return;
-            if (this.isRelatedTargetAnElement(event)) {
-                this.hostContainsFocus();
-            }
-            const path = event.composedPath();
-            let targetIndex = -1;
-            path.find((el) => {
-                targetIndex = this.elements.indexOf(el);
-                return targetIndex !== -1;
-            });
-            this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;
-        };
-        this.handleFocusout = (event) => {
-            if (this.isRelatedTargetAnElement(event)) {
-                this.hostNoLongerContainsFocus();
-            }
-        };
-        this.handleKeydown = (event) => {
-            if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {
-                return;
-            }
-            let diff = 0;
-            switch (event.code) {
-                case 'ArrowRight':
-                    diff += 1;
-                    break;
-                case 'ArrowDown':
-                    diff += this.direction === 'grid' ? this.directionLength : 1;
-                    break;
-                case 'ArrowLeft':
-                    diff -= 1;
-                    break;
-                case 'ArrowUp':
-                    diff -= this.direction === 'grid' ? this.directionLength : 1;
-                    break;
-                case 'End':
-                    this.currentIndex = 0;
-                    diff -= 1;
-                    break;
-                case 'Home':
-                    this.currentIndex = this.elements.length - 1;
-                    diff += 1;
-                    break;
-            }
-            event.preventDefault();
-            if (this.direction === 'grid' && this.currentIndex + diff < 0) {
-                this.currentIndex = 0;
-            }
-            else if (this.direction === 'grid' &&
-                this.currentIndex + diff > this.elements.length - 1) {
-                this.currentIndex = this.elements.length - 1;
-            }
-            else {
-                this.setCurrentIndexCircularly(diff);
-            }
-            // To allow the `focusInIndex` to be calculated with the "after" state of the keyboard interaction
-            // do `elementEnterAction` _before_ focusing the next element.
-            this.elementEnterAction(this.elements[this.currentIndex]);
-            this.focus();
-        };
-        this.host = host;
-        this.host.addController(this);
-        this._elements = elements;
-        this.isFocusableElement = isFocusableElement || this.isFocusableElement;
-        // @TODO: abstract a method to simplify the conditional wrapping of the values as functions.
-        if (typeof direction === 'string') {
-            this._direction = () => direction;
-        }
-        else if (typeof direction === 'function') {
-            this._direction = direction;
-        }
-        this.elementEnterAction = elementEnterAction || this.elementEnterAction;
-        if (typeof focusInIndex === 'number') {
-            this._focusInIndex = () => focusInIndex;
-        }
-        else if (typeof focusInIndex === 'function') {
-            this._focusInIndex = focusInIndex;
-        }
-        if (typeof listenerScope === 'object') {
-            this._listenerScope = () => listenerScope;
-        }
-        else if (typeof listenerScope === 'function') {
-            this._listenerScope = listenerScope;
-        }
+  constructor(host, {
+    direction,
+    elementEnterAction,
+    elements,
+    focusInIndex,
+    isFocusableElement,
+    listenerScope
+  } = { elements: () => [] }) {
+    this._currentIndex = -1;
+    this._direction = () => "both";
+    this.directionLength = 5;
+    this.elementEnterAction = (_el) => {
+      return;
+    };
+    this._focused = false;
+    this._focusInIndex = (_elements) => 0;
+    this.isFocusableElement = (_el) => true;
+    this._listenerScope = () => this.host;
+    this.offset = 0;
+    this.handleFocusin = (event) => {
+      if (!this.isEventWithinListenerScope(event))
+        return;
+      if (this.isRelatedTargetAnElement(event)) {
+        this.hostContainsFocus();
+      }
+      const path = event.composedPath();
+      let targetIndex = -1;
+      path.find((el) => {
+        targetIndex = this.elements.indexOf(el);
+        return targetIndex !== -1;
+      });
+      this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;
+    };
+    this.handleFocusout = (event) => {
+      if (this.isRelatedTargetAnElement(event)) {
+        this.hostNoLongerContainsFocus();
+      }
+    };
+    this.handleKeydown = (event) => {
+      if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {
+        return;
+      }
+      let diff = 0;
+      switch (event.code) {
+        case "ArrowRight":
+          diff += 1;
+          break;
+        case "ArrowDown":
+          diff += this.direction === "grid" ? this.directionLength : 1;
+          break;
+        case "ArrowLeft":
+          diff -= 1;
+          break;
+        case "ArrowUp":
+          diff -= this.direction === "grid" ? this.directionLength : 1;
+          break;
+        case "End":
+          this.currentIndex = 0;
+          diff -= 1;
+          break;
+        case "Home":
+          this.currentIndex = this.elements.length - 1;
+          diff += 1;
+          break;
+      }
+      event.preventDefault();
+      if (this.direction === "grid" && this.currentIndex + diff < 0) {
+        this.currentIndex = 0;
+      } else if (this.direction === "grid" && this.currentIndex + diff > this.elements.length - 1) {
+        this.currentIndex = this.elements.length - 1;
+      } else {
+        this.setCurrentIndexCircularly(diff);
+      }
+      this.elementEnterAction(this.elements[this.currentIndex]);
+      this.focus();
+    };
+    this.host = host;
+    this.host.addController(this);
+    this._elements = elements;
+    this.isFocusableElement = isFocusableElement || this.isFocusableElement;
+    if (typeof direction === "string") {
+      this._direction = () => direction;
+    } else if (typeof direction === "function") {
+      this._direction = direction;
     }
-    get currentIndex() {
-        if (this._currentIndex === -1) {
-            this._currentIndex = this.focusInIndex;
-        }
-        return this._currentIndex - this.offset;
+    this.elementEnterAction = elementEnterAction || this.elementEnterAction;
+    if (typeof focusInIndex === "number") {
+      this._focusInIndex = () => focusInIndex;
+    } else if (typeof focusInIndex === "function") {
+      this._focusInIndex = focusInIndex;
     }
-    set currentIndex(currentIndex) {
-        this._currentIndex = currentIndex + this.offset;
+    if (typeof listenerScope === "object") {
+      this._listenerScope = () => listenerScope;
+    } else if (typeof listenerScope === "function") {
+      this._listenerScope = listenerScope;
     }
-    get direction() {
-        return this._direction();
+  }
+  get currentIndex() {
+    if (this._currentIndex === -1) {
+      this._currentIndex = this.focusInIndex;
     }
-    get elements() {
-        if (!this.cachedElements) {
-            this.cachedElements = this._elements();
-        }
-        return this.cachedElements;
+    return this._currentIndex - this.offset;
+  }
+  set currentIndex(currentIndex) {
+    this._currentIndex = currentIndex + this.offset;
+  }
+  get direction() {
+    return this._direction();
+  }
+  get elements() {
+    if (!this.cachedElements) {
+      this.cachedElements = this._elements();
     }
-    set focused(focused) {
-        if (focused === this.focused)
-            return;
-        this._focused = focused;
+    return this.cachedElements;
+  }
+  set focused(focused) {
+    if (focused === this.focused)
+      return;
+    this._focused = focused;
+  }
+  get focused() {
+    return this._focused;
+  }
+  get focusInElement() {
+    return this.elements[this.focusInIndex];
+  }
+  get focusInIndex() {
+    return this._focusInIndex(this.elements);
+  }
+  isEventWithinListenerScope(event) {
+    if (this._listenerScope() === this.host)
+      return true;
+    return event.composedPath().includes(this._listenerScope());
+  }
+  update({ elements } = { elements: () => [] }) {
+    this.unmanage();
+    this._elements = elements;
+    this.clearElementCache();
+    this.manage();
+  }
+  focus(options) {
+    let focusElement = this.elements[this.currentIndex];
+    if (!focusElement || !this.isFocusableElement(focusElement)) {
+      this.setCurrentIndexCircularly(1);
+      focusElement = this.elements[this.currentIndex];
     }
-    get focused() {
-        return this._focused;
+    if (focusElement && this.isFocusableElement(focusElement)) {
+      focusElement.focus(options);
     }
-    get focusInElement() {
-        return this.elements[this.focusInIndex];
+  }
+  clearElementCache(offset = 0) {
+    delete this.cachedElements;
+    this.offset = offset;
+  }
+  setCurrentIndexCircularly(diff) {
+    const { length } = this.elements;
+    let steps = length;
+    let nextIndex = (length + this.currentIndex + diff) % length;
+    while (steps && this.elements[nextIndex] && !this.isFocusableElement(this.elements[nextIndex])) {
+      nextIndex = (length + nextIndex + diff) % length;
+      steps -= 1;
     }
-    get focusInIndex() {
-        return this._focusInIndex(this.elements);
+    this.currentIndex = nextIndex;
+  }
+  hostContainsFocus() {
+    this.host.addEventListener("focusout", this.handleFocusout);
+    this.host.addEventListener("keydown", this.handleKeydown);
+    this.focused = true;
+  }
+  hostNoLongerContainsFocus() {
+    this.host.addEventListener("focusin", this.handleFocusin);
+    this.host.removeEventListener("focusout", this.handleFocusout);
+    this.host.removeEventListener("keydown", this.handleKeydown);
+    this.currentIndex = this.focusInIndex;
+    this.focused = false;
+  }
+  isRelatedTargetAnElement(event) {
+    const relatedTarget = event.relatedTarget;
+    return !this.elements.includes(relatedTarget);
+  }
+  acceptsEventCode(code) {
+    if (code === "End" || code === "Home") {
+      return true;
     }
-    isEventWithinListenerScope(event) {
-        if (this._listenerScope() === this.host)
-            return true;
-        return event.composedPath().includes(this._listenerScope());
+    switch (this.direction) {
+      case "horizontal":
+        return code === "ArrowLeft" || code === "ArrowRight";
+      case "vertical":
+        return code === "ArrowUp" || code === "ArrowDown";
+      case "both":
+      case "grid":
+        return code.startsWith("Arrow");
     }
-    update({ elements } = { elements: () => [] }) {
-        this.unmanage();
-        this._elements = elements;
-        this.clearElementCache();
-        this.manage();
-    }
-    focus(options) {
-        let focusElement = this.elements[this.currentIndex];
-        if (!focusElement || !this.isFocusableElement(focusElement)) {
-            this.setCurrentIndexCircularly(1);
-            focusElement = this.elements[this.currentIndex];
-        }
-        if (focusElement && this.isFocusableElement(focusElement)) {
-            focusElement.focus(options);
-        }
-    }
-    clearElementCache(offset = 0) {
-        delete this.cachedElements;
-        this.offset = offset;
-    }
-    setCurrentIndexCircularly(diff) {
-        const { length } = this.elements;
-        let steps = length;
-        // start at a possibly not 0 index
-        let nextIndex = (length + this.currentIndex + diff) % length;
-        while (
-        // don't cycle the elements more than once
-        steps &&
-            this.elements[nextIndex] &&
-            !this.isFocusableElement(this.elements[nextIndex])) {
-            nextIndex = (length + nextIndex + diff) % length;
-            steps -= 1;
-        }
-        this.currentIndex = nextIndex;
-    }
-    hostContainsFocus() {
-        this.host.addEventListener('focusout', this.handleFocusout);
-        this.host.addEventListener('keydown', this.handleKeydown);
-        this.focused = true;
-    }
-    hostNoLongerContainsFocus() {
-        this.host.addEventListener('focusin', this.handleFocusin);
-        this.host.removeEventListener('focusout', this.handleFocusout);
-        this.host.removeEventListener('keydown', this.handleKeydown);
-        this.currentIndex = this.focusInIndex;
-        this.focused = false;
-    }
-    isRelatedTargetAnElement(event) {
-        const relatedTarget = event.relatedTarget;
-        return !this.elements.includes(relatedTarget);
-    }
-    acceptsEventCode(code) {
-        if (code === 'End' || code === 'Home') {
-            return true;
-        }
-        switch (this.direction) {
-            case 'horizontal':
-                return code === 'ArrowLeft' || code === 'ArrowRight';
-            case 'vertical':
-                return code === 'ArrowUp' || code === 'ArrowDown';
-            case 'both':
-            case 'grid':
-                return code.startsWith('Arrow');
-        }
-    }
-    manage() {
-        this.addEventListeners();
-    }
-    unmanage() {
-        this.removeEventListeners();
-    }
-    addEventListeners() {
-        this.host.addEventListener('focusin', this.handleFocusin);
-    }
-    removeEventListeners() {
-        this.host.removeEventListener('focusin', this.handleFocusin);
-        this.host.removeEventListener('focusout', this.handleFocusout);
-        this.host.removeEventListener('keydown', this.handleKeydown);
-    }
-    hostConnected() {
-        this.addEventListeners();
-    }
-    hostDisconnected() {
-        this.removeEventListeners();
-    }
+  }
+  manage() {
+    this.addEventListeners();
+  }
+  unmanage() {
+    this.removeEventListeners();
+  }
+  addEventListeners() {
+    this.host.addEventListener("focusin", this.handleFocusin);
+  }
+  removeEventListeners() {
+    this.host.removeEventListener("focusin", this.handleFocusin);
+    this.host.removeEventListener("focusout", this.handleFocusout);
+    this.host.removeEventListener("keydown", this.handleKeydown);
+  }
+  hostConnected() {
+    this.addEventListeners();
+  }
+  hostDisconnected() {
+    this.removeEventListeners();
+  }
 }
-//# sourceMappingURL=FocusGroup.js.map
+//# sourceMappingURL=FocusGroup.js.map

src/index.js

@@ -1,14 +0,3 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-export * from './MatchMedia.js';
-export * from './RovingTabindex.js';
-//# sourceMappingURL=index.js.map
+export * from "./MatchMedia.js";
+export * from "./RovingTabindex.js";
+//# sourceMappingURL=index.js.map

src/MatchMedia.js

@@ -1,26 +0,26 @@
-export const DARK_MODE = '(prefers-color-scheme: dark)';
-export const IS_MOBILE = '(max-width: 700px) and (hover: none) and (pointer: coarse), (max-height: 700px) and (hover: none) and (pointer: coarse)';
+export const DARK_MODE = "(prefers-color-scheme: dark)";
+export const IS_MOBILE = "(max-width: 700px) and (hover: none) and (pointer: coarse), (max-height: 700px) and (hover: none) and (pointer: coarse)";
 export class MatchMediaController {
-    constructor(host, query) {
-        this.key = Symbol('match-media-key');
-        this.matches = false;
-        this.host = host;
-        this.media = window.matchMedia(query);
-        this.matches = this.media.matches;
-        this.onChange = this.onChange.bind(this);
-        host.addController(this);
-    }
-    hostConnected() {
-        this.media.addEventListener('change', this.onChange);
-    }
-    hostDisconnected() {
-        this.media.removeEventListener('change', this.onChange);
-    }
-    onChange(event) {
-        if (this.matches === event.matches)
-            return;
-        this.matches = event.matches;
-        this.host.requestUpdate(this.key, !this.matches);
-    }
+  constructor(host, query) {
+    this.key = Symbol("match-media-key");
+    this.matches = false;
+    this.host = host;
+    this.media = window.matchMedia(query);
+    this.matches = this.media.matches;
+    this.onChange = this.onChange.bind(this);
+    host.addController(this);
+  }
+  hostConnected() {
+    this.media.addEventListener("change", this.onChange);
+  }
+  hostDisconnected() {
+    this.media.removeEventListener("change", this.onChange);
+  }
+  onChange(event) {
+    if (this.matches === event.matches)
+      return;
+    this.matches = event.matches;
+    this.host.requestUpdate(this.key, !this.matches);
+  }
 }
-//# sourceMappingURL=MatchMedia.js.map
+//# sourceMappingURL=MatchMedia.js.map

src/RovingTabindex.js

@@ -1,78 +0,65 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { FocusGroupController } from './FocusGroup.js';
+import { FocusGroupController } from "./FocusGroup.js";
 export class RovingTabindexController extends FocusGroupController {
-    constructor() {
-        super(...arguments);
-        this.managed = true;
-        this.manageIndexesAnimationFrame = 0;
+  constructor() {
+    super(...arguments);
+    this.managed = true;
+    this.manageIndexesAnimationFrame = 0;
+  }
+  set focused(focused) {
+    if (focused === this.focused)
+      return;
+    super.focused = focused;
+    this.manageTabindexes();
+  }
+  get focused() {
+    return super.focused;
+  }
+  clearElementCache(offset = 0) {
+    cancelAnimationFrame(this.manageIndexesAnimationFrame);
+    super.clearElementCache(offset);
+    if (!this.managed)
+      return;
+    this.manageIndexesAnimationFrame = requestAnimationFrame(() => this.manageTabindexes());
+  }
+  manageTabindexes() {
+    if (this.focused) {
+      this.updateTabindexes(() => ({ tabIndex: -1 }));
+    } else {
+      this.updateTabindexes((el) => {
+        return {
+          removeTabIndex: el.contains(this.focusInElement) && el !== this.focusInElement,
+          tabIndex: el === this.focusInElement ? 0 : -1
+        };
+      });
     }
-    set focused(focused) {
-        if (focused === this.focused)
-            return;
-        super.focused = focused;
-        this.manageTabindexes();
+  }
+  updateTabindexes(getTabIndex) {
+    this.elements.forEach((el) => {
+      const { tabIndex, removeTabIndex } = getTabIndex(el);
+      if (!removeTabIndex) {
+        el.tabIndex = tabIndex;
+        return;
+      }
+      el.removeAttribute("tabindex");
+      const updatable = el;
+      if (updatable.requestUpdate)
+        updatable.requestUpdate();
+    });
+  }
+  manage() {
+    this.managed = true;
+    this.manageTabindexes();
+    super.manage();
+  }
+  unmanage() {
+    this.managed = false;
+    this.updateTabindexes(() => ({ tabIndex: 0 }));
+    super.unmanage();
+  }
+  hostUpdated() {
+    if (!this.host.hasUpdated) {
+      this.manageTabindexes();
     }
-    get focused() {
-        return super.focused;
-    }
-    clearElementCache(offset = 0) {
-        cancelAnimationFrame(this.manageIndexesAnimationFrame);
-        super.clearElementCache(offset);
-        if (!this.managed)
-            return;
-        this.manageIndexesAnimationFrame = requestAnimationFrame(() => this.manageTabindexes());
-    }
-    manageTabindexes() {
-        if (this.focused) {
-            this.updateTabindexes(() => ({ tabIndex: -1 }));
-        }
-        else {
-            this.updateTabindexes((el) => {
-                return {
-                    removeTabIndex: el.contains(this.focusInElement) &&
-                        el !== this.focusInElement,
-                    tabIndex: el === this.focusInElement ? 0 : -1,
-                };
-            });
-        }
-    }
-    updateTabindexes(getTabIndex) {
-        this.elements.forEach((el) => {
-            const { tabIndex, removeTabIndex } = getTabIndex(el);
-            if (!removeTabIndex) {
-                el.tabIndex = tabIndex;
-                return;
-            }
-            el.removeAttribute('tabindex');
-            const updatable = el;
-            if (updatable.requestUpdate)
-                updatable.requestUpdate();
-        });
-    }
-    manage() {
-        this.managed = true;
-        this.manageTabindexes();
-        super.manage();
-    }
-    unmanage() {
-        this.managed = false;
-        this.updateTabindexes(() => ({ tabIndex: 0 }));
-        super.unmanage();
-    }
-    hostUpdated() {
-        if (!this.host.hasUpdated) {
-            this.manageTabindexes();
-        }
-    }
+  }
 }
-//# sourceMappingURL=RovingTabindex.js.map
+//# sourceMappingURL=RovingTabindex.js.map

test/match-media.test.js

@@ -1,32 +0,20 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { html, LitElement } from 'lit';
-import { expect, fixture, nextFrame } from '@open-wc/testing';
-import { setViewport } from '@web/test-runner-commands';
-import { MatchMediaController } from '../';
-describe('Match Media', () => {
-    it('responds to media changes', async () => {
-        class TestEl extends LitElement {
-        }
-        customElements.define('test-match-media-el', TestEl);
-        const el = await fixture(html `
+import { html, LitElement } from "lit";
+import { expect, fixture, nextFrame } from "@open-wc/testing";
+import { setViewport } from "@web/test-runner-commands";
+import { MatchMediaController } from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
+describe("Match Media", () => {
+  it("responds to media changes", async () => {
+    class TestEl extends LitElement {
+    }
+    customElements.define("test-match-media-el", TestEl);
+    const el = await fixture(html`
                 <test-match-media-el></test-match-media-el>
             `);
-        const controller = new MatchMediaController(el, '(min-width: 500px)');
-        expect(controller.matches).to.be.true;
-        await setViewport({ width: 360, height: 640 });
-        // Allow viewport update to propagate.
-        await nextFrame();
-        expect(controller.matches).to.be.false;
-    });
+    const controller = new MatchMediaController(el, "(min-width: 500px)");
+    expect(controller.matches).to.be.true;
+    await setViewport({ width: 360, height: 640 });
+    await nextFrame();
+    expect(controller.matches).to.be.false;
+  });
 });
-//# sourceMappingURL=match-media.test.js.map
+//# sourceMappingURL=match-media.test.js.map

test/roving-tabindex-integration.test.js

@@ -1,23 +0,12 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/tabs/sp-tab-panel.js';
-import '@spectrum-web-components/tabs/sp-tab.js';
-import '@spectrum-web-components/tabs/sp-tabs.js';
-import { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';
-import { html } from '@spectrum-web-components/base';
-import { sendKeys } from '@web/test-runner-commands';
-import { sendMouse } from '../../../test/plugins/browser.js';
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/tabs/sp-tab-panel.js";
+import "@spectrum-web-components/tabs/sp-tab.js";
+import "@spectrum-web-components/tabs/sp-tabs.js";
+import { elementUpdated, expect, fixture, nextFrame } from "@open-wc/testing";
+import { html } from "@spectrum-web-components/base";
+import { sendKeys } from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
 const createTabs = async () => {
-    const tabs = await fixture(html `
+  const tabs = await fixture(html`
             <sp-tabs selected="second">
@@ -68,71 +57,70 @@ <sp-tab label="Tab 1" value="first"></sp-tab>
         `);
-    await elementUpdated(tabs);
-    return tabs;
+  await elementUpdated(tabs);
+  return tabs;
 };
-describe('Action Group inside of Tabs', () => {
-    it('accurately navigates the desired element', async () => {
-        const el = await createTabs();
-        const tab1 = el.querySelector('sp-tab[value="first"]');
-        const tab2 = el.querySelector('sp-tab[value="second"]');
-        const tab3 = el.querySelector('sp-tab[value="third"]');
-        const tabPanel1 = el.querySelector('sp-tab-panel[value="first"]');
-        const tabPanel2 = el.querySelector('sp-tab-panel[value="second"]');
-        const tabPanel3 = el.querySelector('sp-tab-panel[value="third"]');
-        const actionGroup1 = tabPanel1.querySelector('sp-action-group');
-        const actionGroup2 = tabPanel2.querySelector('sp-action-group');
-        const actionGroup3 = tabPanel3.querySelector('sp-action-group');
-        const actionButton1 = actionGroup1.querySelector('[selected]');
-        const actionButton2 = actionGroup2.querySelector('[selected]');
-        const actionButton3 = actionGroup3.querySelector('[selected]');
-        el.focus();
-        expect(el.contains(document.activeElement)).to.be.true;
-        expect(document.activeElement === tab2).to.be.true;
-        actionGroup2.focus();
-        expect(document.activeElement === actionButton2).to.be.true;
-        await nextFrame();
-        await sendKeys({
-            press: 'ArrowLeft',
-        });
-        expect(document.activeElement === tab1).to.be.false;
-        expect(actionGroup2.contains(document.activeElement)).to.be.true;
-        el.focus();
-        expect(document.activeElement === tab2).to.be.true;
-        await sendKeys({
-            press: 'ArrowRight',
-        });
-        expect(document.activeElement === tab3).to.be.true;
-        await sendKeys({
-            press: 'Enter',
-        });
-        expect(document.activeElement === tab3).to.be.true;
-        actionGroup3.focus();
-        expect(document.activeElement === actionButton3).to.be.true;
-        await sendKeys({
-            press: 'ArrowLeft',
-        });
-        expect(document.activeElement === tab2).to.be.false;
-        expect(actionGroup3.contains(document.activeElement)).to.be.true;
-        const boundingRect = tab1.getBoundingClientRect();
-        // tab1.click() doesn't current reach into the focus management here.
-        await sendMouse({
-            steps: [
-                {
-                    type: 'click',
-                    position: [
-                        boundingRect.left + boundingRect.width / 2,
-                        boundingRect.top + boundingRect.height / 2,
-                    ],
-                },
-            ],
-        });
-        expect(document.activeElement === tab1).to.be.true;
-        actionGroup1.focus();
-        expect(document.activeElement === actionButton1).to.be.true;
-        await sendKeys({
-            press: 'ArrowRight',
-        });
-        expect(document.activeElement === tab2).to.be.false;
-        expect(actionGroup1.contains(document.activeElement)).to.be.true;
+describe("Action Group inside of Tabs", () => {
+  it("accurately navigates the desired element", async () => {
+    const el = await createTabs();
+    const tab1 = el.querySelector('sp-tab[value="first"]');
+    const tab2 = el.querySelector('sp-tab[value="second"]');
+    const tab3 = el.querySelector('sp-tab[value="third"]');
+    const tabPanel1 = el.querySelector('sp-tab-panel[value="first"]');
+    const tabPanel2 = el.querySelector('sp-tab-panel[value="second"]');
+    const tabPanel3 = el.querySelector('sp-tab-panel[value="third"]');
+    const actionGroup1 = tabPanel1.querySelector("sp-action-group");
+    const actionGroup2 = tabPanel2.querySelector("sp-action-group");
+    const actionGroup3 = tabPanel3.querySelector("sp-action-group");
+    const actionButton1 = actionGroup1.querySelector("[selected]");
+    const actionButton2 = actionGroup2.querySelector("[selected]");
+    const actionButton3 = actionGroup3.querySelector("[selected]");
+    el.focus();
+    expect(el.contains(document.activeElement)).to.be.true;
+    expect(document.activeElement === tab2).to.be.true;
+    actionGroup2.focus();
+    expect(document.activeElement === actionButton2).to.be.true;
+    await nextFrame();
+    await sendKeys({
+      press: "ArrowLeft"
     });
+    expect(document.activeElement === tab1).to.be.false;
+    expect(actionGroup2.contains(document.activeElement)).to.be.true;
+    el.focus();
+    expect(document.activeElement === tab2).to.be.true;
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    expect(document.activeElement === tab3).to.be.true;
+    await sendKeys({
+      press: "Enter"
+    });
+    expect(document.activeElement === tab3).to.be.true;
+    actionGroup3.focus();
+    expect(document.activeElement === actionButton3).to.be.true;
+    await sendKeys({
+      press: "ArrowLeft"
+    });
+    expect(document.activeElement === tab2).to.be.false;
+    expect(actionGroup3.contains(document.activeElement)).to.be.true;
+    const boundingRect = tab1.getBoundingClientRect();
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            boundingRect.left + boundingRect.width / 2,
+            boundingRect.top + boundingRect.height / 2
+          ]
+        }
+      ]
+    });
+    expect(document.activeElement === tab1).to.be.true;
+    actionGroup1.focus();
+    expect(document.activeElement === actionButton1).to.be.true;
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    expect(document.activeElement === tab2).to.be.false;
+    expect(actionGroup1.contains(document.activeElement)).to.be.true;
+  });
 });
-//# sourceMappingURL=roving-tabindex-integration.test.js.map
+//# sourceMappingURL=roving-tabindex-integration.test.js.map

test/roving-tabindex.test.js

@@ -1,27 +0,16 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { LitElement } from 'lit';
-import { expect } from '@open-wc/testing';
-import { RovingTabindexController } from '../src';
-describe('RovingTabindex', () => {
-    it('constructs with defaults', async () => {
-        class TestEl extends LitElement {
-        }
-        customElements.define('test-roving-tabindex-el', TestEl);
-        const el = new TestEl();
-        const controller = new RovingTabindexController(el);
-        expect(controller.direction).to.equal('both');
-        expect(controller.focusInIndex).to.equal(0);
-        expect(controller.isFocusableElement(el)).to.be.true;
-    });
+import { LitElement } from "lit";
+import { expect } from "@open-wc/testing";
+import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
+describe("RovingTabindex", () => {
+  it("constructs with defaults", async () => {
+    class TestEl extends LitElement {
+    }
+    customElements.define("test-roving-tabindex-el", TestEl);
+    const el = new TestEl();
+    const controller = new RovingTabindexController(el);
+    expect(controller.direction).to.equal("both");
+    expect(controller.focusInIndex).to.equal(0);
+    expect(controller.isFocusableElement(el)).to.be.true;
+  });
 });
-//# sourceMappingURL=roving-tabindex.test.js.map
+//# sourceMappingURL=roving-tabindex.test.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 6 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100406

increased by25.45%

Number of package files

29

increased by38.1%

Lines of code

869

increased by41.07%

Worsened metrics

Number of low license alerts

9

increased by125%

License quality

60

decreased by-25%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes