@expofp/ui 3.21.0

package/dist/components/Overlay/Overlay.js

@@ -0,0 +1,251 @@
+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

@@ -0,0 +1,7 @@
+/**
+ * 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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,4 @@
+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

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

package/dist/components/OverlayGrip/OverlayGrip.d.ts

@@ -0,0 +1,11 @@
+import './OverlayGrip.scss';
+import React from 'react';
+export interface OverlayGripProps {
+    isFull: boolean;
+    onToggle: () => void;
+    ariaLabel: string;
+    className?: string;
+}
+declare const OverlayGrip: ({ isFull, onToggle, ariaLabel, className }: OverlayGripProps) => React.JSX.Element;
+export default OverlayGrip;
+//# sourceMappingURL=OverlayGrip.d.ts.map

package/dist/components/OverlayGrip/OverlayGrip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './OverlayGrip.scss';
+import cn from 'classnames';
+const OverlayGrip = ({ isFull, onToggle, ariaLabel, className }) => {
+    return (_jsx("button", { type: "button", className: cn('efp-overlay-grip', { 'efp-overlay-grip--full': isFull }, className), onClick: onToggle, "aria-label": ariaLabel, "aria-expanded": isFull, children: _jsxs("svg", { viewBox: "0 0 1200 200", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [_jsx("path", { d: "M100,100 l 500 100 L 1100 100" }), _jsx("path", { d: "M100,150 l 500 0 L 1100 150" })] }) }));
+};
+export default OverlayGrip;

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

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

package/dist/components/OverlayGrip/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable simple-import-sort/exports */
+export { default } from './OverlayGrip';

package/dist/components/PermissionNotice/PermissionNotice.d.ts

@@ -0,0 +1,16 @@
+import './PermissionNotice.scss';
+import React from 'react';
+export type PermissionNoticePlacement = 'bottom-right' | 'bottom-left';
+export interface PermissionNoticeProps {
+    title: string;
+    acceptText: string;
+    rejectText: string;
+    children: React.ReactNode;
+    placement?: PermissionNoticePlacement;
+    onAccept?: () => void;
+    onReject?: () => void;
+    className?: string;
+}
+declare const PermissionNotice: ({ title, acceptText, rejectText, children, placement, onAccept, onReject, className, }: PermissionNoticeProps) => React.JSX.Element;
+export default PermissionNotice;
+//# sourceMappingURL=PermissionNotice.d.ts.map

package/dist/components/PermissionNotice/PermissionNotice.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './PermissionNotice.scss';
+import cn from 'classnames';
+import { useId } from 'react';
+import Button from '../Button';
+const PermissionNotice = ({ title, acceptText, rejectText, children, placement = 'bottom-right', onAccept, onReject, className, }) => {
+    const titleId = useId();
+    const descId = useId();
+    return (_jsxs("div", { className: cn('efp-permission-notice', `efp-permission-notice--${placement}`, className), role: "dialog", "aria-labelledby": titleId, "aria-describedby": descId, children: [_jsx("div", { className: "efp-permission-notice__title", id: titleId, children: title }), _jsx("div", { className: "efp-permission-notice__text", id: descId, children: children }), _jsxs("div", { className: "efp-permission-notice__bottom", children: [_jsx(Button, { size: "md", onClick: onAccept, children: acceptText }), _jsx(Button, { size: "md", variant: "gray", onClick: onReject, children: rejectText })] })] }));
+};
+export default PermissionNotice;

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

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

package/dist/components/PermissionNotice/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable simple-import-sort/exports */
+export { default } from './PermissionNotice';

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,15 @@
+import './Radio.scss';
+import React from 'react';
+export interface RadioProps {
+    name: string;
+    label: string;
+    value: string | number;
+    checked?: boolean;
+    disabled?: boolean;
+    className?: string;
+    ariaLabel?: string;
+    onChange?: () => void;
+}
+declare const Radio: ({ name, label, value, checked, disabled, className, ariaLabel, onChange, }: RadioProps) => React.JSX.Element;
+export default Radio;
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/Radio/Radio.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './Radio.scss';
+import classNames from 'classnames';
+import { useId } from 'react';
+const Radio = ({ name, label, value, checked, disabled, className, ariaLabel, onChange, }) => {
+    const id = useId();
+    return (_jsxs("label", { htmlFor: id, className: classNames('efp-radio', className, {
+            'efp-radio--checked': checked,
+            'efp-radio--disabled': disabled,
+        }), children: [_jsx("input", { type: "radio", className: "efp-radio__input", id: id, name: name, value: value, checked: checked, disabled: disabled, "aria-label": ariaLabel, onChange: onChange }), _jsx("span", { className: "efp-radio__control", "aria-hidden": "true" }), _jsx("span", { className: "efp-radio__label", children: label })] }));
+};
+export default Radio;

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

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

package/dist/components/Radio/index.js

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

package/dist/components/RebookingNotes/RebookingNotes.d.ts

@@ -0,0 +1,11 @@
+import './RebookingNotes.scss';
+export interface RebookingNotesProps {
+    value?: string;
+    noteLabel: string;
+    saveButtonLabel: string;
+    saveButtonAriaLabel: string;
+    onSave: (value: string) => void;
+}
+declare const RebookingNotes: ({ value, noteLabel, saveButtonLabel, saveButtonAriaLabel, onSave, }: RebookingNotesProps) => import("react").JSX.Element;
+export default RebookingNotes;
+//# sourceMappingURL=RebookingNotes.d.ts.map

package/dist/components/RebookingNotes/RebookingNotes.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './RebookingNotes.scss';
+import { useId, useState } from 'react';
+import Button from '../Button';
+const RebookingNotes = ({ value, noteLabel, saveButtonLabel, saveButtonAriaLabel, onSave, }) => {
+    const id = useId();
+    const labelId = `${id}-label`;
+    const textareaId = `${id}-textarea`;
+    // Uncontrolled editing buffer seeded from `value`; consumers reset it by remounting via `key`
+    // (see RebookingNotesContainer usage). Committed to the parent only on save.
+    const [internalValue, setInternalValue] = useState(value ?? '');
+    const handleChange = (event) => setInternalValue(event.target.value);
+    const handleSave = () => {
+        onSave(internalValue);
+    };
+    return (_jsxs("div", { className: "rebooking-notes", children: [_jsx("div", { className: "rebooking-notes__view-header", children: _jsx("strong", { id: labelId, children: noteLabel }) }), _jsxs("div", { className: "rebooking-notes__edit", children: [_jsx("div", { className: "rebooking-notes__val", children: _jsx("textarea", { id: textareaId, value: internalValue, onChange: handleChange, "aria-labelledby": labelId }) }), _jsx("div", { className: "rebooking-notes__buttons", children: _jsx(Button, { inline: true, onClick: handleSave, disabled: (value ?? '') === internalValue, "aria-label": saveButtonAriaLabel, children: saveButtonLabel }) })] })] }));
+};
+export default RebookingNotes;

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

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

package/dist/components/RebookingNotes/index.js

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

package/dist/components/RebookingRadioGroup/RebookingRadioGroup.d.ts

@@ -0,0 +1,17 @@
+import './RebookingRadioGroup.scss';
+export interface RebookingOption {
+    value: string;
+    label: string;
+    iconName?: string;
+    disabled?: boolean;
+    color: string;
+}
+export interface RebookingRadioGroupProps {
+    options: RebookingOption[];
+    value: string;
+    title?: string;
+    onChange: (value: string) => void;
+}
+declare const RebookingRadioGroup: ({ options, value, title, onChange }: RebookingRadioGroupProps) => import("react").JSX.Element;
+export default RebookingRadioGroup;
+//# sourceMappingURL=RebookingRadioGroup.d.ts.map

package/dist/components/RebookingRadioGroup/RebookingRadioGroup.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './RebookingRadioGroup.scss';
+import { useId } from 'react';
+const RebookingRadioGroup = ({ options, value, title, onChange }) => {
+    const idPrefix = useId();
+    return (_jsxs("div", { className: "rebooking-radio-group", children: [title && _jsx("div", { className: "rebooking-radio-group__title", children: title }), _jsx("div", { className: "rebooking-radio-group__options", children: options.map((option) => {
+                    const optionId = `${idPrefix}-${option.value}`;
+                    return (_jsxs("div", { className: "rebooking-radio", style: {
+                            '--rebooking-color-primary': option.color,
+                        }, children: [_jsx("input", { type: "radio", name: idPrefix, value: option.value, id: optionId, checked: option.value === value, disabled: option.disabled, onChange: () => onChange(option.value) }), _jsxs("label", { htmlFor: optionId, children: [_jsx("div", { className: "rebooking-radio__label", children: option.label }), _jsx("div", { className: "rebooking-radio__icon", children: _jsx("i", { className: option.iconName, "aria-hidden": "true" }) })] })] }, option.value));
+                }) })] }));
+};
+export default RebookingRadioGroup;

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

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

package/dist/components/RebookingRadioGroup/index.js

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

package/dist/components/ScrollableRow/ScrollableRow.d.ts

@@ -0,0 +1,21 @@
+import './ScrollableRow.scss';
+import React, { ReactNode } from 'react';
+export interface ScrollableRowProps {
+    children: ReactNode;
+    ariaLabel: string;
+    leftAriaLabel: string;
+    rightAriaLabel: string;
+    className?: string;
+    scrollAmount?: number;
+    mobileBreakpoint?: number;
+    showArrowsOnMobile?: boolean;
+    arrowPosition?: 'inside' | 'outside';
+    scrollBehavior?: 'smooth' | 'auto';
+    isRtl?: boolean;
+    enableDragScroll?: boolean;
+    dragScrollSensitivity?: number;
+    onScroll?: (scrollLeft: number) => void;
+}
+declare const ScrollableRow: ({ children, ariaLabel, leftAriaLabel, rightAriaLabel, className, scrollAmount, mobileBreakpoint, showArrowsOnMobile, arrowPosition, scrollBehavior, isRtl, enableDragScroll, dragScrollSensitivity, onScroll, }: ScrollableRowProps) => React.JSX.Element;
+export default ScrollableRow;
+//# sourceMappingURL=ScrollableRow.d.ts.map

package/dist/components/ScrollableRow/ScrollableRow.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/consistent-type-imports, @eslint-react/set-state-in-effect */
+import './ScrollableRow.scss';
+import cn from 'classnames';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ResizeObserver } from 'resize-observer';
+import { isInteractiveTarget } from '../../shared/interactive';
+const SCROLL_THRESHOLD = 5;
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+const ScrollableRow = ({ children, ariaLabel, leftAriaLabel, rightAriaLabel, className, scrollAmount = 150, mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT, showArrowsOnMobile = false, arrowPosition = 'inside', scrollBehavior = 'smooth', isRtl = false, enableDragScroll = true, dragScrollSensitivity = 1, onScroll, }) => {
+    const containerRef = useRef(null);
+    const scrollRef = useRef(null);
+    const resizeObserverRef = useRef(null);
+    const [showLeftArrow, setShowLeftArrow] = useState(false);
+    const [showRightArrow, setShowRightArrow] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [startX, setStartX] = useState(0);
+    const [dragStartScrollLeft, setDragStartScrollLeft] = useState(0);
+    const isDesktop = useCallback(() => {
+        return (window.innerWidth > mobileBreakpoint &&
+            !('ontouchstart' in window || navigator.maxTouchPoints > 0));
+    }, [mobileBreakpoint]);
+    const normalizeRTLScroll = useCallback((scrollLeft, scrollWidth, clientWidth) => {
+        const maxScroll = scrollWidth - clientWidth;
+        if (scrollLeft < 0) {
+            return Math.abs(scrollLeft);
+        }
+        else if (scrollLeft > maxScroll / 2) {
+            return maxScroll - scrollLeft;
+        }
+        return scrollLeft;
+    }, []);
+    const checkArrows = useCallback(() => {
+        const scrollEl = scrollRef.current;
+        if (!scrollEl)
+            return;
+        const isMobile = window.innerWidth <= mobileBreakpoint;
+        if (isMobile && !showArrowsOnMobile) {
+            setShowLeftArrow(false);
+            setShowRightArrow(false);
+            return;
+        }
+        const { scrollLeft, scrollWidth, clientWidth } = scrollEl;
+        const hasOverflow = scrollWidth > clientWidth;
+        if (!hasOverflow) {
+            setShowLeftArrow(false);
+            setShowRightArrow(false);
+            return;
+        }
+        if (isRtl) {
+            const maxScroll = scrollWidth - clientWidth;
+            const normalizedScroll = normalizeRTLScroll(scrollLeft, scrollWidth, clientWidth);
+            setShowLeftArrow(normalizedScroll > SCROLL_THRESHOLD);
+            setShowRightArrow(normalizedScroll < maxScroll - SCROLL_THRESHOLD);
+        }
+        else {
+            setShowLeftArrow(scrollLeft > SCROLL_THRESHOLD);
+            setShowRightArrow(scrollLeft < scrollWidth - clientWidth - SCROLL_THRESHOLD);
+        }
+    }, [mobileBreakpoint, showArrowsOnMobile, normalizeRTLScroll, isRtl]);
+    const handleScroll = useCallback(() => {
+        checkArrows();
+        if (onScroll && scrollRef.current) {
+            onScroll(scrollRef.current.scrollLeft);
+        }
+    }, [checkArrows, onScroll]);
+    const scroll = useCallback((direction) => {
+        const scrollEl = scrollRef.current;
+        if (!scrollEl)
+            return;
+        const currentScroll = scrollEl.scrollLeft;
+        let newScroll;
+        if (isRtl) {
+            const maxScrollLeft = -(scrollEl.scrollWidth - scrollEl.clientWidth);
+            newScroll =
+                direction === 'left'
+                    ? Math.min(0, currentScroll + scrollAmount)
+                    : Math.max(maxScrollLeft, currentScroll - scrollAmount);
+        }
+        else {
+            newScroll =
+                direction === 'left'
+                    ? Math.max(0, currentScroll - scrollAmount)
+                    : currentScroll + scrollAmount;
+        }
+        scrollEl.scrollTo({
+            left: newScroll,
+            behavior: scrollBehavior,
+        });
+    }, [scrollAmount, scrollBehavior, isRtl]);
+    const handleMouseDown = useCallback((e) => {
+        if (!enableDragScroll || !isDesktop() || !scrollRef.current)
+            return;
+        if (isInteractiveTarget(e.target))
+            return;
+        setIsDragging(true);
+        setStartX(e.pageX - scrollRef.current.offsetLeft);
+        setDragStartScrollLeft(scrollRef.current.scrollLeft);
+        e.preventDefault();
+    }, [enableDragScroll, isDesktop]);
+    const handleMouseMove = useCallback((e) => {
+        if (!isDragging || !scrollRef.current)
+            return;
+        e.preventDefault();
+        const x = e.pageX - scrollRef.current.offsetLeft;
+        const walk = (x - startX) * dragScrollSensitivity;
+        scrollRef.current.scrollLeft = dragStartScrollLeft - walk;
+    }, [isDragging, startX, dragStartScrollLeft, dragScrollSensitivity]);
+    const endDrag = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', endDrag);
+        document.addEventListener('mouseleave', endDrag);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', endDrag);
+            document.removeEventListener('mouseleave', endDrag);
+        };
+    }, [isDragging, handleMouseMove, endDrag]);
+    useEffect(() => {
+        checkArrows();
+        const handleResize = () => checkArrows();
+        window.addEventListener('resize', handleResize);
+        if (containerRef.current && !resizeObserverRef.current) {
+            resizeObserverRef.current = new ResizeObserver(checkArrows);
+            resizeObserverRef.current.observe(containerRef.current);
+        }
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+                resizeObserverRef.current = null;
+            }
+        };
+    }, [checkArrows]);
+    const showDragCursor = enableDragScroll && isDesktop();
+    const cursorStyle = showDragCursor ? (isDragging ? 'grabbing' : 'grab') : undefined;
+    return (_jsx("div", { ref: containerRef, className: cn('efp-scrollable-row', className), role: "group", "aria-label": ariaLabel, children: _jsxs("div", { className: cn('efp-scrollable-row__container', {
+                [`efp-scrollable-row__container--${arrowPosition}`]: arrowPosition,
+            }), children: [showLeftArrow && (_jsx("button", { type: "button", className: cn('efp-scrollable-row__arrow', 'efp-scrollable-row__arrow--left', {
+                        'efp-scrollable-row__arrow--rtl': isRtl,
+                    }), onClick: () => scroll('left'), "aria-label": leftAriaLabel, children: _jsx("i", { className: "icon-chevron-left" }) })), _jsx("div", { ref: scrollRef, className: cn('efp-scrollable-row__scroll-wrapper', {
+                        'efp-scrollable-row__scroll-wrapper--dragging': isDragging,
+                    }), onScroll: handleScroll, onMouseDown: handleMouseDown, style: {
+                        cursor: cursorStyle,
+                        userSelect: isDragging ? 'none' : undefined,
+                    }, children: _jsx("div", { className: "efp-scrollable-row__content", children: children }) }), showRightArrow && (_jsx("button", { type: "button", className: cn('efp-scrollable-row__arrow', 'efp-scrollable-row__arrow--right', {
+                        'efp-scrollable-row__arrow--rtl': isRtl,
+                    }), onClick: () => scroll('right'), "aria-label": rightAriaLabel, children: _jsx("i", { className: "icon-chevron-right" }) }))] }) }));
+};
+export default ScrollableRow;