@lumx/react 3.8.1-alpha.0 → 3.8.1

package/src/components/image-lightbox/internal/usePointerZoom.ts

@@ -1,148 +0,0 @@
-import React from 'react';
-import type { Point } from '@lumx/react/utils/type';
-import type { useAnimateScroll } from './useAnimateScroll';
-
-/**
- * Listen to mouse wheel + ctrl and multi-pointer pinch to zoom
- */
-export function usePointerZoom(
-    scrollAreaRef: React.RefObject<HTMLDivElement>,
-    onScaleChange: ((value: number) => void) | undefined,
-    animateScroll: ReturnType<typeof useAnimateScroll>,
-) {
-    const [isPointerZooming, setPointerZooming] = React.useState(false);
-    React.useEffect(() => {
-        const scrollArea = scrollAreaRef.current as HTMLDivElement;
-        if (!scrollArea || !onScaleChange) {
-            return undefined;
-        }
-
-        let animationFrame: number | null;
-        let zoomStateTimeoutId: ReturnType<typeof setTimeout> | null;
-
-        function updateScaleOnNextFrame(newScale: number, mousePosition: Point): void {
-            // Cancel previously scheduled frame
-            if (animationFrame) cancelAnimationFrame(animationFrame);
-
-            // Cancel previously scheduled zoom state change
-            if (zoomStateTimeoutId) clearTimeout(zoomStateTimeoutId);
-
-            function nextFrame() {
-                setPointerZooming(true);
-                onScaleChange?.(newScale);
-
-                animationFrame = null;
-                // Wait a bit before indicating the pointer zooming is finished
-                zoomStateTimeoutId = setTimeout(() => setPointerZooming(false), 100);
-            }
-            animationFrame = requestAnimationFrame(nextFrame);
-
-            // Animate scroll in parallel (centering on the current mouse position)
-            animateScroll(mousePosition, {
-                width: scrollArea.scrollWidth,
-                height: scrollArea.scrollHeight,
-            });
-        }
-
-        function onWheel(event: WheelEvent) {
-            if (!event.ctrlKey) {
-                return;
-            }
-            event.preventDefault();
-            const newScale = Math.exp(-event.deltaY / 50);
-
-            // Update scale on next frame (focused on the mouse position)
-            updateScaleOnNextFrame(newScale, {
-                x: event.pageX,
-                y: event.pageY,
-            });
-        }
-
-        const activePointers: Record<PointerEvent['pointerId'], PointerEvent> = {};
-        let prevDistance: number | null = null;
-        let previousCenterPoint: Point | null = null;
-
-        function onPointerDown(event: PointerEvent) {
-            activePointers[event.pointerId] = event;
-        }
-        function onPointerMove(event: PointerEvent) {
-            // Update pointer in cache
-            if (activePointers[event.pointerId]) {
-                activePointers[event.pointerId] = event;
-            }
-
-            const pointers = Object.values(activePointers);
-
-            // Make sure we run computation on one of the pointer in the group
-            if (pointers[0].pointerId !== event.pointerId) {
-                return;
-            }
-
-            // Centered point between all pointers
-            const centerPoint: Point = {
-                x: pointers.reduce((x, { clientX }) => x + clientX, 0) / pointers.length,
-                y: pointers.reduce((y, { clientY }) => y + clientY, 0) / pointers.length,
-            };
-
-            // Movement of the center point
-            const deltaCenterPoint = previousCenterPoint && {
-                left: previousCenterPoint.x - centerPoint.x,
-                top: previousCenterPoint.y - centerPoint.y,
-            };
-
-            // Pan X & Y
-            if (deltaCenterPoint) {
-                // Apply movement of the center point to the scroll
-                scrollArea.scrollBy({
-                    top: deltaCenterPoint.top / 2,
-                    left: deltaCenterPoint.left / 2,
-                });
-            }
-
-            // Pinch to zoom
-            if (pointers.length === 2) {
-                const [pointer1, pointer2] = pointers;
-                const distance = Math.hypot(pointer2.clientX - pointer1.clientX, pointer2.clientY - pointer1.clientY);
-
-                if (prevDistance && deltaCenterPoint) {
-                    const delta = prevDistance - distance;
-                    const absDelta = Math.abs(delta);
-
-                    // Zoom only if we are "pinching" more than we are moving the pointers
-                    if (absDelta > Math.abs(deltaCenterPoint.left) && absDelta > Math.abs(deltaCenterPoint.top)) {
-                        // Update scale on next frame (focused on the center point between the two pointers)
-                        const newScale = Math.exp(-delta / 100);
-                        updateScaleOnNextFrame(newScale, centerPoint);
-                    }
-                }
-
-                prevDistance = distance;
-            }
-
-            previousCenterPoint = centerPoint;
-        }
-        function onPointerUp(event: PointerEvent) {
-            prevDistance = null;
-            previousCenterPoint = null;
-            delete activePointers[event.pointerId];
-        }
-
-        scrollArea.addEventListener('wheel', onWheel, { passive: false });
-        const isMultiTouch = navigator.maxTouchPoints >= 2;
-        if (isMultiTouch) {
-            scrollArea.addEventListener('pointerdown', onPointerDown);
-            scrollArea.addEventListener('pointermove', onPointerMove);
-            scrollArea.addEventListener('pointerup', onPointerUp);
-        }
-        return () => {
-            scrollArea.removeEventListener('wheel', onWheel);
-            if (isMultiTouch) {
-                scrollArea.removeEventListener('pointerdown', onPointerDown);
-                scrollArea.removeEventListener('pointermove', onPointerMove);
-                scrollArea.removeEventListener('pointerup', onPointerUp);
-            }
-        };
-    }, [animateScroll, onScaleChange, scrollAreaRef]);
-
-    return isPointerZooming;
-}

package/src/components/image-lightbox/types.ts

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import type { IconButtonProps, LightboxProps, SlideshowProps, ThumbnailProps } from '@lumx/react';
-import type { HasClassName } from '@lumx/react/utils/type';
-import type { ImageCaptionMetadata } from '@lumx/react/components/image-block/ImageCaption';
-
-export type InheritedSlideShowProps = Pick<SlideshowProps, 'slideshowControlsProps' | 'slideGroupLabel'>;
-
-export interface ZoomButtonProps {
-    /** Zoom in button props */
-    zoomInButtonProps?: IconButtonProps;
-    /** Zoom out button props */
-    zoomOutButtonProps?: IconButtonProps;
-}
-
-export type InheritedThumbnailProps = Pick<
-    ThumbnailProps,
-    'image' | 'alt' | 'imgProps' | 'imgRef' | 'loadingPlaceholderImageRef'
->;
-
-export type InheritedImageMetadata = Pick<ImageCaptionMetadata, 'title' | 'description' | 'tags'>;
-
-export type ImageProps = InheritedThumbnailProps & InheritedImageMetadata;
-
-export interface ImagesProps {
-    /** Index of the active image to show on open */
-    activeImageIndex?: number;
-    /** List of images to display */
-    images: Array<ImageProps>;
-    /** Ref of the active image when the lightbox is open */
-    activeImageRef?: React.Ref<HTMLImageElement>;
-}
-
-export type InheritedLightboxProps = Pick<
-    LightboxProps,
-    'isOpen' | 'parentElement' | 'onClose' | 'closeButtonProps' | 'aria-label' | 'aria-labelledby'
->;
-
-export type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
-
-/**
- * ImageLightbox component props
- */
-export interface ImageLightboxProps
-    extends HasClassName,
-        ZoomButtonProps,
-        ImagesProps,
-        InheritedSlideShowProps,
-        InheritedLightboxProps,
-        ForwardedProps {}

package/src/components/image-lightbox/useImageLightbox.tsx

@@ -1,130 +0,0 @@
-import React from 'react';
-
-import memoize from 'lodash/memoize';
-
-import { startViewTransition } from '@lumx/react/utils/DOM/startViewTransition';
-import { findImage } from '@lumx/react/utils/DOM/findImage';
-
-import type { ImageLightboxProps } from './types';
-import { CLASSNAME } from './constants';
-
-/** Subset of the ImageLightboxProps managed by the useImageLightbox hook */
-type ManagedProps = Pick<
-    ImageLightboxProps,
-    'isOpen' | 'images' | 'parentElement' | 'activeImageRef' | 'onClose' | 'activeImageIndex'
->;
-
-const EMPTY_PROPS: ManagedProps = { isOpen: false, images: [], parentElement: React.createRef() };
-
-type TriggerOptions = Pick<ImageLightboxProps, 'activeImageIndex'>;
-
-/**
- * Set up an ImageLightbox with images and triggers.
- *
- * - Associate a trigger with the lightbox to properly focus the trigger on close
- * - Associate a trigger with an image to display on open
- * - Automatically provide a view transition between an image trigger and the displayed image on open & close
- *
- * @param initialProps Images to display in the image lightbox
- */
-export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
-    initialProps: P,
-): {
-    /**
-     * Generates trigger props
-     * @param index Provide an index to choose which image to display when the image lightbox opens.
-     * */
-    getTriggerProps: (options?: TriggerOptions) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
-    /** Props to forward to the ImageLightbox */
-    imageLightboxProps: ManagedProps & P;
-} {
-    const { images = [], ...otherProps } = initialProps;
-
-    const imagesPropsRef = React.useRef(images);
-    React.useEffect(() => {
-        imagesPropsRef.current = images.map((props) => ({ imgRef: React.createRef(), ...props }));
-    }, [images]);
-
-    const currentImageRef = React.useRef<HTMLImageElement>(null);
-    const [imageLightboxProps, setImageLightboxProps] = React.useState(
-        () => ({ ...EMPTY_PROPS, ...otherProps }) as ManagedProps & P,
-    );
-
-    const getTriggerProps = React.useMemo(() => {
-        const triggerImageRefs: Record<number, React.RefObject<HTMLImageElement>> = {};
-
-        async function close() {
-            const currentImage = currentImageRef.current;
-            if (!currentImage) {
-                return;
-            }
-            const currentIndex = imagesPropsRef.current.findIndex(
-                ({ imgRef }) => (imgRef as any)?.current === currentImage,
-            );
-
-            await startViewTransition({
-                changes() {
-                    // Close lightbox
-                    setImageLightboxProps((prevProps) => ({ ...prevProps, isOpen: false }));
-                },
-                // Morph from the image in lightbox to the image in trigger
-                viewTransitionName: {
-                    source: currentImageRef,
-                    target: triggerImageRefs[currentIndex],
-                    name: CLASSNAME,
-                },
-            });
-        }
-
-        async function open(triggerElement: HTMLElement, { activeImageIndex }: TriggerOptions = {}) {
-            // If we find an image inside the trigger, animate it in transition with the opening image
-            const triggerImage = triggerImageRefs[activeImageIndex as any]?.current || findImage(triggerElement);
-
-            // Inject the trigger image as loading placeholder for better loading state
-            const imagesWithFallbackSize = imagesPropsRef.current.map((image, idx) => {
-                if (triggerImage && idx === activeImageIndex && !image.loadingPlaceholderImageRef) {
-                    return { ...image, loadingPlaceholderImageRef: { current: triggerImage } };
-                }
-                return image;
-            });
-
-            await startViewTransition({
-                changes: () => {
-                    // Open lightbox with setup props
-                    setImageLightboxProps((prevProps) => ({
-                        ...prevProps,
-                        activeImageRef: currentImageRef,
-                        parentElement: { current: triggerElement },
-                        isOpen: true,
-                        onClose: () => {
-                            close();
-                            prevProps?.onClose?.();
-                        },
-                        images: imagesWithFallbackSize,
-                        activeImageIndex: activeImageIndex || 0,
-                    }));
-                },
-                // Morph from the image in trigger to the image in lightbox
-                viewTransitionName: {
-                    source: triggerImage,
-                    target: currentImageRef,
-                    name: CLASSNAME,
-                },
-            });
-        }
-
-        return memoize((options?: TriggerOptions) => ({
-            ref(element: HTMLElement | null) {
-                // Track trigger image ref if any
-                if (options?.activeImageIndex !== undefined && element) {
-                    triggerImageRefs[options.activeImageIndex] = { current: findImage(element) };
-                }
-            },
-            onClick(e: React.MouseEvent) {
-                open(e.target as HTMLElement, options);
-            },
-        }));
-    }, []);
-
-    return { getTriggerProps, imageLightboxProps };
-}

package/src/hooks/useElementSizeDependentOfWindowSize.ts

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import throttle from 'lodash/throttle';
-import { RectSize } from '@lumx/react/utils/type';
-
-/**
- * Observe element size (only works if it's size depends on the window size).
- *
- * (Not using ResizeObserver for better browser backward compat)
- *
- * @param elementRef Element to observe
- * @return the size and a manual update callback
- */
-export function useElementSizeDependentOfWindowSize(
-    elementRef: React.RefObject<HTMLElement>,
-): [RectSize | null, () => void] {
-    const [size, setSize] = React.useState<null | RectSize>(null);
-    const updateSize = React.useMemo(
-        () =>
-            throttle(() => {
-                const newSize = elementRef.current?.getBoundingClientRect();
-                if (newSize) setSize(newSize);
-            }, 10),
-        [elementRef],
-    );
-    React.useEffect(() => {
-        updateSize();
-        window.addEventListener('resize', updateSize);
-        return () => window.removeEventListener('resize', updateSize);
-    }, [updateSize]);
-    return [size, updateSize];
-}

package/src/hooks/useImageSize.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { RectSize } from '@lumx/react/utils/type';
-
-/** Get natural image size after load. */
-export function useImageSize(imgRef: React.RefObject<HTMLImageElement>, getInitialSize?: () => RectSize | null) {
-    const [imageSize, setImageSize] = React.useState<null | RectSize>(getInitialSize || null);
-    React.useEffect(() => {
-        const { current: img } = imgRef;
-        if (!img) {
-            return undefined;
-        }
-        const onLoad = () => setImageSize({ width: img.naturalWidth, height: img.naturalHeight });
-        img.addEventListener('load', onLoad);
-        return () => img.removeEventListener('load', onLoad);
-    }, [imgRef]);
-    return imageSize;
-}

package/src/stories/generated/ImageLightbox/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/image-lightbox/ImageLightbox Demos' };
-
-export { App as Default } from './default';

package/src/utils/DOM/findImage.tsx

@@ -1,3 +0,0 @@
-/** Find image in element including the element */
-export const findImage = (element: HTMLElement | null): HTMLImageElement | null =>
-    element?.matches('img') ? (element as HTMLImageElement) : element?.querySelector('img') || null;

package/src/utils/DOM/startViewTransition.ts

@@ -1,56 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/** 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

@@ -1,7 +0,0 @@
-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;
-}