@lumx/react 3.6.0 → 3.6.1-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.0",
-        "@lumx/icons": "^3.6.0",
+        "@lumx/core": "^3.6.1-alpha.0",
+        "@lumx/icons": "^3.6.1-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -30,13 +30,12 @@
         "@babel/preset-typescript": "^7.18.6",
         "@rollup/plugin-commonjs": "^15.0.0",
         "@rollup/plugin-node-resolve": "9.0.0",
-        "@storybook/addon-a11y": "^7.0.20",
-        "@storybook/addon-essentials": "^7.0.20",
-        "@storybook/addon-interactions": "^7.0.20",
-        "@storybook/blocks": "^7.0.20",
-        "@storybook/react": "^7.0.20",
-        "@storybook/react-vite": "^7.0.20",
-        "@storybook/testing-library": "^0.0.14-next.2",
+        "@storybook/addon-a11y": "^7.6.3",
+        "@storybook/addon-essentials": "^7.6.3",
+        "@storybook/addon-interactions": "^7.6.3",
+        "@storybook/blocks": "^7.6.3",
+        "@storybook/react": "^7.6.3",
+        "@storybook/react-vite": "^7.6.3",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^14.4.3",
@@ -44,9 +43,9 @@
         "@types/classnames": "^2.2.9",
         "@types/jest": "^29.2.1",
         "@types/lodash": "^4.14.149",
-        "@types/react": "^16.9.11",
-        "@types/react-dom": "^16.9.4",
-        "@types/react-is": "^16.7.1",
+        "@types/react": "^17.0.2",
+        "@types/react-dom": "^17.0.2",
+        "@types/react-is": "^17.0.2",
         "autoprefixer": "^9.7.4",
         "babel-jest": "29.1.2",
         "babel-loader": "^8.0.6",
@@ -69,8 +68,7 @@
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-ts-paths-resolve": "^1.3.0",
         "rollup-plugin-typescript-paths": "^1.2.2",
-        "storybook": "^7.0.20",
-        "tsconfig-paths-webpack-plugin": "^3.3.0",
+        "storybook": "^7.6.3",
         "typescript": "^4.1.2",
         "vite": "^4.2.1",
         "vite-tsconfig-paths": "^4.0.7",
@@ -115,5 +113,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.6.0"
+    "version": "3.6.1-alpha.0"
 }

package/src/components/lightbox/Lightbox.stories.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react-hooks/rules-of-hooks,react/display-name */
 import React from 'react';
-import { ImageBlock, Alignment, Lightbox, Button } from '@lumx/react';
+import { ImageBlock, Alignment, Lightbox, Button, Slideshow, SlideshowItem } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
-import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
+import { LANDSCAPE_IMAGES, LANDSCAPE_IMAGES_ALT } from '@lumx/react/stories/controls/image';
 
 export default {
     title: 'LumX components/lightbox/Lightbox',
@@ -28,9 +28,17 @@ export default {
 /**
  * Base LightBox with image block
  */
-export const ImageBlock_ = {
+export const Image = {
     args: {
-        children: <ImageBlock align={Alignment.center} alt="" fillHeight image={LANDSCAPE_IMAGES.landscape1} />,
+        'aria-label': 'Fullscreen image',
+        children: (
+            <ImageBlock
+                align={Alignment.center}
+                fillHeight
+                image={LANDSCAPE_IMAGES.landscape1}
+                alt={LANDSCAPE_IMAGES_ALT.landscape1}
+            />
+        ),
     },
 };
 
@@ -39,7 +47,55 @@ export const ImageBlock_ = {
  */
 export const WithCloseButton = {
     args: {
-        ...ImageBlock_.args,
+        ...Image.args,
         closeButtonProps: { label: 'Close' },
     },
 };
+
+/**
+ * Demo a LightBox containing an image slideshow
+ */
+export const ImageSlideshow = {
+    args: {
+        'aria-label': 'Fullscreen image slideshow',
+        closeButtonProps: { label: 'Close' },
+        children: (
+            <Slideshow
+                aria-label="Image slideshow"
+                theme="dark"
+                slideshowControlsProps={{
+                    nextButtonProps: { label: 'Next image' },
+                    previousButtonProps: { label: 'Previous image' },
+                }}
+                slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
+            >
+                <SlideshowItem>
+                    <ImageBlock
+                        align="center"
+                        fillHeight
+                        image={LANDSCAPE_IMAGES.landscape1}
+                        alt={LANDSCAPE_IMAGES_ALT.landscape1}
+                    />
+                </SlideshowItem>
+
+                <SlideshowItem>
+                    <ImageBlock
+                        align="center"
+                        fillHeight
+                        image={LANDSCAPE_IMAGES.landscape2}
+                        alt={LANDSCAPE_IMAGES_ALT.landscape2}
+                    />
+                </SlideshowItem>
+
+                <SlideshowItem>
+                    <ImageBlock
+                        align="center"
+                        fillHeight
+                        image={LANDSCAPE_IMAGES.landscape3}
+                        alt={LANDSCAPE_IMAGES_ALT.landscape3}
+                    />
+                </SlideshowItem>
+            </Slideshow>
+        ),
+    },
+};

package/src/components/lightbox/Lightbox.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, RefObject, useRef, useEffect } from 'react';
+import React, { forwardRef, RefObject, useRef, useEffect, AriaAttributes } from 'react';
 
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
@@ -19,7 +19,7 @@ import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibili
 /**
  * Defines the props of the component.
  */
-export interface LightboxProps extends GenericProps, HasTheme {
+export interface LightboxProps extends GenericProps, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
     /** Props to pass to the close button (minus those already set by the Lightbox props). */
     closeButtonProps?: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
@@ -27,6 +27,8 @@ export interface LightboxProps extends GenericProps, HasTheme {
     isOpen?: boolean;
     /** Reference to the element that triggered modal opening to set focus on. */
     parentElement: RefObject<any>;
+    /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */
+    focusElement?: RefObject<HTMLElement>;
     /** Whether to keep the dialog open on clickaway or escape press. */
     preventAutoClose?: boolean;
     /** Z-axis position. */
@@ -54,13 +56,17 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props, ref) => {
     const {
-        ariaLabel,
+        'aria-labelledby': propAriaLabelledBy,
+        ariaLabelledBy = propAriaLabelledBy,
+        'aria-label': propAriaLabel,
+        ariaLabel = propAriaLabel,
         children,
         className,
         closeButtonProps,
         isOpen,
         onClose,
         parentElement,
+        focusElement,
         preventAutoClose,
         theme,
         zIndex,
@@ -75,6 +81,8 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
     const childrenRef = useRef<any>(null);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const wrapperRef = useRef<HTMLDivElement>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const closeButtonRef = useRef<HTMLButtonElement>(null);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDisableBodyScroll(isOpen && wrapperRef.current);
@@ -84,7 +92,12 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
 
     // Handle focus trap.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocusTrap(isOpen && wrapperRef.current, childrenRef.current?.firstChild);
+    useFocusTrap(
+        // Focus trap zone
+        isOpen && wrapperRef.current,
+        // Focus element (fallback on close button and then on the dialog)
+        focusElement?.current || closeButtonRef.current || wrapperRef.current,
+    );
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const previousOpen = useRef(isOpen);
@@ -116,7 +129,10 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
             ref={mergeRefs(ref, wrapperRef)}
             {...forwardedProps}
             aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
             aria-modal="true"
+            role="dialog"
+            tabIndex={-1}
             className={classNames(
                 className,
                 handleBasicClasses({
@@ -131,6 +147,7 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
             {closeButtonProps && (
                 <IconButton
                     {...closeButtonProps}
+                    ref={closeButtonRef}
                     className={`${CLASSNAME}__close`}
                     color={ColorPalette.light}
                     emphasis={Emphasis.low}

package/src/components/navigation/NavigationItem.tsx

@@ -7,7 +7,7 @@ import { forwardRefPolymorphic } from '@lumx/react/utils/forwardRefPolymorphic';
 import { ThemeContext } from '@lumx/react/utils/ThemeContext';
 
 type BaseNavigationItemProps = {
-    /* Icon (SVG path). */
+    /** Icon (SVG path). */
     icon?: string;
     /** Label content. */
     label: ReactNode;
@@ -65,7 +65,7 @@ export const NavigationItem = Object.assign(
                             prefix: `${CLASSNAME}__link`,
                             isSelected: isCurrentPage,
                         })}
-                        ref={ref}
+                        ref={ref as React.Ref<any>}
                         aria-current={isCurrentPage ? 'page' : undefined}
                         {...buttonProps}
                         {...forwardedProps}

package/src/components/tooltip/Tooltip.stories.tsx

@@ -56,12 +56,13 @@ export const TooltipWithDropdown = (props: any) => {
     const [isOpen, setOpen] = useState(false);
     return (
         <>
-            <Tooltip label={!isOpen && 'Tooltip'} {...props}>
+            <br />
+            <Tooltip label={!isOpen && 'Tooltip'} {...props} placement="top">
                 <Button ref={setButton} onClick={() => setOpen((o) => !o)}>
                     Anchor
                 </Button>
             </Tooltip>
-            <Dropdown anchorRef={{ current: button }} isOpen={isOpen}>
+            <Dropdown anchorRef={{ current: button }} isOpen={isOpen} onClose={() => setOpen(false)}>
                 Dropdown
             </Dropdown>
         </>

package/src/components/tooltip/Tooltip.test.tsx

@@ -125,6 +125,38 @@ describe(`<${Tooltip.displayName}>`, () => {
             });
         });
 
+        it('should activate on hover anchor and then tooltip', async () => {
+            let { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: false,
+            });
+
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Hover anchor button
+            const button = getByClassName(document.body, Button.className as string);
+            await userEvent.hover(button);
+
+            // Tooltip opened
+            tooltip = await findByClassName(document.body, CLASSNAME);
+            expect(tooltip).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+
+            // Hover tooltip
+            await userEvent.hover(tooltip);
+            expect(tooltip).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+
+            // Un-hover tooltip
+            userEvent.unhover(tooltip);
+            await waitFor(() => {
+                expect(button).not.toHaveFocus();
+                // Tooltip closed
+                expect(tooltip).not.toBeInTheDocument();
+            });
+        });
+
         it('should activate on anchor focus', async () => {
             let { tooltip } = await setup({
                 label: 'Tooltip label',

package/src/components/tooltip/Tooltip.tsx

@@ -85,8 +85,9 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     });
 
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
-    const isOpen = useTooltipOpen(delay, anchorElement) || forceOpen;
-    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);
+    const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
+    const isOpen = isActivated || forceOpen;
+    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id);
 
     return (
         <>
@@ -94,7 +95,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
             {isOpen &&
                 createPortal(
                     <div
-                        ref={mergeRefs(ref, setPopperElement)}
+                        ref={mergeRefs(ref, setPopperElement, onPopperMount)}
                         {...forwardedProps}
                         id={id}
                         role="tooltip"

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -18,7 +18,7 @@ import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 export const useInjectTooltipRef = (
     children: ReactNode,
     setAnchorElement: (e: HTMLDivElement) => void,
-    isOpen: boolean,
+    isOpen: boolean | undefined,
     id: string,
 ): ReactNode => {
     return useMemo(() => {

package/src/components/tooltip/useTooltipOpen.tsx

@@ -1,7 +1,7 @@
-import { onEscapePressed } from '@lumx/react/utils/event';
-import { useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
 import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';
+import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 
 /**
  * Hook controlling tooltip visibility using mouse hover the anchor and delay.
@@ -10,9 +10,15 @@ import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/const
  * @param  anchorElement Tooltip anchor element.
  * @return whether or not to show the tooltip.
  */
-export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null): boolean {
+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(closeCallback);
+
     useEffect(() => {
         if (!anchorElement) {
             return undefined;
@@ -45,44 +51,58 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
         };
 
         // Close or cancel opening of tooltip
-        const close = (overrideDelay = closeDelay) => {
+        const getClose = (overrideDelay = closeDelay) => {
             if (!shouldOpen && !timer) return;
             shouldOpen = false;
             deferUpdate(overrideDelay);
         };
-        const closeImmediately = () => close(0);
-
-        /**
-         * Handle touchend event
-         * If `touchend` comes before the open delay => cancel tooltip (close immediate).
-         * Else if `touchend` comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
-         */
-        const touchEnd = (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();
-            }
-        };
+        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]> = hoverNotSupported
-            ? [
-                  [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],
-                  [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd],
-              ]
-            : [
-                  [anchorElement, 'mouseenter', open],
-                  [anchorElement, 'mouseleave', close],
-                  [anchorElement, 'mouseup', closeImmediately],
-              ];
+        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(
@@ -90,8 +110,6 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
             [anchorElement, 'focusin', open],
             // Close on lost focus.
             [anchorElement, 'focusout', closeImmediately],
-            // Close on ESC keydown
-            [anchorElement, 'keydown', onEscapePressed(closeImmediately)],
         );
 
         // Attach events
@@ -109,5 +127,5 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
         };
     }, [anchorElement, delay]);
 
-    return isOpen;
+    return { isOpen, onPopperMount: onPopperMount.current };
 }

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

@@ -72,7 +72,7 @@ describe(`<${Uploader.displayName}>`, () => {
         it('should render file input', () => {
             const label = 'Label';
             const accept = '*';
-            const { uploader } = setup({ label, fileInputProps: { accept } });
+            const { uploader } = setup({ label, fileInputProps: { accept } as any });
 
             expect(uploader.tagName).toBe('LABEL');
             expect(uploader).toHaveTextContent(label);

package/src/stories/controls/image.ts

@@ -22,6 +22,12 @@ export const SQUARE_IMAGES = { square1, square2 };
 export const SVG_IMAGES = { defaultSvg };
 export const EMPTY_IMAGES = { emptyImage };
 export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
+export const LANDSCAPE_IMAGES_ALT: { [key in keyof typeof LANDSCAPE_IMAGES]: string } = {
+    landscape1: 'A majestic snowy mountain range with a peak covered in glistening snow',
+    landscape1s200: 'A majestic snowy mountain range with a peak covered in glistening snow',
+    landscape2: 'A colorful rack of shirts displaying various hues and styles',
+    landscape3: 'An open book resting on a table, ready to be explored and read',
+};
 export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
 export const IMAGES = {
     ...LANDSCAPE_IMAGES,

package/src/utils/forwardRefPolymorphic.ts

@@ -4,6 +4,6 @@ import { ComponentRef } from '@lumx/react/utils/type';
 /** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
 export function forwardRefPolymorphic<E extends ElementType, P extends { as?: E }>(
     render: (props: P, ref: ComponentRef<E>) => React.ReactElement | null,
-) {
-    return React.forwardRef(render as any) as (props: P & { ref?: ComponentRef<E> }) => React.ReactElement | null;
+): (props: P & { ref?: ComponentRef<E> }) => React.ReactElement | null {
+    return React.forwardRef(render as any) as any;
 }