@lumx/react 3.20.1-alpha.1 → 3.20.1-alpha.11

package/src/utils/browser/DOM/startViewTransition.ts

@@ -1,68 +0,0 @@
-import ReactDOM from 'react-dom';
-
-import { MaybeElementOrRef } from '@lumx/react/utils/type';
-
-import { unref } from '../../react/unref';
-import { isReducedMotion } from '../isReducedMotion';
-
-function setupViewTransitionName(elementRef: MaybeElementOrRef<HTMLElement>, name: string) {
-    let originalName: string | null = null;
-    return {
-        set() {
-            const element = unref(elementRef);
-            if (!element) return;
-            originalName = element.style.viewTransitionName;
-            element.style.viewTransitionName = name;
-        },
-        unset() {
-            const element = unref(elementRef);
-            if (!element || originalName === null) return;
-            element.style.viewTransitionName = originalName;
-        },
-    };
-}
-
-/**
- * Wrapper around the `document.startViewTransition` handling browser incompatibilities, react DOM flush and
- * user preference.
- *
- * @param changes                callback containing the changes to apply within the view transition.
- * @param setViewTransitionName  set the `viewTransitionName` style on a `source` & `target` to morph these elements.
- */
-export async function startViewTransition({
-    changes,
-    viewTransitionName,
-}: {
-    changes: () => void;
-    viewTransitionName: {
-        source: MaybeElementOrRef<HTMLElement>;
-        target: MaybeElementOrRef<HTMLElement>;
-        name: string;
-    };
-}) {
-    const start = (document as any)?.startViewTransition?.bind(document);
-    const prefersReducedMotion = isReducedMotion();
-    const { flushSync } = ReactDOM as any;
-    if (prefersReducedMotion || !start || !flushSync || !viewTransitionName?.source || !viewTransitionName?.target) {
-        // Skip, apply changes without a transition
-        changes();
-        return;
-    }
-
-    // Setup set/unset transition name on source & target
-    const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);
-    const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);
-
-    sourceTransitionName.set();
-
-    // Start view transition, apply changes & flush to DOM
-    await start(() => {
-        sourceTransitionName.unset();
-
-        flushSync(changes);
-
-        targetTransitionName.set();
-    }).updateCallbackDone;
-
-    targetTransitionName.unset();
-}

package/src/utils/browser/focus/constants.ts

@@ -1,7 +0,0 @@
-/** CSS selector listing all tabbable elements. */
-export const TABBABLE_ELEMENTS_SELECTOR =
-    'a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]';
-
-/** CSS selector matching element that are disabled (should not receive focus). */
-export const DISABLED_SELECTOR =
-    '[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])';

package/src/utils/browser/focus/getFirstAndLastFocusable.test.ts

@@ -1,134 +0,0 @@
-import { getFirstAndLastFocusable } from './getFirstAndLastFocusable';
-
-function htmlToElement(html: string): any {
-    const template = document.createElement('template');
-    template.innerHTML = html.trim();
-    return template.content.firstChild;
-}
-
-describe(getFirstAndLastFocusable.name, () => {
-    it('should get empty', () => {
-        const element = htmlToElement('<div></div>');
-        const focusable = getFirstAndLastFocusable(element);
-        expect(focusable).toEqual({});
-    });
-
-    it('should get single item', () => {
-        const element = htmlToElement('<div><button /></div>');
-        const focusable = getFirstAndLastFocusable(element);
-        expect(focusable.last).toBe(focusable.first);
-    });
-
-    it('should get first and last', () => {
-        const element = htmlToElement(`
-            <div>
-                <div>Non focusable div</div>
-                <button>Simple button</button>
-                <div>Non focusable div</div>
-                <input />
-                <div>Non focusable div</div>
-            </div>
-        `);
-        const focusable = getFirstAndLastFocusable(element);
-        expect(focusable.first).toMatchInlineSnapshot(`
-            <button>
-              Simple button
-            </button>
-        `);
-        expect(focusable.first).toMatchInlineSnapshot(`
-            <button>
-              Simple button
-            </button>
-        `);
-    });
-
-    describe('match focusable elements', () => {
-        it('should match input element', () => {
-            const element = htmlToElement('<div><input /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot('<input />');
-        });
-
-        it('should match link element', () => {
-            const element = htmlToElement('<div><a href="#" /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`
-                <a
-                  href="#"
-                />
-            `);
-        });
-
-        it('should match textarea element', () => {
-            const element = htmlToElement('<div><textarea /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`
-                <textarea>
-                  &lt;/div&gt;
-                </textarea>
-            `);
-        });
-
-        it('should match element with tabindex', () => {
-            const element = htmlToElement('<div><span tabindex="0" /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`
-                <span
-                  tabindex="0"
-                />
-            `);
-        });
-
-        it('should keep disabled=false', () => {
-            const element = htmlToElement('<div><button disabled="false" /><button /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`
-                <button
-                  disabled="false"
-                />
-            `);
-        });
-
-        it('should keep aria-disabled=false', () => {
-            const element = htmlToElement('<div><button aria-disabled="false" /><button /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`
-                <button
-                  aria-disabled="false"
-                />
-            `);
-        });
-    });
-
-    describe('skip disabled elements', () => {
-        it('should skip disabled', () => {
-            const element = htmlToElement('<div><button disabled /><button /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot('<button />');
-        });
-
-        it('should skip aria-disabled', () => {
-            const element = htmlToElement('<div><button aria-disabled /><button /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot('<button />');
-        });
-
-        it('should skip tabindex=-1', () => {
-            const element = htmlToElement('<div><button tabindex="-1" /><button /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot('<button />');
-        });
-
-        it('should skip input type hidden', () => {
-            const element = htmlToElement('<div><input type="hidden" /><button /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot('<button />');
-        });
-
-        it('should skip hidden input', () => {
-            const element = htmlToElement('<div><input hidden /><button /></div>');
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot('<button />');
-        });
-    });
-});

package/src/utils/browser/focus/getFirstAndLastFocusable.ts

@@ -1,21 +0,0 @@
-import { getFocusableElements } from './getFocusableElements';
-
-/**
- * Get first and last elements focusable in an element.
- *
- * @param parentElement The element in which to search focusable elements.
- * @return first and last focusable elements
- */
-export function getFirstAndLastFocusable(parentElement: HTMLElement | ShadowRoot) {
-    const focusableElements = getFocusableElements(parentElement);
-
-    // First non disabled element.
-    const first = focusableElements[0];
-    // Last non disabled element.
-    const last = focusableElements[focusableElements.length - 1];
-
-    if (last && first) {
-        return { first, last };
-    }
-    return {};
-}

package/src/utils/browser/focus/getFocusableElements.test.ts

@@ -1,151 +0,0 @@
-import { getFocusableElements } from './getFocusableElements';
-
-function htmlToElement(html: string): any {
-    const template = document.createElement('template');
-    template.innerHTML = html.trim();
-    return template.content.firstChild;
-}
-
-describe(getFocusableElements.name, () => {
-    it('should get empty', () => {
-        const element = htmlToElement('<div></div>');
-        const focusable = getFocusableElements(element);
-        expect(focusable).toEqual([]);
-    });
-
-    it('should get single item', () => {
-        const element = htmlToElement('<div><button /></div>');
-        const focusable = getFocusableElements(element);
-        expect(focusable).toMatchInlineSnapshot(`
-            [
-              <button />,
-            ]
-        `);
-    });
-
-    describe('match focusable elements', () => {
-        it('should match input element', () => {
-            const element = htmlToElement('<div><input /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <input />,
-                ]
-            `);
-        });
-
-        it('should match link element', () => {
-            const element = htmlToElement('<div><a href="#" /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <a
-                    href="#"
-                  />,
-                ]
-            `);
-        });
-
-        it('should match textarea element', () => {
-            const element = htmlToElement('<div><textarea /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <textarea>
-                    &lt;/div&gt;
-                  </textarea>,
-                ]
-            `);
-        });
-
-        it('should match element with tabindex', () => {
-            const element = htmlToElement('<div><span tabindex="0" /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <span
-                    tabindex="0"
-                  />,
-                ]
-            `);
-        });
-
-        it('should keep disabled=false', () => {
-            const element = htmlToElement('<div><button disabled="false" /><button /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <button
-                    disabled="false"
-                  />,
-                  <button />,
-                ]
-            `);
-        });
-
-        it('should keep aria-disabled=false', () => {
-            const element = htmlToElement('<div><button aria-disabled="false" /><button /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <button
-                    aria-disabled="false"
-                  />,
-                  <button />,
-                ]
-            `);
-        });
-    });
-
-    describe('skip disabled elements', () => {
-        it('should skip disabled', () => {
-            const element = htmlToElement('<div><button disabled /><button /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <button />,
-                ]
-            `);
-        });
-
-        it('should skip aria-disabled', () => {
-            const element = htmlToElement('<div><button aria-disabled /><button /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <button />,
-                ]
-            `);
-        });
-
-        it('should skip tabindex=-1', () => {
-            const element = htmlToElement('<div><button tabindex="-1" /><button /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <button />,
-                ]
-            `);
-        });
-
-        it('should skip input type hidden', () => {
-            const element = htmlToElement('<div><input type="hidden" /><button /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <button />,
-                ]
-            `);
-        });
-
-        it('should skip hidden input', () => {
-            const element = htmlToElement('<div><input hidden /><button /></div>');
-            const focusable = getFocusableElements(element);
-            expect(focusable).toMatchInlineSnapshot(`
-                [
-                  <button />,
-                ]
-            `);
-        });
-    });
-});

package/src/utils/browser/focus/getFocusableElements.ts

@@ -1,7 +0,0 @@
-import { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR } from './constants';
-
-const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
-
-export function getFocusableElements(element: HTMLElement | ShadowRoot): HTMLElement[] {
-    return Array.from(element.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
-}

package/src/utils/browser/isFocusVisible.ts

@@ -1,9 +0,0 @@
-/** Check if the focus is visible on the given element */
-export const isFocusVisible = (element?: HTMLElement) => {
-    try {
-        return element?.matches?.(':focus-visible, [data-focus-visible-added]');
-    } catch (_ignored) {
-        // Can fail on non browser env
-        return true;
-    }
-};

package/src/utils/browser/isHoverNotSupported.test.js

@@ -1,24 +0,0 @@
-import { isHoverNotSupported } from './isHoverNotSupported';
-
-const originalMatchMedia = global.matchMedia;
-
-describe('isHoverNotSupported', () => {
-    afterAll(() => {
-        global.matchMedia = originalMatchMedia;
-    });
-
-    it('should return `false` on browsers that do not support matchMedia', () => {
-        global.matchMedia = undefined;
-        expect(isHoverNotSupported()).toBe(false);
-    });
-
-    it('should return `false` on browsers that support matchMedia and does support hover', () => {
-        global.matchMedia = () => ({ matches: false });
-        expect(isHoverNotSupported()).toBe(false);
-    });
-
-    it('should return `true` on browsers that support matchMedia and does not support hover', () => {
-        global.matchMedia = () => ({ matches: true });
-        expect(isHoverNotSupported()).toBe(true);
-    });
-});

package/src/utils/browser/isHoverNotSupported.ts

@@ -1,2 +0,0 @@
-/** Return true if the browser does not support pointer hover */
-export const isHoverNotSupported = (): boolean => !!window.matchMedia?.('(hover: none)').matches;

package/src/utils/browser/isReducedMotion.ts

@@ -1,6 +0,0 @@
-import { WINDOW } from '@lumx/react/constants';
-
-/** Check if user prefers reduced motion */
-export function isReducedMotion() {
-    return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-}

package/src/utils/date/addMonthResetDay.test.ts

@@ -1,13 +0,0 @@
-import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
-
-describe(addMonthResetDay.name, () => {
-    it('should add month to date', () => {
-        const actual = addMonthResetDay(new Date('2017-01-30'), 1);
-        expect(actual).toEqual(new Date('2017-02-01'));
-    });
-
-    it('should remove months to date', () => {
-        const actual = addMonthResetDay(new Date('2017-01-30'), -2);
-        expect(actual).toEqual(new Date('2016-11-01'));
-    });
-});

package/src/utils/date/addMonthResetDay.ts

@@ -1,9 +0,0 @@
-/**
- * Add a number of months from a date while resetting the day to prevent month length mismatches.
- */
-export function addMonthResetDay(date: Date, monthOffset: number) {
-    const newDate = new Date(date.getTime());
-    newDate.setDate(1);
-    newDate.setMonth(date.getMonth() + monthOffset);
-    return newDate;
-}

package/src/utils/date/formatDayNumber.test.ts

@@ -1,12 +0,0 @@
-import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
-
-describe(formatDayNumber, () => {
-    it('should format ', () => {
-        // Standard numerical formatting.
-        expect(formatDayNumber('en', new Date('2024-05-11'))).toEqual('11');
-        // Keep only the numerical part (if any). Raw formatted day number here is '11日'.
-        expect(formatDayNumber('ja', new Date('2024-05-11'))).toEqual('11');
-        // Else Keep the non-numerical formatting
-        expect(formatDayNumber('ar-eg', new Date('2024-05-11'))).toEqual('١١');
-    });
-});

package/src/utils/date/formatDayNumber.ts

@@ -1,5 +0,0 @@
-export function formatDayNumber(locale: string, date: Date): string {
-    const formattedDate = date.toLocaleDateString(locale, { day: 'numeric' });
-    if (formattedDate.match(/\d/)) return formattedDate.replace(/\D*(\d+)\D*/g, '$1');
-    return formattedDate;
-}

package/src/utils/date/getFirstDayOfWeek.test.ts

@@ -1,20 +0,0 @@
-import { Locale } from '@lumx/react/utils/locale/types';
-import { parseLocale } from '../locale/parseLocale';
-import { getFirstDayOfWeek } from './getFirstDayOfWeek';
-
-describe(getFirstDayOfWeek.name, () => {
-    it('should return for a valid locales', () => {
-        expect(getFirstDayOfWeek(parseLocale('fa-ir') as Locale)).toBe(6);
-        expect(getFirstDayOfWeek(parseLocale('ar-ma') as Locale)).toBe(1);
-        expect(getFirstDayOfWeek(parseLocale('ar') as Locale)).toBe(6);
-        expect(getFirstDayOfWeek(parseLocale('en') as Locale)).toBe(0);
-    });
-
-    it('should return for the lang locale if available', () => {
-        // Test for a specific locale and its root locale
-        const localeWithRoot = parseLocale('es-ES') as Locale; // Spanish (Spain) with root locale es
-        const expectedFirstDay = getFirstDayOfWeek(parseLocale('es') as Locale); // First day for root locale 'es'
-
-        expect(getFirstDayOfWeek(localeWithRoot)).toBe(expectedFirstDay);
-    });
-});

package/src/utils/date/getFirstDayOfWeek.ts

@@ -1,59 +0,0 @@
-import { Locale } from '@lumx/react/utils/locale/types';
-
-/** Get first day of week for locale from the browser API */
-export const getFromBrowser = (locale: Locale): number | undefined => {
-    try {
-        const localeMetadata = new Intl.Locale(locale.code) as any;
-        const { firstDay } = localeMetadata.getWeekInfo?.() || localeMetadata.weekInfo;
-        // Sunday is represented as `0` in Date.getDay()
-        if (firstDay === 7) return 0;
-        return firstDay;
-    } catch (e) {
-        return undefined;
-    }
-};
-
-/** List first day for each locale (could be removed when all browser implement Locale weekInfo) */
-const FIRST_DAY_FOR_LOCALES = [
-    {
-        // Locales with Sunday as the first day of the week
-        localeRX: /^(af|ar-(dz|eg|sa)|bn|cy|en-(ca|us|za)|fr-ca|gd|he|hi|ja|km|ko|pt-br|te|th|ug|zh-hk)$/i,
-        firstDay: 0,
-    },
-    {
-        // Locales with Monday as the first day of the week
-        localeRX:
-            /^(ar-(ma|tn)|az|be|bg|bs|ca|cs|da|de|el|en-(au|gb|ie|in|nz)|eo|es|et|eu|fi|fr|fy|gl|gu|hr|ht|hu|hy|id|is|it|ka|kk|kn|lb|lt|lv|mk|mn|ms|mt|nb|nl|nn|oc|pl|pt|ro|ru|sk|sl|sq|sr|sv|ta|tr|uk|uz|vi|zh-(cn|tw))$/i,
-        firstDay: 1,
-    },
-    {
-        // Locales with Saturday as the first day of the week
-        localeRX: /^(ar|fa-ir)$/i,
-        firstDay: 6,
-    },
-];
-
-/** Find first day of week for locale from the constant */
-const getFromConstant = (locale: Locale, searchBy: keyof Locale = 'code'): number | undefined => {
-    // Search for locale (lang + region)
-    for (const { localeRX, firstDay } of FIRST_DAY_FOR_LOCALES) {
-        if (localeRX.test(locale[searchBy] as string)) return firstDay;
-    }
-    // Fallback search for locale lang
-    if (locale.code !== locale.language) {
-        return getFromConstant(locale, 'language');
-    }
-    return undefined;
-};
-
-/**
- * Get first day of the week for the given locale code (language + region).
- */
-export const getFirstDayOfWeek = (locale: Locale): number | undefined => {
-    // Get from browser API
-    const firstDay = getFromBrowser(locale);
-    if (firstDay !== undefined) return firstDay;
-
-    // Get from constant
-    return getFromConstant(locale);
-};