@lumx/react 2.2.5 → 2.2.8

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/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).

package/src/hooks/useFocusWithin.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+export interface UseFocusWithinOptions {
+    /** element to add the focus within to */
+    element: HTMLElement | undefined;
+    /** callback to be executed on focus in */
+    onFocusIn: (ev: FocusEvent) => void;
+    /** callback to be executed on focus out */
+    onFocusOut: (ev: FocusEvent) => void;
+}
+
+/**
+ * Hook that allows to control when there is a focus event within a given element, meaning
+ * that any element within the given target will trigger the focus in and focus out events.
+ * @param options - UseFocusWithinOptions
+ */
+export const useFocusWithin = ({ element, onFocusIn, onFocusOut }: UseFocusWithinOptions) => {
+    useEffect(() => {
+        if (element) {
+            element.addEventListener('focusin', onFocusIn);
+
+            element.addEventListener('focusout', onFocusOut);
+        }
+
+        return () => {
+            if (element) {
+                element.removeEventListener('focusin', onFocusIn);
+
+                element.addEventListener('focusout', onFocusOut);
+            }
+        };
+    }, [onFocusIn, element, onFocusOut]);
+};

package/src/hooks/useSlideshowControls.ts

@@ -0,0 +1,213 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+
+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;
+    /** total slides to display */
+    itemsCount: number;
+    /** Index of the current slide. */
+    activeIndex?: number;
+    /** Whether the automatic rotation of the slideshow is enabled or not. */
+    autoPlay?: boolean;
+    /** Whether the image has to fill its container height or not. */
+    fillHeight?: boolean;
+    /** Number of slides to group together. */
+    groupBy?: number;
+    /** Interval between each slide when automatic rotation is enabled. */
+    interval?: number;
+    /** Callback when slide changes */
+    onChange?(index: number): void;
+    /** slideshow HTML id attribute */
+    id?: string;
+    /** slides wrapper HTML id attribute */
+    slidesId?: string;
+}
+
+export interface UseSlideshowControls {
+    /** Index for the first visible slide, should be used when groupBy is passed in */
+    startIndexVisible: number;
+    /** Index for the last visible slide, should be used when groupBy is passed in */
+    endIndexVisible: number;
+    /** total slides to be displayed */
+    slidesCount: number;
+    /** callback to set  */
+    setSlideshow: (element: HTMLDivElement | undefined) => void;
+    /** reference to the slideshow element */
+    slideshow: HTMLDivElement | undefined;
+    /** id to be used for the slideshow */
+    slideshowId: string;
+    /** id to be used for the wrapper that contains the slides */
+    slideshowSlidesId: string;
+    /** callback that triggers the previous slide while using the slideshow controls  */
+    onPreviousClick: (loopback: boolean) => void;
+    /** callback that triggers the next slide while using the slideshow controls */
+    onNextClick: (loopback: boolean) => void;
+    /** callback that triggers a specific page while using the slideshow controls */
+    onPaginationClick: (index: number) => void;
+    /** whether the slideshow is autoplaying or not */
+    isAutoPlaying: boolean;
+    /** 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;
+}
+
+export const DEFAULT_OPTIONS: Partial<UseSlideshowControlsOptions> = {
+    activeIndex: 0,
+    groupBy: 1,
+    interval: AUTOPLAY_DEFAULT_INTERVAL,
+};
+
+export const useSlideshowControls = ({
+    activeIndex = DEFAULT_OPTIONS.activeIndex,
+    groupBy = DEFAULT_OPTIONS.groupBy,
+    interval = DEFAULT_OPTIONS.interval,
+    autoPlay,
+    defaultActiveIndex,
+    onChange,
+    itemsCount,
+    id,
+    slidesId,
+}: 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>();
+
+    // Number of slides when using groupBy prop.
+    const slidesCount = Math.ceil(itemsCount / Math.min(groupBy as number, itemsCount));
+
+    // 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(defaultActiveIndex as number);
+        }
+    }, [currentIndex, slidesCount, defaultActiveIndex]);
+
+    // Handle click on a bullet to go to a specific slide.
+    const onPaginationClick = 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 onNextClick = useCallback(
+        (loopback = true) => {
+            setIsAutoPlaying(false);
+            goToNextSlide(loopback);
+        },
+        [goToNextSlide],
+    );
+
+    // Handle click or keyboard event to go to previous slide.
+    const onPreviousClick = useCallback(
+        (loopback = true) => {
+            setIsAutoPlaying(false);
+            goToPreviousSlide(loopback);
+        },
+        [goToPreviousSlide],
+    );
+
+    // If the activeIndex props changes, update the current slide
+    useEffect(() => {
+        setCurrentIndex(activeIndex as number);
+    }, [activeIndex]);
+
+    // If the slide changes, with autoplay for example, trigger "onChange"
+    useEffect(() => {
+        if (!onChange) return;
+        onChange(currentIndex);
+    }, [currentIndex, onChange]);
+
+    const slideshowId = useMemo(() => id || uniqueId('slideshow'), [id]);
+    const slideshowSlidesId = useMemo(() => slidesId || uniqueId('slideshow-slides'), [slidesId]);
+
+    const startAutoPlay = () => {
+        setIsAutoPlaying(Boolean(autoPlay));
+    };
+
+    const stopAutoPlay = () => {
+        setIsAutoPlaying(false);
+    };
+
+    useFocusWithin({
+        element,
+        onFocusIn: stopAutoPlay,
+        onFocusOut: startAutoPlay,
+    });
+
+    // Start index and end index of visible slides.
+    const startIndexVisible = currentIndex * (groupBy as number);
+    const endIndexVisible = startIndexVisible + (groupBy as number);
+
+    return {
+        startIndexVisible,
+        endIndexVisible,
+        setSlideshow: setElement,
+        slideshow: element,
+        slideshowId,
+        slideshowSlidesId,
+        onPreviousClick,
+        onNextClick,
+        onPaginationClick,
+        isAutoPlaying,
+        setIsAutoPlaying,
+        activeIndex: currentIndex,
+        slidesCount,
+        setActiveIndex: setCurrentIndex,
+    };
+};

package/src/utils/browserDoesNotSupportHover.test.js

@@ -0,0 +1,24 @@
+import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
+
+const originalMatchMedia = global.matchMedia;
+
+describe('browserDoesNotSupportHover', () => {
+    afterAll(() => {
+        global.matchMedia = originalMatchMedia;
+    });
+
+    it('should return `false` on browsers that do not support matchMedia', () => {
+        global.matchMedia = undefined;
+        expect(browserDoesNotSupportHover()).toBe(false);
+    });
+
+    it('should return `false` on browsers that support matchMedia and does support hover', () => {
+        global.matchMedia = () => ({ matches: false });
+        expect(browserDoesNotSupportHover()).toBe(false);
+    });
+
+    it('should return `true` on browsers that support matchMedia and does not support hover', () => {
+        global.matchMedia = () => ({ matches: true });
+        expect(browserDoesNotSupportHover()).toBe(true);
+    });
+});

package/src/utils/browserDoesNotSupportHover.ts

@@ -0,0 +1,2 @@
+/** Return true if the browser does not support pointer hover */
+export const browserDoesNotSupportHover = (): boolean => !!window.matchMedia?.('(hover: none)').matches;

package/src/utils/index.tsx

@@ -2,8 +2,6 @@ export * from '@lumx/core/js/utils';
 
 export * from './getRootClassName';
 
-export * from './htmlDecode';
-
 export * from './partitionMulti';
 
 export * from './type';

package/src/utils/mergeRefs.ts

@@ -1,5 +1,5 @@
 import { Falsy } from '@lumx/react/utils/type';
-import { MutableRefObject, Ref } from 'react';
+import { MutableRefObject } from 'react';
 
 type FnRef<T> = (value: T) => void;
 

package/types.d.ts

@@ -1179,6 +1179,8 @@ export interface IconProps extends GenericProps {
 	size?: IconSizes;
 	/** Theme adapting the component to light or dark background. */
 	theme?: Theme;
+	/** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+	alt?: string;
 }
 /**
  * Icon component.
@@ -2097,6 +2099,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;
 }
 /**
  * Slideshow component.
@@ -2118,6 +2124,58 @@ export declare type SlideshowItemProps = GenericProps;
  * @return React element.
  */
 export declare const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement>;
+export interface UseSlideshowControlsOptions {
+	/** default active index to be displayed */
+	defaultActiveIndex?: number;
+	/** total slides to display */
+	itemsCount: number;
+	/** Index of the current slide. */
+	activeIndex?: number;
+	/** Whether the automatic rotation of the slideshow is enabled or not. */
+	autoPlay?: boolean;
+	/** Whether the image has to fill its container height or not. */
+	fillHeight?: boolean;
+	/** Number of slides to group together. */
+	groupBy?: number;
+	/** Interval between each slide when automatic rotation is enabled. */
+	interval?: number;
+	/** Callback when slide changes */
+	onChange?(index: number): void;
+	/** slideshow HTML id attribute */
+	id?: string;
+	/** slides wrapper HTML id attribute */
+	slidesId?: string;
+}
+export interface UseSlideshowControls {
+	/** Index for the first visible slide, should be used when groupBy is passed in */
+	startIndexVisible: number;
+	/** Index for the last visible slide, should be used when groupBy is passed in */
+	endIndexVisible: number;
+	/** total slides to be displayed */
+	slidesCount: number;
+	/** callback to set  */
+	setSlideshow: (element: HTMLDivElement | undefined) => void;
+	/** reference to the slideshow element */
+	slideshow: HTMLDivElement | undefined;
+	/** id to be used for the slideshow */
+	slideshowId: string;
+	/** id to be used for the wrapper that contains the slides */
+	slideshowSlidesId: string;
+	/** callback that triggers the previous slide while using the slideshow controls  */
+	onPreviousClick: (loopback: boolean) => void;
+	/** callback that triggers the next slide while using the slideshow controls */
+	onNextClick: (loopback: boolean) => void;
+	/** callback that triggers a specific page while using the slideshow controls */
+	onPaginationClick: (index: number) => void;
+	/** whether the slideshow is autoplaying or not */
+	isAutoPlaying: boolean;
+	/** 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;
+}
 /**
  * Defines the props of the component.
  */
@@ -2141,14 +2199,10 @@ export interface SlideshowControlsProps extends GenericProps {
 	/** On previous button click callback. */
 	onPreviousClick?(loopback?: boolean): void;
 }
-/**
- * SlideshowControls component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export declare const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement>;
+export declare const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> & {
+	useSlideshowControls: ({ activeIndex, groupBy, interval, autoPlay, defaultActiveIndex, onChange, itemsCount, id, slidesId, }: import("../../hooks/useSlideshowControls").UseSlideshowControlsOptions) => import("../../hooks/useSlideshowControls").UseSlideshowControls;
+	useSlideshowControlsDefaultOptions: Partial<import("../../hooks/useSlideshowControls").UseSlideshowControlsOptions>;
+};
 /**
  * Defines the props of the component.
  */