@lumx/react 3.21.1-alpha.0 → 3.21.2-alpha.0

package/src/hooks/useKeyboardListNavigation.tsx

@@ -1,204 +0,0 @@
-import { RefObject, SetStateAction, useEffect, useState } from 'react';
-
-import get from 'lodash/get';
-
-type Listener = (evt: KeyboardEvent) => void;
-
-interface UseKeyboardListNavigationType {
-    /** the current active index */
-    activeItemIndex: number;
-    /** callback to be used when a key is pressed. usually used with the native prop `onKeyDown` */
-    onKeyboardNavigation: Listener;
-    /** Resets the active index to the initial state */
-    resetActiveIndex(): void;
-    /** Sets the active index to a given value */
-    setActiveItemIndex(value: SetStateAction<number>): void;
-}
-
-export type useKeyboardListNavigationType = <I>(
-    items: I[],
-    ref: RefObject<HTMLElement>,
-    onListItemSelected: (itemSelected: I) => void,
-    onListItemNavigated?: (itemSelected: I) => void,
-    onEnterPressed?: (itemSelected: string) => void,
-    onBackspacePressed?: Listener,
-    keepFocusAfterSelection?: boolean,
-    initialIndex?: number,
-    preventTabOnEnteredValue?: boolean,
-) => UseKeyboardListNavigationType;
-
-const INITIAL_INDEX = -1;
-
-/**
- * This custom hook provides the necessary set of functions and values to properly navigate
- * a list using the keyboard.
- *
- * @param  items                    the list of items that will be navigated using the keyboard.
- * @param  ref                      A reference to the element that is controlling the navigation.
- * @param  onListItemSelected       callback to be executed when the ENTER key is pressed on an item.
- * @param  onListItemNavigated      callback to be executed when the Arrow keys are pressed.
- * @param  onEnterPressed           callback to be executed when the ENTER key is pressed.
- * @param  onBackspacePressed       callback to be executed when the BACKSPACE key is pressed.
- * @param  keepFocusAfterSelection  determines whether after selecting an item, the focus should be maintained on the current target or not.
- * @param  initialIndex             where should the navigation start from. it defaults to `-1`, so the first item navigated is the item on position `0`.
- * @param  preventTabOnEnteredValue determines whether upon TAB, if there is a value entered, the event is prevented or not.
- * @return useKeyboardListNavigation helpers.
- */
-export const useKeyboardListNavigation: useKeyboardListNavigationType = (
-    items,
-    ref,
-    onListItemSelected,
-    onListItemNavigated,
-    onEnterPressed,
-    onBackspacePressed,
-    keepFocusAfterSelection = false,
-    initialIndex = INITIAL_INDEX,
-    preventTabOnEnteredValue = true,
-) => {
-    const [activeItemIndex, setActiveItemIndex] = useState(initialIndex);
-
-    /**
-     * This function calculates the next index in the list to be highlighted
-     * @param key - key code pressed
-     * @return next active index
-     */
-    const calculateActiveIndex = (key: string): number => {
-        switch (key) {
-            case 'ArrowDown':
-                return activeItemIndex + 1 < items.length ? activeItemIndex + 1 : 0;
-            case 'ArrowUp':
-                return activeItemIndex - 1 >= 0 ? activeItemIndex - 1 : items.length - 1;
-            default:
-                return initialIndex;
-        }
-    };
-
-    /**
-     * Resets the active index to the initial state
-     */
-    const resetActiveIndex = () => {
-        setActiveItemIndex(initialIndex);
-    };
-
-    /**
-     * Prevents the default event and stops the propagation of said event
-     * @param evt - key pressed event
-     */
-    const preventDefaultAndStopPropagation: Listener = (evt) => {
-        evt.preventDefault();
-        evt.stopPropagation();
-    };
-
-    /**
-     * Handles navigation with the arrows using the keyboard
-     * @param evt - key pressed event
-     */
-    const onArrowPressed: Listener = (evt) => {
-        const { key } = evt;
-        const nextActiveIndex = calculateActiveIndex(key);
-        setActiveItemIndex(nextActiveIndex);
-        preventDefaultAndStopPropagation(evt);
-        if (onListItemNavigated) {
-            const selectedItem = items[nextActiveIndex];
-            onListItemNavigated(selectedItem);
-        }
-    };
-
-    /**
-     * Handles the event when the backspace key is pressed
-     * @param evt - key pressed event
-     */
-    const onBackspaceKeyPressed: Listener = (evt) => {
-        if (onBackspacePressed) {
-            onBackspacePressed(evt);
-        }
-    };
-
-    /**
-     * Handles when the ENTER key is pressed
-     * @param evt - key pressed event
-     */
-    const onEnterKeyPressed: Listener = (evt) => {
-        if (!onListItemSelected) {
-            return;
-        }
-
-        preventDefaultAndStopPropagation(evt);
-
-        if (!keepFocusAfterSelection) {
-            (evt.currentTarget as HTMLElement).blur();
-        }
-
-        const selectedItem = items[activeItemIndex];
-
-        if (selectedItem) {
-            onListItemSelected(selectedItem);
-            resetActiveIndex();
-        } else if (activeItemIndex === initialIndex && onEnterPressed) {
-            const value = get(evt, 'target.value');
-            onEnterPressed(value);
-            resetActiveIndex();
-        }
-    };
-
-    /**
-     * Handles when the TAB key is pressed
-     * @param evt - key pressed event
-     */
-    const onTabKeyPressed: Listener = (evt) => {
-        const value = get(evt, 'target.value');
-
-        if (preventTabOnEnteredValue && value && value.length > 0) {
-            preventDefaultAndStopPropagation(evt);
-        }
-    };
-
-    /**
-     * In order to make it easier in the future to add new events depending on the key
-     * a map was created to add these handlers. In the future, if there is another event
-     * that we need to manage depending on a specific key, we just need to add the key code
-     * here, and as a value, the handler for said key.
-     */
-    const eventsForKeyPressed: Record<string, Listener> = {
-        ArrowDown: onArrowPressed,
-        Tab: onTabKeyPressed,
-        ArrowUp: onArrowPressed,
-        Enter: onEnterKeyPressed,
-        Backspace: onBackspaceKeyPressed,
-    };
-
-    /**
-     * Calculates the next active item index depending on the key pressed.
-     * If the key pressed was ENTER, the function executes the callback `onListItemSelected`
-     * and resets the active index, since an item was selected.
-     * @param evt - key pressed or key down event
-     */
-    const onKeyboardNavigation: Listener = (evt) => {
-        const { key } = evt;
-        const handler = eventsForKeyPressed[key];
-
-        if (handler) {
-            handler(evt);
-        }
-    };
-
-    useEffect(() => {
-        const { current: currentElement } = ref;
-        if (!currentElement) {
-            return undefined;
-        }
-        currentElement.addEventListener('focus', resetActiveIndex);
-        currentElement.addEventListener('keydown', onKeyboardNavigation);
-        return () => {
-            currentElement.removeEventListener('focus', resetActiveIndex);
-            currentElement.removeEventListener('keydown', onKeyboardNavigation);
-        };
-    });
-
-    return {
-        activeItemIndex,
-        onKeyboardNavigation,
-        resetActiveIndex,
-        setActiveItemIndex,
-    };
-};

package/src/hooks/useListenFocus.tsx

@@ -1,26 +0,0 @@
-import { RefObject, useEffect, useState } from 'react';
-
-/**
- * Listen on element focus to store the focus status.
- */
-export function useListenFocus(ref: RefObject<HTMLElement>) {
-    const [isFocus, setFocus] = useState(false);
-
-    useEffect(() => {
-        const { current: element } = ref;
-        if (!element) {
-            return undefined;
-        }
-
-        const onFocus = () => setFocus(true);
-        const onBlur = () => setFocus(false);
-        element.addEventListener('focus', onFocus);
-        element.addEventListener('blur', onBlur);
-        return () => {
-            element.removeEventListener('focus', onFocus);
-            element.removeEventListener('blur', onBlur);
-        };
-    }, [ref, setFocus]);
-
-    return isFocus;
-}

package/src/hooks/useOverflowTooltipLabel.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { useTooltipContext } from '@lumx/react/components/tooltip/context';
-import { VISUALLY_HIDDEN } from '@lumx/react/constants';
-
-/**
- * Compute a tooltip label based on a label element `innerText` if the text overflows.
- * Updates dynamically on content changes (but not on resize!)
- */
-export const useOverflowTooltipLabel = (content: React.ReactNode) => {
-    const parentTooltip = useTooltipContext();
-    const [tooltipLabel, setTooltipLabel] = React.useState<string | undefined>(undefined);
-    const [labelElement, setLabelElement] = React.useState<HTMLElement | null>(null);
-
-    React.useLayoutEffect(() => {
-        if (
-            // Not inside a tooltip
-            !parentTooltip &&
-            labelElement &&
-            // Not inside a visually hidden
-            !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&
-            // Text overflows
-            labelElement.offsetWidth < labelElement.scrollWidth
-        ) {
-            // Set tooltip label
-            setTooltipLabel(labelElement.innerText);
-        } else {
-            setTooltipLabel(undefined);
-        }
-    }, [labelElement, parentTooltip, content]);
-
-    return { labelRef: setLabelElement, tooltipLabel };
-};

package/src/hooks/usePopper.ts

@@ -1,12 +0,0 @@
-import { usePopper as usePopperHook } from 'react-popper';
-import { IS_BROWSER } from '@lumx/react/constants';
-
-/** Stub usePopper for use outside of browsers */
-const useStubPopper: typeof usePopperHook = (_a, _p, { placement }: any) =>
-    ({
-        attributes: { popper: { 'data-popper-placement': placement } },
-        styles: { popper: { transform: 'translate(1, 1)' } },
-    }) as any;
-
-/** Switch hook implementation between environment */
-export const usePopper: typeof usePopperHook = IS_BROWSER ? usePopperHook : useStubPopper;

package/src/hooks/usePreviousValue.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-
-/**
- * Returns the value from the previous render.
- */
-export function usePreviousValue<V>(value: V): V | undefined {
-    const prevValueRef = React.useRef<V>();
-    const prevValue = prevValueRef.current;
-    React.useEffect(() => {
-        prevValueRef.current = value;
-    }, [value]);
-    return prevValue;
-}

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