@expofp/ui 3.21.0 → 3.22.0

package/dist/components/Gallery/index.d.ts

@@ -1,3 +0,0 @@
-export type { GalleryImage, GalleryProps } from './Gallery';
-export { default } from './Gallery';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Gallery/index.js

@@ -1 +0,0 @@
-export { default } from './Gallery';

package/dist/components/Overlay/Overlay.d.ts

@@ -1,29 +0,0 @@
-import './Overlay.scss';
-import { type ReactNode } from 'react';
-export type Size = 'small' | 'medium' | 'full';
-export interface OverlayProps {
-    children?: ReactNode;
-    open: boolean;
-    size?: Size;
-    /** Slot rendered above the content (e.g. a particles canvas); nothing when omitted. */
-    particles?: ReactNode;
-    className?: string;
-    smallSizeMultiplier?: number;
-    mediumSizeMultiplier?: number;
-    fullSizeOffset?: number;
-    scrollThreshold?: number;
-    disableDrag?: boolean;
-    forceFull?: boolean;
-    scrollResetKey?: unknown;
-    /** Viewport width (px) at or below which the overlay switches to its mobile bottom-sheet mode. */
-    mobileBreakpoint?: number;
-    /** Shown when `children` is empty. */
-    noContentLabel: string;
-    onChangeSize?: (size: Size) => void;
-    onScrollStateChange?: (isScrolled: boolean) => void;
-    /** Fired (debounced) on scroll — lets the host react to user activity. */
-    onScrollActivity?: () => void;
-}
-declare const Overlay: ({ children, open, size, particles, className, onChangeSize, onScrollStateChange, onScrollActivity, smallSizeMultiplier, mediumSizeMultiplier, fullSizeOffset, scrollThreshold, disableDrag, forceFull, scrollResetKey, mobileBreakpoint, noContentLabel, }: OverlayProps) => import("react").JSX.Element | null;
-export default Overlay;
-//# sourceMappingURL=Overlay.d.ts.map

package/dist/components/Overlay/Overlay.js

@@ -1,251 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './Overlay.scss';
-import cn from 'classnames';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import debounce from '../../shared/debounce';
-import { useDragGesture } from '../../shared/hooks/useDragGesture';
-import { useWindowSize } from '../../shared/hooks/useWindowSize';
-import { OverlayScrollContext } from './OverlayScrollContext';
-const GAP = 70;
-const TRANSITION_DURATION = '0.3s';
-const DEFAULT_SCROLL_THRESHOLD = 10;
-const DEFAULT_MOBILE_BREAKPOINT = 768;
-const getActualViewportHeight = () => {
-    const isInIframe = window !== window.top;
-    if (isInIframe) {
-        return (document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight);
-    }
-    return window.innerHeight;
-};
-const generateSizes = (height = getActualViewportHeight(), smallMultiplier, mediumMultiplier, fullSizeOffset) => ({
-    small: height / smallMultiplier,
-    medium: height / mediumMultiplier,
-    full: height - fullSizeOffset,
-});
-const Overlay = ({ children, open, size = 'medium', particles, className, onChangeSize, onScrollStateChange, onScrollActivity, smallSizeMultiplier = 12.6, mediumSizeMultiplier = 2.6, fullSizeOffset = 0, scrollThreshold = DEFAULT_SCROLL_THRESHOLD, disableDrag = false, forceFull = false, scrollResetKey, mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT, noContentLabel, }) => {
-    const { width: windowWidth, height: windowHeight } = useWindowSize();
-    // Pure derivations of the window size — computed in render, not stored/synced via an effect.
-    const mobile = windowWidth <= mobileBreakpoint;
-    const sizes = useMemo(() => generateSizes(windowHeight, smallSizeMultiplier, mediumSizeMultiplier, fullSizeOffset), [windowHeight, smallSizeMultiplier, mediumSizeMultiplier, fullSizeOffset]);
-    const [dragging, setDragging] = useState(false);
-    const [panelHeight, setPanelHeight] = useState(() => sizes[size]);
-    const [overlayHeight, setOverlayHeight] = useState(() => sizes[size]);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const [shouldRender, setShouldRender] = useState(open);
-    const [isScrolled, setIsScrolled] = useState(false);
-    const touchStartRef = useRef(undefined);
-    const dragOffsetRef = useRef(undefined);
-    const overlayPanelRef = useRef(null);
-    const triggerRef = useRef(null);
-    const scrollRef = useRef(null);
-    // Mirror frequently-changing values into refs so the drag callbacks can stay
-    // identity-stable and the listener effect subscribes only when mobile/disableDrag change.
-    const sizesRef = useRef(sizes);
-    const panelHeightRef = useRef(panelHeight);
-    const overlayHeightRef = useRef(overlayHeight);
-    const draggingRef = useRef(dragging);
-    const sizeRef = useRef(size);
-    useEffect(() => {
-        sizesRef.current = sizes;
-        panelHeightRef.current = panelHeight;
-        overlayHeightRef.current = overlayHeight;
-        draggingRef.current = dragging;
-        sizeRef.current = size;
-    });
-    const setSize = useCallback((newSize) => {
-        const height = sizesRef.current[newSize];
-        setPanelHeight(height);
-        setOverlayHeight(height);
-        onChangeSize?.(newSize);
-    }, [onChangeSize]);
-    const positioningStyles = useMemo(() => {
-        if (mobile) {
-            if (forceFull && open) {
-                return { height: getActualViewportHeight() };
-            }
-            return {
-                height: open || isAnimating ? overlayHeight : 0,
-            };
-        }
-        return {
-            height: open ? 'auto' : undefined,
-        };
-    }, [mobile, open, overlayHeight, isAnimating, forceFull]);
-    const setSizeByValue = useCallback((heightVal) => {
-        const sizes = sizesRef.current;
-        const sizesArray = [sizes.small, sizes.medium, sizes.full].sort();
-        if (heightVal >= sizes.full) {
-            setSize('full');
-            return;
-        }
-        if (heightVal <= sizes.small) {
-            setSize('small');
-            return;
-        }
-        const currentHeight = panelHeightRef.current || sizes.medium;
-        const targetSize = heightVal > currentHeight
-            ? (sizesArray.find((val) => val + GAP >= heightVal) ?? sizes.full)
-            : (sizesArray.reverse().find((val) => val - GAP <= heightVal) ?? sizes.small);
-        if (targetSize === sizes.full) {
-            setSize('full');
-        }
-        else if (targetSize === sizes.medium) {
-            setSize('medium');
-        }
-        else {
-            setSize('small');
-        }
-    }, [setSize]);
-    const handleDragStart = useCallback((clientY) => {
-        setDragging(true);
-        touchStartRef.current = clientY;
-    }, []);
-    const handleDragMove = useCallback((clientY) => {
-        const touchStart = touchStartRef.current;
-        if (touchStart === undefined)
-            return;
-        const sizes = sizesRef.current;
-        const panelHeight = panelHeightRef.current;
-        const scrollEl = scrollRef.current;
-        if ((scrollEl?.scrollTop ?? 0) > 0 && panelHeight === sizes.full)
-            return;
-        const offset = touchStart - clientY;
-        const currentHeight = panelHeight || sizes.medium;
-        let nextHeight = currentHeight + offset;
-        if (scrollEl && panelHeight === sizes.full && nextHeight < panelHeight) {
-            scrollEl.style.overflow = 'hidden';
-        }
-        nextHeight = Math.min(Math.max(nextHeight, sizes.small), sizes.full);
-        dragOffsetRef.current = offset;
-        overlayHeightRef.current = nextHeight;
-        setOverlayHeight(nextHeight);
-    }, []);
-    const handleDragEnd = useCallback(() => {
-        setDragging(false);
-        touchStartRef.current = undefined;
-        const scrollEl = scrollRef.current;
-        if (scrollEl) {
-            scrollEl.style.removeProperty('overflow');
-        }
-        const dragOffset = dragOffsetRef.current;
-        dragOffsetRef.current = undefined;
-        const finalHeight = overlayHeightRef.current;
-        if (dragOffset !== undefined && finalHeight !== undefined) {
-            setSizeByValue(finalHeight);
-        }
-    }, [setSizeByValue]);
-    const handleTriggerClick = useCallback(() => {
-        if (draggingRef.current)
-            return;
-        const currentSize = sizeRef.current;
-        const nextSize = currentSize === 'small' ? 'medium' : currentSize === 'medium' ? 'full' : 'small';
-        setSize(nextSize);
-    }, [setSize]);
-    const { touchHandlers, mouseHandlers } = useDragGesture({
-        onDragStart: handleDragStart,
-        onDragMove: handleDragMove,
-        onDragEnd: handleDragEnd,
-    });
-    const handleScroll = useCallback(() => {
-        const scrollEl = scrollRef.current;
-        if (!scrollEl)
-            return;
-        const scrollTop = scrollEl.scrollTop;
-        const shouldAddClass = scrollTop >= scrollThreshold;
-        if (isScrolled !== shouldAddClass) {
-            setIsScrolled(shouldAddClass);
-            onScrollStateChange?.(shouldAddClass);
-        }
-    }, [scrollThreshold, isScrolled, onScrollStateChange]);
-    const debouncedScrollActivity = useMemo(() => debounce(() => {
-        onScrollActivity?.();
-    }, 250), [onScrollActivity]);
-    useEffect(() => {
-        if (!mobile || disableDrag)
-            return;
-        const overlayEl = overlayPanelRef.current;
-        const triggerEl = triggerRef.current;
-        const scrollEl = scrollRef.current;
-        const preventOverscroll = () => {
-            const panelHeight = panelHeightRef.current;
-            if (panelHeight && panelHeight < sizesRef.current.full && scrollEl) {
-                scrollEl.style.overflow = 'hidden';
-            }
-        };
-        if (overlayEl) {
-            overlayEl.addEventListener('touchstart', touchHandlers.onTouchStart);
-            overlayEl.addEventListener('touchend', touchHandlers.onTouchEnd);
-            window.addEventListener('touchmove', touchHandlers.onTouchMove);
-            overlayEl.addEventListener('mousedown', mouseHandlers.onMouseDown);
-            overlayEl.addEventListener('mouseup', mouseHandlers.onMouseUp);
-            window.addEventListener('mousemove', mouseHandlers.onMouseMove);
-        }
-        if (triggerEl) {
-            triggerEl.addEventListener('mouseup', handleTriggerClick);
-        }
-        if (scrollEl) {
-            scrollEl.addEventListener('touchstart', preventOverscroll);
-        }
-        return () => {
-            if (overlayEl) {
-                overlayEl.removeEventListener('touchstart', touchHandlers.onTouchStart);
-                overlayEl.removeEventListener('touchend', touchHandlers.onTouchEnd);
-                window.removeEventListener('touchmove', touchHandlers.onTouchMove);
-                overlayEl.removeEventListener('mousedown', mouseHandlers.onMouseDown);
-                overlayEl.removeEventListener('mouseup', mouseHandlers.onMouseUp);
-                window.removeEventListener('mousemove', mouseHandlers.onMouseMove);
-            }
-            if (triggerEl) {
-                triggerEl.removeEventListener('mouseup', handleTriggerClick);
-            }
-            if (scrollEl) {
-                scrollEl.removeEventListener('touchstart', preventOverscroll);
-            }
-        };
-    }, [mobile, disableDrag, touchHandlers, mouseHandlers, handleTriggerClick]);
-    useEffect(() => {
-        if (open) {
-            setShouldRender(true);
-            setIsAnimating(true);
-            const timer = setTimeout(() => {
-                setSize(size);
-                setIsAnimating(false);
-            }, 10);
-            return () => clearTimeout(timer);
-        }
-        else {
-            setIsAnimating(true);
-            if (mobile) {
-                setOverlayHeight(0);
-            }
-            const timer = setTimeout(() => {
-                setShouldRender(false);
-                setIsAnimating(false);
-                setIsScrolled(false);
-            }, parseFloat(TRANSITION_DURATION) * 1000);
-            return () => clearTimeout(timer);
-        }
-    }, [open, size, setSize, mobile]);
-    useEffect(() => {
-        if (open && !isAnimating) {
-            scrollRef.current?.scrollTo({ top: 0 });
-            setIsScrolled(false);
-            onScrollStateChange?.(false);
-        }
-    }, [open, isAnimating, onScrollStateChange, scrollResetKey]);
-    if (!shouldRender)
-        return null;
-    return (_jsx(OverlayScrollContext, { value: scrollRef.current, children: _jsxs("div", { className: cn('efp-overlay', {
-                'efp-overlay--draggable': dragging,
-                'efp-overlay--full': size === 'full',
-                'efp-overlay--mobile': mobile,
-                'efp-overlay--desktop': !mobile,
-                'efp-overlay--hidden': !mobile && !open,
-                'efp-overlay--scrolled': isScrolled,
-                'efp-overlay--forced-full': forceFull && mobile,
-            }, className), style: positioningStyles, ref: overlayPanelRef, children: [!disableDrag && _jsx("div", { className: "efp-overlay__draghandle", ref: triggerRef }), _jsxs("div", { className: "efp-overlay__scroll", ref: scrollRef, onScroll: () => {
-                        handleScroll();
-                        debouncedScrollActivity();
-                    }, children: [particles, _jsx("div", { className: "efp-overlay__content", children: children ? children : noContentLabel })] })] }) }));
-};
-export default Overlay;

package/dist/components/Overlay/OverlayScrollContext.d.ts

@@ -1,7 +0,0 @@
-/**
- * Exposes the overlay's inner scroll container to descendants so they can
- * observe / drive it (e.g. a virtualized list syncing its scroll position).
- * Provided by {@link Overlay}; `null` when rendered outside an overlay.
- */
-export declare const OverlayScrollContext: import("react").Context<HTMLDivElement | null>;
-//# sourceMappingURL=OverlayScrollContext.d.ts.map

package/dist/components/Overlay/OverlayScrollContext.js

@@ -1,7 +0,0 @@
-import { createContext } from 'react';
-/**
- * Exposes the overlay's inner scroll container to descendants so they can
- * observe / drive it (e.g. a virtualized list syncing its scroll position).
- * Provided by {@link Overlay}; `null` when rendered outside an overlay.
- */
-export const OverlayScrollContext = createContext(null);

package/dist/components/Overlay/index.d.ts

@@ -1,4 +0,0 @@
-export type { OverlayProps, Size } from './Overlay';
-export { default } from './Overlay';
-export { OverlayScrollContext } from './OverlayScrollContext';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Overlay/index.js

@@ -1,2 +0,0 @@
-export { default } from './Overlay';
-export { OverlayScrollContext } from './OverlayScrollContext';

package/dist/shared/debounce.d.ts

@@ -1,2 +0,0 @@
-export default function debounce<Params extends unknown[]>(func: (...args: Params) => unknown, timeoutMs: number): (...args: Params) => void;
-//# sourceMappingURL=debounce.d.ts.map

package/dist/shared/debounce.js

@@ -1,9 +0,0 @@
-export default function debounce(func, timeoutMs) {
-    let timer;
-    return (...args) => {
-        clearTimeout(timer);
-        timer = setTimeout(() => {
-            func(...args);
-        }, timeoutMs);
-    };
-}

package/dist/shared/hooks/useDragGesture.d.ts

@@ -1,19 +0,0 @@
-interface DragGestureConfig {
-    onDragStart: (clientY: number) => void;
-    onDragMove: (clientY: number) => void;
-    onDragEnd: () => void;
-}
-export declare const useDragGesture: ({ onDragStart, onDragMove, onDragEnd }: DragGestureConfig) => {
-    touchHandlers: {
-        onTouchStart: (event: TouchEvent) => void;
-        onTouchMove: (event: TouchEvent) => void;
-        onTouchEnd: () => void;
-    };
-    mouseHandlers: {
-        onMouseDown: (event: MouseEvent) => void;
-        onMouseMove: (event: MouseEvent) => void;
-        onMouseUp: () => void;
-    };
-};
-export {};
-//# sourceMappingURL=useDragGesture.d.ts.map

package/dist/shared/hooks/useDragGesture.js

@@ -1,45 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-export const useDragGesture = ({ onDragStart, onDragMove, onDragEnd }) => {
-    const isDraggingRef = useRef(false);
-    const handleTouchStart = useCallback((event) => {
-        isDraggingRef.current = true;
-        onDragStart(event.touches[0].clientY);
-    }, [onDragStart]);
-    const handleTouchMove = useCallback((event) => {
-        if (!isDraggingRef.current)
-            return;
-        onDragMove(event.touches[0].clientY);
-    }, [onDragMove]);
-    const handleTouchEnd = useCallback(() => {
-        if (!isDraggingRef.current)
-            return;
-        isDraggingRef.current = false;
-        onDragEnd();
-    }, [onDragEnd]);
-    const handleMouseStart = useCallback((event) => {
-        isDraggingRef.current = true;
-        onDragStart(event.clientY);
-    }, [onDragStart]);
-    const handleMouseMove = useCallback((event) => {
-        if (!isDraggingRef.current)
-            return;
-        onDragMove(event.clientY);
-    }, [onDragMove]);
-    const handleMouseEnd = useCallback(() => {
-        if (!isDraggingRef.current)
-            return;
-        isDraggingRef.current = false;
-        onDragEnd();
-    }, [onDragEnd]);
-    const touchHandlers = useMemo(() => ({
-        onTouchStart: handleTouchStart,
-        onTouchMove: handleTouchMove,
-        onTouchEnd: handleTouchEnd,
-    }), [handleTouchStart, handleTouchMove, handleTouchEnd]);
-    const mouseHandlers = useMemo(() => ({
-        onMouseDown: handleMouseStart,
-        onMouseMove: handleMouseMove,
-        onMouseUp: handleMouseEnd,
-    }), [handleMouseStart, handleMouseMove, handleMouseEnd]);
-    return { touchHandlers, mouseHandlers };
-};

package/dist/shared/hooks/useWindowSize.d.ts

@@ -1,5 +0,0 @@
-export declare const useWindowSize: () => {
-    width: number;
-    height: number;
-};
-//# sourceMappingURL=useWindowSize.d.ts.map

package/dist/shared/hooks/useWindowSize.js

@@ -1,40 +0,0 @@
-import { useEffect, useState } from 'react';
-export const useWindowSize = () => {
-    const [windowSize, setWindowSize] = useState(() => {
-        const isInIframe = window !== window.top;
-        if (isInIframe) {
-            return {
-                width: document.documentElement.clientWidth || window.innerWidth,
-                height: document.documentElement.clientHeight || window.innerHeight,
-            };
-        }
-        return {
-            width: window.innerWidth,
-            height: window.innerHeight,
-        };
-    });
-    useEffect(() => {
-        const handleResize = () => {
-            const isInIframe = window !== window.top;
-            if (isInIframe) {
-                setWindowSize({
-                    width: document.documentElement.clientWidth || window.innerWidth,
-                    height: document.documentElement.clientHeight || window.innerHeight,
-                });
-            }
-            else {
-                setWindowSize({
-                    width: window.innerWidth,
-                    height: window.innerHeight,
-                });
-            }
-        };
-        window.addEventListener('resize', handleResize);
-        window.addEventListener('orientationchange', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-            window.removeEventListener('orientationchange', handleResize);
-        };
-    }, []);
-    return windowSize;
-};