@lumx/react 2.2.9-alpha-exported-hooks2 → 2.2.10

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

@@ -2,262 +2,155 @@
 
 exports[`<Slideshow> Snapshots and structure should render story 'Simple' 1`] = `
 Array [
-  <section
-    aria-live="polite"
-    aria-roledescription="carousel"
-    className="lumx-slideshow lumx-slideshow--theme-light lumx-slideshow--group-by-1"
+  <Slideshow
+    activeIndex={0}
+    afterSlides={
+      <div
+        className="lumx-slideshow__controls"
+      >
+        <SlideshowControls
+          activeIndex={0}
+          isAutoPlaying={false}
+          nextButtonProps={
+            Object {
+              "aria-controls": "slideshow-slides2",
+              "label": "Next",
+            }
+          }
+          onNextClick={[Function]}
+          onPaginationClick={[Function]}
+          onPreviousClick={[Function]}
+          parentRef={null}
+          previousButtonProps={
+            Object {
+              "aria-controls": "slideshow-slides2",
+              "label": "Previous",
+            }
+          }
+          slidesCount={6}
+          theme="light"
+        />
+      </div>
+    }
+    autoPlay={false}
+    endIndexVisible={1}
+    groupBy={1}
     id="slideshow1"
+    interval={1000}
+    isAutoPlaying={false}
+    setIsAutoPlaying={[Function]}
+    slidesId="slideshow-slides2"
+    startIndexVisible={0}
     style={
       Object {
         "width": "50%",
       }
     }
+    theme="light"
   >
-    <div
-      className="lumx-slideshow__slides"
-      id="slideshow-slides2"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
+    <SlideshowItem
+      key="/demo-assets/landscape1.jpg-0"
     >
-      <div
-        className="lumx-slideshow__wrapper"
-        style={
+      <ImageBlock
+        align="left"
+        alt="Image 1"
+        captionPosition="below"
+        image="/demo-assets/landscape1.jpg"
+        theme="light"
+        thumbnailProps={
           Object {
-            "transform": "translateX(-0%)",
+            "aspectRatio": "horizontal",
+            "loading": "eager",
           }
         }
-      >
-        <SlideshowItem
-          aria-hidden={false}
-          key=".$/demo-assets/landscape1.jpg-0"
-          style={Object {}}
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 1"
-            captionPosition="below"
-            image="/demo-assets/landscape1.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-        <SlideshowItem
-          aria-hidden={false}
-          key=".$/demo-assets/landscape1-s200.jpg-1"
-          style={Object {}}
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 2"
-            captionPosition="below"
-            image="/demo-assets/landscape1-s200.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-        <SlideshowItem
-          aria-hidden={true}
-          key=".$/demo-assets/landscape2.jpg-2"
-          style={
-            Object {
-              "visibility": "hidden",
-            }
-          }
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 3"
-            captionPosition="below"
-            image="/demo-assets/landscape2.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-        <SlideshowItem
-          aria-hidden={true}
-          key=".$/demo-assets/landscape3.jpg-3"
-          style={
-            Object {
-              "visibility": "hidden",
-            }
-          }
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 4"
-            captionPosition="below"
-            image="/demo-assets/landscape3.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-        <SlideshowItem
-          aria-hidden={true}
-          key=".$/demo-assets/portrait1.jpg-4"
-          style={
-            Object {
-              "visibility": "hidden",
-            }
-          }
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 5"
-            captionPosition="below"
-            image="/demo-assets/portrait1.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-        <SlideshowItem
-          aria-hidden={true}
-          key=".$/demo-assets/portrait1-s200.jpg-5"
-          style={
-            Object {
-              "visibility": "hidden",
-            }
+      />
+    </SlideshowItem>
+    <SlideshowItem
+      key="/demo-assets/landscape1-s200.jpg-1"
+    >
+      <ImageBlock
+        align="left"
+        alt="Image 2"
+        captionPosition="below"
+        image="/demo-assets/landscape1-s200.jpg"
+        theme="light"
+        thumbnailProps={
+          Object {
+            "aspectRatio": "horizontal",
+            "loading": "eager",
           }
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 6"
-            captionPosition="below"
-            image="/demo-assets/portrait1-s200.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-      </div>
-    </div>
-    <div
-      className="lumx-slideshow__controls"
+        }
+      />
+    </SlideshowItem>
+    <SlideshowItem
+      key="/demo-assets/landscape2.jpg-2"
     >
-      <SlideshowControls
-        activeIndex={0}
-        nextButtonProps={
+      <ImageBlock
+        align="left"
+        alt="Image 3"
+        captionPosition="below"
+        image="/demo-assets/landscape2.jpg"
+        theme="light"
+        thumbnailProps={
           Object {
-            "aria-controls": "slideshow-slides2",
-            "label": "Next",
+            "aspectRatio": "horizontal",
+            "loading": "eager",
           }
         }
-        onNextClick={[Function]}
-        onPaginationClick={[Function]}
-        onPreviousClick={[Function]}
-        previousButtonProps={
+      />
+    </SlideshowItem>
+    <SlideshowItem
+      key="/demo-assets/landscape3.jpg-3"
+    >
+      <ImageBlock
+        align="left"
+        alt="Image 4"
+        captionPosition="below"
+        image="/demo-assets/landscape3.jpg"
+        theme="light"
+        thumbnailProps={
           Object {
-            "aria-controls": "slideshow-slides2",
-            "label": "Previous",
+            "aspectRatio": "horizontal",
+            "loading": "eager",
           }
         }
-        slidesCount={6}
+      />
+    </SlideshowItem>
+    <SlideshowItem
+      key="/demo-assets/portrait1.jpg-4"
+    >
+      <ImageBlock
+        align="left"
+        alt="Image 5"
+        captionPosition="below"
+        image="/demo-assets/portrait1.jpg"
         theme="light"
+        thumbnailProps={
+          Object {
+            "aspectRatio": "horizontal",
+            "loading": "eager",
+          }
+        }
       />
-    </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"
-      icon="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-      label="Previous"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
-    <div
-      className="lumx-slideshow-controls__pagination"
+    </SlideshowItem>
+    <SlideshowItem
+      key="/demo-assets/portrait1-s200.jpg-5"
     >
-      <div
-        className="lumx-slideshow-controls__pagination-items"
-        style={
+      <ImageBlock
+        align="left"
+        alt="Image 6"
+        captionPosition="below"
+        image="/demo-assets/portrait1-s200.jpg"
+        theme="light"
+        thumbnailProps={
           Object {
-            "transform": "translateX(-0px)",
+            "aspectRatio": "horizontal",
+            "loading": "eager",
           }
         }
-      >
-        <button
-          className="lumx-slideshow-controls__pagination-item lumx-slideshow-controls__pagination-item--is-active"
-          key="0"
-          onClick={[Function]}
-          type="button"
-        />
-        <button
-          className="lumx-slideshow-controls__pagination-item"
-          key="1"
-          onClick={[Function]}
-          type="button"
-        />
-        <button
-          className="lumx-slideshow-controls__pagination-item"
-          key="2"
-          onClick={[Function]}
-          type="button"
-        />
-        <button
-          className="lumx-slideshow-controls__pagination-item"
-          key="3"
-          onClick={[Function]}
-          type="button"
-        />
-        <button
-          className="lumx-slideshow-controls__pagination-item lumx-slideshow-controls__pagination-item--is-on-edge"
-          key="4"
-          onClick={[Function]}
-          type="button"
-        />
-        <button
-          className="lumx-slideshow-controls__pagination-item lumx-slideshow-controls__pagination-item--is-out-range"
-          key="5"
-          onClick={[Function]}
-          type="button"
-        />
-      </div>
-    </div>
-    <IconButton
-      aria-controls="slideshow-slides4"
-      className="lumx-slideshow-controls__navigation"
-      color="dark"
-      emphasis="low"
-      icon="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-      label="Next"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
-  </div>,
+      />
+    </SlideshowItem>
+  </Slideshow>,
+  null,
 ]
 `;

package/src/components/slideshow/index.ts

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

package/src/components/thumbnail/index.ts

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

package/src/hooks/useFocusWithin.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 export interface UseFocusWithinOptions {
     /** element to add the focus within to */
-    element: HTMLElement | undefined;
+    element: HTMLElement | null;
     /** callback to be executed on focus in */
     onFocusIn: (ev: FocusEvent) => void;
     /** callback to be executed on focus out */
@@ -26,7 +26,7 @@ export const useFocusWithin = ({ element, onFocusIn, onFocusOut }: UseFocusWithi
             if (element) {
                 element.removeEventListener('focusin', onFocusIn);
 
-                element.addEventListener('focusout', onFocusOut);
+                element.removeEventListener('focusout', onFocusOut);
             }
         };
     }, [onFocusIn, element, onFocusOut]);

package/src/hooks/useSlideshowControls.ts

@@ -4,8 +4,6 @@ import { useInterval } from '@lumx/react/hooks/useInterval';
 import uniqueId from 'lodash/uniqueId';
 import { AUTOPLAY_DEFAULT_INTERVAL } from '@lumx/react/components/slideshow/constants';
 
-import { useFocusWithin } from './useFocusWithin';
-
 export interface UseSlideshowControlsOptions {
     /** default active index to be displayed */
     defaultActiveIndex?: number;
@@ -37,9 +35,9 @@ export interface UseSlideshowControls {
     /** total slides to be displayed */
     slidesCount: number;
     /** callback to set  */
-    setSlideshow: (element: HTMLDivElement | undefined) => void;
+    setSlideshow: (element: HTMLDivElement | null) => void;
     /** reference to the slideshow element */
-    slideshow: HTMLDivElement | undefined;
+    slideshow: HTMLDivElement | null;
     /** id to be used for the slideshow */
     slideshowId: string;
     /** id to be used for the wrapper that contains the slides */
@@ -52,12 +50,20 @@ export interface UseSlideshowControls {
     onPaginationClick: (index: number) => void;
     /** whether the slideshow is autoplaying or not */
     isAutoPlaying: boolean;
+    /** whether the slideshow was force paused or not */
+    isForcePaused: boolean;
+    /** callback to enable/disable the force pause feature */
+    setIsForcePaused: (isForcePaused: boolean) => void;
     /** callback to change whether the slideshow is autoplaying or not */
     setIsAutoPlaying: (isAutoPlaying: boolean) => void;
     /** current active slide index  */
     activeIndex: number;
     /** set the current index as the active one */
     setActiveIndex: (index: number) => void;
+    /** callback that stops the auto play */
+    stopAutoPlay: () => void;
+    /** callback that starts the auto play */
+    startAutoPlay: () => void;
 }
 
 export const DEFAULT_OPTIONS: Partial<UseSlideshowControlsOptions> = {
@@ -79,7 +85,7 @@ export const useSlideshowControls = ({
 }: UseSlideshowControlsOptions): UseSlideshowControls => {
     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>();
+    const [element, setElement] = useState<HTMLDivElement | null>(null);
 
     // Number of slides when using groupBy prop.
     const slidesCount = Math.ceil(itemsCount / Math.min(groupBy as number, itemsCount));
@@ -122,8 +128,11 @@ export const useSlideshowControls = ({
 
     // Auto play
     const [isAutoPlaying, setIsAutoPlaying] = useState(Boolean(autoPlay));
+    const [isForcePaused, setIsForcePaused] = useState(false);
+
+    const isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying;
     // Start
-    useInterval(goToNextSlide, isAutoPlaying && slidesCount > 1 ? (interval as number) : null);
+    useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? (interval as number) : null);
 
     // Reset current index if it become invalid.
     useEffect(() => {
@@ -184,11 +193,15 @@ export const useSlideshowControls = ({
         setIsAutoPlaying(false);
     };
 
-    useFocusWithin({
-        element,
-        onFocusIn: stopAutoPlay,
-        onFocusOut: startAutoPlay,
-    });
+    const forcePause = (isPaused: boolean) => {
+        setIsForcePaused(isPaused);
+
+        if (isPaused) {
+            stopAutoPlay();
+        } else {
+            startAutoPlay();
+        }
+    };
 
     // Start index and end index of visible slides.
     const startIndexVisible = currentIndex * (groupBy as number);
@@ -204,10 +217,14 @@ export const useSlideshowControls = ({
         onPreviousClick,
         onNextClick,
         onPaginationClick,
-        isAutoPlaying,
+        isAutoPlaying: isSlideshowAutoPlaying,
         setIsAutoPlaying,
         activeIndex: currentIndex,
         slidesCount,
         setActiveIndex: setCurrentIndex,
+        startAutoPlay,
+        stopAutoPlay,
+        isForcePaused,
+        setIsForcePaused: forcePause,
     };
 };

package/src/stories/generated/Thumbnail/Demos.stories.tsx

@@ -4,7 +4,9 @@
 export default { title: 'LumX components/thumbnail/Thumbnail Demos' };
 
 export { App as Combined } from './combined';
-export { App as LoadingError } from './loading-error';
+export { App as ErrorFallback } from './error-fallback';
+export { App as Error } from './error';
+export { App as Loading } from './loading';
 export { App as Ratios } from './ratios';
 export { App as Sizes } from './sizes';
 export { App as Variants } from './variants';