npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.4 - Mend

@lifesg/react-design-system 4.0.0-alpha.3 → 4.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1304) hide show

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

	@@ -1 +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 clsx from \"clsx\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type {\n ReactZoomPanPinchContentRef,\n ReactZoomPanPinchRef,\n} from \"react-zoom-pan-pinch\";\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\";\n\nimport { ModalV2 } from \"../modal-v2\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEventListener } from \"../util\";\nimport * as styles from \"./fullscreen-image-carousel.styles\";\nimport { StatefulImage } from \"./stateful-image\";\nimport type {\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 topActionButtonsRef = useRef<HTMLDivElement>(null);\n const prevArrowButtonRef = useRef<HTMLButtonElement>(null);\n const nextArrowButtonRef = useRef<HTMLButtonElement>(null);\n const thumbnailContainerRef = 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 useApplyStyle(topActionButtonsRef, {\n [styles.tokens.topActionButtons.insetTop]: formatUnitValue(\n insets?.top,\n \"px\"\n ),\n [styles.tokens.topActionButtons.insetLeft]: formatUnitValue(\n insets?.left,\n \"px\"\n ),\n [styles.tokens.topActionButtons.insetRight]: formatUnitValue(\n insets?.right,\n \"px\"\n ),\n });\n\n useApplyStyle(prevArrowButtonRef, {\n [styles.tokens.arrowButton.insetLeft]: formatUnitValue(\n insets?.left,\n \"px\"\n ),\n });\n\n useApplyStyle(nextArrowButtonRef, {\n [styles.tokens.arrowButton.insetRight]: formatUnitValue(\n insets?.right,\n \"px\"\n ),\n });\n\n useApplyStyle(thumbnailContainerRef, {\n [styles.tokens.thumbnailContainer.insetBottom]: formatUnitValue(\n insets?.bottom,\n \"px\"\n ),\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 <div\n className={styles.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 <div\n className={styles.imageGallerySlide}\n key={index}\n data-testid=\"slide-item\"\n >\n <div\n className={styles.focusableImageRegion}\n ref={isActive ? imageRef : null}\n tabIndex={isActive ? 0 : -1}\n >\n {isCustomItem(item) ? (\n isActiveOrAdjacent ? (\n item.renderContent()\n ) : (\n <ImagePlaceholder\n className={\n styles.slidePlaceholderImage\n }\n />\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 <StatefulImage\n className={styles.slideImage}\n src={item.src}\n alt={getItemAriaLabel(index)}\n placeholder={\n <ImagePlaceholder\n className={\n styles.slidePlaceholderImage\n }\n />\n }\n fit=\"scale-down\"\n retrieveImageDimension\n setDimension={setDimension}\n />\n </TransformComponent>\n </TransformWrapper>\n )}\n </div>\n </div>\n );\n })}\n </div>\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 <div\n className={clsx(\n styles.fileInfoTextWrapper,\n !trimmedSize && styles.fileInfoTextWrapperCentered\n )}\n aria-live=\"polite\"\n aria-atomic=\"true\"\n data-testid=\"file-info-bar\"\n >\n {trimmedName && (\n <Typography.BodyBL\n className={styles.fileInfoFileName}\n weight=\"semibold\"\n data-testid=\"file-info-name\"\n >\n {trimmedName}\n </Typography.BodyBL>\n )}\n {trimmedSize && (\n <Typography.BodyMD\n className={styles.fileInfoFileSize}\n data-testid=\"file-info-size\"\n >\n {trimmedSize}\n </Typography.BodyMD>\n )}\n </div>\n );\n };\n\n const renderThumbnails = () => {\n return (\n <div\n className={styles.thumbnailContainer}\n ref={thumbnailContainerRef}\n aria-hidden=\"true\"\n data-testid=\"thumbnail-container\"\n >\n <div className={styles.thumbnailWrapper}>\n {items.map((item, index) => {\n const src = isCustomItem(item)\n ? item.thumbnailSrc\n : item.thumbnailSrc ?? item.src;\n return (\n <div\n className={styles.thumbnailItemContainer}\n key={index}\n >\n <div\n className={styles.thumbnailItem}\n data-active={index === currentSlide}\n data-testid=\"thumbnail-item\"\n onClick={() => goToSlide(index)}\n ref={(el) =>\n (thumbnailRefs.current[index] = el)\n }\n >\n {src ? (\n <StatefulImage\n className={styles.thumbnailImage}\n src={src}\n alt={`Thumbnail ${index + 1}`}\n fit=\"cover\"\n />\n ) : (\n <ImagePlaceholder\n className={\n styles.slidePlaceholderImage\n }\n />\n )}\n </div>\n </div>\n );\n })}\n </div>\n </div>\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 <div className={styles.carouselModalContent}>\n <div className={styles.imageGalleryContainer}>\n <div className={styles.imageGalleryWrapper}>\n <div\n className={styles.imageGallerySwipe}\n ref={containerRef}\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n >\n {renderSlides()}\n </div>\n\n {!hideNavigation && (\n <>\n <ClickableIcon\n className={clsx(\n styles.iconButton,\n styles.arrowButton,\n styles.arrowButtonLeft\n )}\n ref={prevArrowButtonRef}\n aria-label={`Previous ${carouselItemNoun}`}\n data-testid=\"prev-btn\"\n onClick={goToPrevSlide}\n >\n <ChevronLeftIcon aria-hidden />\n </ClickableIcon>\n <ClickableIcon\n className={clsx(\n styles.iconButton,\n styles.arrowButton,\n styles.arrowButtonRight\n )}\n ref={nextArrowButtonRef}\n aria-label={`Next ${carouselItemNoun}`}\n data-testid=\"forward-btn\"\n onClick={goToNextSlide}\n >\n <ChevronRightIcon aria-hidden />\n </ClickableIcon>\n </>\n )}\n\n {!hideCounter && (\n <div className={styles.boxChip} aria-hidden=\"true\">\n <Typography.BodyXS\n className={styles.chip}\n weight=\"semibold\"\n data-testid=\"carousel-counter\"\n >{`${currentSlide + 1}/${\n items.length\n }`}</Typography.BodyXS>\n </div>\n )}\n </div>\n\n {!hideThumbnail && renderThumbnails()}\n </div>\n <div\n className={styles.topActionButtons}\n ref={topActionButtonsRef}\n data-has-file-info={hasFileInfo}\n >\n {hasFileInfo && renderFileInfo()}\n {!hideMagnifier && !isCustomItem(currentItem) && (\n <ClickableIcon\n className={styles.iconButton}\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 </ClickableIcon>\n )}\n\n {onDelete && (\n <ClickableIcon\n className={clsx(\n styles.iconButton,\n styles.iconButtonError\n )}\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 </ClickableIcon>\n )}\n\n <ClickableIcon\n className={styles.iconButton}\n aria-label={\n hasAnyItemLabel\n ? \"Close carousel\"\n : \"Close image carousel\"\n }\n onClick={onClose}\n >\n <CrossIcon aria-hidden />\n </ClickableIcon>\n </div>\n </div>\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","topActionButtonsRef","prevArrowButtonRef","nextArrowButtonRef","thumbnailContainerRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","useApplyStyle","styles.tokens","topActionButtons","insetTop","formatUnitValue","top","insetLeft","left","insetRight","right","arrowButton","thumbnailContainer","insetBottom","bottom","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","_jsxs","className","styles.carouselModalContent","children","styles.imageGalleryContainer","styles.imageGalleryWrapper","styles.imageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","styles.imageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","styles.imageGallerySlide","styles.focusableImageRegion","tabIndex","renderContent","ImagePlaceholder","styles.slidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","StatefulImage","styles.slideImage","placeholder","fit","retrieveImageDimension","_Fragment","ClickableIcon","clsx","styles.iconButton","styles.arrowButton","styles.arrowButtonLeft","onClick","ChevronLeftIcon","styles.arrowButtonRight","ChevronRightIcon","styles.boxChip","Typography","BodyXS","styles.chip","weight","styles.thumbnailContainer","styles.thumbnailWrapper","thumbnailSrc","styles.thumbnailItemContainer","styles.thumbnailItem","styles.thumbnailImage","styles.topActionButtons","trimmedName","trimmedSize","styles.fileInfoTextWrapper","styles.fileInfoTextWrapperCentered","BodyBL","styles.fileInfoFileName","BodyMD","styles.fileInfoFileSize","renderFileInfo","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","styles.iconButtonError","BinIcon","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}
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 clsx from \"clsx\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type {\n ReactZoomPanPinchContentRef,\n ReactZoomPanPinchRef,\n} from \"react-zoom-pan-pinch\";\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\";\n\nimport { ModalV2 } from \"../modal-v2\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEventListener } from \"../util\";\nimport * as styles from \"./fullscreen-image-carousel.styles\";\nimport { StatefulImage } from \"./stateful-image\";\nimport type {\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 topActionButtonsRef = useRef<HTMLDivElement>(null);\n const prevArrowButtonRef = useRef<HTMLButtonElement>(null);\n const nextArrowButtonRef = useRef<HTMLButtonElement>(null);\n const thumbnailContainerRef = 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 useApplyStyle(topActionButtonsRef, {\n [styles.tokens.topActionButtons.insetTop]: formatUnitValue(\n insets?.top,\n \"px\"\n ),\n [styles.tokens.topActionButtons.insetLeft]: formatUnitValue(\n insets?.left,\n \"px\"\n ),\n [styles.tokens.topActionButtons.insetRight]: formatUnitValue(\n insets?.right,\n \"px\"\n ),\n });\n\n useApplyStyle(prevArrowButtonRef, {\n [styles.tokens.arrowButton.insetLeft]: formatUnitValue(\n insets?.left,\n \"px\"\n ),\n });\n\n useApplyStyle(nextArrowButtonRef, {\n [styles.tokens.arrowButton.insetRight]: formatUnitValue(\n insets?.right,\n \"px\"\n ),\n });\n\n useApplyStyle(thumbnailContainerRef, {\n [styles.tokens.thumbnailContainer.insetBottom]: formatUnitValue(\n insets?.bottom,\n \"px\"\n ),\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 <div\n className={styles.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 <div\n className={styles.imageGallerySlide}\n key={index}\n data-testid=\"slide-item\"\n >\n <div\n className={styles.focusableImageRegion}\n ref={isActive ? imageRef : null}\n tabIndex={isActive ? 0 : -1}\n >\n {isCustomItem(item) ? (\n isActiveOrAdjacent ? (\n item.renderContent()\n ) : (\n <ImagePlaceholder\n className={\n styles.slidePlaceholderImage\n }\n />\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 <StatefulImage\n className={styles.slideImage}\n src={item.src}\n alt={getItemAriaLabel(index)}\n placeholder={\n <ImagePlaceholder\n className={\n styles.slidePlaceholderImage\n }\n />\n }\n fit=\"scale-down\"\n retrieveImageDimension\n setDimension={setDimension}\n />\n </TransformComponent>\n </TransformWrapper>\n )}\n </div>\n </div>\n );\n })}\n </div>\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 <div\n className={clsx(\n styles.fileInfoTextWrapper,\n !trimmedSize && styles.fileInfoTextWrapperCentered\n )}\n aria-live=\"polite\"\n aria-atomic=\"true\"\n data-testid=\"file-info-bar\"\n >\n {trimmedName && (\n <Typography.BodyBL\n className={styles.fileInfoFileName}\n weight=\"semibold\"\n data-testid=\"file-info-name\"\n >\n {trimmedName}\n </Typography.BodyBL>\n )}\n {trimmedSize && (\n <Typography.BodyMD\n className={styles.fileInfoFileSize}\n data-testid=\"file-info-size\"\n >\n {trimmedSize}\n </Typography.BodyMD>\n )}\n </div>\n );\n };\n\n const renderThumbnails = () => {\n return (\n <div\n className={styles.thumbnailContainer}\n ref={thumbnailContainerRef}\n aria-hidden=\"true\"\n data-testid=\"thumbnail-container\"\n >\n <div className={styles.thumbnailWrapper}>\n {items.map((item, index) => {\n const src = isCustomItem(item)\n ? item.thumbnailSrc\n : item.thumbnailSrc ?? item.src;\n return (\n <div\n className={styles.thumbnailItemContainer}\n key={index}\n >\n <div\n className={styles.thumbnailItem}\n data-active={index === currentSlide}\n data-testid=\"thumbnail-item\"\n onClick={() => goToSlide(index)}\n ref={(el) =>\n (thumbnailRefs.current[index] = el)\n }\n >\n {src ? (\n <StatefulImage\n className={styles.thumbnailImage}\n src={src}\n alt={`Thumbnail ${index + 1}`}\n fit=\"cover\"\n />\n ) : (\n <ImagePlaceholder\n className={\n styles.slidePlaceholderImage\n }\n />\n )}\n </div>\n </div>\n );\n })}\n </div>\n </div>\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 <div className={styles.carouselModalContent}>\n <div className={styles.imageGalleryContainer}>\n <div className={styles.imageGalleryWrapper}>\n <div\n className={styles.imageGallerySwipe}\n ref={containerRef}\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n >\n {renderSlides()}\n </div>\n\n {!hideNavigation && (\n <>\n <ClickableIcon\n className={clsx(\n styles.iconButton,\n styles.arrowButton,\n styles.arrowButtonLeft\n )}\n ref={prevArrowButtonRef}\n aria-label={`Previous ${carouselItemNoun}`}\n data-testid=\"prev-btn\"\n onClick={goToPrevSlide}\n >\n <ChevronLeftIcon aria-hidden />\n </ClickableIcon>\n <ClickableIcon\n className={clsx(\n styles.iconButton,\n styles.arrowButton,\n styles.arrowButtonRight\n )}\n ref={nextArrowButtonRef}\n aria-label={`Next ${carouselItemNoun}`}\n data-testid=\"forward-btn\"\n onClick={goToNextSlide}\n >\n <ChevronRightIcon aria-hidden />\n </ClickableIcon>\n </>\n )}\n\n {!hideCounter && (\n <div className={styles.boxChip} aria-hidden=\"true\">\n <Typography.BodyXS\n className={styles.chip}\n weight=\"semibold\"\n data-testid=\"carousel-counter\"\n >{`${currentSlide + 1}/${\n items.length\n }`}</Typography.BodyXS>\n </div>\n )}\n </div>\n\n {!hideThumbnail && renderThumbnails()}\n </div>\n <div\n className={styles.topActionButtons}\n ref={topActionButtonsRef}\n data-has-file-info={hasFileInfo}\n >\n {hasFileInfo && renderFileInfo()}\n {!hideMagnifier && !isCustomItem(currentItem) && (\n <ClickableIcon\n className={styles.iconButton}\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 </ClickableIcon>\n )}\n\n {onDelete && (\n <ClickableIcon\n className={clsx(\n styles.iconButton,\n styles.iconButtonError\n )}\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 </ClickableIcon>\n )}\n\n <ClickableIcon\n className={styles.iconButton}\n aria-label={\n hasAnyItemLabel\n ? \"Close carousel\"\n : \"Close image carousel\"\n }\n onClick={onClose}\n >\n <CrossIcon aria-hidden />\n </ClickableIcon>\n </div>\n </div>\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","topActionButtonsRef","prevArrowButtonRef","nextArrowButtonRef","thumbnailContainerRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","useApplyStyle","styles.tokens","topActionButtons","insetTop","formatUnitValue","top","insetLeft","left","insetRight","right","arrowButton","thumbnailContainer","insetBottom","bottom","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","_jsxs","className","styles.carouselModalContent","children","styles.imageGalleryContainer","styles.imageGalleryWrapper","styles.imageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","styles.imageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","styles.imageGallerySlide","styles.focusableImageRegion","tabIndex","renderContent","ImagePlaceholder","styles.slidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","StatefulImage","styles.slideImage","placeholder","fit","retrieveImageDimension","_Fragment","ClickableIcon","clsx","styles.iconButton","styles.arrowButton","styles.arrowButtonLeft","onClick","ChevronLeftIcon","styles.arrowButtonRight","ChevronRightIcon","styles.boxChip","Typography","BodyXS","styles.chip","weight","styles.thumbnailContainer","styles.thumbnailWrapper","thumbnailSrc","styles.thumbnailItemContainer","styles.thumbnailItem","styles.thumbnailImage","styles.topActionButtons","trimmedName","trimmedSize","styles.fileInfoTextWrapper","styles.fileInfoTextWrapperCentered","BodyBL","styles.fileInfoFileName","BodyMD","styles.fileInfoFileSize","renderFileInfo","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","styles.iconButtonError","BinIcon","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}

package/cjs/image-button/image-button.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./image-button.styles_qtt605.css");exports.main="mqb1plh",exports.mainDisabled="m1hsk0n5",exports.mainError="mz6wr40",exports.mainSelected="mroo32y",exports.mainSelectedText="mpjl8bn";
+"use strict";require("./image-button.styles_6n1qsr.css");exports.main="mqb1plh",exports.mainDisabled="m1hsk0n5",exports.mainError="mz6wr40",exports.mainSelected="mroo32y",exports.mainSelectedText="mpjl8bn";
 //# sourceMappingURL=image-button.styles.js.map

package/cjs/image-button/{image-button.styles_qtt605.css → image-button.styles_6n1qsr.css} RENAMED Viewed

@@ -1,4 +1,4 @@
-.mqb1plh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.5rem 1rem;background-color:var(--fds-colour-bg);border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;border-radius:var(--fds-radius-md);cursor:pointer;max-width:13rem;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);overflow-wrap:anywhere;}.mqb1plh img{min-width:3.5rem;width:3.5rem;height:3.5rem;object-fit:contain;}.mqb1plh:hover{border-color:var(--fds-colour-border-hover-strong);}:where(body.fds-breakpoint-sm-max) .mqb1plh{padding:0.5rem 0.25rem;gap:0.25rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.mqb1plh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.5rem 1rem;background-color:var(--fds-colour-bg);border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;border-radius:var(--fds-radius-md);cursor:pointer;max-width:13rem;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);overflow-wrap:anywhere;}.mqb1plh img{min-width:3.5rem;width:3.5rem;height:3.5rem;object-fit:contain;}.mqb1plh:hover{border-color:var(--fds-colour-border-hover-strong);}:where(body.fds-breakpoint-sm-max) .mqb1plh{padding:0.5rem 0.25rem;gap:0.25rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
 .mpjl8bn{color:var(--fds-colour-text-primary);}
 .mroo32y{background:var(--fds-colour-bg-selected);border-color:var(--fds-colour-border-selected);}.mroo32y:hover{background:var(--fds-colour-bg-selected-hover);border-color:var(--fds-colour-border-selected-hover);}
 .mz6wr40{background:var(--fds-colour-bg);border-color:var(--fds-colour-border-error);}.mz6wr40:hover{background:var(--fds-colour-bg);border-color:var(--fds-colour-border-error);}

package/cjs/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-dots/loading-dots.js"),o=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),i=require("./animations/loading-spinner/loading-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),a=require("./avatar/avatar.js"),n=require("./badge/badge.js"),p=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),d=require("./calendar/calendar.js"),x=require("./card/card.js"),m=require("./checkbox/checkbox.js"),g=require("./countdown-timer/countdown-timer.js"),h=require("./dashed-border/dashed-border.js"),c=require("./data-table/data-table.js"),T=require("./date-input/date-input.js"),q=require("./date-navigator/date-navigator.js"),j=require("./date-range-input/date-range-input.js"),S=require("./divider/divider.js"),b=require("./drawer/drawer.js"),k=require("./e-signature/e-signature.js"),V=require("./error-display/error-display.js"),v=require("./error-display/helper.js"),_=require("./example/example.js"),y=require("./feedback-rating/feedback-rating.js"),B=require("./file-download/file-download.js"),I=require("./file-upload/file-upload.js"),M=require("./filter/filter.js"),C=require("./footer/footer.js"),D=require("./form/index.js"),P=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),f=require("./histogram-slider/histogram-slider.js"),F=require("./image-button/image-button.js"),L=require("./input/input.js"),w=require("./input-group/input-group.js"),R=require("./input-multi-select/input-multi-select.js"),A=require("./input-nested-multi-select/input-nested-multi-select.js"),E=require("./input-nested-select/input-nested-select.js"),N=require("./input-range-select/input-range-select.js"),W=require("./input-range-slider/input-range-slider.js"),G=require("./input-select/input-select.js"),O=require("./input-slider/input-slider.js"),H=require("./input-textarea/textarea.js"),Q=require("./language-switcher/language-switcher.js"),U=require("./layout/index.js"),z=require("./link-list/link-list.js"),K=require("./markup/markup.js"),X=require("./masked-input/masked-input.js"),Y=require("./masthead/masthead.js"),J=require("./menu/menu.js"),Z=require("./modal/index.js"),$=require("./modal-v2/index.js"),ee=require("./navbar/navbar.js"),re=require("./notification-banner/notification-banner.js"),te=require("./notification-banner/notification-banner-hoc.js"),oe=require("./otp-input/otp-input.js"),ie=require("./overlay/overlay.js"),se=require("./pagination/pagination.js"),ae=require("./phone-number-input/phone-number-input.js"),ne=require("./pill/pill.js"),pe=require("./popover/popover.js"),ue=require("./popover/popover-inline/popover-inline.js"),le=require("./popover/popover-trigger.js"),de=require("./predictive-text-input/predictive-text-input.js"),xe=require("./progress-indicator/progress-indicator.js"),me=require("./radio-button/radio-button.js"),ge=require("./select-histogram/select-histogram.js"),he=require("./sidenav/sidenav.js"),ce=require("./singpass-button/singpass-button.js"),Te=require("./smart-app-banner/smart-app-banner.js"),qe=require("./tab/tab.js"),je=require("./table/table.js"),Se=require("./tag/tag.js"),be=require("./text-list/index.js"),ke=require("./theme/theme-provider/index.js"),Ve=require("./theme/theme-provider/hooks.js"),ve=require("./theme/tokens/border.js"),_e=require("./theme/tokens/breakpoint.js"),ye=require("./theme/tokens/colour.js"),Be=require("./theme/tokens/component.js"),Ie=require("./theme/tokens/font.js"),Me=require("./theme/tokens/media-query.js"),Ce=require("./theme/tokens/motion.js"),De=require("./theme/tokens/radius.js"),Pe=require("./theme/tokens/shadow.js"),fe=require("./theme/tokens/spacing.js"),Fe=require("./theme/types.js"),Le=require("./theme/utils/css-variable.js"),we=require("./theme/utils/font.js"),Re=require("./theme/utils/token-resolver.js"),Ae=require("./theme/utils/use-apply-styles.js"),Ee=require("./theme/utils/use-design-token.js"),Ne=require("./theme/utils/use-media-query.js"),We=require("./time-range-picker/time-range-picker.js"),Ge=require("./time-slot-bar/time-slot-bar.js"),Oe=require("./time-slot-bar-week/time-slot-bar-week.js"),He=require("./time-slot-week-view/time-slot-week-view.js"),Qe=require("./timeline/timeline.js"),Ue=require("./timepicker/timepicker.js"),ze=require("./timetable/timetable.js"),Ke=require("./toast/toast.js"),Xe=require("./toggle/toggle.js"),Ye=require("./typography/index.js"),Je=require("./uneditable-section/index.js"),Ze=require("./unit-number/unit-number-input.js"),$e=require("./v3_theme/index.js"),er=require("./v3_theme/ds-theme-provider.js"),rr=require("./v3_theme/use-theme-mode.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingDots=t.LoadingDots,exports.LoadingDotsSpinner=o.LoadingDotsSpinner,exports.LoadingSpinner=i.LoadingSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=a.Avatar,exports.Badge=n.Badge,exports.BoxContainer=p.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.Calendar=d.Calendar,exports.Card=x.Card,exports.Checkbox=m.Checkbox,exports.CountdownTimer=g.CountdownTimer,exports.DashedBorder=h.DashedBorder,exports.DataTable=c.DataTable,exports.DateInput=T.DateInput,exports.DateNavigator=q.DateNavigator,exports.DateRangeInput=j.DateRangeInput,exports.Divider=S.Divider,exports.Drawer=b.Drawer,exports.ESignature=k.ESignature,exports.ErrorDisplay=V.ErrorDisplay,exports.ErrorDisplayHelper=v.ErrorDisplayHelper,exports.Example=_.Example,exports.FeedbackRating=y.FeedbackRating,exports.FileDownload=B.FileDownload,exports.FileUpload=I.FileUpload,exports.Filter=M.Filter,exports.Footer=C.Footer,exports.Form=D.Form,exports.Component=P.Component,exports.FullscreenImageCarousel=P.FullscreenImageCarousel,exports.HistogramSlider=f.HistogramSlider,exports.ImageButton=F.ImageButton,exports.Input=L.Input,exports.InputGroup=w.InputGroup,exports.InputMultiSelect=R.InputMultiSelect,exports.InputNestedMultiSelect=A.InputNestedMultiSelect,exports.InputNestedSelect=E.InputNestedSelect,exports.InputRangeSelect=N.InputRangeSelect,exports.InputRangeSlider=W.InputRangeSlider,exports.InputSelect=G.InputSelect,exports.InputSlider=O.InputSlider,exports.Textarea=H.Textarea,exports.LanguageSwitcher=Q.LanguageSwitcher,exports.Layout=U.Layout,exports.LinkList=z.LinkList,exports.Markup=K.Markup,exports.MaskedInput=X.MaskedInput,exports.Masthead=Y.Masthead,exports.Menu=J.Menu,exports.MenuTrigger=J.MenuTrigger,exports.Modal=Z.Modal,exports.ModalV2=$.ModalV2,exports.Navbar=ee.Navbar,exports.NBComponent=re.NBComponent,exports.NotificationBanner=re.NotificationBanner,exports.withNotificationBanner=te.withNotificationBanner,exports.OtpInput=oe.OtpInput,exports.Overlay=ie.Overlay,exports.Pagination=se.Pagination,exports.PhoneNumberInput=ae.PhoneNumberInput,exports.Pill=ne.Pill,exports.Popover=pe.Popover,exports.PopoverInline=ue.PopoverInline,exports.PopoverTrigger=le.PopoverTrigger,exports.PredictiveTextInput=de.PredictiveTextInput,exports.ProgressIndicator=xe.ProgressIndicator,exports.RadioButton=me.RadioButton,exports.SelectHistogram=ge.SelectHistogram,exports.Sidenav=he.Sidenav,exports.SingpassButton=ce.SingpassButton,exports.SmartAppBanner=Te.SmartAppBanner,exports.Tab=qe.Tab,exports.Table=je.Table,exports.Tag=Se.Tag,exports.TextList=be.TextList,exports.ThemeProvider=ke.ThemeProvider,exports.useInheritedThemeScope=Ve.useInheritedThemeScope,exports.useTheme=Ve.useTheme,exports.Border=ve.Border,exports.BorderStyle=ve.BorderStyle,exports.BorderThickness=ve.BorderThickness,exports.Breakpoint=_e.Breakpoint,exports.Colour=ye.Colour,exports.PrimitiveColours=ye.PrimitiveColours,exports.SemanticColours=ye.SemanticColours,exports.ComponentToken=Be.ComponentToken,exports.Font=Ie.Font,exports.FontSpec=Ie.FontSpec,exports.MediaQuery=Me.MediaQuery,exports.Motion=Ce.Motion,exports.Radius=De.Radius,exports.Shadow=Pe.Shadow,exports.Spacing=fe.Spacing,exports.THEME_TYPES=Fe.THEME_TYPES,exports.extractFdsCssVariableName=Le.extractFdsCssVariableName,exports.formatUnitValue=Le.formatUnitValue,exports.getInheritedInlineCssVariables=Le.getInheritedInlineCssVariables,exports.normalizeCssLengthValue=Le.normalizeCssLengthValue,exports.parseCSSVariableValue=Le.parseCSSVariableValue,exports.parsePxOrRemValue=Le.parsePxOrRemValue,exports.generateFont=we.generateFont,exports.generateFontProperties=we.generateFontProperties,exports.getEffectiveTokenOrCustom=Re.getEffectiveTokenOrCustom,exports.getResolvedValue=Re.getResolvedValue,exports.getTokenOrDefault=Re.getTokenOrDefault,exports.isTokenFromSet=Re.isTokenFromSet,exports.isTokenWithPrefix=Re.isTokenWithPrefix,exports.toCssValue=Re.toCssValue,exports.useApplyStyle=Ae.useApplyStyle,exports.useDesignToken=Ee.useDesignToken,exports.useResolvedTokenValue=Ee.useResolvedTokenValue,exports.DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT=Ne.DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,exports.useMaxWidthMediaQuery=Ne.useMaxWidthMediaQuery,exports.useMediaQuery=Ne.useMediaQuery,exports.useMinWidthMediaQuery=Ne.useMinWidthMediaQuery,exports.useResolvedBreakpointToken=Ne.useResolvedBreakpointToken,exports.TimeRangePicker=We.TimeRangePicker,exports.TimeSlotBar=Ge.TimeSlotBar,exports.TimeSlotBarWeek=Oe.TimeSlotBarWeek,exports.TimeSlotWeekView=He.TimeSlotWeekView,exports.Timeline=Qe.Timeline,exports.Timepicker=Ue.Timepicker,exports.TimeTable=ze.TimeTable,exports.Toast=Ke.Toast,exports.Toggle=Xe.Toggle,exports.Typography=Ye.Typography,exports.UneditableSection=Je.UneditableSection,exports.UnitNumberInput=Ze.UnitNumberInput,exports.V3_A11yPlaygroundTheme=$e.V3_A11yPlaygroundTheme,exports.V3_BookingSGTheme=$e.V3_BookingSGTheme,exports.V3_Border=$e.V3_Border,exports.V3_Breakpoint=$e.V3_Breakpoint,exports.V3_CCubeTheme=$e.V3_CCubeTheme,exports.V3_Colour=$e.V3_Colour,exports.V3_Font=$e.V3_Font,exports.V3_IMDATheme=$e.V3_IMDATheme,exports.V3_LifeSGTheme=$e.V3_LifeSGTheme,exports.V3_MediaQuery=$e.V3_MediaQuery,exports.V3_Motion=$e.V3_Motion,exports.V3_MyLegacyTheme=$e.V3_MyLegacyTheme,exports.V3_OneServiceTheme=$e.V3_OneServiceTheme,exports.V3_PATheme=$e.V3_PATheme,exports.V3_RBSTheme=$e.V3_RBSTheme,exports.V3_Radius=$e.V3_Radius,exports.V3_SGWDigitalLobbyTheme=$e.V3_SGWDigitalLobbyTheme,exports.V3_SGWDigitalLobbyThemeBase=$e.V3_SGWDigitalLobbyThemeBase,exports.V3_SMGSTheme=$e.V3_SMGSTheme,exports.V3_SPFTheme=$e.V3_SPFTheme,exports.V3_Shadow=$e.V3_Shadow,exports.V3_Spacing=$e.V3_Spacing,exports.V3_SupportGoWhereTheme=$e.V3_SupportGoWhereTheme,exports.V3_SupportGoWhereThemeBase=$e.V3_SupportGoWhereThemeBase,exports.V3_DSThemeProvider=er.V3_DSThemeProvider,exports.createThemeWithColourMode=rr.createThemeWithColourMode,exports.getSystemColourMode=rr.getSystemColourMode,exports.useDSTheme=rr.useDSTheme;
+"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-dots/loading-dots.js"),i=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),o=require("./animations/loading-spinner/loading-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("./avatar/avatar.js"),a=require("./badge/badge.js"),p=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),d=require("./calendar/calendar.js"),x=require("./card/card.js"),m=require("./checkbox/checkbox.js"),g=require("./countdown-timer/countdown-timer.js"),c=require("./dashed-border/dashed-border.js"),q=require("./data-table/data-table.js"),j=require("./date-input/date-input.js"),b=require("./date-navigator/date-navigator.js"),h=require("./date-range-input/date-range-input.js"),T=require("./divider/divider.js"),k=require("./drawer/drawer.js"),S=require("./e-signature/e-signature.js"),v=require("./error-display/error-display.js"),I=require("./error-display/helper.js"),y=require("./example/example.js"),B=require("./feedback-rating/feedback-rating.js"),M=require("./file-download/file-download.js"),w=require("./file-upload/file-upload.js"),D=require("./filter/filter.js"),P=require("./footer/footer.js"),f=require("./form/index.js"),C=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),F=require("./histogram-slider/histogram-slider.js"),L=require("./image-button/image-button.js"),N=require("./input/input.js"),R=require("./input-group/input-group.js"),E=require("./input-multi-select/input-multi-select.js"),A=require("./input-nested-multi-select/input-nested-multi-select.js"),H=require("./input-nested-select/input-nested-select.js"),Q=require("./input-range-select/input-range-select.js"),U=require("./input-range-slider/input-range-slider.js"),V=require("./input-select/input-select.js"),W=require("./input-slider/input-slider.js"),O=require("./input-textarea/textarea.js"),G=require("./language-switcher/language-switcher.js"),Y=require("./layout/index.js"),_=require("./link-list/link-list.js"),z=require("./markup/markup.js"),J=require("./masked-input/masked-input.js"),K=require("./masthead/masthead.js"),X=require("./menu/menu.js"),Z=require("./modal/index.js"),$=require("./modal-v2/index.js"),ee=require("./navbar/navbar.js"),re=require("./notification-banner/notification-banner.js"),te=require("./notification-banner/notification-banner-hoc.js"),ie=require("./otp-input/otp-input.js"),oe=require("./overlay/overlay.js"),se=require("./pagination/pagination.js"),ne=require("./phone-number-input/phone-number-input.js"),ae=require("./pill/pill.js"),pe=require("./popover/popover.js"),ue=require("./popover/popover-inline/popover-inline.js"),le=require("./popover/popover-trigger.js"),de=require("./predictive-text-input/predictive-text-input.js"),xe=require("./progress-indicator/progress-indicator.js"),me=require("./radio-button/radio-button.js"),ge=require("./select-histogram/select-histogram.js"),ce=require("./sidenav/sidenav.js"),qe=require("./singpass-button/singpass-button.js"),je=require("./smart-app-banner/smart-app-banner.js"),be=require("./tab/tab.js"),he=require("./table/table.js"),Te=require("./tag/tag.js"),ke=require("./text-list/index.js"),Se=require("./theme/theme-provider/index.js"),ve=require("./theme/theme-provider/hooks.js"),Ie=require("./theme/tokens/border.js"),ye=require("./theme/tokens/breakpoint.js"),Be=require("./theme/tokens/colour.js"),Me=require("./theme/tokens/component.js"),we=require("./theme/tokens/font.js"),De=require("./theme/tokens/media-query.js"),Pe=require("./theme/tokens/motion.js"),fe=require("./theme/tokens/radius.js"),Ce=require("./theme/tokens/shadow.js"),Fe=require("./theme/tokens/spacing.js"),Le=require("./theme/types.js"),Ne=require("./theme/utils/css-variable.js"),Re=require("./theme/utils/use-apply-styles.js"),Ee=require("./theme/utils/use-design-token.js"),Ae=require("./theme/utils/use-media-query.js"),He=require("./time-range-picker/time-range-picker.js"),Qe=require("./time-slot-bar/time-slot-bar.js"),Ue=require("./time-slot-bar-week/time-slot-bar-week.js"),Ve=require("./time-slot-week-view/time-slot-week-view.js"),We=require("./timeline/timeline.js"),Oe=require("./timepicker/timepicker.js"),Ge=require("./timetable/timetable.js"),Ye=require("./toast/toast.js"),_e=require("./toggle/toggle.js"),ze=require("./typography/index.js"),Je=require("./uneditable-section/index.js"),Ke=require("./unit-number/unit-number-input.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingDots=t.LoadingDots,exports.LoadingDotsSpinner=i.LoadingDotsSpinner,exports.LoadingSpinner=o.LoadingSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=n.Avatar,exports.Badge=a.Badge,exports.BoxContainer=p.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.Calendar=d.Calendar,exports.Card=x.Card,exports.Checkbox=m.Checkbox,exports.CountdownTimer=g.CountdownTimer,exports.DashedBorder=c.DashedBorder,exports.DataTable=q.DataTable,exports.DateInput=j.DateInput,exports.DateNavigator=b.DateNavigator,exports.DateRangeInput=h.DateRangeInput,exports.Divider=T.Divider,exports.Drawer=k.Drawer,exports.ESignature=S.ESignature,exports.ErrorDisplay=v.ErrorDisplay,exports.ErrorDisplayHelper=I.ErrorDisplayHelper,exports.Example=y.Example,exports.FeedbackRating=B.FeedbackRating,exports.FileDownload=M.FileDownload,exports.FileUpload=w.FileUpload,exports.Filter=D.Filter,exports.Footer=P.Footer,exports.Form=f.Form,exports.Component=C.Component,exports.FullscreenImageCarousel=C.FullscreenImageCarousel,exports.HistogramSlider=F.HistogramSlider,exports.ImageButton=L.ImageButton,exports.Input=N.Input,exports.InputGroup=R.InputGroup,exports.InputMultiSelect=E.InputMultiSelect,exports.InputNestedMultiSelect=A.InputNestedMultiSelect,exports.InputNestedSelect=H.InputNestedSelect,exports.InputRangeSelect=Q.InputRangeSelect,exports.InputRangeSlider=U.InputRangeSlider,exports.InputSelect=V.InputSelect,exports.InputSlider=W.InputSlider,exports.Textarea=O.Textarea,exports.LanguageSwitcher=G.LanguageSwitcher,exports.Layout=Y.Layout,exports.LinkList=_.LinkList,exports.Markup=z.Markup,exports.MaskedInput=J.MaskedInput,exports.Masthead=K.Masthead,exports.Menu=X.Menu,exports.MenuTrigger=X.MenuTrigger,exports.Modal=Z.Modal,exports.ModalV2=$.ModalV2,exports.Navbar=ee.Navbar,exports.NBComponent=re.NBComponent,exports.NotificationBanner=re.NotificationBanner,exports.withNotificationBanner=te.withNotificationBanner,exports.OtpInput=ie.OtpInput,exports.Overlay=oe.Overlay,exports.Pagination=se.Pagination,exports.PhoneNumberInput=ne.PhoneNumberInput,exports.Pill=ae.Pill,exports.Popover=pe.Popover,exports.PopoverInline=ue.PopoverInline,exports.PopoverTrigger=le.PopoverTrigger,exports.PredictiveTextInput=de.PredictiveTextInput,exports.ProgressIndicator=xe.ProgressIndicator,exports.RadioButton=me.RadioButton,exports.SelectHistogram=ge.SelectHistogram,exports.Sidenav=ce.Sidenav,exports.SingpassButton=qe.SingpassButton,exports.SmartAppBanner=je.SmartAppBanner,exports.Tab=be.Tab,exports.Table=he.Table,exports.Tag=Te.Tag,exports.TextList=ke.TextList,exports.ThemeProvider=Se.ThemeProvider,exports.useInheritedThemeScope=ve.useInheritedThemeScope,exports.useTheme=ve.useTheme,exports.Border=Ie.Border,exports.BorderStyle=Ie.BorderStyle,exports.BorderThickness=Ie.BorderThickness,exports.Breakpoint=ye.Breakpoint,exports.Colour=Be.Colour,exports.PrimitiveColours=Be.PrimitiveColours,exports.SemanticColours=Be.SemanticColours,exports.ComponentToken=Me.ComponentToken,exports.Font=we.Font,exports.FontSpec=we.FontSpec,exports.MediaQuery=De.MediaQuery,exports.Motion=Pe.Motion,exports.Radius=fe.Radius,exports.Shadow=Ce.Shadow,exports.Spacing=Fe.Spacing,exports.THEME_TYPES=Le.THEME_TYPES,exports.formatUnitValue=Ne.formatUnitValue,exports.parsePxOrRemValue=Ne.parsePxOrRemValue,exports.useApplyStyle=Re.useApplyStyle,exports.useDesignToken=Ee.useDesignToken,exports.useMaxWidthMediaQuery=Ae.useMaxWidthMediaQuery,exports.useMediaQuery=Ae.useMediaQuery,exports.useMinWidthMediaQuery=Ae.useMinWidthMediaQuery,exports.useResolvedBreakpointToken=Ae.useResolvedBreakpointToken,exports.TimeRangePicker=He.TimeRangePicker,exports.TimeSlotBar=Qe.TimeSlotBar,exports.TimeSlotBarWeek=Ue.TimeSlotBarWeek,exports.TimeSlotWeekView=Ve.TimeSlotWeekView,exports.Timeline=We.Timeline,exports.Timepicker=Oe.Timepicker,exports.TimeTable=Ge.TimeTable,exports.Toast=Ye.Toast,exports.Toggle=_e.Toggle,exports.Typography=ze.Typography,exports.UneditableSection=Je.UneditableSection,exports.UnitNumberInput=Ke.UnitNumberInput;
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),i=require("react"),s=require("../input/input.js"),t=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var d=require("../shared/dropdown-list/dropdown-list.js"),o=require("../shared/dropdown-list/dropdown-list-state.js"),n=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var u=require("../shared/dropdown-wrapper/element-with-dropdown.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),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/virtuoso-components.js");var p=require("../shared/dropdown-wrapper/dropdown-wrapper.js"),h=require("./input-group-list-addon.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=b(a);const j=(a,b)=>{var{addon:j,error:q,onChange:m,readOnly:f,disabled:y,className:w,onBlur:v,noBorder:g,"data-testid":_,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":T,"aria-label":O}=a,R=e.__rest(a,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:N,listExtractor:k,enableSearch:A,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:D,onSearch:H,placeholder:L="Select",displayValueExtractor:P,"data-selector-testid":G,options:V,selectedOption:M,onSelectOption:$,optionsLoadState:F,optionTruncationType:W,onRetry:Z,onHideOptions:z,onShowOptions:J,dropdownZIndex:K,dropdownRootNode:Q,"aria-label":U}=j.attributes,{position:X="left"}=j,[Y,ee]=i.useState(M),[re,ae]=i.useState(!1),[ie,se]=i.useState(!1),te=l.useId(),le=`${te}-listbox`,de=`${te}-instruction`,oe=`${te}-combobox-label`,ne=`${te}-textbox-label`,ue=i.useRef(null),ce=i.useRef(null);i.useEffect((()=>{ee(M)}),[M]);const pe=()=>{if(Y)return P?P(Y):N?N(Y):Y.toString()},he=e=>{e?null==J||J():null==z||z()},be=(e,r)=>{var a;null===(a=ce.current)||void 0===a||a.focus(),ee(e),ae(!1),he(!1),null==$||$(e,r)},xe=()=>{re&&(ae(!1),he(!1))},je=()=>{ae(!0),he(!0),se(!0)},qe=e=>{ae(!1),he(!1),"click"!==e&&(se(!1),null==v||v())},me=()=>{var e;null===(e=ce.current)||void 0===e||e.focus(),ae(!1),he(!1)},fe=()=>r.jsxs("div",{children:[r.jsx(n.ExpandableElement,{ref:ce,disabled:y,expanded:re,listboxId:le,popupRole:"listbox",readOnly:f,"aria-labelledby":t.concatIds(I,oe),"aria-describedby":t.concatIds(S,de),"aria-invalid":T,"data-position":X,className:x.default(g&&h.expandableElementNoBorder),children:r.jsx(p.LabelContainer,{disabled:y,children:Y?r.jsx(p.ValueLabel,{children:pe()}):r.jsx(p.PlaceholderLabel,{children:L})})}),r.jsx(t.VisuallyHidden,{id:de,children:"Press space to open options"})]}),ye=()=>r.jsx(d.DropdownList,{listboxId:le,listItems:V,onSelectItem:be,onDismiss:xe,valueExtractor:N,listExtractor:k,enableSearch:A,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:D,onSearch:H,selectedItems:Y?[Y]:[],itemsLoadState:F,itemTruncationType:W,onRetry:Z,matchElementWidth:!0});return r.jsx(o.DropdownListState,{children:r.jsxs(c.InputBox,{focused:ie,disabled:y,readOnly:f,error:q,ref:ue,noBorder:g,"data-testid":_,tabIndex:-1,onFocus:()=>{ie||re||se(!0)},onBlur:e=>{ie&&!re&&ue.current&&!ue.current.contains(e.relatedTarget)&&(se(!1),null==v||v())},"data-position":X,className:x.default(h.fieldWrapper,w),children:[r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:oe,children:U}),r.jsx("div",{"data-testid":G,className:h.fieldSelector,children:f?Y?r.jsx("div",{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":T,className:h.selectorReadOnly,children:r.jsx(p.ValueLabel,{children:pe()})}):null:r.jsx(u.ElementWithDropdown,{enabled:!f&&!y,isOpen:re,renderElement:fe,renderDropdown:ye,onOpen:je,onClose:qe,onDismiss:me,clickToToggle:!0,offset:8,alignment:"right"===X?"right":"left",fitAvailableHeight:!0,customZIndex:K,rootNode:Q,positionRef:ue})}),r.jsx("div",{"data-position":X,className:x.default(h.divider,f&&h.dividerReadOnly)}),r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:ne,children:O}),r.jsx("div",{"data-position":X,className:x.default(h.fieldInput,g&&h.fieldInputNoBorder,f&&h.fieldInputReadOnly),children:r.jsx(s.Input,Object.assign({ref:b},R,{readOnly:f,disabled:y,error:q,onChange:e=>{m&&m(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":t.concatIds(I,ne),"aria-describedby":S,"aria-invalid":T}))})]})})},q=b(i).default.forwardRef(j);exports.Component=j,exports.InputGroupListAddon=q;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),a=require("react"),s=require("../input/input.js"),t=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_mloii0.css");var d=require("../shared/dropdown-list/dropdown-list.js"),o=require("../shared/dropdown-list/dropdown-list-state.js"),n=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var u=require("../shared/dropdown-wrapper/element-with-dropdown.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_konwm.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),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/virtuoso-components.js");var p=require("../shared/dropdown-wrapper/dropdown-wrapper.js"),h=require("./input-group-list-addon.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=b(i);const j=(i,b)=>{var{addon:j,error:q,onChange:m,readOnly:f,disabled:y,className:w,onBlur:v,noBorder:g,"data-testid":_,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":T,"aria-label":O}=i,R=e.__rest(i,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:N,listExtractor:k,enableSearch:A,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:D,onSearch:H,placeholder:L="Select",displayValueExtractor:P,"data-selector-testid":G,options:V,selectedOption:M,onSelectOption:$,optionsLoadState:F,optionTruncationType:W,onRetry:Z,onHideOptions:z,onShowOptions:J,dropdownZIndex:K,dropdownRootNode:Q,"aria-label":U}=j.attributes,{position:X="left"}=j,[Y,ee]=a.useState(M),[re,ie]=a.useState(!1),[ae,se]=a.useState(!1),te=l.useId(),le=`${te}-listbox`,de=`${te}-instruction`,oe=`${te}-combobox-label`,ne=`${te}-textbox-label`,ue=a.useRef(null),ce=a.useRef(null);a.useEffect((()=>{ee(M)}),[M]);const pe=()=>{if(Y)return P?P(Y):N?N(Y):Y.toString()},he=e=>{e?null==J||J():null==z||z()},be=(e,r)=>{var i;null===(i=ce.current)||void 0===i||i.focus(),ee(e),ie(!1),he(!1),null==$||$(e,r)},xe=()=>{re&&(ie(!1),he(!1))},je=()=>{ie(!0),he(!0),se(!0)},qe=e=>{ie(!1),he(!1),"click"!==e&&(se(!1),null==v||v())},me=()=>{var e;null===(e=ce.current)||void 0===e||e.focus(),ie(!1),he(!1)},fe=()=>r.jsxs("div",{children:[r.jsx(n.ExpandableElement,{ref:ce,disabled:y,expanded:re,listboxId:le,popupRole:"listbox",readOnly:f,"aria-labelledby":t.concatIds(I,oe),"aria-describedby":t.concatIds(S,de),"aria-invalid":T,"data-position":X,className:x.default(g&&h.expandableElementNoBorder),children:r.jsx(p.LabelContainer,{disabled:y,children:Y?r.jsx(p.ValueLabel,{children:pe()}):r.jsx(p.PlaceholderLabel,{children:L})})}),r.jsx(t.VisuallyHidden,{id:de,children:"Press space to open options"})]}),ye=()=>r.jsx(d.DropdownList,{listboxId:le,listItems:V,onSelectItem:be,onDismiss:xe,valueExtractor:N,listExtractor:k,enableSearch:A,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:D,onSearch:H,selectedItems:Y?[Y]:[],itemsLoadState:F,itemTruncationType:W,onRetry:Z,matchElementWidth:!0});return r.jsx(o.DropdownListState,{children:r.jsxs(c.InputBox,{focused:ae,disabled:y,readOnly:f,error:q,ref:ue,noBorder:g,"data-testid":_,tabIndex:-1,onFocus:()=>{ae||re||se(!0)},onBlur:e=>{ae&&!re&&ue.current&&!ue.current.contains(e.relatedTarget)&&(se(!1),null==v||v())},"data-position":X,className:x.default(h.fieldWrapper,w),children:[r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:oe,children:U}),r.jsx("div",{"data-testid":G,className:h.fieldSelector,children:f?Y?r.jsx("div",{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":T,className:h.selectorReadOnly,children:r.jsx(p.ValueLabel,{children:pe()})}):null:r.jsx(u.ElementWithDropdown,{enabled:!f&&!y,isOpen:re,renderElement:fe,renderDropdown:ye,onOpen:je,onClose:qe,onDismiss:me,clickToToggle:!0,offset:8,alignment:"right"===X?"right":"left",fitAvailableHeight:!0,customZIndex:K,rootNode:Q,positionRef:ue})}),r.jsx("div",{"data-position":X,className:x.default(h.divider,f&&h.dividerReadOnly)}),r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:ne,children:O}),r.jsx("div",{"data-position":X,className:x.default(h.fieldInput,g&&h.fieldInputNoBorder,f&&h.fieldInputReadOnly),children:r.jsx(s.Input,Object.assign({ref:b},R,{readOnly:f,disabled:y,error:q,onChange:e=>{m&&m(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":t.concatIds(I,ne),"aria-describedby":S,"aria-invalid":T}))})]})})},q=b(a).default.forwardRef(j);exports.Component=j,exports.InputGroupListAddon=q;
 //# sourceMappingURL=input-group-list-addon.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input-group-list-addon.js","sources":["../../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group-list-addon.styles\";\nimport type { 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 = \"left\" } = 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 <ValueLabel>{getDisplayValue()}</ValueLabel>;\n }\n\n return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n };\n\n const renderSelectorContent = () => (\n <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <div>\n <ExpandableElement\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 data-position={position}\n className={clsx(\n noBorder && styles.expandableElementNoBorder\n )}\n >\n {renderSelectorContent()}\n </ExpandableElement>\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 <div\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 className={styles.selectorReadOnly}\n >\n <ValueLabel>{getDisplayValue()}</ValueLabel>\n </div>\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 <InputBox\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n ref={nodeRef}\n noBorder={noBorder}\n data-testid={testId}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n data-position={position}\n className={clsx(styles.fieldWrapper, className)}\n >\n <VisuallyHidden aria-hidden id={comboboxLabelId}>\n {comboboxAriaLabel}\n </VisuallyHidden>\n <div\n data-testid={selectorTestId}\n className={styles.fieldSelector}\n >\n {renderSelector()}\n </div>\n <div\n data-position={position}\n className={clsx(\n styles.divider,\n readOnly && styles.dividerReadOnly\n )}\n />\n <VisuallyHidden aria-hidden id={textboxLabelId}>\n {textboxAriaLabel}\n </VisuallyHidden>\n <div\n data-position={position}\n className={clsx(\n styles.fieldInput,\n noBorder && styles.fieldInputNoBorder,\n readOnly && styles.fieldInputReadOnly\n )}\n >\n <Input\n ref={ref}\n {...otherProps}\n readOnly={readOnly}\n disabled={disabled}\n error={error}\n onChange={handleInputChange}\n data-testid=\"input\"\n styleType=\"no-border\"\n aria-labelledby={concatIds(\n ariaLabelledBy,\n textboxLabelId\n )}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n />\n </div>\n </InputBox>\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","ExpandableElement","expanded","popupRole","concatIds","clsx","styles.expandableElementNoBorder","LabelContainer","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","InputBox","tabIndex","onFocus","e","contains","relatedTarget","styles.fieldWrapper","styles.fieldSelector","role","styles.selectorReadOnly","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","styles.divider","styles.dividerReadOnly","styles.fieldInput","styles.fieldInputNoBorder","styles.fieldInputReadOnly","Input","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}
1	+ {"version":3,"file":"input-group-list-addon.js","sources":["../../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group-list-addon.styles\";\nimport type { 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 = \"left\" } = 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 <ValueLabel>{getDisplayValue()}</ValueLabel>;\n }\n\n return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n };\n\n const renderSelectorContent = () => (\n <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <div>\n <ExpandableElement\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 data-position={position}\n className={clsx(\n noBorder && styles.expandableElementNoBorder\n )}\n >\n {renderSelectorContent()}\n </ExpandableElement>\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 <div\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 className={styles.selectorReadOnly}\n >\n <ValueLabel>{getDisplayValue()}</ValueLabel>\n </div>\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 <InputBox\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n ref={nodeRef}\n noBorder={noBorder}\n data-testid={testId}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n data-position={position}\n className={clsx(styles.fieldWrapper, className)}\n >\n <VisuallyHidden aria-hidden id={comboboxLabelId}>\n {comboboxAriaLabel}\n </VisuallyHidden>\n <div\n data-testid={selectorTestId}\n className={styles.fieldSelector}\n >\n {renderSelector()}\n </div>\n <div\n data-position={position}\n className={clsx(\n styles.divider,\n readOnly && styles.dividerReadOnly\n )}\n />\n <VisuallyHidden aria-hidden id={textboxLabelId}>\n {textboxAriaLabel}\n </VisuallyHidden>\n <div\n data-position={position}\n className={clsx(\n styles.fieldInput,\n noBorder && styles.fieldInputNoBorder,\n readOnly && styles.fieldInputReadOnly\n )}\n >\n <Input\n ref={ref}\n {...otherProps}\n readOnly={readOnly}\n disabled={disabled}\n error={error}\n onChange={handleInputChange}\n data-testid=\"input\"\n styleType=\"no-border\"\n aria-labelledby={concatIds(\n ariaLabelledBy,\n textboxLabelId\n )}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n />\n </div>\n </InputBox>\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","ExpandableElement","expanded","popupRole","concatIds","clsx","styles.expandableElementNoBorder","LabelContainer","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","InputBox","tabIndex","onFocus","e","contains","relatedTarget","styles.fieldWrapper","styles.fieldSelector","role","styles.selectorReadOnly","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","styles.divider","styles.dividerReadOnly","styles.fieldInput","styles.fieldInputNoBorder","styles.fieldInputReadOnly","Input","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}

package/cjs/input-group/input-group.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./input-group.styles_fpy81r.css");exports.addonWrapper="afvd13",exports.labelAddonContainer="l1s6ick6",exports.noAddonWrapper="nx53mj4";
+"use strict";require("./input-group.styles_bqye6f.css");exports.addonWrapper="afvd13",exports.labelAddonContainer="l1s6ick6",exports.noAddonWrapper="nx53mj4";
 //# sourceMappingURL=input-group.styles.js.map

package/{input-group/input-group.styles_fpy81r.css → cjs/input-group/input-group.styles_bqye6f.css} RENAMED Viewed

@@ -1,3 +1,3 @@
 .afvd13{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:0 var(--fds-spacing-16);}.afvd13[data-read-only="true"]{padding:0;}.afvd13[data-no-border="true"]{padding:0;}.afvd13[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
 .nx53mj4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0 var(--fds-spacing-16);}.nx53mj4[data-read-only="true"]{padding:0;}.nx53mj4[data-no-border="true"]{padding:0;}
-.l1s6ick6{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-12);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.l1s6ick6 svg{height:1em;width:1em;}.l1s6ick6[data-disabled="true"]{color:var(--fds-colour-text-subtler);}.l1s6ick6[data-read-only="true"]{margin-right:var(--fds-spacing-4);}.l1s6ick6[data-position="right"]{margin-right:0;margin-left:var(--fds-spacing-12);}.l1s6ick6[data-position="right"][data-read-only="true"]{margin-right:0;margin-left:var(--fds-spacing-4);}
+.l1s6ick6{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-12);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.l1s6ick6 svg{height:1em;width:1em;}.l1s6ick6[data-disabled="true"]{color:var(--fds-colour-text-subtler);}.l1s6ick6[data-read-only="true"]{margin-right:var(--fds-spacing-4);}.l1s6ick6[data-position="right"]{margin-right:0;margin-left:var(--fds-spacing-12);}.l1s6ick6[data-position="right"][data-read-only="true"]{margin-right:0;margin-left:var(--fds-spacing-4);}

package/cjs/input-multi-select/input-multi-select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../external/lodash/findIndex.js"),t=require("react");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var i=require("../shared/dropdown-list/dropdown-list.js"),a=require("../shared/dropdown-list/dropdown-list-state.js"),l=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../_virtual/_tslib.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var n=require("../shared/dropdown-wrapper/element-with-dropdown.js"),o=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),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/virtuoso-components.js");var d=require("../shared/dropdown-wrapper/dropdown-wrapper.js");exports.InputMultiSelect=({selectedOptions:u,placeholder:c="Select",options:p,disabled:h,error:m,className:q,"data-testid":x,id:j,"aria-labelledby":b,"aria-describedby":w,"aria-invalid":f,enableSearch:g=!1,searchFunction:y,searchPlaceholder:v,valueExtractor:_,listExtractor:S,onSelectOptions:T,onShowOptions:I,onHideOptions:A,onRetry:L,optionsLoadState:k="success",optionTruncationType:C="end",renderListItem:D,hideNoResultsDisplay:E,noResultsDescription:R,customLabels:O,renderCustomCallToAction:P,onBlur:H,variant:N="default",readOnly:B,alignment:G,dropdownZIndex:M,maxSelectable:F,dropdownRootNode:W,dropdownWidth:Z})=>{const{allSelectedLabel:z,multiSelectedLabel:V}=O||{},[$,J]=t.useState(u||[]),[K,Q]=t.useState(!1),[U,X]=t.useState(!1),Y=s.useId(),ee=t.useRef(null),re=t.useRef(null);t.useEffect((()=>{J(u||[])}),[u]);const te=()=>{$&&$.length>0||F?(J([]),oe([])):(J(p),oe(p))},se=(e,t)=>{const s=[...$],i=r.default($,(e=>(_?_(e):e)===t));i>-1?s.splice(i,1):s.push(e),J(s),oe(s)},ie=()=>{K&&(Q(!1),ne(!1))},ae=()=>{U||K||X(!0)},le=e=>{U&&!K&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==H||H())},ne=e=>{!e&&A&&A(),e&&I&&I()},oe=e=>{T&&T(e)};return e.jsx(a.DropdownListState,{children:e.jsx(n.ElementWithDropdown,{enabled:!B&&!h,isOpen:K,renderElement:()=>e.jsx(o.InputBox,{className:q,"data-testid":x,id:j,ref:ee,tabIndex:-1,onFocus:ae,onBlur:le,focused:U,disabled:h,readOnly:B,error:m,children:e.jsx(l.ExpandableElement,{ref:re,disabled:h,expanded:K,listboxId:Y,popupRole:"listbox",readOnly:B,variant:N,"aria-labelledby":b,"aria-describedby":w,"aria-invalid":f,children:e.jsx(d.LabelContainer,{disabled:h,children:$&&0!==$.length?e.jsx(d.ValueLabel,{variant:N,truncateType:C,children:p&&$.length===p.length?z||"All selected":V||`${$.length} selected`}):e.jsx(d.PlaceholderLabel,{variant:N,truncateType:C,children:c})})})}),renderDropdown:()=>e.jsx(i.DropdownList,{listboxId:Y,listItems:p,onSelectItem:se,onDismiss:ie,valueExtractor:_,listExtractor:S,enableSearch:g,searchFunction:y,searchPlaceholder:v,multiSelect:!0,maxSelectable:F,selectedItems:$,onSelectAll:te,onRetry:L,itemsLoadState:k,itemTruncationType:C,renderListItem:D,hideNoResultsDisplay:E,noResultsDescription:R,customLabels:O,renderCustomCallToAction:P,variant:N,width:Z,matchElementWidth:!0}),onOpen:()=>{Q(!0),ne(!0),X(!0)},onClose:e=>{Q(!1),ne(!1),"click"!==e&&(X(!1),null==H||H())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),ne(!1)},clickToToggle:!0,offset:8,alignment:G,fitAvailableHeight:!0,customZIndex:M,rootNode:W})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("../external/lodash/findIndex.js"),t=require("react");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_mloii0.css");var i=require("../shared/dropdown-list/dropdown-list.js"),l=require("../shared/dropdown-list/dropdown-list-state.js"),a=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../_virtual/_tslib.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var n=require("../shared/dropdown-wrapper/element-with-dropdown.js"),o=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_konwm.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),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/virtuoso-components.js");var d=require("../shared/dropdown-wrapper/dropdown-wrapper.js");exports.InputMultiSelect=({selectedOptions:u,placeholder:c="Select",options:p,disabled:h,error:m,className:q,"data-testid":x,id:j,"aria-labelledby":b,"aria-describedby":w,"aria-invalid":g,enableSearch:f=!1,searchFunction:y,searchPlaceholder:v,valueExtractor:_,listExtractor:S,onSelectOptions:T,onShowOptions:I,onHideOptions:A,onRetry:L,optionsLoadState:k="success",optionTruncationType:C="end",renderListItem:D,hideNoResultsDisplay:E,noResultsDescription:R,customLabels:O,renderCustomCallToAction:P,onBlur:H,variant:N="default",readOnly:B,alignment:G,dropdownZIndex:M,maxSelectable:F,dropdownRootNode:W,dropdownWidth:Z})=>{const{allSelectedLabel:V,multiSelectedLabel:$}=O||{},[z,J]=t.useState(u||[]),[K,Q]=t.useState(!1),[U,X]=t.useState(!1),Y=s.useId(),ee=t.useRef(null),re=t.useRef(null);t.useEffect((()=>{J(u||[])}),[u]);const te=()=>{z&&z.length>0||F?(J([]),oe([])):(J(p),oe(p))},se=(e,t)=>{const s=[...z],i=r.default(z,(e=>(_?_(e):e)===t));i>-1?s.splice(i,1):s.push(e),J(s),oe(s)},ie=()=>{K&&(Q(!1),ne(!1))},le=()=>{U||K||X(!0)},ae=e=>{U&&!K&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==H||H())},ne=e=>{!e&&A&&A(),e&&I&&I()},oe=e=>{T&&T(e)};return e.jsx(l.DropdownListState,{children:e.jsx(n.ElementWithDropdown,{enabled:!B&&!h,isOpen:K,renderElement:()=>e.jsx(o.InputBox,{className:q,"data-testid":x,id:j,ref:ee,tabIndex:-1,onFocus:le,onBlur:ae,focused:U,disabled:h,readOnly:B,error:m,children:e.jsx(a.ExpandableElement,{ref:re,disabled:h,expanded:K,listboxId:Y,popupRole:"listbox",readOnly:B,variant:N,"aria-labelledby":b,"aria-describedby":w,"aria-invalid":g,children:e.jsx(d.LabelContainer,{disabled:h,children:z&&0!==z.length?e.jsx(d.ValueLabel,{variant:N,truncateType:C,children:p&&z.length===p.length?V||"All selected":$||`${z.length} selected`}):e.jsx(d.PlaceholderLabel,{variant:N,truncateType:C,children:c})})})}),renderDropdown:()=>e.jsx(i.DropdownList,{listboxId:Y,listItems:p,onSelectItem:se,onDismiss:ie,valueExtractor:_,listExtractor:S,enableSearch:f,searchFunction:y,searchPlaceholder:v,multiSelect:!0,maxSelectable:F,selectedItems:z,onSelectAll:te,onRetry:L,itemsLoadState:k,itemTruncationType:C,renderListItem:D,hideNoResultsDisplay:E,noResultsDescription:R,customLabels:O,renderCustomCallToAction:P,variant:N,width:Z,matchElementWidth:!0}),onOpen:()=>{Q(!0),ne(!0),X(!0)},onClose:e=>{Q(!1),ne(!1),"click"!==e&&(X(!1),null==H||H())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),ne(!1)},clickToToggle:!0,offset:8,alignment:G,fitAvailableHeight:!0,customZIndex:M,rootNode:W})})};
 //# sourceMappingURL=input-multi-select.js.map

package/cjs/input-multi-select/input-multi-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-multi-select.js","sources":["../../../src/input-multi-select/input-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport findIndex from \"lodash/findIndex\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { InputMultiSelectProps } from \"./types\";\n\nexport const InputMultiSelect = <T, V>({\n selectedOptions,\n placeholder = \"Select\",\n options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n enableSearch = false,\n searchFunction,\n searchPlaceholder,\n valueExtractor,\n listExtractor,\n onSelectOptions,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n maxSelectable,\n dropdownRootNode,\n dropdownWidth,\n}: InputMultiSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const { allSelectedLabel, multiSelectedLabel } = customLabels \|\| {};\n const [selected, setSelected] = useState<T[]>(selectedOptions \|\| []);\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOptions \|\| []);\n }, [selectedOptions]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelectAllClick = () => {\n if ((selected && selected.length > 0) \|\| maxSelectable) {\n setSelected([]);\n performOnSelectOptions([]);\n } else {\n setSelected(options);\n performOnSelectOptions(options);\n }\n };\n\n const handleListItemClick = (item: T, extractedValue: T \| V) => {\n const selectedCopy = [...selected];\n\n // Check if it is a selection or deselection\n const itemIndex = findIndex(selected, (item) => {\n const valueToCompare = valueExtractor ? valueExtractor(item) : item;\n return valueToCompare === extractedValue;\n });\n\n if (itemIndex > -1) {\n // Item exists in selected. This indicates a deselection\n selectedCopy.splice(itemIndex, 1);\n } else {\n // Item does not exist in selected. This indicates a selection\n selectedCopy.push(item);\n }\n\n setSelected(selectedCopy);\n performOnSelectOptions(selectedCopy);\n };\n\n const handleListDismiss = () => {\n if (showOptions) {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n }\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 // HELPER FUNCTION\n // =============================================================================\n const getDisplayValue = () => {\n if (options && selected.length === options.length) {\n return allSelectedLabel \|\| \"All selected\";\n }\n\n return multiSelectedLabel \|\| `${selected.length} selected`;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (!show && onHideOptions) {\n onHideOptions();\n }\n\n if (show && onShowOptions) {\n onShowOptions();\n }\n };\n\n const performOnSelectOptions = (options: T[]) => {\n if (onSelectOptions) {\n onSelectOptions(options);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected \|\| selected.length === 0) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {getDisplayValue()}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n searchFunction={searchFunction}\n searchPlaceholder={searchPlaceholder}\n multiSelect\n maxSelectable={maxSelectable}\n selectedItems={selected}\n onSelectAll={handleSelectAllClick}\n onRetry={onRetry}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n renderListItem={renderListItem}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n renderCustomCallToAction={renderCustomCallToAction}\n variant={variant}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <DropdownListState>\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={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["selectedOptions","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","listExtractor","onSelectOptions","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","maxSelectable","dropdownRootNode","dropdownWidth","allSelectedLabel","multiSelectedLabel","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","useEffect","handleSelectAllClick","length","performOnSelectOptions","handleListItemClick","item","extractedValue","selectedCopy","itemIndex","findIndex","splice","push","handleListDismiss","triggerOptionDisplayCallback","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","multiSelect","selectedItems","onSelectAll","itemsLoadState","itemTruncationType","width","matchElementWidth","onOpen","onClose","reason","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"input-multi-select.js","sources":["../../../src/input-multi-select/input-multi-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport findIndex from \"lodash/findIndex\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { InputMultiSelectProps } from \"./types\";\n\nexport const InputMultiSelect = <T, V>({\n selectedOptions,\n placeholder = \"Select\",\n options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n enableSearch = false,\n searchFunction,\n searchPlaceholder,\n valueExtractor,\n listExtractor,\n onSelectOptions,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n maxSelectable,\n dropdownRootNode,\n dropdownWidth,\n}: InputMultiSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const { allSelectedLabel, multiSelectedLabel } = customLabels \|\| {};\n const [selected, setSelected] = useState<T[]>(selectedOptions \|\| []);\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOptions \|\| []);\n }, [selectedOptions]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelectAllClick = () => {\n if ((selected && selected.length > 0) \|\| maxSelectable) {\n setSelected([]);\n performOnSelectOptions([]);\n } else {\n setSelected(options);\n performOnSelectOptions(options);\n }\n };\n\n const handleListItemClick = (item: T, extractedValue: T \| V) => {\n const selectedCopy = [...selected];\n\n // Check if it is a selection or deselection\n const itemIndex = findIndex(selected, (item) => {\n const valueToCompare = valueExtractor ? valueExtractor(item) : item;\n return valueToCompare === extractedValue;\n });\n\n if (itemIndex > -1) {\n // Item exists in selected. This indicates a deselection\n selectedCopy.splice(itemIndex, 1);\n } else {\n // Item does not exist in selected. This indicates a selection\n selectedCopy.push(item);\n }\n\n setSelected(selectedCopy);\n performOnSelectOptions(selectedCopy);\n };\n\n const handleListDismiss = () => {\n if (showOptions) {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n }\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 // HELPER FUNCTION\n // =============================================================================\n const getDisplayValue = () => {\n if (options && selected.length === options.length) {\n return allSelectedLabel \|\| \"All selected\";\n }\n\n return multiSelectedLabel \|\| `${selected.length} selected`;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (!show && onHideOptions) {\n onHideOptions();\n }\n\n if (show && onShowOptions) {\n onShowOptions();\n }\n };\n\n const performOnSelectOptions = (options: T[]) => {\n if (onSelectOptions) {\n onSelectOptions(options);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected \|\| selected.length === 0) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {getDisplayValue()}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n searchFunction={searchFunction}\n searchPlaceholder={searchPlaceholder}\n multiSelect\n maxSelectable={maxSelectable}\n selectedItems={selected}\n onSelectAll={handleSelectAllClick}\n onRetry={onRetry}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n renderListItem={renderListItem}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n renderCustomCallToAction={renderCustomCallToAction}\n variant={variant}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <DropdownListState>\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={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["selectedOptions","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","listExtractor","onSelectOptions","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","maxSelectable","dropdownRootNode","dropdownWidth","allSelectedLabel","multiSelectedLabel","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","useEffect","handleSelectAllClick","length","performOnSelectOptions","handleListItemClick","item","extractedValue","selectedCopy","itemIndex","findIndex","splice","push","handleListDismiss","triggerOptionDisplayCallback","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","multiSelect","selectedItems","onSelectAll","itemsLoadState","itemTruncationType","width","matchElementWidth","onOpen","onClose","reason","_a","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/input-nested-multi-select/input-nested-multi-select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../external/lodash/isEmpty.js"),r=require("../external/lodash/isEqual.js"),a=require("react");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js"),s=require("../util/string-helper.js");require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css"),require("../shared/dropdown-list/dropdown-list.js"),require("../shared/dropdown-list/dropdown-list-state.js");var n=require("../shared/dropdown-list/expandable-element.js"),i=require("../shared/dropdown-list/nested-dropdown-list.js"),d=require("../shared/dropdown-list/nested-dropdown-list-helpers.js"),o=require("../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../shared/dropdown-wrapper/dropdown-wrapper.js"),c=require("../shared/input-wrapper/input-wrapper.js"),h=require("./helpers.js");exports.InputNestedMultiSelect=({placeholder:p="Select",options:m,disabled:b,error:y,className:j,"data-testid":w,id:q,"aria-labelledby":S,"aria-describedby":f,"aria-invalid":x,selectedKeyPaths:v,mode:P,valueToStringFunction:k,enableSearch:g,searchPlaceholder:T,hideNoResultsDisplay:I,noResultsDescription:R,customLabels:L,readOnly:E,onSearch:O,onSelectOptions:D,onShowOptions:N,onHideOptions:K,onRetry:A,onBlur:B,optionsLoadState:C="success",optionTruncationType:H="end",variant:_="default",alignment:W,dropdownZIndex:F,dropdownWidth:M,dropdownRootNode:Z})=>{const{multiSelectedLabel:G}=L||{},V=m,[$,z]=a.useState(v?d.buildKeyPathToSet(v):new Set),[J,Q]=a.useState([]),[U,X]=a.useState(!1),[Y,ee]=a.useState(!1),te=l.useId(),re=a.useRef(null),ae=a.useRef(null),le=a.useRef(null);a.useEffect((()=>{const e=v||[],t=h.getSelectedItems(V,e);z(d.buildKeyPathToSet(e)),Q(t)}),[v,V]);const se=(e,t)=>{const r=t.map((e=>({keyPath:e.keyPath,label:e.item.label,value:e.item.value})));z(d.buildKeyPathToSet(e)),Q(r),he(e,r)},ne=e=>{const t=pe(e),r=t.map((e=>e.keyPath));Q(t),z(d.buildKeyPathToSet(r)),he(r,t)},ie=()=>{Y||U||ee(!0)},de=e=>{Y&&!U&&re.current&&!re.current.contains(e.relatedTarget)&&(ee(!1),null==B||B())},oe=()=>{if(J.length>1)return G||`${J.length} selected`;const{label:e,value:t}=J[0];return k?k(t):e},ue=e=>{if("middle"===H){let t=0;return le&&le.current&&(t=le.current.getBoundingClientRect().width),s.StringHelper.truncateOneLine(e,t,120,6)}return e},ce=e=>{!e&&K&&K(),e&&N&&N()},he=(e,t)=>{if(D){const r=t.map((e=>e.value));D(e,r)}},pe=e=>{if(!0===e.checked)return J.filter((t=>{const a=t.keyPath.slice(0,e.keyPath.length);return!r.default(e.keyPath,a)}));{const t=[...J];return(e.hasSubItems?h.getSelectedSubItems(V,e.keyPath):[{value:e.item.value,label:e.item.label,keyPath:e.keyPath}]).forEach((e=>{J.find((t=>r.default(t.keyPath,e.keyPath)))||t.push(e)})),t}};return e.jsx(o.ElementWithDropdown,{enabled:!E&&!b,isOpen:U,renderElement:()=>e.jsx(c.InputBox,{className:j,"data-testid":w,id:q,ref:re,tabIndex:-1,onFocus:ie,onBlur:de,focused:Y,disabled:b,readOnly:E,error:y,children:e.jsx(n.ExpandableElement,{ref:ae,disabled:b,expanded:U,listboxId:te,popupRole:"tree",readOnly:E,variant:_,"aria-labelledby":S,"aria-describedby":f,"aria-invalid":x,children:e.jsx(u.LabelContainer,{ref:le,disabled:b,children:t.default(J)?e.jsx(u.PlaceholderLabel,{truncateType:H,children:p}):e.jsx(u.ValueLabel,{truncateType:H,children:ue(oe())})})})}),renderDropdown:()=>e.jsx(i.NestedDropdownList,{listboxId:te,listItems:V,multiSelect:!0,selectedKeyPaths:$,itemsLoadState:C,itemTruncationType:H,enableSearch:g,searchPlaceholder:T,hideNoResultsDisplay:I,noResultsDescription:R,customLabels:L,onSelectItem:ne,onSelectAll:se,onRetry:A,onSearch:O,variant:_,mode:P,width:M,matchElementWidth:!0}),onOpen:()=>{X(!0),ce(!0),ee(!0)},onClose:e=>{X(!1),ce(!1),"click"!==e&&(ee(!1),null==B||B())},onDismiss:()=>{var e;null===(e=ae.current)||void 0===e||e.focus(),X(!1),ce(!1)},clickToToggle:!0,offset:8,alignment:W,fitAvailableHeight:!0,customZIndex:F,rootNode:Z})};
+"use strict";var e=require("react/jsx-runtime"),t=require("../external/lodash/isEmpty.js"),r=require("../external/lodash/isEqual.js"),l=require("react");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js"),s=require("../util/string-helper.js");require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_mloii0.css"),require("../shared/dropdown-list/dropdown-list.js"),require("../shared/dropdown-list/dropdown-list-state.js");var n=require("../shared/dropdown-list/expandable-element.js"),i=require("../shared/dropdown-list/nested-dropdown-list.js"),d=require("../shared/dropdown-list/nested-dropdown-list-helpers.js"),o=require("../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../shared/dropdown-wrapper/dropdown-wrapper.js"),c=require("../shared/input-wrapper/input-wrapper.js"),h=require("./helpers.js");exports.InputNestedMultiSelect=({placeholder:p="Select",options:m,disabled:b,error:y,className:j,"data-testid":w,id:q,"aria-labelledby":S,"aria-describedby":f,"aria-invalid":x,selectedKeyPaths:v,mode:P,valueToStringFunction:k,enableSearch:g,searchPlaceholder:T,hideNoResultsDisplay:I,noResultsDescription:R,customLabels:L,readOnly:E,onSearch:O,onSelectOptions:D,onShowOptions:N,onHideOptions:K,onRetry:A,onBlur:B,optionsLoadState:C="success",optionTruncationType:H="end",variant:_="default",alignment:W,dropdownZIndex:F,dropdownWidth:M,dropdownRootNode:Z})=>{const{multiSelectedLabel:G}=L||{},V=m,[$,z]=l.useState(v?d.buildKeyPathToSet(v):new Set),[J,Q]=l.useState([]),[U,X]=l.useState(!1),[Y,ee]=l.useState(!1),te=a.useId(),re=l.useRef(null),le=l.useRef(null),ae=l.useRef(null);l.useEffect((()=>{const e=v||[],t=h.getSelectedItems(V,e);z(d.buildKeyPathToSet(e)),Q(t)}),[v,V]);const se=(e,t)=>{const r=t.map((e=>({keyPath:e.keyPath,label:e.item.label,value:e.item.value})));z(d.buildKeyPathToSet(e)),Q(r),he(e,r)},ne=e=>{const t=pe(e),r=t.map((e=>e.keyPath));Q(t),z(d.buildKeyPathToSet(r)),he(r,t)},ie=()=>{Y||U||ee(!0)},de=e=>{Y&&!U&&re.current&&!re.current.contains(e.relatedTarget)&&(ee(!1),null==B||B())},oe=()=>{if(J.length>1)return G||`${J.length} selected`;const{label:e,value:t}=J[0];return k?k(t):e},ue=e=>{if("middle"===H){let t=0;return ae&&ae.current&&(t=ae.current.getBoundingClientRect().width),s.StringHelper.truncateOneLine(e,t,120,6)}return e},ce=e=>{!e&&K&&K(),e&&N&&N()},he=(e,t)=>{if(D){const r=t.map((e=>e.value));D(e,r)}},pe=e=>{if(!0===e.checked)return J.filter((t=>{const l=t.keyPath.slice(0,e.keyPath.length);return!r.default(e.keyPath,l)}));{const t=[...J];return(e.hasSubItems?h.getSelectedSubItems(V,e.keyPath):[{value:e.item.value,label:e.item.label,keyPath:e.keyPath}]).forEach((e=>{J.find((t=>r.default(t.keyPath,e.keyPath)))||t.push(e)})),t}};return e.jsx(o.ElementWithDropdown,{enabled:!E&&!b,isOpen:U,renderElement:()=>e.jsx(c.InputBox,{className:j,"data-testid":w,id:q,ref:re,tabIndex:-1,onFocus:ie,onBlur:de,focused:Y,disabled:b,readOnly:E,error:y,children:e.jsx(n.ExpandableElement,{ref:le,disabled:b,expanded:U,listboxId:te,popupRole:"tree",readOnly:E,variant:_,"aria-labelledby":S,"aria-describedby":f,"aria-invalid":x,children:e.jsx(u.LabelContainer,{ref:ae,disabled:b,children:t.default(J)?e.jsx(u.PlaceholderLabel,{truncateType:H,children:p}):e.jsx(u.ValueLabel,{truncateType:H,children:ue(oe())})})})}),renderDropdown:()=>e.jsx(i.NestedDropdownList,{listboxId:te,listItems:V,multiSelect:!0,selectedKeyPaths:$,itemsLoadState:C,itemTruncationType:H,enableSearch:g,searchPlaceholder:T,hideNoResultsDisplay:I,noResultsDescription:R,customLabels:L,onSelectItem:ne,onSelectAll:se,onRetry:A,onSearch:O,variant:_,mode:P,width:M,matchElementWidth:!0}),onOpen:()=>{X(!0),ce(!0),ee(!0)},onClose:e=>{X(!1),ce(!1),"click"!==e&&(ee(!1),null==B||B())},onDismiss:()=>{var e;null===(e=le.current)||void 0===e||e.focus(),X(!1),ce(!1)},clickToToggle:!0,offset:8,alignment:W,fitAvailableHeight:!0,customZIndex:F,rootNode:Z})};
 //# sourceMappingURL=input-nested-multi-select.js.map