@lifesg/react-design-system 3.5.0-canary.6 → 3.5.0-canary.8

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    cloneElement,\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    CustomActionButton,\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    FullscreenImageCarouselCustomAction,\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        customActions,\n        onDelete,\n        onClose,\n        insets,\n        topBarRef,\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 resolvedCustomActions =\n        currentItem?.customActions ?? customActions ?? [];\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    const handleCustomAction = (\n        action: FullscreenImageCarouselCustomAction\n    ) => {\n        if (currentItem) {\n            action.onClick(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    const renderTopActions = () => {\n        return (\n            <TopActionButtons\n                ref={topBarRef}\n                $hasFileInfo={hasFileInfo}\n                $insetTop={insets?.top}\n                $insetLeft={insets?.left}\n                $insetRight={insets?.right}\n            >\n                {hasFileInfo && renderFileInfo()}\n\n                {resolvedCustomActions.map((action, index) => (\n                    <CustomActionButton\n                        key={index}\n                        aria-label={action.ariaLabel}\n                        data-testid={action[\"data-testid\"]}\n                        onClick={() => handleCustomAction(action)}\n                    >\n                        {cloneElement(action.icon, { \"aria-hidden\": true })}\n                    </CustomActionButton>\n                ))}\n\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        );\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                {renderTopActions()}\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","customActions","onDelete","onClose","insets","topBarRef","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","diff","currentItem","resolvedCustomActions","_c","_b","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","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","handleDelete","handleMagnifier","zoomRatio","getZoomRatio","centerView","_d","resetTransform","setDimension","src","height","width","oldState","Object","assign","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","prev","slide","clearAnnouncer","announce","renderFileInfo","trimmedName","trimmedSize","_jsxs","FileInfoTextWrapper","_jsx","FileInfoFileName","weight","children","FileInfoFileSize","ModalV2","disableInitialFocus","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","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","TopActionButtons","$hasFileInfo","top","action","CustomActionButton","ariaLabel","handleCustomAction","cloneElement","icon","MagnifierButton","MagnifierPlusIcon","MagnifierMinusIcon","DeleteButton","BinIcon","CloseButton","CrossIcon","renderTopActions","FullscreenImageCarousel","forwardRef"],"mappings":"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"}

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

@@ -74,7 +74,7 @@
               `}
 `,p=l.default(s)``,c=l.default(s)`
     color: ${o.Colour["icon-error"]};
-`,g=l.default(s)``,h=l.default(s)`
+`,g=l.default(s)``,h=l.default(s)``,u=l.default(s)`
     z-index: 4;
     position: absolute;
     top: 50%;
@@ -99,19 +99,19 @@
                 );
             }
         `}
-`,u=l.default.div`
+`,$=l.default.div`
     position: relative;
     width: 100%;
     height: 100dvh;
     display: flex;
     flex-direction: column;
-`,$=l.default.div`
+`,f=l.default.div`
     display: flex;
     flex-direction: column;
     width: 100%;
     flex: 1;
     min-height: 0;
-`,f=l.default.div`
+`,x=l.default.div`
     user-select: none;
     position: relative;
     display: block;
@@ -119,13 +119,13 @@
     width: 100%;
     flex: 1;
     min-height: 0;
-`,x=l.default.div`
+`,m=l.default.div`
     display: block;
     user-select: none;
     height: 100%;
     overflow: hidden;
     touch-action: pan-y;
-`,m=l.default.div`
+`,b=l.default.div`
     display: flex;
     transition: all 450ms ease-out 0s;
     position: relative;
@@ -133,7 +133,7 @@
     user-select: none;
     width: 100%;
     height: 100%;
-`,b=l.default.div`
+`,y=l.default.div`
     flex: 0 0 100%;
     box-sizing: border-box;
     display: flex;
@@ -149,7 +149,7 @@
         height: 100%;
         width: 100%;
     }
-`,y=l.default.div`
+`,w=l.default.div`
     height: 100%;
     width: 100%;
     outline: none;
@@ -162,17 +162,17 @@
         outline: ${o.Border["width-020"]} solid ${o.Colour["border-selected"]};
         outline-offset: -2px;
     }
-`,w=l.default(n.StatefulImage)`
+`,v=l.default(n.StatefulImage)`
     height: 100%;
     width: 100%;
     border-radius: ${o.Radius.none};
-`,v=l.default(t.ImagePlaceholder)`
+`,S=l.default(t.ImagePlaceholder)`
     width: 60vw;
     height: auto;
     max-height: 100%;
     border-radius: ${o.Radius.none};
     aspect-ratio: 4 / 3;
-`,S=l.default.div`
+`,C=l.default.div`
     display: flex;
     justify-content: center;
     padding: ${o.Spacing["spacing-16"]};
@@ -183,7 +183,7 @@
     margin-left: auto;
     margin-right: auto;
     z-index: 3;
-`,C=l.default(a.Typography.BodyXS)`
+`,B=l.default(a.Typography.BodyXS)`
     display: inline-flex;
     padding: ${o.Spacing["spacing-4"]} ${o.Spacing["spacing-16"]};
     justify-content: center;
@@ -212,7 +212,7 @@
     justify-content: center;
     margin-left: auto;
     margin-right: auto;
-`,B=l.default.div`
+`,j=l.default.div`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -223,7 +223,7 @@
         height: 64px;
         width: 64px;
     }
-`,j=l.default.div`
+`,T=l.default.div`
     cursor: pointer;
     background-color: ${o.Colour["bg-inverse"]};
     border-radius: ${o.Radius.md};
@@ -261,10 +261,10 @@
                       border-color: ${o.Colour["border-hover"]};
                   }
               `};
-`,T=l.default(n.StatefulImage)`
+`,k=l.default(n.StatefulImage)`
     height: 100%;
     width: 100%;
-`,k=l.default.div`
+`,R=l.default.div`
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -278,17 +278,17 @@
     ${i=>i.$centerContent&&e.css`
             justify-content: center;
         `}
-`,R=l.default(a.Typography.BodyBL)`
+`,W=l.default(a.Typography.BodyBL)`
     color: ${o.Colour["text-inverse"]};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
-`,W=l.default(a.Typography.BodyMD)`
+`,F=l.default(a.Typography.BodyMD)`
     color: ${o.Colour["text-inverse"]};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
-`;exports.ArrowButton=h,exports.BoxChip=S,exports.CarouselModalContent=u,exports.Chip=C,exports.CloseButton=p,exports.DeleteButton=c,exports.FileInfoFileName=R,exports.FileInfoFileSize=W,exports.FileInfoTextWrapper=k,exports.FocusableImageRegion=y,exports.ImageGalleryContainer=$,exports.ImageGallerySlide=b,exports.ImageGallerySlides=m,exports.ImageGallerySwipe=x,exports.ImageGalleryWrapper=f,exports.MagnifierButton=g,exports.SlideImage=w,exports.SlidePlaceholderImage=v,exports.ThumbnailContainer=I,exports.ThumbnailImage=T,exports.ThumbnailItem=j,exports.ThumbnailItemContainer=B,exports.ThumbnailWrapper=M,exports.TopActionButtons=d;
+`;exports.ArrowButton=u,exports.BoxChip=C,exports.CarouselModalContent=$,exports.Chip=B,exports.CloseButton=p,exports.CustomActionButton=h,exports.DeleteButton=c,exports.FileInfoFileName=W,exports.FileInfoFileSize=F,exports.FileInfoTextWrapper=R,exports.FocusableImageRegion=w,exports.ImageGalleryContainer=f,exports.ImageGallerySlide=y,exports.ImageGallerySlides=b,exports.ImageGallerySwipe=m,exports.ImageGalleryWrapper=x,exports.MagnifierButton=g,exports.SlideImage=v,exports.SlidePlaceholderImage=S,exports.ThumbnailContainer=I,exports.ThumbnailImage=k,exports.ThumbnailItem=T,exports.ThumbnailItemContainer=j,exports.ThumbnailWrapper=M,exports.TopActionButtons=d;
 //# sourceMappingURL=fullscreen-image-carousel.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.style.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { InsetStyleProps } from \"../shared/types\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StatefulImage } from \"./stateful-image\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ArrowButtonStyleProps extends InsetStyleProps {\n    $position: \"left\" | \"right\";\n}\n\ninterface ThumbnailItemStyleProps {\n    $active?: boolean;\n}\n\ninterface TopActionButtonsStyleProps extends InsetStyleProps {\n    $hasFileInfo?: boolean | undefined;\n}\n\ninterface FileInfoTextWrapperStyleProps {\n    $centerContent?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst IconButton = styled(ClickableIcon)`\n    padding: 0;\n    border-radius: 100%;\n    background: ${Colour[\"bg\"]};\n    color: ${Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${Shadow[\"md-strong\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: 2px;\n    }\n`;\n\nexport const TopActionButtons = styled.div<TopActionButtonsStyleProps>`\n    order: -1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$hasFileInfo\n            ? css`\n                  flex-shrink: 0;\n                  background-color: ${Colour[\"bg-inverse\"]};\n                  padding-top: calc(\n                      ${Spacing[\"spacing-24\"]} + ${props.$insetTop || 0}px\n                  );\n                  padding-bottom: ${Spacing[\"spacing-24\"]};\n                  padding-left: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetLeft || 0}px\n                  );\n                  padding-right: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetRight || 0}px\n                  );\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      padding-top: calc(\n                          ${Spacing[\"spacing-16\"]} + ${props.$insetTop || 0}px\n                      );\n                      padding-bottom: ${Spacing[\"spacing-16\"]};\n                      padding-left: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                      );\n                      padding-right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `\n            : css`\n                  position: absolute;\n                  top: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px\n                  );\n                  right: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n                  );\n                  z-index: 5;\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      top: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px\n                      );\n                      right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `}\n`;\n\nexport const CloseButton = styled(IconButton)``;\n\nexport const DeleteButton = styled(IconButton)`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const MagnifierButton = styled(IconButton)``;\n\nexport const ArrowButton = styled(IconButton)<ArrowButtonStyleProps>`\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n\n    ${(props) =>\n        props.$position === \"left\" &&\n        css`\n            left: calc(${Spacing[\"spacing-48\"]} + ${props.$insetLeft || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                left: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                );\n            }\n        `}\n\n    ${(props) =>\n        props.$position === \"right\" &&\n        css`\n            right: calc(${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                right: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                );\n            }\n        `}\n`;\n\nexport const CarouselModalContent = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100dvh;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const ImageGalleryContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGalleryWrapper = styled.div`\n    user-select: none;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGallerySwipe = styled.div`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const ImageGallerySlides = styled.div`\n    display: flex;\n    transition: all 450ms ease-out 0s;\n    position: relative;\n    text-align: center;\n    user-select: none;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySlide = styled.div`\n    flex: 0 0 100%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .react-transform-wrapper {\n        height: 100%;\n        width: 100%;\n    }\n\n    .react-transform-component {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const FocusableImageRegion = styled.div`\n    height: 100%;\n    width: 100%;\n    outline: none;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const SlideImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n    border-radius: ${Radius[\"none\"]};\n`;\n\nexport const SlidePlaceholderImage = styled(ImagePlaceholder)`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const BoxChip = styled.div`\n    display: flex;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-16\"]};\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 3;\n`;\n\nexport const Chip = styled(Typography.BodyXS)`\n    display: inline-flex;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const ThumbnailContainer = styled.div<InsetStyleProps>`\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${Colour[\"bg-inverse\"]};\n    padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-24\"]} ${Spacing[\n                    \"spacing-16\"\n                ]} calc(${Spacing[\"spacing-24\"]} + ${props.$insetBottom ||\n                0}px);\n            `}\n        ${MediaQuery.MaxWidth.sm} {\n        padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-16\"]} ${Spacing[\n                    \"spacing-20\"\n                ]} calc(${Spacing[\"spacing-16\"]} + ${props.$insetBottom ||\n                0}px);\n            `};\n    }\n`;\n\nexport const ThumbnailWrapper = styled.div`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const ThumbnailItemContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const ThumbnailItem = styled.div<ThumbnailItemStyleProps>`\n    cursor: pointer;\n    background-color: ${Colour[\"bg-inverse\"]};\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"solid\"]} transparent;\n    box-sizing: content-box;\n\n    flex-shrink: 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 92px;\n    width: 92px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    ${(props) =>\n        props.$active\n            ? css`\n                  border-width: ${Border[\"width-040\"]};\n                  border-color: ${Colour[\"border-selected\"]};\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      border-width: ${Border[\"width-020\"]};\n                  }\n\n                  &:hover {\n                      border-color: ${Colour[\"border-selected-hover\"]};\n                  }\n              `\n            : css`\n                  border-width: ${Border[\"width-010\"]};\n\n                  &:hover {\n                      border-color: ${Colour[\"border-hover\"]};\n                  }\n              `};\n`;\n\nexport const ThumbnailImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n`;\n\n// -----------------------------------------------------------------------------\n// FILE INFO BAR STYLING\n// -----------------------------------------------------------------------------\n\nexport const FileInfoTextWrapper = styled.div<FileInfoTextWrapperStyleProps>`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n    overflow: hidden;\n    min-width: 0;\n    min-height: calc(\n        ${Font.Spec[\"body-lh-baseline\"]} + ${Spacing[\"spacing-8\"]} +\n            ${Font.Spec[\"body-lh-md\"]}\n    );\n    ${(props) =>\n        props.$centerContent &&\n        css`\n            justify-content: center;\n        `}\n`;\n\nexport const FileInfoFileName = styled(Typography.BodyBL)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n\nexport const FileInfoFileSize = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n"],"names":["IconButton","styled","ClickableIcon","Colour","Shadow","Border","TopActionButtons","div","Spacing","props","$hasFileInfo","css","$insetTop","$insetLeft","$insetRight","MediaQuery","MaxWidth","sm","CloseButton","DeleteButton","MagnifierButton","ArrowButton","$position","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","ImageGallerySlides","ImageGallerySlide","FocusableImageRegion","SlideImage","StatefulImage","Radius","SlidePlaceholderImage","ImagePlaceholder","BoxChip","Chip","Typography","BodyXS","ThumbnailContainer","$insetBottom","ThumbnailWrapper","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","FileInfoTextWrapper","Font","Spec","$centerContent","FileInfoFileName","BodyBL","FileInfoFileSize","BodyMD"],"mappings":"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"}
+{"version":3,"file":"fullscreen-image-carousel.style.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { InsetStyleProps } from \"../shared/types\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StatefulImage } from \"./stateful-image\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ArrowButtonStyleProps extends InsetStyleProps {\n    $position: \"left\" | \"right\";\n}\n\ninterface ThumbnailItemStyleProps {\n    $active?: boolean;\n}\n\ninterface TopActionButtonsStyleProps extends InsetStyleProps {\n    $hasFileInfo?: boolean | undefined;\n}\n\ninterface FileInfoTextWrapperStyleProps {\n    $centerContent?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst IconButton = styled(ClickableIcon)`\n    padding: 0;\n    border-radius: 100%;\n    background: ${Colour[\"bg\"]};\n    color: ${Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${Shadow[\"md-strong\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: 2px;\n    }\n`;\n\nexport const TopActionButtons = styled.div<TopActionButtonsStyleProps>`\n    order: -1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$hasFileInfo\n            ? css`\n                  flex-shrink: 0;\n                  background-color: ${Colour[\"bg-inverse\"]};\n                  padding-top: calc(\n                      ${Spacing[\"spacing-24\"]} + ${props.$insetTop || 0}px\n                  );\n                  padding-bottom: ${Spacing[\"spacing-24\"]};\n                  padding-left: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetLeft || 0}px\n                  );\n                  padding-right: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetRight || 0}px\n                  );\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      padding-top: calc(\n                          ${Spacing[\"spacing-16\"]} + ${props.$insetTop || 0}px\n                      );\n                      padding-bottom: ${Spacing[\"spacing-16\"]};\n                      padding-left: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                      );\n                      padding-right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `\n            : css`\n                  position: absolute;\n                  top: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px\n                  );\n                  right: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n                  );\n                  z-index: 5;\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      top: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px\n                      );\n                      right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `}\n`;\n\nexport const CloseButton = styled(IconButton)``;\n\nexport const DeleteButton = styled(IconButton)`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const MagnifierButton = styled(IconButton)``;\n\nexport const CustomActionButton = styled(IconButton)``;\n\nexport const ArrowButton = styled(IconButton)<ArrowButtonStyleProps>`\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n\n    ${(props) =>\n        props.$position === \"left\" &&\n        css`\n            left: calc(${Spacing[\"spacing-48\"]} + ${props.$insetLeft || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                left: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                );\n            }\n        `}\n\n    ${(props) =>\n        props.$position === \"right\" &&\n        css`\n            right: calc(${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                right: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                );\n            }\n        `}\n`;\n\nexport const CarouselModalContent = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100dvh;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const ImageGalleryContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGalleryWrapper = styled.div`\n    user-select: none;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGallerySwipe = styled.div`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const ImageGallerySlides = styled.div`\n    display: flex;\n    transition: all 450ms ease-out 0s;\n    position: relative;\n    text-align: center;\n    user-select: none;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySlide = styled.div`\n    flex: 0 0 100%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .react-transform-wrapper {\n        height: 100%;\n        width: 100%;\n    }\n\n    .react-transform-component {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const FocusableImageRegion = styled.div`\n    height: 100%;\n    width: 100%;\n    outline: none;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const SlideImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n    border-radius: ${Radius[\"none\"]};\n`;\n\nexport const SlidePlaceholderImage = styled(ImagePlaceholder)`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const BoxChip = styled.div`\n    display: flex;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-16\"]};\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 3;\n`;\n\nexport const Chip = styled(Typography.BodyXS)`\n    display: inline-flex;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const ThumbnailContainer = styled.div<InsetStyleProps>`\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${Colour[\"bg-inverse\"]};\n    padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-24\"]} ${Spacing[\n                    \"spacing-16\"\n                ]} calc(${Spacing[\"spacing-24\"]} + ${props.$insetBottom ||\n                0}px);\n            `}\n        ${MediaQuery.MaxWidth.sm} {\n        padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-16\"]} ${Spacing[\n                    \"spacing-20\"\n                ]} calc(${Spacing[\"spacing-16\"]} + ${props.$insetBottom ||\n                0}px);\n            `};\n    }\n`;\n\nexport const ThumbnailWrapper = styled.div`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const ThumbnailItemContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const ThumbnailItem = styled.div<ThumbnailItemStyleProps>`\n    cursor: pointer;\n    background-color: ${Colour[\"bg-inverse\"]};\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"solid\"]} transparent;\n    box-sizing: content-box;\n\n    flex-shrink: 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 92px;\n    width: 92px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    ${(props) =>\n        props.$active\n            ? css`\n                  border-width: ${Border[\"width-040\"]};\n                  border-color: ${Colour[\"border-selected\"]};\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      border-width: ${Border[\"width-020\"]};\n                  }\n\n                  &:hover {\n                      border-color: ${Colour[\"border-selected-hover\"]};\n                  }\n              `\n            : css`\n                  border-width: ${Border[\"width-010\"]};\n\n                  &:hover {\n                      border-color: ${Colour[\"border-hover\"]};\n                  }\n              `};\n`;\n\nexport const ThumbnailImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n`;\n\n// -----------------------------------------------------------------------------\n// FILE INFO BAR STYLING\n// -----------------------------------------------------------------------------\n\nexport const FileInfoTextWrapper = styled.div<FileInfoTextWrapperStyleProps>`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n    overflow: hidden;\n    min-width: 0;\n    min-height: calc(\n        ${Font.Spec[\"body-lh-baseline\"]} + ${Spacing[\"spacing-8\"]} +\n            ${Font.Spec[\"body-lh-md\"]}\n    );\n    ${(props) =>\n        props.$centerContent &&\n        css`\n            justify-content: center;\n        `}\n`;\n\nexport const FileInfoFileName = styled(Typography.BodyBL)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n\nexport const FileInfoFileSize = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n"],"names":["IconButton","styled","ClickableIcon","Colour","Shadow","Border","TopActionButtons","div","Spacing","props","$hasFileInfo","css","$insetTop","$insetLeft","$insetRight","MediaQuery","MaxWidth","sm","CloseButton","DeleteButton","MagnifierButton","CustomActionButton","ArrowButton","$position","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","ImageGallerySlides","ImageGallerySlide","FocusableImageRegion","SlideImage","StatefulImage","Radius","SlidePlaceholderImage","ImagePlaceholder","BoxChip","Chip","Typography","BodyXS","ThumbnailContainer","$insetBottom","ThumbnailWrapper","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","FileInfoTextWrapper","Font","Spec","$centerContent","FileInfoFileName","BodyBL","FileInfoFileSize","BodyMD"],"mappings":"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"}

package/cjs/input-group/input-group-list-addon.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),i=require("../shared/accessibility/index.js");require("styled-components"),require("../theme/index.js"),require("../util/string-helper.js"),require("../shared/dropdown-list/dropdown-label.styles.js");var t=require("../shared/dropdown-list/dropdown-list.js"),s=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var l=require("../util/simple-id-generator.js");require("@react-aria/live-announcer");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list/dropdown-list.styles.js"),require("../shared/dropdown-list/dropdown-search.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../shared/dropdown-list/virtuoso-components.js");var o=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),n=require("./input-group-list-addon.style.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=(u,c)=>{var{addon:p,error:h,onChange:b,readOnly:x,disabled:j,className:y,onBlur:q,noBorder:m,"data-testid":w,"aria-labelledby":f,"aria-describedby":v,"aria-invalid":g,"aria-label":S}=u,$=e.__rest(u,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:I,listExtractor:O,enableSearch:R,hideNoResultsDisplay:T,noResultsDescription:D,searchPlaceholder:E,searchFunction:B,onSearch:L,placeholder:_="Select",displayValueExtractor:C,"data-selector-testid":N,options:F,selectedOption:V,onSelectOption:H,optionsLoadState:A,optionTruncationType:P,onRetry:k,onHideOptions:W,onShowOptions:G,dropdownZIndex:Z,dropdownRootNode:z,"aria-label":J}=p.attributes,{position:K}=p,[M,Q]=a.useState(V),[U,X]=a.useState(!1),[Y,ee]=a.useState(!1),re=l.useId(),ae=`${re}-listbox`,ie=`${re}-instruction`,te=`${re}-combobox-label`,se=`${re}-textbox-label`,le=a.useRef(null),de=a.useRef(null);a.useEffect((()=>{Q(V)}),[V]);const oe=()=>{if(M)return C?C(M):I?I(M):M.toString()},ne=e=>{e?null==G||G():null==W||W()},ue=(e,r)=>{var a;null===(a=de.current)||void 0===a||a.focus(),Q(e),X(!1),ne(!1),null==H||H(e,r)},ce=()=>{U&&(X(!1),ne(!1))},pe=()=>{X(!0),ne(!0),ee(!0)},he=e=>{X(!1),ne(!1),"click"!==e&&(ee(!1),null==q||q())},be=()=>{var e;null===(e=de.current)||void 0===e||e.focus(),X(!1),ne(!1)},xe=()=>r.jsxs("div",{children:[r.jsx(n.StyledExpandableElement,{ref:de,disabled:j,expanded:U,listboxId:ae,popupRole:"listbox",readOnly:x,"aria-labelledby":i.concatIds(f,te),"aria-describedby":i.concatIds(v,ie),"aria-invalid":g,$noBorder:m,$position:K,children:r.jsx(o.LabelContainer,{$disabled:j,children:M?r.jsx(o.ValueLabel,{children:oe()}):r.jsx(o.PlaceholderLabel,{children:_})})}),r.jsx(i.VisuallyHidden,{id:ie,children:"Press space to open options"})]}),je=()=>r.jsx(t.DropdownList,{listboxId:ae,listItems:F,onSelectItem:ue,onDismiss:ce,valueExtractor:I,listExtractor:O,enableSearch:R,hideNoResultsDisplay:T,noResultsDescription:D,searchPlaceholder:E,searchFunction:B,onSearch:L,selectedItems:M?[M]:[],itemsLoadState:A,itemTruncationType:P,onRetry:k,matchElementWidth:!0});return r.jsx(s.DropdownListState,{children:r.jsxs(n.FieldWrapper,{$focused:Y,$disabled:j,$readOnly:x,$error:h,$position:K,ref:le,className:y,"data-testid":w,$noBorder:m,tabIndex:-1,onFocus:()=>{Y||U||ee(!0)},onBlur:e=>{Y&&!U&&le.current&&!le.current.contains(e.relatedTarget)&&(ee(!1),null==q||q())},children:[r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:te,children:J}),r.jsx(n.FieldSelector,{"data-testid":N,children:x?M?r.jsx(n.SelectorReadOnly,{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":f,"aria-describedby":v,"aria-invalid":g,children:r.jsx(o.ValueLabel,{children:oe()})}):null:r.jsx(d.ElementWithDropdown,{enabled:!x&&!j,isOpen:U,renderElement:xe,renderDropdown:je,onOpen:pe,onClose:he,onDismiss:be,clickToToggle:!0,offset:8,alignment:"right"===K?"right":"left",fitAvailableHeight:!0,customZIndex:Z,rootNode:z,positionRef:le})}),r.jsx(n.Divider,{$readOnly:x,$position:K}),r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:se,children:S}),r.jsx(n.FieldInput,Object.assign({ref:c},$,{$position:K,$noBorder:m,readOnly:x,disabled:j,error:h,onChange:e=>{b&&b(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":i.concatIds(f,se),"aria-describedby":v,"aria-invalid":g}))]})})},p=u(a).default.forwardRef(c);exports.Component=c,exports.InputGroupListAddon=p;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),i=require("../shared/accessibility/index.js");require("styled-components"),require("../theme/index.js"),require("../util/string-helper.js"),require("../shared/dropdown-list/dropdown-label.styles.js");var t=require("../shared/dropdown-list/dropdown-list.js"),s=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var l=require("../util/simple-id-generator.js");require("@react-aria/live-announcer");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list/dropdown-list.styles.js"),require("../shared/dropdown-list/dropdown-search.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../shared/dropdown-list/virtuoso-components.js");var o=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),n=require("./input-group-list-addon.style.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=(u,c)=>{var{addon:p,error:h,onChange:b,readOnly:x,disabled:j,className:y,onBlur:q,noBorder:m,"data-testid":w,"aria-labelledby":f,"aria-describedby":v,"aria-invalid":g,"aria-label":S}=u,$=e.__rest(u,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:O,listExtractor:I,isOptionDisabled:D,enableSearch:R,hideNoResultsDisplay:T,noResultsDescription:E,searchPlaceholder:B,searchFunction:L,onSearch:_,placeholder:C="Select",displayValueExtractor:N,"data-selector-testid":F,options:V,selectedOption:H,onSelectOption:A,optionsLoadState:P,optionTruncationType:k,onRetry:W,onHideOptions:G,onShowOptions:Z,dropdownZIndex:z,dropdownRootNode:J,"aria-label":K}=p.attributes,{position:M}=p,[Q,U]=a.useState(H),[X,Y]=a.useState(!1),[ee,re]=a.useState(!1),ae=l.useId(),ie=`${ae}-listbox`,te=`${ae}-instruction`,se=`${ae}-combobox-label`,le=`${ae}-textbox-label`,de=a.useRef(null),oe=a.useRef(null);a.useEffect((()=>{U(H)}),[H]);const ne=()=>{if(Q)return N?N(Q):O?O(Q):Q.toString()},ue=e=>{e?null==Z||Z():null==G||G()},ce=(e,r)=>{var a;null===(a=oe.current)||void 0===a||a.focus(),U(e),Y(!1),ue(!1),null==A||A(e,r)},pe=()=>{X&&(Y(!1),ue(!1))},he=()=>{Y(!0),ue(!0),re(!0)},be=e=>{Y(!1),ue(!1),"click"!==e&&(re(!1),null==q||q())},xe=()=>{var e;null===(e=oe.current)||void 0===e||e.focus(),Y(!1),ue(!1)},je=()=>r.jsxs("div",{children:[r.jsx(n.StyledExpandableElement,{ref:oe,disabled:j,expanded:X,listboxId:ie,popupRole:"listbox",readOnly:x,"aria-labelledby":i.concatIds(f,se),"aria-describedby":i.concatIds(v,te),"aria-invalid":g,$noBorder:m,$position:M,children:r.jsx(o.LabelContainer,{$disabled:j,children:Q?r.jsx(o.ValueLabel,{children:ne()}):r.jsx(o.PlaceholderLabel,{children:C})})}),r.jsx(i.VisuallyHidden,{id:te,children:"Press space to open options"})]}),ye=()=>r.jsx(t.DropdownList,{listboxId:ie,listItems:V,onSelectItem:ce,onDismiss:pe,valueExtractor:O,listExtractor:I,isOptionDisabled:D,enableSearch:R,hideNoResultsDisplay:T,noResultsDescription:E,searchPlaceholder:B,searchFunction:L,onSearch:_,selectedItems:Q?[Q]:[],itemsLoadState:P,itemTruncationType:k,onRetry:W,matchElementWidth:!0});return r.jsx(s.DropdownListState,{children:r.jsxs(n.FieldWrapper,{$focused:ee,$disabled:j,$readOnly:x,$error:h,$position:M,ref:de,className:y,"data-testid":w,$noBorder:m,tabIndex:-1,onFocus:()=>{ee||X||re(!0)},onBlur:e=>{ee&&!X&&de.current&&!de.current.contains(e.relatedTarget)&&(re(!1),null==q||q())},children:[r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:se,children:K}),r.jsx(n.FieldSelector,{"data-testid":F,children:x?Q?r.jsx(n.SelectorReadOnly,{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":f,"aria-describedby":v,"aria-invalid":g,children:r.jsx(o.ValueLabel,{children:ne()})}):null:r.jsx(d.ElementWithDropdown,{enabled:!x&&!j,isOpen:X,renderElement:je,renderDropdown:ye,onOpen:he,onClose:be,onDismiss:xe,clickToToggle:!0,offset:8,alignment:"right"===M?"right":"left",fitAvailableHeight:!0,customZIndex:z,rootNode:J,positionRef:de})}),r.jsx(n.Divider,{$readOnly:x,$position:M}),r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:le,children:S}),r.jsx(n.FieldInput,Object.assign({ref:c},$,{$position:M,$noBorder:m,readOnly:x,disabled:j,error:h,onChange:e=>{b&&b(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":i.concatIds(f,le),"aria-describedby":v,"aria-invalid":g}))]})})},p=u(a).default.forwardRef(c);exports.Component=c,exports.InputGroupListAddon=p;
 //# sourceMappingURL=input-group-list-addon.js.map

package/cjs/input-group/input-group-list-addon.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group-list-addon.js","sources":["../../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import { OpenChangeReason } from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { useId } from \"../util\";\nimport {\n    Divider,\n    FieldInput,\n    FieldSelector,\n    FieldWrapper,\n    SelectorReadOnly,\n    StyledExpandableElement,\n} from \"./input-group-list-addon.style\";\nimport { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n        } else {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer $disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <StyledExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    $noBorder={noBorder}\n                    $position={position}\n                >\n                    {renderSelectorContent()}\n                </StyledExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <SelectorReadOnly\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </SelectorReadOnly>\n            ) : null;\n        } else {\n            return (\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={showOptions}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle\n                    offset={8}\n                    alignment={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <FieldWrapper\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                $position={position}\n                ref={nodeRef}\n                className={className}\n                data-testid={testId}\n                $noBorder={noBorder}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <FieldSelector data-testid={selectorTestId}>\n                    {renderSelector()}\n                </FieldSelector>\n                <Divider $readOnly={readOnly} $position={position} />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <FieldInput\n                    ref={ref}\n                    {...otherProps}\n                    $position={position}\n                    $noBorder={noBorder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    error={error}\n                    onChange={handleInputChange}\n                    data-testid=\"input\"\n                    styleType=\"no-border\"\n                    aria-labelledby={concatIds(ariaLabelledBy, textboxLabelId)}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                />\n            </FieldWrapper>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","StyledExpandableElement","expanded","popupRole","concatIds","$noBorder","$position","LabelContainer","$disabled","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","FieldWrapper","$focused","$readOnly","$error","tabIndex","onFocus","e","contains","relatedTarget","FieldSelector","SelectorReadOnly","role","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","Divider","FieldInput","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"input-group-list-addon.js","sources":["../../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import { OpenChangeReason } from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { useId } from \"../util\";\nimport {\n    Divider,\n    FieldInput,\n    FieldSelector,\n    FieldWrapper,\n    SelectorReadOnly,\n    StyledExpandableElement,\n} from \"./input-group-list-addon.style\";\nimport { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        isOptionDisabled,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n        } else {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer $disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <StyledExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    $noBorder={noBorder}\n                    $position={position}\n                >\n                    {renderSelectorContent()}\n                </StyledExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                isOptionDisabled={isOptionDisabled}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <SelectorReadOnly\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </SelectorReadOnly>\n            ) : null;\n        } else {\n            return (\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={showOptions}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle\n                    offset={8}\n                    alignment={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <FieldWrapper\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                $position={position}\n                ref={nodeRef}\n                className={className}\n                data-testid={testId}\n                $noBorder={noBorder}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <FieldSelector data-testid={selectorTestId}>\n                    {renderSelector()}\n                </FieldSelector>\n                <Divider $readOnly={readOnly} $position={position} />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <FieldInput\n                    ref={ref}\n                    {...otherProps}\n                    $position={position}\n                    $noBorder={noBorder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    error={error}\n                    onChange={handleInputChange}\n                    data-testid=\"input\"\n                    styleType=\"no-border\"\n                    aria-labelledby={concatIds(ariaLabelledBy, textboxLabelId)}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                />\n            </FieldWrapper>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","isOptionDisabled","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","StyledExpandableElement","expanded","popupRole","concatIds","$noBorder","$position","LabelContainer","$disabled","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","FieldWrapper","$focused","$readOnly","$error","tabIndex","onFocus","e","contains","relatedTarget","FieldSelector","SelectorReadOnly","role","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","Divider","FieldInput","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}

package/cjs/input-range-select/input-range-select.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),o=require("../input/input.style.js"),n=require("../shared/accessibility/index.js");require("styled-components"),require("../theme/index.js");var i=require("../util/string-helper.js");require("../shared/dropdown-list/dropdown-label.styles.js");var l=require("../shared/dropdown-list/dropdown-list.js"),a=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("@react-aria/live-announcer");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list/dropdown-list.styles.js"),require("../shared/dropdown-list/dropdown-search.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../shared/dropdown-list/virtuoso-components.js");var u=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),c=require("../shared/range-input-inner-container/range-input-inner-container.js"),p=require("./input-range-select.style.js");exports.InputRangeSelect=h=>{var{selectedOptions:m,placeholders:v={from:"Select",to:"Select"},options:f,disabled:j,className:x,readOnly:b,error:w,"data-testid":y,id:q,enableSearch:g=!1,searchFunction:S,searchPlaceholder:T,valueExtractor:I,valueToStringFunction:C,listExtractor:O,displayValueExtractor:E,onSelectOption:L,onShowOptions:R,onHideOptions:$,onRetry:D,optionsLoadState:_={from:"success",to:"success"},optionTruncationType:A="middle",renderCustomSelectedOption:F,renderListItem:H,renderCustomCallToAction:N,alignment:P,dropdownZIndex:W,dropdownRootNode:k,dropdownWidth:V,"aria-labelledby":B,"aria-describedby":Z}=h,M=e.__rest(h,["selectedOptions","placeholders","options","disabled","className","readOnly","error","data-testid","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-labelledby","aria-describedby"]);const[G,K]=t.useState(),[z,J]=t.useState(),[Q,U]=t.useState("none"),X="none"!==Q,Y={from:t.useRef(null),to:t.useRef(null)},ee=t.useRef(null),re=s.useId(),te=`${re}-range-listbox`,oe=`${re}-from-label`,ne=`${re}-to-label`;t.useEffect((()=>{K(null==m?void 0:m.from),J(null==m?void 0:m.to)}),[m]),t.useEffect((()=>{var e;X&&"to"===Q&&(null===(e=ee.current)||void 0===e||e.refocus({index:0}))}),[X,Q]);const ie=e=>{e||null==$||$(),e&&(null==R||R())},le=e=>{var r,t;const o="from"===e?G:z;if(!o)return"";if(E)return E(o);if(I){const e=I(o);return C?C(e):null!==(t=null===(r=null==e?void 0:e.toString)||void 0===r?void 0:r.call(e))&&void 0!==t?t:""}return o.toString()},ae=(e,r)=>{var t;if("middle"===A){let o=0;return(null===(t=Y[e])||void 0===t?void 0:t.current)&&(o=Y[e].current.getBoundingClientRect().width),i.StringHelper.truncateOneLine(r,o,120,8)}return r},se=()=>{switch(Q){case"from":return"start";case"to":return"end";case"none":return Q}},de=t.useMemo((()=>{var e;return"none"===Q?[]:null!==(e=null==f?void 0:f[Q])&&void 0!==e?e:[]}),[Q,f]),ue=t.useMemo((()=>{if("none"===Q)return[];const e="from"===Q?G:z;return e?[e]:[]}),[Q,G,z]),ce=e=>{if(j||b)return;U("to"!==e||G?e:"from"),ie(!0)},pe=e=>{var r;null===(r=Y[e].current)||void 0===r||r.focus()},he=e=>{const r="from"===e?oe:ne;return n.concatIds(r,B)},me=e=>r=>{r.stopPropagation(),r.preventDefault(),ce(e)},ve=e=>r=>{if(!j&&!b)switch(r.key){case"Enter":case" ":case"ArrowDown":r.preventDefault(),ce(e)}},fe=(e,r)=>{if("none"!==Q){if("from"===Q)return K(e),null==L||L({from:e},r),J(void 0),U("to"),ie(!0),void pe("to");J(e),null==L||L({to:e},r),U("none"),ie(!1),pe("to")}},je=()=>{const e=Q;U("none"),ie(!1),pe("to"===e?"to":"from"),G&&z||(K(void 0),J(void 0))},xe=e=>{e.stopPropagation(),e.preventDefault(),K(void 0),J(void 0),null==L||L({from:void 0,to:void 0},void 0),pe("from")},be=e=>{const t="from"===e?G:z;return t?F?F(t):r.jsx(u.ValueLabel,{$truncateType:A,children:ae(e,le(e))}):r.jsx(u.PlaceholderLabel,{$truncateType:A,children:ae(e,(null==v?void 0:v[e])||"")})},we=e=>r.jsx(p.RangeSelectorButton,{type:"button",role:"combobox","aria-labelledby":he(e),"aria-describedby":Z,"aria-expanded":X&&Q===e,"aria-controls":te,"aria-disabled":j,"aria-readonly":b,onClick:me(e),onKeyDown:ve(e),ref:Y[e],tabIndex:0,children:be(e)});return r.jsx(u.Wrapper,Object.assign({id:q},M,{children:r.jsx(a.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!b&&!j,isOpen:X,renderElement:()=>r.jsxs(p.StyledInputWrapper,{className:x,"data-testid":y,$disabled:j,$readOnly:b,$error:w,$focused:X,children:[r.jsx(n.VisuallyHidden,{id:oe,children:(null==v?void 0:v.from)||"Select From"}),r.jsx(n.VisuallyHidden,{id:ne,children:(null==v?void 0:v.to)||"Select To"}),r.jsxs(c.RangeInputInnerContainer,{currentActive:se(),error:w,children:[we("from"),we("to")]}),!X&&G&&z&&!b&&!j&&r.jsx(p.ClearIconContainer,{onClick:xe,type:"button","aria-label":"Clear",children:r.jsx(o.ClearIcon,{"aria-hidden":!0})})]}),renderDropdown:()=>r.jsx(l.DropdownList,{ref:ee,"data-testid":`${y}-dropdown`,listboxId:te,ariaLabel:"from"===Q?`Selecting for: ${null==v?void 0:v.from}`:"to"===Q?`Selecting for: ${null==v?void 0:v.to}`:void 0,listItems:de,onSelectItem:fe,onDismiss:je,valueExtractor:I,listExtractor:O,selectedItems:ue,itemsLoadState:_[Q],itemTruncationType:A,onRetry:D,width:V,matchElementWidth:!V,enableSearch:g,searchFunction:S,searchPlaceholder:T,renderListItem:H,renderCustomCallToAction:N}),onOpen:()=>{j||b||"none"===Q&&(U("from"),ie(!0))},onClose:()=>{U("none"),ie(!1),G&&z||(K(void 0),J(void 0))},onDismiss:je,clickToToggle:!1,offset:8,alignment:P,fitAvailableHeight:!0,customZIndex:W,rootNode:k})})}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),o=require("../input/input.style.js"),n=require("../shared/accessibility/index.js");require("styled-components"),require("../theme/index.js");var i=require("../util/string-helper.js");require("../shared/dropdown-list/dropdown-label.styles.js");var l=require("../shared/dropdown-list/dropdown-list.js"),s=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var a=require("../util/simple-id-generator.js");require("@react-aria/live-announcer");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list/dropdown-list.styles.js"),require("../shared/dropdown-list/dropdown-search.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../shared/dropdown-list/virtuoso-components.js");var u=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),c=require("../shared/range-input-inner-container/range-input-inner-container.js"),p=require("./input-range-select.style.js");exports.InputRangeSelect=h=>{var{selectedOptions:m,placeholders:v={from:"Select",to:"Select"},options:f,disabled:b,className:j,readOnly:x,error:w,"data-testid":y,id:q,enableSearch:g=!1,searchFunction:S,searchPlaceholder:O,valueExtractor:T,valueToStringFunction:I,listExtractor:C,isOptionDisabled:D,displayValueExtractor:E,onSelectOption:L,onShowOptions:R,onHideOptions:$,onRetry:_,optionsLoadState:A={from:"success",to:"success"},optionTruncationType:F="middle",renderCustomSelectedOption:H,renderListItem:N,renderCustomCallToAction:P,alignment:W,dropdownZIndex:k,dropdownRootNode:V,dropdownWidth:B,"aria-labelledby":Z,"aria-describedby":M}=h,G=e.__rest(h,["selectedOptions","placeholders","options","disabled","className","readOnly","error","data-testid","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-labelledby","aria-describedby"]);const[K,z]=t.useState(),[J,Q]=t.useState(),[U,X]=t.useState("none"),Y="none"!==U,ee={from:t.useRef(null),to:t.useRef(null)},re=t.useRef(null),te=a.useId(),oe=`${te}-range-listbox`,ne=`${te}-from-label`,ie=`${te}-to-label`;t.useEffect((()=>{z(null==m?void 0:m.from),Q(null==m?void 0:m.to)}),[m]),t.useEffect((()=>{var e;Y&&"to"===U&&(null===(e=re.current)||void 0===e||e.refocus({index:0}))}),[Y,U]);const le=e=>{e||null==$||$(),e&&(null==R||R())},se=e=>{var r,t;const o="from"===e?K:J;if(!o)return"";if(E)return E(o);if(T){const e=T(o);return I?I(e):null!==(t=null===(r=null==e?void 0:e.toString)||void 0===r?void 0:r.call(e))&&void 0!==t?t:""}return o.toString()},ae=(e,r)=>{var t;if("middle"===F){let o=0;return(null===(t=ee[e])||void 0===t?void 0:t.current)&&(o=ee[e].current.getBoundingClientRect().width),i.StringHelper.truncateOneLine(r,o,120,8)}return r},de=()=>{switch(U){case"from":return"start";case"to":return"end";case"none":return U}},ue=t.useMemo((()=>{var e;return"none"===U?[]:null!==(e=null==f?void 0:f[U])&&void 0!==e?e:[]}),[U,f]),ce=t.useMemo((()=>{if("none"===U)return[];const e="from"===U?K:J;return e?[e]:[]}),[U,K,J]),pe=e=>{if(b||x)return;X("to"!==e||K?e:"from"),le(!0)},he=e=>{var r;null===(r=ee[e].current)||void 0===r||r.focus()},me=e=>{const r="from"===e?ne:ie;return n.concatIds(r,Z)},ve=e=>r=>{r.stopPropagation(),r.preventDefault(),pe(e)},fe=e=>r=>{if(!b&&!x)switch(r.key){case"Enter":case" ":case"ArrowDown":r.preventDefault(),pe(e)}},be=(e,r)=>{if("none"!==U){if("from"===U)return z(e),null==L||L({from:e},r),Q(void 0),X("to"),le(!0),void he("to");Q(e),null==L||L({to:e},r),X("none"),le(!1),he("to")}},je=()=>{const e=U;X("none"),le(!1),he("to"===e?"to":"from"),K&&J||(z(void 0),Q(void 0))},xe=e=>{e.stopPropagation(),e.preventDefault(),z(void 0),Q(void 0),null==L||L({from:void 0,to:void 0},void 0),he("from")},we=e=>{const t="from"===e?K:J;return t?H?H(t):r.jsx(u.ValueLabel,{$truncateType:F,children:ae(e,se(e))}):r.jsx(u.PlaceholderLabel,{$truncateType:F,children:ae(e,(null==v?void 0:v[e])||"")})},ye=e=>r.jsx(p.RangeSelectorButton,{type:"button",role:"combobox","aria-labelledby":me(e),"aria-describedby":M,"aria-expanded":Y&&U===e,"aria-controls":oe,"aria-disabled":b,"aria-readonly":x,onClick:ve(e),onKeyDown:fe(e),ref:ee[e],tabIndex:0,children:we(e)});return r.jsx(u.Wrapper,Object.assign({id:q},G,{children:r.jsx(s.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!x&&!b,isOpen:Y,renderElement:()=>r.jsxs(p.StyledInputWrapper,{className:j,"data-testid":y,$disabled:b,$readOnly:x,$error:w,$focused:Y,children:[r.jsx(n.VisuallyHidden,{id:ne,children:(null==v?void 0:v.from)||"Select From"}),r.jsx(n.VisuallyHidden,{id:ie,children:(null==v?void 0:v.to)||"Select To"}),r.jsxs(c.RangeInputInnerContainer,{currentActive:de(),error:w,children:[ye("from"),ye("to")]}),!Y&&K&&J&&!x&&!b&&r.jsx(p.ClearIconContainer,{onClick:xe,type:"button","aria-label":"Clear",children:r.jsx(o.ClearIcon,{"aria-hidden":!0})})]}),renderDropdown:()=>r.jsx(l.DropdownList,{ref:re,"data-testid":`${y}-dropdown`,listboxId:oe,ariaLabel:"from"===U?`Selecting for: ${null==v?void 0:v.from}`:"to"===U?`Selecting for: ${null==v?void 0:v.to}`:void 0,listItems:ue,onSelectItem:be,onDismiss:je,valueExtractor:T,listExtractor:C,isOptionDisabled:D,selectedItems:ce,itemsLoadState:A[U],itemTruncationType:F,onRetry:_,width:B,matchElementWidth:!B,enableSearch:g,searchFunction:S,searchPlaceholder:O,renderListItem:N,renderCustomCallToAction:P}),onOpen:()=>{b||x||"none"===U&&(X("from"),le(!0))},onClose:()=>{X("none"),le(!1),K&&J||(z(void 0),Q(void 0))},onDismiss:je,clickToToggle:!1,offset:8,alignment:W,fitAvailableHeight:!0,customZIndex:k,rootNode:V})})}))};
 //# sourceMappingURL=input-range-select.js.map