@lumx/react 3.20.1-alpha.14 → 3.20.1-alpha.15

package/_internal/components/slider-8094cb5c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-8094cb5c.js","sources":["../../../src/hooks/useEventCallback.tsx","../../../src/utils/number/clamp.ts","../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React from 'react';\n\nconst useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\n/**\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n *\n * @param fn A function to run\n * @return A React callback\n */\nexport default function useEventCallback(fn: (...args: any[]) => any): (event: any) => any {\n    const ref = React.useRef(fn);\n    useEnhancedEffect(() => {\n        ref.current = fn;\n    });\n    return React.useCallback((event: any) => ref.current(event), []);\n}\n","/**\n * Clamp value in range.\n *\n * @param value Value to clamp.\n * @param min   Minimum value.\n * @param max   Maximum value.\n * @return Clamped value.\n */\nexport const clamp = (value: number, min: number, max: number): number => {\n    if (value < min) {\n        return min;\n    }\n    if (value > max) {\n        return max;\n    }\n    return value;\n};\n","/* 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":["useEnhancedEffect","window","React","useLayoutEffect","useEffect","useEventCallback","fn","ref","useRef","current","useCallback","event","clamp","value","min","max","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","precision","steps","computeValueFromPercent","percent","Number","toFixed","computePercentFromValue","Slider","forwardRef","props","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","className","helper","hideMinMaxLabel","id","label","name","onChange","onMouseDown","theme","forwardedProps","generatedId","useId","sliderId","sliderLabelId","useMemo","sliderRef","availableSteps","available","percentStep","ptr","push","findClosestStep","percentValue","closest","reduce","acc","step","aDst","Math","abs","dst","val","Infinity","getPercentValue","slider","width","left","getBoundingClientRect","pageX","pageXOffset","handleMove","newValue","handleEnd","document","body","removeEventListener","hopToValue","previous","oldPercent","handleKeyDown","key","handleMouseDown","addEventListener","percentString","createElement","_extends","classNames","handleBasicClasses","prefix","hasLabel","Boolean","InputLabel","htmlFor","InputHelper","style","map","idx","type","onKeyDown","undefined","displayName","defaultProps"],"mappings":"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"}

package/_internal/components/slideshow-2e8cd372.js

@@ -0,0 +1,150 @@
+import { f as forwardRef, _ as _extends } from '../forwardRef-49d2bb84.js';
+import React__default, { useEffect } from 'react';
+import { a as SlideshowControls, b as Slides, c as buildSlideShowGroupId, D as DEFAULT_OPTIONS } from '../Slides-01f513ce.js';
+export { S as SlideshowItem } from '../Slides-01f513ce.js';
+import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+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]);
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = DEFAULT_OPTIONS;
+
+/**
+ * Slideshow component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Slideshow = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    activeIndex,
+    autoPlay = DEFAULT_PROPS.autoPlay,
+    children,
+    className,
+    fillHeight,
+    groupBy = DEFAULT_OPTIONS.groupBy,
+    interval = DEFAULT_PROPS.interval,
+    onChange,
+    slideshowControlsProps,
+    theme = defaultTheme,
+    id,
+    slidesId,
+    slideGroupLabel,
+    ...forwardedProps
+  } = props;
+  // Number of slideshow items.
+  const itemsCount = React__default.Children.count(children);
+  const {
+    activeIndex: currentIndex,
+    slideshowId,
+    setSlideshow,
+    isAutoPlaying,
+    slideshowSlidesId,
+    slidesCount,
+    onNextClick,
+    onPaginationClick,
+    onPreviousClick,
+    slideshow,
+    stopAutoPlay,
+    startAutoPlay,
+    toggleAutoPlay,
+    toggleForcePause
+  } = SlideshowControls.useSlideshowControls({
+    activeIndex,
+    defaultActiveIndex: DEFAULT_PROPS.activeIndex,
+    autoPlay: Boolean(autoPlay),
+    itemsCount,
+    groupBy,
+    id,
+    interval,
+    onChange,
+    slidesId
+  });
+  useFocusWithin({
+    element: slideshow,
+    onFocusIn: stopAutoPlay,
+    onFocusOut: startAutoPlay
+  });
+  const showControls = slideshowControlsProps && slidesCount > 1;
+  return /*#__PURE__*/React__default.createElement(Slides, _extends({
+    activeIndex: currentIndex,
+    id: slideshowId,
+    className: className,
+    theme: theme,
+    fillHeight: fillHeight,
+    groupBy: groupBy,
+    isAutoPlaying: isAutoPlaying,
+    autoPlay: autoPlay,
+    slidesId: slideshowSlidesId,
+    toggleAutoPlay: toggleAutoPlay,
+    ref: mergeRefs(ref, setSlideshow),
+    hasControls: showControls,
+    slideGroupLabel: slideGroupLabel,
+    afterSlides: slideshowControlsProps && slidesCount > 1 ? /*#__PURE__*/React__default.createElement("div", {
+      className: `${Slides.className}__controls`
+    }, /*#__PURE__*/React__default.createElement(SlideshowControls, _extends({}, slideshowControlsProps, {
+      activeIndex: currentIndex,
+      onPaginationClick: onPaginationClick,
+      onNextClick: onNextClick,
+      onPreviousClick: onPreviousClick,
+      slidesCount: slidesCount,
+      parentRef: slideshow,
+      theme: theme,
+      isAutoPlaying: isAutoPlaying,
+      nextButtonProps: {
+        'aria-controls': slideshowSlidesId,
+        ...slideshowControlsProps.nextButtonProps
+      },
+      previousButtonProps: {
+        'aria-controls': slideshowSlidesId,
+        ...slideshowControlsProps.previousButtonProps
+      },
+      playButtonProps: autoPlay ? {
+        'aria-controls': slideshowSlidesId,
+        onClick: toggleForcePause,
+        ...slideshowControlsProps.playButtonProps
+      } : undefined,
+      paginationItemProps: index => ({
+        'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),
+        ...slideshowControlsProps.paginationItemProps?.(index)
+      })
+    }))) : undefined
+  }, forwardedProps), children);
+});
+Slideshow.displayName = 'Slideshow';
+Slideshow.defaultProps = DEFAULT_PROPS;
+
+export { Slides, Slideshow, SlideshowControls };
+//# sourceMappingURL=slideshow-2e8cd372.js.map

package/_internal/components/slideshow-2e8cd372.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slideshow-2e8cd372.js","sources":["../../../src/hooks/useFocusWithin.ts","../../../src/components/slideshow/Slideshow.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n    /** element to add the focus within to */\n    element: HTMLElement | null;\n    /** callback to be executed on focus in */\n    onFocusIn: (ev: FocusEvent) => void;\n    /** callback to be executed on focus out */\n    onFocusOut: (ev: FocusEvent) => void;\n}\n\n/**\n * Hook that allows to control when there is a focus event within a given element, meaning\n * that any element within the given target will trigger the focus in and focus out events.\n * @param options - UseFocusWithinOptions\n */\nexport const useFocusWithin = ({ element, onFocusIn, onFocusOut }: UseFocusWithinOptions) => {\n    useEffect(() => {\n        if (element) {\n            element.addEventListener('focusin', onFocusIn);\n\n            element.addEventListener('focusout', onFocusOut);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener('focusin', onFocusIn);\n\n                element.removeEventListener('focusout', onFocusOut);\n            }\n        };\n    }, [onFocusIn, element, onFocusOut]);\n};\n","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":["useFocusWithin","element","onFocusIn","onFocusOut","useEffect","addEventListener","removeEventListener","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","showControls","createElement","Slides","_extends","mergeRefs","hasControls","afterSlides","parentRef","nextButtonProps","previousButtonProps","playButtonProps","onClick","undefined","paginationItemProps","index","buildSlideShowGroupId","displayName","defaultProps"],"mappings":"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"}

package/_internal/components/switch-5516949b.js

@@ -0,0 +1,118 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import { Children } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useId } from '../useId-3a1facc0.js';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { u as useDisableStateProps } from '../useDisableStateProps-fffc365f.js';
+import { Alignment, Theme } from '@lumx/core/js/constants';
+import { InputLabel } from './input-label-5e509a1b.js';
+import { InputHelper } from './input-helper-e644e05e.js';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Switch';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  position: Alignment.left
+};
+
+/**
+ * Switch component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Switch = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    checked,
+    children,
+    className,
+    helper,
+    id,
+    isChecked = checked,
+    name,
+    onChange,
+    position = DEFAULT_PROPS.position,
+    theme = defaultTheme,
+    value,
+    inputProps = {},
+    ...forwardedProps
+  } = otherProps;
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
+  const handleChange = event => {
+    if (onChange) {
+      onChange(!isChecked, value, name, event);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      isChecked,
+      isDisabled: isAnyDisabled,
+      position,
+      theme,
+      isUnchecked: !isChecked
+    }))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__input-wrapper`
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    role: "switch",
+    id: inputId,
+    className: `${CLASSNAME}__input-native`,
+    name: name,
+    value: value
+  }, disabledStateProps, {
+    readOnly: inputProps.readOnly || isAnyDisabled,
+    checked: isChecked,
+    "aria-checked": Boolean(isChecked),
+    onChange: handleChange,
+    "aria-describedby": helper ? `${inputId}-helper` : undefined
+  }, inputProps)), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__input-placeholder`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__input-background`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__input-indicator`
+  }))), Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__content`
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    htmlFor: inputId,
+    theme: theme,
+    className: `${CLASSNAME}__label`
+  }, children), !isEmpty(helper) && /*#__PURE__*/React.createElement(InputHelper, {
+    id: `${inputId}-helper`,
+    theme: theme,
+    className: `${CLASSNAME}__helper`
+  }, helper)));
+});
+Switch.displayName = COMPONENT_NAME;
+Switch.className = CLASSNAME;
+Switch.defaultProps = DEFAULT_PROPS;
+
+export { Switch };
+//# sourceMappingURL=switch-5516949b.js.map

package/_internal/components/switch-5516949b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-5516949b.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { Children, InputHTMLAttributes, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\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';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\n/**\n * Defines the props of the component.\n */\nexport interface SwitchProps extends GenericProps, HasTheme, HasAriaDisabled {\n    /** Helper text. */\n    helper?: string;\n    /** Whether it is checked or not. */\n    isChecked?: boolean;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Native input name property. */\n    name?: string;\n    /** Position of the switch relative to the label. */\n    position?: Extract<Alignment, 'right' | 'left'>;\n    /** Native input value property. */\n    value?: string;\n    /** On change callback. */\n    onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n    /** optional props for input */\n    inputProps?: InputHTMLAttributes<HTMLInputElement>;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Switch';\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<SwitchProps> = {\n    position: Alignment.left,\n};\n\n/**\n * Switch component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {\n    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        checked,\n        children,\n        className,\n        helper,\n        id,\n        isChecked = checked,\n        name,\n        onChange,\n        position = DEFAULT_PROPS.position,\n        theme = defaultTheme,\n        value,\n        inputProps = {},\n        ...forwardedProps\n    } = otherProps;\n    const generatedInputId = useId();\n    const inputId = id || generatedInputId;\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            onChange(!isChecked, value, name, event);\n        }\n    };\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    isChecked,\n                    isDisabled: isAnyDisabled,\n                    position,\n                    theme,\n                    isUnchecked: !isChecked,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__input-wrapper`}>\n                <input\n                    type=\"checkbox\"\n                    role=\"switch\"\n                    id={inputId}\n                    className={`${CLASSNAME}__input-native`}\n                    name={name}\n                    value={value}\n                    {...disabledStateProps}\n                    readOnly={inputProps.readOnly || isAnyDisabled}\n                    checked={isChecked}\n                    aria-checked={Boolean(isChecked)}\n                    onChange={handleChange}\n                    aria-describedby={helper ? `${inputId}-helper` : undefined}\n                    {...inputProps}\n                />\n\n                <div className={`${CLASSNAME}__input-placeholder`}>\n                    <div className={`${CLASSNAME}__input-background`} />\n                    <div className={`${CLASSNAME}__input-indicator`} />\n                </div>\n            </div>\n\n            {Children.count(children) > 0 && (\n                <div className={`${CLASSNAME}__content`}>\n                    <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>\n                        {children}\n                    </InputLabel>\n                    {!isEmpty(helper) && (\n                        <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>\n                            {helper}\n                        </InputHelper>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n});\nSwitch.displayName = COMPONENT_NAME;\nSwitch.className = CLASSNAME;\nSwitch.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","position","Alignment","left","Switch","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","checked","children","className","helper","id","isChecked","name","onChange","theme","value","inputProps","forwardedProps","generatedInputId","useId","inputId","handleChange","event","React","createElement","_extends","classNames","handleBasicClasses","prefix","isDisabled","isUnchecked","type","role","readOnly","Boolean","undefined","Children","count","InputLabel","htmlFor","isEmpty","InputHelper","displayName","defaultProps"],"mappings":"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"}

package/_internal/components/table-fa198ee6.js

@@ -0,0 +1,299 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { Theme, Size } from '@lumx/core/js/constants';
+import { mdiArrowUp, mdiArrowDown } from '@lumx/icons';
+import { Icon } from './icon-2e7345ad.js';
+import { u as useDisableStateProps } from '../useDisableStateProps-fffc365f.js';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$4 = 'Table';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$4 = getRootClassName(COMPONENT_NAME$4);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$3 = {};
+
+/**
+ * Table component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Table = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    children,
+    className,
+    hasBefore,
+    hasDividers,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement("table", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$4,
+      hasBefore,
+      hasDividers,
+      theme
+    }))
+  }), children);
+});
+Table.displayName = COMPONENT_NAME$4;
+Table.className = CLASSNAME$4;
+Table.defaultProps = DEFAULT_PROPS$3;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$3 = 'TableBody';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$3 = getRootClassName(COMPONENT_NAME$3, true);
+
+/**
+ * TableBody component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableBody = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement("tbody", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, CLASSNAME$3)
+  }), children);
+});
+TableBody.displayName = COMPONENT_NAME$3;
+TableBody.className = CLASSNAME$3;
+
+/**
+ * Table head cell sort order.
+ */
+const ThOrder = {
+  asc: 'asc',
+  desc: 'desc'
+};
+/**
+ * Table cell variants.
+ */
+const TableCellVariant = {
+  body: 'body',
+  head: 'head'
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'TableCell';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2, true);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$2 = {
+  variant: TableCellVariant.body
+};
+
+/**
+ * TableCell component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableCell = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    icon,
+    isSortable,
+    onHeaderClick,
+    sortOrder,
+    variant = DEFAULT_PROPS$2.variant,
+    ...forwardedProps
+  } = props;
+
+  // Use button if clickable
+  const Wrapper = onHeaderClick ? 'button' : 'div';
+  const wrapperProps = Wrapper === 'button' ? {
+    type: 'button',
+    onClick: onHeaderClick
+  } : undefined;
+
+  // ARIA sort
+  let ariaSort;
+  if (isSortable) {
+    ariaSort = 'none';
+    if (sortOrder === ThOrder.asc) ariaSort = 'ascending';
+    if (sortOrder === ThOrder.desc) ariaSort = 'descending';
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, variant === TableCellVariant.head && /*#__PURE__*/React.createElement("th", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(handleBasicClasses({
+      prefix: CLASSNAME$2,
+      isSortable,
+      isSorted: isSortable && !!sortOrder
+    }), className, `${CLASSNAME$2}--head`),
+    "aria-sort": ariaSort
+  }), /*#__PURE__*/React.createElement(Wrapper, _extends({
+    className: `${CLASSNAME$2}-wrapper`
+  }, wrapperProps), icon && !isSortable && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME$2}-icon`,
+    icon: icon,
+    size: Size.xxs
+  }), isSortable && sortOrder === ThOrder.asc && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME$2}-icon`,
+    icon: mdiArrowUp,
+    size: Size.xxs
+  }), isSortable && sortOrder === ThOrder.desc && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME$2}-icon`,
+    icon: mdiArrowDown,
+    size: Size.xxs
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME$2}-content`
+  }, children))), variant === TableCellVariant.body && /*#__PURE__*/React.createElement("td", _extends({}, forwardedProps, {
+    className: classNames(className, CLASSNAME$2, `${CLASSNAME$2}--body`)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME$2}-content`
+  }, children)));
+});
+TableCell.displayName = COMPONENT_NAME$2;
+TableCell.className = CLASSNAME$2;
+TableCell.defaultProps = DEFAULT_PROPS$2;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'TableHeader';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1, true);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$1 = {};
+
+/**
+ * TableHeader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableHeader = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement("thead", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, CLASSNAME$1)
+  }), children);
+});
+TableHeader.displayName = COMPONENT_NAME$1;
+TableHeader.className = CLASSNAME$1;
+TableHeader.defaultProps = DEFAULT_PROPS$1;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'TableRow';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * TableRow component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableRow = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    children,
+    className,
+    isClickable,
+    isSelected,
+    ...forwardedProps
+  } = otherProps;
+  return /*#__PURE__*/React.createElement("tr", _extends({
+    ref: ref,
+    tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      isClickable: isClickable && !isAnyDisabled,
+      isDisabled: isAnyDisabled,
+      isSelected: isSelected && !isAnyDisabled,
+      prefix: CLASSNAME
+    })),
+    "aria-disabled": isAnyDisabled
+  }), children);
+});
+TableRow.displayName = COMPONENT_NAME;
+TableRow.className = CLASSNAME;
+TableRow.defaultProps = DEFAULT_PROPS;
+
+export { Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, ThOrder };
+//# sourceMappingURL=table-fa198ee6.js.map