@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/image-lightbox/internal/ImageSlideshow.tsx

@@ -1,164 +0,0 @@
-import React from 'react';
-
-import { mdiMagnifyMinusOutline, mdiMagnifyPlusOutline } from '@lumx/icons';
-import { FlexBox, IconButton, Slides, SlideshowControls } from '@lumx/react';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-
-import memoize from 'lodash/memoize';
-import { ImageCaption } from '../../image-block/ImageCaption';
-import { CLASSNAME } from '../constants';
-import type { ImagesProps, InheritedSlideShowProps, ZoomButtonProps } from '../types';
-import { ImageSlide } from './ImageSlide';
-
-export interface ImageSlideshowProps extends InheritedSlideShowProps, ZoomButtonProps, ImagesProps {
-    currentPaginationItemRef?: React.Ref<HTMLButtonElement>;
-    footerRef?: React.Ref<HTMLDivElement>;
-}
-
-/** Internal image slideshow component for ImageLightbox */
-export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
-    activeImageIndex,
-    images,
-    slideGroupLabel,
-    zoomInButtonProps,
-    zoomOutButtonProps,
-    slideshowControlsProps,
-    currentPaginationItemRef,
-    footerRef,
-    activeImageRef,
-}) => {
-    const {
-        activeIndex,
-        slideshowId,
-        setSlideshow,
-        slideshowSlidesId,
-        slidesCount,
-        onNextClick,
-        onPaginationClick,
-        onPreviousClick,
-        toggleAutoPlay,
-    } = SlideshowControls.useSlideshowControls({
-        itemsCount: images.length,
-        activeIndex: activeImageIndex,
-    });
-
-    // Image metadata (caption)
-    const title = images[activeIndex]?.title;
-    const description = images[activeIndex]?.description;
-    const tags = images[activeIndex]?.tags;
-    const metadata =
-        title || description || tags ? (
-            <ImageCaption as="div" title={title} description={description} tags={tags} align="center" />
-        ) : null;
-
-    // Slideshow controls
-    const slideShowControls =
-        slidesCount > 1 && slideshowControlsProps ? (
-            <SlideshowControls
-                activeIndex={activeIndex}
-                slidesCount={slidesCount}
-                onNextClick={onNextClick}
-                onPreviousClick={onPreviousClick}
-                onPaginationClick={onPaginationClick}
-                {...slideshowControlsProps}
-                paginationItemProps={(index: number) => {
-                    const props = slideshowControlsProps?.paginationItemProps?.(index) || {};
-                    return {
-                        ...props,
-                        ref: mergeRefs(
-                            (props as any)?.ref,
-                            // Focus the active pagination item once on mount
-                            activeIndex === index ? currentPaginationItemRef : undefined,
-                        ),
-                    };
-                }}
-            />
-        ) : null;
-
-    // Zoom controls
-    const [scale, setScale] = React.useState<number | undefined>(undefined);
-    const zoomEnabled = zoomInButtonProps && zoomOutButtonProps;
-    const onScaleChange = React.useMemo(() => {
-        if (!zoomEnabled) return undefined;
-        return (newScale: number) => {
-            setScale((prevScale = 1) => Math.max(1, newScale * prevScale));
-        };
-    }, [zoomEnabled]);
-    const zoomIn = React.useCallback(() => onScaleChange?.(1.5), [onScaleChange]);
-    const zoomOut = React.useCallback(() => onScaleChange?.(0.5), [onScaleChange]);
-    React.useEffect(() => {
-        // Reset scale on slide change
-        if (typeof activeIndex === 'number') setScale(undefined);
-    }, [activeIndex]);
-    const zoomControls = zoomEnabled && (
-        <>
-            <IconButton {...zoomInButtonProps} emphasis="low" icon={mdiMagnifyPlusOutline} onClick={zoomIn} />
-            <IconButton
-                {...zoomOutButtonProps}
-                emphasis="low"
-                isDisabled={!scale || scale <= 1}
-                icon={mdiMagnifyMinusOutline}
-                onClick={zoomOut}
-            />
-        </>
-    );
-
-    const getImgRef = React.useMemo(
-        () =>
-            memoize(
-                (index: number, isActive: boolean) => {
-                    return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
-                },
-                // memoize based on both arguments
-                (...args) => args.join(),
-            ),
-        [images, activeImageRef],
-    );
-
-    return (
-        <>
-            <Slides
-                activeIndex={activeIndex}
-                slideGroupLabel={slideGroupLabel}
-                fillHeight
-                id={slideshowId}
-                ref={setSlideshow}
-                slidesId={slideshowSlidesId}
-                toggleAutoPlay={toggleAutoPlay}
-            >
-                {images.map(({ image, imgRef, ...imageProps }, index) => {
-                    const isActive = index === activeIndex;
-                    return (
-                        <ImageSlide
-                            isActive={isActive}
-                            key={image}
-                            image={{
-                                ...imageProps,
-                                image,
-                                imgRef: getImgRef(index, isActive),
-                            }}
-                            scale={isActive ? scale : undefined}
-                            onScaleChange={onScaleChange}
-                        />
-                    );
-                })}
-            </Slides>
-            {(metadata || slideShowControls || zoomControls) && (
-                <FlexBox
-                    ref={footerRef}
-                    className={`${CLASSNAME}__footer`}
-                    orientation="vertical"
-                    vAlign="center"
-                    gap="big"
-                >
-                    {metadata}
-
-                    <FlexBox className={`${CLASSNAME}__footer-actions`} orientation="horizontal" gap="regular">
-                        {slideShowControls}
-                        {zoomControls}
-                    </FlexBox>
-                </FlexBox>
-            )}
-        </>
-    );
-};

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import type { Point, RectSize } from '@lumx/react/utils/type';
-
-/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */
-export function useAnimateScroll(scrollAreaRef: React.RefObject<HTMLDivElement>) {
-    return React.useMemo(() => {
-        let animationFrame: number | null = null;
-
-        return function animate(centerPoint?: Point, initialScrollAreaSize?: RectSize) {
-            const scrollArea = scrollAreaRef.current as HTMLDivElement;
-            if (!scrollArea) {
-                return;
-            }
-
-            // Cancel previously running animation
-            if (animationFrame) cancelAnimationFrame(animationFrame);
-
-            // Center on the given point or else on the scroll area visual center
-            const clientHeightRatio = centerPoint?.y ? centerPoint.y / scrollArea.clientHeight : 0.5;
-            const clientWidthRatio = centerPoint?.x ? centerPoint.x / scrollArea.clientWidth : 0.5;
-
-            const initialScrollHeight = initialScrollAreaSize?.height || scrollArea.scrollHeight;
-            const initialScrollWidth = initialScrollAreaSize?.width || scrollArea.scrollWidth;
-
-            const heightCenter = scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio;
-            const heightRatio = heightCenter / initialScrollHeight;
-
-            const widthCenter = scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio;
-            const widthRatio = widthCenter / initialScrollWidth;
-
-            let prevScrollHeight = 0;
-            let prevScrollWidth = 0;
-
-            function nextFrame() {
-                const { scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollArea;
-
-                // Scroll area stopped expanding => stop animation
-                if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {
-                    animationFrame = null;
-                    return;
-                }
-
-                // Compute next scroll position
-                const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;
-                const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;
-
-                scrollArea.scrollTo({ top, left });
-                prevScrollHeight = scrollHeight;
-                prevScrollWidth = scrollWidth;
-                animationFrame = requestAnimationFrame(nextFrame);
-            }
-            animationFrame = requestAnimationFrame(nextFrame);
-        };
-    }, [scrollAreaRef]);
-}

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.clientX,
-                y: event.clientY,
-            });
-        }
-
-        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,141 +0,0 @@
-import React from 'react';
-
-import memoize from 'lodash/memoize';
-
-import { startViewTransition } from '@lumx/react/utils/browser/DOM/startViewTransition';
-import { findImage } from '@lumx/react/utils/browser/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 props Images to display in the image lightbox
- */
-export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
-    props: 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 propsRef = React.useRef(props);
-
-    React.useEffect(() => {
-        propsRef.current = props;
-    }, [props]);
-
-    // Keep reference for each image elements
-    const imageRefsRef = React.useRef<Array<React.RefObject<HTMLImageElement>>>([]);
-
-    const currentImageRef = React.useRef<HTMLImageElement>(null);
-    const [imageLightboxProps, setImageLightboxProps] = React.useState(
-        () => ({ ...EMPTY_PROPS, ...props }) 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 = imageRefsRef.current.findIndex(
-                (imageRef) => imageRef.current === currentImage,
-            ) as number;
-
-            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 refs to improve transition and loading style
-            const images = propsRef.current?.images?.map((image, idx) => {
-                // Get or create image reference
-                let imgRef = imageRefsRef.current[idx];
-                if (!imgRef) {
-                    imgRef = React.createRef();
-                    imageRefsRef.current[idx] = imgRef;
-                }
-
-                // Try to use the trigger image as the loading placeholder
-                const loadingPlaceholderImageRef =
-                    triggerImage && idx === activeImageIndex ? { current: triggerImage } : undefined;
-
-                return { loadingPlaceholderImageRef, ...image, imgRef };
-            });
-
-            await startViewTransition({
-                changes: () => {
-                    // Open lightbox with setup props
-                    setImageLightboxProps((prevProps) => ({
-                        ...prevProps,
-                        ...propsRef.current,
-                        activeImageRef: currentImageRef,
-                        parentElement: { current: triggerElement },
-                        isOpen: true,
-                        onClose: () => {
-                            close();
-                            propsRef.current?.onClose?.();
-                        },
-                        images,
-                        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/components/inline-list/InlineList.stories.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import { mdiEarth } from '@lumx/icons';
-import { Icon, Text } from '@lumx/react';
-import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
-import { allTypographyArgType } from '@lumx/react/stories/controls/typography';
-import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
-import { InlineList } from '.';
-
-export default {
-    title: 'LumX components/inline-list/InlineList',
-    component: InlineList,
-    argTypes: {
-        typography: allTypographyArgType,
-        color: colorArgType,
-        colorVariant: colorVariantArgType,
-        children: { control: false },
-    },
-};
-
-/**
- * Inline list with three simple text elements
- */
-export const WithElements = {
-    args: {
-        children: [
-            <span key="1">Some text</span>,
-            <span key="2">Some other text</span>,
-            <span key="3">Some other other text</span>,
-        ],
-    },
-};
-
-/**
- * Using color, typography and more complex elements
- */
-export const MixedNoWrapAndTruncate = {
-    args: {
-        typography: 'body1',
-        color: 'dark',
-        colorVariant: 'L2',
-        style: { width: '100%' },
-        children: [
-            <Text key="1" as="span" truncate>
-                Very very very very very long text
-            </Text>,
-            <Text key="2" as="span" noWrap>
-                <Icon icon={mdiEarth} />
-                Some text
-            </Text>,
-            <Text key="3" as="span" truncate>
-                Very very very very very long text
-            </Text>,
-        ],
-    },
-    decorators: [withResizableBox({ width: 400 })],
-};
-
-/**
- * Line wrap on overflow
- */
-export const Wrap = {
-    args: {
-        wrap: true,
-        children: [
-            <Text key="1" as="span">
-                Very very very very very long text
-            </Text>,
-            <Text key="2" as="span">
-                <Icon icon={mdiEarth} />
-                Some text
-            </Text>,
-            <Text key="3" as="span">
-                Very very very very very long text
-            </Text>,
-        ],
-    },
-    decorators: [withResizableBox({ width: 400 })],
-};