@lumx/react 3.8.1-alpha.0 → 3.8.1

package/src/components/image-lightbox/ImageLightbox.test.tsx

@@ -1,253 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, within, screen } from '@testing-library/react';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event';
-import { useImageSize } from '@lumx/react/hooks/useImageSize';
-import { useElementSizeDependentOfWindowSize } from '@lumx/react/hooks/useElementSizeDependentOfWindowSize';
-
-import { ImageLightbox } from './ImageLightbox';
-import { ImageLightboxProps } from './types';
-import Meta, {
-    MultipleImages,
-    MultipleImagesWithZoom,
-    SingleImage,
-    SingleImageWithZoom,
-    WithButtonTrigger,
-    WithMosaicTrigger,
-} from './ImageLightbox.stories';
-
-jest.mock('@lumx/react/hooks/useImageSize');
-jest.mock('@lumx/react/hooks/useElementSizeDependentOfWindowSize');
-
-const CLASSNAME = ImageLightbox.className as string;
-const baseProps = Meta.args;
-
-const setup = (overrides: Partial<ImageLightboxProps> = {}) => {
-    const props: any = {
-        ...baseProps,
-        isOpen: true,
-        images: [],
-        ...overrides,
-    };
-    const result = render(<ImageLightbox {...props} />);
-    const rerender = () => result.rerender(<ImageLightbox {...props} />);
-    const imageLightbox = queryByClassName(document.body, CLASSNAME);
-    return { props, imageLightbox, rerender };
-};
-
-const queries = {
-    getImageLightbox: () => getByClassName(document.body, CLASSNAME),
-    queryCloseButton: (imageLightbox: HTMLElement) => within(imageLightbox).queryByRole('button', { name: 'Close' }),
-    queryImage: (imageLightbox: HTMLElement, name?: string) => within(imageLightbox).queryByRole('img', { name }),
-    queryScrollArea: (imageLightbox: HTMLElement) =>
-        queryByClassName(imageLightbox, 'lumx-image-lightbox__image-slide'),
-    queryZoomInButton: (imageLightbox: HTMLElement) => within(imageLightbox).queryByRole('button', { name: 'Zoom in' }),
-    queryZoomOutButton: (imageLightbox: HTMLElement) =>
-        within(imageLightbox).queryByRole('button', { name: 'Zoom out' }),
-    queryPrevSlideButton: (imageLightbox: HTMLElement) =>
-        within(imageLightbox).queryByRole('button', { name: 'Previous' }),
-    queryNextSlideButton: (imageLightbox: HTMLElement) => within(imageLightbox).queryByRole('button', { name: 'Next' }),
-    querySlideButton: (imageLightbox: HTMLElement, slide: number) =>
-        within(imageLightbox).queryByRole('tab', { name: `Go to slide ${slide}` }),
-};
-
-describe(`<${ImageLightbox.displayName}>`, () => {
-    beforeEach(() => {
-        (useImageSize as any).mockReturnValue(null);
-        (useElementSizeDependentOfWindowSize as any).mockReturnValue([null, jest.fn()]);
-    });
-
-    describe('render', () => {
-        it('should render single image', () => {
-            setup(SingleImage.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Should render
-            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
-
-            // Should not render
-            expect(queries.queryZoomInButton(imageLightbox)).not.toBeInTheDocument();
-            expect(queries.queryZoomOutButton(imageLightbox)).not.toBeInTheDocument();
-            expect(queries.queryPrevSlideButton(imageLightbox)).not.toBeInTheDocument();
-            expect(queries.queryNextSlideButton(imageLightbox)).not.toBeInTheDocument();
-        });
-
-        it('should render single image with zoom', () => {
-            setup(SingleImageWithZoom.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Should render
-            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
-            expect(queries.queryZoomInButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryZoomOutButton(imageLightbox)).toBeInTheDocument();
-
-            // Should not render
-            expect(queries.queryPrevSlideButton(imageLightbox)).not.toBeInTheDocument();
-            expect(queries.queryNextSlideButton(imageLightbox)).not.toBeInTheDocument();
-        });
-
-        it('should render multiple images', () => {
-            setup(MultipleImages.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Should render
-            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
-            expect(queries.queryPrevSlideButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryNextSlideButton(imageLightbox)).toBeInTheDocument();
-
-            // Should not render
-            expect(queries.queryZoomInButton(imageLightbox)).not.toBeInTheDocument();
-            expect(queries.queryZoomOutButton(imageLightbox)).not.toBeInTheDocument();
-        });
-
-        it('should render multiple images with set active image', () => {
-            setup({ ...MultipleImages.args, activeImageIndex: 1 });
-            const imageLightbox = queries.getImageLightbox();
-
-            // Should render
-            expect(queries.queryImage(imageLightbox, 'Image 2')).toBeInTheDocument();
-        });
-
-        it('should render multiple images with zoom', () => {
-            setup(MultipleImagesWithZoom.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Should render
-            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
-            expect(queries.queryPrevSlideButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryNextSlideButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryZoomInButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryZoomOutButton(imageLightbox)).toBeInTheDocument();
-        });
-    });
-
-    describe('trigger', () => {
-        it('should move focus on open and close with single image lightbox', async () => {
-            const decorator = WithButtonTrigger.decorators[0];
-            const Story = ({ args }: any) => <ImageLightbox {...args} />;
-            const Render = () => decorator(Story, { args: baseProps });
-            render(<Render />);
-
-            // Focus the second button
-            await userEvent.tab();
-            await userEvent.tab();
-            const buttonTrigger = screen.getByRole('button', { name: 'Image 2' });
-            expect(buttonTrigger).toHaveFocus();
-
-            // Open image lightbox with the button trigger
-            await userEvent.keyboard('{enter}');
-
-            // Focus moved to the close button
-            const imageLightbox = queries.getImageLightbox();
-            expect(queries.queryCloseButton(imageLightbox)).toHaveFocus();
-
-            // Image lightbox opened on the correct image
-            expect(queries.queryImage(imageLightbox, 'Image 2')).toBeInTheDocument();
-
-            // Close on escape
-            await userEvent.keyboard('{escape}');
-            expect(imageLightbox).not.toBeInTheDocument();
-
-            // Focus moved back to the trigger button
-            expect(buttonTrigger).toHaveFocus();
-        });
-
-        it('should move focus on open and close with multiple image lightbox', async () => {
-            const decorator = WithMosaicTrigger.decorators[0];
-            const Story = ({ args }: any) => <ImageLightbox {...args} />;
-            const Render = () => decorator(Story, { args: { ...baseProps, ...WithMosaicTrigger.args } });
-            render(<Render />);
-
-            // Focus the first button & activate to open
-            await userEvent.tab();
-            const buttonTrigger = document.activeElement;
-            await userEvent.keyboard('{enter}');
-
-            // Focus moved to the first slide button
-            const imageLightbox = queries.getImageLightbox();
-            expect(queries.querySlideButton(imageLightbox, 1)).toHaveFocus();
-
-            // Image lightbox opened on the correct image
-            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
-
-            // Close on escape
-            await userEvent.keyboard('{escape}');
-            expect(imageLightbox).not.toBeInTheDocument();
-
-            // Focus moved back to the trigger button
-            expect(buttonTrigger).toHaveFocus();
-        });
-    });
-
-    describe('zoom', () => {
-        const scrollAreaSize = { width: 600, height: 600 };
-        beforeEach(() => {
-            (useImageSize as any).mockImplementation((_: any, getInitialSize: any) => getInitialSize?.() || null);
-            (useElementSizeDependentOfWindowSize as any).mockReturnValue([scrollAreaSize, jest.fn()]);
-        });
-
-        it('should use the image initial size', () => {
-            setup({
-                images: [
-                    { image: 'https://example.com/image.png', alt: 'Image 1', imgProps: { width: 200, height: 200 } },
-                ],
-            });
-            const imageLightbox = queries.getImageLightbox();
-            const image = queries.queryImage(imageLightbox, 'Image 1');
-            expect(image).toHaveStyle({
-                height: `200px`,
-                width: `200px`,
-            });
-        });
-
-        it('should zoom on zoom button pressed', async () => {
-            const { rerender } = setup(SingleImageWithZoom.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Initial image style
-            const image = queries.queryImage(imageLightbox, 'Image 1');
-
-            expect(image).toHaveStyle({
-                maxHeight: `${scrollAreaSize.height}px`,
-                maxWidth: `${scrollAreaSize.width}px`,
-            });
-
-            // Update image size (simulate image loaded)
-            const imageSize = { width: 500, height: 300 };
-            (useImageSize as any).mockReturnValue(imageSize);
-            rerender();
-
-            // Image style updated
-            expect(image).toHaveStyle({ width: `${imageSize.width}px`, height: `${imageSize.height}px` });
-
-            // Scroll area is bigger than the image, it should not be focusable
-            expect(queries.queryScrollArea(imageLightbox)).not.toHaveAttribute('tabindex');
-
-            // Zoom in
-            const zoomInButton = queries.queryZoomInButton(imageLightbox) as any;
-            await userEvent.click(zoomInButton);
-            expect(image).toHaveStyle({ height: '450px', width: '750px' });
-
-            // Scroll area is smaller than the image, it should be focusable
-            expect(queries.queryScrollArea(imageLightbox)).toHaveAttribute('tabindex', '0');
-
-            // Zoom out
-            const zoomOutButton = queries.queryZoomOutButton(imageLightbox) as any;
-            await userEvent.click(zoomOutButton);
-            expect(image).toHaveStyle({ width: `${imageSize.width}px`, height: `${imageSize.height}px` });
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'imageLightbox',
-        forwardAttributes: 'imageLightbox',
-    });
-});

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

@@ -1,72 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-import { Lightbox } from '@lumx/react';
-import { ClickAwayProvider } from '@lumx/react/utils';
-import type { Comp } from '@lumx/react/utils/type';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-
-import { ImageSlideshow } from './internal/ImageSlideshow';
-import { useImageLightbox } from './useImageLightbox';
-import type { ImageLightboxProps } from './types';
-import { CLASSNAME, COMPONENT_NAME } from './constants';
-
-const Inner: Comp<ImageLightboxProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        className,
-        isOpen,
-        closeButtonProps,
-        onClose,
-        parentElement,
-        activeImageIndex,
-        slideshowControlsProps,
-        slideGroupLabel,
-        images,
-        zoomOutButtonProps,
-        zoomInButtonProps,
-        activeImageRef: propImageRef,
-        ...forwardedProps
-    } = props;
-    const currentPaginationItemRef = React.useRef(null);
-    const footerRef = React.useRef(null);
-    const imageRef = React.useRef(null);
-    const clickAwayChildrenRefs = React.useRef([imageRef, footerRef]);
-
-    return (
-        <Lightbox
-            ref={ref}
-            className={classNames(className, CLASSNAME)}
-            parentElement={parentElement}
-            isOpen={isOpen}
-            onClose={onClose}
-            closeButtonProps={closeButtonProps}
-            focusElement={currentPaginationItemRef}
-            {...forwardedProps}
-        >
-            <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClose}>
-                <ImageSlideshow
-                    activeImageIndex={activeImageIndex}
-                    slideGroupLabel={slideGroupLabel}
-                    slideshowControlsProps={slideshowControlsProps}
-                    images={images}
-                    zoomInButtonProps={zoomInButtonProps}
-                    zoomOutButtonProps={zoomOutButtonProps}
-                    footerRef={footerRef}
-                    activeImageRef={mergeRefs(propImageRef, imageRef)}
-                    currentPaginationItemRef={currentPaginationItemRef}
-                />
-            </ClickAwayProvider>
-        </Lightbox>
-    );
-});
-Inner.displayName = COMPONENT_NAME;
-Inner.className = CLASSNAME;
-
-/**
- * ImageLightbox component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ImageLightbox = Object.assign(Inner, { useImageLightbox });

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

@@ -1,11 +0,0 @@
-import { getRootClassName } from '@lumx/react/utils/className';
-
-/**
- * Component display name.
- */
-export const COMPONENT_NAME = 'ImageLightbox';
-
-/**
- * Component default class name and class prefix.
- */
-export const CLASSNAME = getRootClassName(COMPONENT_NAME);

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

@@ -1,2 +0,0 @@
-export { ImageLightbox } from './ImageLightbox';
-export type { ImageLightboxProps } from './types';

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

@@ -1,107 +0,0 @@
-import React from 'react';
-
-import { SlideshowItem, Thumbnail } from '@lumx/react';
-import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useElementSizeDependentOfWindowSize } from '@lumx/react/hooks/useElementSizeDependentOfWindowSize';
-import { useImageSize } from '@lumx/react/hooks/useImageSize';
-import { getPrefersReducedMotion } from '@lumx/react/utils/browser/getPrefersReducedMotion';
-import { isEqual } from '@lumx/react/utils/object/isEqual';
-
-import { CLASSNAME } from '../constants';
-import { usePointerZoom } from './usePointerZoom';
-import { useAnimateScroll } from './useAnimateScroll';
-import type { ImageProps } from '../types';
-
-export interface ImageSlideProps {
-    image: ImageProps;
-    isActive?: boolean;
-    scale?: number;
-    onScaleChange?: (value: number) => void;
-}
-
-/** Internal image slide component for ImageLightbox */
-export const ImageSlide = React.memo((props: ImageSlideProps) => {
-    const {
-        isActive,
-        scale,
-        onScaleChange,
-        image: { image, imgRef: propImgRef, imgProps, alt, loadingPlaceholderImageRef },
-    } = props;
-
-    // Get scroll area size
-    const scrollAreaRef = React.useRef<HTMLDivElement>(null);
-    const [scrollAreaSize, updateSize] = useElementSizeDependentOfWindowSize(scrollAreaRef);
-    React.useEffect(() => {
-        // Update size when active
-        if (isActive) updateSize();
-    }, [isActive, updateSize]);
-
-    // Get image size
-    const imgRef = React.useRef<HTMLImageElement>(null);
-    const imageSize = useImageSize(imgRef, () => {
-        const width = Number.parseInt(imgProps?.width as any, 10);
-        const height = Number.parseInt(imgProps?.height as any, 10);
-        return width && height ? { width, height } : null;
-    });
-
-    // Calculate new image size with scale
-    const scaledImageSize = React.useMemo(() => {
-        if (!scrollAreaSize || !imageSize) {
-            return null;
-        }
-        const horizontalScale = scrollAreaSize.width / imageSize.width;
-        const verticalScale = scrollAreaSize.height / imageSize.height;
-        const baseScale = Math.min(1, Math.min(horizontalScale, verticalScale));
-        return {
-            width: imageSize.width * baseScale * (scale ?? 1),
-            height: imageSize.height * baseScale * (scale ?? 1),
-        };
-    }, [scrollAreaSize, imageSize, scale]);
-
-    // Animate scroll to preserve the center of the current visible window in the scroll area
-    const animateScroll = useAnimateScroll(scrollAreaRef);
-
-    // Zoom via mouse wheel or multi-touch pinch zoom
-    const isPointerZooming = usePointerZoom(scrollAreaRef, onScaleChange, animateScroll);
-
-    // Animate scroll on scale change
-    React.useLayoutEffect(() => {
-        if (scale && !isPointerZooming) {
-            animateScroll();
-        }
-    }, [isPointerZooming, scale, animateScroll]);
-
-    const isScrollable =
-        scaledImageSize &&
-        scrollAreaSize &&
-        (scaledImageSize.width > scrollAreaSize.width || scaledImageSize.height > scrollAreaSize.height);
-
-    return (
-        <SlideshowItem
-            ref={scrollAreaRef}
-            // Make it accessible to keyboard nav when the zone is scrollable
-            tabIndex={isScrollable ? 0 : undefined}
-            className={`${CLASSNAME}__image-slide`}
-        >
-            <Thumbnail
-                imgRef={useMergeRefs(imgRef, propImgRef)}
-                image={image}
-                alt={alt}
-                className={`${CLASSNAME}__thumbnail`}
-                imgProps={{
-                    ...imgProps,
-                    style: {
-                        ...imgProps?.style,
-                        ...(scaledImageSize || {
-                            maxHeight: scrollAreaSize?.height,
-                            maxWidth: scrollAreaSize?.width,
-                        }),
-                        // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion
-                        transition: scale && !isPointerZooming && !getPrefersReducedMotion() ? 'all 250ms' : undefined,
-                    },
-                }}
-                loadingPlaceholderImageRef={loadingPlaceholderImageRef}
-            />
-        </SlideshowItem>
-    );
-}, isEqual);

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

@@ -1,173 +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/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 theme="dark" as="div" title={title} description={description} tags={tags} align="center" />
-        ) : null;
-
-    // Slideshow controls
-    const slideShowControls =
-        slidesCount > 1 && slideshowControlsProps ? (
-            <SlideshowControls
-                theme="dark"
-                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 (activeIndex) setScale(undefined);
-    }, [activeIndex]);
-    const zoomControls = zoomEnabled && (
-        <>
-            <IconButton
-                {...zoomInButtonProps}
-                theme="dark"
-                emphasis="low"
-                icon={mdiMagnifyPlusOutline}
-                onClick={zoomIn}
-            />
-            <IconButton
-                {...zoomOutButtonProps}
-                theme="dark"
-                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}
-                theme="dark"
-                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]);
-}