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

package/_internal/packages/lumx-react/src/components/slider/Slider-59996a75.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider-59996a75.js","sources":["../../../../../../../src/components/slider/Slider.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { SyntheticEvent, useMemo, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { InputHelper, InputLabel, Theme } from '@lumx/react';\nimport useEventCallback from '@lumx/react/hooks/useEventCallback';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { clamp } from '@lumx/react/utils/number/clamp';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface SliderProps extends GenericProps, HasTheme {\n    /** Helper text. */\n    helper?: string;\n    /** Whether the min and max labels should be hidden or not. */\n    hideMinMaxLabel?: boolean;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Label text. */\n    label?: string;\n    /** Maximum value on the range. */\n    max: number;\n    /** Minimum value of the range. */\n    min: number;\n    /** Native input name property. */\n    name?: string;\n    /** Number of digits in the fractional part of the selected value. */\n    precision?: number;\n    /** Range step value. */\n    steps?: number;\n    /** Selected ranged value. */\n    value: number;\n    /** On change callback. */\n    onChange(value: number, name?: string, event?: SyntheticEvent): void;\n    /** On click callback. */\n    onMouseDown?(event: React.SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Slider';\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<SliderProps> = {\n    precision: 0,\n    steps: 0,\n};\n\n/**\n * Convert a percent value to a value in range min - max.\n *\n * @param percent   Value to convert.\n * @param min       Minimum value.\n * @param max       Maximum value.\n * @param precision Precision.\n * @return Value in range min - max\n */\nconst computeValueFromPercent = (percent: number, min: number, max: number, precision = 0): number =>\n    Number((min + percent * (max - min)).toFixed(precision));\n\n/**\n * Convert a value in range min - max to a percent value.\n *\n * @param value Value to convert.\n * @param min   Minimum value.\n * @param max   Maximum value.\n * @return Value in percent\n */\nconst computePercentFromValue = (value: number, min: number, max: number): number =>\n    Number((value - min) / (max - min));\n\n/**\n * Slider component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Slider = forwardRef<SliderProps, HTMLDivElement>((props, ref) => {\n    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        className,\n        helper,\n        hideMinMaxLabel,\n        id,\n        label,\n        max,\n        min,\n        name,\n        onChange,\n        onMouseDown,\n        precision = DEFAULT_PROPS.precision,\n        steps = DEFAULT_PROPS.steps,\n        theme = defaultTheme,\n        value,\n        ...forwardedProps\n    } = otherProps;\n    const generatedId = useId();\n    const sliderId = id || generatedId;\n    const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);\n    const sliderRef = useRef<HTMLDivElement>(null);\n\n    // build a lookup array for the steps.\n    const availableSteps = useMemo((): number[] => {\n        if (!steps) return [];\n\n        const available = [0];\n        const percentStep = 1 / ((max - min) / steps);\n        let ptr = 0;\n        while (ptr + percentStep < 1) {\n            ptr += percentStep;\n            available.push(ptr);\n        }\n        return available;\n    }, [steps, min, max]);\n\n    /**\n     * Try to find the closest step to the current slider position.\n     *\n     * @param percentValue Reference value\n     * @return The closest step value\n     */\n    const findClosestStep = (percentValue: number): number => {\n        const closest = availableSteps.reduce(\n            (acc, step) => {\n                const aDst = Math.abs(percentValue - step);\n                if (aDst < acc.dst) {\n                    return { dst: aDst, val: step };\n                }\n                return acc;\n            },\n            { dst: Infinity, val: -1 },\n        );\n        return closest.val;\n    };\n\n    /**\n     * Convert slider's handle position to percent.\n     *\n     * @param event The interaction event\n     * @param slider the slider element\n     * @return The computed percent value\n     */\n    const getPercentValue = (event: React.MouseEvent, slider: HTMLDivElement): number => {\n        const { width, left } = slider.getBoundingClientRect();\n        let percent = (event.pageX - left - window.pageXOffset) / width;\n        percent = clamp(percent, 0, 1);\n        if (steps) {\n            percent = findClosestStep(percent);\n        }\n        return percent;\n    };\n\n    /**\n     * Register a handler for the mouse move event.\n     */\n    const handleMove = useEventCallback((event: React.MouseEvent) => {\n        const { current: slider } = sliderRef;\n        if (!slider || !onChange) return;\n        const newValue = getPercentValue(event, slider);\n        onChange(computeValueFromPercent(newValue, min, max, precision), name, event);\n    });\n\n    /**\n     * Register a handler for the mouse up event.\n     * Clean a all listeners.\n     */\n    const handleEnd = useEventCallback(() => {\n        document.body.removeEventListener('mousemove', handleMove);\n        document.body.removeEventListener('mouseup', handleEnd);\n        document.body.removeEventListener('touchmove', handleMove);\n        document.body.removeEventListener('touchend', handleEnd);\n    });\n\n    /**\n     * Move to the next or previous value (i.e. + or - 10%) or next step\n     * @param previous Should seek the previous value.\n     */\n    const hopToValue = (previous = false) => {\n        const oldPercent = computePercentFromValue(value, min, max);\n        let percent = clamp(oldPercent + (previous ? -0.1 : 0.1), 0, 1);\n        if (steps) {\n            percent = oldPercent + availableSteps[1] * (previous ? -1 : 1);\n            percent = findClosestStep(percent);\n        }\n        if (onChange) {\n            onChange(computeValueFromPercent(percent, min, max, precision), name);\n        }\n    };\n\n    /**\n     * Register a handler for keyboard interactions\n     */\n    const handleKeyDown = useEventCallback((event: React.KeyboardEvent) => {\n        if (event.key === 'ArrowRight') {\n            hopToValue();\n        } else if (event.key === 'ArrowLeft') {\n            hopToValue(true);\n        }\n    });\n\n    /**\n     * Register a handler for the mouseDown event.\n     */\n    const handleMouseDown = useEventCallback((event: React.MouseEvent) => {\n        onMouseDown?.(event);\n\n        const { current: slider } = sliderRef;\n        if (isAnyDisabled || !slider) return;\n        const newValue = getPercentValue(event, slider);\n        if (onChange) {\n            onChange(computeValueFromPercent(newValue, min, max, precision), name, event);\n        }\n\n        document.body.addEventListener('mousemove', handleMove);\n        document.body.addEventListener('mouseup', handleEnd);\n    });\n\n    const percentString = `${computePercentFromValue(value, min, max) * 100}%`;\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, theme, hasLabel: Boolean(label) }),\n            )}\n            onMouseDown={handleMouseDown}\n        >\n            {label && (\n                <InputLabel id={sliderLabelId} htmlFor={sliderId} className={`${CLASSNAME}__label`} theme={theme}>\n                    {label}\n                </InputLabel>\n            )}\n\n            {helper && (\n                <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n                    {helper}\n                </InputHelper>\n            )}\n\n            <div className={`${CLASSNAME}__ui-wrapper`}>\n                {!hideMinMaxLabel && (\n                    <span className={`${CLASSNAME}__value-label ${CLASSNAME}__value-label--min`}>{min}</span>\n                )}\n                <div className={`${CLASSNAME}__wrapper`} ref={sliderRef}>\n                    <div className={`${CLASSNAME}__track ${CLASSNAME}__track--background`} />\n                    <div\n                        className={`${CLASSNAME}__track ${CLASSNAME}__track--active`}\n                        style={{ width: percentString }}\n                    />\n                    {steps ? (\n                        <div className={`${CLASSNAME}__ticks`}>\n                            {availableSteps.map((step, idx) => (\n                                <div\n                                    key={`tick_${idx}`}\n                                    className={`${CLASSNAME}__tick`}\n                                    style={{ left: `${step * 100}%` }}\n                                />\n                            ))}\n                        </div>\n                    ) : null}\n                    <button\n                        type=\"button\"\n                        aria-labelledby={sliderLabelId}\n                        name={name}\n                        id={sliderId}\n                        className={`${CLASSNAME}__handle`}\n                        style={{ left: percentString }}\n                        onKeyDown={isAnyDisabled ? undefined : handleKeyDown}\n                        {...disabledStateProps}\n                    />\n                </div>\n                {!hideMinMaxLabel && (\n                    <span className={`${CLASSNAME}__value-label ${CLASSNAME}__value-label--max`}>{max}</span>\n                )}\n            </div>\n        </div>\n    );\n});\nSlider.displayName = COMPONENT_NAME;\nSlider.className = CLASSNAME;\nSlider.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","precision","steps","computeValueFromPercent","percent","min","max","Number","toFixed","computePercentFromValue","value","Slider","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","className","helper","hideMinMaxLabel","id","label","name","onChange","onMouseDown","theme","forwardedProps","generatedId","useId","sliderId","sliderLabelId","useMemo","sliderRef","useRef","availableSteps","available","percentStep","ptr","push","findClosestStep","percentValue","closest","reduce","acc","step","aDst","Math","abs","dst","val","Infinity","getPercentValue","event","slider","width","left","getBoundingClientRect","pageX","window","pageXOffset","clamp","handleMove","useEventCallback","current","newValue","handleEnd","document","body","removeEventListener","hopToValue","previous","oldPercent","handleKeyDown","key","handleMouseDown","addEventListener","percentString","_jsxs","classNames","handleBasicClasses","prefix","hasLabel","Boolean","children","_jsx","InputLabel","htmlFor","InputHelper","style","map","idx","type","onKeyDown","undefined","displayName","defaultProps"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/slideshow/Slides-c8517dcb.js

@@ -0,0 +1,95 @@
+import React__default, { Children } from 'react';
+import chunk from 'lodash/chunk';
+import classNames from 'classnames';
+import { FULL_WIDTH_PERCENT } from './constants-e50f2a75.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { SlideshowItemGroup, buildSlideShowGroupId } from './SlideshowItemGroup-ce6a30cd.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Slideshow';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Slides component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Slides = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    activeIndex,
+    id,
+    className,
+    theme = defaultTheme,
+    fillHeight,
+    groupBy,
+    isAutoPlaying,
+    toggleAutoPlay,
+    slidesId,
+    children,
+    afterSlides,
+    hasControls,
+    slideGroupLabel,
+    ...forwardedProps
+  } = props;
+  const wrapperRef = React__default.useRef(null);
+  const startIndexVisible = activeIndex;
+  const endIndexVisible = startIndexVisible + 1;
+
+  // Inline style of wrapper element.
+  const wrapperStyle = {
+    transform: `translateX(-${FULL_WIDTH_PERCENT * activeIndex}%)`
+  };
+  const groups = React__default.useMemo(() => {
+    const childrenArray = Children.toArray(children);
+    return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
+  }, [children, groupBy]);
+  return /*#__PURE__*/jsxs("section", {
+    id: id,
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme
+    }), {
+      [`${CLASSNAME}--fill-height`]: fillHeight,
+      [`${CLASSNAME}--group-by-${groupBy}`]: Boolean(groupBy)
+    }),
+    "aria-roledescription": "carousel",
+    children: [/*#__PURE__*/jsx("div", {
+      id: slidesId,
+      className: `${CLASSNAME}__slides`,
+      onMouseEnter: toggleAutoPlay,
+      onMouseLeave: toggleAutoPlay,
+      "aria-live": isAutoPlaying ? 'off' : 'polite',
+      children: /*#__PURE__*/jsx("div", {
+        ref: wrapperRef,
+        className: `${CLASSNAME}__wrapper`,
+        style: wrapperStyle,
+        children: groups.map((group, index) => /*#__PURE__*/jsx(SlideshowItemGroup, {
+          id: slidesId && buildSlideShowGroupId(slidesId, index),
+          role: hasControls ? 'tabpanel' : 'group',
+          label: slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined,
+          isDisplayed: index >= startIndexVisible && index < endIndexVisible,
+          children: group
+        }, index))
+      })
+    }), afterSlides]
+  });
+});
+Slides.displayName = COMPONENT_NAME;
+Slides.className = CLASSNAME;
+
+export { Slides };
+//# sourceMappingURL=Slides-c8517dcb.js.map

package/_internal/packages/lumx-react/src/components/slideshow/Slides-c8517dcb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slides-c8517dcb.js","sources":["../../../../../../../src/components/slideshow/Slides.tsx"],"sourcesContent":["import React, { Children, CSSProperties } from 'react';\n\nimport chunk from 'lodash/chunk';\nimport classNames from 'classnames';\n\nimport { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';\n\nexport interface SlidesProps extends GenericProps, HasTheme {\n    /** current slide active */\n    activeIndex: number;\n    /** slides id to be added to the wrapper */\n    id?: string;\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    /** whether the slides are currently playing or not */\n    isAutoPlaying?: boolean;\n    /** id to be passed in into the slides */\n    slidesId?: string;\n    /** callback to change whether the slideshow is playing or not */\n    toggleAutoPlay: () => void;\n    /** component to be rendered after the slides */\n    afterSlides?: React.ReactNode;\n    /** Whether the slides have controls linked */\n    hasControls?: boolean;\n    /**\n     * Accessible label to set on a slide group.\n     * Receives the group position starting from 1 and the total number of groups.\n     * */\n    slideGroupLabel?: (groupPosition: number, groupTotal: number) => string;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Slideshow';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Slides component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Slides = forwardRef<SlidesProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme();\n    const {\n        activeIndex,\n        id,\n        className,\n        theme = defaultTheme,\n        fillHeight,\n        groupBy,\n        isAutoPlaying,\n        toggleAutoPlay,\n        slidesId,\n        children,\n        afterSlides,\n        hasControls,\n        slideGroupLabel,\n        ...forwardedProps\n    } = props;\n    const wrapperRef = React.useRef<HTMLDivElement>(null);\n    const startIndexVisible = activeIndex;\n    const endIndexVisible = startIndexVisible + 1;\n\n    // Inline style of wrapper element.\n    const wrapperStyle: CSSProperties = { transform: `translateX(-${FULL_WIDTH_PERCENT * activeIndex}%)` };\n\n    const groups = React.useMemo(() => {\n        const childrenArray = Children.toArray(children);\n        return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;\n    }, [children, groupBy]);\n\n    return (\n        <section\n            id={id}\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {\n                [`${CLASSNAME}--fill-height`]: fillHeight,\n                [`${CLASSNAME}--group-by-${groupBy}`]: Boolean(groupBy),\n            })}\n            aria-roledescription=\"carousel\"\n        >\n            <div\n                id={slidesId}\n                className={`${CLASSNAME}__slides`}\n                onMouseEnter={toggleAutoPlay}\n                onMouseLeave={toggleAutoPlay}\n                aria-live={isAutoPlaying ? 'off' : 'polite'}\n            >\n                <div ref={wrapperRef} className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>\n                    {groups.map((group, index) => (\n                        <SlideshowItemGroup\n                            key={index}\n                            id={slidesId && buildSlideShowGroupId(slidesId, index)}\n                            role={hasControls ? 'tabpanel' : 'group'}\n                            label={slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined}\n                            isDisplayed={index >= startIndexVisible && index < endIndexVisible}\n                        >\n                            {group}\n                        </SlideshowItemGroup>\n                    ))}\n                </div>\n            </div>\n\n            {afterSlides}\n        </section>\n    );\n});\n\nSlides.displayName = COMPONENT_NAME;\nSlides.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","Slides","forwardRef","props","ref","defaultTheme","useTheme","activeIndex","id","className","theme","fillHeight","groupBy","isAutoPlaying","toggleAutoPlay","slidesId","children","afterSlides","hasControls","slideGroupLabel","forwardedProps","wrapperRef","React","useRef","startIndexVisible","endIndexVisible","wrapperStyle","transform","FULL_WIDTH_PERCENT","groups","useMemo","childrenArray","Children","toArray","chunk","_jsxs","classNames","handleBasicClasses","prefix","Boolean","_jsx","onMouseEnter","onMouseLeave","style","map","group","index","SlideshowItemGroup","buildSlideShowGroupId","role","label","length","undefined","isDisplayed","displayName"],"mappings":"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"}

package/_internal/{components/slideshow-b78ac3d6.js → packages/lumx-react/src/components/slideshow/Slideshow-a21bfd66.js}

@@ -1,35 +1,14 @@
-import React__default, { useEffect } from 'react';
-import { a as SlideshowControls, b as Slides, c as buildSlideShowGroupId, D as DEFAULT_OPTIONS } from '../Slides-2a427c44.js';
-export { S as SlideshowItem } from '../Slides-2a427c44.js';
-import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
+import React__default from 'react';
+import { DEFAULT_OPTIONS } from '../../hooks/useSlideshowControls-9c881480.js';
+import { useFocusWithin } from '../../hooks/useFocusWithin-9976fe9a.js';
+import { mergeRefs } from '../../utils/react/mergeRefs-27df0cb6.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { buildSlideShowGroupId } from './SlideshowItemGroup-ce6a30cd.js';
 import { jsx } from 'react/jsx-runtime';
 import { Theme } from '@lumx/core/js/constants';
-
-/**
- * Hook that allows to control when there is a focus event within a given element, meaning
- * that any element within the given target will trigger the focus in and focus out events.
- * @param options - UseFocusWithinOptions
- */
-const useFocusWithin = ({
-  element,
-  onFocusIn,
-  onFocusOut
-}) => {
-  useEffect(() => {
-    if (element) {
-      element.addEventListener('focusin', onFocusIn);
-      element.addEventListener('focusout', onFocusOut);
-    }
-    return () => {
-      if (element) {
-        element.removeEventListener('focusin', onFocusIn);
-        element.removeEventListener('focusout', onFocusOut);
-      }
-    };
-  }, [onFocusIn, element, onFocusOut]);
-};
+import { SlideshowControls } from './SlideshowControls-ecca54c4.js';
+import { Slides } from './Slides-c8517dcb.js';
 
 /**
  * Component default props.
@@ -147,5 +126,5 @@ const Slideshow = forwardRef((props, ref) => {
 Slideshow.displayName = 'Slideshow';
 Slideshow.defaultProps = DEFAULT_PROPS;
 
-export { Slides, Slideshow, SlideshowControls };
-//# sourceMappingURL=slideshow-b78ac3d6.js.map
+export { Slideshow };
+//# sourceMappingURL=Slideshow-a21bfd66.js.map

package/_internal/packages/lumx-react/src/components/slideshow/Slideshow-a21bfd66.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slideshow-a21bfd66.js","sources":["../../../../../../../src/components/slideshow/Slideshow.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';\nimport { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { buildSlideShowGroupId } from './SlideshowItemGroup';\n\n/**\n * Defines the props of the component.\n */\nexport interface SlideshowProps\n    extends GenericProps,\n        Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {\n    /** current slide active */\n    activeIndex?: SlidesProps['activeIndex'];\n    /** Interval between each slide when automatic rotation is enabled. */\n    interval?: number;\n    /** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */\n    slideshowControlsProps?: Pick<\n        SlideshowControlsProps,\n        'nextButtonProps' | 'previousButtonProps' | 'paginationItemProps'\n    > &\n        Omit<\n            SlideshowControlsProps,\n            | 'activeIndex'\n            | 'onPaginationClick'\n            | 'onNextClick'\n            | 'onPreviousClick'\n            | 'slidesCount'\n            | 'parentRef'\n            | 'theme'\n        >;\n    /** Callback when slide changes */\n    onChange?(index: number): void;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<SlideshowProps> = DEFAULT_OPTIONS;\n\n/**\n * Slideshow component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Slideshow = forwardRef<SlideshowProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        activeIndex,\n        autoPlay = DEFAULT_PROPS.autoPlay,\n        children,\n        className,\n        fillHeight,\n        groupBy = DEFAULT_OPTIONS.groupBy,\n        interval = DEFAULT_PROPS.interval,\n        onChange,\n        slideshowControlsProps,\n        theme = defaultTheme,\n        id,\n        slidesId,\n        slideGroupLabel,\n        ...forwardedProps\n    } = props;\n    // Number of slideshow items.\n    const itemsCount = React.Children.count(children);\n\n    const {\n        activeIndex: currentIndex,\n        slideshowId,\n        setSlideshow,\n        isAutoPlaying,\n        slideshowSlidesId,\n        slidesCount,\n        onNextClick,\n        onPaginationClick,\n        onPreviousClick,\n        slideshow,\n        stopAutoPlay,\n        startAutoPlay,\n        toggleAutoPlay,\n        toggleForcePause,\n    } = SlideshowControls.useSlideshowControls({\n        activeIndex,\n        defaultActiveIndex: DEFAULT_PROPS.activeIndex as number,\n        autoPlay: Boolean(autoPlay),\n        itemsCount,\n        groupBy,\n        id,\n        interval,\n        onChange,\n        slidesId,\n    });\n\n    useFocusWithin({\n        element: slideshow,\n        onFocusIn: stopAutoPlay,\n        onFocusOut: startAutoPlay,\n    });\n\n    const showControls = slideshowControlsProps && slidesCount > 1;\n\n    return (\n        <Slides\n            activeIndex={currentIndex}\n            id={slideshowId}\n            className={className}\n            theme={theme}\n            fillHeight={fillHeight}\n            groupBy={groupBy}\n            isAutoPlaying={isAutoPlaying}\n            autoPlay={autoPlay}\n            slidesId={slideshowSlidesId}\n            toggleAutoPlay={toggleAutoPlay}\n            ref={mergeRefs(ref, setSlideshow)}\n            hasControls={showControls}\n            slideGroupLabel={slideGroupLabel}\n            afterSlides={\n                slideshowControlsProps && slidesCount > 1 ? (\n                    <div className={`${Slides.className}__controls`}>\n                        <SlideshowControls\n                            {...slideshowControlsProps}\n                            activeIndex={currentIndex}\n                            onPaginationClick={onPaginationClick}\n                            onNextClick={onNextClick}\n                            onPreviousClick={onPreviousClick}\n                            slidesCount={slidesCount}\n                            parentRef={slideshow}\n                            theme={theme}\n                            isAutoPlaying={isAutoPlaying}\n                            nextButtonProps={{\n                                'aria-controls': slideshowSlidesId,\n                                ...slideshowControlsProps.nextButtonProps,\n                            }}\n                            previousButtonProps={{\n                                'aria-controls': slideshowSlidesId,\n                                ...slideshowControlsProps.previousButtonProps,\n                            }}\n                            playButtonProps={\n                                autoPlay\n                                    ? {\n                                          'aria-controls': slideshowSlidesId,\n                                          onClick: toggleForcePause,\n                                          ...slideshowControlsProps.playButtonProps,\n                                      }\n                                    : undefined\n                            }\n                            paginationItemProps={(index) => ({\n                                'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),\n                                ...slideshowControlsProps.paginationItemProps?.(index),\n                            })}\n                        />\n                    </div>\n                ) : undefined\n            }\n            {...forwardedProps}\n        >\n            {children}\n        </Slides>\n    );\n});\n\nSlideshow.displayName = 'Slideshow';\nSlideshow.defaultProps = DEFAULT_PROPS;\n"],"names":["DEFAULT_PROPS","DEFAULT_OPTIONS","Slideshow","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","activeIndex","autoPlay","children","className","fillHeight","groupBy","interval","onChange","slideshowControlsProps","theme","id","slidesId","slideGroupLabel","forwardedProps","itemsCount","React","Children","count","currentIndex","slideshowId","setSlideshow","isAutoPlaying","slideshowSlidesId","slidesCount","onNextClick","onPaginationClick","onPreviousClick","slideshow","stopAutoPlay","startAutoPlay","toggleAutoPlay","toggleForcePause","SlideshowControls","useSlideshowControls","defaultActiveIndex","Boolean","useFocusWithin","element","onFocusIn","onFocusOut","showControls","_jsx","Slides","mergeRefs","hasControls","afterSlides","parentRef","nextButtonProps","previousButtonProps","playButtonProps","onClick","undefined","paginationItemProps","index","buildSlideShowGroupId","displayName","defaultProps"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/slideshow/SlideshowControls-ecca54c4.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 '../../constants-6af61e2f.js';
+import { useSlideshowControls, DEFAULT_OPTIONS } from '../../hooks/useSlideshowControls-9c881480.js';
+import { useRovingTabIndex } from '../../hooks/useRovingTabIndex-bb8088e1.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { useSwipeNavigate } from './useSwipeNavigate-de52a4b9.js';
+import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants-e50f2a75.js';
+import { usePaginationVisibleRange } from './usePaginationVisibleRange-afe733eb.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { mdiPauseCircleOutline } from '../../../../lumx-icons/dist/esm/pause-circle-outline-4bb19934.js';
+import { mdiPlayCircleOutline } from '../../../../lumx-icons/dist/esm/play-circle-outline-185778b8.js';
+import { Theme, Emphasis } from '@lumx/core/js/constants';
+import { IconButton } from '../button/IconButton-a740ce59.js';
+import { mdiChevronLeft } from '../../../../lumx-icons/dist/esm/chevron-left-e9c3b1e0.js';
+import { mdiChevronRight } from '../../../../lumx-icons/dist/esm/chevron-right-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=SlideshowControls-ecca54c4.js.map

package/_internal/packages/lumx-react/src/components/slideshow/SlideshowControls-ecca54c4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideshowControls-ecca54c4.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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"}

package/_internal/packages/lumx-react/src/components/slideshow/SlideshowItem-59ca2aee.js

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SlideshowItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * SlideshowItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SlideshowItem = forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    className: classNames(className, CLASSNAME),
+    ...forwardedProps,
+    children: children
+  });
+});
+SlideshowItem.displayName = COMPONENT_NAME;
+SlideshowItem.className = CLASSNAME;
+
+export { SlideshowItem };
+//# sourceMappingURL=SlideshowItem-59ca2aee.js.map

package/_internal/packages/lumx-react/src/components/slideshow/SlideshowItem-59ca2aee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideshowItem-59ca2aee.js","sources":["../../../../../../../src/components/slideshow/SlideshowItem.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SlideshowItemProps extends GenericProps {\n    /** interval in which slides are automatically shown */\n    interval?: number;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SlideshowItem';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SlideshowItem component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SlideshowItem = forwardRef<SlideshowItemProps, HTMLDivElement>((props, ref) => {\n    const { className, children, ...forwardedProps } = props;\n    return (\n        <div ref={ref} className={classNames(className, CLASSNAME)} {...forwardedProps}>\n            {children}\n        </div>\n    );\n});\n\nSlideshowItem.displayName = COMPONENT_NAME;\nSlideshowItem.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","SlideshowItem","forwardRef","props","ref","className","children","forwardedProps","_jsx","classNames","displayName"],"mappings":";;;;;AAgBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,eAAe,CAAA;;AAEtC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,aAAa,GAAGC,UAAU,CAAqC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACxF,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AACxD,EAAA,oBACIK,GAAA,CAAA,KAAA,EAAA;AAAKJ,IAAAA,GAAG,EAAEA,GAAI;AAACC,IAAAA,SAAS,EAAEI,UAAU,CAACJ,SAAS,EAAEN,SAAS,CAAE;AAAA,IAAA,GAAKQ,cAAc;AAAAD,IAAAA,QAAA,EACzEA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AAEFL,aAAa,CAACS,WAAW,GAAGZ,cAAc,CAAA;AAC1CG,aAAa,CAACI,SAAS,GAAGN,SAAS;;;;"}

package/_internal/packages/lumx-react/src/components/slideshow/SlideshowItemGroup-ce6a30cd.js

@@ -0,0 +1,55 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { mergeRefs } from '../../utils/react/mergeRefs-27df0cb6.js';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useSlideFocusManagement } from './useSlideFocusManagement-6380f9c4.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SlideshowItemGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const buildSlideShowGroupId = (slidesId, index) => `${slidesId}-slide-${index}`;
+
+/**
+ * SlideshowItemGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SlideshowItemGroup = forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    role = 'group',
+    label,
+    isDisplayed,
+    ...forwardedProps
+  } = props;
+  const groupRef = React__default.useRef(null);
+  useSlideFocusManagement({
+    isSlideDisplayed: isDisplayed,
+    slideRef: groupRef
+  });
+  return /*#__PURE__*/jsx("div", {
+    ref: mergeRefs(groupRef, ref),
+    role: role,
+    className: classNames(className, CLASSNAME),
+    "aria-roledescription": "slide",
+    "aria-label": label,
+    ...forwardedProps,
+    children: children
+  });
+});
+SlideshowItemGroup.displayName = COMPONENT_NAME;
+SlideshowItemGroup.className = CLASSNAME;
+
+export { CLASSNAME, SlideshowItemGroup, buildSlideShowGroupId };
+//# sourceMappingURL=SlideshowItemGroup-ce6a30cd.js.map

package/_internal/packages/lumx-react/src/components/slideshow/SlideshowItemGroup-ce6a30cd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideshowItemGroup-ce6a30cd.js","sources":["../../../../../../../src/components/slideshow/SlideshowItemGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useSlideFocusManagement } from './useSlideFocusManagement';\n\n/**\n * Defines the props of the component.\n */\nexport interface SlideshowItemGroupProps extends GenericProps {\n    role?: 'tabpanel' | 'group';\n    label?: string;\n    isDisplayed?: boolean;\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SlideshowItemGroup';\n\n/**\n * Component default class name and class prefix.\n */\nexport const CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const buildSlideShowGroupId = (slidesId: string, index: number) => `${slidesId}-slide-${index}`;\n\n/**\n * SlideshowItemGroup component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SlideshowItemGroup = forwardRef<SlideshowItemGroupProps, HTMLDivElement>((props, ref) => {\n    const { className, children, role = 'group', label, isDisplayed, ...forwardedProps } = props;\n    const groupRef = React.useRef<HTMLDivElement>(null);\n\n    useSlideFocusManagement({ isSlideDisplayed: isDisplayed, slideRef: groupRef });\n\n    return (\n        <div\n            ref={mergeRefs(groupRef, ref)}\n            role={role}\n            className={classNames(className, CLASSNAME)}\n            aria-roledescription=\"slide\"\n            aria-label={label}\n            {...forwardedProps}\n        >\n            {children}\n        </div>\n    );\n});\n\nSlideshowItemGroup.displayName = COMPONENT_NAME;\nSlideshowItemGroup.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","buildSlideShowGroupId","slidesId","index","SlideshowItemGroup","forwardRef","props","ref","className","children","role","label","isDisplayed","forwardedProps","groupRef","React","useRef","useSlideFocusManagement","isSlideDisplayed","slideRef","_jsx","mergeRefs","classNames","displayName"],"mappings":";;;;;;;;AAmBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,oBAAoB,CAAA;;AAE3C;AACA;AACA;MACaC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,EAAC;AAE5CG,MAAAA,qBAAqB,GAAGA,CAACC,QAAgB,EAAEC,KAAa,KAAK,CAAGD,EAAAA,QAAQ,CAAUC,OAAAA,EAAAA,KAAK,CAAE,EAAA;;AAEtG;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,kBAAkB,GAAGC,UAAU,CAA0C,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClG,MAAM;IAAEC,SAAS;IAAEC,QAAQ;AAAEC,IAAAA,IAAI,GAAG,OAAO;IAAEC,KAAK;IAAEC,WAAW;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGP,KAAK,CAAA;AAC5F,EAAA,MAAMQ,QAAQ,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC,CAAA;AAEnDC,EAAAA,uBAAuB,CAAC;AAAEC,IAAAA,gBAAgB,EAAEN,WAAW;AAAEO,IAAAA,QAAQ,EAAEL,QAAAA;AAAS,GAAC,CAAC,CAAA;AAE9E,EAAA,oBACIM,GAAA,CAAA,KAAA,EAAA;AACIb,IAAAA,GAAG,EAAEc,SAAS,CAACP,QAAQ,EAAEP,GAAG,CAAE;AAC9BG,IAAAA,IAAI,EAAEA,IAAK;AACXF,IAAAA,SAAS,EAAEc,UAAU,CAACd,SAAS,EAAET,SAAS,CAAE;AAC5C,IAAA,sBAAA,EAAqB,OAAO;AAC5B,IAAA,YAAA,EAAYY,KAAM;AAAA,IAAA,GACdE,cAAc;AAAAJ,IAAAA,QAAA,EAEjBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AAEFL,kBAAkB,CAACmB,WAAW,GAAGzB,cAAc,CAAA;AAC/CM,kBAAkB,CAACI,SAAS,GAAGT,SAAS;;;;"}

package/_internal/packages/lumx-react/src/components/slideshow/constants-e50f2a75.js

@@ -0,0 +1,27 @@
+/**
+ * Autoplay default interval in ms.
+ */
+const AUTOPLAY_DEFAULT_INTERVAL = 5000;
+
+/**
+ * Full width size in percent.
+ */
+const FULL_WIDTH_PERCENT = 100;
+
+/**
+ * Edge from the active index.
+ */
+const EDGE_FROM_ACTIVE_INDEX = 2;
+
+/**
+ * Max number of pagination items.
+ */
+const PAGINATION_ITEMS_MAX = 5;
+
+/**
+ * Size of a pagination item. Used to translate wrapper.
+ */
+const PAGINATION_ITEM_SIZE = 12;
+
+export { AUTOPLAY_DEFAULT_INTERVAL, EDGE_FROM_ACTIVE_INDEX, FULL_WIDTH_PERCENT, PAGINATION_ITEMS_MAX, PAGINATION_ITEM_SIZE };
+//# sourceMappingURL=constants-e50f2a75.js.map

package/_internal/packages/lumx-react/src/components/slideshow/constants-e50f2a75.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants-e50f2a75.js","sources":["../../../../../../../src/components/slideshow/constants.ts"],"sourcesContent":["/**\n * Autoplay default interval in ms.\n */\nexport const AUTOPLAY_DEFAULT_INTERVAL = 5000;\n\n/**\n * Full width size in percent.\n */\nexport const FULL_WIDTH_PERCENT = 100;\n\n/**\n * Edge from the active index.\n */\nexport const EDGE_FROM_ACTIVE_INDEX = 2;\n\n/**\n * Max number of pagination items.\n */\nexport const PAGINATION_ITEMS_MAX = 5;\n\n/**\n * Size of a pagination item. Used to translate wrapper.\n */\nexport const PAGINATION_ITEM_SIZE = 12;\n"],"names":["AUTOPLAY_DEFAULT_INTERVAL","FULL_WIDTH_PERCENT","EDGE_FROM_ACTIVE_INDEX","PAGINATION_ITEMS_MAX","PAGINATION_ITEM_SIZE"],"mappings":"AAAA;AACA;AACA;AACO,MAAMA,yBAAyB,GAAG,KAAI;;AAE7C;AACA;AACA;AACO,MAAMC,kBAAkB,GAAG,IAAG;;AAErC;AACA;AACA;AACO,MAAMC,sBAAsB,GAAG,EAAC;;AAEvC;AACA;AACA;AACO,MAAMC,oBAAoB,GAAG,EAAC;;AAErC;AACA;AACA;AACO,MAAMC,oBAAoB,GAAG;;;;"}