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

package/src/hooks/useFocus.tsx

@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-/**
- * Hook focusing an element when defined and `focus` boolean `true`.
- *
- * @param element       Element to focus.
- * @param shouldFocus   Boolean flag to trigger the focus
- */
-export function useFocus(element: HTMLElement | null | undefined, shouldFocus = true): void {
-    const [wasFocus, setWasFocus] = useState(false);
-    useEffect(
-        () => {
-            if (shouldFocus && wasFocus !== shouldFocus && element) {
-                element.focus();
-                setWasFocus(shouldFocus);
-            }
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [element, shouldFocus],
-    );
-}

package/src/hooks/useFocusTrap.ts

@@ -1,93 +0,0 @@
-import { useEffect } from 'react';
-
-import { DOCUMENT } from '@lumx/react/constants';
-import { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';
-import { Falsy } from '@lumx/react/utils/type';
-import { Listener, makeListenerTowerContext } from '@lumx/react/utils/function/makeListenerTowerContext';
-
-const FOCUS_TRAPS = makeListenerTowerContext();
-
-/**
- * Trap 'Tab' focus switch inside the `focusZoneElement`.
- *
- * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one
- * gets activated again.
- *
- * @param focusZoneElement The element in which to trap the focus.
- * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element
- *                         will be focused).
- */
-export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement?: HTMLElement | null): void {
-    useEffect(() => {
-        // Body element can be undefined in SSR context.
-        const rootElement = DOCUMENT?.body;
-
-        if (!rootElement || !focusZoneElement) {
-            return undefined;
-        }
-
-        // Use the shadow root as focusZoneElement when available
-        const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
-
-        // Trap 'Tab' key down focus switch into the focus zone.
-        const trapTabFocusInFocusZone = (evt: KeyboardEvent) => {
-            const { key } = evt;
-            if (key !== 'Tab') {
-                return;
-            }
-
-            const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
-
-            // Prevent focus switch if no focusable available.
-            if (!focusable.first) {
-                evt.preventDefault();
-                return;
-            }
-
-            const activeElement = focusZoneElement.shadowRoot
-                ? focusZoneElement.shadowRoot.activeElement
-                : document.activeElement;
-
-            if (
-                // No previous focus
-                !activeElement ||
-                // Previous focus is at the end of the focus zone.
-                (!evt.shiftKey && activeElement === focusable.last) ||
-                // Previous focus is outside the focus zone
-                !focusZoneElementOrShadowRoot.contains(activeElement)
-            ) {
-                focusable.first.focus();
-                evt.preventDefault();
-                return;
-            }
-
-            if (
-                // Focus order reversed
-                evt.shiftKey &&
-                // Previous focus is at the start of the focus zone.
-                activeElement === focusable.first
-            ) {
-                focusable.last.focus();
-                evt.preventDefault();
-            }
-        };
-
-        const focusTrap: Listener = {
-            enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
-            disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone),
-        };
-
-        // SETUP:
-        if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
-            // Focus the given element.
-            focusElement.focus({ preventScroll: true });
-        } else {
-            // Focus the first focusable element in the zone.
-            getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({ preventScroll: true });
-        }
-        FOCUS_TRAPS.register(focusTrap);
-
-        // TEARDOWN:
-        return () => FOCUS_TRAPS.unregister(focusTrap);
-    }, [focusElement, focusZoneElement]);
-}

package/src/hooks/useFocusWithin.ts

@@ -1,33 +0,0 @@
-import { useEffect } from 'react';
-
-export interface UseFocusWithinOptions {
-    /** element to add the focus within to */
-    element: HTMLElement | null;
-    /** callback to be executed on focus in */
-    onFocusIn: (ev: FocusEvent) => void;
-    /** callback to be executed on focus out */
-    onFocusOut: (ev: FocusEvent) => void;
-}
-
-/**
- * Hook that allows to control when there is a focus event within a given element, meaning
- * that any element within the given target will trigger the focus in and focus out events.
- * @param options - UseFocusWithinOptions
- */
-export const useFocusWithin = ({ element, onFocusIn, onFocusOut }: UseFocusWithinOptions) => {
-    useEffect(() => {
-        if (element) {
-            element.addEventListener('focusin', onFocusIn);
-
-            element.addEventListener('focusout', onFocusOut);
-        }
-
-        return () => {
-            if (element) {
-                element.removeEventListener('focusin', onFocusIn);
-
-                element.removeEventListener('focusout', onFocusOut);
-            }
-        };
-    }, [onFocusIn, element, onFocusOut]);
-};

package/src/hooks/useId.test.tsx

@@ -1,23 +0,0 @@
-import { useId } from '@lumx/react/hooks/useId';
-import { render } from '@testing-library/react';
-import React from 'react';
-
-function setup() {
-    const Component = (): any => useId();
-    const result = render(<Component />);
-    const rerender = () => result.rerender(<Component />);
-    return { ...result, rerender };
-}
-
-describe(useId, () => {
-    it('should render a unique id stable after re-renders', () => {
-        const result = setup();
-        // Id generated
-        const initialId = result.container.textContent;
-        expect(initialId).toMatch(/:lumx\d+:/);
-
-        // Id is stable after re-render
-        result.rerender();
-        expect(result.container.textContent).toEqual(initialId);
-    });
-});

package/src/hooks/useId.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-
-let i = 0;
-
-/**
- * Generate a unique id (for use in a11y or other id based DOM linking).
- *
- * (Tries to emulate React 18 useId hook, to remove once we upgrade React)
- */
-export function useId() {
-    return React.useMemo(() => {
-        i += 1;
-        return `:lumx${i}:`;
-    }, []);
-}

package/src/hooks/useImageSize.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { RectSize } from '@lumx/react/utils/type';
-
-/** Get natural image size after load. */
-export function useImageSize(imgRef: React.RefObject<HTMLImageElement>, getInitialSize?: () => RectSize | null) {
-    const [imageSize, setImageSize] = React.useState<null | RectSize>(getInitialSize || null);
-    React.useEffect(() => {
-        const { current: img } = imgRef;
-        if (!img) {
-            return undefined;
-        }
-        const onLoad = () => setImageSize({ width: img.naturalWidth, height: img.naturalHeight });
-        img.addEventListener('load', onLoad);
-        return () => img.removeEventListener('load', onLoad);
-    }, [imgRef]);
-    return imageSize;
-}

package/src/hooks/useInfiniteScroll.tsx

@@ -1,60 +0,0 @@
-import React, { useEffect } from 'react';
-
-type useInfiniteScrollType = (
-    ref: React.RefObject<HTMLElement>,
-    callback?: EventCallback,
-    callbackOnMount?: boolean,
-) => void;
-type EventCallback = (evt?: Event) => void;
-
-// The error margin in px we want to have for triggering infinite scroll
-const SCROLL_TRIGGER_MARGIN = 5;
-
-/**
- * Listen to clicks away from a given element and callback the passed in function.
- *
- * @param  ref               A reference to the element on which you want to listen scroll event.
- * @param  [callback]        A callback function to call when the bottom of the reference element is reached.
- * @param  [callbackOnMount] A callback function to call when the component is mounted.
- */
-export const useInfiniteScroll: useInfiniteScrollType = (
-    ref,
-    callback,
-    callbackOnMount = false,
-    scrollTriggerMargin = SCROLL_TRIGGER_MARGIN,
-) => {
-    useEffect(() => {
-        const { current } = ref;
-        if (!callback || !current) {
-            return undefined;
-        }
-
-        const isAtBottom = () =>
-            Boolean(
-                current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin,
-            );
-
-        const onScroll = (e?: Event): void => {
-            if (isAtBottom()) {
-                callback(e);
-            }
-        };
-
-        if (isAtBottom()) {
-            onScroll();
-        }
-
-        current.addEventListener('scroll', onScroll);
-        current.addEventListener('resize', onScroll);
-        return () => {
-            current.removeEventListener('scroll', onScroll);
-            current.removeEventListener('resize', onScroll);
-        };
-    }, [ref, callback, scrollTriggerMargin]);
-
-    useEffect(() => {
-        if (callback && callbackOnMount) {
-            callback();
-        }
-    }, [callback, callbackOnMount]);
-};

package/src/hooks/useIntersectionObserver.tsx

@@ -1,43 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export type Intersections<T> = Map<T, IntersectionObserverEntry>;
-
-/**
- * Convenient hook to create interaction observers.
- *
- * @param elements Elements to observe.
- * @param options  IntersectionObserver options.
- * @return Map of intersections.
- */
-export function useIntersectionObserver<T extends Element>(
-    elements: Array<T | null | undefined>,
-    options?: IntersectionObserverInit,
-): Intersections<T> {
-    const [intersections, setIntersections] = useState<Intersections<T>>(() => new Map());
-
-    useEffect(
-        () => {
-            if (elements.length < 1 || !elements.some(Boolean)) {
-                return undefined;
-            }
-
-            const observer = new IntersectionObserver((entries) => {
-                for (const entry of entries) {
-                    intersections.set(entry.target as T, entry);
-                }
-                setIntersections(new Map(intersections));
-            }, options);
-
-            for (const element of elements) {
-                if (element) {
-                    observer.observe(element);
-                }
-            }
-            return () => observer.disconnect();
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [...elements],
-    );
-
-    return intersections;
-}

package/src/hooks/useInterval.tsx

@@ -1,31 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-import isFunction from 'lodash/isFunction';
-import { Callback } from '@lumx/react/utils/type';
-
-/**
- * Making setInterval Declarative with React Hooks.
- * Credits: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
- *
- * @param callback Function called by setInterval.
- * @param     delay    Delay for setInterval.
- */
-export function useInterval(callback: Callback, delay: number | null): void {
-    const savedCallback = useRef<Callback>();
-
-    useEffect(() => {
-        savedCallback.current = callback;
-    });
-
-    useEffect(() => {
-        if (delay === null) return undefined;
-
-        function tick() {
-            if (isFunction(savedCallback.current)) {
-                savedCallback.current();
-            }
-        }
-        const id = setInterval(tick, delay);
-        return () => clearInterval(id);
-    }, [delay]);
-}

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;
-}