@lumx/react 2.2.6 → 2.2.9-alpha-exported-hooks1

package/src/components/slideshow/SlideshowControls.tsx

@@ -7,6 +7,7 @@ import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { WINDOW } from '@lumx/react/constants';
+import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 
 import { useSwipeNavigate } from './useSwipeNavigate';
 import { useKeyNavigate } from './useKeyNavigate';
@@ -64,7 +65,7 @@ const DEFAULT_PROPS: Partial<SlideshowControlsProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> = forwardRef((props, ref) => {
+const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> = forwardRef((props, ref) => {
     const {
         activeIndex,
         className,
@@ -116,7 +117,6 @@ export const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> = f
                 color={theme === Theme.dark ? 'light' : 'dark'}
                 emphasis={Emphasis.low}
                 onClick={onPreviousClick}
-                tabIndex={-1}
             />
             <div className={`${CLASSNAME}__pagination`}>
                 <div className={`${CLASSNAME}__pagination-items`} style={wrapperStyle}>
@@ -143,7 +143,6 @@ export const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> = f
                                         key={index}
                                         type="button"
                                         onClick={() => onPaginationClick?.(index)}
-                                        tabIndex={-1}
                                     />
                                 );
                             }),
@@ -158,11 +157,16 @@ export const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> = f
                 color={theme === Theme.dark ? 'light' : 'dark'}
                 emphasis={Emphasis.low}
                 onClick={onNextClick}
-                tabIndex={-1}
             />
         </div>
     );
 });
-SlideshowControls.displayName = COMPONENT_NAME;
-SlideshowControls.className = CLASSNAME;
-SlideshowControls.defaultProps = DEFAULT_PROPS;
+
+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

@@ -32,17 +32,20 @@ export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRe
     return (
         <div
             ref={ref}
-            {...forwardedProps}
             className={classNames(
                 className,
                 handleBasicClasses({
                     prefix: CLASSNAME,
                 }),
             )}
+            aria-roledescription="slide"
+            role="group"
+            {...forwardedProps}
         >
             {children}
         </div>
     );
 });
+
 SlideshowItem.displayName = COMPONENT_NAME;
 SlideshowItem.className = CLASSNAME;

package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap

@@ -2,17 +2,22 @@
 
 exports[`<Slideshow> Snapshots and structure should render story 'Simple' 1`] = `
 Array [
-  <div
+  <section
+    aria-live="polite"
+    aria-roledescription="carousel"
     className="lumx-slideshow lumx-slideshow--theme-light lumx-slideshow--group-by-1"
+    id="slideshow1"
     style={
       Object {
         "width": "50%",
       }
     }
-    tabIndex={0}
   >
     <div
       className="lumx-slideshow__slides"
+      id="slideshow-slides2"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
     >
       <div
         className="lumx-slideshow__wrapper"
@@ -23,7 +28,9 @@ Array [
         }
       >
         <SlideshowItem
-          key="/demo-assets/landscape1.jpg-0"
+          aria-hidden={false}
+          key=".$/demo-assets/landscape1.jpg-0"
+          style={Object {}}
         >
           <ImageBlock
             align="left"
@@ -34,12 +41,15 @@ Array [
             thumbnailProps={
               Object {
                 "aspectRatio": "horizontal",
+                "loading": "eager",
               }
             }
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/landscape1-s200.jpg-1"
+          aria-hidden={false}
+          key=".$/demo-assets/landscape1-s200.jpg-1"
+          style={Object {}}
         >
           <ImageBlock
             align="left"
@@ -50,12 +60,19 @@ Array [
             thumbnailProps={
               Object {
                 "aspectRatio": "horizontal",
+                "loading": "eager",
               }
             }
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/landscape2.jpg-2"
+          aria-hidden={true}
+          key=".$/demo-assets/landscape2.jpg-2"
+          style={
+            Object {
+              "visibility": "hidden",
+            }
+          }
         >
           <ImageBlock
             align="left"
@@ -66,12 +83,19 @@ Array [
             thumbnailProps={
               Object {
                 "aspectRatio": "horizontal",
+                "loading": "eager",
               }
             }
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/landscape3.jpg-3"
+          aria-hidden={true}
+          key=".$/demo-assets/landscape3.jpg-3"
+          style={
+            Object {
+              "visibility": "hidden",
+            }
+          }
         >
           <ImageBlock
             align="left"
@@ -82,12 +106,19 @@ Array [
             thumbnailProps={
               Object {
                 "aspectRatio": "horizontal",
+                "loading": "eager",
               }
             }
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/portrait1.jpg-4"
+          aria-hidden={true}
+          key=".$/demo-assets/portrait1.jpg-4"
+          style={
+            Object {
+              "visibility": "hidden",
+            }
+          }
         >
           <ImageBlock
             align="left"
@@ -98,12 +129,19 @@ Array [
             thumbnailProps={
               Object {
                 "aspectRatio": "horizontal",
+                "loading": "eager",
               }
             }
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/portrait1-s200.jpg-5"
+          aria-hidden={true}
+          key=".$/demo-assets/portrait1-s200.jpg-5"
+          style={
+            Object {
+              "visibility": "hidden",
+            }
+          }
         >
           <ImageBlock
             align="left"
@@ -114,6 +152,7 @@ Array [
             thumbnailProps={
               Object {
                 "aspectRatio": "horizontal",
+                "loading": "eager",
               }
             }
           />
@@ -127,6 +166,7 @@ Array [
         activeIndex={0}
         nextButtonProps={
           Object {
+            "aria-controls": "slideshow-slides2",
             "label": "Next",
           }
         }
@@ -135,6 +175,7 @@ Array [
         onPreviousClick={[Function]}
         previousButtonProps={
           Object {
+            "aria-controls": "slideshow-slides2",
             "label": "Previous",
           }
         }
@@ -142,11 +183,12 @@ Array [
         theme="light"
       />
     </div>
-  </div>,
+  </section>,
   <div
     className="lumx-slideshow-controls lumx-slideshow-controls--theme-light lumx-slideshow-controls--has-infinite-pagination"
   >
     <IconButton
+      aria-controls="slideshow-slides4"
       className="lumx-slideshow-controls__navigation"
       color="dark"
       emphasis="low"
@@ -154,7 +196,6 @@ Array [
       label="Previous"
       onClick={[Function]}
       size="m"
-      tabIndex={-1}
       theme="light"
     />
     <div
@@ -172,47 +213,42 @@ Array [
           className="lumx-slideshow-controls__pagination-item lumx-slideshow-controls__pagination-item--is-active"
           key="0"
           onClick={[Function]}
-          tabIndex={-1}
           type="button"
         />
         <button
           className="lumx-slideshow-controls__pagination-item"
           key="1"
           onClick={[Function]}
-          tabIndex={-1}
           type="button"
         />
         <button
           className="lumx-slideshow-controls__pagination-item"
           key="2"
           onClick={[Function]}
-          tabIndex={-1}
           type="button"
         />
         <button
           className="lumx-slideshow-controls__pagination-item"
           key="3"
           onClick={[Function]}
-          tabIndex={-1}
           type="button"
         />
         <button
           className="lumx-slideshow-controls__pagination-item lumx-slideshow-controls__pagination-item--is-on-edge"
           key="4"
           onClick={[Function]}
-          tabIndex={-1}
           type="button"
         />
         <button
           className="lumx-slideshow-controls__pagination-item lumx-slideshow-controls__pagination-item--is-out-range"
           key="5"
           onClick={[Function]}
-          tabIndex={-1}
           type="button"
         />
       </div>
     </div>
     <IconButton
+      aria-controls="slideshow-slides4"
       className="lumx-slideshow-controls__navigation"
       color="dark"
       emphasis="low"
@@ -220,7 +256,6 @@ Array [
       label="Next"
       onClick={[Function]}
       size="m"
-      tabIndex={-1}
       theme="light"
     />
   </div>,

package/src/components/tabs/state.ts

@@ -1,5 +1,4 @@
 import { Dispatch, createContext, useCallback, useContext, useEffect, useMemo } from 'react';
-import { clamp } from '@lumx/react/utils/clamp';
 import { uid } from 'uid';
 
 type TabType = 'tab' | 'tabPanel';

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -18,7 +18,6 @@ import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
 import { focusKnob } from '@lumx/react/stories/knobs/focusKnob';
 import { sizeKnob } from '@lumx/react/stories/knobs/sizeKnob';
 import { action } from '@storybook/addon-actions';
-import classNames from 'classnames';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 
 export default { title: 'LumX components/thumbnail/Thumbnail' };
@@ -84,6 +83,31 @@ export const WithBadge = () => {
     );
 };
 
+export const WithCustomImageClassName = () => {
+    const thumbnailSize = sizeKnob('Size', Size.l);
+    const variant = select('Variant', ThumbnailVariant, ThumbnailVariant.rounded);
+    const badgeColor = select('Badge color', ColorPalette, ColorPalette.primary);
+    const activateFallback = boolean('Activate fallback', false);
+    const image = imageKnob();
+    return (
+        <Thumbnail
+            alt="Image alt text"
+            image={activateFallback ? '' : image}
+            variant={variant}
+            aspectRatio={AspectRatio.square}
+            size={thumbnailSize}
+            badge={
+                <Badge color={badgeColor}>
+                    <Icon icon={mdiAbTesting} />
+                </Badge>
+            }
+            imgProps={{
+                className: 'custom-image-class-name',
+            }}
+        />
+    );
+};
+
 export const FocusPoint = () => {
     const focusPoint = { x: focusKnob('Focus X ', -0.2), y: focusKnob('Focus Y', -0.3) };
     const aspectRatio = enumKnob('Aspect ratio', [undefined, ...Object.values(AspectRatio)], AspectRatio.wide);

package/src/components/thumbnail/Thumbnail.test.tsx

@@ -5,7 +5,14 @@ import 'jest-enzyme';
 import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
-import { Clickable, ClickableCustomLink, ClickableLink, Default, WithBadge } from './Thumbnail.stories';
+import {
+    Clickable,
+    ClickableCustomLink,
+    ClickableLink,
+    Default,
+    WithBadge,
+    WithCustomImageClassName,
+} from './Thumbnail.stories';
 
 const CLASSNAME = Thumbnail.className as string;
 
@@ -28,6 +35,7 @@ describe(`<${Thumbnail.displayName}>`, () => {
                 ClickableLink,
                 ClickableCustomLink,
                 WithBadge,
+                WithCustomImageClassName,
             },
             Thumbnail,
         );

package/src/components/thumbnail/Thumbnail.tsx

@@ -105,6 +105,8 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         crossOrigin,
         fallback,
         fillHeight,
+        // `focusPoint` needs to be here to remove it from `forwardedProps`.
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         focusPoint,
         image,
         imgProps,
@@ -194,6 +196,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                             isLoading,
                             hasDefinedSize: Boolean(imgProps?.height && imgProps.width),
                         }),
+                        imgProps?.className,
                     )}
                     crossOrigin={crossOrigin}
                     src={image}

package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap

@@ -102,3 +102,29 @@ exports[`<Thumbnail> Snapshots and structure should render story 'WithBadge' 1`]
   </Badge>
 </div>
 `;
+
+exports[`<Thumbnail> Snapshots and structure should render story 'WithCustomImageClassName' 1`] = `
+<div
+  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-square lumx-thumbnail--size-l lumx-thumbnail--theme-light lumx-thumbnail--variant-rounded lumx-thumbnail--is-loading lumx-thumbnail--has-badge"
+>
+  <div
+    className="lumx-thumbnail__background"
+  >
+    <img
+      alt="Image alt text"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading custom-image-class-name"
+      loading="lazy"
+      src="/demo-assets/landscape1.jpg"
+      style={Object {}}
+    />
+  </div>
+  <Badge
+    className="lumx-thumbnail__badge"
+    color="primary"
+  >
+    <Icon
+      icon="M4 2A2 2 0 0 0 2 4V12H4V8H6V12H8V4A2 2 0 0 0 6 2H4M4 4H6V6H4M22 15.5V14A2 2 0 0 0 20 12H16V22H20A2 2 0 0 0 22 20V18.5A1.54 1.54 0 0 0 20.5 17A1.54 1.54 0 0 0 22 15.5M20 20H18V18H20V20M20 16H18V14H20M5.79 21.61L4.21 20.39L18.21 2.39L19.79 3.61Z"
+    />
+  </Badge>
+</div>
+`;

package/src/components/thumbnail/index.ts

@@ -1,3 +1,2 @@
 export * from './Thumbnail';
 export * from './types';
-export { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';

package/src/components/tooltip/Tooltip.tsx

@@ -49,7 +49,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<TooltipProps> = {
-    delay: 500,
     placement: Placement.BOTTOM,
 };
 
@@ -90,7 +89,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     });
 
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
-    const isOpen = useTooltipOpen(delay as number, anchorElement) || forceOpen;
+    const isOpen = useTooltipOpen(delay, anchorElement) || forceOpen;
     const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);
 
     return (

package/src/components/tooltip/useTooltipOpen.tsx

@@ -1,60 +1,7 @@
-import { Callback, onEscapePressed } from '@lumx/react/utils';
-import { useEffect, useRef, useState } from 'react';
-import pull from 'lodash/pull';
-import debounce from 'lodash/debounce';
-
-type Tooltip = { open: Callback; close: Callback; anchorElement: HTMLElement };
-
-/**
- * This singleton handle a global `mouseover` event listener on the `document` in order to toggle tooltips when
- * entering and leaving their anchor element.
- */
-const tooltipMouseToggle = (() => {
-    /** List of tooltips to toggle on anchor enter/leave. */
-    let tooltips: Array<Tooltip> | undefined;
-
-    /** Global listener added on the document. */
-    let globalListener: undefined | ((evt: MouseEvent) => void);
-
-    function addGlobalListener() {
-        if (globalListener) return;
-        globalListener = debounce((evt) => {
-            if (!tooltips || !evt.target) return;
-            for (const { open, close, anchorElement } of tooltips) {
-                if (anchorElement.contains(evt.target as any)) {
-                    open();
-                } else {
-                    close();
-                }
-            }
-        }, 10);
-        document.addEventListener('mouseover', globalListener);
-    }
-
-    function removeGlobalListener() {
-        if (!globalListener) return;
-        document.removeEventListener('mouseover', globalListener);
-        globalListener = undefined;
-    }
-
-    return {
-        addTooltip(tooltip: Tooltip) {
-            if (!tooltips) {
-                tooltips = [];
-                addGlobalListener();
-            }
-            tooltips.push(tooltip);
-        },
-        removeTooltip(actions: Tooltip) {
-            if (!tooltips) return;
-            pull(tooltips, actions);
-            if (tooltips.length === 0) {
-                removeGlobalListener();
-                tooltips = undefined;
-            }
-        },
-    };
-})();
+import { onEscapePressed } from '@lumx/react/utils';
+import { useEffect, useState } from 'react';
+import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
+import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';
 
 /**
  * Hook controlling tooltip visibility using mouse hover the anchor and delay.
@@ -63,50 +10,102 @@ const tooltipMouseToggle = (() => {
  * @param  anchorElement Tooltip anchor element.
  * @return whether or not to show the tooltip.
  */
-export function useTooltipOpen(delay: number, anchorElement: HTMLElement | null): boolean {
-    const timer = useRef<number>();
-    const shouldOpen = useRef<boolean>(false);
+export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null): boolean {
     const [isOpen, setIsOpen] = useState(false);
 
     useEffect(() => {
         if (!anchorElement) {
             return undefined;
         }
-        const tooltip: Tooltip = {
-            anchorElement,
-            open() {
-                if (!shouldOpen.current) {
-                    shouldOpen.current = true;
-                    timer.current = setTimeout(() => {
-                        setIsOpen(shouldOpen.current);
-                    }, delay) as any;
-                }
-            },
-            close() {
-                if (timer.current) {
-                    clearTimeout(timer.current);
-                    timer.current = undefined;
-                }
-                if (shouldOpen.current) {
-                    shouldOpen.current = false;
-                    setIsOpen(shouldOpen.current);
-                }
-            },
+        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);
+            timer = setTimeout(() => {
+                setIsOpen(!!shouldOpen);
+            }, duration) as any;
         };
-        const keydown = onEscapePressed(tooltip.close);
 
-        tooltipMouseToggle.addTooltip(tooltip);
-        anchorElement.addEventListener('focusin', tooltip.open);
-        anchorElement.addEventListener('focusout', tooltip.close);
-        anchorElement.addEventListener('keydown', keydown);
+        const hoverNotSupported = browserDoesNotSupportHover();
+        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 close = (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();
+            }
+        };
+
+        // 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],
+              ];
+
+        // Events always applied no matter the browser:.
+        events.push(
+            // Open on focus.
+            [anchorElement, 'focusin', open],
+            // Close on lost focus.
+            [anchorElement, 'focusout', closeImmediately],
+            // Close on ESC keydown
+            [anchorElement, 'keydown', onEscapePressed(closeImmediately)],
+        );
+
+        // Attach events
+        for (const [node, eventType, evenHandler] of events) {
+            node.addEventListener(eventType, evenHandler);
+        }
         return () => {
-            tooltipMouseToggle.removeTooltip(tooltip);
-            anchorElement.removeEventListener('focusin', tooltip.open);
-            anchorElement.removeEventListener('focusout', tooltip.close);
-            anchorElement.removeEventListener('keydown', keydown);
-            tooltip.close();
+            // Detach events.
+            for (const [node, eventType, evenHandler] of events) {
+                node.removeEventListener(eventType, evenHandler);
+            }
+            closeImmediately();
         };
-    }, [anchorElement, delay, timer, shouldOpen]);
+    }, [anchorElement, delay]);
 
     return isOpen;
 }

package/src/constants.ts

@@ -1,4 +1,10 @@
-export { CSS_PREFIX, DIALOG_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
+export {
+    CSS_PREFIX,
+    DIALOG_TRANSITION_DURATION,
+    NOTIFICATION_TRANSITION_DURATION,
+    TOOLTIP_HOVER_DELAY,
+    TOOLTIP_LONG_PRESS_DELAY,
+} from '@lumx/core/js/constants';
 
 /**
  * Optional global `window` instance (not defined when running SSR).