@lumx/react 3.20.1-alpha.32 → 3.20.1-alpha.33

package/_internal/packages/lumx-react/src/hooks/useIntersectionObserver-dfa00cf7.js

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Convenient hook to create interaction observers.
+ *
+ * @param elements Elements to observe.
+ * @param options  IntersectionObserver options.
+ * @return Map of intersections.
+ */
+function useIntersectionObserver(elements, options) {
+  const [intersections, setIntersections] = useState(() => new Map());
+  useEffect(() => {
+    if (elements.length < 1 || !elements.some(Boolean)) {
+      return undefined;
+    }
+    const observer = new IntersectionObserver(entries => {
+      for (const entry of entries) {
+        intersections.set(entry.target, entry);
+      }
+      setIntersections(new Map(intersections));
+    }, options);
+    for (const element of elements) {
+      if (element) {
+        observer.observe(element);
+      }
+    }
+    return () => observer.disconnect();
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [...elements]);
+  return intersections;
+}
+
+export { useIntersectionObserver };
+//# sourceMappingURL=useIntersectionObserver-dfa00cf7.js.map

package/_internal/packages/lumx-react/src/hooks/useIntersectionObserver-dfa00cf7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionObserver-dfa00cf7.js","sources":["../../../../../../src/hooks/useIntersectionObserver.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type Intersections<T> = Map<T, IntersectionObserverEntry>;\n\n/**\n * Convenient hook to create interaction observers.\n *\n * @param elements Elements to observe.\n * @param options  IntersectionObserver options.\n * @return Map of intersections.\n */\nexport function useIntersectionObserver<T extends Element>(\n    elements: Array<T | null | undefined>,\n    options?: IntersectionObserverInit,\n): Intersections<T> {\n    const [intersections, setIntersections] = useState<Intersections<T>>(() => new Map());\n\n    useEffect(\n        () => {\n            if (elements.length < 1 || !elements.some(Boolean)) {\n                return undefined;\n            }\n\n            const observer = new IntersectionObserver((entries) => {\n                for (const entry of entries) {\n                    intersections.set(entry.target as T, entry);\n                }\n                setIntersections(new Map(intersections));\n            }, options);\n\n            for (const element of elements) {\n                if (element) {\n                    observer.observe(element);\n                }\n            }\n            return () => observer.disconnect();\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [...elements],\n    );\n\n    return intersections;\n}\n"],"names":["useIntersectionObserver","elements","options","intersections","setIntersections","useState","Map","useEffect","length","some","Boolean","undefined","observer","IntersectionObserver","entries","entry","set","target","element","observe","disconnect"],"mappings":";;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,uBAAuBA,CACnCC,QAAqC,EACrCC,OAAkC,EAClB;AAChB,EAAA,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,QAAQ,CAAmB,MAAM,IAAIC,GAAG,EAAE,CAAC,CAAA;AAErFC,EAAAA,SAAS,CACL,MAAM;AACF,IAAA,IAAIN,QAAQ,CAACO,MAAM,GAAG,CAAC,IAAI,CAACP,QAAQ,CAACQ,IAAI,CAACC,OAAO,CAAC,EAAE;AAChD,MAAA,OAAOC,SAAS,CAAA;AACpB,KAAA;AAEA,IAAA,MAAMC,QAAQ,GAAG,IAAIC,oBAAoB,CAAEC,OAAO,IAAK;AACnD,MAAA,KAAK,MAAMC,KAAK,IAAID,OAAO,EAAE;QACzBX,aAAa,CAACa,GAAG,CAACD,KAAK,CAACE,MAAM,EAAOF,KAAK,CAAC,CAAA;AAC/C,OAAA;AACAX,MAAAA,gBAAgB,CAAC,IAAIE,GAAG,CAACH,aAAa,CAAC,CAAC,CAAA;KAC3C,EAAED,OAAO,CAAC,CAAA;AAEX,IAAA,KAAK,MAAMgB,OAAO,IAAIjB,QAAQ,EAAE;AAC5B,MAAA,IAAIiB,OAAO,EAAE;AACTN,QAAAA,QAAQ,CAACO,OAAO,CAACD,OAAO,CAAC,CAAA;AAC7B,OAAA;AACJ,KAAA;AACA,IAAA,OAAO,MAAMN,QAAQ,CAACQ,UAAU,EAAE,CAAA;GACrC;AACD;EACA,CAAC,GAAGnB,QAAQ,CAChB,CAAC,CAAA;AAED,EAAA,OAAOE,aAAa,CAAA;AACxB;;;;"}

package/_internal/packages/lumx-react/src/hooks/useInterval-45ef51db.js

@@ -0,0 +1,29 @@
+import { useRef, useEffect } from 'react';
+import isFunction from 'lodash/isFunction';
+
+/**
+ * Making setInterval Declarative with React Hooks.
+ * Credits: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ *
+ * @param callback Function called by setInterval.
+ * @param     delay    Delay for setInterval.
+ */
+function useInterval(callback, delay) {
+  const savedCallback = useRef();
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+  useEffect(() => {
+    if (delay === null) return undefined;
+    function tick() {
+      if (isFunction(savedCallback.current)) {
+        savedCallback.current();
+      }
+    }
+    const id = setInterval(tick, delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}
+
+export { useInterval };
+//# sourceMappingURL=useInterval-45ef51db.js.map

package/_internal/packages/lumx-react/src/hooks/useInterval-45ef51db.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval-45ef51db.js","sources":["../../../../../../src/hooks/useInterval.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport isFunction from 'lodash/isFunction';\nimport { Callback } from '@lumx/react/utils/type';\n\n/**\n * Making setInterval Declarative with React Hooks.\n * Credits: https://overreacted.io/making-setinterval-declarative-with-react-hooks/\n *\n * @param callback Function called by setInterval.\n * @param     delay    Delay for setInterval.\n */\nexport function useInterval(callback: Callback, delay: number | null): void {\n    const savedCallback = useRef<Callback>();\n\n    useEffect(() => {\n        savedCallback.current = callback;\n    });\n\n    useEffect(() => {\n        if (delay === null) return undefined;\n\n        function tick() {\n            if (isFunction(savedCallback.current)) {\n                savedCallback.current();\n            }\n        }\n        const id = setInterval(tick, delay);\n        return () => clearInterval(id);\n    }, [delay]);\n}\n"],"names":["useInterval","callback","delay","savedCallback","useRef","useEffect","current","undefined","tick","isFunction","id","setInterval","clearInterval"],"mappings":";;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,WAAWA,CAACC,QAAkB,EAAEC,KAAoB,EAAQ;AACxE,EAAA,MAAMC,aAAa,GAAGC,MAAM,EAAY,CAAA;AAExCC,EAAAA,SAAS,CAAC,MAAM;IACZF,aAAa,CAACG,OAAO,GAAGL,QAAQ,CAAA;AACpC,GAAC,CAAC,CAAA;AAEFI,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIH,KAAK,KAAK,IAAI,EAAE,OAAOK,SAAS,CAAA;IAEpC,SAASC,IAAIA,GAAG;AACZ,MAAA,IAAIC,UAAU,CAACN,aAAa,CAACG,OAAO,CAAC,EAAE;QACnCH,aAAa,CAACG,OAAO,EAAE,CAAA;AAC3B,OAAA;AACJ,KAAA;AACA,IAAA,MAAMI,EAAE,GAAGC,WAAW,CAACH,IAAI,EAAEN,KAAK,CAAC,CAAA;AACnC,IAAA,OAAO,MAAMU,aAAa,CAACF,EAAE,CAAC,CAAA;AAClC,GAAC,EAAE,CAACR,KAAK,CAAC,CAAC,CAAA;AACf;;;;"}

package/_internal/packages/lumx-react/src/hooks/useKeyboardListNavigation-2040beb8.js

@@ -0,0 +1,169 @@
+import { useState, useEffect } from 'react';
+import get from 'lodash/get';
+
+const INITIAL_INDEX = -1;
+
+/**
+ * This custom hook provides the necessary set of functions and values to properly navigate
+ * a list using the keyboard.
+ *
+ * @param  items                    the list of items that will be navigated using the keyboard.
+ * @param  ref                      A reference to the element that is controlling the navigation.
+ * @param  onListItemSelected       callback to be executed when the ENTER key is pressed on an item.
+ * @param  onListItemNavigated      callback to be executed when the Arrow keys are pressed.
+ * @param  onEnterPressed           callback to be executed when the ENTER key is pressed.
+ * @param  onBackspacePressed       callback to be executed when the BACKSPACE key is pressed.
+ * @param  keepFocusAfterSelection  determines whether after selecting an item, the focus should be maintained on the current target or not.
+ * @param  initialIndex             where should the navigation start from. it defaults to `-1`, so the first item navigated is the item on position `0`.
+ * @param  preventTabOnEnteredValue determines whether upon TAB, if there is a value entered, the event is prevented or not.
+ * @return useKeyboardListNavigation helpers.
+ */
+const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNavigated, onEnterPressed, onBackspacePressed, keepFocusAfterSelection = false, initialIndex = INITIAL_INDEX, preventTabOnEnteredValue = true) => {
+  const [activeItemIndex, setActiveItemIndex] = useState(initialIndex);
+
+  /**
+   * This function calculates the next index in the list to be highlighted
+   * @param key - key code pressed
+   * @return next active index
+   */
+  const calculateActiveIndex = key => {
+    switch (key) {
+      case 'ArrowDown':
+        return activeItemIndex + 1 < items.length ? activeItemIndex + 1 : 0;
+      case 'ArrowUp':
+        return activeItemIndex - 1 >= 0 ? activeItemIndex - 1 : items.length - 1;
+      default:
+        return initialIndex;
+    }
+  };
+
+  /**
+   * Resets the active index to the initial state
+   */
+  const resetActiveIndex = () => {
+    setActiveItemIndex(initialIndex);
+  };
+
+  /**
+   * Prevents the default event and stops the propagation of said event
+   * @param evt - key pressed event
+   */
+  const preventDefaultAndStopPropagation = evt => {
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+
+  /**
+   * Handles navigation with the arrows using the keyboard
+   * @param evt - key pressed event
+   */
+  const onArrowPressed = evt => {
+    const {
+      key
+    } = evt;
+    const nextActiveIndex = calculateActiveIndex(key);
+    setActiveItemIndex(nextActiveIndex);
+    preventDefaultAndStopPropagation(evt);
+    if (onListItemNavigated) {
+      const selectedItem = items[nextActiveIndex];
+      onListItemNavigated(selectedItem);
+    }
+  };
+
+  /**
+   * Handles the event when the backspace key is pressed
+   * @param evt - key pressed event
+   */
+  const onBackspaceKeyPressed = evt => {
+    if (onBackspacePressed) {
+      onBackspacePressed(evt);
+    }
+  };
+
+  /**
+   * Handles when the ENTER key is pressed
+   * @param evt - key pressed event
+   */
+  const onEnterKeyPressed = evt => {
+    if (!onListItemSelected) {
+      return;
+    }
+    preventDefaultAndStopPropagation(evt);
+    if (!keepFocusAfterSelection) {
+      evt.currentTarget.blur();
+    }
+    const selectedItem = items[activeItemIndex];
+    if (selectedItem) {
+      onListItemSelected(selectedItem);
+      resetActiveIndex();
+    } else if (activeItemIndex === initialIndex && onEnterPressed) {
+      const value = get(evt, 'target.value');
+      onEnterPressed(value);
+      resetActiveIndex();
+    }
+  };
+
+  /**
+   * Handles when the TAB key is pressed
+   * @param evt - key pressed event
+   */
+  const onTabKeyPressed = evt => {
+    const value = get(evt, 'target.value');
+    if (preventTabOnEnteredValue && value && value.length > 0) {
+      preventDefaultAndStopPropagation(evt);
+    }
+  };
+
+  /**
+   * In order to make it easier in the future to add new events depending on the key
+   * a map was created to add these handlers. In the future, if there is another event
+   * that we need to manage depending on a specific key, we just need to add the key code
+   * here, and as a value, the handler for said key.
+   */
+  const eventsForKeyPressed = {
+    ArrowDown: onArrowPressed,
+    Tab: onTabKeyPressed,
+    ArrowUp: onArrowPressed,
+    Enter: onEnterKeyPressed,
+    Backspace: onBackspaceKeyPressed
+  };
+
+  /**
+   * Calculates the next active item index depending on the key pressed.
+   * If the key pressed was ENTER, the function executes the callback `onListItemSelected`
+   * and resets the active index, since an item was selected.
+   * @param evt - key pressed or key down event
+   */
+  const onKeyboardNavigation = evt => {
+    const {
+      key
+    } = evt;
+    const handler = eventsForKeyPressed[key];
+    if (handler) {
+      handler(evt);
+    }
+  };
+  useEffect(() => {
+    const {
+      current: currentElement
+    } = ref;
+    if (!currentElement) {
+      return undefined;
+    }
+    currentElement.addEventListener('focus', resetActiveIndex);
+    currentElement.addEventListener('keydown', onKeyboardNavigation);
+    return () => {
+      currentElement.removeEventListener('focus', resetActiveIndex);
+      currentElement.removeEventListener('keydown', onKeyboardNavigation);
+    };
+  });
+  return {
+    activeItemIndex,
+    onKeyboardNavigation,
+    resetActiveIndex,
+    setActiveItemIndex
+  };
+};
+
+export { useKeyboardListNavigation };
+//# sourceMappingURL=useKeyboardListNavigation-2040beb8.js.map

package/_internal/packages/lumx-react/src/hooks/useKeyboardListNavigation-2040beb8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardListNavigation-2040beb8.js","sources":["../../../../../../src/hooks/useKeyboardListNavigation.tsx"],"sourcesContent":["import { RefObject, SetStateAction, useEffect, useState } from 'react';\n\nimport get from 'lodash/get';\n\ntype Listener = (evt: KeyboardEvent) => void;\n\ninterface UseKeyboardListNavigationType {\n    /** the current active index */\n    activeItemIndex: number;\n    /** callback to be used when a key is pressed. usually used with the native prop `onKeyDown` */\n    onKeyboardNavigation: Listener;\n    /** Resets the active index to the initial state */\n    resetActiveIndex(): void;\n    /** Sets the active index to a given value */\n    setActiveItemIndex(value: SetStateAction<number>): void;\n}\n\nexport type useKeyboardListNavigationType = <I>(\n    items: I[],\n    ref: RefObject<HTMLElement>,\n    onListItemSelected: (itemSelected: I) => void,\n    onListItemNavigated?: (itemSelected: I) => void,\n    onEnterPressed?: (itemSelected: string) => void,\n    onBackspacePressed?: Listener,\n    keepFocusAfterSelection?: boolean,\n    initialIndex?: number,\n    preventTabOnEnteredValue?: boolean,\n) => UseKeyboardListNavigationType;\n\nconst INITIAL_INDEX = -1;\n\n/**\n * This custom hook provides the necessary set of functions and values to properly navigate\n * a list using the keyboard.\n *\n * @param  items                    the list of items that will be navigated using the keyboard.\n * @param  ref                      A reference to the element that is controlling the navigation.\n * @param  onListItemSelected       callback to be executed when the ENTER key is pressed on an item.\n * @param  onListItemNavigated      callback to be executed when the Arrow keys are pressed.\n * @param  onEnterPressed           callback to be executed when the ENTER key is pressed.\n * @param  onBackspacePressed       callback to be executed when the BACKSPACE key is pressed.\n * @param  keepFocusAfterSelection  determines whether after selecting an item, the focus should be maintained on the current target or not.\n * @param  initialIndex             where should the navigation start from. it defaults to `-1`, so the first item navigated is the item on position `0`.\n * @param  preventTabOnEnteredValue determines whether upon TAB, if there is a value entered, the event is prevented or not.\n * @return useKeyboardListNavigation helpers.\n */\nexport const useKeyboardListNavigation: useKeyboardListNavigationType = (\n    items,\n    ref,\n    onListItemSelected,\n    onListItemNavigated,\n    onEnterPressed,\n    onBackspacePressed,\n    keepFocusAfterSelection = false,\n    initialIndex = INITIAL_INDEX,\n    preventTabOnEnteredValue = true,\n) => {\n    const [activeItemIndex, setActiveItemIndex] = useState(initialIndex);\n\n    /**\n     * This function calculates the next index in the list to be highlighted\n     * @param key - key code pressed\n     * @return next active index\n     */\n    const calculateActiveIndex = (key: string): number => {\n        switch (key) {\n            case 'ArrowDown':\n                return activeItemIndex + 1 < items.length ? activeItemIndex + 1 : 0;\n            case 'ArrowUp':\n                return activeItemIndex - 1 >= 0 ? activeItemIndex - 1 : items.length - 1;\n            default:\n                return initialIndex;\n        }\n    };\n\n    /**\n     * Resets the active index to the initial state\n     */\n    const resetActiveIndex = () => {\n        setActiveItemIndex(initialIndex);\n    };\n\n    /**\n     * Prevents the default event and stops the propagation of said event\n     * @param evt - key pressed event\n     */\n    const preventDefaultAndStopPropagation: Listener = (evt) => {\n        evt.preventDefault();\n        evt.stopPropagation();\n    };\n\n    /**\n     * Handles navigation with the arrows using the keyboard\n     * @param evt - key pressed event\n     */\n    const onArrowPressed: Listener = (evt) => {\n        const { key } = evt;\n        const nextActiveIndex = calculateActiveIndex(key);\n        setActiveItemIndex(nextActiveIndex);\n        preventDefaultAndStopPropagation(evt);\n        if (onListItemNavigated) {\n            const selectedItem = items[nextActiveIndex];\n            onListItemNavigated(selectedItem);\n        }\n    };\n\n    /**\n     * Handles the event when the backspace key is pressed\n     * @param evt - key pressed event\n     */\n    const onBackspaceKeyPressed: Listener = (evt) => {\n        if (onBackspacePressed) {\n            onBackspacePressed(evt);\n        }\n    };\n\n    /**\n     * Handles when the ENTER key is pressed\n     * @param evt - key pressed event\n     */\n    const onEnterKeyPressed: Listener = (evt) => {\n        if (!onListItemSelected) {\n            return;\n        }\n\n        preventDefaultAndStopPropagation(evt);\n\n        if (!keepFocusAfterSelection) {\n            (evt.currentTarget as HTMLElement).blur();\n        }\n\n        const selectedItem = items[activeItemIndex];\n\n        if (selectedItem) {\n            onListItemSelected(selectedItem);\n            resetActiveIndex();\n        } else if (activeItemIndex === initialIndex && onEnterPressed) {\n            const value = get(evt, 'target.value');\n            onEnterPressed(value);\n            resetActiveIndex();\n        }\n    };\n\n    /**\n     * Handles when the TAB key is pressed\n     * @param evt - key pressed event\n     */\n    const onTabKeyPressed: Listener = (evt) => {\n        const value = get(evt, 'target.value');\n\n        if (preventTabOnEnteredValue && value && value.length > 0) {\n            preventDefaultAndStopPropagation(evt);\n        }\n    };\n\n    /**\n     * In order to make it easier in the future to add new events depending on the key\n     * a map was created to add these handlers. In the future, if there is another event\n     * that we need to manage depending on a specific key, we just need to add the key code\n     * here, and as a value, the handler for said key.\n     */\n    const eventsForKeyPressed: Record<string, Listener> = {\n        ArrowDown: onArrowPressed,\n        Tab: onTabKeyPressed,\n        ArrowUp: onArrowPressed,\n        Enter: onEnterKeyPressed,\n        Backspace: onBackspaceKeyPressed,\n    };\n\n    /**\n     * Calculates the next active item index depending on the key pressed.\n     * If the key pressed was ENTER, the function executes the callback `onListItemSelected`\n     * and resets the active index, since an item was selected.\n     * @param evt - key pressed or key down event\n     */\n    const onKeyboardNavigation: Listener = (evt) => {\n        const { key } = evt;\n        const handler = eventsForKeyPressed[key];\n\n        if (handler) {\n            handler(evt);\n        }\n    };\n\n    useEffect(() => {\n        const { current: currentElement } = ref;\n        if (!currentElement) {\n            return undefined;\n        }\n        currentElement.addEventListener('focus', resetActiveIndex);\n        currentElement.addEventListener('keydown', onKeyboardNavigation);\n        return () => {\n            currentElement.removeEventListener('focus', resetActiveIndex);\n            currentElement.removeEventListener('keydown', onKeyboardNavigation);\n        };\n    });\n\n    return {\n        activeItemIndex,\n        onKeyboardNavigation,\n        resetActiveIndex,\n        setActiveItemIndex,\n    };\n};\n"],"names":["INITIAL_INDEX","useKeyboardListNavigation","items","ref","onListItemSelected","onListItemNavigated","onEnterPressed","onBackspacePressed","keepFocusAfterSelection","initialIndex","preventTabOnEnteredValue","activeItemIndex","setActiveItemIndex","useState","calculateActiveIndex","key","length","resetActiveIndex","preventDefaultAndStopPropagation","evt","preventDefault","stopPropagation","onArrowPressed","nextActiveIndex","selectedItem","onBackspaceKeyPressed","onEnterKeyPressed","currentTarget","blur","value","get","onTabKeyPressed","eventsForKeyPressed","ArrowDown","Tab","ArrowUp","Enter","Backspace","onKeyboardNavigation","handler","useEffect","current","currentElement","undefined","addEventListener","removeEventListener"],"mappings":"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"}

package/_internal/packages/lumx-react/src/hooks/useListenFocus-bb5fb0f9.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Listen on element focus to store the focus status.
+ */
+function useListenFocus(ref) {
+  const [isFocus, setFocus] = useState(false);
+  useEffect(() => {
+    const {
+      current: element
+    } = ref;
+    if (!element) {
+      return undefined;
+    }
+    const onFocus = () => setFocus(true);
+    const onBlur = () => setFocus(false);
+    element.addEventListener('focus', onFocus);
+    element.addEventListener('blur', onBlur);
+    return () => {
+      element.removeEventListener('focus', onFocus);
+      element.removeEventListener('blur', onBlur);
+    };
+  }, [ref, setFocus]);
+  return isFocus;
+}
+
+export { useListenFocus };
+//# sourceMappingURL=useListenFocus-bb5fb0f9.js.map

package/_internal/packages/lumx-react/src/hooks/useListenFocus-bb5fb0f9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListenFocus-bb5fb0f9.js","sources":["../../../../../../src/hooks/useListenFocus.tsx"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\n/**\n * Listen on element focus to store the focus status.\n */\nexport function useListenFocus(ref: RefObject<HTMLElement>) {\n    const [isFocus, setFocus] = useState(false);\n\n    useEffect(() => {\n        const { current: element } = ref;\n        if (!element) {\n            return undefined;\n        }\n\n        const onFocus = () => setFocus(true);\n        const onBlur = () => setFocus(false);\n        element.addEventListener('focus', onFocus);\n        element.addEventListener('blur', onBlur);\n        return () => {\n            element.removeEventListener('focus', onFocus);\n            element.removeEventListener('blur', onBlur);\n        };\n    }, [ref, setFocus]);\n\n    return isFocus;\n}\n"],"names":["useListenFocus","ref","isFocus","setFocus","useState","useEffect","current","element","undefined","onFocus","onBlur","addEventListener","removeEventListener"],"mappings":";;AAEA;AACA;AACA;AACO,SAASA,cAAcA,CAACC,GAA2B,EAAE;EACxD,MAAM,CAACC,OAAO,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAE3CC,EAAAA,SAAS,CAAC,MAAM;IACZ,MAAM;AAAEC,MAAAA,OAAO,EAAEC,OAAAA;AAAQ,KAAC,GAAGN,GAAG,CAAA;IAChC,IAAI,CAACM,OAAO,EAAE;AACV,MAAA,OAAOC,SAAS,CAAA;AACpB,KAAA;AAEA,IAAA,MAAMC,OAAO,GAAGA,MAAMN,QAAQ,CAAC,IAAI,CAAC,CAAA;AACpC,IAAA,MAAMO,MAAM,GAAGA,MAAMP,QAAQ,CAAC,KAAK,CAAC,CAAA;AACpCI,IAAAA,OAAO,CAACI,gBAAgB,CAAC,OAAO,EAAEF,OAAO,CAAC,CAAA;AAC1CF,IAAAA,OAAO,CAACI,gBAAgB,CAAC,MAAM,EAAED,MAAM,CAAC,CAAA;AACxC,IAAA,OAAO,MAAM;AACTH,MAAAA,OAAO,CAACK,mBAAmB,CAAC,OAAO,EAAEH,OAAO,CAAC,CAAA;AAC7CF,MAAAA,OAAO,CAACK,mBAAmB,CAAC,MAAM,EAAEF,MAAM,CAAC,CAAA;KAC9C,CAAA;AACL,GAAC,EAAE,CAACT,GAAG,EAAEE,QAAQ,CAAC,CAAC,CAAA;AAEnB,EAAA,OAAOD,OAAO,CAAA;AAClB;;;;"}

package/_internal/packages/lumx-react/src/hooks/useOverflowTooltipLabel-251ac3e6.js

@@ -0,0 +1,34 @@
+import React__default from 'react';
+import { useTooltipContext } from '../components/tooltip/context-841c2303.js';
+import { VISUALLY_HIDDEN } from '../constants-6af61e2f.js';
+
+/**
+ * Compute a tooltip label based on a label element `innerText` if the text overflows.
+ * Updates dynamically on content changes (but not on resize!)
+ */
+const useOverflowTooltipLabel = content => {
+  const parentTooltip = useTooltipContext();
+  const [tooltipLabel, setTooltipLabel] = React__default.useState(undefined);
+  const [labelElement, setLabelElement] = React__default.useState(null);
+  React__default.useLayoutEffect(() => {
+    if (
+    // Not inside a tooltip
+    !parentTooltip && labelElement &&
+    // Not inside a visually hidden
+    !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&
+    // Text overflows
+    labelElement.offsetWidth < labelElement.scrollWidth) {
+      // Set tooltip label
+      setTooltipLabel(labelElement.innerText);
+    } else {
+      setTooltipLabel(undefined);
+    }
+  }, [labelElement, parentTooltip, content]);
+  return {
+    labelRef: setLabelElement,
+    tooltipLabel
+  };
+};
+
+export { useOverflowTooltipLabel };
+//# sourceMappingURL=useOverflowTooltipLabel-251ac3e6.js.map

package/_internal/packages/lumx-react/src/hooks/useOverflowTooltipLabel-251ac3e6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowTooltipLabel-251ac3e6.js","sources":["../../../../../../src/hooks/useOverflowTooltipLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { useTooltipContext } from '@lumx/react/components/tooltip/context';\nimport { VISUALLY_HIDDEN } from '@lumx/react/constants';\n\n/**\n * Compute a tooltip label based on a label element `innerText` if the text overflows.\n * Updates dynamically on content changes (but not on resize!)\n */\nexport const useOverflowTooltipLabel = (content: React.ReactNode) => {\n    const parentTooltip = useTooltipContext();\n    const [tooltipLabel, setTooltipLabel] = React.useState<string | undefined>(undefined);\n    const [labelElement, setLabelElement] = React.useState<HTMLElement | null>(null);\n\n    React.useLayoutEffect(() => {\n        if (\n            // Not inside a tooltip\n            !parentTooltip &&\n            labelElement &&\n            // Not inside a visually hidden\n            !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&\n            // Text overflows\n            labelElement.offsetWidth < labelElement.scrollWidth\n        ) {\n            // Set tooltip label\n            setTooltipLabel(labelElement.innerText);\n        } else {\n            setTooltipLabel(undefined);\n        }\n    }, [labelElement, parentTooltip, content]);\n\n    return { labelRef: setLabelElement, tooltipLabel };\n};\n"],"names":["useOverflowTooltipLabel","content","parentTooltip","useTooltipContext","tooltipLabel","setTooltipLabel","React","useState","undefined","labelElement","setLabelElement","useLayoutEffect","closest","VISUALLY_HIDDEN","offsetWidth","scrollWidth","innerText","labelRef"],"mappings":";;;;AAIA;AACA;AACA;AACA;AACaA,MAAAA,uBAAuB,GAAIC,OAAwB,IAAK;AACjE,EAAA,MAAMC,aAAa,GAAGC,iBAAiB,EAAE,CAAA;EACzC,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAqBC,SAAS,CAAC,CAAA;EACrF,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGJ,cAAK,CAACC,QAAQ,CAAqB,IAAI,CAAC,CAAA;EAEhFD,cAAK,CAACK,eAAe,CAAC,MAAM;AACxB,IAAA;AACI;IACA,CAACT,aAAa,IACdO,YAAY;AACZ;AACA,IAAA,CAACA,YAAY,EAAEG,OAAO,CAAC,CAAIC,CAAAA,EAAAA,eAAe,EAAE,CAAC;AAC7C;AACAJ,IAAAA,YAAY,CAACK,WAAW,GAAGL,YAAY,CAACM,WAAW,EACrD;AACE;AACAV,MAAAA,eAAe,CAACI,YAAY,CAACO,SAAS,CAAC,CAAA;AAC3C,KAAC,MAAM;MACHX,eAAe,CAACG,SAAS,CAAC,CAAA;AAC9B,KAAA;GACH,EAAE,CAACC,YAAY,EAAEP,aAAa,EAAED,OAAO,CAAC,CAAC,CAAA;EAE1C,OAAO;AAAEgB,IAAAA,QAAQ,EAAEP,eAAe;AAAEN,IAAAA,YAAAA;GAAc,CAAA;AACtD;;;;"}

package/_internal/packages/lumx-react/src/hooks/usePopper-3e9a7aa1.js

@@ -0,0 +1,24 @@
+import { usePopper as usePopper$1 } from '../../../../node_modules/react-popper/lib/esm/usePopper-83c4b46f.js';
+import { IS_BROWSER } from '../constants-6af61e2f.js';
+
+/** Stub usePopper for use outside of browsers */
+const useStubPopper = (_a, _p, {
+  placement
+}) => ({
+  attributes: {
+    popper: {
+      'data-popper-placement': placement
+    }
+  },
+  styles: {
+    popper: {
+      transform: 'translate(1, 1)'
+    }
+  }
+});
+
+/** Switch hook implementation between environment */
+const usePopper = IS_BROWSER ? usePopper$1 : useStubPopper;
+
+export { usePopper };
+//# sourceMappingURL=usePopper-3e9a7aa1.js.map

package/_internal/packages/lumx-react/src/hooks/usePopper-3e9a7aa1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopper-3e9a7aa1.js","sources":["../../../../../../src/hooks/usePopper.ts"],"sourcesContent":["import { usePopper as usePopperHook } from 'react-popper';\nimport { IS_BROWSER } from '@lumx/react/constants';\n\n/** Stub usePopper for use outside of browsers */\nconst useStubPopper: typeof usePopperHook = (_a, _p, { placement }: any) =>\n    ({\n        attributes: { popper: { 'data-popper-placement': placement } },\n        styles: { popper: { transform: 'translate(1, 1)' } },\n    }) as any;\n\n/** Switch hook implementation between environment */\nexport const usePopper: typeof usePopperHook = IS_BROWSER ? usePopperHook : useStubPopper;\n"],"names":["useStubPopper","_a","_p","placement","attributes","popper","styles","transform","usePopper","IS_BROWSER","usePopperHook"],"mappings":";;;AAGA;AACA,MAAMA,aAAmC,GAAGA,CAACC,EAAE,EAAEC,EAAE,EAAE;AAAEC,EAAAA,SAAAA;AAAe,CAAC,MAClE;AACGC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAE,MAAA,uBAAuB,EAAEF,SAAAA;AAAU,KAAA;GAAG;AAC9DG,EAAAA,MAAM,EAAE;AAAED,IAAAA,MAAM,EAAE;AAAEE,MAAAA,SAAS,EAAE,iBAAA;AAAkB,KAAA;AAAE,GAAA;AACvD,CAAC,CAAQ,CAAA;;AAEb;MACaC,SAA+B,GAAGC,UAAU,GAAGC,WAAa,GAAGV;;;;"}

package/_internal/packages/lumx-react/src/hooks/usePreviousValue-6f3bb7d6.js

@@ -0,0 +1,16 @@
+import React__default from 'react';
+
+/**
+ * Returns the value from the previous render.
+ */
+function usePreviousValue(value) {
+  const prevValueRef = React__default.useRef();
+  const prevValue = prevValueRef.current;
+  React__default.useEffect(() => {
+    prevValueRef.current = value;
+  }, [value]);
+  return prevValue;
+}
+
+export { usePreviousValue };
+//# sourceMappingURL=usePreviousValue-6f3bb7d6.js.map

package/_internal/packages/lumx-react/src/hooks/usePreviousValue-6f3bb7d6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviousValue-6f3bb7d6.js","sources":["../../../../../../src/hooks/usePreviousValue.ts"],"sourcesContent":["import React from 'react';\n/**\n * Returns the value from the previous render.\n */\nexport function usePreviousValue<V>(value: V): V | undefined {\n    const prevValueRef = React.useRef<V>();\n    const prevValue = prevValueRef.current;\n    React.useEffect(() => {\n        prevValueRef.current = value;\n    }, [value]);\n    return prevValue;\n}\n"],"names":["usePreviousValue","value","prevValueRef","React","useRef","prevValue","current","useEffect"],"mappings":";;AACA;AACA;AACA;AACO,SAASA,gBAAgBA,CAAIC,KAAQ,EAAiB;AACzD,EAAA,MAAMC,YAAY,GAAGC,cAAK,CAACC,MAAM,EAAK,CAAA;AACtC,EAAA,MAAMC,SAAS,GAAGH,YAAY,CAACI,OAAO,CAAA;EACtCH,cAAK,CAACI,SAAS,CAAC,MAAM;IAClBL,YAAY,CAACI,OAAO,GAAGL,KAAK,CAAA;AAChC,GAAC,EAAE,CAACA,KAAK,CAAC,CAAC,CAAA;AACX,EAAA,OAAOI,SAAS,CAAA;AACpB;;;;"}

package/_internal/{useRovingTabIndex-7daf0f24.js → packages/lumx-react/src/hooks/useRovingTabIndex-bb8088e1.js}

@@ -73,5 +73,5 @@ const useRovingTabIndex = ({
   [parentRef, ...extraDependencies]);
 };
 
-export { useRovingTabIndex as u };
-//# sourceMappingURL=useRovingTabIndex-7daf0f24.js.map
+export { useRovingTabIndex };
+//# sourceMappingURL=useRovingTabIndex-bb8088e1.js.map

package/_internal/packages/lumx-react/src/hooks/useRovingTabIndex-bb8088e1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingTabIndex-bb8088e1.js","sources":["../../../../../../src/hooks/useRovingTabIndex.tsx"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\ninterface UseRovingTabIndexOptions {\n    parentRef: RefObject<HTMLElement>;\n    elementSelector: string;\n    keepTabIndex?: boolean;\n    /** Action to trigger when an element is focused using roving tab index */\n    onElementFocus?: (element: HTMLElement) => void;\n    /** List of values to be used as extra dependencies of the useEffect */\n    extraDependencies?: any[];\n}\n\nexport const useRovingTabIndex = ({\n    parentRef,\n    elementSelector,\n    keepTabIndex,\n    onElementFocus,\n    extraDependencies = [],\n}: UseRovingTabIndexOptions): void => {\n    useEffect(\n        () => {\n            const parent = parentRef?.current;\n            if (!parent) {\n                return undefined;\n            }\n\n            const elements = parent.querySelectorAll(elementSelector) as NodeListOf<HTMLElement>;\n            const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex=\"0\"]`);\n\n            const handleKeyDown = (index: number) => (evt: KeyboardEvent) => {\n                let newTabFocus = index;\n                if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {\n                    return;\n                }\n\n                if (evt.key === 'ArrowRight') {\n                    // Move right\n                    newTabFocus += 1;\n                    // If we're at the end, go to the start\n                    if (newTabFocus >= elements.length) {\n                        newTabFocus = 0;\n                    }\n                } else if (evt.key === 'ArrowLeft') {\n                    // Move left\n                    newTabFocus -= 1;\n                    if (newTabFocus < 0) {\n                        // If we're at the start, move to the end\n                        newTabFocus = elements.length - 1;\n                    }\n                }\n                const newElement = elements[newTabFocus];\n                newElement?.focus();\n\n                // When an element is focused using roving tab index, trigger the onElementFocus callback\n                if (newElement && onElementFocus) {\n                    onElementFocus(newElement);\n                }\n\n                if (keepTabIndex) {\n                    (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');\n                    newElement?.setAttribute('tabindex', '0');\n                }\n            };\n\n            if (elements?.length > 0) {\n                elements.forEach((el, key) => {\n                    // if no element has tabindex set to 0, set the first element as focusable\n                    if (!initialFocusableElement && key === 0) {\n                        el.setAttribute('tabindex', '0');\n                        // set all other to -1\n                    } else if (initialFocusableElement !== el) {\n                        el.setAttribute('tabindex', '-1');\n                    }\n                    // add event listener\n                    el.addEventListener('keydown', handleKeyDown(key) as EventListener);\n                });\n            }\n\n            // Cleanup listeners\n            return () => {\n                if (elements?.length > 0) {\n                    elements.forEach((el, key) => {\n                        el.removeEventListener('keydown', handleKeyDown(key) as EventListener);\n                    });\n                }\n            };\n        }, // eslint-disable-next-line react-hooks/exhaustive-deps\n        [parentRef, ...extraDependencies],\n    );\n};\n"],"names":["useRovingTabIndex","parentRef","elementSelector","keepTabIndex","onElementFocus","extraDependencies","useEffect","parent","current","undefined","elements","querySelectorAll","initialFocusableElement","querySelector","handleKeyDown","index","evt","newTabFocus","key","length","newElement","focus","currentTarget","setAttribute","forEach","el","addEventListener","removeEventListener"],"mappings":"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"}

package/_internal/packages/lumx-react/src/hooks/useSizeOnWindowResize-1ee5415f.js

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import throttle from 'lodash/throttle';
+
+/**
+ * Observe element size (only works if it's size depends on the window size).
+ *
+ * (Not using ResizeObserver for better browser backward compat)
+ *
+ * @param elementRef Element to observe
+ * @return the size and a manual update callback
+ */
+function useSizeOnWindowResize(elementRef) {
+  const [size, setSize] = React__default.useState(null);
+  const updateSize = React__default.useMemo(() => throttle(() => {
+    const newSize = elementRef.current?.getBoundingClientRect();
+    if (newSize) setSize(newSize);
+  }, 10), [elementRef]);
+  React__default.useEffect(() => {
+    updateSize();
+    window.addEventListener('resize', updateSize);
+    return () => window.removeEventListener('resize', updateSize);
+  }, [updateSize]);
+  return [size, updateSize];
+}
+
+export { useSizeOnWindowResize };
+//# sourceMappingURL=useSizeOnWindowResize-1ee5415f.js.map

package/_internal/packages/lumx-react/src/hooks/useSizeOnWindowResize-1ee5415f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSizeOnWindowResize-1ee5415f.js","sources":["../../../../../../src/hooks/useSizeOnWindowResize.ts"],"sourcesContent":["import React from 'react';\n\nimport throttle from 'lodash/throttle';\nimport { RectSize } from '@lumx/react/utils/type';\n\n/**\n * Observe element size (only works if it's size depends on the window size).\n *\n * (Not using ResizeObserver for better browser backward compat)\n *\n * @param elementRef Element to observe\n * @return the size and a manual update callback\n */\nexport function useSizeOnWindowResize(elementRef: React.RefObject<HTMLElement>): [RectSize | null, () => void] {\n    const [size, setSize] = React.useState<null | RectSize>(null);\n    const updateSize = React.useMemo(\n        () =>\n            throttle(() => {\n                const newSize = elementRef.current?.getBoundingClientRect();\n                if (newSize) setSize(newSize);\n            }, 10),\n        [elementRef],\n    );\n    React.useEffect(() => {\n        updateSize();\n        window.addEventListener('resize', updateSize);\n        return () => window.removeEventListener('resize', updateSize);\n    }, [updateSize]);\n    return [size, updateSize];\n}\n"],"names":["useSizeOnWindowResize","elementRef","size","setSize","React","useState","updateSize","useMemo","throttle","newSize","current","getBoundingClientRect","useEffect","window","addEventListener","removeEventListener"],"mappings":";;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,qBAAqBA,CAACC,UAAwC,EAAiC;EAC3G,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAkB,IAAI,CAAC,CAAA;EAC7D,MAAMC,UAAU,GAAGF,cAAK,CAACG,OAAO,CAC5B,MACIC,QAAQ,CAAC,MAAM;IACX,MAAMC,OAAO,GAAGR,UAAU,CAACS,OAAO,EAAEC,qBAAqB,EAAE,CAAA;AAC3D,IAAA,IAAIF,OAAO,EAAEN,OAAO,CAACM,OAAO,CAAC,CAAA;AACjC,GAAC,EAAE,EAAE,CAAC,EACV,CAACR,UAAU,CACf,CAAC,CAAA;EACDG,cAAK,CAACQ,SAAS,CAAC,MAAM;AAClBN,IAAAA,UAAU,EAAE,CAAA;AACZO,IAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAER,UAAU,CAAC,CAAA;IAC7C,OAAO,MAAMO,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAET,UAAU,CAAC,CAAA;AACjE,GAAC,EAAE,CAACA,UAAU,CAAC,CAAC,CAAA;AAChB,EAAA,OAAO,CAACJ,IAAI,EAAEI,UAAU,CAAC,CAAA;AAC7B;;;;"}

package/_internal/packages/lumx-react/src/hooks/useSlideshowControls-9c881480.js

@@ -0,0 +1,159 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useInterval } from './useInterval-45ef51db.js';
+import { AUTOPLAY_DEFAULT_INTERVAL } from '../components/slideshow/constants-e50f2a75.js';
+import { useId } from './useId-11687649.js';
+
+const DEFAULT_OPTIONS = {
+  activeIndex: 0,
+  groupBy: 1,
+  interval: AUTOPLAY_DEFAULT_INTERVAL
+};
+const useSlideshowControls = ({
+  activeIndex = DEFAULT_OPTIONS.activeIndex,
+  groupBy = DEFAULT_OPTIONS.groupBy,
+  interval = DEFAULT_OPTIONS.interval,
+  autoPlay,
+  defaultActiveIndex,
+  onChange,
+  itemsCount,
+  id,
+  slidesId
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(activeIndex);
+  // Use state instead of a ref to make the slideshow controls update directly when the element is set.
+  const [element, setElement] = useState(null);
+
+  // Number of slides when using groupBy prop.
+  const slidesCount = Math.ceil(itemsCount / Math.min(groupBy, 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));
+  const [isForcePaused, setIsForcePaused] = useState(false);
+  const isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying;
+  // Start
+  useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? interval : null);
+
+  // Reset current index if it become invalid.
+  useEffect(() => {
+    if (currentIndex > slidesCount - 1) {
+      setCurrentIndex(defaultActiveIndex);
+    }
+  }, [currentIndex, slidesCount, defaultActiveIndex]);
+  const startAutoPlay = () => {
+    setIsAutoPlaying(Boolean(autoPlay));
+  };
+  const stopAutoPlay = () => {
+    setIsAutoPlaying(false);
+  };
+
+  // Handle click on a bullet to go to a specific slide.
+  const onPaginationClick = useCallback(index => {
+    stopAutoPlay();
+    setIsForcePaused(true);
+    if (index >= 0 && index < slidesCount) {
+      setCurrentIndex(index);
+    }
+  }, [slidesCount, setCurrentIndex]);
+
+  // Handle click or keyboard event to go to next slide.
+  const onNextClick = useCallback((loopback = true) => {
+    stopAutoPlay();
+    setIsForcePaused(true);
+    goToNextSlide(loopback);
+  }, [goToNextSlide]);
+
+  // Handle click or keyboard event to go to previous slide.
+  const onPreviousClick = useCallback((loopback = true) => {
+    stopAutoPlay();
+    setIsForcePaused(true);
+    goToPreviousSlide(loopback);
+  }, [goToPreviousSlide]);
+
+  // If the activeIndex props changes, update the current slide
+  useEffect(() => {
+    setCurrentIndex(activeIndex);
+  }, [activeIndex]);
+
+  // If the slide changes, with autoplay for example, trigger "onChange"
+  useEffect(() => {
+    if (!onChange) return;
+    onChange(currentIndex);
+  }, [currentIndex, onChange]);
+  const generatedSlideshowId = useId();
+  const slideshowId = id || generatedSlideshowId;
+  const generatedSlidesId = useId();
+  const slideshowSlidesId = slidesId || generatedSlidesId;
+  const toggleAutoPlay = () => {
+    if (isSlideshowAutoPlaying) {
+      stopAutoPlay();
+    } else {
+      startAutoPlay();
+    }
+  };
+  const toggleForcePause = () => {
+    const shouldBePaused = !isForcePaused;
+    setIsForcePaused(shouldBePaused);
+    if (!shouldBePaused) {
+      startAutoPlay();
+    } else {
+      stopAutoPlay();
+    }
+  };
+
+  // Start index and end index of visible slides.
+  const startIndexVisible = currentIndex * groupBy;
+  const endIndexVisible = startIndexVisible + groupBy;
+  return {
+    startIndexVisible,
+    endIndexVisible,
+    setSlideshow: setElement,
+    slideshow: element,
+    slideshowId,
+    slideshowSlidesId,
+    onPreviousClick,
+    onNextClick,
+    onPaginationClick,
+    isAutoPlaying: isSlideshowAutoPlaying,
+    toggleAutoPlay,
+    activeIndex: currentIndex,
+    slidesCount,
+    setActiveIndex: setCurrentIndex,
+    startAutoPlay,
+    stopAutoPlay,
+    isForcePaused,
+    toggleForcePause
+  };
+};
+
+export { DEFAULT_OPTIONS, useSlideshowControls };
+//# sourceMappingURL=useSlideshowControls-9c881480.js.map