@lifesg/react-design-system 3.4.0-canary.4 → 3.4.0-canary.6

package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n    TransformComponent,\n    TransformWrapper,\n} from \"react-zoom-pan-pinch\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { useEventListener } from \"../util\";\nimport {\n    ArrowButton,\n    BoxChip,\n    CarouselModalContent,\n    Chip,\n    CloseButton,\n    DeleteButton,\n    FileInfoFileName,\n    FileInfoFileSize,\n    FileInfoTextWrapper,\n    FocusableImageRegion,\n    ImageGalleryContainer,\n    ImageGallerySlide,\n    ImageGallerySlides,\n    ImageGallerySwipe,\n    ImageGalleryWrapper,\n    MagnifierButton,\n    SlideImage,\n    SlidePlaceholderImage,\n    ThumbnailContainer,\n    ThumbnailImage,\n    ThumbnailItem,\n    ThumbnailItemContainer,\n    ThumbnailWrapper,\n    TopActionButtons,\n} from \"./fullscreen-image-carousel.style\";\nimport {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <ImageGallerySlides\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <ImageGallerySlide key={index} data-testid=\"slide-item\">\n                            <FocusableImageRegion\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <SlideImage\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <SlidePlaceholderImage />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </FocusableImageRegion>\n                        </ImageGallerySlide>\n                    );\n                })}\n            </ImageGallerySlides>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <FileInfoTextWrapper\n                $centerContent={!trimmedSize}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <FileInfoFileName\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </FileInfoFileName>\n                )}\n                {trimmedSize && (\n                    <FileInfoFileSize data-testid=\"file-info-size\">\n                        {trimmedSize}\n                    </FileInfoFileSize>\n                )}\n            </FileInfoTextWrapper>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <ThumbnailContainer\n                $insetBottom={insets?.bottom}\n                aria-hidden=\"true\"\n            >\n                <ThumbnailWrapper>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <ThumbnailItemContainer key={index}>\n                                <ThumbnailItem\n                                    data-testid=\"thumbnail-item\"\n                                    $active={index === currentSlide}\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <ThumbnailImage\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )}\n                                </ThumbnailItem>\n                            </ThumbnailItemContainer>\n                        );\n                    })}\n                </ThumbnailWrapper>\n            </ThumbnailContainer>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <CarouselModalContent>\n                <ImageGalleryContainer>\n                    <ImageGalleryWrapper>\n                        <ImageGallerySwipe\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </ImageGallerySwipe>\n\n                        {!hideNavigation && (\n                            <>\n                                <ArrowButton\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    $position=\"left\"\n                                    onClick={goToPrevSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ArrowButton>\n                                <ArrowButton\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    $position=\"right\"\n                                    onClick={goToNextSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ArrowButton>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <BoxChip aria-hidden=\"true\">\n                                <Chip weight=\"semibold\">{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Chip>\n                            </BoxChip>\n                        )}\n                    </ImageGalleryWrapper>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </ImageGalleryContainer>\n                <TopActionButtons\n                    $hasFileInfo={hasFileInfo}\n                    $insetTop={insets?.top}\n                    $insetLeft={insets?.left}\n                    $insetRight={insets?.right}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <MagnifierButton\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </MagnifierButton>\n                    )}\n\n                    {onDelete && (\n                        <DeleteButton\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </DeleteButton>\n                    )}\n\n                    <CloseButton\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </CloseButton>\n                </TopActionButtons>\n            </CarouselModalContent>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","children","_jsxs","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","ImageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","ImageGallerySlide","FocusableImageRegion","tabIndex","renderContent","SlidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","SlideImage","placeholder","fit","retrieveImageDimension","_Fragment","ArrowButton","$position","onClick","$insetLeft","left","$insetRight","right","ChevronLeftIcon","ChevronRightIcon","BoxChip","Chip","weight","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","TopActionButtons","$hasFileInfo","$insetTop","top","trimmedName","trimmedSize","FileInfoTextWrapper","FileInfoFileName","FileInfoFileSize","renderFileInfo","MagnifierButton","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","DeleteButton","BinIcon","CloseButton","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n    TransformComponent,\n    TransformWrapper,\n} from \"react-zoom-pan-pinch\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { useEventListener } from \"../util\";\nimport {\n    ArrowButton,\n    BoxChip,\n    CarouselModalContent,\n    Chip,\n    CloseButton,\n    DeleteButton,\n    FileInfoFileName,\n    FileInfoFileSize,\n    FileInfoTextWrapper,\n    FocusableImageRegion,\n    ImageGalleryContainer,\n    ImageGallerySlide,\n    ImageGallerySlides,\n    ImageGallerySwipe,\n    ImageGalleryWrapper,\n    MagnifierButton,\n    SlideImage,\n    SlidePlaceholderImage,\n    ThumbnailContainer,\n    ThumbnailImage,\n    ThumbnailItem,\n    ThumbnailItemContainer,\n    ThumbnailWrapper,\n    TopActionButtons,\n} from \"./fullscreen-image-carousel.style\";\nimport {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <ImageGallerySlides\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <ImageGallerySlide key={index} data-testid=\"slide-item\">\n                            <FocusableImageRegion\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <SlideImage\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <SlidePlaceholderImage />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </FocusableImageRegion>\n                        </ImageGallerySlide>\n                    );\n                })}\n            </ImageGallerySlides>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <FileInfoTextWrapper\n                $centerContent={!trimmedSize}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <FileInfoFileName\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </FileInfoFileName>\n                )}\n                {trimmedSize && (\n                    <FileInfoFileSize data-testid=\"file-info-size\">\n                        {trimmedSize}\n                    </FileInfoFileSize>\n                )}\n            </FileInfoTextWrapper>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <ThumbnailContainer\n                $insetBottom={insets?.bottom}\n                aria-hidden=\"true\"\n            >\n                <ThumbnailWrapper>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <ThumbnailItemContainer key={index}>\n                                <ThumbnailItem\n                                    data-testid=\"thumbnail-item\"\n                                    $active={index === currentSlide}\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <ThumbnailImage\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )}\n                                </ThumbnailItem>\n                            </ThumbnailItemContainer>\n                        );\n                    })}\n                </ThumbnailWrapper>\n            </ThumbnailContainer>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <CarouselModalContent>\n                <ImageGalleryContainer>\n                    <ImageGalleryWrapper>\n                        <ImageGallerySwipe\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </ImageGallerySwipe>\n\n                        {!hideNavigation && (\n                            <>\n                                <ArrowButton\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    $position=\"left\"\n                                    onClick={goToPrevSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ArrowButton>\n                                <ArrowButton\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    $position=\"right\"\n                                    onClick={goToNextSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ArrowButton>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <BoxChip aria-hidden=\"true\">\n                                <Chip weight=\"semibold\">{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Chip>\n                            </BoxChip>\n                        )}\n                    </ImageGalleryWrapper>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </ImageGalleryContainer>\n                <TopActionButtons\n                    $hasFileInfo={hasFileInfo}\n                    $insetTop={insets?.top}\n                    $insetLeft={insets?.left}\n                    $insetRight={insets?.right}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <MagnifierButton\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </MagnifierButton>\n                    )}\n\n                    {onDelete && (\n                        <DeleteButton\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </DeleteButton>\n                    )}\n\n                    <CloseButton\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </CloseButton>\n                </TopActionButtons>\n            </CarouselModalContent>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","children","_jsxs","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","ImageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","ImageGallerySlide","FocusableImageRegion","tabIndex","renderContent","SlidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","SlideImage","placeholder","fit","retrieveImageDimension","_Fragment","ArrowButton","$position","onClick","$insetLeft","left","$insetRight","right","ChevronLeftIcon","ChevronRightIcon","BoxChip","Chip","weight","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","TopActionButtons","$hasFileInfo","$insetTop","top","trimmedName","trimmedSize","FileInfoTextWrapper","FileInfoFileName","FileInfoFileSize","renderFileInfo","MagnifierButton","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","DeleteButton","BinIcon","CloseButton","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}

package/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-spinner/loading-spinner.js"),o=require("./animations/loading-dots/loading-dots.js"),i=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("./avatar/avatar.js"),p=require("./badge/badge.js"),a=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),x=require("./button-with-icon/button-with-icon.js"),d=require("./calendar/calendar.js"),m=require("./card/card.js"),g=require("./checkbox/checkbox.js"),c=require("./countdown-timer/countdown-timer.js"),j=require("./data-table/data-table.js"),h=require("./date-input/date-input.js"),T=require("./date-navigator/date-navigator.js"),q=require("./date-range-input/date-range-input.js"),b=require("./divider/divider.js"),S=require("./drawer/drawer.js"),v=require("./e-signature/e-signature.js"),y=require("./error-display/error-display.js"),B=require("./error-display/helper.js"),k=require("./feedback-rating/feedback-rating.js"),I=require("./file-download/file-download.js"),_=require("./file-upload/file-upload.js"),M=require("./filter/filter.js"),V=require("./footer/footer.js"),C=require("./form/index.js"),P=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),w=require("./histogram-slider/histogram-slider.js"),D=require("./icon-button/icon-button.js"),f=require("./image-button/image-button.js"),L=require("./input/input.js"),R=require("./input-group/input-group.js"),F=require("./input-multi-select/input-multi-select.js"),G=require("./input-nested-multi-select/input-nested-multi-select.js"),N=require("./input-nested-select/input-nested-select.js"),W=require("./input-range-select/input-range-select.js"),A=require("./input-range-slider/input-range-slider.js"),O=require("./input-select/input-select.js"),H=require("./input-slider/input-slider.js"),E=require("./input-textarea/textarea.js"),U=require("./language-switcher/language-switcher.js"),Q=require("./layout/index.js"),K=require("./link-list/link-list.js"),z=require("./markup/markup.js"),J=require("./masked-input/masked-input.js"),X=require("./masonry/masonry.js"),Y=require("./masthead/masthead.js"),Z=require("./menu/menu.js"),$=require("./modal/index.js"),ee=require("./modal-v2/index.js"),re=require("./navbar/navbar.js"),te=require("./notification-banner/notification-banner.js"),oe=require("./notification-banner/notification-banner-hoc.js"),ie=require("./otp-input/otp-input.js"),se=require("./overlay/overlay.js"),ne=require("./pagination/pagination.js"),pe=require("./phone-number-input/phone-number-input.js"),ae=require("./pill/pill.js"),ue=require("./popover/popover-hoc.js"),le=require("./popover/popover.js"),xe=require("./popover-v2/popover.js"),de=require("./popover-v2/popover-inline/popover-inline.js"),me=require("./popover-v2/popover-trigger.js"),ge=require("./predictive-text-input/predictive-text-input.js"),ce=require("./progress-indicator/progress-indicator.js"),je=require("./radio-button/radio-button.js"),he=require("./select-histogram/select-histogram.js"),Te=require("./sidenav/sidenav.js"),qe=require("./singpass-button/singpass-button.js"),be=require("./smart-app-banner/smart-app-banner.js"),Se=require("./tab/tab.js"),ve=require("./table/table.js"),ye=require("./tag/tag.js"),Be=require("./text-list/index.js"),ke=require("./theme/index.js"),Ie=require("./time-range-picker/time-range-picker.js"),_e=require("./time-slot-bar/time-slot-bar.js"),Me=require("./time-slot-bar-week/time-slot-bar-week.js"),Ve=require("./time-slot-week-view/time-slot-week-view.js"),Ce=require("./timeline/timeline.js"),Pe=require("./timepicker/timepicker.js"),we=require("./timetable/timetable.js"),De=require("./toast/toast.js"),fe=require("./toggle/toggle.js"),Le=require("./tooltip/tooltip.js"),Re=require("./tooltip/tooltip-hoc.js"),Fe=require("./typography/typography.js"),Ge=require("./uneditable-section/index.js"),Ne=require("./unit-number/unit-number-input.js"),We=require("./v2_color/color.js"),Ae=require("./v2_design-token/design-token.js"),Oe=require("./v2_layout/index.js"),He=require("./v2_media/media.js"),Ee=require("./v2_text/helper.js"),Ue=require("./v2_text/text-style.js"),Qe=require("./v2_text/text.js"),Ke=require("./v2_text/types.js"),ze=require("./v2_text-list/index.js"),Je=require("./v2_theme/index.js"),Xe=require("./v2_transition/index.js"),Ye=require("./theme/ds-theme-provider.js"),Ze=require("./v2_theme/types.js"),$e=require("./theme/use-theme-mode.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingSpinner=t.LoadingSpinner,exports.LoadingDots=o.LoadingDots,exports.LoadingDotsSpinner=i.LoadingDotsSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=n.Avatar,exports.Badge=p.Badge,exports.BoxContainer=a.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.ButtonWithIcon=x.ButtonWithIcon,exports.Calendar=d.Calendar,exports.Card=m.Card,exports.Checkbox=g.Checkbox,exports.CountdownTimer=c.CountdownTimer,exports.DataTable=j.DataTable,exports.DateInput=h.DateInput,exports.DateNavigator=T.DateNavigator,exports.DateRangeInput=q.DateRangeInput,exports.Divider=b.Divider,exports.Drawer=S.Drawer,exports.ESignature=v.ESignature,exports.ErrorDisplay=y.ErrorDisplay,Object.defineProperty(exports,"ErrorDisplayHelper",{enumerable:!0,get:function(){return B.ErrorDisplayHelper}}),exports.FeedbackRating=k.FeedbackRating,exports.FileDownload=I.FileDownload,exports.FileUpload=_.FileUpload,exports.Filter=M.Filter,exports.Footer=V.Footer,exports.Form=C.Form,exports.Component=P.Component,exports.FullscreenImageCarousel=P.FullscreenImageCarousel,exports.HistogramSlider=w.HistogramSlider,exports.IconButton=D.IconButton,exports.ImageButton=f.ImageButton,exports.Input=L.Input,exports.InputGroup=R.InputGroup,exports.InputMultiSelect=F.InputMultiSelect,exports.InputNestedMultiSelect=G.InputNestedMultiSelect,exports.InputNestedSelect=N.InputNestedSelect,exports.InputRangeSelect=W.InputRangeSelect,exports.InputRangeSlider=A.InputRangeSlider,exports.InputSelect=O.InputSelect,exports.InputSlider=H.InputSlider,exports.Textarea=E.Textarea,exports.LanguageSwitcher=U.LanguageSwitcher,exports.Layout=Q.Layout,exports.LinkList=K.LinkList,exports.Markup=z.Markup,exports.MaskedInput=J.MaskedInput,exports.Masonry=X.Masonry,exports.Masthead=Y.Masthead,exports.Menu=Z.Menu,exports.MenuTrigger=Z.MenuTrigger,exports.Modal=$.Modal,exports.ModalV2=ee.ModalV2,exports.Navbar=re.Navbar,exports.NBComponent=te.NBComponent,exports.NotificationBanner=te.NotificationBanner,exports.withNotificationBanner=oe.withNotificationBanner,exports.OtpInput=ie.OtpInput,exports.Overlay=se.Overlay,exports.Pagination=ne.Pagination,exports.PhoneNumberInput=pe.PhoneNumberInput,exports.Pill=ae.Pill,exports.withPopover=ue.withPopover,exports.Popover=le.Popover,exports.PopoverV2=xe.PopoverV2,exports.PopoverInline=de.PopoverInline,exports.PopoverTrigger=me.PopoverTrigger,exports.PredictiveTextInput=ge.PredictiveTextInput,exports.ProgressIndicator=ce.ProgressIndicator,exports.RadioButton=je.RadioButton,exports.SelectHistogram=he.SelectHistogram,exports.Sidenav=Te.Sidenav,exports.SingpassButton=qe.SingpassButton,exports.SmartAppBanner=be.SmartAppBanner,exports.Tab=Se.Tab,exports.Table=ve.Table,exports.Tag=ye.Tag,exports.TextList=Be.TextList,exports.A11yPlaygroundTheme=ke.A11yPlaygroundTheme,exports.BookingSGTheme=ke.BookingSGTheme,exports.Border=ke.Border,exports.Breakpoint=ke.Breakpoint,exports.CCubeTheme=ke.CCubeTheme,exports.Colour=ke.Colour,exports.Font=ke.Font,exports.IMDATheme=ke.IMDATheme,exports.LifeSGTheme=ke.LifeSGTheme,exports.MediaQuery=ke.MediaQuery,exports.Motion=ke.Motion,exports.MyLegacyTheme=ke.MyLegacyTheme,exports.OneServiceTheme=ke.OneServiceTheme,exports.PATheme=ke.PATheme,exports.RBSTheme=ke.RBSTheme,exports.Radius=ke.Radius,exports.SGWDigitalLobbyTheme=ke.SGWDigitalLobbyTheme,exports.SGWDigitalLobbyThemeBase=ke.SGWDigitalLobbyThemeBase,exports.SMGSTheme=ke.SMGSTheme,exports.SPFTheme=ke.SPFTheme,exports.Shadow=ke.Shadow,exports.Spacing=ke.Spacing,exports.SupportGoWhereTheme=ke.SupportGoWhereTheme,exports.SupportGoWhereThemeBase=ke.SupportGoWhereThemeBase,exports.ThemeComponent=ke.ThemeComponent,exports.TimeRangePicker=Ie.TimeRangePicker,exports.TimeSlotBar=_e.TimeSlotBar,exports.TimeSlotBarWeek=Me.TimeSlotBarWeek,exports.TimeSlotWeekView=Ve.TimeSlotWeekView,exports.Timeline=Ce.Timeline,exports.Timepicker=Pe.Timepicker,exports.TimeTable=we.TimeTable,exports.Toast=De.Toast,exports.Toggle=fe.Toggle,exports.Tooltip=Le.Tooltip,exports.withTooltip=Re.withTooltip,Object.defineProperty(exports,"Typography",{enumerable:!0,get:function(){return Fe.Typography}}),exports.UneditableSection=Ge.UneditableSection,exports.UnitNumberInput=Ne.UnitNumberInput,exports.V2_Color=We.V2_Color,exports.V2_DesignToken=Ae.V2_DesignToken,exports.V2_Layout=Oe.V2_Layout,exports.V2_MediaQuery=He.V2_MediaQuery,exports.V2_MediaWidths=He.V2_MediaWidths,exports.V2_TextStyleHelper=Ee.V2_TextStyleHelper,exports.V2_TextStyle=Ue.V2_TextStyle,Object.defineProperty(exports,"V2_Text",{enumerable:!0,get:function(){return Qe.V2_Text}}),Object.defineProperty(exports,"RedirectScope",{enumerable:!0,get:function(){return Ke.RedirectScope}}),exports.V2_TextList=ze.V2_TextList,exports.V2_BaseTheme=Je.V2_BaseTheme,exports.V2_BookingSGTheme=Je.V2_BookingSGTheme,exports.V2_CCubeTheme=Je.V2_CCubeTheme,exports.V2_MyLegacyTheme=Je.V2_MyLegacyTheme,exports.V2_OneServiceTheme=Je.V2_OneServiceTheme,exports.V2_RBSTheme=Je.V2_RBSTheme,exports.V2_Transition=Xe.V2_Transition,exports.DSThemeProvider=Ye.DSThemeProvider,Object.defineProperty(exports,"V2_ThemeContextKeys",{enumerable:!0,get:function(){return Ze.V2_ThemeContextKeys}}),exports.createThemeWithColourMode=$e.createThemeWithColourMode,exports.getSystemColourMode=$e.getSystemColourMode,exports.useDSTheme=$e.useDSTheme;
+"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-spinner/loading-spinner.js"),o=require("./animations/loading-dots/loading-dots.js"),i=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("./avatar/avatar.js"),p=require("./badge/badge.js"),a=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),x=require("./button-with-icon/button-with-icon.js"),d=require("./calendar/calendar.js"),m=require("./card/card.js"),g=require("./checkbox/checkbox.js"),c=require("./countdown-timer/countdown-timer.js"),h=require("./data-table/data-table.js"),T=require("./date-input/date-input.js"),j=require("./date-navigator/date-navigator.js"),q=require("./date-range-input/date-range-input.js"),b=require("./divider/divider.js"),S=require("./drawer/drawer.js"),v=require("./e-signature/e-signature.js"),y=require("./error-display/error-display.js"),B=require("./error-display/helper.js"),k=require("./feedback-rating/feedback-rating.js"),I=require("./file-download/file-download.js"),_=require("./file-upload/file-upload.js"),C=require("./filter/filter.js"),M=require("./footer/footer.js"),V=require("./form/index.js"),P=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),w=require("./histogram-slider/histogram-slider.js"),D=require("./icon-button/icon-button.js"),f=require("./image-button/image-button.js"),L=require("./input/input.js"),R=require("./input-group/input-group.js"),F=require("./input-multi-select/input-multi-select.js"),G=require("./input-nested-multi-select/input-nested-multi-select.js"),N=require("./input-nested-select/input-nested-select.js"),W=require("./input-range-select/input-range-select.js"),A=require("./input-range-slider/input-range-slider.js"),O=require("./input-select/input-select.js"),H=require("./input-slider/input-slider.js"),E=require("./input-textarea/textarea.js"),U=require("./language-switcher/language-switcher.js"),Q=require("./layout/index.js"),K=require("./link-list/link-list.js"),z=require("./markup/markup.js"),J=require("./masked-input/masked-input.js"),X=require("./masonry/masonry.js"),Y=require("./masthead/masthead.js"),Z=require("./menu/menu.js"),$=require("./modal/index.js"),ee=require("./modal-v2/index.js"),re=require("./navbar/navbar.js"),te=require("./notification-banner/notification-banner.js"),oe=require("./notification-banner/notification-banner-hoc.js"),ie=require("./otp-input/otp-input.js"),se=require("./overlay/overlay.js"),ne=require("./pagination/pagination.js"),pe=require("./phone-number-input/phone-number-input.js"),ae=require("./pill/pill.js"),ue=require("./popover/popover-hoc.js"),le=require("./popover/popover.js"),xe=require("./popover-v2/popover.js"),de=require("./popover-v2/popover-inline/popover-inline.js"),me=require("./popover-v2/popover-trigger.js"),ge=require("./predictive-text-input/predictive-text-input.js"),ce=require("./progress-indicator/progress-indicator.js"),he=require("./radio-button/radio-button.js"),Te=require("./select-histogram/select-histogram.js"),je=require("./sidenav/sidenav.js"),qe=require("./singpass-button/singpass-button.js"),be=require("./smart-app-banner/smart-app-banner.js"),Se=require("./tab/tab.js"),ve=require("./table/table.js"),ye=require("./tag/tag.js"),Be=require("./text-list/index.js"),ke=require("./theme/index.js"),Ie=require("./time-range-picker/time-range-picker.js"),_e=require("./time-slot-bar/time-slot-bar.js"),Ce=require("./time-slot-bar-week/time-slot-bar-week.js"),Me=require("./time-slot-week-view/time-slot-week-view.js"),Ve=require("./timeline/timeline.js"),Pe=require("./timepicker/timepicker.js"),we=require("./timetable/timetable.js"),De=require("./toast/toast.js"),fe=require("./toggle/toggle.js"),Le=require("./tooltip/tooltip.js"),Re=require("./tooltip/tooltip-hoc.js"),Fe=require("./typography/typography.js"),Ge=require("./uneditable-section/index.js"),Ne=require("./unit-number/unit-number-input.js"),We=require("./v2_color/color.js"),Ae=require("./v2_design-token/design-token.js"),Oe=require("./v2_layout/index.js"),He=require("./v2_media/media.js"),Ee=require("./v2_text/helper.js"),Ue=require("./v2_text/text-style.js"),Qe=require("./v2_text/text.js"),Ke=require("./v2_text/types.js"),ze=require("./v2_text-list/index.js"),Je=require("./v2_theme/index.js"),Xe=require("./v2_transition/index.js"),Ye=require("./theme/ds-theme-provider.js"),Ze=require("./v2_theme/types.js"),$e=require("./theme/use-theme-mode.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingSpinner=t.LoadingSpinner,exports.LoadingDots=o.LoadingDots,exports.LoadingDotsSpinner=i.LoadingDotsSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=n.Avatar,exports.Badge=p.Badge,exports.BoxContainer=a.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.ButtonWithIcon=x.ButtonWithIcon,exports.Calendar=d.Calendar,exports.Card=m.Card,exports.Checkbox=g.Checkbox,exports.CountdownTimer=c.CountdownTimer,exports.DataTable=h.DataTable,exports.DateInput=T.DateInput,exports.DateNavigator=j.DateNavigator,exports.DateRangeInput=q.DateRangeInput,exports.Divider=b.Divider,exports.Drawer=S.Drawer,exports.ESignature=v.ESignature,exports.ErrorDisplay=y.ErrorDisplay,Object.defineProperty(exports,"ErrorDisplayHelper",{enumerable:!0,get:function(){return B.ErrorDisplayHelper}}),exports.FeedbackRating=k.FeedbackRating,exports.FileDownload=I.FileDownload,exports.FileUpload=_.FileUpload,exports.Filter=C.Filter,exports.Footer=M.Footer,exports.Form=V.Form,exports.Component=P.Component,exports.FullscreenImageCarousel=P.FullscreenImageCarousel,exports.HistogramSlider=w.HistogramSlider,exports.IconButton=D.IconButton,exports.ImageButton=f.ImageButton,exports.Input=L.Input,exports.InputGroup=R.InputGroup,exports.InputMultiSelect=F.InputMultiSelect,exports.InputNestedMultiSelect=G.InputNestedMultiSelect,exports.InputNestedSelect=N.InputNestedSelect,exports.InputRangeSelect=W.InputRangeSelect,exports.InputRangeSlider=A.InputRangeSlider,exports.InputSelect=O.InputSelect,exports.InputSlider=H.InputSlider,exports.Textarea=E.Textarea,exports.LanguageSwitcher=U.LanguageSwitcher,exports.Layout=Q.Layout,exports.LinkList=K.LinkList,exports.Markup=z.Markup,exports.MaskedInput=J.MaskedInput,exports.Masonry=X.Masonry,exports.Masthead=Y.Masthead,exports.Menu=Z.Menu,exports.MenuTrigger=Z.MenuTrigger,exports.Modal=$.Modal,exports.ModalV2=ee.ModalV2,exports.Navbar=re.Navbar,exports.NBComponent=te.NBComponent,exports.NotificationBanner=te.NotificationBanner,exports.withNotificationBanner=oe.withNotificationBanner,exports.OtpInput=ie.OtpInput,exports.Overlay=se.Overlay,exports.Pagination=ne.Pagination,exports.PhoneNumberInput=pe.PhoneNumberInput,exports.Pill=ae.Pill,exports.withPopover=ue.withPopover,exports.Popover=le.Popover,exports.PopoverV2=xe.PopoverV2,exports.PopoverInline=de.PopoverInline,exports.PopoverTrigger=me.PopoverTrigger,exports.PredictiveTextInput=ge.PredictiveTextInput,exports.ProgressIndicator=ce.ProgressIndicator,exports.RadioButton=he.RadioButton,exports.SelectHistogram=Te.SelectHistogram,exports.Sidenav=je.Sidenav,exports.SingpassButton=qe.SingpassButton,exports.SmartAppBanner=be.SmartAppBanner,exports.Tab=Se.Tab,exports.Table=ve.Table,exports.Tag=ye.Tag,exports.TextList=Be.TextList,exports.A11yPlaygroundTheme=ke.A11yPlaygroundTheme,exports.BookingSGTheme=ke.BookingSGTheme,exports.Border=ke.Border,exports.Breakpoint=ke.Breakpoint,exports.CCubeTheme=ke.CCubeTheme,exports.CareerCompassTheme=ke.CareerCompassTheme,exports.Colour=ke.Colour,exports.Font=ke.Font,exports.IMDATheme=ke.IMDATheme,exports.LifeSGTheme=ke.LifeSGTheme,exports.MediaQuery=ke.MediaQuery,exports.Motion=ke.Motion,exports.MyLegacyTheme=ke.MyLegacyTheme,exports.OneServiceTheme=ke.OneServiceTheme,exports.PATheme=ke.PATheme,exports.RBSTheme=ke.RBSTheme,exports.Radius=ke.Radius,exports.SGWDigitalLobbyTheme=ke.SGWDigitalLobbyTheme,exports.SGWDigitalLobbyThemeBase=ke.SGWDigitalLobbyThemeBase,exports.SMGSTheme=ke.SMGSTheme,exports.SPFTheme=ke.SPFTheme,exports.Shadow=ke.Shadow,exports.Spacing=ke.Spacing,exports.SupportGoWhereTheme=ke.SupportGoWhereTheme,exports.SupportGoWhereThemeBase=ke.SupportGoWhereThemeBase,exports.ThemeComponent=ke.ThemeComponent,exports.TimeRangePicker=Ie.TimeRangePicker,exports.TimeSlotBar=_e.TimeSlotBar,exports.TimeSlotBarWeek=Ce.TimeSlotBarWeek,exports.TimeSlotWeekView=Me.TimeSlotWeekView,exports.Timeline=Ve.Timeline,exports.Timepicker=Pe.Timepicker,exports.TimeTable=we.TimeTable,exports.Toast=De.Toast,exports.Toggle=fe.Toggle,exports.Tooltip=Le.Tooltip,exports.withTooltip=Re.withTooltip,Object.defineProperty(exports,"Typography",{enumerable:!0,get:function(){return Fe.Typography}}),exports.UneditableSection=Ge.UneditableSection,exports.UnitNumberInput=Ne.UnitNumberInput,exports.V2_Color=We.V2_Color,exports.V2_DesignToken=Ae.V2_DesignToken,exports.V2_Layout=Oe.V2_Layout,exports.V2_MediaQuery=He.V2_MediaQuery,exports.V2_MediaWidths=He.V2_MediaWidths,exports.V2_TextStyleHelper=Ee.V2_TextStyleHelper,exports.V2_TextStyle=Ue.V2_TextStyle,Object.defineProperty(exports,"V2_Text",{enumerable:!0,get:function(){return Qe.V2_Text}}),Object.defineProperty(exports,"RedirectScope",{enumerable:!0,get:function(){return Ke.RedirectScope}}),exports.V2_TextList=ze.V2_TextList,exports.V2_BaseTheme=Je.V2_BaseTheme,exports.V2_BookingSGTheme=Je.V2_BookingSGTheme,exports.V2_CCubeTheme=Je.V2_CCubeTheme,exports.V2_MyLegacyTheme=Je.V2_MyLegacyTheme,exports.V2_OneServiceTheme=Je.V2_OneServiceTheme,exports.V2_RBSTheme=Je.V2_RBSTheme,exports.V2_Transition=Xe.V2_Transition,exports.DSThemeProvider=Ye.DSThemeProvider,Object.defineProperty(exports,"V2_ThemeContextKeys",{enumerable:!0,get:function(){return Ze.V2_ThemeContextKeys}}),exports.createThemeWithColourMode=$e.createThemeWithColourMode,exports.getSystemColourMode=$e.getSystemColourMode,exports.useDSTheme=$e.useDSTheme;
 //# sourceMappingURL=index.js.map

package/cjs/modal/modal.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react"),t=require("../overlay/overlay.js"),l=require("../shared/hooks/useViewport.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../util/use-event.js"),a=require("./modal.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(i);exports.Modal=n=>{var{id:u="modal",show:d,animationFrom:c="bottom",children:v,enableOverlayClick:h=!0,rootComponentId:m,zIndex:j,onOverlayClick:f,dismissKeyboardOnShow:p=!0}=n,y=e.__rest(n,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow"]);const{verticalHeight:q,offsetTop:b}=l.useViewport(),O=i.useRef(null),C=v&&s.default.cloneElement(v,{ref:O}),w=o.useEvent((()=>{var e,r;p&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))}));return i.useEffect((()=>{d&&w()}),[d,w]),r.jsx(t.Overlay,{"data-testid":`${u}-overlay`,show:d,enableOverlayClick:h,onOverlayClick:f,id:u,rootId:m,containerRef:O,zIndex:j,children:r.jsx(a.Container,Object.assign({$show:d,$animationFrom:c,"data-testid":u,$verticalHeight:q,$offsetTop:b},y,{children:C}))})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react"),t=require("../overlay/overlay.js"),a=require("../shared/hooks/useViewport.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("../util/use-event.js"),n=require("./modal.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=o(i);exports.Modal=o=>{var{id:u="modal",show:d,animationFrom:c="bottom",children:v,enableOverlayClick:h=!0,rootComponentId:m,zIndex:y,onOverlayClick:j,dismissKeyboardOnShow:q=!0}=o,p=e.__rest(o,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow"]);const b=l.useEvent((()=>{var e,r;q&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))})),{verticalHeight:O,ready:f}=a.useViewport({enabled:d,onBeforeStart:b}),C=i.useRef(null),w=v&&s.default.cloneElement(v,{ref:C});return r.jsx(t.Overlay,{"data-testid":`${u}-overlay`,show:d,enableOverlayClick:h,onOverlayClick:j,id:u,rootId:m,containerRef:C,zIndex:y,children:r.jsx(n.Container,Object.assign({$show:d,$ready:f,$animationFrom:c,"data-testid":u,$verticalHeight:O},p,{children:w}))})};
 //# sourceMappingURL=modal.js.map

package/cjs/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/modal/modal.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useEvent } from \"../util\";\nimport { Container } from \"./modal.styles\";\nimport { ModalProps } from \"./types\";\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <Container\n                $show={show}\n                $animationFrom={animationFrom}\n                data-testid={id}\n                $verticalHeight={verticalHeight}\n                $offsetTop={offsetTop}\n                {...otherProps}\n            >\n                {childWithRef}\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","childWithRef","React","cloneElement","ref","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","containerRef","Container","Object","assign","$show","$animationFrom","$verticalHeight","$offsetTop"],"mappings":"+jBAOsBA,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,GAAIT,EACzBU,EAAUC,EAAAA,OAAAX,EAVK,mIAelB,MAAMY,eAAEA,EAAcC,UAAEA,GAAcC,gBAChCC,EAAWC,EAAAA,OAAuB,MAClCC,EACFb,GAAYc,UAAMC,aAAaf,EAAU,CAAEgB,IAAKL,IAK9CM,EAAkBC,EAAAA,UAAS,aACzBb,YACAc,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAzB,OAAA,EAAAA,EAAE0B,6BAC7C,IAYJ,OATAC,EAAAA,WAAU,KACFzB,GACAmB,GACJ,GACD,CAACnB,EAAMmB,IAMNO,EAAAA,IAACC,UAAO,CAAA,cACS,GAAG5B,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJ6B,OAAQxB,EACRyB,aAAchB,EACdR,OAAQA,EAAMH,SAEdwB,EAAAA,IAACI,YAASC,OAAAC,OAAA,CAAAC,MACCjC,EAAIkC,eACKjC,gBACHF,EAAEoC,gBACEzB,EAAc0B,WACnBzB,GACRH,EAAU,CAAAN,SAEba,MAEC"}
+{"version":3,"file":"modal.js","sources":["../../../src/modal/modal.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useEvent } from \"../util\";\nimport { Container } from \"./modal.styles\";\nimport { ModalProps } from \"./types\";\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight, ready } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <Container\n                $show={show}\n                $ready={ready}\n                $animationFrom={animationFrom}\n                data-testid={id}\n                $verticalHeight={verticalHeight}\n                {...otherProps}\n            >\n                {childWithRef}\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","ready","useViewport","enabled","onBeforeStart","childRef","useRef","childWithRef","React","cloneElement","ref","_jsx","Overlay","rootId","containerRef","Container","Object","assign","$show","$ready","$verticalHeight"],"mappings":"+jBAOsBA,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,GAAIT,EACzBU,EAAUC,EAAAA,OAAAX,EAVK,mIAelB,MAAMY,EAAkBC,EAAAA,UAAS,aACzBJ,YACAK,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAhB,OAAA,EAAAA,EAAEiB,6BAC7C,KAEEC,eAAEA,EAAcC,MAAEA,GAAUC,cAAY,CAC1CC,QAASnB,EACToB,cAAeV,IAEbW,EAAWC,EAAAA,OAAuB,MAClCC,EACFrB,GAAYsB,UAAMC,aAAavB,EAAU,CAAEwB,IAAKL,IAKpD,OACIM,EAAAA,IAACC,UAAO,CAAA,cACS,GAAG7B,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJ8B,OAAQzB,EACR0B,aAAcT,EACdhB,OAAQA,EAAMH,SAEdyB,EAAAA,IAACI,YAASC,OAAAC,OAAA,CAAAC,MACClC,EAAImC,OACHlB,iBACQhB,EAAa,cAChBF,EAAEqC,gBACEpB,GACbR,EAAU,CAAAN,SAEbqB,MAEC"}

package/cjs/modal/modal.styles.js

@@ -1,4 +1,4 @@
-"use strict";var t=require("styled-components"),e=require("../theme/index.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const n=i(t).default.div`
+"use strict";var t=require("styled-components"),e=require("../theme/index.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const i=n(t).default.div`
     position: relative;
     display: flex;
     justify-content: center;
@@ -6,14 +6,13 @@
     height: 100%;
     width: 100%;
     overflow: hidden;
-    ${t=>{return e=t.$show,i=t.$animationFrom||"bottom",e?`\n\t\t\t${i}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`:`\n\t\t${i}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;var e,i}}
+
+    ${t=>{return e=t.$show,n=t.$animationFrom||"bottom",i=t.$ready,e&&!i?`\n\t\t\t${n}: -3%;\n\t\t\topacity: 0;\n\t\t\ttransition: none;\n\t\t`:e?`\n\t\t\t${n}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`:`\n\t\t${n}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;var e,n,i}}
 
     ${e.MediaQuery.MaxWidth.sm} {
         height: calc(
             ${t=>t.$verticalHeight?`${t.$verticalHeight}px`:"1vh"} * 100
         );
-
-        top: ${t=>t.$offsetTop||0}px;
     }
-`;exports.Container=n;
+`;exports.Container=i;
 //# sourceMappingURL=modal.styles.js.map

package/cjs/modal/modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.styles.js","sources":["../../../src/modal/modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { MediaQuery } from \"../theme\";\n\ninterface Props {\n    $show: boolean;\n    $animationFrom?: ModalAnimationDirection;\n    $verticalHeight?: number;\n    $offsetTop?: number;\n}\n\nconst visibilityStyle = (\n    show: boolean,\n    animationFrom: ModalAnimationDirection\n) => {\n    if (show) {\n        return `\n\t\t\t${animationFrom}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`;\n    }\n\n    return `\n\t\t${animationFrom}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;\n};\n\nexport const Container = styled.div<Props>`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    ${(props) => visibilityStyle(props.$show, props.$animationFrom || \"bottom\")}\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(\n            ${(props) =>\n                    props.$verticalHeight\n                        ? `${props.$verticalHeight}px`\n                        : \"1vh\"} * 100\n        );\n\n        top: ${(props) => props.$offsetTop || 0}px;\n    }\n`;\n"],"names":["Container","styled","div","props","visibilityStyle","show","$show","animationFrom","$animationFrom","MediaQuery","MaxWidth","sm","$verticalHeight","$offsetTop"],"mappings":"uJAWA,MAoBaA,OAAYC,QAAOC,GAAU;;;;;;;;MAQnCC,IAAUC,OA3BbC,EA2B6BF,EAAMG,MA1BnCC,EA0B0CJ,EAAMK,gBAAkB,SAxB9DH,EACO,WACVE,iIAOM,SACPA,4FAdoB,IACpBF,EACAE,CA0B2E;;MAEzEE,EAAAA,WAAWC,SAASC;;cAEXR,GACKA,EAAMS,gBACA,GAAGT,EAAMS,oBACT;;;eAGVT,GAAUA,EAAMU,YAAc;;"}
+{"version":3,"file":"modal.styles.js","sources":["../../../src/modal/modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { MediaQuery } from \"../theme\";\n\ninterface Props {\n    $show: boolean;\n    $ready?: boolean;\n    $animationFrom?: ModalAnimationDirection;\n    $verticalHeight?: number;\n}\n\nconst visibilityStyle = (\n    show: boolean,\n    animationFrom: ModalAnimationDirection,\n    ready?: boolean\n) => {\n    if (show && !ready) {\n        return `\n\t\t\t${animationFrom}: -3%;\n\t\t\topacity: 0;\n\t\t\ttransition: none;\n\t\t`;\n    }\n\n    if (show) {\n        return `\n\t\t\t${animationFrom}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`;\n    }\n\n    return `\n\t\t${animationFrom}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;\n};\n\nexport const Container = styled.div<Props>`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n\n    ${(props) =>\n        visibilityStyle(\n            props.$show,\n            props.$animationFrom || \"bottom\",\n            props.$ready\n        )}\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(\n            ${(props) =>\n                    props.$verticalHeight\n                        ? `${props.$verticalHeight}px`\n                        : \"1vh\"} * 100\n        );\n    }\n`;\n"],"names":["Container","styled","div","props","visibilityStyle","show","$show","animationFrom","$animationFrom","ready","$ready","MediaQuery","MaxWidth","sm","$verticalHeight"],"mappings":"uJAWA,MA6BaA,OAAYC,QAAOC,GAAU;;;;;;;;;MASnCC,IACCC,OAtCJC,EAuCQF,EAAMG,MAtCdC,EAuCQJ,EAAMK,gBAAkB,SAtChCC,EAuCQN,EAAMO,OArCVL,IAASI,EACF,WACVF,4DAMGF,EACO,WACVE,iIAOM,SACPA,4FAvBoB,IACpBF,EACAE,EACAE,CAwCK;;MAEHE,EAAAA,WAAWC,SAASC;;cAEXV,GACKA,EAAMW,gBACA,GAAGX,EAAMW,oBACT;;;"}

package/cjs/modal-v2/modal-v2.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@floating-ui/react"),a=require("react"),t=require("../overlay/overlay.js"),l=require("../shared/hooks/useViewport.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../util/use-event.js"),n=require("./modal-context.js"),s=require("./modal-v2.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(a);exports.ModalV2=d=>{var{id:c,show:b,onClose:v,animationFrom:h="bottom",children:j,enableOverlayClick:m=!0,rootComponentId:y,zIndex:f,onOverlayClick:p,dismissKeyboardOnShow:g=!0,"data-testid":C="modal","aria-label":q,"aria-labelledby":x,"aria-describedby":O,disableInitialFocus:F=!1}=d,I=e.__rest(d,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus"]);const{verticalHeight:w,offsetTop:k}=l.useViewport(),M=a.useRef(null),$=j&&u.default.cloneElement(j,{ref:M}),{refs:E,context:S}=i.useFloating({open:b,onOpenChange:e=>{e||null==v||v()}}),{isMounted:_,status:z}=i.useTransitionStatus(S,{duration:300}),P=i.useDismiss(S,{outsidePress:!1,enabled:!!v}),{getFloatingProps:T}=i.useInteractions([P]),V=o.useEvent((()=>{var e,r;g&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))}));return a.useEffect((()=>{b&&V()}),[b,V]),r.jsx(t.Overlay,{"data-testid":`${C}-overlay`,show:_,enableOverlayClick:m,onOverlayClick:p,id:c,rootId:y,containerRef:M,zIndex:f,children:r.jsx(s.Container,Object.assign({$show:_,$animationFrom:h,"data-testid":C,$verticalHeight:w,$offsetTop:k,"data-status":z},I,{children:r.jsx(n.ModalContext.Provider,{value:{onClose:v},children:_&&r.jsx(i.FloatingFocusManager,{context:S,initialFocus:F?-1:E.floating,children:r.jsx(s.ScrollContainer,{children:r.jsx(s.ModalContainer,Object.assign({ref:E.setFloating},T(),{role:"dialog","aria-label":q,"aria-labelledby":x,"aria-describedby":O,children:$}))})})})}))})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@floating-ui/react"),i=require("react"),t=require("../overlay/overlay.js"),l=require("../shared/hooks/useViewport.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("../util/use-event.js"),o=require("./modal-context.js"),s=require("./modal-v2.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(i);exports.ModalV2=d=>{var{id:c,show:b,onClose:v,animationFrom:h="bottom",children:j,enableOverlayClick:m=!0,rootComponentId:y,zIndex:g,onOverlayClick:C,dismissKeyboardOnShow:p=!0,"data-testid":q="modal","aria-label":x,"aria-labelledby":f,"aria-describedby":O,disableInitialFocus:F=!1}=d,I=e.__rest(d,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus"]);const k=n.useEvent((()=>{var e,r;p&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))})),{verticalHeight:w}=l.useViewport({enabled:b,onBeforeStart:k}),M=i.useRef(null),S=j&&u.default.cloneElement(j,{ref:M}),{refs:_,context:z}=a.useFloating({open:b,onOpenChange:e=>{e||null==v||v()}}),{isMounted:E,status:P}=a.useTransitionStatus(z,{duration:300}),V=a.useDismiss(z,{outsidePress:!1,enabled:!!v}),{getFloatingProps:$}=a.useInteractions([V]);return r.jsx(t.Overlay,{"data-testid":`${q}-overlay`,show:b,enableOverlayClick:m,onOverlayClick:C,id:c,rootId:y,containerRef:M,zIndex:g,children:r.jsx(s.Container,Object.assign({$animationFrom:h,"data-testid":q,$verticalHeight:w,"data-status":P},I,{children:r.jsx(o.ModalContext.Provider,{value:{onClose:v},children:E&&r.jsx(a.FloatingFocusManager,{context:z,initialFocus:F?-1:_.floating,children:r.jsx(s.ScrollContainer,{children:r.jsx(s.ModalContainer,Object.assign({ref:_.setFloating},$(),{role:"dialog","aria-label":x,"aria-labelledby":f,"aria-describedby":O,children:S}))})})})}))})};
 //# sourceMappingURL=modal-v2.js.map

package/cjs/modal-v2/modal-v2.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.js","sources":["../../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport React, { useEffect, useRef } from \"react\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport { Container, ModalContainer, ScrollContainer } from \"./modal-v2.styles\";\nimport { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={isMounted}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <Container\n                $show={isMounted}\n                $animationFrom={animationFrom}\n                data-testid={testId}\n                $verticalHeight={verticalHeight}\n                $offsetTop={offsetTop}\n                data-status={status}\n                {...otherProps}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <ScrollContainer>\n                                <ModalContainer\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                >\n                                    {childWithRef}\n                                </ModalContainer>\n                            </ScrollContainer>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","childWithRef","React","cloneElement","ref","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","enabled","getFloatingProps","useInteractions","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","containerRef","Container","Object","assign","$show","$animationFrom","$verticalHeight","$offsetTop","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","ScrollContainer","ModalContainer","setFloating","role"],"mappings":"ooBAewBA,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,KACnBC,EAAUC,EAAAA,OAAAjB,EAhBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,wBAqBpB,MAAMkB,eAAEA,EAAcC,UAAEA,GAAcC,gBAChCC,EAAWC,EAAAA,OAAuB,MAClCC,EACFlB,GAAYmB,UAAMC,aAAapB,EAAU,CAAEqB,IAAKL,KAK9CM,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAM5B,EACN6B,aAAeC,IACNA,GACD7B,SAAAA,GACJ,KAGF8B,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdC,UAAWrC,KAETsC,iBAAEA,GAAqBC,kBAAgB,CAACL,IAKxCM,EAAkBC,EAAAA,UAAS,aACzBlC,YACAmC,EAAuC,UAAtCC,SAASC,qBAA6B,IAAA/C,OAAA,EAAAA,EAAEgD,6BAC7C,IAYJ,OATAC,EAAAA,WAAU,KACF/C,GACAyC,GACJ,GACD,CAACzC,EAAMyC,IAMNO,EAAAA,IAACC,UAAO,CAAA,cACS,GAAGxC,YAChBT,KAAM+B,EACN3B,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJmD,OAAQ7C,EACR8C,aAAchC,EACdb,OAAQA,EAAMH,SAEd6C,EAAAA,IAACI,EAAAA,UAASC,OAAAC,OAAA,CAAAC,MACCxB,EAASyB,eACAtD,EAAa,cAChBO,EAAMgD,gBACFzC,EAAc0C,WACnBzC,EAAS,cACRe,GACTlB,EAAU,CAAAX,SAEd6C,EAAAA,IAACW,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE5D,WAASE,SACpC4B,GACGiB,EAAAA,IAACc,EAAAA,qBAAoB,CACjBpC,QAASA,EACTqC,aACIlD,GAAsB,EAAKY,EAAKuC,SAAQ7D,SAG5C6C,MAACiB,EAAAA,gBAAe,CAAA9D,SACZ6C,EAAAA,IAACkB,iBAAcb,OAAAC,OAAA,CACX9B,IAAKC,EAAK0C,aACN5B,IAAkB,CACtB6B,KAAK,SAAQ,aACD1D,EAAS,kBACJC,EAAc,mBACbC,EAAeT,SAEhCkB,eAOnB"}
+{"version":3,"file":"modal-v2.js","sources":["../../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport React, { useRef } from \"react\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport { Container, ModalContainer, ScrollContainer } from \"./modal-v2.styles\";\nimport { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <Container\n                $animationFrom={animationFrom}\n                data-testid={testId}\n                $verticalHeight={verticalHeight}\n                data-status={status}\n                {...otherProps}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <ScrollContainer>\n                                <ModalContainer\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                >\n                                    {childWithRef}\n                                </ModalContainer>\n                            </ScrollContainer>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","childWithRef","React","cloneElement","ref","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","containerRef","Container","Object","assign","$animationFrom","$verticalHeight","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","ScrollContainer","ModalContainer","setFloating","role"],"mappings":"ooBAewBA,QAAAC,GACpBA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,KACnBC,EAAUC,EAAAA,OAAAjB,EAhBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,wBAqBpB,MAAMkB,EAAkBC,EAAAA,UAAS,aACzBT,YACAU,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAtB,OAAA,EAAAA,EAAEuB,6BAC7C,KAEEC,eAAEA,GAAmBC,cAAY,CACnCC,QAASxB,EACTyB,cAAeT,IAEbU,EAAWC,EAAAA,OAAuB,MAClCC,EACFzB,GAAY0B,UAAMC,aAAa3B,EAAU,CAAE4B,IAAKL,KAK9CM,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMnC,EACNoC,aAAeC,IACNA,GACDpC,SAAAA,GACJ,KAGFqC,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdpB,UAAWvB,KAET4C,iBAAEA,GAAqBC,kBAAgB,CAACJ,IAK9C,OACIK,EAAAA,IAACC,UAAO,CAAA,cACS,GAAGvC,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJkD,OAAQ5C,EACR6C,aAAcxB,EACdpB,OAAQA,EAAMH,SAEd4C,EAAAA,IAACI,YAASC,OAAAC,OAAA,CAAAC,eACUpD,EAAa,cAChBO,EAAM8C,gBACFjC,EAAc,cAClBiB,GACTzB,EAAU,CAAAX,SAEd4C,EAAAA,IAACS,eAAaC,SAAQ,CAACC,MAAO,CAAEzD,oBAC3BqC,GACGS,EAAAA,IAACY,uBAAoB,CACjB1B,QAASA,EACT2B,aACI/C,KAA2BmB,EAAK6B,SAAQ1D,SAG5C4C,MAACe,EAAAA,gBAAe,CAAA3D,SACZ4C,EAAAA,IAACgB,EAAAA,8BACGhC,IAAKC,EAAKgC,aACNnB,IAAkB,CACtBoB,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAAeT,SAEhCyB,eAOnB"}

package/cjs/modal-v2/modal-v2.styles.js

@@ -1,4 +1,4 @@
-"use strict";var t=require("styled-components"),e=require("../theme/index.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=i(t);const n=o.default.div`
+"use strict";var t=require("styled-components"),e=require("../theme/index.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=i(t);const o=n.default.div`
     position: relative;
     width: 100%;
     height: 100%;
@@ -6,13 +6,13 @@
     overflow: auto;
 
     ${e.MediaQuery.MaxWidth.sm} {
-        ${e=>t.css`
-                height: calc(
-                    ${e.$verticalHeight?`${e.$verticalHeight}px`:"1vh"} * 100
-                );
-            `}
+        height: calc(
+            ${t=>t.$verticalHeight?`${t.$verticalHeight}px`:"1vh"} * 100
+        );
+    }
 
-        top: ${t=>t.$offsetTop||0}px;
+    @supports (height: 100dvh) {
+        height: 100dvh;
     }
 
     ${i=>t.css`
@@ -34,15 +34,15 @@
             transition: all ${e.Motion["duration-250"]} ${e.Motion["ease-exit"]};
         }
     `}
-`,a=o.default.div`
+`,a=n.default.div`
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100%;
     pointer-events: none;
-`,r=o.default.div`
+`,r=n.default.div`
     pointer-events: auto;
     width: 100%;
     outline: none;
-`;exports.Container=n,exports.ModalContainer=r,exports.ScrollContainer=a;
+`;exports.Container=o,exports.ModalContainer=r,exports.ScrollContainer=a;
 //# sourceMappingURL=modal-v2.styles.js.map

package/cjs/modal-v2/modal-v2.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.styles.js","sources":["../../../src/modal-v2/modal-v2.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { MediaQuery, Motion } from \"../theme\";\nimport { ModalAnimationDirection } from \"./types\";\n\ninterface Props {\n    $show: boolean;\n    $animationFrom?: ModalAnimationDirection;\n    $verticalHeight?: number;\n    $offsetTop?: number;\n}\n\nexport const Container = styled.div<Props>`\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${(props) => {\n            return css`\n                height: calc(\n                    ${props.$verticalHeight\n                            ? `${props.$verticalHeight}px`\n                            : \"1vh\"} * 100\n                );\n            `;\n        }}\n\n        top: ${(props) => props.$offsetTop || 0}px;\n    }\n\n    ${(props) => css`\n        &[data-status=\"initial\"] {\n            opacity: 0;\n            ${props.$animationFrom}: -3%;\n        }\n\n        &[data-status=\"open\"] {\n            opacity: 1;\n            ${props.$animationFrom}: 0;\n            transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n            transition-delay: ${Motion[\"duration-150\"]};\n        }\n\n        &[data-status=\"close\"] {\n            opacity: 0;\n            ${props.$animationFrom}: -3%;\n            transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n        }\n    `}\n`;\n\nexport const ScrollContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100%;\n    pointer-events: none;\n`;\n\nexport const ModalContainer = styled.div`\n    pointer-events: auto;\n    width: 100%;\n    outline: none;\n`;\n"],"names":["Container","styled","div","MediaQuery","MaxWidth","sm","props","css","$verticalHeight","$offsetTop","$animationFrom","Motion","ScrollContainer","ModalContainer"],"mappings":"kKAWO,MAAMA,EAAYC,EAAAA,QAAOC,GAAU;;;;;;;MAOpCC,EAAAA,WAAWC,SAASC;UACfC,GACQC,KAAG;;sBAEAD,EAAME,gBACE,GAAGF,EAAME,oBACT;;;;eAKdF,GAAUA,EAAMG,YAAc;;;MAGvCH,GAAUC,KAAG;;;cAGND,EAAMI;;;;;cAKNJ,EAAMI;8BACUC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;gCAC/BA,EAAAA,OAAO;;;;;cAKzBL,EAAMI;8BACUC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;;;EAKlDC,EAAkBX,EAAAA,QAAOC,GAAG;;;;;;EAQ5BW,EAAiBZ,EAAAA,QAAOC,GAAG;;;;"}
+{"version":3,"file":"modal-v2.styles.js","sources":["../../../src/modal-v2/modal-v2.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { MediaQuery, Motion } from \"../theme\";\nimport { ModalAnimationDirection } from \"./types\";\n\ninterface Props {\n    $animationFrom?: ModalAnimationDirection;\n    $verticalHeight?: number;\n}\n\nexport const Container = styled.div<Props>`\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(\n            ${(props) =>\n                    props.$verticalHeight\n                        ? `${props.$verticalHeight}px`\n                        : \"1vh\"} * 100\n        );\n    }\n\n    @supports (height: 100dvh) {\n        height: 100dvh;\n    }\n\n    ${(props) => css`\n        &[data-status=\"initial\"] {\n            opacity: 0;\n            ${props.$animationFrom}: -3%;\n        }\n\n        &[data-status=\"open\"] {\n            opacity: 1;\n            ${props.$animationFrom}: 0;\n            transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n            transition-delay: ${Motion[\"duration-150\"]};\n        }\n\n        &[data-status=\"close\"] {\n            opacity: 0;\n            ${props.$animationFrom}: -3%;\n            transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n        }\n    `}\n`;\n\nexport const ScrollContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100%;\n    pointer-events: none;\n`;\n\nexport const ModalContainer = styled.div`\n    pointer-events: auto;\n    width: 100%;\n    outline: none;\n`;\n"],"names":["Container","styled","div","MediaQuery","MaxWidth","sm","props","$verticalHeight","css","$animationFrom","Motion","ScrollContainer","ModalContainer"],"mappings":"kKASO,MAAMA,EAAYC,EAAAA,QAAOC,GAAU;;;;;;;MAOpCC,EAAAA,WAAWC,SAASC;;cAEXC,GACKA,EAAMC,gBACA,GAAGD,EAAMC,oBACT;;;;;;;;MAQnBD,GAAUE,KAAG;;;cAGNF,EAAMG;;;;;cAKNH,EAAMG;8BACUC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;gCAC/BA,EAAAA,OAAO;;;;;cAKzBJ,EAAMG;8BACUC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;;;EAKlDC,EAAkBV,EAAAA,QAAOC,GAAG;;;;;;EAQ5BU,EAAiBX,EAAAA,QAAOC,GAAG;;;;"}

package/cjs/shared/hooks/useViewport.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../external/lodash/throttle.js"),i=require("react");exports.useViewport=()=>{const[t,r]=i.useState(),[o,s]=i.useState(),n=i.useCallback((()=>{const e=.01*window.innerHeight;r(e)}),[]),w=i.useCallback((()=>{if(window.visualViewport){const e=.01*window.visualViewport.height;r(e),s(window.visualViewport.offsetTop)}}),[]);return i.useEffect((()=>{if(window.visualViewport){const i=e.default(w,300);return w(),window.visualViewport.addEventListener("resize",w),window.visualViewport.addEventListener("scroll",i),()=>{var e,t;null===(e=window.visualViewport)||void 0===e||e.removeEventListener("resize",w),null===(t=window.visualViewport)||void 0===t||t.removeEventListener("scroll",i)}}return n(),window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}}),[]),{verticalHeight:t,offsetTop:o}};
+"use strict";var e=require("react");exports.useViewport=({enabled:r=!1,onBeforeStart:t}={})=>{const[i,n]=e.useState(),[u,o]=e.useState(!1),s=e.useRef([]),l=e.useRef(null),a=e.useRef(!1),w=e.useRef(t);e.useEffect((()=>{w.current=t}),[t]);const c=e.useCallback((()=>{const e=.01*window.innerHeight;n(e)}),[]),v=e.useCallback((()=>{if(window.visualViewport){const e=.01*window.visualViewport.height;n(e)}}),[]);return e.useEffect((()=>window.visualViewport?(v(),window.visualViewport.addEventListener("resize",v),()=>{var e;null===(e=window.visualViewport)||void 0===e||e.removeEventListener("resize",v)}):(c(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[v,c]),e.useEffect((()=>{var e;const t=e=>{s.current.push(requestAnimationFrame(e))},i=()=>{s.current.forEach((e=>cancelAnimationFrame(e))),s.current=[],null!==l.current&&(clearTimeout(l.current),l.current=null),a.current=!1},n=()=>{a.current||(a.current=!0,o(!0))};return i(),o(!1),r?(null===(e=w.current)||void 0===e||e.call(w),window.visualViewport?((()=>{var e,r;let i=null!==(r=null===(e=window.visualViewport)||void 0===e?void 0:e.height)&&void 0!==r?r:window.innerHeight,u=0;const o=()=>{var e,r;const s=null!==(r=null===(e=window.visualViewport)||void 0===e?void 0:e.height)&&void 0!==r?r:window.innerHeight;Math.abs(s-i)<.5?u+=1:(u=0,i=s),u>=2?n():t(o)};t(o)})(),l.current=setTimeout(n,180),i):(t(n),i)):i}),[r]),{verticalHeight:i,ready:u}};
 //# sourceMappingURL=useViewport.js.map

package/cjs/shared/hooks/useViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"useViewport.js","sources":["../../../../src/shared/hooks/useViewport.tsx"],"sourcesContent":["import throttle from \"lodash/throttle\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nexport const useViewport = () => {\n    const [verticalHeight, setVerticalHeight] = useState<number>();\n    const [offsetTop, setOffsetTop] = useState<number>();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = useCallback(() => {\n        const newVerticalHeight = window.innerHeight * 0.01;\n        setVerticalHeight(newVerticalHeight);\n    }, []);\n\n    const handleViewportResize = useCallback(() => {\n        if (window.visualViewport) {\n            const newVerticalHeight = window.visualViewport.height * 0.01;\n            setVerticalHeight(newVerticalHeight);\n            setOffsetTop(window.visualViewport.offsetTop);\n        }\n    }, []);\n\n    useEffect(() => {\n        // set initial vh\n\n        // use VisualViewport API if available, it gives more accurate dimensions when iOS software keyboard is active\n        if (window.visualViewport) {\n            const handleViewportScroll = throttle(handleViewportResize, 300);\n            handleViewportResize();\n            window.visualViewport.addEventListener(\n                \"resize\",\n                handleViewportResize\n            );\n            window.visualViewport.addEventListener(\n                \"scroll\",\n                handleViewportScroll\n            );\n\n            return () => {\n                window.visualViewport?.removeEventListener(\n                    \"resize\",\n                    handleViewportResize\n                );\n                window.visualViewport?.removeEventListener(\n                    \"scroll\",\n                    handleViewportScroll\n                );\n            };\n        } else {\n            // fallback to Window API\n            handleWindowResize();\n            window.addEventListener(\"resize\", handleWindowResize);\n            return () => {\n                window.removeEventListener(\"resize\", handleWindowResize);\n            };\n        }\n    }, []);\n\n    return {\n        verticalHeight,\n        offsetTop,\n    };\n};\n"],"names":["verticalHeight","setVerticalHeight","useState","offsetTop","setOffsetTop","handleWindowResize","useCallback","newVerticalHeight","window","innerHeight","handleViewportResize","visualViewport","height","useEffect","handleViewportScroll","throttle","addEventListener","_a","removeEventListener","_b"],"mappings":"uGAG2B,KACvB,MAAOA,EAAgBC,GAAqBC,cACrCC,EAAWC,GAAgBF,aAK5BG,EAAqBC,EAAAA,aAAY,KACnC,MAAMC,EAAyC,IAArBC,OAAOC,YACjCR,EAAkBM,EAAkB,GACrC,IAEGG,EAAuBJ,EAAAA,aAAY,KACrC,GAAIE,OAAOG,eAAgB,CACvB,MAAMJ,EAAmD,IAA/BC,OAAOG,eAAeC,OAChDX,EAAkBM,GAClBH,EAAaI,OAAOG,eAAeR,UACvC,IACD,IAsCH,OApCAU,EAAAA,WAAU,KAIN,GAAIL,OAAOG,eAAgB,CACvB,MAAMG,EAAuBC,EAAAA,QAASL,EAAsB,KAW5D,OAVAA,IACAF,OAAOG,eAAeK,iBAClB,SACAN,GAEJF,OAAOG,eAAeK,iBAClB,SACAF,GAGG,aACkB,QAArBG,EAAAT,OAAOG,sBAAc,IAAAM,GAAAA,EAAEC,oBACnB,SACAR,GAEiB,QAArBS,EAAAX,OAAOG,sBAAc,IAAAQ,GAAAA,EAAED,oBACnB,SACAJ,EACH,CAET,CAII,OAFAT,IACAG,OAAOQ,iBAAiB,SAAUX,GAC3B,KACHG,OAAOU,oBAAoB,SAAUb,EAAmB,CAEhE,GACD,IAEI,CACHL,iBACAG,YACH"}
+{"version":3,"file":"useViewport.js","sources":["../../../../src/shared/hooks/useViewport.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nconst STABLE_FRAMES = 2;\nconst HEIGHT_OFFSET = 0.5;\n// This 180 ms duration is chosen to align with the mobile Chrome/keyboard animation (150–300 ms range) and the modal’s entrance `transition-delay` (200 ms) before we force it into the `ready` state.\nconst FALLBACK_TIME = 180;\n\ninterface UseViewportProps {\n    enabled?: boolean;\n    onBeforeStart?: () => void;\n}\n\nexport const useViewport = ({\n    enabled = false,\n    onBeforeStart,\n}: UseViewportProps = {}) => {\n    const [verticalHeight, setVerticalHeight] = useState<number>();\n    const [ready, setReady] = useState(false);\n    const pendingFramesRef = useRef<number[]>([]);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const hasResolvedRef = useRef(false);\n    const onBeforeStartRef = useRef(onBeforeStart);\n\n    useEffect(() => {\n        onBeforeStartRef.current = onBeforeStart;\n    }, [onBeforeStart]);\n\n    const handleWindowResize = useCallback(() => {\n        const newVerticalHeight = window.innerHeight * 0.01;\n        setVerticalHeight(newVerticalHeight);\n    }, []);\n\n    const handleViewportResize = useCallback(() => {\n        if (window.visualViewport) {\n            const newVerticalHeight = window.visualViewport.height * 0.01;\n            setVerticalHeight(newVerticalHeight);\n        }\n    }, []);\n\n    useEffect(() => {\n        // set initial vh\n\n        // use VisualViewport API if available, it gives more accurate dimensions when iOS software keyboard is active\n        if (window.visualViewport) {\n            handleViewportResize();\n            window.visualViewport.addEventListener(\n                \"resize\",\n                handleViewportResize\n            );\n            return () => {\n                window.visualViewport?.removeEventListener(\n                    \"resize\",\n                    handleViewportResize\n                );\n            };\n        }\n\n        handleWindowResize();\n        window.addEventListener(\"resize\", handleWindowResize);\n        return () => {\n            window.removeEventListener(\"resize\", handleWindowResize);\n        };\n    }, [handleViewportResize, handleWindowResize]);\n\n    useEffect(() => {\n        const scheduleFrame = (fn: FrameRequestCallback) => {\n            pendingFramesRef.current.push(requestAnimationFrame(fn));\n        };\n\n        const clearPending = () => {\n            pendingFramesRef.current.forEach((id) => cancelAnimationFrame(id));\n            pendingFramesRef.current = [];\n\n            if (timeoutRef.current !== null) {\n                clearTimeout(timeoutRef.current);\n                timeoutRef.current = null;\n            }\n\n            hasResolvedRef.current = false;\n        };\n\n        const resolve = () => {\n            if (hasResolvedRef.current) {\n                return;\n            }\n            hasResolvedRef.current = true;\n            setReady(true);\n        };\n        // Compare the viewport height across consecutive frames;\n        // once it remains stable for at least 2 frames, trigger the modal animation\n        const waitForStableViewport = () => {\n            let lastHeight =\n                window.visualViewport?.height ?? window.innerHeight;\n            let stableFrames = 0;\n\n            const checkViewportStability = () => {\n                const currentHeight =\n                    window.visualViewport?.height ?? window.innerHeight;\n                // Use a small offset to account for fluctuations in reported height\n                // even when the viewport hasn’t actually changed\n                if (Math.abs(currentHeight - lastHeight) < HEIGHT_OFFSET) {\n                    stableFrames += 1;\n                } else {\n                    stableFrames = 0;\n                    lastHeight = currentHeight;\n                }\n\n                if (stableFrames >= STABLE_FRAMES) {\n                    resolve();\n                    return;\n                }\n\n                scheduleFrame(checkViewportStability);\n            };\n\n            scheduleFrame(checkViewportStability);\n        };\n\n        clearPending();\n        setReady(false);\n\n        if (!enabled) {\n            return clearPending;\n        }\n\n        onBeforeStartRef.current?.();\n\n        if (!window.visualViewport) {\n            scheduleFrame(resolve);\n            return clearPending;\n        }\n\n        waitForStableViewport();\n        timeoutRef.current = setTimeout(resolve, FALLBACK_TIME);\n\n        return clearPending;\n    }, [enabled]);\n\n    return {\n        verticalHeight,\n        ready,\n    };\n};\n"],"names":["enabled","onBeforeStart","verticalHeight","setVerticalHeight","useState","ready","setReady","pendingFramesRef","useRef","timeoutRef","hasResolvedRef","onBeforeStartRef","useEffect","current","handleWindowResize","useCallback","newVerticalHeight","window","innerHeight","handleViewportResize","visualViewport","height","addEventListener","_a","removeEventListener","scheduleFrame","fn","push","requestAnimationFrame","clearPending","forEach","id","cancelAnimationFrame","clearTimeout","resolve","call","lastHeight","_b","stableFrames","checkViewportStability","currentHeight","Math","abs","waitForStableViewport","setTimeout"],"mappings":"wDAY2B,EACvBA,WAAU,EACVC,iBACkB,CAAA,KAClB,MAAOC,EAAgBC,GAAqBC,cACrCC,EAAOC,GAAYF,EAAAA,UAAS,GAC7BG,EAAmBC,EAAAA,OAAiB,IACpCC,EAAaD,EAAAA,OAA6C,MAC1DE,EAAiBF,EAAAA,QAAO,GACxBG,EAAmBH,EAAAA,OAAOP,GAEhCW,EAAAA,WAAU,KACND,EAAiBE,QAAUZ,CAAa,GACzC,CAACA,IAEJ,MAAMa,EAAqBC,EAAAA,aAAY,KACnC,MAAMC,EAAyC,IAArBC,OAAOC,YACjCf,EAAkBa,EAAkB,GACrC,IAEGG,EAAuBJ,EAAAA,aAAY,KACrC,GAAIE,OAAOG,eAAgB,CACvB,MAAMJ,EAAmD,IAA/BC,OAAOG,eAAeC,OAChDlB,EAAkBa,EACtB,IACD,IAqGH,OAnGAJ,EAAAA,WAAU,IAIFK,OAAOG,gBACPD,IACAF,OAAOG,eAAeE,iBAClB,SACAH,GAEG,WACkB,QAArBI,EAAAN,OAAOG,sBAAc,IAAAG,GAAAA,EAAEC,oBACnB,SACAL,EACH,IAITL,IACAG,OAAOK,iBAAiB,SAAUR,GAC3B,KACHG,OAAOO,oBAAoB,SAAUV,EAAmB,IAE7D,CAACK,EAAsBL,IAE1BF,EAAAA,WAAU,WACN,MAAMa,EAAiBC,IACnBnB,EAAiBM,QAAQc,KAAKC,sBAAsBF,GAAI,EAGtDG,EAAe,KACjBtB,EAAiBM,QAAQiB,SAASC,GAAOC,qBAAqBD,KAC9DxB,EAAiBM,QAAU,GAEA,OAAvBJ,EAAWI,UACXoB,aAAaxB,EAAWI,SACxBJ,EAAWI,QAAU,MAGzBH,EAAeG,SAAU,CAAK,EAG5BqB,EAAU,KACRxB,EAAeG,UAGnBH,EAAeG,SAAU,EACzBP,GAAS,GAAK,EAmClB,OAHAuB,IACAvB,GAAS,GAEJN,GAImB,QAAxBuB,EAAAZ,EAAiBE,eAAO,IAAAU,GAAAA,EAAAY,KAAAxB,GAEnBM,OAAOG,gBArCkB,cAC1B,IAAIgB,EAC6B,QAA7BC,EAAqB,QAArBd,EAAAN,OAAOG,sBAAc,IAAAG,OAAA,EAAAA,EAAEF,cAAM,IAAAgB,EAAAA,EAAIpB,OAAOC,YACxCoB,EAAe,EAEnB,MAAMC,EAAyB,aAC3B,MAAMC,EAC2B,QAA7BH,EAAqB,QAArBd,EAAAN,OAAOG,sBAAc,IAAAG,OAAA,EAAAA,EAAEF,cAAM,IAAAgB,EAAAA,EAAIpB,OAAOC,YAGxCuB,KAAKC,IAAIF,EAAgBJ,GAjGvB,GAkGFE,GAAgB,GAEhBA,EAAe,EACfF,EAAaI,GAGbF,GAzGE,EA0GFJ,IAIJT,EAAcc,EAAuB,EAGzCd,EAAcc,EAAuB,EAiBzCI,GACAlC,EAAWI,QAAU+B,WAAWV,EAhIlB,KAkIPL,IAPHJ,EAAcS,GACPL,IAPAA,CAaQ,GACpB,CAAC7B,IAEG,CACHE,iBACAG,QACH"}

package/cjs/shared/standalone-date-input/standalone-date-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../external/dayjs/dayjs.min.js"),n=require("../../external/dayjs/plugin/customParseFormat.js"),r=require("react");require("../../util/calendar-helper.js"),require("../../util/date-helper.js");var a=require("../../util/date-input-helper.js");require("../../util/simple-id-generator.js");var u=require("../../util/string-helper.js");require("@react-aria/live-announcer");var l=require("../../util/use-state-ref.js"),o=require("./standalone-date-input.style.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(r);t.default.extend(n.default);const c=({disabled:n,readOnly:i,names:s,value:c,focused:d,hoverValue:p,placeholder:f,label:h,onChange:v,onFocus:m,onBlur:g,hideInputKeyboard:y,inputLabels:x=["Date","Month","Year"]},j)=>{const Y=y?"none":"numeric",[b,D,I]=l.useStateRef(""),[S,M,$]=l.useStateRef(""),[q,C,R]=l.useStateRef(""),[k,w]=r.useState("none"),[B,F]=r.useState(!1),V=r.useRef(null),E=r.useRef(null),H=r.useRef(null),z=r.useRef(null),[L,O,K]=N(p);r.useEffect((()=>{var e;const[t="",n="",r=""]=N(c);D(t),M(n),C(r),t||n||r||!V.current||!V.current.contains(document.activeElement)||null===(e=E.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{var e;d||w("none"),d&&(F(!0),V.current&&!V.current.contains(document.activeElement)&&(null===(e=E.current)||void 0===e||e.focus()))}),[d]),r.useImperativeHandle(j,(()=>({ref:V,resetPlaceholder(){F(!1)},resetInput(){const[e="",t="",n=""]=N(c);D(e),M(t),C(n)},focusYearRef(){var e;null===(e=z.current)||void 0===e||e.focus()}})),[D,M,C,c]);const P=e=>{var t;e.preventDefault(),null===(t=E.current)||void 0===t||t.focus()},T=e=>{e.target.select();const t=e.target.name;w(t)},A=e=>{const[n,r,a]=s,l={[n]:I.current,[r]:$.current,[a]:R.current},o=e.target.name,i=l[o],c=o!==a?u.StringHelper.padValue(i,!0):i;switch(o){case n:l[n]=c,D(c);break;case r:l[r]=c,M(c)}const d=`${l[a]}-${l[r]}-${l[n]}`,p=t.default(d,"YYYY-MM-DD",!0).isValid(),f=!l[n]&&!l[r]&&!l[a];p&&i!==c&&v(d),V.current&&!V.current.contains(e.relatedTarget)&&(w("none"),null==g||g(f||p))},G=e=>{var n,r;if(p)return;const a=e.target.name,u=e.target.value.replace(/[^0-9]/g,""),l={day:b,month:S,year:q};switch(a){case s[0]:l.day=u,D(u),2===u.length&&(null===(n=H.current)||void 0===n||n.focus());break;case s[1]:l.month=u,M(u),2===u.length&&(null===(r=z.current)||void 0===r||r.focus());break;case s[2]:l.year=u,C(u)}if(!l.day&&!l.month&&!l.year)return void v("");const o=`${l.year}-${l.month}-${l.day}`;t.default(o,"YYYY-MM-DD",!0).isValid()&&v(o)},J=e=>{var t,n;"Backspace"!==e.code&&"Backspace"!==e.key||(k===s[1]&&0===S.length&&(null===(t=E.current)||void 0===t||t.focus()),k===s[2]&&0===q.length&&(null===(n=H.current)||void 0===n||n.focus()))};function N(e){if(e){const n=a.DateInputHelper.sanitizeInput(e);if(!n)return[void 0,void 0,void 0];const r=t.default(n,"YYYY-MM-DD",!0);return[u.StringHelper.padValue(r.date().toString()),u.StringHelper.padValue((r.month()+1).toString()),r.year().toString()]}return[void 0,void 0,void 0]}return e.jsxs(o.InputSection,{role:"group","aria-label":h,onClick:()=>{var e;n||i||(F(!0),V.current&&!V.current.contains(document.activeElement)&&(null===(e=E.current)||void 0===e||e.focus()))},onFocus:e=>{n||(F(!0),d||null==m||m(e))},children:[e.jsxs(o.InputContainer,{ref:V,$hover:!!p,children:[e.jsx(o.DayInputSizer,{children:e.jsx(o.DayInput,{ref:E,name:s[0],maxLength:2,value:null!=L?L:b,onFocus:T,onBlur:A,onChange:G,type:"text",inputMode:Y,pattern:"[0-9]{2}","data-testid":`${s[0]}-input`,"aria-label":x[0],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[0]||i?"DD":""})}),e.jsx(o.Divider,{$inactive:0===b.length,children:"/"}),e.jsx(o.MonthInputSizer,{children:e.jsx(o.MonthInput,{ref:H,name:s[1],maxLength:2,value:null!=O?O:S,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:Y,pattern:"[0-9]{2}","data-testid":`${s[1]}-input`,"aria-label":x[1],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[1]||i?"MM":""})}),e.jsx(o.Divider,{$inactive:0===S.length,children:"/"}),e.jsx(o.YearInputSizer,{children:e.jsx(o.YearInput,{ref:z,name:s[2],maxLength:4,value:null!=K?K:q,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:Y,pattern:"[0-9]{4}","data-testid":`${s[2]}-input`,"aria-label":x[2],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[2]||i?"YYYY":""})})]}),(()=>{if(!c&&!i&&f)return e.jsx(o.Placeholder,{$hide:B,$disabled:n,onMouseDown:P,children:f})})()]})},d=s.default.forwardRef(c);exports.Component=c,exports.StandaloneDateInput=d;
+"use strict";var e=require("react/jsx-runtime"),t=require("../../external/dayjs/dayjs.min.js"),n=require("../../external/dayjs/plugin/customParseFormat.js"),r=require("react");require("../../util/calendar-helper.js"),require("../../util/date-helper.js");var a=require("../../util/date-input-helper.js");require("../../util/simple-id-generator.js");var u=require("../../util/string-helper.js");require("@react-aria/live-announcer");var l=require("../../util/use-state-ref.js"),o=require("./standalone-date-input.style.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(r);t.default.extend(n.default);const c=({disabled:n,readOnly:i,names:s,value:c,focused:d,hoverValue:p,placeholder:f,label:h,onChange:v,onFocus:m,onBlur:g,hideInputKeyboard:y,inputLabels:x=["Date","Month","Year"]},j)=>{const b=y?"none":"numeric",[Y,D,I]=l.useStateRef(""),[S,$,M]=l.useStateRef(""),[q,C,R]=l.useStateRef(""),[k,w]=r.useState("none"),[B,F]=r.useState(!1),V=r.useRef(null),E=r.useRef(null),H=r.useRef(null),z=r.useRef(null),[L,O,K]=N(p);r.useEffect((()=>{var e;const[t="",n="",r=""]=N(c);D(t),$(n),C(r),t||n||r||!V.current||!V.current.contains(document.activeElement)||null===(e=E.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{var e;d||w("none"),d&&(F(!0),V.current&&!V.current.contains(document.activeElement)&&(null===(e=E.current)||void 0===e||e.focus()))}),[d]),r.useImperativeHandle(j,(()=>({ref:V,resetPlaceholder(){F(!1)},resetInput(){const[e="",t="",n=""]=N(c);D(e),$(t),C(n)},focusYearRef(){var e;null===(e=z.current)||void 0===e||e.focus()}})),[D,$,C,c]);const P=e=>{var t;e.preventDefault(),null===(t=E.current)||void 0===t||t.focus()},T=e=>{e.target.select();const t=e.target.name;w(t)},A=e=>{const[n,r,a]=s,l={[n]:I.current,[r]:M.current,[a]:R.current},o=e.target.name,i=l[o],c=o!==a?u.StringHelper.padValue(i,!0):i;switch(o){case n:l[n]=c,D(c);break;case r:l[r]=c,$(c)}const d=`${l[a]}-${l[r]}-${l[n]}`,p=t.default(d,"YYYY-MM-DD",!0).isValid(),f=!l[n]&&!l[r]&&!l[a];p&&i!==c&&v(d),V.current&&!V.current.contains(e.relatedTarget)&&(w("none"),null==g||g(f||p))},G=e=>{var n,r;if(p)return;const a=e.target.name,u=e.target.value.replace(/[^0-9]/g,""),l={day:Y,month:S,year:q};switch(a){case s[0]:l.day=u,D(u),2===u.length&&(null===(n=H.current)||void 0===n||n.focus());break;case s[1]:l.month=u,$(u),2===u.length&&(null===(r=z.current)||void 0===r||r.focus());break;case s[2]:l.year=u,C(u)}if(!l.day&&!l.month&&!l.year)return void v("");const o=`${l.year}-${l.month}-${l.day}`;t.default(o,"YYYY-MM-DD",!0).isValid()&&v(o)},J=e=>{var t,n;"Backspace"!==e.code&&"Backspace"!==e.key||(k===s[1]&&0===S.length&&(null===(t=E.current)||void 0===t||t.focus()),k===s[2]&&0===q.length&&(null===(n=H.current)||void 0===n||n.focus()))};function N(e){if(e){const n=a.DateInputHelper.sanitizeInput(e);if(!n)return[void 0,void 0,void 0];const r=t.default(n,"YYYY-MM-DD",!0);return[u.StringHelper.padValue(r.date().toString()),u.StringHelper.padValue((r.month()+1).toString()),r.year().toString()]}return[void 0,void 0,void 0]}return e.jsxs(o.InputSection,{role:"group","aria-label":h,onClick:()=>{var e;n||i||(F(!0),V.current&&!V.current.contains(document.activeElement)&&(null===(e=E.current)||void 0===e||e.focus()))},onFocus:e=>{n||(F(!0),d||null==m||m(e))},children:[e.jsxs(o.InputContainer,{ref:V,$hover:!!p,children:[e.jsx(o.DayInputSizer,{children:e.jsx(o.DayInput,{ref:E,name:s[0],maxLength:2,value:null!=L?L:Y,onFocus:T,onBlur:A,onChange:G,type:"text",inputMode:b,pattern:"[0-9]{2}","data-testid":`${s[0]}-input`,"aria-label":x[0],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[0]||i?"DD":""})}),e.jsx(o.Divider,{$inactive:0===Y.length,$disabled:n,children:"/"}),e.jsx(o.MonthInputSizer,{children:e.jsx(o.MonthInput,{ref:H,name:s[1],maxLength:2,value:null!=O?O:S,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:b,pattern:"[0-9]{2}","data-testid":`${s[1]}-input`,"aria-label":x[1],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[1]||i?"MM":""})}),e.jsx(o.Divider,{$inactive:0===S.length,$disabled:n,children:"/"}),e.jsx(o.YearInputSizer,{children:e.jsx(o.YearInput,{ref:z,name:s[2],maxLength:4,value:null!=K?K:q,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:b,pattern:"[0-9]{4}","data-testid":`${s[2]}-input`,"aria-label":x[2],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[2]||i?"YYYY":""})})]}),(()=>{if(!c&&!i&&f)return e.jsx(o.Placeholder,{$hide:B,$disabled:n,onMouseDown:P,children:f})})()]})},d=s.default.forwardRef(c);exports.Component=c,exports.StandaloneDateInput=d;
 //# sourceMappingURL=standalone-date-input.js.map