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

package/_internal/179a2989.js

@@ -0,0 +1,129 @@
+import { useCallback } from 'react';
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { forwardRef } from './bd8b3ec8.js';
+import { useDisableStateProps } from './ef982c3d.js';
+import { useTabProviderContext } from './e0398237.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { mdiRadioboxMarked } from './a2c7c463.js';
+import { mdiRadioboxBlank } from './4f71fd36.js';
+import { Icon } from './595d0e66.js';
+import { Size, Kind } from '@lumx/core/js/constants';
+import { InputLabel } from './26a92990.js';
+import { InputHelper } from './3119c1fe.js';
+import { mdiCheckCircle } from './e47dacb8.js';
+import { mdiAlertCircle } from './893eb653.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ProgressTrackerStep';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * ProgressTrackerStep component.
+ *
+ * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressTrackerStep = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    className,
+    hasError,
+    helper,
+    id,
+    isActive: propIsActive,
+    isComplete,
+    label,
+    onFocus,
+    onKeyPress,
+    tabIndex = -1,
+    ...forwardedProps
+  } = otherProps;
+  const state = useTabProviderContext('tab', id);
+  const isActive = propIsActive || state?.isActive;
+  const changeToCurrentTab = useCallback(() => {
+    if (isAnyDisabled) {
+      return;
+    }
+    state?.changeToTab();
+  }, [isAnyDisabled, state]);
+  const handleFocus = useCallback(event => {
+    onFocus?.(event);
+    if (state?.shouldActivateOnFocus) {
+      changeToCurrentTab();
+    }
+  }, [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus]);
+  const handleKeyPress = useCallback(event => {
+    onKeyPress?.(event);
+    if (event.key !== 'Enter') {
+      return;
+    }
+    changeToCurrentTab();
+  }, [changeToCurrentTab, onKeyPress]);
+  const getIcon = () => {
+    if (isComplete) {
+      return mdiCheckCircle;
+    }
+    if (isActive) {
+      return hasError ? mdiAlertCircle : mdiRadioboxMarked;
+    }
+    return mdiRadioboxBlank;
+  };
+  return /*#__PURE__*/jsxs("button", {
+    ref: ref,
+    ...forwardedProps,
+    type: "button",
+    id: state?.tabId,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      hasError,
+      isActive,
+      isClickable: state && !isAnyDisabled,
+      isComplete
+    })),
+    onClick: changeToCurrentTab,
+    onKeyPress: handleKeyPress,
+    onFocus: handleFocus,
+    role: "tab",
+    tabIndex: isActive ? 0 : tabIndex,
+    "aria-disabled": isAnyDisabled,
+    "aria-selected": isActive,
+    "aria-controls": state?.tabPanelId,
+    children: [/*#__PURE__*/jsx(Icon, {
+      className: `${CLASSNAME}__state`,
+      icon: getIcon(),
+      size: Size.s
+    }), /*#__PURE__*/jsx(InputLabel, {
+      htmlFor: state?.tabId || '',
+      className: `${CLASSNAME}__label`,
+      children: label
+    }), helper && /*#__PURE__*/jsx(InputHelper, {
+      kind: hasError ? Kind.error : Kind.info,
+      className: `${CLASSNAME}__helper`,
+      children: helper
+    })]
+  });
+});
+ProgressTrackerStep.displayName = COMPONENT_NAME;
+ProgressTrackerStep.className = CLASSNAME;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS;
+
+export { ProgressTrackerStep };
+//# sourceMappingURL=179a2989.js.map

package/_internal/179a2989.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"179a2989.js","sources":["../../src/components/progress-tracker/ProgressTrackerStep.tsx"],"sourcesContent":["import { FocusEventHandler, KeyboardEventHandler, useCallback } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';\nimport { Icon, InputHelper, InputLabel, Kind, Size } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { useTabProviderContext } from '../tabs/state';\n\n/**\n * Defines the props of the component.\n */\nexport interface ProgressTrackerStepProps extends GenericProps {\n    /** Children are not supported. */\n    children?: never;\n    /** Whether the step should be in error state or not. */\n    hasError?: boolean;\n    /** Helper text. */\n    helper?: string | null;\n    /** Native id property. */\n    id?: string;\n    /** Whether the current step is active or not. */\n    isActive?: boolean;\n    /** Whether the current step is completed or not. */\n    isComplete?: boolean;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Label text. */\n    label?: string | null;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ProgressTrackerStep';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ProgressTrackerStepProps> = {};\n\n/**\n * ProgressTrackerStep component.\n *\n * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ProgressTrackerStep = forwardRef<ProgressTrackerStepProps, HTMLButtonElement>((props, ref) => {\n    const { isAnyDisabled, otherProps } = useDisableStateProps(props);\n    const {\n        className,\n        hasError,\n        helper,\n        id,\n        isActive: propIsActive,\n        isComplete,\n        label,\n        onFocus,\n        onKeyPress,\n        tabIndex = -1,\n        ...forwardedProps\n    } = otherProps;\n    const state = useTabProviderContext('tab', id);\n    const isActive = propIsActive || state?.isActive;\n\n    const changeToCurrentTab = useCallback(() => {\n        if (isAnyDisabled) {\n            return;\n        }\n        state?.changeToTab();\n    }, [isAnyDisabled, state]);\n\n    const handleFocus: FocusEventHandler = useCallback(\n        (event) => {\n            onFocus?.(event);\n            if (state?.shouldActivateOnFocus) {\n                changeToCurrentTab();\n            }\n        },\n        [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus],\n    );\n\n    const handleKeyPress: KeyboardEventHandler = useCallback(\n        (event) => {\n            onKeyPress?.(event);\n            if (event.key !== 'Enter') {\n                return;\n            }\n            changeToCurrentTab();\n        },\n        [changeToCurrentTab, onKeyPress],\n    );\n\n    const getIcon = (): string => {\n        if (isComplete) {\n            return mdiCheckCircle;\n        }\n\n        if (isActive) {\n            return hasError ? mdiAlertCircle : mdiRadioboxMarked;\n        }\n\n        return mdiRadioboxBlank;\n    };\n\n    return (\n        <button\n            ref={ref}\n            {...forwardedProps}\n            type=\"button\"\n            id={state?.tabId}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    hasError,\n                    isActive,\n                    isClickable: state && !isAnyDisabled,\n                    isComplete,\n                }),\n            )}\n            onClick={changeToCurrentTab}\n            onKeyPress={handleKeyPress}\n            onFocus={handleFocus}\n            role=\"tab\"\n            tabIndex={isActive ? 0 : tabIndex}\n            aria-disabled={isAnyDisabled}\n            aria-selected={isActive}\n            aria-controls={state?.tabPanelId}\n        >\n            <Icon className={`${CLASSNAME}__state`} icon={getIcon()} size={Size.s} />\n\n            <InputLabel htmlFor={state?.tabId || ''} className={`${CLASSNAME}__label`}>\n                {label}\n            </InputLabel>\n\n            {helper && (\n                <InputHelper kind={hasError ? Kind.error : Kind.info} className={`${CLASSNAME}__helper`}>\n                    {helper}\n                </InputHelper>\n            )}\n        </button>\n    );\n});\nProgressTrackerStep.displayName = COMPONENT_NAME;\nProgressTrackerStep.className = CLASSNAME;\nProgressTrackerStep.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","ProgressTrackerStep","forwardRef","props","ref","isAnyDisabled","otherProps","useDisableStateProps","className","hasError","helper","id","isActive","propIsActive","isComplete","label","onFocus","onKeyPress","tabIndex","forwardedProps","state","useTabProviderContext","changeToCurrentTab","useCallback","changeToTab","handleFocus","event","shouldActivateOnFocus","handleKeyPress","key","getIcon","mdiCheckCircle","mdiAlertCircle","mdiRadioboxMarked","mdiRadioboxBlank","_jsxs","type","tabId","classNames","handleBasicClasses","prefix","isClickable","onClick","role","tabPanelId","children","_jsx","Icon","icon","size","Size","s","InputLabel","htmlFor","InputHelper","kind","Kind","error","info","displayName","defaultProps"],"mappings":"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"}

package/_internal/185778b8.js

@@ -0,0 +1,4 @@
+const mdiPlayCircleOutline = 'M12 20a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-2 14.5 6-4.5-6-4.5z';
+
+export { mdiPlayCircleOutline };
+//# sourceMappingURL=185778b8.js.map

package/_internal/185778b8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"185778b8.js","sources":["../../../lumx-icons/dist/esm/play-circle-outline.js"],"sourcesContent":["export const mdiPlayCircleOutline = 'M12 20a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-2 14.5 6-4.5-6-4.5z';"],"names":["mdiPlayCircleOutline"],"mappings":"AAAO,MAAMA,oBAAoB,GAAG;;;;"}

package/_internal/1afd2506.js

@@ -0,0 +1,60 @@
+import { useReducer, useEffect } from 'react';
+import { reducer, INIT_STATE, TabProviderContext } from './e0398237.js';
+import { jsx } from 'react/jsx-runtime';
+
+const DEFAULT_PROPS = {
+  isLazy: INIT_STATE.isLazy,
+  shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
+};
+
+/**
+ * This component provides a context in which steps can be defined and linked to their step panel.
+ *
+ * It does not produce any markup so you can wrap it around any React elements and then split the ProgressTracker and ProgressTrackerPanel
+ * components in the react tree.
+ *
+ * This works exactly as TabProvider so it uses TabProviderContext and tabs state.
+ *
+ * @param  props React component props.
+ * @return React element.
+ */
+const ProgressTrackerProvider = props => {
+  const {
+    children,
+    onChange,
+    ...propState
+  } = props;
+  const [state, dispatch] = useReducer(reducer, INIT_STATE);
+
+  // On prop state change => dispatch update.
+  useEffect(() => {
+    dispatch({
+      type: 'update',
+      payload: {
+        ...DEFAULT_PROPS,
+        ...propState,
+        activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
+      }
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [dispatch, ...Object.values(propState)]);
+
+  // On active tab index state change => send update to the onChange.
+  useEffect(() => {
+    if (state === INIT_STATE || !onChange || propState.activeStepIndex === state.activeTabIndex) {
+      return;
+    }
+    onChange(state.activeTabIndex);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onChange, state.activeTabIndex]);
+  return /*#__PURE__*/jsx(TabProviderContext.Provider, {
+    value: [state, dispatch],
+    children: children
+  });
+};
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS;
+
+export { ProgressTrackerProvider };
+//# sourceMappingURL=1afd2506.js.map

package/_internal/1afd2506.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1afd2506.js","sources":["../../src/components/progress-tracker/ProgressTrackerProvider.tsx"],"sourcesContent":["import { ReactNode, useEffect, useReducer } from 'react';\nimport { INIT_STATE, TabProviderContext, reducer } from '../tabs/state';\n\nexport interface ProgressTrackerProviderProps {\n    /** Active step index. */\n    activeStepIndex?: number;\n    /** ProgressTrackerProvider children. */\n    children: ReactNode;\n    /** Step panel children should not render if the step panel is hidden. */\n    isLazy?: boolean;\n    /** Activate tabs on focus. */\n    shouldActivateOnFocus?: boolean;\n    /** Step change callback. */\n    onChange?(index: number): void;\n}\n\nconst DEFAULT_PROPS: Partial<ProgressTrackerProviderProps> = {\n    isLazy: INIT_STATE.isLazy,\n    shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus,\n};\n\n/**\n * This component provides a context in which steps can be defined and linked to their step panel.\n *\n * It does not produce any markup so you can wrap it around any React elements and then split the ProgressTracker and ProgressTrackerPanel\n * components in the react tree.\n *\n * This works exactly as TabProvider so it uses TabProviderContext and tabs state.\n *\n * @param  props React component props.\n * @return React element.\n */\nexport const ProgressTrackerProvider: React.FC<ProgressTrackerProviderProps> = (props) => {\n    const { children, onChange, ...propState } = props;\n    const [state, dispatch] = useReducer(reducer, INIT_STATE);\n\n    // On prop state change => dispatch update.\n    useEffect(\n        () => {\n            dispatch({\n                type: 'update',\n                payload: {\n                    ...DEFAULT_PROPS,\n                    ...propState,\n                    activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex,\n                },\n            });\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [dispatch, ...Object.values(propState)],\n    );\n\n    // On active tab index state change => send update to the onChange.\n    useEffect(\n        () => {\n            if (state === INIT_STATE || !onChange || propState.activeStepIndex === state.activeTabIndex) {\n                return;\n            }\n            onChange(state.activeTabIndex);\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [onChange, state.activeTabIndex],\n    );\n\n    return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;\n};\nProgressTrackerProvider.defaultProps = DEFAULT_PROPS;\n"],"names":["DEFAULT_PROPS","isLazy","INIT_STATE","shouldActivateOnFocus","ProgressTrackerProvider","props","children","onChange","propState","state","dispatch","useReducer","reducer","useEffect","type","payload","activeTabIndex","activeStepIndex","Object","values","_jsx","TabProviderContext","Provider","value","defaultProps"],"mappings":";;;;AAgBA,MAAMA,aAAoD,GAAG;EACzDC,MAAM,EAAEC,UAAU,CAACD,MAAM;EACzBE,qBAAqB,EAAED,UAAU,CAACC,qBAAAA;AACtC,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,uBAA+D,GAAIC,KAAK,IAAK;EACtF,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC,SAAAA;AAAU,GAAC,GAAGH,KAAK,CAAA;EAClD,MAAM,CAACI,KAAK,EAAEC,QAAQ,CAAC,GAAGC,UAAU,CAACC,OAAO,EAAEV,UAAU,CAAC,CAAA;;AAEzD;AACAW,EAAAA,SAAS,CACL,MAAM;AACFH,IAAAA,QAAQ,CAAC;AACLI,MAAAA,IAAI,EAAE,QAAQ;AACdC,MAAAA,OAAO,EAAE;AACL,QAAA,GAAGf,aAAa;AAChB,QAAA,GAAGQ,SAAS;AACZQ,QAAAA,cAAc,EAAER,SAAS,CAACS,eAAe,IAAIf,UAAU,CAACc,cAAAA;AAC5D,OAAA;AACJ,KAAC,CAAC,CAAA;GACL;AACD;EACA,CAACN,QAAQ,EAAE,GAAGQ,MAAM,CAACC,MAAM,CAACX,SAAS,CAAC,CAC1C,CAAC,CAAA;;AAED;AACAK,EAAAA,SAAS,CACL,MAAM;AACF,IAAA,IAAIJ,KAAK,KAAKP,UAAU,IAAI,CAACK,QAAQ,IAAIC,SAAS,CAACS,eAAe,KAAKR,KAAK,CAACO,cAAc,EAAE;AACzF,MAAA,OAAA;AACJ,KAAA;AACAT,IAAAA,QAAQ,CAACE,KAAK,CAACO,cAAc,CAAC,CAAA;GACjC;AACD;AACA,EAAA,CAACT,QAAQ,EAAEE,KAAK,CAACO,cAAc,CACnC,CAAC,CAAA;AAED,EAAA,oBAAOI,GAAA,CAACC,kBAAkB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE,CAACd,KAAK,EAAEC,QAAQ,CAAE;AAAAJ,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAA8B,CAAC,CAAA;AAC1G,EAAC;AACDF,uBAAuB,CAACoB,YAAY,GAAGxB,aAAa;;;;"}

package/_internal/1c1cdfa2.js

@@ -0,0 +1,159 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useInterval } from './45ef51db.js';
+import { AUTOPLAY_DEFAULT_INTERVAL } from './e50f2a75.js';
+import { useId } from './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=1c1cdfa2.js.map

package/_internal/1c1cdfa2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1c1cdfa2.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/1c3b349b.js

@@ -0,0 +1,4 @@
+const mdiCheck = 'M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';
+
+export { mdiCheck };
+//# sourceMappingURL=1c3b349b.js.map

package/_internal/1c3b349b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1c3b349b.js","sources":["../../../lumx-icons/dist/esm/check.js"],"sourcesContent":["export const mdiCheck = 'M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';"],"names":["mdiCheck"],"mappings":"AAAO,MAAMA,QAAQ,GAAG;;;;"}

package/_internal/1d7267a1.js

@@ -0,0 +1,173 @@
+import React__default, { useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import range from 'lodash/range';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { WINDOW } from './6af61e2f.js';
+import { useSlideshowControls, DEFAULT_OPTIONS } from './1c1cdfa2.js';
+import { useRovingTabIndex } from './bb8088e1.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { useTheme } from './d8ee966d.js';
+import { useSwipeNavigate } from './de52a4b9.js';
+import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './e50f2a75.js';
+import { usePaginationVisibleRange } from './5da9ff06.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { mdiPauseCircleOutline } from './4bb19934.js';
+import { mdiPlayCircleOutline } from './185778b8.js';
+import { Theme, Emphasis } from '@lumx/core/js/constants';
+import { IconButton } from './5a0207d9.js';
+import { mdiChevronLeft } from './e9c3b1e0.js';
+import { mdiChevronRight } from './aeba575c.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SlideshowControls';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  activeIndex: 0
+};
+
+/**
+ * SlideshowControls component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InternalSlideshowControls = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    activeIndex = DEFAULT_PROPS.activeIndex,
+    className,
+    nextButtonProps,
+    onNextClick,
+    onPaginationClick,
+    onPreviousClick,
+    parentRef,
+    previousButtonProps,
+    paginationProps,
+    slidesCount,
+    theme = defaultTheme,
+    isAutoPlaying = false,
+    playButtonProps,
+    paginationItemLabel,
+    paginationItemProps,
+    ...forwardedProps
+  } = props;
+  let parent;
+  if (WINDOW) {
+    // Checking window object to avoid errors in SSR.
+    parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
+  }
+  const paginationRef = React__default.useRef(null);
+  // Listen to touch swipe navigate left & right.
+  useSwipeNavigate(parent,
+  // Go next without loopback.
+  useCallback(() => onNextClick?.(false), [onNextClick]),
+  // Go previous without loopback.
+  useCallback(() => onPreviousClick?.(false), [onPreviousClick]));
+
+  /**
+   * Add roving tab index pattern to pagination items and activate slide on focus.
+   */
+  useRovingTabIndex({
+    parentRef: paginationRef,
+    elementSelector: 'button',
+    keepTabIndex: true,
+    onElementFocus: element => {
+      element.click();
+    }
+  });
+
+  // Pagination "bullet" range.
+  const visibleRange = usePaginationVisibleRange(activeIndex, slidesCount);
+
+  // Inline style of wrapper element.
+  const wrapperStyle = {
+    transform: `translateX(-${PAGINATION_ITEM_SIZE * visibleRange.min}px)`
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme
+    }), {
+      [`${CLASSNAME}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX
+    }),
+    children: [/*#__PURE__*/jsx(IconButton, {
+      ...previousButtonProps,
+      icon: mdiChevronLeft,
+      className: `${CLASSNAME}__navigation`,
+      color: theme === Theme.dark ? 'light' : 'dark',
+      emphasis: Emphasis.low,
+      onClick: onPreviousClick
+    }), /*#__PURE__*/jsx("div", {
+      ref: paginationRef,
+      className: `${CLASSNAME}__pagination`,
+      children: /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__pagination-items`,
+        style: wrapperStyle,
+        role: "tablist",
+        ...paginationProps,
+        children: useMemo(() => range(slidesCount).map(index => {
+          const isOnEdge = index !== 0 && index !== slidesCount - 1 && (index === visibleRange.min || index === visibleRange.max);
+          const isActive = activeIndex === index;
+          const isOutRange = index < visibleRange.min || index > visibleRange.max;
+          const {
+            className: itemClassName = undefined,
+            label = undefined,
+            ...itemProps
+          } = paginationItemProps ? paginationItemProps(index) : {};
+          const ariaLabel = label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
+          return /*#__PURE__*/jsx("button", {
+            className: classNames(handleBasicClasses({
+              prefix: `${CLASSNAME}__pagination-item`,
+              isActive,
+              isOnEdge,
+              isOutRange
+            }), itemClassName),
+            type: "button",
+            tabIndex: isActive ? undefined : -1,
+            role: "tab",
+            "aria-selected": isActive,
+            onClick: () => onPaginationClick?.(index),
+            "aria-label": ariaLabel,
+            ...itemProps
+          }, index);
+        }), [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick])
+      })
+    }), playButtonProps ? /*#__PURE__*/jsx(IconButton, {
+      ...playButtonProps,
+      icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
+      className: `${CLASSNAME}__play`,
+      color: theme === Theme.dark ? 'light' : 'dark',
+      emphasis: Emphasis.low
+    }) : null, /*#__PURE__*/jsx(IconButton, {
+      ...nextButtonProps,
+      icon: mdiChevronRight,
+      className: `${CLASSNAME}__navigation`,
+      color: theme === Theme.dark ? 'light' : 'dark',
+      emphasis: Emphasis.low,
+      onClick: onNextClick
+    })]
+  });
+});
+InternalSlideshowControls.displayName = COMPONENT_NAME;
+InternalSlideshowControls.className = CLASSNAME;
+InternalSlideshowControls.defaultProps = DEFAULT_PROPS;
+const SlideshowControls = Object.assign(InternalSlideshowControls, {
+  useSlideshowControls,
+  useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
+});
+
+export { SlideshowControls };
+//# sourceMappingURL=1d7267a1.js.map

package/_internal/1d7267a1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1d7267a1.js","sources":["../../src/components/slideshow/SlideshowControls.tsx"],"sourcesContent":["import React, { RefObject, useCallback, useMemo } from 'react';\n\nimport classNames from 'classnames';\nimport range from 'lodash/range';\n\nimport { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';\nimport { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { WINDOW } from '@lumx/react/constants';\nimport { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';\nimport { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useSwipeNavigate } from './useSwipeNavigate';\nimport { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';\nimport { usePaginationVisibleRange } from './usePaginationVisibleRange';\n\n/**\n * Defines the props of the component.\n */\nexport interface SlideshowControlsProps extends GenericProps, HasTheme {\n    /** Index of the current slide. */\n    activeIndex?: number;\n    /** Props to pass to the next button (minus those already set by the SlideshowControls props). */\n    nextButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** Reference to the parent element on which we want to listen touch swipe. */\n    parentRef?: RefObject<HTMLDivElement> | HTMLDivElement | null;\n    /** Props to pass to the previous button (minus those already set by the SlideshowControls props). */\n    previousButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** Props to pass to the pagination wrapper */\n    paginationProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'role'>;\n    /** Number of slides. */\n    slidesCount: number;\n    /** On next button click callback. */\n    onNextClick?(loopback?: boolean): void;\n    /** On pagination change callback. */\n    onPaginationClick?(index: number): void;\n    /** On previous button click callback. */\n    onPreviousClick?(loopback?: boolean): void;\n    /** whether the slideshow is currently playing */\n    isAutoPlaying?: boolean;\n    /**\n     * function to be executed in order to retrieve the label for the pagination item\n     * @deprecated Use paginationItemProps instead.\n     * */\n    paginationItemLabel?: (index: number) => string;\n    /**\n     * function to be executed in order to retrieve the props for a pagination item.\n     */\n    paginationItemProps?: (itemIndex: number) => React.HTMLAttributes<HTMLButtonElement> & { label?: string };\n    /** Props to pass to the lay button (minus those already set by the SlideshowControls props). */\n    playButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SlideshowControls';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<SlideshowControlsProps> = {\n    activeIndex: 0,\n};\n\n/**\n * SlideshowControls component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nconst InternalSlideshowControls = forwardRef<SlideshowControlsProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        activeIndex = DEFAULT_PROPS.activeIndex,\n        className,\n        nextButtonProps,\n        onNextClick,\n        onPaginationClick,\n        onPreviousClick,\n        parentRef,\n        previousButtonProps,\n        paginationProps,\n        slidesCount,\n        theme = defaultTheme,\n        isAutoPlaying = false,\n        playButtonProps,\n        paginationItemLabel,\n        paginationItemProps,\n        ...forwardedProps\n    } = props;\n\n    let parent;\n    if (WINDOW) {\n        // Checking window object to avoid errors in SSR.\n        parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;\n    }\n    const paginationRef = React.useRef(null);\n    // Listen to touch swipe navigate left & right.\n    useSwipeNavigate(\n        parent,\n        // Go next without loopback.\n        useCallback(() => onNextClick?.(false), [onNextClick]),\n        // Go previous without loopback.\n        useCallback(() => onPreviousClick?.(false), [onPreviousClick]),\n    );\n\n    /**\n     * Add roving tab index pattern to pagination items and activate slide on focus.\n     */\n    useRovingTabIndex({\n        parentRef: paginationRef,\n        elementSelector: 'button',\n        keepTabIndex: true,\n        onElementFocus: (element) => {\n            element.click();\n        },\n    });\n\n    // Pagination \"bullet\" range.\n    const visibleRange = usePaginationVisibleRange(activeIndex as number, slidesCount);\n\n    // Inline style of wrapper element.\n    const wrapperStyle = { transform: `translateX(-${PAGINATION_ITEM_SIZE * visibleRange.min}px)` };\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {\n                [`${CLASSNAME}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX,\n            })}\n        >\n            <IconButton\n                {...previousButtonProps}\n                icon={mdiChevronLeft}\n                className={`${CLASSNAME}__navigation`}\n                color={theme === Theme.dark ? 'light' : 'dark'}\n                emphasis={Emphasis.low}\n                onClick={onPreviousClick}\n            />\n            <div ref={paginationRef} className={`${CLASSNAME}__pagination`}>\n                <div\n                    className={`${CLASSNAME}__pagination-items`}\n                    style={wrapperStyle}\n                    role=\"tablist\"\n                    {...paginationProps}\n                >\n                    {useMemo(\n                        () =>\n                            range(slidesCount).map((index) => {\n                                const isOnEdge =\n                                    index !== 0 &&\n                                    index !== slidesCount - 1 &&\n                                    (index === visibleRange.min || index === visibleRange.max);\n                                const isActive = activeIndex === index;\n                                const isOutRange = index < visibleRange.min || index > visibleRange.max;\n                                const {\n                                    className: itemClassName = undefined,\n                                    label = undefined,\n                                    ...itemProps\n                                } = paginationItemProps ? paginationItemProps(index) : {};\n\n                                const ariaLabel =\n                                    label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;\n\n                                return (\n                                    <button\n                                        className={classNames(\n                                            handleBasicClasses({\n                                                prefix: `${CLASSNAME}__pagination-item`,\n                                                isActive,\n                                                isOnEdge,\n                                                isOutRange,\n                                            }),\n                                            itemClassName,\n                                        )}\n                                        key={index}\n                                        type=\"button\"\n                                        tabIndex={isActive ? undefined : -1}\n                                        role=\"tab\"\n                                        aria-selected={isActive}\n                                        onClick={() => onPaginationClick?.(index)}\n                                        aria-label={ariaLabel}\n                                        {...itemProps}\n                                    />\n                                );\n                            }),\n                        [\n                            slidesCount,\n                            visibleRange.min,\n                            visibleRange.max,\n                            activeIndex,\n                            paginationItemProps,\n                            paginationItemLabel,\n                            onPaginationClick,\n                        ],\n                    )}\n                </div>\n            </div>\n\n            {playButtonProps ? (\n                <IconButton\n                    {...playButtonProps}\n                    icon={isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline}\n                    className={`${CLASSNAME}__play`}\n                    color={theme === Theme.dark ? 'light' : 'dark'}\n                    emphasis={Emphasis.low}\n                />\n            ) : null}\n\n            <IconButton\n                {...nextButtonProps}\n                icon={mdiChevronRight}\n                className={`${CLASSNAME}__navigation`}\n                color={theme === Theme.dark ? 'light' : 'dark'}\n                emphasis={Emphasis.low}\n                onClick={onNextClick}\n            />\n        </div>\n    );\n});\n\nInternalSlideshowControls.displayName = COMPONENT_NAME;\nInternalSlideshowControls.className = CLASSNAME;\nInternalSlideshowControls.defaultProps = DEFAULT_PROPS;\n\nexport const SlideshowControls = Object.assign(InternalSlideshowControls, {\n    useSlideshowControls,\n    useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","activeIndex","InternalSlideshowControls","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","nextButtonProps","onNextClick","onPaginationClick","onPreviousClick","parentRef","previousButtonProps","paginationProps","slidesCount","theme","isAutoPlaying","playButtonProps","paginationItemLabel","paginationItemProps","forwardedProps","parent","WINDOW","HTMLElement","current","paginationRef","React","useRef","useSwipeNavigate","useCallback","useRovingTabIndex","elementSelector","keepTabIndex","onElementFocus","element","click","visibleRange","usePaginationVisibleRange","wrapperStyle","transform","PAGINATION_ITEM_SIZE","min","_jsxs","classNames","handleBasicClasses","prefix","PAGINATION_ITEMS_MAX","children","_jsx","IconButton","icon","mdiChevronLeft","color","dark","emphasis","Emphasis","low","onClick","style","role","useMemo","range","map","index","isOnEdge","max","isActive","isOutRange","itemClassName","undefined","label","itemProps","ariaLabel","type","tabIndex","mdiPauseCircleOutline","mdiPlayCircleOutline","mdiChevronRight","displayName","defaultProps","SlideshowControls","Object","assign","useSlideshowControls","useSlideshowControlsDefaultOptions","DEFAULT_OPTIONS"],"mappings":"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"}