@internetarchive/modal-manager 2.0.4-alpha-webdev7960.1 → 2.0.5-webdev-8155.1

package/src/shoelace/active-elements.ts

@@ -1,4 +1,4 @@
-/* istanbul ignore file */
+/* c8 ignore start */
 /**
  * Use a generator so we can iterate and possibly break early.
  * @example
@@ -13,7 +13,7 @@
  *   }
  */
 export function* activeElements(
-  activeElement: Element | null = document.activeElement
+  activeElement: Element | null = document.activeElement,
 ): Generator<Element> {
   if (activeElement === null || activeElement === undefined) return;
 
@@ -31,3 +31,4 @@ export function* activeElements(
 export function getDeepestActiveElement() {
   return [...activeElements()].pop();
 }
+/* c8 ignore end */

package/src/shoelace/modal.ts

@@ -1,4 +1,4 @@
-/* istanbul ignore file */
+/* c8 ignore start */
 import { activeElements, getDeepestActiveElement } from './active-elements.js';
 import { getTabbableElements } from './tabbable.js';
 
@@ -28,7 +28,7 @@ export default class Modal {
 
   /** Deactivates focus trapping. */
   deactivate() {
-    activeModals = activeModals.filter(modal => modal !== this.element);
+    activeModals = activeModals.filter((modal) => modal !== this.element);
     this.currentFocus = null;
     document.removeEventListener('focusin', this.handleFocusIn);
     document.removeEventListener('keydown', this.handleKeyDown);
@@ -75,7 +75,7 @@ export default class Modal {
   private possiblyHasTabbableChildren(element: HTMLElement) {
     return (
       this.elementsWithTabbableControls.includes(
-        element.tagName.toLowerCase()
+        element.tagName.toLowerCase(),
       ) || element.hasAttribute('controls')
       // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?
     );
@@ -107,14 +107,13 @@ export default class Modal {
     const tabbableElements = getTabbableElements(this.element);
 
     let currentFocusIndex = tabbableElements.findIndex(
-      el => el === currentActiveElement
+      (el) => el === currentActiveElement,
     );
 
     this.previousFocus = this.currentFocus;
 
     const addition = this.tabDirection === 'forward' ? 1 : -1;
 
-    // eslint-disable-next-line
     while (true) {
       if (currentFocusIndex + addition >= tabbableElements.length) {
         currentFocusIndex = 0;
@@ -164,3 +163,4 @@ export default class Modal {
     this.tabDirection = 'forward';
   };
 }
+/* c8 ignore end */

package/src/shoelace/tabbable.ts

@@ -1,4 +1,4 @@
-/* istanbul ignore file */
+/* c8 ignore start */
 // Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.
 // computedStyle calls are "live" so they only need to be retrieved once for an element.
 const computedStyleMap = new WeakMap<Element, CSSStyleDeclaration>();
@@ -160,7 +160,7 @@ export function getTabbableBoundary(root: HTMLElement | ShadowRoot) {
  */
 function getSlottedChildrenOutsideRootElement(
   slotElement: HTMLSlotElement,
-  root: HTMLElement | ShadowRoot
+  root: HTMLElement | ShadowRoot,
 ) {
   return (
     (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !==
@@ -195,7 +195,7 @@ export function getTabbableElements(root: HTMLElement | ShadowRoot) {
         el.assignedElements({ flatten: true }).forEach(
           (assignedEl: Element) => {
             walk(assignedEl as HTMLElement | ShadowRoot);
-          }
+          },
         );
       }
 
@@ -221,3 +221,4 @@ export function getTabbableElements(root: HTMLElement | ShadowRoot) {
     return bTabindex - aTabindex;
   });
 }
+/* c8 ignore end */

package/test/modal-config.test.ts

@@ -1,10 +1,10 @@
-import { expect } from '@open-wc/testing';
+import { describe, test, expect } from 'vitest';
 import { html } from 'lit';
 
 import { ModalConfig } from '../src/modal-config';
 
 describe('Modal Config', () => {
-  it('can be instantiated properly', async () => {
+  test('can be instantiated properly', async () => {
     const config = new ModalConfig();
     const title = html`Foo`;
     config.title = title;
@@ -14,7 +14,7 @@ describe('Modal Config', () => {
     expect(config.headerColor).to.equal('green');
   });
 
-  it('can be instantiated properly with constructor', async () => {
+  test('can be instantiated properly with constructor', async () => {
     const title = html`Foo`;
     const subtitle = html`Bar`;
     const headline = html`Baz`;
@@ -59,7 +59,7 @@ describe('Modal Config', () => {
     expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
   });
 
-  it('instantiates properly with defaults', async () => {
+  test('instantiates properly with defaults', async () => {
     const config = new ModalConfig();
     expect(config.title).to.equal(undefined);
     expect(config.subtitle).to.equal(undefined);

package/test/modal-manager.test.ts

@@ -1,10 +1,11 @@
 import {
   fixture,
-  expect,
   oneEvent,
   elementUpdated,
   nextFrame,
-} from '@open-wc/testing';
+  fixtureCleanup,
+} from '@open-wc/testing-helpers';
+import { describe, test, expect, afterEach } from 'vitest';
 import { TemplateResult, html } from 'lit';
 
 import '../src/modal-manager';
@@ -16,7 +17,11 @@ import { ModalManagerInterface } from '../src/modal-manager-interface';
 import { getTabbableElements } from '../src/shoelace/tabbable';
 
 describe('Modal Manager', () => {
-  it('defaults to closed', async () => {
+  afterEach(() => {
+    fixtureCleanup();
+  });
+
+  test('defaults to closed', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -24,7 +29,7 @@ describe('Modal Manager', () => {
     expect(el.mode).to.equal('closed');
   });
 
-  it('can be closed by calling closeModal', async () => {
+  test('can be closed by calling closeModal', async () => {
     const el = (await fixture(html`
       <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
     `)) as ModalManager;
@@ -40,7 +45,7 @@ describe('Modal Manager', () => {
     expect(el.customModalContent).to.equal(undefined);
   });
 
-  it('can be closed by clicking on the backdrop', async () => {
+  test('can be closed by clicking on the backdrop', async () => {
     const el = (await fixture(html`
       <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
     `)) as ModalManager;
@@ -54,7 +59,7 @@ describe('Modal Manager', () => {
     expect(el.mode).to.equal('closed');
   });
 
-  it('emits a modeChanged event when opening', async () => {
+  test('emits a modeChanged event when opening', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -64,27 +69,28 @@ describe('Modal Manager', () => {
     setTimeout(() => {
       el.showModal({ config });
     });
-    const response = await oneEvent(el, 'modeChanged', false);
+    const response = await oneEvent(el, 'modeChanged');
     expect(response.detail.mode).to.equal(ModalManagerMode.Open);
   });
 
-  it('emits a modeChanged event when closing', async () => {
+  test('emits a modeChanged event when closing', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
 
     const config = new ModalConfig();
-    el.showModal({ config });
+    await el.showModal({ config });
     await elementUpdated(el);
+    await nextFrame();
 
     setTimeout(() => {
       el.closeModal();
     });
-    const response = await oneEvent(el, 'modeChanged', false);
+    const response = await oneEvent(el, 'modeChanged');
     expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
   });
 
-  it('can show a modal', async () => {
+  test('can show a modal', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -95,7 +101,7 @@ describe('Modal Manager', () => {
     expect(el.mode).to.equal(ModalManagerMode.Open);
   });
 
-  it('sets the --containerHeight CSS property when the window resizes', async () => {
+  test('sets the --containerHeight CSS property when the window resizes', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -112,7 +118,7 @@ describe('Modal Manager', () => {
     expect(propAfter).to.not.equal('');
   });
 
-  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {
+  test('calls the userClosedModalCallback when the user taps the backdrop', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -137,7 +143,7 @@ describe('Modal Manager', () => {
     expect(callbackCalled).to.equal(true);
   });
 
-  it('does not call the userClosedModalCallback when the modal just closes', async () => {
+  test('does not call the userClosedModalCallback when the modal just closes', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -157,7 +163,7 @@ describe('Modal Manager', () => {
     expect(callbackCalled).to.equal(false);
   });
 
-  it('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', async () => {
+  test('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -185,7 +191,7 @@ describe('Modal Manager', () => {
     expect(callbackCalled).to.equal(true);
   });
 
-  it('mode is set to closed when close button is pressed', async () => {
+  test('mode is set to closed when close button is pressed', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -206,7 +212,7 @@ describe('Modal Manager', () => {
     expect(el.mode).to.equal('closed');
   });
 
-  it('mode is set to closed when close button gets spacebar pressed', async () => {
+  test('mode is set to closed when close button gets spacebar pressed', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -229,7 +235,7 @@ describe('Modal Manager', () => {
     expect(el.mode).to.equal('closed');
   });
 
-  it('mode remains open when close button gets non-button keypress', async () => {
+  test('mode remains open when close button gets non-button keypress', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -252,7 +258,7 @@ describe('Modal Manager', () => {
     expect(el.mode).to.equal('open');
   });
 
-  it('allows the user to close by clicking on the backdrop if configured to', async () => {
+  test('allows the user to close by clicking on the backdrop if configured to', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -271,7 +277,7 @@ describe('Modal Manager', () => {
     expect(el.mode).to.equal('closed');
   });
 
-  it("doesn't allow the user to close by clicking on the backdrop if configured to", async () => {
+  test("doesn't allow the user to close by clicking on the backdrop if configured to", async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManagerInterface;
@@ -290,7 +296,7 @@ describe('Modal Manager', () => {
     expect(el.getMode()).to.equal('open');
   });
 
-  it('ia logo should not visible on modal', async () => {
+  test('ia logo should not visible on modal', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManagerInterface;
@@ -304,7 +310,7 @@ describe('Modal Manager', () => {
     expect(logoIcon).to.not.exist;
   });
 
-  it('should trap Tab key', async () => {
+  test('should trap Tab key', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>
     `)) as ModalManager;
@@ -319,6 +325,7 @@ describe('Modal Manager', () => {
     const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
     document.dispatchEvent(tabEvent);
     await elementUpdated(el);
+    await nextFrame();
 
     // Should be only one tabbable element
     const modal = el.shadowRoot?.querySelector('modal-template') as HTMLElement;
@@ -326,13 +333,14 @@ describe('Modal Manager', () => {
     expect(tabbableElements?.length).to.equal(1);
 
     const closeButton = modal?.shadowRoot?.querySelector(
-      '.close-button'
+      '.close-button',
     ) as HTMLElement;
     expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);
 
     // Tab again
     el.dispatchEvent(tabEvent);
     await elementUpdated(el);
+    await nextFrame();
 
     // Should be only one tabbable element
     expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);
@@ -344,12 +352,13 @@ describe('Modal Manager', () => {
     });
     document.dispatchEvent(shiftTabEvent);
     await elementUpdated(el);
+    await nextFrame();
 
     // Should be only one tabbable element
     expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);
   });
 
-  it('returns keyboard focus to the triggering element on close', async () => {
+  test('returns keyboard focus to the triggering element on close', async () => {
     const config = new ModalConfig();
     const el = (await fixture(html`
       <div>

package/test/modal-template.test.ts

@@ -1,11 +1,15 @@
-import { fixture, expect, oneEvent } from '@open-wc/testing';
+import { fixture, oneEvent } from '@open-wc/testing-helpers';
+import { describe, test, expect } from 'vitest';
 import { html } from 'lit';
 import '../src/modal-template';
 import { ModalConfig } from '../src/modal-config';
+import type { ModalTemplate } from '../src/modal-template';
 
 describe('Modal Template', () => {
-  it('has correct default configuration', async () => {
-    const el = await fixture(html` <modal-template></modal-template> `);
+  test('has correct default configuration', async () => {
+    const el = await fixture<ModalTemplate>(html`
+      <modal-template></modal-template>
+    `);
 
     const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
     const headline = el.shadowRoot?.querySelector('.headline');
@@ -15,15 +19,15 @@ describe('Modal Template', () => {
     expect(headline).to.not.exist;
     expect(message).to.not.exist;
     expect(title).to.not.exist;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
     expect('hidden' in processingLogo!.classList);
   });
 
-  it('does not show the title if one not provided', async () => {
+  test('does not show the title if one not provided', async () => {
     const config = new ModalConfig();
     config.title = undefined;
 
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 
@@ -31,21 +35,24 @@ describe('Modal Template', () => {
     expect(title).to.not.exist;
   });
 
-  it('emits closeButtonPressed event when close button is pressed', async () => {
-    const el = await fixture(html` <modal-template></modal-template> `);
-
+  test('emits closeButtonPressed event when close button is pressed', async () => {
+    const el = await fixture<ModalTemplate>(html`
+      <modal-template></modal-template>
+    `);
     const closeButton = el.shadowRoot?.querySelector('.close-button');
     const clickEvent = new MouseEvent('click');
 
     setTimeout(() => {
       closeButton?.dispatchEvent(clickEvent);
     });
-    const response = await oneEvent(el, 'closeButtonPressed', false);
+    const response = await oneEvent(el, 'closeButtonPressed');
     expect(response).to.exist;
   });
 
-  it('emits closeButtonPressed event when close button gets spacebar pressed', async () => {
-    const el = await fixture(html` <modal-template></modal-template> `);
+  test('emits closeButtonPressed event when close button gets spacebar pressed', async () => {
+    const el = await fixture<ModalTemplate>(html`
+      <modal-template></modal-template>
+    `);
 
     const closeButton = el.shadowRoot?.querySelector('.close-button');
     const clickEvent = new KeyboardEvent('keydown', { key: ' ' });
@@ -53,14 +60,14 @@ describe('Modal Template', () => {
     setTimeout(() => {
       closeButton?.dispatchEvent(clickEvent);
     });
-    const response = await oneEvent(el, 'closeButtonPressed', false);
+    const response = await oneEvent(el, 'closeButtonPressed');
     expect(response).to.exist;
   });
 
-  it('emits leftNavButtonPressed event when left nav button is pressed', async () => {
+  test('emits leftNavButtonPressed event when left nav button is pressed', async () => {
     const config = new ModalConfig();
     config.showLeftNavButton = true;
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 
@@ -70,14 +77,14 @@ describe('Modal Template', () => {
     setTimeout(() => {
       leftNavButton?.dispatchEvent(clickEvent);
     });
-    const response = await oneEvent(el, 'leftNavButtonPressed', false);
+    const response = await oneEvent(el, 'leftNavButtonPressed');
     expect(response).to.exist;
   });
 
-  it('emits leftNavButtonPressed event when left nav button gets spacebar pressed', async () => {
+  test('emits leftNavButtonPressed event when left nav button gets spacebar pressed', async () => {
     const config = new ModalConfig();
     config.showLeftNavButton = true;
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 
@@ -87,15 +94,15 @@ describe('Modal Template', () => {
     setTimeout(() => {
       leftNavButton?.dispatchEvent(clickEvent);
     });
-    const response = await oneEvent(el, 'leftNavButtonPressed', false);
+    const response = await oneEvent(el, 'leftNavButtonPressed');
     expect(response).to.exist;
   });
 
-  it('shows the processing indicator if configured to', async () => {
+  test('shows the processing indicator if configured to', async () => {
     const config = new ModalConfig();
     config.showProcessingIndicator = true;
 
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 
@@ -104,10 +111,10 @@ describe('Modal Template', () => {
     expect('hidden' in classList).to.equal(false);
   });
 
-  it('shows the left nav button if configured to', async () => {
+  test('shows the left nav button if configured to', async () => {
     const config = new ModalConfig();
     config.showLeftNavButton = true;
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 
@@ -115,10 +122,10 @@ describe('Modal Template', () => {
     expect(leftNavButton).to.exist;
   });
 
-  it('hides the left nav button if configured to', async () => {
+  test('hides the left nav button if configured to', async () => {
     const config = new ModalConfig();
     config.showCloseButton = false;
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 
@@ -126,11 +133,11 @@ describe('Modal Template', () => {
     expect(closeButton).to.not.exist;
   });
 
-  it('uses custom text for the left nav button if configured to', async () => {
+  test('uses custom text for the left nav button if configured to', async () => {
     const config = new ModalConfig();
     config.showLeftNavButton = true;
     config.leftNavButtonText = 'Previous';
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 
@@ -140,11 +147,11 @@ describe('Modal Template', () => {
     expect(leftNavButton?.innerHTML).to.contain('Previous');
   });
 
-  it('does not use any text for the left nav button if not configured to', async () => {
+  test('does not use any text for the left nav button if not configured to', async () => {
     const config = new ModalConfig();
     config.showLeftNavButton = true;
 
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 
@@ -152,10 +159,10 @@ describe('Modal Template', () => {
     expect(leftNavButton?.innerHTML).not.to.contain('Previous');
   });
 
-  it('shows the close button if configured to', async () => {
+  test('shows the close button if configured to', async () => {
     const config = new ModalConfig();
     config.showCloseButton = true;
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 
@@ -163,10 +170,10 @@ describe('Modal Template', () => {
     expect(closeButton).to.exist;
   });
 
-  it('hides the close button if configured to', async () => {
+  test('hides the close button if configured to', async () => {
     const config = new ModalConfig();
     config.showCloseButton = false;
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 
@@ -174,14 +181,14 @@ describe('Modal Template', () => {
     expect(closeButton).to.not.exist;
   });
 
-  it('shows the properties from the config', async () => {
+  test('shows the properties from the config', async () => {
     const config = new ModalConfig();
     config.title = html`Boop`;
     config.subtitle = html`Bop`;
     config.headline = html`Foo`;
     config.message = html`Bar`;
 
-    const el = await fixture(html`
+    const el = await fixture<ModalTemplate>(html`
       <modal-template .config=${config}></modal-template>
     `);
 

package/tsconfig.json

@@ -1,21 +1,25 @@
-{
-  "compilerOptions": {
-    "target": "es6",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "declaration": true,
-    "rootDir": "./",
-    "skipLibCheck": true
-  },
-  "include": ["**/*.ts"]
-}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmitOnError": true,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "declaration": true,
+    "rootDir": "./",
+    "skipLibCheck": true,
+    "useDefineForClassFields": false,
+  },
+  "include": ["**/*.ts"]
+}

package/vitest.config.ci.ts

@@ -0,0 +1,27 @@
+/// <reference types="vitest" />
+import { defineConfig, mergeConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright'
+import viteConfig from './vite.config';
+
+// https://vitest.dev/config
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    server: {
+      host: '0.0.0.0',
+      port: 8080,
+    },
+    test: {
+      browser: {
+        headless: true,
+        enabled: true,
+        provider: playwright(),
+        instances: [{ browser: 'chromium' }],
+      },
+      watch: false,
+      coverage: {
+        include: ['src/**/*.ts'],
+      },
+    },
+  }),
+);

package/.eslintrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-  root: true,
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'html'],
-  extends: ['plugin:@typescript-eslint/recommended'],
-  settings: {
-    'import/resolver': {
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-        moduleDirectory: ['node_modules', 'src', 'demo'],
-      },
-    },
-  },
-};