etudes 5.1.0 → 5.3.0

package/components/Accordion.js

@@ -0,0 +1,285 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import isDeepEqual from 'fast-deep-equal/react';
+import { forwardRef, useEffect, useRef } from 'react';
+import { Each } from '../operators/Each.js';
+import { asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
+import { Collection } from './Collection.js';
+import { FlatSVG } from './FlatSVG.js';
+/**
+ * A collection of selectable items laid out in sections in an accordion. Items
+ * are generated based on the provided `ItemComponent` while each section header
+ * is optionally provided by `HeaderComponent` or generated automatically.
+ */
+export const Accordion = forwardRef(({ children, style, autoCollapseSections = false, collapseIconSvg, expandedSectionIndices: externalExpandedSectionIndices, expandIconSvg, orientation = 'vertical', sectionPadding = 0, sections, selection: externalSelection, selectionMode = 'single', usesDefaultStyles = false, onActivateAt, onCollapseSectionAt, onDeselectAt, onExpandedSectionsChange, onExpandSectionAt, onHeaderCustomEvent, onItemCustomEvent, onSelectAt, onSelectionChange, HeaderComponent, ItemComponent, ...props }, ref) => {
+    const isSectionIndexOutOfRange = (sectionIndex) => {
+        if (sectionIndex >= sections.length)
+            return true;
+        if (sectionIndex < 0)
+            return true;
+        return false;
+    };
+    const isItemIndexOutOfRange = (itemIndex, sectionIndex) => {
+        if (isSectionIndexOutOfRange(sectionIndex))
+            return true;
+        const items = sections[sectionIndex].items;
+        if (itemIndex >= items.length)
+            return true;
+        if (itemIndex < 0)
+            return true;
+        return false;
+    };
+    const isSelectedAt = (itemIndex, sectionIndex) => (selection[sectionIndex]?.indexOf(itemIndex) ?? -1) >= 0;
+    const sanitizeExpandedSectionIndices = (sectionIndices) => sortIndices(sectionIndices).filter(t => !isSectionIndexOutOfRange(t));
+    const sanitizeSelection = (selection) => {
+        const newValue = {};
+        for (const sectionIndex in sections) {
+            if (!Object.hasOwn(sections, sectionIndex))
+                continue;
+            const indices = sortIndices([...selection[sectionIndex] ?? []]);
+            newValue[Number(sectionIndex)] = sortIndices(indices).filter(t => !isItemIndexOutOfRange(t, Number(sectionIndex)));
+        }
+        return newValue;
+    };
+    const isSectionExpandedAt = (sectionIndex) => expandedSectionIndices.indexOf(sectionIndex) >= 0;
+    const toggleSectionAt = (sectionIndex) => {
+        let transform;
+        if (isSectionExpandedAt(sectionIndex)) {
+            transform = val => val.filter(t => t !== sectionIndex);
+        }
+        else if (autoCollapseSections) {
+            transform = val => [sectionIndex];
+        }
+        else {
+            transform = val => [...val.filter(t => t !== sectionIndex), sectionIndex];
+        }
+        handleExpandedSectionsChange(expandedSectionIndices, transform(expandedSectionIndices));
+    };
+    const handleSelectAt = (itemIndex, sectionIndex) => {
+        if (isSelectedAt(itemIndex, sectionIndex))
+            return;
+        let transform;
+        switch (selectionMode) {
+            case 'multiple':
+                transform = val => ({
+                    ...val,
+                    [sectionIndex]: sortIndices([...(val[sectionIndex] ?? []).filter(t => t !== itemIndex), itemIndex]),
+                });
+                break;
+            case 'single':
+                transform = val => ({
+                    [sectionIndex]: [itemIndex],
+                });
+                break;
+            default:
+                return;
+        }
+        const newValue = transform(selection);
+        prevSelectionRef.current = newValue;
+        handleSelectionChange(selection, newValue);
+    };
+    const handleDeselectAt = (itemIndex, sectionIndex) => {
+        if (!isSelectedAt(itemIndex, sectionIndex))
+            return;
+        const transform = (val) => ({
+            ...val,
+            [sectionIndex]: (val[sectionIndex] ?? []).filter(t => t !== itemIndex),
+        });
+        const newValue = transform(selection);
+        prevSelectionRef.current = newValue;
+        handleSelectionChange(selection, newValue);
+    };
+    const handleExpandedSectionsChange = (oldValue, newValue) => {
+        if (isDeepEqual(oldValue, newValue))
+            return;
+        const collapsed = oldValue?.filter(t => newValue.indexOf(t) === -1) ?? [];
+        const expanded = newValue.filter(t => oldValue?.indexOf(t) === -1);
+        collapsed.forEach(t => onCollapseSectionAt?.(t));
+        expanded.forEach(t => onExpandSectionAt?.(t));
+        onExpandedSectionsChange?.(newValue);
+    };
+    const handleSelectionChange = (oldValue, newValue) => {
+        if (isDeepEqual(oldValue, newValue))
+            return;
+        const numSections = sections.length;
+        let allDeselected = [];
+        let allSelected = [];
+        for (let i = 0; i < numSections; i++) {
+            const oldSection = oldValue?.[i] ?? [];
+            const newSection = newValue[i] ?? [];
+            const deselected = oldSection.filter(t => newSection.indexOf(t) === -1);
+            const selected = newSection.filter(t => oldSection?.indexOf(t) === -1);
+            allDeselected = [...allDeselected, ...deselected.map(t => [t, i])];
+            allSelected = [...allSelected, ...selected.map(t => [t, i])];
+        }
+        allDeselected.forEach(t => onDeselectAt?.(t[0], t[1]));
+        allSelected.forEach(t => onSelectAt?.(t[0], t[1]));
+        onSelectionChange?.(newValue);
+    };
+    const selection = sanitizeSelection(externalSelection ?? {});
+    const expandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices ?? []);
+    const fixedStyles = getFixedStyles({ orientation });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation }) : undefined;
+    const prevSelectionRef = useRef();
+    const prevSelection = prevSelectionRef.current;
+    useEffect(() => {
+        prevSelectionRef.current = selection;
+        if (prevSelection === undefined)
+            return;
+        handleSelectionChange(prevSelection, selection);
+    }, [JSON.stringify(selection)]);
+    return (_jsx("div", { ...props, ref: ref, "data-component": 'accordion', style: styles(style, fixedStyles.root), children: _jsx(Each, { in: sections, children: (section, sectionIndex) => {
+                const { collectionPadding = 0, items, itemLength = 50, itemPadding = 0, isSelectionTogglable, layout = 'list', maxVisible = -1, numSegments = 1 } = section;
+                const allVisible = layout === 'list' ? items.length : Math.ceil(items.length / numSegments);
+                const numVisible = maxVisible < 0 ? allVisible : Math.min(allVisible, maxVisible);
+                const maxLength = itemLength * numVisible + itemPadding * (numVisible - 1);
+                const isCollapsed = !isSectionExpandedAt(sectionIndex);
+                const expandIconComponent = expandIconSvg ? _jsx(FlatSVG, { style: defaultStyles?.expandIcon, svg: expandIconSvg }) : _jsx(_Fragment, {});
+                const collapseIconComponent = collapseIconSvg ? _jsx(FlatSVG, { style: defaultStyles?.collapseIcon, svg: collapseIconSvg }) : expandIconComponent;
+                return (_jsxs("div", { style: styles(fixedStyles.section, orientation === 'vertical' ? {
+                        marginTop: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,
+                    } : {
+                        marginLeft: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,
+                    }), children: [HeaderComponent ? (_jsx(HeaderComponent, { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'header', index: sectionIndex, isCollapsed: isCollapsed, section: section, style: styles(fixedStyles.header), onClick: () => toggleSectionAt(sectionIndex), onCustomEvent: (name, info) => onHeaderCustomEvent?.(sectionIndex, name, info) })) : (_jsxs("button", { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'header', style: styles(fixedStyles.header, defaultStyles?.header), onClick: () => toggleSectionAt(sectionIndex), children: [_jsx("span", { dangerouslySetInnerHTML: { __html: section.label }, style: styles(defaultStyles?.headerLabel) }), cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {
+                                    style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
+                                })] })), _jsx(Collection, { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'collection', isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection[sectionIndex] ?? [], selectionMode: selectionMode, style: styles(fixedStyles.list, defaultStyles?.collection, orientation === 'vertical' ? {
+                                width: '100%',
+                                height: isCollapsed ? '0px' : `${maxLength}px`,
+                                marginTop: isCollapsed ? '0px' : `${collectionPadding}px`,
+                                overflowY: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
+                            } : {
+                                marginLeft: isCollapsed ? '0px' : `${collectionPadding}px`,
+                                overflowX: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
+                                width: isCollapsed ? '0px' : `${maxLength}px`,
+                                height: '100%',
+                            }), onActivateAt: itemIndex => {
+                                onActivateAt?.(itemIndex, sectionIndex);
+                            }, onDeselectAt: itemIndex => {
+                                handleDeselectAt?.(itemIndex, sectionIndex);
+                            }, onItemCustomEvent: (itemIndex, name, info) => {
+                                onItemCustomEvent?.(itemIndex, sectionIndex, name, info);
+                            }, onSelectAt: itemIndex => {
+                                handleSelectAt?.(itemIndex, sectionIndex);
+                            } })] }));
+            } }) }));
+});
+Object.defineProperty(Accordion, 'displayName', { value: 'Accordion', writable: false });
+function sortIndices(indices) {
+    return indices.sort((a, b) => a - b);
+}
+function getFixedStyles({ orientation = 'vertical' }) {
+    return asStyleDict({
+        root: {
+            alignItems: 'center',
+            boxSizing: 'border-box',
+            display: 'flex',
+            flex: '0 0 auto',
+            justifyContent: 'flex-start',
+            padding: '0',
+            ...orientation === 'vertical' ? {
+                flexDirection: 'column',
+                height: 'auto',
+            } : {
+                flexDirection: 'row',
+                width: 'auto',
+            },
+        },
+        section: {
+            alignItems: 'flex-start',
+            display: 'flex',
+            flex: '0 0 auto',
+            justifyContent: 'flex-start',
+            margin: '0',
+            padding: '0',
+            ...orientation === 'vertical' ? {
+                flexDirection: 'column',
+                width: '100%',
+            } : {
+                flexDirection: 'row',
+                height: '100%',
+            },
+        },
+        list: {},
+        header: {
+            cursor: 'pointer',
+            margin: '0',
+            ...orientation === 'vertical' ? {
+                width: '100%',
+            } : {
+                height: '100%',
+            },
+        },
+        expandIcon: {
+            margin: '0',
+            padding: '0',
+        },
+        collapseIcon: {
+            margin: '0',
+            padding: '0',
+        },
+    });
+}
+function getDefaultStyles({ orientation = 'vertical' }) {
+    return asStyleDict({
+        collection: {
+            transitionDuration: '100ms',
+            transitionTimingFunction: 'ease-out',
+            ...orientation === 'vertical' ? {
+                transitionProperty: 'height, margin',
+            } : {
+                transitionProperty: 'width, margin',
+            },
+        },
+        header: {
+            border: 'none',
+            outline: 'none',
+            alignItems: 'center',
+            background: '#fff',
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            padding: '0 10px',
+            transitionDuration: '100ms',
+            transitionProperty: 'transform, opacity, background, color',
+            transitionTimingFunction: 'ease-out',
+            ...orientation === 'vertical' ? {
+                height: '50px',
+            } : {
+                width: '50px',
+            },
+        },
+        headerLabel: {
+            color: 'inherit',
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            fontWeight: 'inherit',
+            letterSpacing: 'inherit',
+            lineHeight: 'inherit',
+            pointerEvents: 'none',
+            transition: 'inherit',
+        },
+        expandIcon: {
+            boxSizing: 'border-box',
+            display: 'block',
+            fill: '#000',
+            height: '15px',
+            transformOrigin: 'center',
+            transitionDuration: '100ms',
+            transitionProperty: 'transform',
+            transitionTimingFunction: 'ease-out',
+            width: '15px',
+        },
+        collapseIcon: {
+            boxSizing: 'border-box',
+            display: 'block',
+            fill: '#000',
+            height: '15px',
+            transformOrigin: 'center',
+            transitionDuration: '100ms',
+            transitionProperty: 'transform',
+            transitionTimingFunction: 'ease-out',
+            width: '15px',
+        },
+    });
+}

package/components/BurgerButton.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
+import { Repeat } from '../operators/Repeat.js';
+import { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
+/**
+ * Three-striped burger button component that transforms into an "X" when
+ * selected.
+ *
+ * @exports BurgerButtonBar Component for each line on the burger button.
+ */
+export const BurgerButton = forwardRef(({ children, className, style, height = 20, isActive: externalIsActive = false, isDoubleJointed = false, isLastBarHalfWidth = false, thickness = 2, transitionDuration = 200, usesDefaultStyles = false, width = 20, onActivate, onDeactivate, ...props }, ref) => {
+    const [isActive, setIsActive] = useState(externalIsActive);
+    useEffect(() => {
+        if (isActive === externalIsActive)
+            return;
+        setIsActive(externalIsActive);
+    }, [externalIsActive]);
+    useEffect(() => {
+        if (isActive) {
+            onActivate?.();
+        }
+        else {
+            onDeactivate?.();
+        }
+    }, [isActive]);
+    const components = asComponentDict(children, {
+        bar: BurgerButtonBar,
+    });
+    const fixedClassNames = asClassNameDict({
+        root: clsx({
+            active: isActive,
+        }),
+        bar: clsx({
+            active: isActive,
+        }),
+    });
+    const fixedStyles = getFixedStyles({ height, width, isDoubleJointed, thickness, isActive, isLastBarHalfWidth });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined;
+    return (_jsx("button", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), "data-component": 'burger-button', style: styles(style, fixedStyles.root), onClick: () => setIsActive(!isActive), children: _jsx(Repeat, { count: isDoubleJointed ? 2 : 1, children: j => (_jsx("div", { "data-child": 'joint', style: styles(fixedStyles.joint, fixedStyles[`joint${j}`]), children: _jsx(Repeat, { count: 3, children: i => cloneStyledElement(components.bar ?? _jsx(BurgerButtonBar, { style: defaultStyles?.bar }), {
+                        'className': clsx(fixedClassNames.bar),
+                        'style': styles(fixedStyles.bar, fixedStyles[`bar${j}${i}`]),
+                        'data-index': i,
+                    }) }) })) }) }));
+});
+Object.defineProperty(BurgerButton, 'displayName', { value: 'BurgerButton', writable: false });
+export const BurgerButtonBar = ({ ...props }) => _jsx("span", { ...props, "data-child": 'bar' });
+function getFixedStyles({ height = 0, width = 0, isDoubleJointed = false, thickness = 0, isActive = false, isLastBarHalfWidth = false }) {
+    return asStyleDict({
+        root: {
+            background: 'transparent',
+            border: 'none',
+            display: 'block',
+            height: `${height}px`,
+            outline: 'none',
+            width: `${width}px`,
+        },
+        joint: {
+            height: '100%',
+            position: 'absolute',
+            width: isDoubleJointed ? '50%' : '100%',
+        },
+        joint0: {
+            left: '0',
+            top: '0',
+        },
+        joint1: {
+            right: '0',
+            top: '0',
+        },
+        bar: {
+            height: `${thickness}px`,
+            margin: '0',
+            padding: '0',
+            position: 'absolute',
+            width: '100%',
+        },
+        bar00: {
+            left: '0',
+            top: '0',
+            transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
+            transformOrigin: isDoubleJointed ? 'right center' : 'center',
+        },
+        bar01: {
+            left: '0',
+            top: `${height * 0.5 - thickness * 0.5}px`,
+            transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',
+            transformOrigin: isDoubleJointed ? 'right center' : 'center',
+        },
+        bar02: {
+            left: '0',
+            top: `${height - thickness}px`,
+            transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
+            transformOrigin: isDoubleJointed ? 'right center' : 'center',
+            width: isActive || isDoubleJointed ? '100%' : `${isLastBarHalfWidth ? '50%' : '100%'}`,
+        },
+        bar10: {
+            left: '0',
+            top: '0',
+            transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
+            transformOrigin: 'left center',
+        },
+        bar11: {
+            left: '0',
+            top: `${height * 0.5 - thickness * 0.5}px`,
+            transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',
+            transformOrigin: 'left center',
+        },
+        bar12: {
+            left: '0',
+            top: `${height - thickness}px`,
+            transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
+            transformOrigin: 'left center',
+            width: isLastBarHalfWidth && !isActive ? '0' : '100%',
+        },
+    });
+}
+function getDefaultStyles() {
+    return asStyleDict({
+        bar: {
+            background: '#fff',
+            transitionDuration: '100ms',
+            transitionProperty: 'width, height, transform, opacity, background',
+            transitionTimingFunction: 'ease-out',
+        },
+    });
+}

package/components/Carousel.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Point, Rect } from 'spase';
+import { useDragEffect } from '../hooks/useDragEffect.js';
+import { useTimeout } from '../hooks/useTimeout.js';
+import { Each } from '../operators/Each.js';
+import { asStyleDict, styles } from '../utils/index.js';
+export const Carousel = forwardRef(({ style, autoAdvanceInterval = 0, index = 0, isDragEnabled = true, items = [], orientation = 'horizontal', tracksItemExposure = false, onAutoAdvancePause, onAutoAdvanceResume, onIndexChange, ItemComponent, ...props }, ref) => {
+    const getItemExposures = () => {
+        const viewportElement = viewportRef.current;
+        if (!viewportElement)
+            return undefined;
+        const exposures = [];
+        for (let i = 0; i < viewportElement.children.length; i++) {
+            exposures.push(getItemExposureAt(i));
+        }
+        return exposures;
+    };
+    const getItemExposureAt = (idx) => {
+        const viewportElement = viewportRef.current;
+        const child = viewportElement?.children[idx];
+        if (!child)
+            return 0;
+        const intersection = Rect.intersecting(child, viewportElement);
+        if (!intersection)
+            return 0;
+        switch (orientation) {
+            case 'horizontal':
+                return Math.max(0, Math.min(1, Math.round((intersection.width / viewportElement.clientWidth + Number.EPSILON) * 1000) / 1000));
+            case 'vertical':
+                return Math.max(0, Math.min(1, Math.round((intersection.height / viewportElement.clientHeight + Number.EPSILON) * 1000) / 1000));
+            default:
+                throw new Error(`Unsupported orientation '${orientation}'`);
+        }
+    };
+    const handleIndexChange = (newValue) => {
+        onIndexChange?.(newValue);
+    };
+    const handlePointerDown = (event) => {
+        pointerDownPositionRef.current = new Point([event.clientX, event.clientY]);
+        setIsPointerDown(true);
+    };
+    const handlePointerUp = (event) => {
+        pointerUpPositionRef.current = new Point([event.clientX, event.clientY]);
+        setIsPointerDown(false);
+    };
+    const handleClick = (event) => {
+        const downPosition = pointerDownPositionRef.current;
+        const upPosition = pointerUpPositionRef.current;
+        if (!downPosition || !upPosition)
+            return;
+        const threshold = 5;
+        const delta = downPosition.subtract(upPosition);
+        if (Math.abs(delta.x) > threshold || Math.abs(delta.y) > threshold) {
+            event.stopPropagation();
+        }
+        pointerDownPositionRef.current = undefined;
+        pointerUpPositionRef.current = undefined;
+    };
+    const autoScrollToCurrentIndex = () => {
+        const viewportElement = viewportRef.current;
+        if (!viewportElement)
+            return;
+        const top = orientation === 'horizontal' ? 0 : viewportElement.clientHeight * index;
+        const left = orientation === 'horizontal' ? viewportElement.clientWidth * index : 0;
+        viewportElement.scrollTo({ top, left, behavior: 'smooth' });
+        clearTimeout(autoScrollTimeoutRef.current);
+        autoScrollTimeoutRef.current = setTimeout(() => {
+            clearTimeout(autoScrollTimeoutRef.current);
+            autoScrollTimeoutRef.current = undefined;
+        }, autoScrollTimeoutMs);
+    };
+    const prevIndexRef = useRef();
+    const viewportRef = useRef(null);
+    const pointerDownPositionRef = useRef();
+    const pointerUpPositionRef = useRef();
+    const [exposures, setExposures] = useState(getItemExposures());
+    const autoScrollTimeoutRef = useRef();
+    const autoScrollTimeoutMs = 1000;
+    const [isPointerDown, setIsPointerDown] = useState(false);
+    useEffect(() => {
+        const viewportElement = viewportRef.current;
+        if (!viewportElement)
+            return;
+        const scrollHandler = () => {
+            if (tracksItemExposure) {
+                setExposures(getItemExposures());
+            }
+            if (autoScrollTimeoutRef.current !== undefined)
+                return;
+            const newIndex = orientation === 'horizontal'
+                ? Math.round(viewportElement.scrollLeft / viewportElement.clientWidth)
+                : Math.round(viewportElement.scrollTop / viewportElement.clientHeight);
+            const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex));
+            if (clampedIndex === index)
+                return;
+            // Set previous index ref here to avoid the side-effect of handling index
+            // changes from prop/state.
+            prevIndexRef.current = clampedIndex;
+            handleIndexChange(clampedIndex);
+        };
+        viewportElement.addEventListener('scroll', scrollHandler);
+        return () => {
+            viewportElement.removeEventListener('scroll', scrollHandler);
+        };
+    }, [index, orientation]);
+    useEffect(() => {
+        const isInitialRender = prevIndexRef.current === undefined;
+        const isIndexModifiedFromManualScrolling = prevIndexRef.current === index;
+        if (isIndexModifiedFromManualScrolling)
+            return;
+        prevIndexRef.current = index;
+        if (isInitialRender)
+            return;
+        handleIndexChange(index);
+        autoScrollToCurrentIndex();
+    }, [index, orientation]);
+    useEffect(() => {
+        if (autoAdvanceInterval <= 0)
+            return;
+        if (isPointerDown) {
+            onAutoAdvancePause?.();
+        }
+        else {
+            onAutoAdvanceResume?.();
+        }
+    }, [isPointerDown]);
+    useDragEffect(viewportRef, {
+        isEnabled: isDragEnabled && items.length > 1,
+        onDragMove: (displacement) => {
+            switch (orientation) {
+                case 'horizontal':
+                    requestAnimationFrame(() => {
+                        if (!viewportRef.current)
+                            return;
+                        viewportRef.current.scrollLeft += displacement.x * 1.5;
+                    });
+                    break;
+                case 'vertical':
+                    requestAnimationFrame(() => {
+                        if (!viewportRef.current)
+                            return;
+                        viewportRef.current.scrollTop += displacement.y * 1.5;
+                    });
+                    break;
+                default:
+                    throw Error(`Unsupported orientation '${orientation}'`);
+            }
+        },
+    });
+    useTimeout(() => handleIndexChange((index + items.length + 1) % items.length), (isPointerDown || autoAdvanceInterval <= 0) ? -1 : autoAdvanceInterval, [isPointerDown, index, items.length]);
+    const fixedStyles = getFixedStyles({ isPointerDown, orientation });
+    return (_jsx("div", { ...props, ref: ref, "data-component": 'carousel', style: styles(style, fixedStyles.root), onClick: event => handleClick(event), onPointerDown: event => handlePointerDown(event), onPointerLeave: event => handlePointerUp(event), onPointerUp: event => handlePointerUp(event), children: _jsx("div", { ref: viewportRef, "data-child": 'viewport', style: styles(fixedStyles.viewport), children: _jsx(Each, { in: items, children: ({ style: itemStyle, ...itemProps }, idx) => (_jsx("div", { style: styles(fixedStyles.itemContainer), children: _jsx(ItemComponent, { "data-child": 'item', exposure: tracksItemExposure ? exposures?.[idx] : undefined, style: styles(itemStyle, fixedStyles.item), ...itemProps }) })) }) }) }));
+});
+Object.defineProperty(Carousel, 'displayName', { value: 'Carousel', writable: false });
+function getFixedStyles({ isPointerDown = false, orientation = 'horizontal' }) {
+    return asStyleDict({
+        root: {},
+        viewport: {
+            alignItems: 'center',
+            display: 'flex',
+            height: '100%',
+            userSelect: isPointerDown ? 'none' : 'auto',
+            justifyContent: 'flex-start',
+            scrollBehavior: isPointerDown ? 'auto' : 'smooth',
+            scrollSnapStop: isPointerDown ? 'unset' : 'always',
+            WebkitOverflowScrolling: 'touch',
+            width: '100%',
+            ...orientation === 'horizontal' ? {
+                flexDirection: 'row',
+                overflowX: 'scroll',
+                overflowY: 'hidden',
+                scrollSnapType: isPointerDown ? 'none' : 'x mandatory',
+            } : {
+                flexDirection: 'column',
+                overflowX: 'hidden',
+                overflowY: 'scroll',
+                scrollSnapType: isPointerDown ? 'none' : 'y mandatory',
+            },
+        },
+        itemContainer: {
+            height: '100%',
+            overflow: 'hidden',
+            scrollSnapAlign: 'start',
+            width: '100%',
+            scrollBehavior: 'smooth',
+        },
+        item: {
+            flex: '0 0 auto',
+            height: '100%',
+            width: '100%',
+        },
+    });
+}