@lumx/react 2.2.5 → 2.2.8

package/src/components/slideshow/Slideshow.tsx

@@ -1,11 +1,10 @@
-import React, { CSSProperties, forwardRef, useCallback, useEffect, useState } from 'react';
+import React, { CSSProperties, forwardRef } from 'react';
 
 import classNames from 'classnames';
 
 import { SlideshowControls, SlideshowControlsProps, Theme } from '@lumx/react';
-
-import { AUTOPLAY_DEFAULT_INTERVAL, FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-import { useInterval } from '@lumx/react/hooks/useInterval';
+import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
+import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
@@ -39,6 +38,10 @@ export interface SlideshowProps extends GenericProps {
     theme?: Theme;
     /** Callback when slide changes */
     onChange?(index: number): void;
+    /** slideshow HTML id attribute */
+    id?: string;
+    /** slides wrapper HTML id attribute */
+    slidesId?: string;
 }
 
 /**
@@ -55,9 +58,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<SlideshowProps> = {
-    activeIndex: 0,
-    groupBy: 1,
-    interval: AUTOPLAY_DEFAULT_INTERVAL,
+    ...DEFAULT_OPTIONS,
     theme: Theme.light,
 };
 
@@ -80,122 +81,76 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         onChange,
         slideshowControlsProps,
         theme,
+        id,
+        slidesId,
         ...forwardedProps
     } = props;
-    const [currentIndex, setCurrentIndex] = useState(activeIndex as number);
-    // Use state instead of a ref to make the slideshow controls update directly when the element is set.
-    const [element, setElement] = useState<HTMLDivElement>();
-
     // Number of slideshow items.
     const itemsCount = React.Children.count(children);
-    // Number of slides when using groupBy prop.
-    const slidesCount = Math.ceil(itemsCount / Math.min(groupBy as number, itemsCount));
-    // Inline style of wrapper element.
-    const wrapperStyle: CSSProperties = { transform: `translateX(-${FULL_WIDTH_PERCENT * currentIndex}%)` };
-
-    // Change current index to display next slide.
-    const goToNextSlide = useCallback(
-        (loopback = true) => {
-            setCurrentIndex((index) => {
-                if (loopback && index === slidesCount - 1) {
-                    // Loopback to the start.
-                    return 0;
-                }
-                if (index < slidesCount - 1) {
-                    // Next slide.
-                    return index + 1;
-                }
-                return index;
-            });
-        },
-        [slidesCount, setCurrentIndex],
-    );
-
-    // Change current index to display previous slide.
-    const goToPreviousSlide = useCallback(
-        (loopback = true) => {
-            setCurrentIndex((index) => {
-                if (loopback && index === 0) {
-                    // Loopback to the end.
-                    return slidesCount - 1;
-                }
-                if (index > 0) {
-                    // Previous slide.
-                    return index - 1;
-                }
-                return index;
-            });
-        },
-        [slidesCount, setCurrentIndex],
-    );
-
-    // Auto play
-    const [isAutoPlaying, setIsAutoPlaying] = useState(Boolean(autoPlay));
-    // Start
-    useInterval(goToNextSlide, isAutoPlaying && slidesCount > 1 ? (interval as number) : null);
-
-    // Reset current index if it become invalid.
-    useEffect(() => {
-        if (currentIndex > slidesCount - 1) {
-            setCurrentIndex(DEFAULT_PROPS.activeIndex as number);
-        }
-    }, [currentIndex, slidesCount]);
-
-    // Handle click on a bullet to go to a specific slide.
-    const handleControlGotToSlide = useCallback(
-        (index: number) => {
-            setIsAutoPlaying(false);
-
-            if (index >= 0 && index < slidesCount) {
-                setCurrentIndex(index);
-            }
-        },
-        [slidesCount, setCurrentIndex],
-    );
 
-    // Handle click or keyboard event to go to next slide.
-    const handleControlNextSlide = useCallback(
-        (loopback = true) => {
-            setIsAutoPlaying(false);
-            goToNextSlide(loopback);
-        },
-        [goToNextSlide],
-    );
-
-    // Handle click or keyboard event to go to previous slide.
-    const handleControlPreviousSlide = useCallback(
-        (loopback = true) => {
-            setIsAutoPlaying(false);
-            goToPreviousSlide(loopback);
-        },
-        [goToPreviousSlide],
-    );
-
-    // If the activeIndex props changes, update the current slide
-    useEffect(() => {
-        setCurrentIndex(activeIndex as number);
-    }, [activeIndex]);
+    const {
+        activeIndex: currentIndex,
+        slideshowId,
+        setSlideshow,
+        isAutoPlaying,
+        slideshowSlidesId,
+        setIsAutoPlaying,
+        startIndexVisible,
+        endIndexVisible,
+        slidesCount,
+        onNextClick,
+        onPaginationClick,
+        onPreviousClick,
+        slideshow,
+    } = SlideshowControls.useSlideshowControls({
+        activeIndex,
+        defaultActiveIndex: DEFAULT_PROPS.activeIndex as number,
+        autoPlay: Boolean(autoPlay),
+        itemsCount,
+        groupBy,
+        id,
+        interval,
+        onChange,
+        slidesId,
+    });
 
-    // If the slide changes, with autoplay for example, trigger "onChange"
-    useEffect(() => {
-        if (!onChange) return;
-        onChange(currentIndex);
-    }, [currentIndex, onChange]);
+    // Inline style of wrapper element.
+    const wrapperStyle: CSSProperties = { transform: `translateX(-${FULL_WIDTH_PERCENT * currentIndex}%)` };
 
     /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
     return (
-        <div
-            ref={mergeRefs(ref, setElement)}
+        <section
+            id={slideshowId}
+            ref={mergeRefs(ref, setSlideshow)}
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
                 [`${CLASSNAME}--fill-height`]: fillHeight,
                 [`${CLASSNAME}--group-by-${groupBy}`]: Boolean(groupBy),
             })}
-            tabIndex={0}
+            aria-roledescription="carousel"
+            aria-live={isAutoPlaying ? 'off' : 'polite'}
         >
-            <div className={`${CLASSNAME}__slides`}>
+            <div
+                id={slideshowSlidesId}
+                className={`${CLASSNAME}__slides`}
+                onMouseEnter={() => setIsAutoPlaying(false)}
+                onMouseLeave={() => setIsAutoPlaying(Boolean(autoPlay))}
+            >
                 <div className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>
-                    {children}
+                    {React.Children.map(children, (child: React.ReactNode, index: number) => {
+                        if (React.isValidElement(child)) {
+                            const isCurrentlyVisible = index >= startIndexVisible && index <= endIndexVisible;
+
+                            return React.cloneElement(child, {
+                                style: !isCurrentlyVisible
+                                    ? { visibility: 'hidden', ...(child.props.style || {}) }
+                                    : child.props.style || {},
+                                'aria-hidden': !isCurrentlyVisible,
+                            });
+                        }
+
+                        return null;
+                    })}
                 </div>
             </div>
 
@@ -204,18 +159,27 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
                     <SlideshowControls
                         {...slideshowControlsProps}
                         activeIndex={currentIndex}
-                        onPaginationClick={handleControlGotToSlide}
-                        onNextClick={handleControlNextSlide}
-                        onPreviousClick={handleControlPreviousSlide}
+                        onPaginationClick={onPaginationClick}
+                        onNextClick={onNextClick}
+                        onPreviousClick={onPreviousClick}
                         slidesCount={slidesCount}
-                        parentRef={element}
+                        parentRef={slideshow}
                         theme={theme}
+                        nextButtonProps={{
+                            'aria-controls': slideshowSlidesId,
+                            ...slideshowControlsProps.nextButtonProps,
+                        }}
+                        previousButtonProps={{
+                            'aria-controls': slideshowSlidesId,
+                            ...slideshowControlsProps.previousButtonProps,
+                        }}
                     />
                 </div>
             )}
-        </div>
+        </section>
     );
 });
+
 Slideshow.displayName = COMPONENT_NAME;
 Slideshow.className = CLASSNAME;
 Slideshow.defaultProps = DEFAULT_PROPS;

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -6,13 +6,15 @@ import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
 export default { title: 'LumX components/slideshow/Slideshow controls' };
 
 export const Simple = () => {
-    const slidesCount = 9;
-    const [activeIndex, setActiveIndex] = React.useState(0);
-    const maxIndex = slidesCount - 1;
-
-    const onNextClick = () => setActiveIndex(activeIndex === maxIndex ? 0 : activeIndex + 1);
-    const onPreviousClick = () => setActiveIndex(activeIndex === 0 ? maxIndex : activeIndex - 1);
-    const onPaginationClick = (index: number) => setActiveIndex(index);
+    const {
+        activeIndex,
+        slidesCount,
+        onNextClick,
+        onPreviousClick,
+        onPaginationClick,
+    } = SlideshowControls.useSlideshowControls({
+        itemsCount: 9,
+    });
 
     return (
         <SlideshowControls
@@ -29,15 +31,19 @@ export const Simple = () => {
 
 export const ControllingSlideshow = ({ theme }: any) => {
     const items = thumbnailsKnob(6);
-    const [activeIndex, setActiveIndex] = React.useState(0);
-    const maxIndex = items.length - 1;
     const slideshowStyle = {
         width: '50%',
     };
 
-    const onNextClick = () => setActiveIndex(activeIndex === maxIndex ? 0 : activeIndex + 1);
-    const onPreviousClick = () => setActiveIndex(activeIndex === 0 ? maxIndex : activeIndex - 1);
-    const onPaginationClick = (index: number) => setActiveIndex(index);
+    const {
+        activeIndex,
+        setActiveIndex,
+        onNextClick,
+        onPreviousClick,
+        onPaginationClick,
+    } = SlideshowControls.useSlideshowControls({
+        itemsCount: 6,
+    });
 
     return (
         <div style={{ height: 400, width: 500, position: 'relative' }}>

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,
         );