@arc-ui/components 12.0.0-beta.5 → 12.0.0-beta7

package/dist/Carousel/Carousel.cjs.js

@@ -0,0 +1,457 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_es = require('../_shared/cjs/index.es-c26e8978.js');
+var React = require('react');
+var index = require('../_shared/cjs/index-9947ac13.js');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-7f537bd2.js');
+var useMediaQuery = require('../_shared/cjs/use-media-query-d34c83b9.js');
+require('../_shared/cjs/Surface-1b5c2ac8.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const LEFT = "Left";
+const RIGHT = "Right";
+const UP = "Up";
+const DOWN = "Down";
+
+/* global document */
+const defaultProps = {
+    delta: 10,
+    preventScrollOnSwipe: false,
+    rotationAngle: 0,
+    trackMouse: false,
+    trackTouch: true,
+    swipeDuration: Infinity,
+    touchEventOptions: { passive: true },
+};
+const initialState = {
+    first: true,
+    initial: [0, 0],
+    start: 0,
+    swiping: false,
+    xy: [0, 0],
+};
+const mouseMove = "mousemove";
+const mouseUp = "mouseup";
+const touchEnd = "touchend";
+const touchMove = "touchmove";
+const touchStart = "touchstart";
+function getDirection(absX, absY, deltaX, deltaY) {
+    if (absX > absY) {
+        if (deltaX > 0) {
+            return RIGHT;
+        }
+        return LEFT;
+    }
+    else if (deltaY > 0) {
+        return DOWN;
+    }
+    return UP;
+}
+function rotateXYByAngle(pos, angle) {
+    if (angle === 0)
+        return pos;
+    const angleInRadians = (Math.PI / 180) * angle;
+    const x = pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);
+    const y = pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);
+    return [x, y];
+}
+function getHandlers(set, handlerProps) {
+    const onStart = (event) => {
+        const isTouch = "touches" in event;
+        // if more than a single touch don't track, for now...
+        if (isTouch && event.touches.length > 1)
+            return;
+        set((state, props) => {
+            // setup mouse listeners on document to track swipe since swipe can leave container
+            if (props.trackMouse && !isTouch) {
+                document.addEventListener(mouseMove, onMove);
+                document.addEventListener(mouseUp, onUp);
+            }
+            const { clientX, clientY } = isTouch ? event.touches[0] : event;
+            const xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
+            props.onTouchStartOrOnMouseDown &&
+                props.onTouchStartOrOnMouseDown({ event });
+            return Object.assign(Object.assign(Object.assign({}, state), initialState), { initial: xy.slice(), xy, start: event.timeStamp || 0 });
+        });
+    };
+    const onMove = (event) => {
+        set((state, props) => {
+            const isTouch = "touches" in event;
+            // Discount a swipe if additional touches are present after
+            // a swipe has started.
+            if (isTouch && event.touches.length > 1) {
+                return state;
+            }
+            // if swipe has exceeded duration stop tracking
+            if (event.timeStamp - state.start > props.swipeDuration) {
+                return state.swiping ? Object.assign(Object.assign({}, state), { swiping: false }) : state;
+            }
+            const { clientX, clientY } = isTouch ? event.touches[0] : event;
+            const [x, y] = rotateXYByAngle([clientX, clientY], props.rotationAngle);
+            const deltaX = x - state.xy[0];
+            const deltaY = y - state.xy[1];
+            const absX = Math.abs(deltaX);
+            const absY = Math.abs(deltaY);
+            const time = (event.timeStamp || 0) - state.start;
+            const velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
+            const vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
+            const dir = getDirection(absX, absY, deltaX, deltaY);
+            // if swipe is under delta and we have not started to track a swipe: skip update
+            const delta = typeof props.delta === "number"
+                ? props.delta
+                : props.delta[dir.toLowerCase()] ||
+                    defaultProps.delta;
+            if (absX < delta && absY < delta && !state.swiping)
+                return state;
+            const eventData = {
+                absX,
+                absY,
+                deltaX,
+                deltaY,
+                dir,
+                event,
+                first: state.first,
+                initial: state.initial,
+                velocity,
+                vxvy,
+            };
+            // call onSwipeStart if present and is first swipe event
+            eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
+            // call onSwiping if present
+            props.onSwiping && props.onSwiping(eventData);
+            // track if a swipe is cancelable (handler for swiping or swiped(dir) exists)
+            // so we can call preventDefault if needed
+            let cancelablePageSwipe = false;
+            if (props.onSwiping ||
+                props.onSwiped ||
+                props[`onSwiped${dir}`]) {
+                cancelablePageSwipe = true;
+            }
+            if (cancelablePageSwipe &&
+                props.preventScrollOnSwipe &&
+                props.trackTouch &&
+                event.cancelable) {
+                event.preventDefault();
+            }
+            return Object.assign(Object.assign({}, state), { 
+                // first is now always false
+                first: false, eventData, swiping: true });
+        });
+    };
+    const onEnd = (event) => {
+        set((state, props) => {
+            let eventData;
+            if (state.swiping && state.eventData) {
+                // if swipe is less than duration fire swiped callbacks
+                if (event.timeStamp - state.start < props.swipeDuration) {
+                    eventData = Object.assign(Object.assign({}, state.eventData), { event });
+                    props.onSwiped && props.onSwiped(eventData);
+                    const onSwipedDir = props[`onSwiped${eventData.dir}`];
+                    onSwipedDir && onSwipedDir(eventData);
+                }
+            }
+            else {
+                props.onTap && props.onTap({ event });
+            }
+            props.onTouchEndOrOnMouseUp && props.onTouchEndOrOnMouseUp({ event });
+            return Object.assign(Object.assign(Object.assign({}, state), initialState), { eventData });
+        });
+    };
+    const cleanUpMouse = () => {
+        // safe to just call removeEventListener
+        document.removeEventListener(mouseMove, onMove);
+        document.removeEventListener(mouseUp, onUp);
+    };
+    const onUp = (e) => {
+        cleanUpMouse();
+        onEnd(e);
+    };
+    /**
+     * The value of passive on touchMove depends on `preventScrollOnSwipe`:
+     * - true => { passive: false }
+     * - false => { passive: true } // Default
+     *
+     * NOTE: When preventScrollOnSwipe is true, we attempt to call preventDefault to prevent scroll.
+     *
+     * props.touchEventOptions can also be set for all touch event listeners,
+     * but for `touchmove` specifically when `preventScrollOnSwipe` it will
+     * supersede and force passive to false.
+     *
+     */
+    const attachTouch = (el, props) => {
+        let cleanup = () => { };
+        if (el && el.addEventListener) {
+            const baseOptions = Object.assign(Object.assign({}, defaultProps.touchEventOptions), props.touchEventOptions);
+            // attach touch event listeners and handlers
+            const tls = [
+                [touchStart, onStart, baseOptions],
+                // preventScrollOnSwipe option supersedes touchEventOptions.passive
+                [
+                    touchMove,
+                    onMove,
+                    Object.assign(Object.assign({}, baseOptions), (props.preventScrollOnSwipe ? { passive: false } : {})),
+                ],
+                [touchEnd, onEnd, baseOptions],
+            ];
+            tls.forEach(([e, h, o]) => el.addEventListener(e, h, o));
+            // return properly scoped cleanup method for removing listeners, options not required
+            cleanup = () => tls.forEach(([e, h]) => el.removeEventListener(e, h));
+        }
+        return cleanup;
+    };
+    const onRef = (el) => {
+        // "inline" ref functions are called twice on render, once with null then again with DOM element
+        // ignore null here
+        if (el === null)
+            return;
+        set((state, props) => {
+            // if the same DOM el as previous just return state
+            if (state.el === el)
+                return state;
+            const addState = {};
+            // if new DOM el clean up old DOM and reset cleanUpTouch
+            if (state.el && state.el !== el && state.cleanUpTouch) {
+                state.cleanUpTouch();
+                addState.cleanUpTouch = void 0;
+            }
+            // only attach if we want to track touch
+            if (props.trackTouch && el) {
+                addState.cleanUpTouch = attachTouch(el, props);
+            }
+            // store event attached DOM el for comparison, clean up, and re-attachment
+            return Object.assign(Object.assign(Object.assign({}, state), { el }), addState);
+        });
+    };
+    // set ref callback to attach touch event listeners
+    const output = {
+        ref: onRef,
+    };
+    // if track mouse attach mouse down listener
+    if (handlerProps.trackMouse) {
+        output.onMouseDown = onStart;
+    }
+    return [output, attachTouch];
+}
+function updateTransientState(state, props, previousProps, attachTouch) {
+    // if trackTouch is off or there is no el, then remove handlers if necessary and exit
+    if (!props.trackTouch || !state.el) {
+        if (state.cleanUpTouch) {
+            state.cleanUpTouch();
+        }
+        return Object.assign(Object.assign({}, state), { cleanUpTouch: undefined });
+    }
+    // trackTouch is on, so if there are no handlers attached, attach them and exit
+    if (!state.cleanUpTouch) {
+        return Object.assign(Object.assign({}, state), { cleanUpTouch: attachTouch(state.el, props) });
+    }
+    // trackTouch is on and handlers are already attached, so if preventScrollOnSwipe changes value,
+    // remove and reattach handlers (this is required to update the passive option when attaching
+    // the handlers)
+    if (props.preventScrollOnSwipe !== previousProps.preventScrollOnSwipe ||
+        props.touchEventOptions.passive !== previousProps.touchEventOptions.passive) {
+        state.cleanUpTouch();
+        return Object.assign(Object.assign({}, state), { cleanUpTouch: attachTouch(state.el, props) });
+    }
+    return state;
+}
+function useSwipeable(options) {
+    const { trackMouse } = options;
+    const transientState = React__namespace.useRef(Object.assign({}, initialState));
+    const transientProps = React__namespace.useRef(Object.assign({}, defaultProps));
+    // track previous rendered props
+    const previousProps = React__namespace.useRef(Object.assign({}, transientProps.current));
+    previousProps.current = Object.assign({}, transientProps.current);
+    // update current render props & defaults
+    transientProps.current = Object.assign(Object.assign({}, defaultProps), options);
+    // Force defaults for config properties
+    let defaultKey;
+    for (defaultKey in defaultProps) {
+        if (transientProps.current[defaultKey] === void 0) {
+            transientProps.current[defaultKey] = defaultProps[defaultKey];
+        }
+    }
+    const [handlers, attachTouch] = React__namespace.useMemo(() => getHandlers((stateSetter) => (transientState.current = stateSetter(transientState.current, transientProps.current)), { trackMouse }), [trackMouse]);
+    transientState.current = updateTransientState(transientState.current, transientProps.current, previousProps.current, attachTouch);
+    return handlers;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 25 Oct 2024 08:31:13 GMT
+ */
+var ArcSizeBreakpointsXs = "320px";
+var ArcSizeBreakpointsS = "636px";
+var ArcSizeBreakpointsM = "768px";
+var ArcSizeBreakpointsL = "1024px";
+var ArcSizeBreakpointsXl = "1280px";
+
+var isSlideHidden = function (slides, visibleSlideIndex, itemId) {
+    return slides.length ? !slides[visibleSlideIndex].itemIds.includes(itemId) : false;
+};
+
+var isLastSlide = function (slides, visibleSlideIndex) {
+    return slides.length === 0 ? true : visibleSlideIndex === slides.length - 1;
+};
+
+var getSliderPosition = function (_a) {
+    var slides = _a.slides, visibleSlideIndex = _a.visibleSlideIndex, slideWidth = _a.slideWidth, widthAdjustment = _a.widthAdjustment;
+    return slides.length
+        ? slides[visibleSlideIndex].itemsToScroll * slideWidth -
+            (isLastSlide(slides, visibleSlideIndex) ? widthAdjustment : 0)
+        : 0;
+};
+
+var getSlideConfig = function (screenSizes, slideAmount, itemsPerSlide, partialVisible, responsive) {
+    var responsiveConfig = responsive &&
+        Object.keys(screenSizes)
+            .reverse()
+            .find(function (size) {
+            return responsive && screenSizes[size] && responsive[size];
+        });
+    return responsiveConfig
+        ? responsive[responsiveConfig]
+        : { slideAmount: slideAmount, itemsPerSlide: itemsPerSlide, partialVisible: partialVisible };
+};
+
+var useSlides = function (_a) {
+    var children = _a.children, itemsPerSlide = _a.itemsPerSlide, partialVisible = _a.partialVisible, slideAmount = _a.slideAmount, responsive = _a.responsive, screenSizes = _a.screenSizes;
+    return React.useMemo(function () {
+        var slideConfig = getSlideConfig(screenSizes, slideAmount, itemsPerSlide, partialVisible, responsive);
+        var totalItems = React__default["default"].Children.count(children);
+        var itemsPerView = slideConfig.itemsPerSlide > totalItems
+            ? totalItems
+            : Math.max(1, slideConfig.itemsPerSlide);
+        var widthAdjustment = slideConfig.partialVisible ? 10 : 0;
+        var slideWidth = (100 - widthAdjustment) / itemsPerView;
+        var slideIncrement = Math.max(1, slideConfig.slideAmount > totalItems
+            ? totalItems
+            : slideConfig.slideAmount);
+        var itemsToScroll = totalItems - itemsPerView;
+        var slideCount = itemsToScroll > 0 ? Math.ceil(itemsToScroll / slideIncrement + 1) : 0;
+        var slides = Array.from({ length: slideCount }, function (_, slideIndex) {
+            var itemIds = Array.from({ length: itemsPerView }, function (_, i) { return i + slideIndex * slideIncrement; });
+            var filteredItems = itemIds.filter(function (id) { return id < totalItems; });
+            var hasFilteredItems = filteredItems.length < itemsPerView;
+            var getScrollAmount = function () {
+                return (slideIndex * slideIncrement -
+                    (hasFilteredItems ? itemsPerView - filteredItems.length : 0));
+            };
+            return {
+                itemsToScroll: getScrollAmount(),
+                itemIds: hasFilteredItems
+                    ? itemIds.map(function (id) { return id - (slideConfig.itemsPerSlide - filteredItems.length); })
+                    : itemIds
+            };
+        });
+        return {
+            slides: slides,
+            slideWidth: slideWidth,
+            widthAdjustment: widthAdjustment
+        };
+    }, [
+        children,
+        itemsPerSlide,
+        partialVisible,
+        slideAmount,
+        responsive,
+        screenSizes,
+    ]);
+};
+
+var Carousel = function (_a) {
+    var children = _a.children, responsive = _a.responsive, _b = _a.slideAmount, slideAmount = _b === void 0 ? 1 : _b, _c = _a.itemsPerSlide, itemsPerSlide = _c === void 0 ? 1 : _c, _d = _a.withGutter, withGutter = _d === void 0 ? true : _d, _e = _a.partialVisible, partialVisible = _e === void 0 ? false : _e;
+    var id = React.useId();
+    var _f = React.useState(0), visibleSlideIndex = _f[0], setVisibleSlideIndex = _f[1];
+    var isMinWidthArcBreakpointXs = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsXs, ")"));
+    var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
+    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
+    var isMinWidthArcBreakpointXl = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsXl, ")"));
+    var handlers = useSwipeable({
+        onSwipedLeft: function () {
+            !isLastSlide(slides, visibleSlideIndex) &&
+                setVisibleSlideIndex(visibleSlideIndex + 1);
+        },
+        onSwipedRight: function () {
+            visibleSlideIndex > 0 && setVisibleSlideIndex(visibleSlideIndex - 1);
+        }
+    });
+    var _g = useSlides({
+        children: children,
+        partialVisible: partialVisible,
+        slideAmount: slideAmount,
+        itemsPerSlide: itemsPerSlide,
+        responsive: responsive,
+        screenSizes: {
+            xs: isMinWidthArcBreakpointXs,
+            s: isMinWidthArcBreakpointS,
+            m: isMinWidthArcBreakpointM,
+            l: isMinWidthArcBreakpointL,
+            xl: isMinWidthArcBreakpointXl
+        }
+    }), slides = _g.slides, slideWidth = _g.slideWidth, widthAdjustment = _g.widthAdjustment;
+    React.useEffect(function () {
+        setVisibleSlideIndex(0);
+    }, [
+        isMinWidthArcBreakpointXs,
+        isMinWidthArcBreakpointS,
+        isMinWidthArcBreakpointM,
+        isMinWidthArcBreakpointL,
+        isMinWidthArcBreakpointXl,
+    ]);
+    var currentSlideIndex = Math.min(slides.length - 1, visibleSlideIndex);
+    var sliderPosition = getSliderPosition({
+        slides: slides,
+        slideWidth: slideWidth,
+        widthAdjustment: widthAdjustment,
+        visibleSlideIndex: currentSlideIndex
+    });
+    return (React__default["default"].createElement("div", { className: "arc-Carousel" },
+        React__default["default"].createElement("div", { className: "arc-Carousel-nav" },
+            React__default["default"].createElement("button", { className: index.classNames("arc-Carousel-navButton", {
+                    "arc-Carousel-navButton--hidden": visibleSlideIndex === 0
+                }), onClick: function () { return setVisibleSlideIndex(visibleSlideIndex - 1); }, "aria-label": "Show slide ".concat(visibleSlideIndex) },
+                React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "carouselLeft" })),
+            React__default["default"].createElement("div", { className: "arc-Carousel-dotContainer", role: "tablist" }, slides.map(function (_, i) { return (React__default["default"].createElement("button", { className: index.classNames("arc-Carousel-dot", {
+                    "arc-Carousel-dot--selected": visibleSlideIndex === i
+                }), onClick: function () { return setVisibleSlideIndex(i); }, "aria-selected": visibleSlideIndex === i, key: "".concat(id, "-dot-").concat(i), role: "tab", "aria-label": "Show slide ".concat(i + 1) })); })),
+            React__default["default"].createElement("button", { className: index.classNames("arc-Carousel-navButton", {
+                    "arc-Carousel-navButton--hidden": isLastSlide(slides, visibleSlideIndex)
+                }), onClick: function () { return setVisibleSlideIndex(visibleSlideIndex + 1); }, "aria-label": "Show slide ".concat(visibleSlideIndex + 2) },
+                React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "carouselRight" }))),
+        React__default["default"].createElement("div", { className: "arc-Carousel-outer" },
+            React__default["default"].createElement("div", { className: index.classNames("arc-Carousel-inner", {
+                    "arc-Carousel-inner--gutterless": !withGutter
+                }) },
+                React__default["default"].createElement("div", index_es.__assign({ className: index.classNames("arc-Carousel-slider", {
+                        "arc-Carousel-slider--gutter": withGutter
+                    }), style: {
+                        transform: "translateX(-".concat(sliderPosition, "%)")
+                    }, role: "region", "aria-roledescription": "carousel" }, handlers), React__default["default"].Children.map(children, function (child, i) { return (React__default["default"].createElement("div", { style: { flex: "0 0 ".concat(slideWidth, "%"), width: "".concat(slideWidth, "%") }, className: "arc-Carousel-item", key: "".concat(id, "-option-").concat(i), role: "group", "aria-hidden": isSlideHidden(slides, currentSlideIndex, i), "aria-roledescription": "slide" }, child)); }))))));
+};
+
+exports.Carousel = Carousel;