@lumx/react 3.8.1 → 3.8.2-alpha.1

package/src/utils/DOM/startViewTransition.ts

@@ -0,0 +1,56 @@
+import ReactDOM from 'react-dom';
+
+import { MaybeElementOrRef } from '@lumx/react/utils/type';
+
+import { unref } from '../react/unref';
+import { getPrefersReducedMotion } from '../browser/getPrefersReducedMotion';
+
+function setTransitionViewName(elementRef: MaybeElementOrRef<HTMLElement>, name: string | null | undefined) {
+    const element = unref(elementRef) as any;
+    if (element) element.style.viewTransitionName = name;
+}
+
+/**
+ * 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 = getPrefersReducedMotion();
+    const { flushSync } = ReactDOM as any;
+    if (prefersReducedMotion || !start || !flushSync || !viewTransitionName?.source || !viewTransitionName?.target) {
+        // Skip, apply changes without a transition
+        changes();
+        return;
+    }
+
+    // Set transition name on source element
+    setTransitionViewName(viewTransitionName.source, viewTransitionName.name);
+
+    // Start view transition, apply changes & flush to DOM
+    await start(() => {
+        // Un-set transition name on source element
+        setTransitionViewName(viewTransitionName.source, null);
+
+        flushSync(changes);
+
+        // Set transition name on target element
+        setTransitionViewName(viewTransitionName.target, viewTransitionName.name);
+    }).updateCallbackDone;
+
+    // Un-set transition name on target element
+    setTransitionViewName(viewTransitionName.target, null);
+}

package/src/utils/browser/getPrefersReducedMotion.ts

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

package/src/utils/object/isEqual.test.ts

@@ -0,0 +1,25 @@
+import { isEqual } from './isEqual';
+
+test(isEqual.name, () => {
+    expect(isEqual('', '')).toBe(true);
+    expect(isEqual(0, 0)).toBe(true);
+    expect(isEqual(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY)).toBe(true);
+
+    expect(isEqual('', 0)).toBe(false);
+
+    expect(isEqual({}, {})).toBe(true);
+    expect(isEqual({ a: 1 }, { a: 1 })).toBe(true);
+    expect(isEqual({ a: { a: 1 } }, { a: { a: 1 } })).toBe(true);
+
+    expect(isEqual([], [])).toBe(true);
+
+    expect(isEqual([1], [2])).toBe(false);
+    expect(isEqual([1], [1, 2])).toBe(false);
+    expect(isEqual([1, 2], [2, 1])).toBe(false);
+
+    expect(isEqual({ a: 1 }, { a: 2 })).toBe(false);
+    expect(isEqual({ a: 1 }, {})).toBe(false);
+    expect(isEqual({}, { a: 1 })).toBe(false);
+    expect(isEqual({ a: { a: 1 } }, { a: { a: 2 } })).toBe(false);
+    expect(isEqual({ a: 1 }, { a: 1, b: 1 })).toBe(false);
+});

package/src/utils/object/isEqual.ts

@@ -0,0 +1,11 @@
+/** Minimal recursive deep equal of JS values */
+export function isEqual(obj1: any, obj2: any): boolean {
+    if (obj1 === obj2) return true;
+    if (typeof obj1 === 'object' && typeof obj2 === 'object') {
+        const keys1 = Object.keys(obj1);
+        const keys2 = Object.keys(obj2);
+        if (keys1.length !== keys2.length) return false;
+        return keys1.every((key1) => isEqual(obj1[key1], obj2[key1]));
+    }
+    return false;
+}

package/src/utils/react/unref.ts

@@ -0,0 +1,7 @@
+import { MaybeElementOrRef } from '@lumx/react/utils/type';
+
+/** Unref a react ref or element */
+export function unref(maybeElement: MaybeElementOrRef<HTMLElement>) {
+    if (maybeElement instanceof HTMLElement) return maybeElement;
+    return maybeElement?.current;
+}

package/src/utils/type.ts

@@ -139,3 +139,18 @@ export type ComponentRef<C> = C extends keyof JSX.IntrinsicElements
       : C extends React.JSXElementConstructor<{ ref?: infer R }>
         ? R
         : never;
+
+/**
+ * Rectangle size
+ */
+export type RectSize = { width: number; height: number };
+
+/**
+ * Maybe a HTMLElement or a React ref of a HTMLElement
+ */
+export type MaybeElementOrRef<E extends HTMLElement> = E | React.RefObject<E | null> | null | undefined;
+
+/**
+ * A point coordinate in 2D space
+ */
+export type Point = { x: number; y: number };