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

package/src/components/slideshow/SlideshowControls.tsx

@@ -1,243 +0,0 @@
-import React, { RefObject, useCallback, useMemo } from 'react';
-
-import classNames from 'classnames';
-import range from 'lodash/range';
-
-import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
-import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { WINDOW } from '@lumx/react/constants';
-import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
-import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { useSwipeNavigate } from './useSwipeNavigate';
-import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';
-import { usePaginationVisibleRange } from './usePaginationVisibleRange';
-
-/**
- * Defines the props of the component.
- */
-export interface SlideshowControlsProps extends GenericProps, HasTheme {
-    /** Index of the current slide. */
-    activeIndex?: number;
-    /** Props to pass to the next button (minus those already set by the SlideshowControls props). */
-    nextButtonProps: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
-    /** Reference to the parent element on which we want to listen touch swipe. */
-    parentRef?: RefObject<HTMLDivElement> | HTMLDivElement | null;
-    /** Props to pass to the previous button (minus those already set by the SlideshowControls props). */
-    previousButtonProps: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
-    /** Props to pass to the pagination wrapper */
-    paginationProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'role'>;
-    /** Number of slides. */
-    slidesCount: number;
-    /** On next button click callback. */
-    onNextClick?(loopback?: boolean): void;
-    /** On pagination change callback. */
-    onPaginationClick?(index: number): void;
-    /** On previous button click callback. */
-    onPreviousClick?(loopback?: boolean): void;
-    /** whether the slideshow is currently playing */
-    isAutoPlaying?: boolean;
-    /**
-     * function to be executed in order to retrieve the label for the pagination item
-     * @deprecated Use paginationItemProps instead.
-     * */
-    paginationItemLabel?: (index: number) => string;
-    /**
-     * function to be executed in order to retrieve the props for a pagination item.
-     */
-    paginationItemProps?: (itemIndex: number) => React.HTMLAttributes<HTMLButtonElement> & { label?: string };
-    /** Props to pass to the lay button (minus those already set by the SlideshowControls props). */
-    playButtonProps?: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SlideshowControls';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<SlideshowControlsProps> = {
-    activeIndex: 0,
-};
-
-/**
- * SlideshowControls component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const InternalSlideshowControls = forwardRef<SlideshowControlsProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        activeIndex = DEFAULT_PROPS.activeIndex,
-        className,
-        nextButtonProps,
-        onNextClick,
-        onPaginationClick,
-        onPreviousClick,
-        parentRef,
-        previousButtonProps,
-        paginationProps,
-        slidesCount,
-        theme = defaultTheme,
-        isAutoPlaying = false,
-        playButtonProps,
-        paginationItemLabel,
-        paginationItemProps,
-        ...forwardedProps
-    } = props;
-
-    let parent;
-    if (WINDOW) {
-        // Checking window object to avoid errors in SSR.
-        parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
-    }
-    const paginationRef = React.useRef(null);
-    // Listen to touch swipe navigate left & right.
-    useSwipeNavigate(
-        parent,
-        // Go next without loopback.
-        useCallback(() => onNextClick?.(false), [onNextClick]),
-        // Go previous without loopback.
-        useCallback(() => onPreviousClick?.(false), [onPreviousClick]),
-    );
-
-    /**
-     * Add roving tab index pattern to pagination items and activate slide on focus.
-     */
-    useRovingTabIndex({
-        parentRef: paginationRef,
-        elementSelector: 'button',
-        keepTabIndex: true,
-        onElementFocus: (element) => {
-            element.click();
-        },
-    });
-
-    // Pagination "bullet" range.
-    const visibleRange = usePaginationVisibleRange(activeIndex as number, slidesCount);
-
-    // Inline style of wrapper element.
-    const wrapperStyle = { transform: `translateX(-${PAGINATION_ITEM_SIZE * visibleRange.min}px)` };
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
-                [`${CLASSNAME}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX,
-            })}
-        >
-            <IconButton
-                {...previousButtonProps}
-                icon={mdiChevronLeft}
-                className={`${CLASSNAME}__navigation`}
-                color={theme === Theme.dark ? 'light' : 'dark'}
-                emphasis={Emphasis.low}
-                onClick={onPreviousClick}
-            />
-            <div ref={paginationRef} className={`${CLASSNAME}__pagination`}>
-                <div
-                    className={`${CLASSNAME}__pagination-items`}
-                    style={wrapperStyle}
-                    role="tablist"
-                    {...paginationProps}
-                >
-                    {useMemo(
-                        () =>
-                            range(slidesCount).map((index) => {
-                                const isOnEdge =
-                                    index !== 0 &&
-                                    index !== slidesCount - 1 &&
-                                    (index === visibleRange.min || index === visibleRange.max);
-                                const isActive = activeIndex === index;
-                                const isOutRange = index < visibleRange.min || index > visibleRange.max;
-                                const {
-                                    className: itemClassName = undefined,
-                                    label = undefined,
-                                    ...itemProps
-                                } = paginationItemProps ? paginationItemProps(index) : {};
-
-                                const ariaLabel =
-                                    label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
-
-                                return (
-                                    <button
-                                        className={classNames(
-                                            handleBasicClasses({
-                                                prefix: `${CLASSNAME}__pagination-item`,
-                                                isActive,
-                                                isOnEdge,
-                                                isOutRange,
-                                            }),
-                                            itemClassName,
-                                        )}
-                                        key={index}
-                                        type="button"
-                                        tabIndex={isActive ? undefined : -1}
-                                        role="tab"
-                                        aria-selected={isActive}
-                                        onClick={() => onPaginationClick?.(index)}
-                                        aria-label={ariaLabel}
-                                        {...itemProps}
-                                    />
-                                );
-                            }),
-                        [
-                            slidesCount,
-                            visibleRange.min,
-                            visibleRange.max,
-                            activeIndex,
-                            paginationItemProps,
-                            paginationItemLabel,
-                            onPaginationClick,
-                        ],
-                    )}
-                </div>
-            </div>
-
-            {playButtonProps ? (
-                <IconButton
-                    {...playButtonProps}
-                    icon={isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline}
-                    className={`${CLASSNAME}__play`}
-                    color={theme === Theme.dark ? 'light' : 'dark'}
-                    emphasis={Emphasis.low}
-                />
-            ) : null}
-
-            <IconButton
-                {...nextButtonProps}
-                icon={mdiChevronRight}
-                className={`${CLASSNAME}__navigation`}
-                color={theme === Theme.dark ? 'light' : 'dark'}
-                emphasis={Emphasis.low}
-                onClick={onNextClick}
-            />
-        </div>
-    );
-});
-
-InternalSlideshowControls.displayName = COMPONENT_NAME;
-InternalSlideshowControls.className = CLASSNAME;
-InternalSlideshowControls.defaultProps = DEFAULT_PROPS;
-
-export const SlideshowControls = Object.assign(InternalSlideshowControls, {
-    useSlideshowControls,
-    useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS,
-});

package/src/components/slideshow/SlideshowItem.tsx

@@ -1,44 +0,0 @@
-import classNames from 'classnames';
-
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface SlideshowItemProps extends GenericProps {
-    /** interval in which slides are automatically shown */
-    interval?: number;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SlideshowItem';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * SlideshowItem component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SlideshowItem = forwardRef<SlideshowItemProps, HTMLDivElement>((props, ref) => {
-    const { className, children, ...forwardedProps } = props;
-    return (
-        <div ref={ref} className={classNames(className, CLASSNAME)} {...forwardedProps}>
-            {children}
-        </div>
-    );
-});
-
-SlideshowItem.displayName = COMPONENT_NAME;
-SlideshowItem.className = CLASSNAME;

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useSlideFocusManagement } from './useSlideFocusManagement';
-
-/**
- * Defines the props of the component.
- */
-export interface SlideshowItemGroupProps extends GenericProps {
-    role?: 'tabpanel' | 'group';
-    label?: string;
-    isDisplayed?: boolean;
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SlideshowItemGroup';
-
-/**
- * Component default class name and class prefix.
- */
-export const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-export const buildSlideShowGroupId = (slidesId: string, index: number) => `${slidesId}-slide-${index}`;
-
-/**
- * SlideshowItemGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SlideshowItemGroup = forwardRef<SlideshowItemGroupProps, HTMLDivElement>((props, ref) => {
-    const { className, children, role = 'group', label, isDisplayed, ...forwardedProps } = props;
-    const groupRef = React.useRef<HTMLDivElement>(null);
-
-    useSlideFocusManagement({ isSlideDisplayed: isDisplayed, slideRef: groupRef });
-
-    return (
-        <div
-            ref={mergeRefs(groupRef, ref)}
-            role={role}
-            className={classNames(className, CLASSNAME)}
-            aria-roledescription="slide"
-            aria-label={label}
-            {...forwardedProps}
-        >
-            {children}
-        </div>
-    );
-});
-
-SlideshowItemGroup.displayName = COMPONENT_NAME;
-SlideshowItemGroup.className = CLASSNAME;

package/src/components/slideshow/constants.ts

@@ -1,24 +0,0 @@
-/**
- * Autoplay default interval in ms.
- */
-export const AUTOPLAY_DEFAULT_INTERVAL = 5000;
-
-/**
- * Full width size in percent.
- */
-export const FULL_WIDTH_PERCENT = 100;
-
-/**
- * Edge from the active index.
- */
-export const EDGE_FROM_ACTIVE_INDEX = 2;
-
-/**
- * Max number of pagination items.
- */
-export const PAGINATION_ITEMS_MAX = 5;
-
-/**
- * Size of a pagination item. Used to translate wrapper.
- */
-export const PAGINATION_ITEM_SIZE = 12;

package/src/components/slideshow/index.ts

@@ -1,4 +0,0 @@
-export * from './Slideshow';
-export * from './SlideshowItem';
-export * from './SlideshowControls';
-export * from './Slides';

package/src/components/slideshow/useKeyNavigate.ts

@@ -1,28 +0,0 @@
-import { useEffect } from 'react';
-
-/**
- * Listen keyboard to navigate left and right.
- */
-export function useKeyNavigate(element?: HTMLElement | null, onNext?: () => void, onPrevious?: () => void): void {
-    useEffect(() => {
-        if (!element) return undefined;
-        const onKeyNavigate = (evt: KeyboardEvent) => {
-            let callback;
-            if (evt?.key === 'ArrowRight') {
-                callback = onNext;
-            } else if (evt?.key === 'ArrowLeft') {
-                callback = onPrevious;
-            }
-            if (!callback) return;
-
-            callback();
-            evt.preventDefault();
-            evt.stopPropagation();
-        };
-
-        element.addEventListener('keydown', onKeyNavigate);
-        return () => {
-            element.removeEventListener('keydown', onKeyNavigate);
-        };
-    }, [onPrevious, onNext, element]);
-}

package/src/components/slideshow/usePaginationVisibleRange.ts

@@ -1,37 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { EDGE_FROM_ACTIVE_INDEX, PAGINATION_ITEMS_MAX } from '@lumx/react/components/slideshow/constants';
-
-type Range = { min: number; max: number };
-
-/**
- * Calculate the currently visible pagination "bullet" range.
- */
-export function usePaginationVisibleRange(activeIndex: number, slideCount: number): Range {
-    const previousVisibleRangeRef = useRef<Range>();
-    return useMemo(() => {
-        const lastSlide = slideCount - 1;
-        const { current: previousVisibleRange } = previousVisibleRangeRef;
-        let newVisibleRange: Range;
-        if (activeIndex === previousVisibleRange?.max && activeIndex < lastSlide) {
-            newVisibleRange = { min: previousVisibleRange.min + 1, max: previousVisibleRange.max + 1 };
-        } else if (activeIndex === previousVisibleRange?.min && activeIndex > 0) {
-            newVisibleRange = { min: previousVisibleRange.min - 1, max: previousVisibleRange.max - 1 };
-        } else {
-            const deltaItems = PAGINATION_ITEMS_MAX - 1;
-            let min = activeIndex - EDGE_FROM_ACTIVE_INDEX;
-            let max = activeIndex + EDGE_FROM_ACTIVE_INDEX;
-
-            if (activeIndex > lastSlide - EDGE_FROM_ACTIVE_INDEX) {
-                min = lastSlide - deltaItems;
-                max = lastSlide;
-            } else if (activeIndex < deltaItems) {
-                min = 0;
-                max = deltaItems;
-            }
-
-            newVisibleRange = { min, max };
-        }
-        previousVisibleRangeRef.current = newVisibleRange;
-        return newVisibleRange;
-    }, [activeIndex, slideCount]);
-}

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -1,92 +0,0 @@
-import { useEffect } from 'react';
-import { getFocusableElements } from '@lumx/react/utils/browser/focus/getFocusableElements';
-
-export interface UseSlideFocusManagementProps {
-    isSlideDisplayed?: boolean;
-    slideRef: React.RefObject<HTMLDivElement>;
-}
-
-/**
- * Classname set on elements whose focus was blocked.
- * This is to easily find elements that have been tempered with,
- * and not elements whose focus was already initially blocked.
- * */
-const BLOCKED_FOCUS_CLASSNAME = 'focus-blocked';
-
-/**
- * Manage how slides must behave when visible or not.
- * When not visible, they should be hidden from screen readers and not focusable.
- */
-export const useSlideFocusManagement = ({ isSlideDisplayed, slideRef }: UseSlideFocusManagementProps) => {
-    useEffect(() => {
-        const element = slideRef?.current;
-
-        if (!element) {
-            return undefined;
-        }
-
-        /**
-         * Display given slide to screen readers and, if focus was blocked, restore focus on elements.
-         */
-        const enableSlide = () => {
-            // Hide from screen readers
-            element.setAttribute('aria-hidden', 'false');
-            // Find elements we have blocked focus on
-            element.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`).forEach((focusableElement) => {
-                focusableElement.removeAttribute('tabindex');
-                focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
-            });
-        };
-
-        /**
-         * Hide given slide from screen readers and block focus on all focusable elements within.
-         */
-        const blockSlide = () => {
-            element.setAttribute('aria-hidden', 'true');
-            getFocusableElements(element).forEach((focusableElement) => {
-                focusableElement.setAttribute('tabindex', '-1');
-                focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
-            });
-        };
-
-        const handleDisplay = () => {
-            if (!element) {
-                return;
-            }
-            if (isSlideDisplayed) {
-                enableSlide();
-            } else {
-                blockSlide();
-            }
-        };
-
-        // Callback function to execute when mutations are observed
-        const callback: MutationCallback = (mutationsList) => {
-            if (element) {
-                for (const mutation of mutationsList) {
-                    if (mutation.type === 'childList') {
-                        handleDisplay();
-                    }
-                }
-            }
-        };
-
-        // Create an observer instance linked to the callback function
-        const observer = new MutationObserver(callback);
-
-        if (element) {
-            handleDisplay();
-
-            /** If slide is hidden, start observing for elements to block focus  */
-            if (!isSlideDisplayed) {
-                observer.observe(element, { attributes: true, childList: true, subtree: true });
-            }
-        }
-
-        return () => {
-            if (!isSlideDisplayed) {
-                observer.disconnect();
-            }
-        };
-    }, [isSlideDisplayed, slideRef]);
-};

package/src/components/slideshow/useSwipeNavigate.ts

@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-import { detectHorizontalSwipe } from '@lumx/core/js/utils';
-
-const isTouchDevice = () => 'ontouchstart' in window;
-
-/**
- * Listen swipe to navigate left and right.
- */
-export function useSwipeNavigate(element?: HTMLElement | null, onNext?: () => void, onPrevious?: () => void): void {
-    useEffect(() => {
-        if (!element || !isTouchDevice()) return undefined;
-
-        return detectHorizontalSwipe(element, (swipe) => {
-            const callback = swipe === 'right' ? onPrevious : onNext;
-            callback?.();
-        });
-    }, [onPrevious, onNext, element]);
-}

package/src/components/switch/Switch.stories.tsx

@@ -1,49 +0,0 @@
-import { Alignment, Switch, SwitchProps } from '@lumx/react';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-export default {
-    title: 'LumX components/switch/Switch',
-    component: Switch,
-    args: {
-        ...Switch.defaultProps,
-        children: 'Switch label',
-        name: 'switch-html-name',
-        value: 'switch-html-value',
-        isChecked: false,
-    },
-    argTypes: {
-        position: getSelectArgType<SwitchProps['position']>([Alignment.left, Alignment.right]),
-        onChange: { action: true },
-    },
-    decorators: [withValueOnChange({ valueProp: 'isChecked' })],
-};
-
-/**
- * Default switch
- */
-export const Default = {};
-
-/**
- * Switch disabled
- */
-export const Disabled = {
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: {
-                    disabled: { isDisabled: true },
-                    'aria-disabled': { 'aria-disabled': true },
-                },
-            },
-        }),
-    ],
-};
-
-/**
- * Switch positioned to the right
- */
-export const PositionRight = {
-    args: { position: Alignment.right },
-};