lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/input/selection.js

@@ -1,131 +0,0 @@
-import { isSafari, isIE11, timeout } from 'lightning/utilsPrivate';
-
-/**
- * Purges the selection cache to the DOM.
- * @param input {HTMLInputElement}
- * @param cache {InputSelectionCache}
- */
-function restoreCacheToInput(input, cache) {
-    input.setSelectionRange(
-        cache._selectionStartCached,
-        cache._selectionEndCached
-    );
-
-    cache.clearCache();
-}
-
-/**
- * This class provides a way to cache text selection in input fields.
- */
-export class InputSelectionCache {
-    /**
-     * Cached value for selectionStart
-     * @type {number|null}
-     */
-    _selectionStartCached = null;
-
-    /**
-     * Cached value for selectionEnd
-     * @type {number|null}
-     */
-    _selectionEndCached = null;
-
-    /**
-     * Updates the cached values.
-     * @param {number} start The start of the selected range
-     * @param {number} end The end of the selected range
-     * @private
-     */
-    _cacheSelectionRange(start, end) {
-        if (typeof start === 'number' && typeof end === 'number') {
-            this._selectionStartCached = start;
-            this._selectionEndCached = end;
-        }
-    }
-
-    /**
-     * Clears our cached selection.
-     */
-    clearCache() {
-        this._selectionStartCached = null;
-        this._selectionEndCached = null;
-    }
-
-    /**
-     * True, if the DOM element has selection.
-     * @param input {HTMLInputElement} The DOM element to operate on
-     */
-    hasSelection(input) {
-        return (
-            input.selectionStart !== null &&
-            // If the start and end are the same, that's not selection, it's just the cursor position.
-            input.selectionStart !== input.selectionEnd
-        );
-    }
-
-    /**
-     * True, if selection has been cached.
-     */
-    isCached() {
-        return (
-            this._selectionStartCached !== null &&
-            this._selectionEndCached !== null
-        );
-    }
-
-    /**
-     * Cache the current text selection for this input field.
-     * We ignore selection range of (0,0) because that indicates no selection and we don't want to restore it later.
-     * @param input {HTMLInputElement} The DOM element to operate on
-     */
-    preserve(input) {
-        if (!this.hasSelection(input) && this.isCached()) {
-            // We already have cached selection but we're asking to preserve no selection,
-            // so we must NOT overwrite our cache with no selection or we can't restore the previously selected text.
-            // This happens if the browser doesn't preserve text selection automatically in the input.
-            return;
-        }
-
-        // Only update cache if there is selection.
-        if (this.hasSelection(input)) {
-            this._cacheSelectionRange(input.selectionStart, input.selectionEnd);
-        }
-    }
-
-    /**
-     * Restore cached selection. This may happen async, so a promise is returned.
-     * @param input {HTMLInputElement} The DOM element to operate on
-     * @returns {Promise} A promise to be resolved when the selection is restored.
-     *  If the cache was empty, the promise is resolved immediately as a no-op.
-     */
-    restore(input) {
-        // Bail early if we don't have a cached selection.
-        if (!this.isCached()) {
-            return Promise.resolve();
-        }
-
-        // @W-7962838 - Safari has a browser bug where setting the selection on inputs
-        // as you focus them keeps it from scrolling into view in certain conditions.
-        // This can be worked around by setting the text selection in a new call stack immediately after the focus.
-        // https://bugs.webkit.org/show_bug.cgi?id=217350
-        if (isSafari) {
-            return timeout(0).then(() => {
-                // running async, so revalidate our inputs
-                if (this.isCached() && input) {
-                    restoreCacheToInput(input, this);
-                }
-            });
-        }
-
-        // W-6176985: IE11 input when set value, will move cursor to beginning.
-        // This fix is only for input type=number on IE11, and force the cursor to the end.
-        if (isIE11) {
-            const length = input.value.length;
-            input.setSelectionRange(length, length);
-            return Promise.resolve();
-        }
-
-        restoreCacheToInput(input, this);
-        return Promise.resolve();
-    }
-}

package/src/lightning/positionLibrary/__component__/positionLibraryBounding.spec.js

@@ -1,319 +0,0 @@
-/*
- * THIS IS ONLY A SAMPLE TEST OF DEMO HOW TO RUN SAME TEST FROM WDIO
- * AS A KARMA TEST, SHOULD BE ALIGN TO ASYNC MODEL INSTEAD OF waitFor
- */
-import { createElement } from 'lwc';
-import Bounding from 'x/bounding';
-
-function createHtml(props = {}) {
-    const element = createElement('x-bounding', { is: Bounding });
-    Object.assign(element, props);
-    return element;
-}
-
-const FLIP_MAP = {
-    bottom: 'bottom',
-    'bottom-left': 'bottom-right',
-    'bottom-right': 'bottom-left',
-    left: 'right',
-    'left-bottom': 'right-bottom',
-    'left-top': 'right-bottom',
-    right: 'left',
-    'right-bottom': 'left-bottom',
-    'right-top': 'left-top',
-    top: 'top',
-    'top-left': 'top-right',
-    'top-right': 'top-left',
-};
-
-/**
- * Fixes @W-8235775.
- * Clean up the DOM, removing anything that isn't Jasmine related or script/css.
- * These tests are sensitive to the height of the DOM and fail if other stuff is too tall.
- *
- * TODO: Remove this cleanup when this can be done in a central location instead.
- */
-function cleanDom() {
-    const bodyNodes = Array.prototype.slice.call(
-        document.querySelectorAll('body > *')
-    );
-    const nodesToRemove = bodyNodes.filter(
-        (n) =>
-            n.tagName.toLowerCase() !== 'script' &&
-            n.tagName.toLowerCase() !== 'link' &&
-            n.className.indexOf('jasmine') !== 0
-    );
-    for (let i = 0; i < nodesToRemove.length; i++) {
-        document.body.removeChild(nodesToRemove[i]);
-    }
-
-    document.querySelectorAll('style').forEach((style) => style.remove());
-}
-
-function setup() {
-    cleanDom();
-
-    const element = createHtml();
-    document.body.appendChild(element);
-    return element;
-}
-
-function convertCasesToRtl(cases) {
-    const result = {};
-    Object.keys(cases).forEach((align) => {
-        result[align] = {};
-        Object.keys(cases[align]).forEach((pos) => {
-            const nubbinAlign = cases[align][pos];
-            result[align][pos] = FLIP_MAP[nubbinAlign];
-        });
-    });
-    return result;
-}
-
-/**
- * Waits for the bubble to be visible and have the correct positioning. If the wait condition is
- * not satisfied within the global Jasmine timeout interval (5000ms by default) the consuming test
- * will fail.
- * @param {Node} element test root node
- * @param {String} expected expected nubbin class
- */
-function waitForBubbleAlignment(element, expected) {
-    return new Promise((resolve) => {
-        function waitCondition() {
-            const bubble = element.querySelector('lightning-primitive-bubble');
-            if (bubble && bubble.visible) {
-                const overlay =
-                    bubble.shadowRoot.querySelector('[part="overlay"]');
-
-                const classList = overlay.getAttribute('class').split(' ');
-                const positioned = classList.indexOf(expected) > -1;
-                if (positioned) {
-                    resolve(positioned);
-                }
-            }
-
-            window.requestAnimationFrame(waitCondition);
-        }
-        waitCondition();
-    });
-}
-
-/**
- * The nubbin css class is used to determine the correctness of the bubble position.
- * @param {String} align alignment of the bubble
- * @param {String} pos name of target for the bubble
- * @param {String} nubbinAlign expected alignment for the nubbin
- */
-async function verifyBubbleAlignment(align, pos, nubbinAlign) {
-    // Set the bubble alignment for the test.
-    const element = document.querySelector('x-bounding');
-    const button = element.querySelector(`[data-align=${align}]`);
-    button.click();
-
-    // Show the bubble at the position being tested.
-    const show = element.querySelector(`[data-pos=${pos}]`);
-    show.click();
-
-    const expected = `slds-nubbin_${nubbinAlign}`;
-    const positioned = await waitForBubbleAlignment(element, expected);
-    expect(positioned).toBeTruthy();
-}
-
-/**
- * Dynamically creates test cases for all the combinations of alignments and positions specified in
- * the given map.
- * @param {Object} cases alignments with positions and their expected outcomes to test
- */
-function executeCases(cases) {
-    Object.keys(cases).forEach((align) => {
-        Object.keys(cases[align]).forEach((pos) => {
-            const nubbinAlign = cases[align][pos];
-            it(`should have bubble with nubbin alignment of ${nubbinAlign} relative to the ${pos} element when ${align} alignment is used`, async () => {
-                await verifyBubbleAlignment(align, pos, nubbinAlign);
-            });
-        });
-    });
-}
-
-/*
- * THIS IS ONLY A SAMPLE TEST OF DEMO HOW TO RUN SAME TEST FROM WDIO
- * AS A KARMA TEST, SHOULD BE ALIGN TO ASYNC MODEL INSTEAD OF waitFor
- */
-describe('Viewport Bounding', () => {
-    // We can reuse the same page instance for the tests so we only need to run setup once.
-    beforeAll(() => {
-        setup();
-    });
-    afterAll(() => {
-        const element = document.querySelector('x-bounding');
-        document.body.removeChild(element);
-        document.querySelectorAll('style').forEach((style) => style.remove());
-    });
-
-    // TODO: New cases will be added and some expected alignments will change when we add support
-    // for left-top, right-top, left-bottom, right-bottom alignments.
-    const cases = {
-        Bottom: {
-            leftTop: 'top-left',
-            top: 'top',
-            rightTop: 'top-right',
-            left: 'top-left',
-            center: 'top',
-            right: 'top-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom',
-            rightBottom: 'bottom-right',
-        },
-        BottomLeft: {
-            leftTop: 'top-left',
-            top: 'top-left',
-            rightTop: 'top-right',
-            left: 'top-left',
-            center: 'top-left',
-            right: 'top-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom-left',
-            rightBottom: 'bottom-right',
-        },
-        BottomRight: {
-            leftTop: 'top-left',
-            top: 'top-right',
-            rightTop: 'top-right',
-            left: 'top-left',
-            center: 'top-right',
-            right: 'top-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom-right',
-            rightBottom: 'bottom-right',
-        },
-        Left: {
-            leftTop: 'top-left', // left-top
-            top: 'top-right', // right-top
-            rightTop: 'top-right', // right-top
-            left: 'left',
-            center: 'right',
-            right: 'right',
-            leftBottom: 'bottom-left', // left-bottom
-            bottom: 'bottom-right', // right-bottom
-            rightBottom: 'bottom-right', // right-bottom
-        },
-        Right: {
-            leftTop: 'top-left', // left-top
-            top: 'top-left', // left-top
-            rightTop: 'top-right', // right-top
-            left: 'left',
-            center: 'left',
-            right: 'right',
-            leftBottom: 'bottom-left', // left-bottom
-            bottom: 'bottom-left', // left-bottom
-            rightBottom: 'bottom-right', // right-bottom
-        },
-        Top: {
-            leftTop: 'top-left',
-            top: 'top',
-            rightTop: 'top-right',
-            left: 'bottom-left',
-            center: 'bottom',
-            right: 'bottom-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom',
-            rightBottom: 'bottom-right',
-        },
-        TopLeft: {
-            leftTop: 'top-left',
-            top: 'top-left',
-            rightTop: 'top-right',
-            left: 'bottom-left',
-            center: 'bottom-left',
-            right: 'bottom-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom-left',
-            rightBottom: 'bottom-right',
-        },
-        TopRight: {
-            leftTop: 'top-left',
-            top: 'top-right',
-            rightTop: 'top-right',
-            left: 'bottom-left',
-            center: 'bottom-right',
-            right: 'bottom-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom-right',
-            rightBottom: 'bottom-right',
-        },
-    };
-
-    describe('LTR', () => {
-        executeCases(cases);
-    });
-
-    describe('RTL', () => {
-        beforeEach(() => {
-            document.dir = 'rtl';
-        });
-
-        executeCases(convertCasesToRtl(cases));
-
-        afterEach(() => {
-            document.dir = 'ltr';
-        });
-    });
-});
-
-describe('Element Bounding', () => {
-    // Same setup as viewport bounding but with element bounding enabled.
-    beforeAll(() => {
-        setup();
-        const element = document.querySelector('x-bounding');
-        element.querySelector('[name=elementBound]').click();
-    });
-
-    afterAll(() => {
-        const element = document.querySelector('x-bounding');
-        document.body.removeChild(element);
-        document.querySelectorAll('style').forEach((style) => style.remove());
-    });
-
-    describe('LTR', () => {
-        const cases = {
-            BottomLeft: {
-                left: 'top-left',
-                center: 'top-left',
-                right: 'top-right',
-            },
-            BottomRight: {
-                left: 'top-left',
-                center: 'top-left',
-                right: 'top-right',
-            },
-        };
-
-        executeCases(cases);
-    });
-
-    describe('RTL', () => {
-        beforeEach(() => {
-            document.dir = 'rtl';
-        });
-
-        // RTL flips the positions of the left and right elements.
-        const cases = {
-            BottomLeft: {
-                left: 'top-right',
-                center: 'top-right',
-                right: 'top-left',
-            },
-            BottomRight: {
-                left: 'top-right',
-                center: 'top-right',
-                right: 'top-left',
-            },
-        };
-
-        executeCases(cases);
-
-        afterEach(() => {
-            document.dir = 'ltr';
-        });
-    });
-});

package/src/lightning/positionLibrary/__component__/x/bounding/bounding.css

@@ -1,16 +0,0 @@
-/**
- * Makes element take up available space like slds-grid_frame but works with IE11.
- */
- .frame {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.bubble {
-    position: absolute;
-    width: 150px;
-    height: 150px;
-}

package/src/lightning/positionLibrary/__component__/x/bounding/bounding.html

@@ -1,36 +0,0 @@
-<template lwc:render-mode="light">
-    <div class="frame slds-grid slds-grid_vertical slds-p-around_large">
-        <div class="slds-col slds-grow-none">
-            <button data-align="Bottom" onclick={changeAlign}>B</button>
-            <button data-align="BottomLeft" onclick={changeAlign}>BL</button>
-            <button data-align="BottomRight" onclick={changeAlign}>BR</button>
-            <button data-align="Left" onclick={changeAlign}>L</button>
-            <button data-align="Right" onclick={changeAlign}>R</button>
-            <button data-align="Top" onclick={changeAlign}>T</button>
-            <button data-align="TopLeft" onclick={changeAlign}>TL</button>
-            <button data-align="TopRight" onclick={changeAlign}>TR</button>
-
-            <label for="elementBound" class="slds-p-left_large">Element Bound:</label>
-            <input type="checkbox" name="elementBound" class="slds-m-left_x-small" onclick={toggleElementBound}></input>
-
-            <span class="slds-p-left_large">Align: <span class="align">{align}</span></span>
-
-            <lightning-primitive-bubble class="bubble" content-id="test-bubble" content="Lightning Primitive Bubble"></lightning-primitive-bubble>
-        </div>
-        <div class="slds-col slds-grid slds-grid_align-spread slds-grid_vertical-align-start">
-            <lightning-button-icon class="slds-col" data-pos="leftTop" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="top" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="rightTop" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-        </div>
-        <div class="slds-col slds-col_bump-bottom slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
-            <lightning-button-icon class="slds-col" data-pos="left" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="center" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="right" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-        </div>
-        <div class="slds-col slds-grid slds-grid_align-spread slds-grid_vertical-align-end">
-            <lightning-button-icon class="slds-col" data-pos="leftBottom" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="bottom" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="rightBottom" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-        </div>
-    </div>
-</template>

package/src/lightning/positionLibrary/__component__/x/bounding/bounding.js

@@ -1,122 +0,0 @@
-/* eslint-disable @lwc/lwc/no-api-reassignments */
-
-import { LightningElement, api } from 'lwc';
-import { AutoPosition, Direction } from 'lightning/positionLibrary';
-
-// TODO: Will need LeftBottom, LeftTop, RightBottom, and RightTop cases when they're supported.
-const BubbleAlign = {
-    Bottom: {
-        align: { horizontal: Direction.Center, vertical: Direction.Top },
-        targetAlign: {
-            horizontal: Direction.Center,
-            vertical: Direction.Bottom,
-        },
-    },
-    BottomLeft: {
-        align: { horizontal: Direction.Left, vertical: Direction.Top },
-        targetAlign: { horizontal: Direction.Left, vertical: Direction.Bottom },
-    },
-    BottomRight: {
-        align: { horizontal: Direction.Right, vertical: Direction.Top },
-        targetAlign: {
-            horizontal: Direction.Right,
-            vertical: Direction.Bottom,
-        },
-    },
-    Left: {
-        align: { horizontal: Direction.Right, vertical: Direction.Center },
-        targetAlign: { horizontal: Direction.Left, vertical: Direction.Center },
-    },
-    Right: {
-        align: { horizontal: Direction.Left, vertical: Direction.Center },
-        targetAlign: {
-            horizontal: Direction.Right,
-            vertical: Direction.Center,
-        },
-    },
-    Top: {
-        align: { horizontal: Direction.Center, vertical: Direction.Bottom },
-        targetAlign: { horizontal: Direction.Center, vertical: Direction.Top },
-    },
-    TopLeft: {
-        align: { horizontal: Direction.Left, vertical: Direction.Bottom },
-        targetAlign: { horizontal: Direction.Left, vertical: Direction.Top },
-    },
-    TopRight: {
-        align: { horizontal: Direction.Right, vertical: Direction.Bottom },
-        targetAlign: { horizontal: Direction.Right, vertical: Direction.Top },
-    },
-};
-
-export default class PositionLibraryBounding extends LightningElement {
-    static renderMode = 'light';
-
-    @api align = 'Bottom';
-    @api elementBound;
-
-    _autoPosition = null;
-    _current = null;
-    _visible = false;
-
-    changeAlign(e) {
-        this.align = e.target.getAttribute('data-align');
-    }
-
-    toggleElementBound(e) {
-        this.elementBound = e.target.checked;
-    }
-
-    toggle(e) {
-        this.hide();
-        const pos = e.target.getAttribute('data-pos');
-        if (pos !== this._current) {
-            this.show(pos);
-        }
-    }
-
-    show(pos) {
-        this._current = pos;
-        this._visible = true;
-        const target = () => this.querySelector(`[data-pos=${pos}`);
-        const config = BubbleAlign[this.align];
-        this.startPositioning(target, config);
-    }
-
-    hide() {
-        this._current = null;
-        this._visible = false;
-        const bubble = this.querySelector('lightning-primitive-bubble');
-        bubble.visible = this._visible;
-
-        this.stopPositioning();
-    }
-
-    startPositioning(target, config) {
-        if (!this._autoPosition) {
-            this._autoPosition = new AutoPosition(this);
-        }
-
-        this._autoPosition
-            .start({
-                target,
-                element: () => this.querySelector('lightning-primitive-bubble'),
-                autoFlip: true,
-                align: config.align,
-                targetAlign: config.targetAlign,
-                padLeft: config.padLeft,
-                padTop: config.padTop,
-                leftAsBoundary: !!this.elementBound,
-            })
-            .then((autoPositionUpdater) => {
-                const bubble = this.querySelector('lightning-primitive-bubble');
-                bubble.align = autoPositionUpdater.config.align;
-                bubble.visible = this._visible;
-            });
-    }
-
-    stopPositioning() {
-        if (this._autoPosition) {
-            this._autoPosition.stop();
-        }
-    }
-}