@lumx/react 3.20.1-alpha.5 → 3.20.1-alpha.50

package/src/components/tooltip/constants.ts

@@ -1,8 +0,0 @@
-import { POPOVER_ZINDEX } from '../popover/constants';
-
-export const ARIA_LINK_MODES = ['aria-describedby', 'aria-labelledby'] as const;
-
-/**
- * Make sure tooltip appear above popovers.
- */
-export const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;

package/src/components/tooltip/context.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-/** Empty object */
-type TooltipContextValue = NonNullable<unknown>;
-
-const DEFAULT_VALUE = {};
-
-/**
- * Tooltip react context simply used as a marker to know when parent react node have a tooltip
- */
-const TooltipContext = React.createContext<TooltipContextValue | undefined>(undefined);
-
-export const TooltipContextProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
-    <TooltipContext.Provider value={DEFAULT_VALUE}>{children}</TooltipContext.Provider>
-);
-
-export const useTooltipContext = () => React.useContext(TooltipContext);

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -1,55 +0,0 @@
-import React, { cloneElement, ReactNode, useMemo } from 'react';
-
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-
-interface Options {
-    /** Original tooltip anchor */
-    children: ReactNode;
-    /** Set tooltip anchor element */
-    setAnchorElement: (e: HTMLDivElement) => void;
-    /** Whether the tooltip is open or not */
-    isMounted: boolean | undefined;
-    /** Tooltip id */
-    id: string;
-    /** Tooltip label*/
-    label?: string | null | false;
-    /** Choose how the tooltip text should link to the anchor */
-    ariaLinkMode: 'aria-describedby' | 'aria-labelledby';
-}
-
-/**
- * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
- * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)
- * will be wrapped in a <span>.
- */
-export const useInjectTooltipRef = (options: Options): ReactNode => {
-    const { children, setAnchorElement, isMounted, id, label, ariaLinkMode } = options;
-    // Only add link when mounted
-    const linkId = isMounted ? id : undefined;
-
-    return useMemo(() => {
-        if (!label) return children;
-
-        // Non-disabled element
-        if (React.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
-            const ref = mergeRefs((children as any).ref, setAnchorElement);
-            const props = { ...children.props, ref };
-
-            // Do not add label/description if the tooltip label is already in aria-label
-            if (linkId && label !== props['aria-label']) {
-                if (props[ariaLinkMode]) props[ariaLinkMode] += ' ';
-                else props[ariaLinkMode] = '';
-                props[ariaLinkMode] += linkId;
-            }
-
-            return cloneElement(children, props);
-        }
-
-        const aria = linkId ? { [ariaLinkMode]: linkId } : undefined;
-        return (
-            <div className="lumx-tooltip-anchor-wrapper" ref={setAnchorElement} {...aria}>
-                {children}
-            </div>
-        );
-    }, [label, children, setAnchorElement, linkId, ariaLinkMode]);
-};

package/src/components/tooltip/useTooltipOpen.tsx

@@ -1,143 +0,0 @@
-import { MutableRefObject, useEffect, useRef, useState } from 'react';
-import { isHoverNotSupported } from '@lumx/react/utils/browser/isHoverNotSupported';
-import { IS_BROWSER, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';
-import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
-import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
-
-/**
- * Hook controlling tooltip visibility using mouse hover the anchor and delay.
- *
- * @param  delay         Delay in millisecond to display the tooltip.
- * @param  anchorElement Tooltip anchor element.
- * @return whether or not to show the tooltip.
- */
-export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null) {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const onPopperMount = useRef<any>(null) as MutableRefObject<(elem: HTMLElement | null) => void>;
-
-    // Global close on escape
-    const [closeCallback, setCloseCallback] = useState<undefined | (() => void)>(undefined);
-    useCallbackOnEscape(isOpen ? closeCallback : undefined);
-
-    useEffect(() => {
-        if (!anchorElement) {
-            return undefined;
-        }
-        let timer: number | undefined;
-        let openStartTime: number | undefined;
-        let shouldOpen: boolean | undefined;
-
-        // Run timer to defer updating the isOpen state.
-        const deferUpdate = (duration: number) => {
-            if (timer) clearTimeout(timer);
-            const update = () => {
-                setIsOpen(!!shouldOpen);
-            };
-            // Skip timeout in fake browsers
-            if (!IS_BROWSER) update();
-            else timer = setTimeout(update, duration) as any;
-        };
-
-        const hoverNotSupported = isHoverNotSupported();
-        const hasTouch = 'ontouchstart' in window;
-
-        // Adapt open/close delay
-        const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);
-        const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;
-
-        // Open (or/and cancel closing) of tooltip.
-        const open = () => {
-            if (shouldOpen && !timer) return;
-            shouldOpen = true;
-            openStartTime = Date.now();
-            deferUpdate(openDelay);
-        };
-
-        // Close or cancel opening of tooltip
-        const getClose = (overrideDelay = closeDelay) => {
-            if (!shouldOpen && !timer) return;
-            shouldOpen = false;
-            deferUpdate(overrideDelay);
-        };
-        const close = () => getClose(closeDelay);
-        const closeImmediately = () => getClose(0);
-        setCloseCallback(() => closeImmediately);
-
-        // Adapt event to browsers with or without `hover` support.
-        const events: Array<[Node, Event['type'], any]> = [];
-        if (hoverNotSupported) {
-            /**
-             * Handle touchend event
-             * If end comes before the open delay => cancel tooltip (close immediate).
-             * Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
-             */
-            const longPressEnd = (evt: Event) => {
-                if (!openStartTime) return;
-                if (Date.now() - openStartTime >= openDelay) {
-                    // Tooltip take priority, event prevented.
-                    evt.stopPropagation();
-                    evt.preventDefault();
-                    anchorElement.focus();
-                    // Close with delay.
-                    close();
-                } else {
-                    // Close immediately.
-                    closeImmediately();
-                }
-            };
-
-            events.push(
-                [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],
-                [anchorElement, hasTouch ? 'touchend' : 'mouseup', longPressEnd],
-            );
-        } else {
-            events.push(
-                [anchorElement, 'mouseenter', open],
-                [anchorElement, 'mouseleave', close],
-                [anchorElement, 'mouseup', closeImmediately],
-            );
-
-            onPopperMount.current = (popperElement: HTMLElement | null) => {
-                if (!popperElement) return;
-                // Popper element hover
-                popperElement.addEventListener('mouseenter', open);
-                popperElement.addEventListener('mouseleave', close);
-                // Add to event list to remove on unmount
-                events.push([popperElement, 'mouseenter', open], [popperElement, 'mouseleave', close]);
-            };
-        }
-
-        // Events always applied no matter the browser:.
-        events.push(
-            // Open on focus (only if focus is visible).
-            [
-                anchorElement,
-                'focusin',
-                (e: Event) => {
-                    // Skip if focus is not visible
-                    if (!isFocusVisible(e.target as HTMLElement)) return;
-                    open();
-                },
-            ],
-            // Close on lost focus.
-            [anchorElement, 'focusout', closeImmediately],
-        );
-
-        // Attach events
-        for (const [node, eventType, eventHandler] of events) {
-            node.addEventListener(eventType, eventHandler);
-        }
-        return () => {
-            // Clear pending timers.
-            if (timer) clearTimeout(timer);
-
-            // Detach events.
-            for (const [node, eventType, eventHandler] of events) {
-                node.removeEventListener(eventType, eventHandler);
-            }
-        };
-    }, [anchorElement, delay]);
-
-    return { isOpen, onPopperMount: onPopperMount.current };
-}

package/src/components/uploader/Uploader.stories.tsx

@@ -1,109 +0,0 @@
-import React from 'react';
-import map from 'lodash/map';
-
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-
-import { AspectRatio, GridColumn, Size, Uploader, UploaderVariant } from '@lumx/react';
-import { mdiTextBoxPlus } from '@lumx/icons';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-
-export default {
-    title: 'LumX components/uploader/Uploader',
-    component: Uploader,
-    argTypes: {
-        onClick: { action: true },
-        icon: iconArgType,
-        aspectRatio: getSelectArgType(AspectRatio),
-    },
-};
-
-const UPLOADER_VARIANTS = [UploaderVariant.square, UploaderVariant.rounded, UploaderVariant.circle];
-const UPLOADER_SIZES = [Size.xl, Size.xxl];
-const ASPECT_RATIOS = [AspectRatio.wide, AspectRatio.horizontal, AspectRatio.vertical, AspectRatio.square];
-
-export const WithLabel = {
-    args: { label: 'Pick a file' },
-};
-
-export const WithLabelAndIcon = {
-    args: { label: 'Pick a file', icon: mdiTextBoxPlus },
-};
-
-// Decorator handling the file input change
-function withFileInputChange() {
-    // eslint-disable-next-line react/display-name
-    return (Story: any, ctx: any) => {
-        const [files, onChange] = React.useState<File[]>([]);
-        return (
-            <>
-                <Story args={{ ...ctx.args, fileInputProps: { ...ctx.args.fileInputProps, onChange } }} />
-                <p>Selection: {map(files, 'name').join(', ')}</p>
-            </>
-        );
-    };
-}
-
-/**
- * Use the embedded native input file which also make it possible to drop files onto it.
- */
-export const FileInput = {
-    ...WithLabelAndIcon,
-    decorators: [
-        withNestedProps(),
-        withFileInputChange(),
-        withCombinations({
-            combinations: {
-                sections: {
-                    'Single file': { fileInputProps: {} },
-                    'Multiple files': { fileInputProps: { multiple: true } },
-                    'Images only': { fileInputProps: { multiple: true, accept: 'image/*' } },
-                },
-            },
-        }),
-        withWrapper({ maxColumns: 3, itemMinWidth: 200 }, GridColumn),
-    ],
-};
-
-/** All variants */
-export const Variants = {
-    args: WithLabelAndIcon.args,
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: { key: 'variant', options: UPLOADER_VARIANTS },
-                cols: {
-                    Default: {},
-                    Disabled: { isDisabled: true },
-                    'Aria Disabled': { 'aria-disabled': true },
-                },
-                sections: {
-                    Button: {},
-                    'File input': { fileInputProps: {} },
-                },
-            },
-        }),
-        withWrapper({ maxColumns: 2, itemMinWidth: 470 }, GridColumn),
-    ],
-};
-
-/** All sizes & ratio */
-export const RatioAndSize = {
-    args: WithLabelAndIcon.args,
-    decorators: [
-        withCombinations({
-            combinations: {
-                cols: { key: 'size', options: UPLOADER_SIZES },
-                rows: { key: 'aspectRatio', options: withUndefined(ASPECT_RATIOS) },
-                sections: {
-                    Button: {},
-                    'File input': { fileInputProps: {} },
-                },
-            },
-        }),
-        withWrapper({ maxColumns: 2, itemMinWidth: 470 }, GridColumn),
-    ],
-};

package/src/components/uploader/Uploader.test.tsx

@@ -1,148 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-
-import { render, screen } from '@testing-library/react';
-import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event';
-import { mdiPlus } from '@lumx/icons';
-import { Uploader, UploaderProps } from './Uploader';
-
-const CLASSNAME = Uploader.className as string;
-
-type SetupProps = Partial<UploaderProps>;
-
-/**
- * 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(<Uploader {...props} />, { wrapper });
-    const uploader = getByClassName(document.body, CLASSNAME);
-    const label = queryByClassName(uploader, `${CLASSNAME}__label`);
-    const icon = queryByClassName(uploader, `${CLASSNAME}__icon`);
-    const input = queryByClassName(uploader, `${CLASSNAME}__input`);
-
-    return { props, uploader, label, icon, input };
-};
-
-describe(`<${Uploader.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const label = 'Label';
-            const { uploader } = setup({ label });
-
-            expect(uploader).toHaveClass(CLASSNAME);
-            expect(uploader).toBe(screen.queryByRole('button', { name: label }));
-            expect(uploader).toHaveClass('lumx-uploader--aspect-ratio-horizontal');
-            expect(uploader).toHaveClass('lumx-uploader--size-xl');
-            expect(uploader).toHaveClass('lumx-uploader--theme-light');
-            expect(uploader).toHaveClass('lumx-uploader--variant-square');
-        });
-
-        it('should render icon', () => {
-            const { icon } = setup({ icon: mdiPlus });
-            expect(icon).toBeInTheDocument();
-        });
-
-        it('should render variant circle', () => {
-            const { uploader } = setup({
-                variant: 'circle',
-                // Ratio should be ignored
-                aspectRatio: 'vertical',
-            });
-
-            expect(uploader).toHaveClass(CLASSNAME);
-            expect(uploader).toHaveClass('lumx-uploader--aspect-ratio-square');
-            expect(uploader).toHaveClass('lumx-uploader--size-xl');
-            expect(uploader).toHaveClass('lumx-uploader--theme-light');
-            expect(uploader).toHaveClass('lumx-uploader--variant-circle');
-        });
-
-        it('should render variant rounded', () => {
-            const { uploader } = setup({ variant: 'rounded' });
-
-            expect(uploader).toHaveClass(CLASSNAME);
-            expect(uploader).toHaveClass('lumx-uploader--aspect-ratio-horizontal');
-            expect(uploader).toHaveClass('lumx-uploader--size-xl');
-            expect(uploader).toHaveClass('lumx-uploader--theme-light');
-            expect(uploader).toHaveClass('lumx-uploader--variant-rounded');
-        });
-
-        it('should render file input', () => {
-            const label = 'Label';
-            const accept = '*';
-            const { uploader } = setup({ label, fileInputProps: { accept } as any });
-
-            expect(uploader.tagName).toBe('LABEL');
-            expect(uploader).toHaveTextContent(label);
-            const inputNative = getByTagName(uploader, 'input');
-            expect(inputNative).toHaveAttribute('type', 'file');
-            expect(inputNative).toHaveAttribute('accept', accept);
-            expect(uploader).toHaveAttribute('for', inputNative.id);
-        });
-    });
-
-    describe.each`
-        name                      | props
-        ${'button'}               | ${{}}
-        ${'button isDisabled   '} | ${{ isDisabled: true }}
-        ${'button aria-disabled'} | ${{ 'aria-disabled': true }}
-        ${'file input          '} | ${{ fileInputProps: { onChange: jest.fn() } }}
-    `('Events $name', ({ props }) => {
-        const onClick = jest.fn();
-        beforeEach(() => onClick.mockClear());
-        const assertClick = () => {
-            if (props.isDisabled || props['aria-disabled']) {
-                expect(onClick).not.toHaveBeenCalled();
-            } else {
-                expect(onClick).toHaveBeenCalled();
-            }
-        };
-
-        it('should trigger `onClick` when clicked', async () => {
-            const { uploader } = setup({ ...props, onClick });
-
-            await userEvent.click(uploader);
-            assertClick();
-        });
-
-        it('should trigger `onClick` when pressing Enter or Escape', async () => {
-            const { uploader, input } = setup({ ...props, onClick });
-
-            if (props.isDisabled) {
-                expect(props.fileInputProps ? input : uploader).toBeDisabled();
-                //Cannot test focus or activation
-                return;
-            }
-
-            await userEvent.tab();
-            expect(props.fileInputProps ? input : uploader).toHaveFocus();
-
-            // Activate with Enter
-            await userEvent.keyboard('[Enter]');
-            assertClick();
-
-            onClick.mockClear();
-
-            // Activate with Space
-            await userEvent.keyboard('[Space]');
-            assertClick();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'uploader',
-        forwardAttributes: 'uploader',
-        forwardRef: 'uploader',
-        applyTheme: {
-            affects: [{ element: 'uploader' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/uploader/Uploader.tsx

@@ -1,177 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-
-import classNames from 'classnames';
-
-import { AspectRatio, Icon, Size, Theme } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
-import { useId } from '@lumx/react/hooks/useId';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
-import { useDisableStateProps } from '@lumx/react/utils/disabled';
-import { VISUALLY_HIDDEN } from '@lumx/react/constants';
-
-/**
- * Uploader variants.
- */
-export const UploaderVariant = {
-    square: 'square',
-    rounded: 'rounded',
-    circle: 'circle',
-} as const;
-export type UploaderVariant = ValueOf<typeof UploaderVariant>;
-
-/**
- * Uploader sizes.
- */
-export type UploaderSize = Extract<Size, 'xl' | 'xxl'>;
-
-/**
- * Extend native HTML input props with specialized `onChange` providing the a `File` array.
- */
-interface FileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'> {
-    onChange(files: File[], evt: React.ChangeEvent<HTMLInputElement>): void;
-}
-
-/**
- * Defines the props of the component.
- */
-export interface UploaderProps extends GenericProps, HasTheme, HasAriaDisabled {
-    /** Image aspect ratio. */
-    aspectRatio?: AspectRatio;
-    /** Icon (SVG path). */
-    icon?: string;
-    /** Disabled state */
-    isDisabled?: boolean;
-    /** Label text. */
-    label?: string;
-    /** Size variant. */
-    size?: UploaderSize;
-    /** Variant. */
-    variant?: UploaderVariant;
-    /** On click callback. */
-    onClick?: MouseEventHandler;
-    /** Handle file selection with a native input file. */
-    fileInputProps?: FileInputProps;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Uploader';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<UploaderProps> = {
-    aspectRatio: AspectRatio.horizontal,
-    size: Size.xl,
-    variant: UploaderVariant.square,
-};
-
-/**
- * Uploader component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Uploader = forwardRef<UploaderProps>((props, ref) => {
-    const { disabledStateProps, otherProps, isAnyDisabled } = useDisableStateProps(props);
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        aspectRatio = DEFAULT_PROPS.aspectRatio,
-        className,
-        label,
-        icon,
-        size = DEFAULT_PROPS.size,
-        theme = defaultTheme,
-        variant = DEFAULT_PROPS.variant,
-        fileInputProps,
-        onClick,
-        ...forwardedProps
-    } = otherProps;
-    // Adjust to square aspect ratio when using circle variants.
-    const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
-
-    const handleClick: React.MouseEventHandler = React.useCallback(
-        (evt) => {
-            if (isAnyDisabled) {
-                evt.preventDefault();
-            } else {
-                onClick?.(evt);
-            }
-        },
-        [isAnyDisabled, onClick],
-    );
-
-    const generatedInputId = useId();
-    const inputId = fileInputProps?.id || generatedInputId;
-    const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
-    const wrapper = fileInputProps
-        ? ({ Component: 'label', props: { htmlFor: inputId } } as const)
-        : ({ Component: 'button', props: { type: 'button', ...disabledStateProps } } as const);
-
-    const onChange = React.useMemo(() => {
-        if (isAnyDisabled || !fileInputProps?.onChange) return undefined;
-        return (evt: React.ChangeEvent<HTMLInputElement>) => {
-            const fileList = evt.target.files;
-            const files = fileList ? Array.from(fileList) : [];
-            fileInputProps.onChange(files, evt);
-        };
-    }, [isAnyDisabled, fileInputProps]);
-
-    return (
-        <wrapper.Component
-            ref={ref as any}
-            {...wrapper.props}
-            {...forwardedProps}
-            onClick={handleClick}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    aspectRatio: adjustedAspectRatio,
-                    prefix: CLASSNAME,
-                    size,
-                    theme,
-                    variant,
-                    isDragHovering,
-                    isDisabled: isAnyDisabled,
-                }),
-            )}
-        >
-            <span className={`${CLASSNAME}__background`} />
-
-            <span className={`${CLASSNAME}__wrapper`}>
-                {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.s} />}
-
-                {label && <span className={`${CLASSNAME}__label`}>{label}</span>}
-            </span>
-
-            {fileInputProps && (
-                <input
-                    type="file"
-                    id={inputId}
-                    className={`${CLASSNAME}__input ${VISUALLY_HIDDEN}`}
-                    {...disabledStateProps}
-                    {...fileInputProps}
-                    readOnly={isAnyDisabled}
-                    onChange={onChange}
-                    onDragEnter={setDragHovering}
-                    onDragLeave={unsetDragHovering}
-                    onDrop={unsetDragHovering}
-                />
-            )}
-        </wrapper.Component>
-    );
-});
-Uploader.displayName = COMPONENT_NAME;
-Uploader.className = CLASSNAME;
-Uploader.defaultProps = DEFAULT_PROPS;

package/src/components/uploader/index.ts

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