@lumx/react 3.20.1-alpha.2 → 3.20.1-alpha.20

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 })],
-};

package/src/components/inline-list/InlineList.test.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, screen, within } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { InlineList, InlineListProps } from '.';
-
-const CLASSNAME = InlineList.className as string;
-
-const setup = (props: Partial<InlineListProps> = {}) => {
-    render(<InlineList {...props} />);
-    const inlineList = queryByClassName(document.body, CLASSNAME);
-    return { props, inlineList };
-};
-
-describe(`<${InlineList.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
-        it('should render default', () => {
-            const { inlineList } = setup({ children: ['Some text', 'Some other text'] });
-
-            expect(inlineList).toBeInTheDocument();
-
-            const list = screen.getByRole('list');
-            expect(list).toBeInTheDocument();
-
-            const listItems = within(list).queryAllByRole('listitem');
-            expect(listItems.length).toBe(2);
-            expect(listItems[0]).toHaveTextContent('Some text');
-            expect(listItems[1]).toHaveTextContent('Some other text');
-        });
-
-        it('should render with typography', () => {
-            const { inlineList } = setup({ typography: 'body2', children: 'Some text' });
-            expect(inlineList).toHaveClass('lumx-typography-body2');
-        });
-
-        it('should render with color', () => {
-            const { inlineList } = setup({ color: 'blue', children: 'Some text' });
-            expect(inlineList).toHaveClass('lumx-color-font-blue-N');
-        });
-
-        it('should render with color and variant', () => {
-            const { inlineList } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
-            expect(inlineList).toHaveClass('lumx-color-font-blue-D2');
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'inlineList',
-        forwardAttributes: 'inlineList',
-    });
-});

package/src/components/inline-list/InlineList.tsx

@@ -1,96 +0,0 @@
-import React, { Children, isValidElement } from 'react';
-
-import classNames from 'classnames';
-
-import { ColorVariant, ColorWithVariants, Typography } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface InlineListProps extends GenericProps {
-    /**
-     * Text color.
-     */
-    color?: ColorWithVariants;
-    /**
-     * Lightened or darkened variant of the selected color.
-     */
-    colorVariant?: ColorVariant;
-    /**
-     * Typography variant.
-     */
-    typography?: Typography;
-    /**
-     * Activate line wrap on overflow.
-     */
-    wrap?: boolean;
-    /**
-     * Children
-     */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'InlineList';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {} as const;
-
-/**
- * InlineList component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const InlineList = forwardRef<InlineListProps>((props, ref) => {
-    const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;
-    const typographyClassName = typography && getTypographyClassName(typography);
-    return (
-        // eslint-disable-next-line jsx-a11y/no-redundant-roles
-        <ul
-            {...forwardedProps}
-            ref={ref as any}
-            className={classNames(
-                className,
-                CLASSNAME,
-                wrap && `${CLASSNAME}--wrap`,
-                fontColorClass(color, colorVariant),
-                typographyClassName,
-            )}
-            // Lists with removed bullet style can lose their a11y list role on some browsers
-            role="list"
-        >
-            {Children.toArray(children).map((child, index) => {
-                const key = (isValidElement(child) && child.key) || index;
-                return (
-                    // We need to item is set as display: contents which removes the semantic.
-                    // eslint-disable-next-line jsx-a11y/no-redundant-roles
-                    <li key={key} role="listitem" className={`${CLASSNAME}__item`}>
-                        {index !== 0 && (
-                            <span className={`${CLASSNAME}__item-separator`} aria-hidden="true">
-                                {'\u00A0•\u00A0'}
-                            </span>
-                        )}
-                        {child}
-                    </li>
-                );
-            })}
-        </ul>
-    );
-});
-InlineList.displayName = COMPONENT_NAME;
-InlineList.className = CLASSNAME;
-InlineList.defaultProps = DEFAULT_PROPS;

package/src/components/inline-list/index.ts

@@ -1 +0,0 @@
-export * from './InlineList';

package/src/components/input-helper/InputHelper.stories.tsx

@@ -1,35 +0,0 @@
-import { InputHelper, Kind } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-
-export default {
-    title: 'LumX components/input-helper/Input Helper',
-    component: InputHelper,
-    argTypes: {
-        kind: getSelectArgType(Kind),
-    },
-    args: {
-        ...InputHelper.defaultProps,
-        children: 'Some helper text',
-    },
-};
-
-/**
- * Default input helper
- */
-export const Default = {};
-
-/**
- * All `kind` variants
- */
-export const AllKinds = {
-    argTypes: { kind: { control: false } },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: { key: 'kind', options: withUndefined(Kind) },
-            },
-        }),
-    ],
-};

package/src/components/input-helper/InputHelper.test.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-
-import { Kind, Theme } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-import { INPUT_HELPER_CONFIGURATION } from '@lumx/react/components/input-helper/constants';
-import { InputHelper, InputHelperProps } from './InputHelper';
-
-const CLASSNAME = InputHelper.className as string;
-
-type SetupProps = Partial<InputHelperProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: any = { ...propsOverride };
-    render(<InputHelper {...props} />, { wrapper });
-    const helper = getByClassName(document.body, CLASSNAME);
-
-    return { helper, props };
-};
-
-describe(`<${InputHelper.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render text', () => {
-            const { props, helper } = setup({ children: 'helper text' });
-
-            expect(helper).toHaveTextContent(props.children);
-            expect(helper.className).toMatchInlineSnapshot('"lumx-input-helper lumx-input-helper--theme-light"');
-        });
-
-        it('should render dark theme', () => {
-            const { helper } = setup({ theme: Theme.dark });
-            expect(helper).toHaveClass('lumx-input-helper--theme-dark');
-        });
-
-        it.each(Object.values(Kind))('should render kind %s', (kind) => {
-            const { helper } = setup({ kind });
-            const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
-            if (color) expect(helper).toHaveClass(`${CLASSNAME}--color-${color}`);
-        });
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'helper',
-        forwardAttributes: 'helper',
-        applyTheme: {
-            affects: [{ element: 'helper' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});