@salesforcedevs/arch-components 1.20.17-alpha4 → 1.20.17-alpha6

package/src/modules/tm/utils/utils.ts

@@ -1,18 +0,0 @@
-export function waitForPageSettled() {
-    return new Promise<void>((resolve) => {
-        let prevH: number = 0;
-        const prevY = window.scrollY;
-        function check() {
-            const nextH = window.innerHeight + document.body.scrollHeight;
-            const nextY = window.scrollY;
-            const settled = nextH === prevH;
-            if (settled) {
-                if (nextY === prevY) {resolve();}
-                return;
-            }
-            prevH = nextH;
-            requestAnimationFrame(check);
-        }
-        requestAnimationFrame(check);
-    });
-}

package/src/modules/tm/youtube/youtube.css

@@ -1,7 +0,0 @@
-:host {
-    display: block;
-}
-
-iframe {
-    border-radius: var(--tds-radius-lg);
-}

package/src/modules/tm/youtube/youtube.html

@@ -1,10 +0,0 @@
-<template>
-    <iframe
-        data-chromatic="ignore"
-        height={height}
-        frameborder="0"
-        src={src}
-        type="text/html"
-        width={width}
-    ></iframe>
-</template>

package/src/modules/tm/youtube/youtube.stories.js

@@ -1,15 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tm/tm-youtube',
-    parameters: {
-        modules: ['/modules/tm-youtube.js'],
-        chromatic: {
-            disable: true
-        }
-    }
-};
-
-export const Base = () => html`
-    <tm-youtube video-id="dQw4w9WgXcQ"></tm-youtube>
-`;

package/src/modules/tm/youtube/youtube.ts

@@ -1,27 +0,0 @@
-import { api, LightningElement, track } from 'lwc';
-import { waitForPageSettled } from 'tm/utils';
-
-export default class extends LightningElement {
-    @api videoId: string = undefined!;
-
-    @track private height = 0;
-    @track private width = 0;
-
-    private didSetSize = false;
-
-    private get src() {
-        return `https://www.youtube.com/embed/${this.videoId}`;
-    }
-
-    renderedCallback() {
-        if (!this.didSetSize) {
-            this.didSetSize = true;
-            waitForPageSettled().then(() => {
-                const w = this.template.host.offsetWidth;
-                const ratio = 0.5625;
-                this.height = w * ratio;
-                this.width = w;
-            });
-        }
-    }
-}

package/src/modules/ui/focusTrap/focusTrap.html

@@ -1,5 +0,0 @@
-<template>
-    <div data-id="start" tabindex={startTabIndex}></div>
-    <slot></slot>
-    <div data-id="end" tabindex={endTabIndex}></div>
-</template>

package/src/modules/ui/focusTrap/focusTrap.ts

@@ -1,104 +0,0 @@
-import { api, LightningElement } from 'lwc';
-
-import { isFocusable, isHidden } from '@a11y/focus-trap';
-import { queryShadowRoot } from '@a11y/focus-trap/shadow';
-
-import { debounce } from 'shared/debounce';
-
-// This is a re-implementation of https://github.com/andreasbm/focus-trap
-// since LWC does not currently support custom elements in a template
-export default class extends LightningElement {
-    @api private inactive = false;
-    private focused = false;
-    private init = false;
-
-    private $start!: HTMLElement;
-    private $end!: HTMLElement;
-
-    private $activeElement: Element | null = null;
-
-    private get startTabIndex() {
-        return !this.focused || this.inactive ? '-1' : '0';
-    }
-
-    private get endTabIndex() {
-        return !this.focused || this.inactive ? '-1' : '0';
-    }
-
-    renderedCallback() {
-        if (this.init) {return;}
-        this.init = true;
-
-        this.$start = this.template.querySelector(
-            `[data-id="start"]`
-        ) as HTMLElement;
-        this.$end = this.template.querySelector(
-            `[data-id="end"]`
-        ) as HTMLElement;
-
-        this.$start.addEventListener('focus', this.focusLastElement);
-        this.$end.addEventListener('focus', this.focusFirstElement);
-
-        this.addEventListener('focusin', this.onFocusIn);
-        this.addEventListener('focusout', this.onFocusOut);
-        this.addEventListener('keyup', this.onKeyUp as EventListener);
-
-        this.$activeElement = getActiveElement(document.activeElement);
-
-        this.focusFirstElement();
-    }
-
-    disconnectedCallback() {
-        this.removeEventListener('focusin', this.onFocusIn);
-        this.removeEventListener('focusout', this.onFocusOut);
-        if (this.$activeElement && this.$activeElement instanceof HTMLElement)
-            {this.$activeElement.focus();}
-    }
-
-    private focusFirstElement = () => {
-        this.trapFocus();
-    };
-
-    private focusLastElement = () => {
-        this.trapFocus(true);
-    };
-
-    private onFocusIn = debounce(() => {
-        this.focused = true;
-    }, 0);
-
-    private onFocusOut = debounce(() => {
-        this.focused = false;
-    }, 0);
-
-    private onKeyUp = (e: KeyboardEvent) => {
-        if (e.key === 'Esc' || e.key === 'Escape') {
-            this.dispatchEvent(new CustomEvent('requestclose'));
-        }
-    };
-
-    private getFocusableElements(): HTMLElement[] {
-        // @ts-ignore
-        const children = this.template.querySelector('slot').assignedElements();
-        // @ts-ignore
-        return queryShadowRoot({ children }, isHidden, isFocusable);
-    }
-
-    private trapFocus(trapToEnd?: boolean) {
-        if (this.inactive) {return;}
-        const focusableElements = this.getFocusableElements();
-        if (focusableElements.length > 0) {
-            if (trapToEnd) {
-                focusableElements[focusableElements.length - 1].focus();
-            } else {
-                focusableElements[0].focus();
-            }
-        }
-    }
-}
-
-function getActiveElement(element: Element | null): Element | null {
-    if (element && element.shadowRoot)
-        {return getActiveElement(element.shadowRoot.activeElement);}
-    return element;
-}

package/src/modules/ui/focusVisible/__tests__/focusVisible.test.ts

@@ -1,95 +0,0 @@
-import { html, renderIntoBody, nextTick } from 'shared/testutils';
-
-import FocusVisible from '../focusVisible';
-
-customElements.define(
-    'ui-focus-visible',
-    FocusVisible.CustomElementConstructor
-);
-
-describe('ui-focus-visible', () => {
-    afterEach(() => {
-        while (document.body.firstChild) {
-            document.body.removeChild(document.body.firstChild);
-        }
-    });
-
-    // Skip these tests as LWC in test mode doesn't support child nodes for light DOM components
-    // The focusVisible component requires child elements in slots
-    it.skip('defaults to true', async () => {
-        const element = renderIntoBody(html`
-            <ui-focus-visible>
-                <div></div>
-            </ui-focus-visible>
-        `);
-        await nextTick();
-        expect(element.querySelector('div')).toHaveAttribute(
-            'data-focus-visible',
-            'true'
-        );
-    });
-    it.skip('handles mutation', async () => {
-        const element = renderIntoBody(html`
-            <ui-focus-visible></ui-focus-visible>
-        `);
-        await nextTick();
-        element.appendChild(document.createElement('div'));
-        await nextTick();
-        expect(element.querySelector('div')).toHaveAttribute(
-            'data-focus-visible',
-            'true'
-        );
-    });
-    it.skip('changes to false on mousedown', async () => {
-        const element = renderIntoBody(html`
-            <ui-focus-visible>
-                <div></div>
-            </ui-focus-visible>
-        `);
-        await nextTick();
-        document.dispatchEvent(new MouseEvent('mousedown'));
-        expect(element.querySelector('div')).toHaveAttribute(
-            'data-focus-visible',
-            'false'
-        );
-    });
-    it.skip('changes to false on mousemove', async () => {
-        const element = renderIntoBody(html`
-            <ui-focus-visible>
-                <div></div>
-            </ui-focus-visible>
-        `);
-        await nextTick();
-        document.dispatchEvent(new MouseEvent('mousemove'));
-        expect(element.querySelector('div')).toHaveAttribute(
-            'data-focus-visible',
-            'false'
-        );
-    });
-    it.skip('changes to true on keydown', async () => {
-        const element = renderIntoBody(html`
-            <ui-focus-visible>
-                <div></div>
-            </ui-focus-visible>
-        `);
-        await nextTick();
-        document.dispatchEvent(new MouseEvent('mousemove'));
-        expect(element.querySelector('div')).toHaveAttribute(
-            'data-focus-visible',
-            'false'
-        );
-        document.dispatchEvent(new KeyboardEvent('keydown'));
-        expect(element.querySelector('div')).toHaveAttribute(
-            'data-focus-visible',
-            'true'
-        );
-    });
-
-    it('renders the component', () => {
-        const element = renderIntoBody(
-            html`<ui-focus-visible></ui-focus-visible>`
-        );
-        expect(element).toBeTruthy();
-        expect(element.shadowRoot).toBeTruthy();
-    });
-});

package/src/modules/ui/focusVisible/focusVisible.html

@@ -1,3 +0,0 @@
-<template>
-    <slot></slot>
-</template>

package/src/modules/ui/focusVisible/focusVisible.ts

@@ -1,46 +0,0 @@
-import { LightningElement } from 'lwc';
-
-let focusVisible = true;
-let handlers: (() => void)[] = [];
-
-export default class extends LightningElement {
-    private observer!: MutationObserver;
-
-    connectedCallback() {
-        this.observer = new MutationObserver(() => {
-            this.onChange();
-        });
-        this.observer.observe(this.template.host, {
-            childList: true
-        });
-        handlers.push(this.onChange);
-        this.onChange();
-    }
-
-    disconnectedCallback() {
-        handlers = handlers.filter((h) => h !== this.onChange);
-        this.observer.disconnect();
-    }
-
-    private onChange = () => {
-        for (const node of Array.from(this.template.host.children)) {
-            node.setAttribute('data-focus-visible', String(focusVisible));
-        }
-    };
-}
-
-document.addEventListener('mousedown', onMouse, { passive: true });
-document.addEventListener('mousemove', onMouse, { passive: true });
-document.addEventListener('keydown', onKeyboard, { passive: true });
-
-function onMouse(event: MouseEvent) {
-    if (!focusVisible) {return;}
-    focusVisible = false;
-    for (const handler of handlers) {handler();}
-}
-
-function onKeyboard(event: KeyboardEvent) {
-    if (focusVisible) {return;}
-    focusVisible = true;
-    for (const handler of handlers) {handler();}
-}