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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSlideshowControls-9c881480.js","sources":["../../../../../../src/hooks/useSlideshowControls.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\n\nimport { useInterval } from '@lumx/react/hooks/useInterval';\nimport { AUTOPLAY_DEFAULT_INTERVAL } from '@lumx/react/components/slideshow/constants';\nimport { useId } from '@lumx/react/hooks/useId';\n\nexport interface UseSlideshowControlsOptions {\n    /** default active index to be displayed */\n    defaultActiveIndex?: number;\n    /** total slides to display */\n    itemsCount: number;\n    /** Index of the current slide. */\n    activeIndex?: number;\n    /** Whether the automatic rotation of the slideshow is enabled or not. */\n    autoPlay?: boolean;\n    /** Whether the image has to fill its container height or not. */\n    fillHeight?: boolean;\n    /** Number of slides to group together. */\n    groupBy?: number;\n    /** Interval between each slide when automatic rotation is enabled. */\n    interval?: number;\n    /** Callback when slide changes */\n    onChange?(index: number): void;\n    /** slideshow HTML id attribute */\n    id?: string;\n    /** slides wrapper HTML id attribute */\n    slidesId?: string;\n}\n\nexport interface UseSlideshowControls {\n    /** Index for the first visible slide, should be used when groupBy is passed in */\n    startIndexVisible: number;\n    /** Index for the last visible slide, should be used when groupBy is passed in */\n    endIndexVisible: number;\n    /** total slides to be displayed */\n    slidesCount: number;\n    /** callback to set  */\n    setSlideshow: (element: HTMLDivElement | null) => void;\n    /** reference to the slideshow element */\n    slideshow: HTMLDivElement | null;\n    /** id to be used for the slideshow */\n    slideshowId: string;\n    /** id to be used for the wrapper that contains the slides */\n    slideshowSlidesId: string;\n    /** callback that triggers the previous slide while using the slideshow controls  */\n    onPreviousClick: (loopback: boolean) => void;\n    /** callback that triggers the next slide while using the slideshow controls */\n    onNextClick: (loopback: boolean) => void;\n    /** callback that triggers a specific page while using the slideshow controls */\n    onPaginationClick: (index: number) => void;\n    /** whether the slideshow is autoplaying or not */\n    isAutoPlaying: boolean;\n    /** whether the slideshow was force paused or not */\n    isForcePaused: boolean;\n    /** callback to change whether the slideshow is autoplaying or not */\n    toggleAutoPlay: () => void;\n    /** calback to change whether the slideshow should be force paused or not */\n    toggleForcePause: () => void;\n    /** current active slide index  */\n    activeIndex: number;\n    /** set the current index as the active one */\n    setActiveIndex: (index: number) => void;\n    /** callback that stops the auto play */\n    stopAutoPlay: () => void;\n    /** callback that starts the auto play */\n    startAutoPlay: () => void;\n}\n\nexport const DEFAULT_OPTIONS = {\n    activeIndex: 0,\n    groupBy: 1,\n    interval: AUTOPLAY_DEFAULT_INTERVAL,\n} as const;\n\nexport const useSlideshowControls = ({\n    activeIndex = DEFAULT_OPTIONS.activeIndex,\n    groupBy = DEFAULT_OPTIONS.groupBy,\n    interval = DEFAULT_OPTIONS.interval,\n    autoPlay,\n    defaultActiveIndex,\n    onChange,\n    itemsCount,\n    id,\n    slidesId,\n}: UseSlideshowControlsOptions): UseSlideshowControls => {\n    const [currentIndex, setCurrentIndex] = useState(activeIndex as number);\n    // Use state instead of a ref to make the slideshow controls update directly when the element is set.\n    const [element, setElement] = useState<HTMLDivElement | null>(null);\n\n    // Number of slides when using groupBy prop.\n    const slidesCount = Math.ceil(itemsCount / Math.min(groupBy as number, itemsCount));\n\n    // Change current index to display next slide.\n    const goToNextSlide = useCallback(\n        (loopback = true) => {\n            setCurrentIndex((index) => {\n                if (loopback && index === slidesCount - 1) {\n                    // Loopback to the start.\n                    return 0;\n                }\n                if (index < slidesCount - 1) {\n                    // Next slide.\n                    return index + 1;\n                }\n                return index;\n            });\n        },\n        [slidesCount, setCurrentIndex],\n    );\n\n    // Change current index to display previous slide.\n    const goToPreviousSlide = useCallback(\n        (loopback = true) => {\n            setCurrentIndex((index) => {\n                if (loopback && index === 0) {\n                    // Loopback to the end.\n                    return slidesCount - 1;\n                }\n                if (index > 0) {\n                    // Previous slide.\n                    return index - 1;\n                }\n                return index;\n            });\n        },\n        [slidesCount, setCurrentIndex],\n    );\n\n    // Auto play\n    const [isAutoPlaying, setIsAutoPlaying] = useState(Boolean(autoPlay));\n    const [isForcePaused, setIsForcePaused] = useState(false);\n\n    const isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying;\n    // Start\n    useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? (interval as number) : null);\n\n    // Reset current index if it become invalid.\n    useEffect(() => {\n        if (currentIndex > slidesCount - 1) {\n            setCurrentIndex(defaultActiveIndex as number);\n        }\n    }, [currentIndex, slidesCount, defaultActiveIndex]);\n\n    const startAutoPlay = () => {\n        setIsAutoPlaying(Boolean(autoPlay));\n    };\n\n    const stopAutoPlay = () => {\n        setIsAutoPlaying(false);\n    };\n\n    // Handle click on a bullet to go to a specific slide.\n    const onPaginationClick = useCallback(\n        (index: number) => {\n            stopAutoPlay();\n            setIsForcePaused(true);\n\n            if (index >= 0 && index < slidesCount) {\n                setCurrentIndex(index);\n            }\n        },\n        [slidesCount, setCurrentIndex],\n    );\n\n    // Handle click or keyboard event to go to next slide.\n    const onNextClick = useCallback(\n        (loopback = true) => {\n            stopAutoPlay();\n            setIsForcePaused(true);\n            goToNextSlide(loopback);\n        },\n        [goToNextSlide],\n    );\n\n    // Handle click or keyboard event to go to previous slide.\n    const onPreviousClick = useCallback(\n        (loopback = true) => {\n            stopAutoPlay();\n            setIsForcePaused(true);\n            goToPreviousSlide(loopback);\n        },\n        [goToPreviousSlide],\n    );\n\n    // If the activeIndex props changes, update the current slide\n    useEffect(() => {\n        setCurrentIndex(activeIndex as number);\n    }, [activeIndex]);\n\n    // If the slide changes, with autoplay for example, trigger \"onChange\"\n    useEffect(() => {\n        if (!onChange) return;\n        onChange(currentIndex);\n    }, [currentIndex, onChange]);\n\n    const generatedSlideshowId = useId();\n    const slideshowId = id || generatedSlideshowId;\n\n    const generatedSlidesId = useId();\n    const slideshowSlidesId = slidesId || generatedSlidesId;\n\n    const toggleAutoPlay = () => {\n        if (isSlideshowAutoPlaying) {\n            stopAutoPlay();\n        } else {\n            startAutoPlay();\n        }\n    };\n\n    const toggleForcePause = () => {\n        const shouldBePaused = !isForcePaused;\n\n        setIsForcePaused(shouldBePaused);\n\n        if (!shouldBePaused) {\n            startAutoPlay();\n        } else {\n            stopAutoPlay();\n        }\n    };\n\n    // Start index and end index of visible slides.\n    const startIndexVisible = currentIndex * (groupBy as number);\n    const endIndexVisible = startIndexVisible + (groupBy as number);\n\n    return {\n        startIndexVisible,\n        endIndexVisible,\n        setSlideshow: setElement,\n        slideshow: element,\n        slideshowId,\n        slideshowSlidesId,\n        onPreviousClick,\n        onNextClick,\n        onPaginationClick,\n        isAutoPlaying: isSlideshowAutoPlaying,\n        toggleAutoPlay,\n        activeIndex: currentIndex,\n        slidesCount,\n        setActiveIndex: setCurrentIndex,\n        startAutoPlay,\n        stopAutoPlay,\n        isForcePaused,\n        toggleForcePause,\n    };\n};\n"],"names":["DEFAULT_OPTIONS","activeIndex","groupBy","interval","AUTOPLAY_DEFAULT_INTERVAL","useSlideshowControls","autoPlay","defaultActiveIndex","onChange","itemsCount","id","slidesId","currentIndex","setCurrentIndex","useState","element","setElement","slidesCount","Math","ceil","min","goToNextSlide","useCallback","loopback","index","goToPreviousSlide","isAutoPlaying","setIsAutoPlaying","Boolean","isForcePaused","setIsForcePaused","isSlideshowAutoPlaying","useInterval","useEffect","startAutoPlay","stopAutoPlay","onPaginationClick","onNextClick","onPreviousClick","generatedSlideshowId","useId","slideshowId","generatedSlidesId","slideshowSlidesId","toggleAutoPlay","toggleForcePause","shouldBePaused","startIndexVisible","endIndexVisible","setSlideshow","slideshow","setActiveIndex"],"mappings":"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"}

package/_internal/packages/lumx-react/src/hooks/useStopPropagation-eef5d63f.js

@@ -0,0 +1,21 @@
+import isFunction from 'lodash/isFunction';
+import { useCallback } from 'react';
+
+/**
+ * Wrap mouse event handler to stop event propagation.
+ *
+ * @param  handler   The mouse handler to wrap.
+ * @return Mouse handler stopping propagation.
+ */
+function useStopPropagation(handler) {
+  return useCallback(evt => {
+    if (!evt || !isFunction(handler)) {
+      return;
+    }
+    handler(evt);
+    evt.stopPropagation();
+  }, [handler]);
+}
+
+export { useStopPropagation };
+//# sourceMappingURL=useStopPropagation-eef5d63f.js.map

package/_internal/packages/lumx-react/src/hooks/useStopPropagation-eef5d63f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStopPropagation-eef5d63f.js","sources":["../../../../../../src/hooks/useStopPropagation.ts"],"sourcesContent":["import isFunction from 'lodash/isFunction';\nimport { MouseEventHandler, useCallback } from 'react';\n\n/**\n * Wrap mouse event handler to stop event propagation.\n *\n * @param  handler   The mouse handler to wrap.\n * @return Mouse handler stopping propagation.\n */\nexport function useStopPropagation(handler?: MouseEventHandler): MouseEventHandler {\n    return useCallback(\n        (evt) => {\n            if (!evt || !isFunction(handler)) {\n                return;\n            }\n            handler(evt);\n            evt.stopPropagation();\n        },\n        [handler],\n    );\n}\n"],"names":["useStopPropagation","handler","useCallback","evt","isFunction","stopPropagation"],"mappings":";;;AAGA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAACC,OAA2B,EAAqB;EAC/E,OAAOC,WAAW,CACbC,GAAG,IAAK;IACL,IAAI,CAACA,GAAG,IAAI,CAACC,UAAU,CAACH,OAAO,CAAC,EAAE;AAC9B,MAAA,OAAA;AACJ,KAAA;IACAA,OAAO,CAACE,GAAG,CAAC,CAAA;IACZA,GAAG,CAACE,eAAe,EAAE,CAAA;AACzB,GAAC,EACD,CAACJ,OAAO,CACZ,CAAC,CAAA;AACL;;;;"}

package/_internal/{useTransitionVisibility-321fdbfa.js → packages/lumx-react/src/hooks/useTransitionVisibility-2beba0ac.js}

@@ -1,10 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
-import { W as WINDOW } from './constants-d0e3f49e.js';
-
-/** Check if user prefers reduced motion */
-function isReducedMotion() {
-  return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-}
+import { isReducedMotion } from '../utils/browser/isReducedMotion-aca1229c.js';
 
 /**
  * Returns true if the component is visible tracking the opacity transition.
@@ -46,5 +41,5 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
   return isVisible || isComponentVisible;
 };
 
-export { isReducedMotion as i, useTransitionVisibility as u };
-//# sourceMappingURL=useTransitionVisibility-321fdbfa.js.map
+export { useTransitionVisibility };
+//# sourceMappingURL=useTransitionVisibility-2beba0ac.js.map

package/_internal/packages/lumx-react/src/hooks/useTransitionVisibility-2beba0ac.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionVisibility-2beba0ac.js","sources":["../../../../../../src/hooks/useTransitionVisibility.ts"],"sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react';\nimport { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';\n\n/**\n * Returns true if the component is visible tracking the opacity transition.\n *\n * @param ref Element on which to listen the transition event.\n * @param isComponentVisible Whether the component intends to be visible or not.\n * @param onVisibilityChange Callback called when the visibility changes.\n * @return true if the component should be rendered\n */\nexport const useTransitionVisibility = (\n    ref: RefObject<HTMLElement>,\n    isComponentVisible: boolean,\n    timeout: number,\n    onVisibilityChange?: (isVisible: boolean) => void,\n) => {\n    const [isVisible, setVisible] = useState(isComponentVisible);\n    const previousVisibility = useRef(isVisible);\n\n    // On component visibility change.\n    useEffect(() => {\n        if (isComponentVisible) {\n            setVisible(true);\n            return undefined;\n        }\n        const { current: element } = ref;\n\n        // Transition event is not supported or the user prefers reduced motion.\n        // => Skip and set visibility to false directly.\n        if (!element || !window.TransitionEvent || isReducedMotion()) {\n            setVisible(false);\n            return undefined;\n        }\n\n        const timer = setTimeout(() => setVisible(false), timeout);\n        return () => clearTimeout(timer);\n    }, [isComponentVisible, ref, timeout]);\n\n    useEffect(() => {\n        if (onVisibilityChange && previousVisibility.current !== isVisible) {\n            onVisibilityChange(isVisible);\n            previousVisibility.current = isVisible;\n        }\n    }, [isVisible, onVisibilityChange]);\n\n    return isVisible || isComponentVisible;\n};\n"],"names":["useTransitionVisibility","ref","isComponentVisible","timeout","onVisibilityChange","isVisible","setVisible","useState","previousVisibility","useRef","useEffect","undefined","current","element","window","TransitionEvent","isReducedMotion","timer","setTimeout","clearTimeout"],"mappings":";;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,uBAAuB,GAAGA,CACnCC,GAA2B,EAC3BC,kBAA2B,EAC3BC,OAAe,EACfC,kBAAiD,KAChD;EACD,MAAM,CAACC,SAAS,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAACL,kBAAkB,CAAC,CAAA;AAC5D,EAAA,MAAMM,kBAAkB,GAAGC,MAAM,CAACJ,SAAS,CAAC,CAAA;;AAE5C;AACAK,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIR,kBAAkB,EAAE;MACpBI,UAAU,CAAC,IAAI,CAAC,CAAA;AAChB,MAAA,OAAOK,SAAS,CAAA;AACpB,KAAA;IACA,MAAM;AAAEC,MAAAA,OAAO,EAAEC,OAAAA;AAAQ,KAAC,GAAGZ,GAAG,CAAA;;AAEhC;AACA;IACA,IAAI,CAACY,OAAO,IAAI,CAACC,MAAM,CAACC,eAAe,IAAIC,eAAe,EAAE,EAAE;MAC1DV,UAAU,CAAC,KAAK,CAAC,CAAA;AACjB,MAAA,OAAOK,SAAS,CAAA;AACpB,KAAA;IAEA,MAAMM,KAAK,GAAGC,UAAU,CAAC,MAAMZ,UAAU,CAAC,KAAK,CAAC,EAAEH,OAAO,CAAC,CAAA;AAC1D,IAAA,OAAO,MAAMgB,YAAY,CAACF,KAAK,CAAC,CAAA;GACnC,EAAE,CAACf,kBAAkB,EAAED,GAAG,EAAEE,OAAO,CAAC,CAAC,CAAA;AAEtCO,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIN,kBAAkB,IAAII,kBAAkB,CAACI,OAAO,KAAKP,SAAS,EAAE;MAChED,kBAAkB,CAACC,SAAS,CAAC,CAAA;MAC7BG,kBAAkB,CAACI,OAAO,GAAGP,SAAS,CAAA;AAC1C,KAAA;AACJ,GAAC,EAAE,CAACA,SAAS,EAAED,kBAAkB,CAAC,CAAC,CAAA;EAEnC,OAAOC,SAAS,IAAIH,kBAAkB,CAAA;AAC1C;;;;"}

package/_internal/{ClickAwayProvider-1204f237.js → packages/lumx-react/src/utils/ClickAwayProvider/ClickAwayProvider-ec55d284.js}

@@ -1,41 +1,7 @@
-import { useEffect, useContext, useMemo, useRef, createContext } from 'react';
-import { isEmpty } from '@lumx/core/js/utils/collection/isEmpty';
+import { useContext, useMemo, useEffect, useRef, createContext } from 'react';
+import { useClickAway } from '../../hooks/useClickAway-ab3e5463.js';
 import { jsx } from 'react/jsx-runtime';
 
-const EVENT_TYPES = ['mousedown', 'touchstart'];
-function isClickAway(targets, refs) {
-  // The targets elements are not contained in any of the listed element references.
-  return !refs.some(ref => targets.some(target => ref?.current?.contains(target)));
-}
-/**
- * Listen to clicks away from the given elements and callback the passed in function.
- *
- * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.
- */
-function useClickAway({
-  callback,
-  childrenRefs
-}) {
-  useEffect(() => {
-    const {
-      current: currentRefs
-    } = childrenRefs;
-    if (!callback || !currentRefs || isEmpty(currentRefs)) {
-      return undefined;
-    }
-    const listener = evt => {
-      const targets = [evt.composedPath?.()[0], evt.target];
-      if (isClickAway(targets, currentRefs)) {
-        callback(evt);
-      }
-    };
-    EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener));
-    return () => {
-      EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener));
-    };
-  }, [callback, childrenRefs]);
-}
-
 const ClickAwayAncestorContext = /*#__PURE__*/createContext(null);
 /**
  * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure
@@ -91,5 +57,5 @@ const ClickAwayProvider = ({
 };
 ClickAwayProvider.displayName = 'ClickAwayProvider';
 
-export { ClickAwayProvider as C };
-//# sourceMappingURL=ClickAwayProvider-1204f237.js.map
+export { ClickAwayProvider };
+//# sourceMappingURL=ClickAwayProvider-ec55d284.js.map

package/_internal/packages/lumx-react/src/utils/ClickAwayProvider/ClickAwayProvider-ec55d284.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickAwayProvider-ec55d284.js","sources":["../../../../../../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n    childrenRefs: Array<RefObject<HTMLElement>>;\n    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n    /**\n     * (Optional) Element that should be considered as part of the parent\n     */\n    parentRef?: RefObject<HTMLElement>;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n    children,\n    callback,\n    childrenRefs,\n    parentRef,\n}) => {\n    const parentContext = useContext(ClickAwayAncestorContext);\n    const currentContext = useMemo(() => {\n        const context: ContextValue = {\n            childrenRefs: [],\n            /**\n             * Add element refs to the current context and propagate to the parent context.\n             */\n            addRefs(...newChildrenRefs) {\n                // Add element refs that should be considered as inside the click away context.\n                context.childrenRefs.push(...newChildrenRefs);\n\n                if (parentContext) {\n                    // Also add then to the parent context\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (parentRef) {\n                        // The parent element is also considered as inside the parent click away context but not inside the current context\n                        parentContext.addRefs(parentRef);\n                    }\n                }\n            },\n        };\n        return context;\n    }, [parentContext, parentRef]);\n\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!currentRefs) {\n            return;\n        }\n        currentContext.addRefs(...currentRefs);\n    }, [currentContext, childrenRefs]);\n\n    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n"],"names":["ClickAwayAncestorContext","createContext","ClickAwayProvider","children","callback","childrenRefs","parentRef","parentContext","useContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useEffect","current","currentRefs","useClickAway","useRef","_jsx","Provider","value","displayName"],"mappings":";;;;AAQA,MAAMA,wBAAwB,gBAAGC,aAAa,CAAsB,IAAI,CAAC,CAAA;AAazE;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,iBAAmD,GAAGA,CAAC;EAChEC,QAAQ;EACRC,QAAQ;EACRC,YAAY;AACZC,EAAAA,SAAAA;AACJ,CAAC,KAAK;AACF,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACR,wBAAwB,CAAC,CAAA;AAC1D,EAAA,MAAMS,cAAc,GAAGC,OAAO,CAAC,MAAM;AACjC,IAAA,MAAMC,OAAqB,GAAG;AAC1BN,MAAAA,YAAY,EAAE,EAAE;AAChB;AACZ;AACA;MACYO,OAAOA,CAAC,GAAGC,eAAe,EAAE;AACxB;AACAF,QAAAA,OAAO,CAACN,YAAY,CAACS,IAAI,CAAC,GAAGD,eAAe,CAAC,CAAA;AAE7C,QAAA,IAAIN,aAAa,EAAE;AACf;AACAA,UAAAA,aAAa,CAACK,OAAO,CAAC,GAAGC,eAAe,CAAC,CAAA;AACzC,UAAA,IAAIP,SAAS,EAAE;AACX;AACAC,YAAAA,aAAa,CAACK,OAAO,CAACN,SAAS,CAAC,CAAA;AACpC,WAAA;AACJ,SAAA;AACJ,OAAA;KACH,CAAA;AACD,IAAA,OAAOK,OAAO,CAAA;AAClB,GAAC,EAAE,CAACJ,aAAa,EAAED,SAAS,CAAC,CAAC,CAAA;AAE9BS,EAAAA,SAAS,CAAC,MAAM;IACZ,MAAM;AAAEC,MAAAA,OAAO,EAAEC,WAAAA;AAAY,KAAC,GAAGZ,YAAY,CAAA;IAC7C,IAAI,CAACY,WAAW,EAAE;AACd,MAAA,OAAA;AACJ,KAAA;AACAR,IAAAA,cAAc,CAACG,OAAO,CAAC,GAAGK,WAAW,CAAC,CAAA;AAC1C,GAAC,EAAE,CAACR,cAAc,EAAEJ,YAAY,CAAC,CAAC,CAAA;AAElCa,EAAAA,YAAY,CAAC;IAAEd,QAAQ;AAAEC,IAAAA,YAAY,EAAEc,MAAM,CAACV,cAAc,CAACJ,YAAY,CAAA;AAAE,GAAC,CAAC,CAAA;AAC7E,EAAA,oBAAOe,GAAA,CAACpB,wBAAwB,CAACqB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEb,cAAe;AAAAN,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAoC,CAAC,CAAA;AACnH,EAAC;AACDD,iBAAiB,CAACqB,WAAW,GAAG,mBAAmB;;;;"}

package/_internal/{Portal-3f86608e.js → packages/lumx-react/src/utils/Portal/Portal-9e38cfd0.js}

@@ -1,20 +1,8 @@
 import React__default from 'react';
 import { createPortal } from 'react-dom';
+import { PortalContext } from './PortalProvider-883321fd.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
-/**
- * Portal initializing function.
- * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
- */
-
-const PortalContext = /*#__PURE__*/React__default.createContext(() => ({
-  container: document.body
-}));
-/**
- * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
- */
-const PortalProvider = PortalContext.Provider;
-
 /**
  * Render children in a portal outside the current DOM position
  * (defaults to `document.body` but can be customized with the PortalContextProvider)
@@ -41,5 +29,5 @@ const Portal = ({
   return /*#__PURE__*/createPortal(children, context.container);
 };
 
-export { Portal as P, PortalProvider as a };
-//# sourceMappingURL=Portal-3f86608e.js.map
+export { Portal };
+//# sourceMappingURL=Portal-9e38cfd0.js.map

package/_internal/packages/lumx-react/src/utils/Portal/Portal-9e38cfd0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal-9e38cfd0.js","sources":["../../../../../../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport interface PortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<PortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    if (!context?.container) {\n        return <>{children}</>;\n    }\n    return createPortal(children, context.container);\n};\n"],"names":["Portal","children","enabled","init","React","useContext","PortalContext","context","useMemo","useLayoutEffect","teardown","container","_jsx","_Fragment","createPortal"],"mappings":";;;;;AASA;AACA;AACA;AACA;AACO,MAAMA,MAA6B,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,OAAO,GAAG,IAAA;AAAK,CAAC,KAAK;AAC3E,EAAA,MAAMC,IAAI,GAAGC,cAAK,CAACC,UAAU,CAACC,aAAa,CAAC,CAAA;AAC5C,EAAA,MAAMC,OAAO,GAAGH,cAAK,CAACI,OAAO,CACzB,MAAM;AACF,IAAA,OAAON,OAAO,GAAGC,IAAI,EAAE,GAAG,IAAI,CAAA;GACjC;AACD;AACA;EACA,CAACD,OAAO,CACZ,CAAC,CAAA;EAEDE,cAAK,CAACK,eAAe,CAAC,MAAM;IACxB,OAAOF,OAAO,EAAEG,QAAQ,CAAA;GAC3B,EAAE,CAACH,OAAO,EAAEG,QAAQ,EAAER,OAAO,CAAC,CAAC,CAAA;AAEhC,EAAA,IAAI,CAACK,OAAO,EAAEI,SAAS,EAAE;IACrB,oBAAOC,GAAA,CAAAC,QAAA,EAAA;AAAAZ,MAAAA,QAAA,EAAGA,QAAAA;AAAQ,KAAG,CAAC,CAAA;AAC1B,GAAA;AACA,EAAA,oBAAOa,YAAY,CAACb,QAAQ,EAAEM,OAAO,CAACI,SAAS,CAAC,CAAA;AACpD;;;;"}

package/_internal/packages/lumx-react/src/utils/Portal/PortalProvider-883321fd.js

@@ -0,0 +1,17 @@
+import React__default from 'react';
+
+/**
+ * Portal initializing function.
+ * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
+ */
+
+const PortalContext = /*#__PURE__*/React__default.createContext(() => ({
+  container: document.body
+}));
+/**
+ * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
+ */
+const PortalProvider = PortalContext.Provider;
+
+export { PortalContext, PortalProvider };
+//# sourceMappingURL=PortalProvider-883321fd.js.map

package/_internal/packages/lumx-react/src/utils/Portal/PortalProvider-883321fd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalProvider-883321fd.js","sources":["../../../../../../../src/utils/Portal/PortalProvider.tsx"],"sourcesContent":["import React from 'react';\n\ntype Container = DocumentFragment | Element;\n\n/**\n * Portal initializing function.\n * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.\n */\nexport type PortalInit = () => {\n    container?: Container;\n    teardown?: () => void;\n};\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface PortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<PortalProviderProps> = PortalContext.Provider;\n"],"names":["PortalContext","React","createContext","container","document","body","PortalProvider","Provider"],"mappings":";;AAIA;AACA;AACA;AACA;;MAMaA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAAa,OAAO;EAAEC,SAAS,EAAEC,QAAQ,CAACC,IAAAA;AAAK,CAAC,CAAC,EAAC;AAOlG;AACA;AACA;AACaC,MAAAA,cAA6C,GAAGN,aAAa,CAACO;;;;"}

package/_internal/packages/lumx-react/src/utils/browser/DOM/findImage-b977b471.js

@@ -0,0 +1,5 @@
+/** Find image in element including the element */
+const findImage = element => element?.matches('img') ? element : element?.querySelector('img') || null;
+
+export { findImage };
+//# sourceMappingURL=findImage-b977b471.js.map

package/_internal/packages/lumx-react/src/utils/browser/DOM/findImage-b977b471.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"findImage-b977b471.js","sources":["../../../../../../../../src/utils/browser/DOM/findImage.tsx"],"sourcesContent":["/** Find image in element including the element */\nexport const findImage = (element: HTMLElement | null): HTMLImageElement | null =>\n    element?.matches('img') ? (element as HTMLImageElement) : element?.querySelector('img') || null;\n"],"names":["findImage","element","matches","querySelector"],"mappings":"AAAA;AACO,MAAMA,SAAS,GAAIC,OAA2B,IACjDA,OAAO,EAAEC,OAAO,CAAC,KAAK,CAAC,GAAID,OAAO,GAAwBA,OAAO,EAAEE,aAAa,CAAC,KAAK,CAAC,IAAI;;;;"}

package/_internal/packages/lumx-react/src/utils/browser/DOM/startViewTransition-5cbc03c1.js

@@ -0,0 +1,59 @@
+import ReactDOM from 'react-dom';
+import { unref } from '../../react/unref-bc393aec.js';
+import { isReducedMotion } from '../isReducedMotion-aca1229c.js';
+
+function setupViewTransitionName(elementRef, name) {
+  let originalName = null;
+  return {
+    set() {
+      const element = unref(elementRef);
+      if (!element) return;
+      originalName = element.style.viewTransitionName;
+      element.style.viewTransitionName = name;
+    },
+    unset() {
+      const element = unref(elementRef);
+      if (!element || originalName === null) return;
+      element.style.viewTransitionName = originalName;
+    }
+  };
+}
+
+/**
+ * Wrapper around the `document.startViewTransition` handling browser incompatibilities, react DOM flush and
+ * user preference.
+ *
+ * @param changes                callback containing the changes to apply within the view transition.
+ * @param setViewTransitionName  set the `viewTransitionName` style on a `source` & `target` to morph these elements.
+ */
+async function startViewTransition({
+  changes,
+  viewTransitionName
+}) {
+  const start = document?.startViewTransition?.bind(document);
+  const prefersReducedMotion = isReducedMotion();
+  const {
+    flushSync
+  } = ReactDOM;
+  if (prefersReducedMotion || !start || !flushSync || !viewTransitionName?.source || !viewTransitionName?.target) {
+    // Skip, apply changes without a transition
+    changes();
+    return;
+  }
+
+  // Setup set/unset transition name on source & target
+  const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);
+  const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);
+  sourceTransitionName.set();
+
+  // Start view transition, apply changes & flush to DOM
+  await start(() => {
+    sourceTransitionName.unset();
+    flushSync(changes);
+    targetTransitionName.set();
+  }).updateCallbackDone;
+  targetTransitionName.unset();
+}
+
+export { startViewTransition };
+//# sourceMappingURL=startViewTransition-5cbc03c1.js.map

package/_internal/packages/lumx-react/src/utils/browser/DOM/startViewTransition-5cbc03c1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"startViewTransition-5cbc03c1.js","sources":["../../../../../../../../src/utils/browser/DOM/startViewTransition.ts"],"sourcesContent":["import ReactDOM from 'react-dom';\n\nimport { MaybeElementOrRef } from '@lumx/react/utils/type';\n\nimport { unref } from '../../react/unref';\nimport { isReducedMotion } from '../isReducedMotion';\n\nfunction setupViewTransitionName(elementRef: MaybeElementOrRef<HTMLElement>, name: string) {\n    let originalName: string | null = null;\n    return {\n        set() {\n            const element = unref(elementRef);\n            if (!element) return;\n            originalName = element.style.viewTransitionName;\n            element.style.viewTransitionName = name;\n        },\n        unset() {\n            const element = unref(elementRef);\n            if (!element || originalName === null) return;\n            element.style.viewTransitionName = originalName;\n        },\n    };\n}\n\n/**\n * Wrapper around the `document.startViewTransition` handling browser incompatibilities, react DOM flush and\n * user preference.\n *\n * @param changes                callback containing the changes to apply within the view transition.\n * @param setViewTransitionName  set the `viewTransitionName` style on a `source` & `target` to morph these elements.\n */\nexport async function startViewTransition({\n    changes,\n    viewTransitionName,\n}: {\n    changes: () => void;\n    viewTransitionName: {\n        source: MaybeElementOrRef<HTMLElement>;\n        target: MaybeElementOrRef<HTMLElement>;\n        name: string;\n    };\n}) {\n    const start = (document as any)?.startViewTransition?.bind(document);\n    const prefersReducedMotion = isReducedMotion();\n    const { flushSync } = ReactDOM as any;\n    if (prefersReducedMotion || !start || !flushSync || !viewTransitionName?.source || !viewTransitionName?.target) {\n        // Skip, apply changes without a transition\n        changes();\n        return;\n    }\n\n    // Setup set/unset transition name on source & target\n    const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);\n    const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);\n\n    sourceTransitionName.set();\n\n    // Start view transition, apply changes & flush to DOM\n    await start(() => {\n        sourceTransitionName.unset();\n\n        flushSync(changes);\n\n        targetTransitionName.set();\n    }).updateCallbackDone;\n\n    targetTransitionName.unset();\n}\n"],"names":["setupViewTransitionName","elementRef","name","originalName","set","element","unref","style","viewTransitionName","unset","startViewTransition","changes","start","document","bind","prefersReducedMotion","isReducedMotion","flushSync","ReactDOM","source","target","sourceTransitionName","targetTransitionName","updateCallbackDone"],"mappings":";;;;AAOA,SAASA,uBAAuBA,CAACC,UAA0C,EAAEC,IAAY,EAAE;EACvF,IAAIC,YAA2B,GAAG,IAAI,CAAA;EACtC,OAAO;AACHC,IAAAA,GAAGA,GAAG;AACF,MAAA,MAAMC,OAAO,GAAGC,KAAK,CAACL,UAAU,CAAC,CAAA;MACjC,IAAI,CAACI,OAAO,EAAE,OAAA;AACdF,MAAAA,YAAY,GAAGE,OAAO,CAACE,KAAK,CAACC,kBAAkB,CAAA;AAC/CH,MAAAA,OAAO,CAACE,KAAK,CAACC,kBAAkB,GAAGN,IAAI,CAAA;KAC1C;AACDO,IAAAA,KAAKA,GAAG;AACJ,MAAA,MAAMJ,OAAO,GAAGC,KAAK,CAACL,UAAU,CAAC,CAAA;AACjC,MAAA,IAAI,CAACI,OAAO,IAAIF,YAAY,KAAK,IAAI,EAAE,OAAA;AACvCE,MAAAA,OAAO,CAACE,KAAK,CAACC,kBAAkB,GAAGL,YAAY,CAAA;AACnD,KAAA;GACH,CAAA;AACL,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,eAAeO,mBAAmBA,CAAC;EACtCC,OAAO;AACPH,EAAAA,kBAAAA;AAQJ,CAAC,EAAE;EACC,MAAMI,KAAK,GAAIC,QAAQ,EAAUH,mBAAmB,EAAEI,IAAI,CAACD,QAAQ,CAAC,CAAA;AACpE,EAAA,MAAME,oBAAoB,GAAGC,eAAe,EAAE,CAAA;EAC9C,MAAM;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAGC,QAAe,CAAA;AACrC,EAAA,IAAIH,oBAAoB,IAAI,CAACH,KAAK,IAAI,CAACK,SAAS,IAAI,CAACT,kBAAkB,EAAEW,MAAM,IAAI,CAACX,kBAAkB,EAAEY,MAAM,EAAE;AAC5G;AACAT,IAAAA,OAAO,EAAE,CAAA;AACT,IAAA,OAAA;AACJ,GAAA;;AAEA;EACA,MAAMU,oBAAoB,GAAGrB,uBAAuB,CAACQ,kBAAkB,CAACW,MAAM,EAAEX,kBAAkB,CAACN,IAAI,CAAC,CAAA;EACxG,MAAMoB,oBAAoB,GAAGtB,uBAAuB,CAACQ,kBAAkB,CAACY,MAAM,EAAEZ,kBAAkB,CAACN,IAAI,CAAC,CAAA;EAExGmB,oBAAoB,CAACjB,GAAG,EAAE,CAAA;;AAE1B;EACA,MAAMQ,KAAK,CAAC,MAAM;IACdS,oBAAoB,CAACZ,KAAK,EAAE,CAAA;IAE5BQ,SAAS,CAACN,OAAO,CAAC,CAAA;IAElBW,oBAAoB,CAAClB,GAAG,EAAE,CAAA;GAC7B,CAAC,CAACmB,kBAAkB,CAAA;EAErBD,oBAAoB,CAACb,KAAK,EAAE,CAAA;AAChC;;;;"}

package/_internal/{getFocusableElements-230173a8.js → packages/lumx-react/src/utils/browser/focus/constants-c0a6dba6.js}

@@ -4,10 +4,5 @@ const TABBABLE_ELEMENTS_SELECTOR = 'a[href], button, textarea, input:not([type="
 /** CSS selector matching element that are disabled (should not receive focus). */
 const DISABLED_SELECTOR = '[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])';
 
-const isNotDisabled = element => !element.matches(DISABLED_SELECTOR);
-function getFocusableElements(element) {
-  return Array.from(element.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
-}
-
-export { getFocusableElements as g };
-//# sourceMappingURL=getFocusableElements-230173a8.js.map
+export { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR };
+//# sourceMappingURL=constants-c0a6dba6.js.map

package/_internal/packages/lumx-react/src/utils/browser/focus/constants-c0a6dba6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants-c0a6dba6.js","sources":["../../../../../../../../src/utils/browser/focus/constants.ts"],"sourcesContent":["/** CSS selector listing all tabbable elements. */\nexport const TABBABLE_ELEMENTS_SELECTOR =\n    'a[href], button, textarea, input:not([type=\"hidden\"]):not([hidden]), [tabindex]';\n\n/** CSS selector matching element that are disabled (should not receive focus). */\nexport const DISABLED_SELECTOR =\n    '[hidden], [tabindex=\"-1\"], [disabled]:not([disabled=\"false\"]), [aria-disabled]:not([aria-disabled=\"false\"])';\n"],"names":["TABBABLE_ELEMENTS_SELECTOR","DISABLED_SELECTOR"],"mappings":"AAAA;AACO,MAAMA,0BAA0B,GACnC,kFAAiF;;AAErF;AACO,MAAMC,iBAAiB,GAC1B;;;;"}

package/_internal/packages/lumx-react/src/utils/browser/focus/getFirstAndLastFocusable-394b48f4.js

@@ -0,0 +1,26 @@
+import { getFocusableElements } from './getFocusableElements-14bf3ce5.js';
+
+/**
+ * Get first and last elements focusable in an element.
+ *
+ * @param parentElement The element in which to search focusable elements.
+ * @return first and last focusable elements
+ */
+function getFirstAndLastFocusable(parentElement) {
+  const focusableElements = getFocusableElements(parentElement);
+
+  // First non disabled element.
+  const first = focusableElements[0];
+  // Last non disabled element.
+  const last = focusableElements[focusableElements.length - 1];
+  if (last && first) {
+    return {
+      first,
+      last
+    };
+  }
+  return {};
+}
+
+export { getFirstAndLastFocusable };
+//# sourceMappingURL=getFirstAndLastFocusable-394b48f4.js.map

package/_internal/packages/lumx-react/src/utils/browser/focus/getFirstAndLastFocusable-394b48f4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFirstAndLastFocusable-394b48f4.js","sources":["../../../../../../../../src/utils/browser/focus/getFirstAndLastFocusable.ts"],"sourcesContent":["import { getFocusableElements } from './getFocusableElements';\n\n/**\n * Get first and last elements focusable in an element.\n *\n * @param parentElement The element in which to search focusable elements.\n * @return first and last focusable elements\n */\nexport function getFirstAndLastFocusable(parentElement: HTMLElement | ShadowRoot) {\n    const focusableElements = getFocusableElements(parentElement);\n\n    // First non disabled element.\n    const first = focusableElements[0];\n    // Last non disabled element.\n    const last = focusableElements[focusableElements.length - 1];\n\n    if (last && first) {\n        return { first, last };\n    }\n    return {};\n}\n"],"names":["getFirstAndLastFocusable","parentElement","focusableElements","getFocusableElements","first","last","length"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,wBAAwBA,CAACC,aAAuC,EAAE;AAC9E,EAAA,MAAMC,iBAAiB,GAAGC,oBAAoB,CAACF,aAAa,CAAC,CAAA;;AAE7D;AACA,EAAA,MAAMG,KAAK,GAAGF,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAClC;EACA,MAAMG,IAAI,GAAGH,iBAAiB,CAACA,iBAAiB,CAACI,MAAM,GAAG,CAAC,CAAC,CAAA;EAE5D,IAAID,IAAI,IAAID,KAAK,EAAE;IACf,OAAO;MAAEA,KAAK;AAAEC,MAAAA,IAAAA;KAAM,CAAA;AAC1B,GAAA;AACA,EAAA,OAAO,EAAE,CAAA;AACb;;;;"}

package/_internal/packages/lumx-react/src/utils/browser/focus/getFocusableElements-14bf3ce5.js

@@ -0,0 +1,9 @@
+import { TABBABLE_ELEMENTS_SELECTOR, DISABLED_SELECTOR } from './constants-c0a6dba6.js';
+
+const isNotDisabled = element => !element.matches(DISABLED_SELECTOR);
+function getFocusableElements(element) {
+  return Array.from(element.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
+}
+
+export { getFocusableElements };
+//# sourceMappingURL=getFocusableElements-14bf3ce5.js.map

package/_internal/packages/lumx-react/src/utils/browser/focus/getFocusableElements-14bf3ce5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFocusableElements-14bf3ce5.js","sources":["../../../../../../../../src/utils/browser/focus/getFocusableElements.ts"],"sourcesContent":["import { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR } from './constants';\n\nconst isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);\n\nexport function getFocusableElements(element: HTMLElement | ShadowRoot): HTMLElement[] {\n    return Array.from(element.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);\n}\n"],"names":["isNotDisabled","element","matches","DISABLED_SELECTOR","getFocusableElements","Array","from","querySelectorAll","TABBABLE_ELEMENTS_SELECTOR","filter"],"mappings":";;AAEA,MAAMA,aAAa,GAAIC,OAAoB,IAAK,CAACA,OAAO,CAACC,OAAO,CAACC,iBAAiB,CAAC,CAAA;AAE5E,SAASC,oBAAoBA,CAACH,OAAiC,EAAiB;AACnF,EAAA,OAAOI,KAAK,CAACC,IAAI,CAACL,OAAO,CAACM,gBAAgB,CAAcC,0BAA0B,CAAC,CAAC,CAACC,MAAM,CAACT,aAAa,CAAC,CAAA;AAC9G;;;;"}

package/_internal/packages/lumx-react/src/utils/browser/isFocusVisible-5745f198.js

@@ -0,0 +1,12 @@
+/** Check if the focus is visible on the given element */
+const isFocusVisible = element => {
+  try {
+    return element?.matches?.(':focus-visible, [data-focus-visible-added]');
+  } catch (_ignored) {
+    // Can fail on non browser env
+    return true;
+  }
+};
+
+export { isFocusVisible };
+//# sourceMappingURL=isFocusVisible-5745f198.js.map

package/_internal/packages/lumx-react/src/utils/browser/isFocusVisible-5745f198.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isFocusVisible-5745f198.js","sources":["../../../../../../../src/utils/browser/isFocusVisible.ts"],"sourcesContent":["/** Check if the focus is visible on the given element */\nexport const isFocusVisible = (element?: HTMLElement) => {\n    try {\n        return element?.matches?.(':focus-visible, [data-focus-visible-added]');\n    } catch (_ignored) {\n        // Can fail on non browser env\n        return true;\n    }\n};\n"],"names":["isFocusVisible","element","matches","_ignored"],"mappings":"AAAA;AACaA,MAAAA,cAAc,GAAIC,OAAqB,IAAK;EACrD,IAAI;AACA,IAAA,OAAOA,OAAO,EAAEC,OAAO,GAAG,4CAA4C,CAAC,CAAA;GAC1E,CAAC,OAAOC,QAAQ,EAAE;AACf;AACA,IAAA,OAAO,IAAI,CAAA;AACf,GAAA;AACJ;;;;"}