@lumx/react 3.20.1-alpha.1 → 3.20.1-alpha.11

package/src/hooks/useRovingTabIndex.tsx

@@ -1,90 +0,0 @@
-import { RefObject, useEffect } from 'react';
-
-interface UseRovingTabIndexOptions {
-    parentRef: RefObject<HTMLElement>;
-    elementSelector: string;
-    keepTabIndex?: boolean;
-    /** Action to trigger when an element is focused using roving tab index */
-    onElementFocus?: (element: HTMLElement) => void;
-    /** List of values to be used as extra dependencies of the useEffect */
-    extraDependencies?: any[];
-}
-
-export const useRovingTabIndex = ({
-    parentRef,
-    elementSelector,
-    keepTabIndex,
-    onElementFocus,
-    extraDependencies = [],
-}: UseRovingTabIndexOptions): void => {
-    useEffect(
-        () => {
-            const parent = parentRef?.current;
-            if (!parent) {
-                return undefined;
-            }
-
-            const elements = parent.querySelectorAll(elementSelector) as NodeListOf<HTMLElement>;
-            const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex="0"]`);
-
-            const handleKeyDown = (index: number) => (evt: KeyboardEvent) => {
-                let newTabFocus = index;
-                if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {
-                    return;
-                }
-
-                if (evt.key === 'ArrowRight') {
-                    // Move right
-                    newTabFocus += 1;
-                    // If we're at the end, go to the start
-                    if (newTabFocus >= elements.length) {
-                        newTabFocus = 0;
-                    }
-                } else if (evt.key === 'ArrowLeft') {
-                    // Move left
-                    newTabFocus -= 1;
-                    if (newTabFocus < 0) {
-                        // If we're at the start, move to the end
-                        newTabFocus = elements.length - 1;
-                    }
-                }
-                const newElement = elements[newTabFocus];
-                newElement?.focus();
-
-                // When an element is focused using roving tab index, trigger the onElementFocus callback
-                if (newElement && onElementFocus) {
-                    onElementFocus(newElement);
-                }
-
-                if (keepTabIndex) {
-                    (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');
-                    newElement?.setAttribute('tabindex', '0');
-                }
-            };
-
-            if (elements?.length > 0) {
-                elements.forEach((el, key) => {
-                    // if no element has tabindex set to 0, set the first element as focusable
-                    if (!initialFocusableElement && key === 0) {
-                        el.setAttribute('tabindex', '0');
-                        // set all other to -1
-                    } else if (initialFocusableElement !== el) {
-                        el.setAttribute('tabindex', '-1');
-                    }
-                    // add event listener
-                    el.addEventListener('keydown', handleKeyDown(key) as EventListener);
-                });
-            }
-
-            // Cleanup listeners
-            return () => {
-                if (elements?.length > 0) {
-                    elements.forEach((el, key) => {
-                        el.removeEventListener('keydown', handleKeyDown(key) as EventListener);
-                    });
-                }
-            };
-        }, // eslint-disable-next-line react-hooks/exhaustive-deps
-        [parentRef, ...extraDependencies],
-    );
-};

package/src/hooks/useSizeOnWindowResize.ts

@@ -1,30 +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 useSizeOnWindowResize(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/useSlideshowControls.ts

@@ -1,246 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-
-import { useInterval } from '@lumx/react/hooks/useInterval';
-import { AUTOPLAY_DEFAULT_INTERVAL } from '@lumx/react/components/slideshow/constants';
-import { useId } from '@lumx/react/hooks/useId';
-
-export interface UseSlideshowControlsOptions {
-    /** default active index to be displayed */
-    defaultActiveIndex?: number;
-    /** total slides to display */
-    itemsCount: number;
-    /** Index of the current slide. */
-    activeIndex?: number;
-    /** Whether the automatic rotation of the slideshow is enabled or not. */
-    autoPlay?: boolean;
-    /** Whether the image has to fill its container height or not. */
-    fillHeight?: boolean;
-    /** Number of slides to group together. */
-    groupBy?: number;
-    /** Interval between each slide when automatic rotation is enabled. */
-    interval?: number;
-    /** Callback when slide changes */
-    onChange?(index: number): void;
-    /** slideshow HTML id attribute */
-    id?: string;
-    /** slides wrapper HTML id attribute */
-    slidesId?: string;
-}
-
-export interface UseSlideshowControls {
-    /** Index for the first visible slide, should be used when groupBy is passed in */
-    startIndexVisible: number;
-    /** Index for the last visible slide, should be used when groupBy is passed in */
-    endIndexVisible: number;
-    /** total slides to be displayed */
-    slidesCount: number;
-    /** callback to set  */
-    setSlideshow: (element: HTMLDivElement | null) => void;
-    /** reference to the slideshow element */
-    slideshow: HTMLDivElement | null;
-    /** id to be used for the slideshow */
-    slideshowId: string;
-    /** id to be used for the wrapper that contains the slides */
-    slideshowSlidesId: string;
-    /** callback that triggers the previous slide while using the slideshow controls  */
-    onPreviousClick: (loopback: boolean) => void;
-    /** callback that triggers the next slide while using the slideshow controls */
-    onNextClick: (loopback: boolean) => void;
-    /** callback that triggers a specific page while using the slideshow controls */
-    onPaginationClick: (index: number) => void;
-    /** whether the slideshow is autoplaying or not */
-    isAutoPlaying: boolean;
-    /** whether the slideshow was force paused or not */
-    isForcePaused: boolean;
-    /** callback to change whether the slideshow is autoplaying or not */
-    toggleAutoPlay: () => void;
-    /** calback to change whether the slideshow should be force paused or not */
-    toggleForcePause: () => void;
-    /** current active slide index  */
-    activeIndex: number;
-    /** set the current index as the active one */
-    setActiveIndex: (index: number) => void;
-    /** callback that stops the auto play */
-    stopAutoPlay: () => void;
-    /** callback that starts the auto play */
-    startAutoPlay: () => void;
-}
-
-export const DEFAULT_OPTIONS = {
-    activeIndex: 0,
-    groupBy: 1,
-    interval: AUTOPLAY_DEFAULT_INTERVAL,
-} as const;
-
-export const useSlideshowControls = ({
-    activeIndex = DEFAULT_OPTIONS.activeIndex,
-    groupBy = DEFAULT_OPTIONS.groupBy,
-    interval = DEFAULT_OPTIONS.interval,
-    autoPlay,
-    defaultActiveIndex,
-    onChange,
-    itemsCount,
-    id,
-    slidesId,
-}: UseSlideshowControlsOptions): UseSlideshowControls => {
-    const [currentIndex, setCurrentIndex] = useState(activeIndex as number);
-    // Use state instead of a ref to make the slideshow controls update directly when the element is set.
-    const [element, setElement] = useState<HTMLDivElement | null>(null);
-
-    // Number of slides when using groupBy prop.
-    const slidesCount = Math.ceil(itemsCount / Math.min(groupBy as number, itemsCount));
-
-    // Change current index to display next slide.
-    const goToNextSlide = useCallback(
-        (loopback = true) => {
-            setCurrentIndex((index) => {
-                if (loopback && index === slidesCount - 1) {
-                    // Loopback to the start.
-                    return 0;
-                }
-                if (index < slidesCount - 1) {
-                    // Next slide.
-                    return index + 1;
-                }
-                return index;
-            });
-        },
-        [slidesCount, setCurrentIndex],
-    );
-
-    // Change current index to display previous slide.
-    const goToPreviousSlide = useCallback(
-        (loopback = true) => {
-            setCurrentIndex((index) => {
-                if (loopback && index === 0) {
-                    // Loopback to the end.
-                    return slidesCount - 1;
-                }
-                if (index > 0) {
-                    // Previous slide.
-                    return index - 1;
-                }
-                return index;
-            });
-        },
-        [slidesCount, setCurrentIndex],
-    );
-
-    // Auto play
-    const [isAutoPlaying, setIsAutoPlaying] = useState(Boolean(autoPlay));
-    const [isForcePaused, setIsForcePaused] = useState(false);
-
-    const isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying;
-    // Start
-    useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? (interval as number) : null);
-
-    // Reset current index if it become invalid.
-    useEffect(() => {
-        if (currentIndex > slidesCount - 1) {
-            setCurrentIndex(defaultActiveIndex as number);
-        }
-    }, [currentIndex, slidesCount, defaultActiveIndex]);
-
-    const startAutoPlay = () => {
-        setIsAutoPlaying(Boolean(autoPlay));
-    };
-
-    const stopAutoPlay = () => {
-        setIsAutoPlaying(false);
-    };
-
-    // Handle click on a bullet to go to a specific slide.
-    const onPaginationClick = useCallback(
-        (index: number) => {
-            stopAutoPlay();
-            setIsForcePaused(true);
-
-            if (index >= 0 && index < slidesCount) {
-                setCurrentIndex(index);
-            }
-        },
-        [slidesCount, setCurrentIndex],
-    );
-
-    // Handle click or keyboard event to go to next slide.
-    const onNextClick = useCallback(
-        (loopback = true) => {
-            stopAutoPlay();
-            setIsForcePaused(true);
-            goToNextSlide(loopback);
-        },
-        [goToNextSlide],
-    );
-
-    // Handle click or keyboard event to go to previous slide.
-    const onPreviousClick = useCallback(
-        (loopback = true) => {
-            stopAutoPlay();
-            setIsForcePaused(true);
-            goToPreviousSlide(loopback);
-        },
-        [goToPreviousSlide],
-    );
-
-    // If the activeIndex props changes, update the current slide
-    useEffect(() => {
-        setCurrentIndex(activeIndex as number);
-    }, [activeIndex]);
-
-    // If the slide changes, with autoplay for example, trigger "onChange"
-    useEffect(() => {
-        if (!onChange) return;
-        onChange(currentIndex);
-    }, [currentIndex, onChange]);
-
-    const generatedSlideshowId = useId();
-    const slideshowId = id || generatedSlideshowId;
-
-    const generatedSlidesId = useId();
-    const slideshowSlidesId = slidesId || generatedSlidesId;
-
-    const toggleAutoPlay = () => {
-        if (isSlideshowAutoPlaying) {
-            stopAutoPlay();
-        } else {
-            startAutoPlay();
-        }
-    };
-
-    const toggleForcePause = () => {
-        const shouldBePaused = !isForcePaused;
-
-        setIsForcePaused(shouldBePaused);
-
-        if (!shouldBePaused) {
-            startAutoPlay();
-        } else {
-            stopAutoPlay();
-        }
-    };
-
-    // Start index and end index of visible slides.
-    const startIndexVisible = currentIndex * (groupBy as number);
-    const endIndexVisible = startIndexVisible + (groupBy as number);
-
-    return {
-        startIndexVisible,
-        endIndexVisible,
-        setSlideshow: setElement,
-        slideshow: element,
-        slideshowId,
-        slideshowSlidesId,
-        onPreviousClick,
-        onNextClick,
-        onPaginationClick,
-        isAutoPlaying: isSlideshowAutoPlaying,
-        toggleAutoPlay,
-        activeIndex: currentIndex,
-        slidesCount,
-        setActiveIndex: setCurrentIndex,
-        startAutoPlay,
-        stopAutoPlay,
-        isForcePaused,
-        toggleForcePause,
-    };
-};

package/src/hooks/useStopPropagation.ts

@@ -1,21 +0,0 @@
-import isFunction from 'lodash/isFunction';
-import { MouseEventHandler, useCallback } from 'react';
-
-/**
- * Wrap mouse event handler to stop event propagation.
- *
- * @param  handler   The mouse handler to wrap.
- * @return Mouse handler stopping propagation.
- */
-export function useStopPropagation(handler?: MouseEventHandler): MouseEventHandler {
-    return useCallback(
-        (evt) => {
-            if (!evt || !isFunction(handler)) {
-                return;
-            }
-            handler(evt);
-            evt.stopPropagation();
-        },
-        [handler],
-    );
-}

package/src/hooks/useTransitionVisibility.ts

@@ -1,48 +0,0 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
-import { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';
-
-/**
- * Returns true if the component is visible tracking the opacity transition.
- *
- * @param ref Element on which to listen the transition event.
- * @param isComponentVisible Whether the component intends to be visible or not.
- * @param onVisibilityChange Callback called when the visibility changes.
- * @return true if the component should be rendered
- */
-export const useTransitionVisibility = (
-    ref: RefObject<HTMLElement>,
-    isComponentVisible: boolean,
-    timeout: number,
-    onVisibilityChange?: (isVisible: boolean) => void,
-) => {
-    const [isVisible, setVisible] = useState(isComponentVisible);
-    const previousVisibility = useRef(isVisible);
-
-    // On component visibility change.
-    useEffect(() => {
-        if (isComponentVisible) {
-            setVisible(true);
-            return undefined;
-        }
-        const { current: element } = ref;
-
-        // Transition event is not supported or the user prefers reduced motion.
-        // => Skip and set visibility to false directly.
-        if (!element || !window.TransitionEvent || isReducedMotion()) {
-            setVisible(false);
-            return undefined;
-        }
-
-        const timer = setTimeout(() => setVisible(false), timeout);
-        return () => clearTimeout(timer);
-    }, [isComponentVisible, ref, timeout]);
-
-    useEffect(() => {
-        if (onVisibilityChange && previousVisibility.current !== isVisible) {
-            onVisibilityChange(isVisible);
-            previousVisibility.current = isVisible;
-        }
-    }, [isVisible, onVisibilityChange]);
-
-    return isVisible || isComponentVisible;
-};

package/src/index.ts

@@ -1,63 +0,0 @@
-/**
- * Components listed here will be exposed to NPM in '@lumx/react'.
- */
-
-export * from '@lumx/core/js/constants';
-export * from '@lumx/core/js/types';
-
-export * from './components/alert-dialog';
-export * from './components/autocomplete';
-export * from './components/avatar';
-export * from './components/badge';
-export * from './components/button';
-export * from './components/checkbox';
-export * from './components/chip';
-export * from './components/comment-block';
-export * from './components/date-picker';
-export * from './components/dialog';
-export * from './components/divider';
-export * from './components/drag-handle';
-export * from './components/dropdown';
-export * from './components/expansion-panel';
-export * from './components/flag';
-export * from './components/flex-box';
-export * from './components/generic-block';
-export * from './components/heading';
-export * from './components/grid';
-export * from './components/grid-column';
-export * from './components/icon';
-export * from './components/image-block';
-export * from './components/image-lightbox';
-export * from './components/inline-list';
-export * from './components/input-helper';
-export * from './components/input-label';
-export * from './components/lightbox';
-export * from './components/link';
-export * from './components/link-preview';
-export * from './components/list';
-export * from './components/message';
-export * from './components/mosaic';
-export * from './components/navigation';
-export * from './components/notification';
-export * from './components/popover';
-export * from './components/popover-dialog';
-export * from './components/post-block';
-export * from './components/progress';
-export * from './components/progress-tracker';
-export * from './components/radio-button';
-export * from './components/select';
-export * from './components/side-navigation';
-export * from './components/skeleton';
-export * from './components/slider';
-export * from './components/slideshow';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/text';
-export * from './components/text-field';
-export * from './components/thumbnail';
-export * from './components/toolbar';
-export * from './components/tooltip';
-export * from './components/uploader';
-export * from './components/user-block';
-export { ThemeProvider, useTheme } from './utils/theme/ThemeContext';

package/src/stories/controls/color.ts

@@ -1,7 +0,0 @@
-import { ColorPalette, ColorVariant } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-
-export const ALL_COLORS = Object.values(ColorPalette);
-export const colorArgType = getSelectArgType(withUndefined(ALL_COLORS));
-export const colorVariantArgType = getSelectArgType(ColorVariant);

package/src/stories/controls/element.ts

@@ -1,6 +0,0 @@
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { HeadingElement, TextElement } from '@lumx/react';
-
-export const HEADING_ELEMENTS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as HeadingElement[];
-export const headingElementArgType = getSelectArgType<HeadingElement>(HEADING_ELEMENTS);
-export const textElementArgType = getSelectArgType<TextElement>(['p', 'span', ...HEADING_ELEMENTS]);

package/src/stories/controls/focusPoint.ts

@@ -1 +0,0 @@
-export const focusPoint = { control: { type: 'range', min: -1, max: 1, step: 0.01 } };

package/src/stories/controls/icons.ts

@@ -1,126 +0,0 @@
-import {
-    mdiAbTesting,
-    mdiAbjadArabic,
-    mdiAccount,
-    mdiAccountBox,
-    mdiAlert,
-    mdiAlertCircle,
-    mdiArrowDown,
-    mdiArrowUp,
-    mdiAtom,
-    mdiBee,
-    mdiBell,
-    mdiBullhornOutline,
-    mdiCheck,
-    mdiCheckCircle,
-    mdiChevronDown,
-    mdiChevronLeft,
-    mdiChevronRight,
-    mdiChevronUp,
-    mdiClose,
-    mdiCloseCircle,
-    mdiDelete,
-    mdiDotsHorizontal,
-    mdiDragVertical,
-    mdiEarth,
-    mdiEmail,
-    mdiEye,
-    mdiFileEdit,
-    mdiFlag,
-    mdiFolder,
-    mdiFolderGoogleDrive,
-    mdiFoodApple,
-    mdiGoogleCirclesExtended,
-    mdiHeart,
-    mdiHome,
-    mdiImageBroken,
-    mdiInformation,
-    mdiLink,
-    mdiMagnifyMinusOutline,
-    mdiMagnifyPlusOutline,
-    mdiMenuDown,
-    mdiMessageTextOutline,
-    mdiMinus,
-    mdiOpenInNew,
-    mdiPauseCircleOutline,
-    mdiPencil,
-    mdiPlay,
-    mdiPlayCircleOutline,
-    mdiPlus,
-    mdiRadioboxBlank,
-    mdiRadioboxMarked,
-    mdiReply,
-    mdiSend,
-    mdiStar,
-    mdiTextBox,
-    mdiTextBoxPlus,
-    mdiTram,
-    mdiTranslate,
-    mdiViewList,
-} from '@lumx/icons';
-
-// Small selection of mdi icons to
-export const iconArgType = {
-    control: { type: 'select' },
-    options: {
-        undefined,
-        mdiAbTesting,
-        mdiAbjadArabic,
-        mdiAccount,
-        mdiAccountBox,
-        mdiAlert,
-        mdiAlertCircle,
-        mdiArrowDown,
-        mdiArrowUp,
-        mdiAtom,
-        mdiBee,
-        mdiBell,
-        mdiBullhornOutline,
-        mdiCheck,
-        mdiCheckCircle,
-        mdiChevronDown,
-        mdiChevronLeft,
-        mdiChevronRight,
-        mdiChevronUp,
-        mdiClose,
-        mdiCloseCircle,
-        mdiDelete,
-        mdiDotsHorizontal,
-        mdiDragVertical,
-        mdiEarth,
-        mdiEmail,
-        mdiEye,
-        mdiFileEdit,
-        mdiFlag,
-        mdiFolder,
-        mdiFolderGoogleDrive,
-        mdiFoodApple,
-        mdiGoogleCirclesExtended,
-        mdiHeart,
-        mdiHome,
-        mdiImageBroken,
-        mdiInformation,
-        mdiLink,
-        mdiMagnifyMinusOutline,
-        mdiMagnifyPlusOutline,
-        mdiMenuDown,
-        mdiMessageTextOutline,
-        mdiMinus,
-        mdiOpenInNew,
-        mdiPauseCircleOutline,
-        mdiPencil,
-        mdiPlay,
-        mdiPlayCircleOutline,
-        mdiPlus,
-        mdiRadioboxBlank,
-        mdiRadioboxMarked,
-        mdiReply,
-        mdiSend,
-        mdiStar,
-        mdiTextBox,
-        mdiTextBoxPlus,
-        mdiTram,
-        mdiTranslate,
-        mdiViewList,
-    },
-};