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/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":"0wEA0CA,MAAMA,GACFC,KAEEA,GAAsB,WAAdA,EAAKC,KAENC,GAAY,CACrBC,EAaAC,cAbAC,MACIA,GAAKC,uBACLA,GAAsBC,cACtBA,IAAgB,EAAKC,eACrBA,IAAiB,EAAKC,YACtBA,IAAc,EAAKC,cACnBA,IAAgB,EAAKC,SACrBA,GAAQC,QACRA,GAAOC,OACPA,GAAMC,KACNA,IAAIX,EACDY,GAAUC,EAAAb,EAXjB,wIAkBA,MAAOc,GAAcC,IAAmBC,EACpCb,SAAAA,GAA0B,IAEvBc,GAAiBC,IAAqBC,EAE3C,CAAA,IACKC,GAAMC,IAAWF,EAAS,IAC1BG,GAAQC,IAAaJ,KACrBK,GAAMC,IAAWN,IAClBO,GAAeC,EAAuB,MACtCC,GAAgBD,EAAkC,IAClDE,GAAWF,EAA+C,IAC1DG,GAAWH,EAAuB,MAClCI,GAAsBJ,EAAuB,MAC7CK,GAAqBL,EAA0B,MAC/CM,GAAqBN,EAA0B,MAC/CO,GAAwBP,EAAuB,MAC/CQ,GAAOb,IAAUE,GAAOF,GAASE,GAAO,EACxCY,GAAclC,GAAMY,IACpBuB,GAAkBnC,GAAMoC,MACzBzC,IAAQ,IAAAG,EAAC,OAAAJ,GAAaC,OAAyB,QAAdG,EAAAH,EAAK0C,iBAAS,IAAAvC,OAAA,EAAAA,EAAEwC,OAAM,IAEtDC,GAAmBJ,GAAkB,OAAS,QAC9CK,GAAcC,GAChB,IACIzC,GAAMoC,MACDzC,YAAS,OAAa,UAAbA,EAAK+C,gBAAQ,IAAA5C,OAAA,EAAAA,EAAEwC,UAAuB,UAAb3C,EAAKgD,gBAAQ,IAAAC,OAAA,EAAAA,EAAEN,OAAM,KAEhE,CAACtC,KAGL6C,EAAchB,GAAqB,CAC/B,CAACiB,EAAcC,iBAAiBC,UAAWC,EACvCzC,cAAM,EAANA,GAAQ0C,IACR,MAEJ,CAACJ,EAAcC,iBAAiBI,WAAYF,EACxCzC,cAAM,EAANA,GAAQ4C,KACR,MAEJ,CAACN,EAAcC,iBAAiBM,YAAaJ,EACzCzC,cAAM,EAANA,GAAQ8C,MACR,QAIRT,EAAcf,GAAoB,CAC9B,CAACgB,EAAcS,YAAYJ,WAAYF,EACnCzC,cAAM,EAANA,GAAQ4C,KACR,QAIRP,EAAcd,GAAoB,CAC9B,CAACe,EAAcS,YAAYF,YAAaJ,EACpCzC,cAAM,EAANA,GAAQ8C,MACR,QAIRT,EAAcb,GAAuB,CACjC,CAACc,EAAcU,mBAAmBC,aAAcR,EAC5CzC,cAAM,EAANA,GAAQkD,OACR,QAIR,MAAMC,GAAmBC,GACpBC,YACG,MAAMlE,EAAOK,GAAM6D,GACbC,EAAgB3B,GAAkB,OAAS,QAC3C4B,EAASrE,GAAaC,IACR,QAAdG,EAAAH,EAAK0C,iBAAS,IAAAvC,OAAA,EAAAA,EAAEwC,SAAU,IAClB,QAARM,EAAAjD,EAAKqE,WAAG,IAAApB,OAAA,EAAAA,EAAEN,SAAU,GACpB2B,EAAgB,GAAGH,KAAiBD,EAAQ,QAC9C7D,GAAMkE,UAGV,OAAOH,EAAS,GAAGA,MAAWE,IAAkBA,CAAa,GAEjE,CAACjE,GAAOmC,KAGZgC,EACIpE,IACA,KAAA,CACIqE,iBAAkBxD,GAClByD,eAAgBC,GAChBC,aAAcC,GACdC,aAAcC,OAOtBC,EAAiB,WA8DjB,SAAuBC,GACL,eAAVA,EAAEC,IACFH,KACiB,cAAVE,EAAEC,IACTL,KACiB,WAAVI,EAAEC,MACTtE,UAAAA,KAER,GAtE2C,YAE3CuE,GAAU,WACFrE,KACgB,QAAhBX,EAAA8B,GAASmD,eAAO,IAAAjF,GAAAA,EAAEkF,QACtB,GACD,CAACvE,KAEJqE,GAAU,KACe,IAAjB9E,GAAMkE,OAKNtD,GAAeZ,GAAMkE,OAAS,GAC9BrD,GAAgBb,GAAMkE,OAAS,GAL/BrD,GAAgB,EAMpB,GACD,CAACD,GAAcZ,GAAMkE,OAAQrD,KAEhCiE,GAAU,aAC+B,QAArClC,UAAA9C,EAAA4B,GAAcqD,8BAAUnE,WAAa,IAAAgC,GAAAA,EAAEqC,eAAe,CAClDC,SAAU,SACVC,OAAQ,WAEZhE,GAAQ,EAAE,GACX,CAACP,KAKJ,MAsBMwE,GAAcR,IAChBzD,GAAQyD,EAAES,MAAMC,MAAM,EAmB1B,MAWMC,GAAe,EACjBC,MACAC,SACAC,YAMA1E,IAAmB2E,GACfC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAYF,GAAQ,CAAEH,CAACA,GAAM,CAAEC,SAAQC,YACzC,EAGAI,GAAe,KACjB,IAAK5D,IAAexC,GAAawC,IAC7B,OAGJ,MAAM6D,EAAiBhF,GAAgBmB,GAAYsD,KAEnD,GAAIhE,GAAauD,SAAagB,EAAgB,CAC1C,MAAMC,aAAEA,EAAYC,YAAEA,GAAgBzE,GAAauD,SAC7CW,MAAEA,EAAKD,OAAEA,GAAWM,EAGpBG,EACFT,EAASC,EAAQM,EAAeC,EAEpC,OALmBP,EAAQO,GAAeR,EAASO,EAMxCE,EACDD,EAAcP,EACdM,EAAeP,EAGlBS,EACDF,GAAgBP,GAAUC,EAAQO,IAClCA,GAAeP,GAASD,EAASO,GAC3C,GAMExB,GAAgB,aACc,QAAhC5B,EAAgB,QAAhB9C,EAAA6B,GAASoD,eAAO,IAAAjF,OAAA,EAAAA,EAAGc,WAAa,IAAAgC,GAAAA,EAAEuD,iBAClCtF,IACKuF,GAAmB,IAATA,EAAapG,GAAMkE,OAAS,EAAIkC,EAAO,IACjDC,IACGC,EAAe,UACfC,EAAS5C,GAAiB0C,GAAQ,SAAS,GAElD,EAGC3B,GAAgB,aACc,QAAhC9B,EAAgB,QAAhB9C,EAAA6B,GAASoD,eAAO,IAAAjF,OAAA,EAAAA,EAAGc,WAAa,IAAAgC,GAAAA,EAAEuD,iBAClCtF,IACKuF,GAAUA,IAASpG,GAAMkE,OAAS,EAAI,EAAIkC,EAAO,IACjDC,IACGC,EAAe,UACfC,EAAS5C,GAAiB0C,GAAQ,SAAS,GAElD,EAGC/B,GAAaT,YACiB,QAAhCjB,EAAgB,QAAhB9C,EAAA6B,GAASoD,eAAO,IAAAjF,OAAA,EAAAA,EAAGc,WAAa,IAAAgC,GAAAA,EAAEuD,iBAClCtF,GAAgBgD,EAAM,EA0K1B,OACI2C,EAACC,EAAOb,OAAAC,OAAA,CAAA,EACAnF,GAAU,CAAA,cACF,uBAAsB,aACtByB,GAAkB,WAAa,iBAC3C1B,KAAMA,GACNiG,gCAEAC,EAAA,MAAA,CAAKC,UAAWC,EAA2BC,SAAA,CACvCH,EAAA,MAAA,CAAKC,UAAWG,EAA4BD,SAAA,CACxCH,EAAA,MAAA,CAAKC,UAAWI,EAA0BF,SAAA,CACtCN,EAAA,MAAA,CACII,UAAWK,EACXlH,IAAKyB,GACL0F,aAjTEtC,IAClB1D,IAAQ,GAAGG,GAAUuD,EAAEuC,QAAQ,GAAGC,QAAQ,EAiT1BC,YA9SCzC,KAChBxD,IAAUF,GAAO,GACtBK,GAAQqD,EAAEuC,QAAQ,GAAGC,QAAQ,EA6STE,WA1SD,KACd9F,GAAauD,UACdwC,KAAKC,IAAIvF,IAAQT,GAAauD,QAAQ0C,YAAc,IAChDxF,GAAO,EACPyC,KAEAF,MAGRnD,QAAUqG,GACVnG,QAAQmG,GAAU,WA8GdlB,SACII,UAAWe,EACXC,MAAO,CACHC,UAAW,mBACS,KAAfjH,SACEqB,UACV6E,SAEA9G,GAAM8H,KAAI,CAACnI,EAAMkE,KACd,MAAMkE,EAAWlE,IAAUjD,GACrBoH,EACFT,KAAKC,IAAI3D,EAAQjD,KAAiB,GAChB,IAAjBA,IAAsBiD,IAAU7D,GAAMkE,OAAS,GAC/CtD,KAAiBZ,GAAMkE,OAAS,GAAe,IAAVL,EAE1C,OACI2C,SACII,UAAWqB,EAAwB,cAEvB,aAAYnB,SAExBN,EAAA,MAAA,CACII,UAAWsB,EACXnI,IAAKgI,EAAWnG,GAAW,KAC3BuG,SAAUJ,EAAW,GAAI,EAAEjB,SAE1BpH,GAAaC,GACVqI,EACIrI,EAAKyI,gBAEL5B,EAAC6B,GACGzB,UACI0B,IAKZ9B,EAAC+B,EAAgB,CACbxI,IAAMyI,GACD7G,GAASoD,QAAQlB,GAAS2E,EAE/BC,QAAS,CACLC,SAAUxH,IAAQ,GAEtByH,aAAc,EACdC,OAAQxD,GACRyD,WAAYzD,GACZ0D,QAAS1D,GAAU0B,SAEnBN,EAACuC,EAAkB,CAAAjC,SACfN,EAACwC,GAAa,CACVpC,UAAWqC,EACXzD,IAAK7F,EAAK6F,IACVxB,IAAKL,GAAiBE,GACtBqF,YACI1C,EAAC6B,EAAgB,CACbzB,UACI0B,IAIZa,IAAI,aACJC,wBAAsB,EACtB7D,aAAcA,YA7C7B1B,EAmDH,SAkHJ1D,IACEwG,EAAA0C,EAAA,CAAAvC,SAAA,CACIN,EAAC8C,EAAa,CACV1C,UAAW2C,EACPC,EACAC,EACAC,GAEJ3J,IAAK+B,GAAkB,aACX,YAAYS,KAAkB,cAC9B,WACZoH,QAASnF,GAAasC,SAEtBN,EAACoD,EAAe,CAAA,eAAA,MAEpBpD,EAAC8C,EAAa,CACV1C,UAAW2C,EACPC,EACAC,EACAI,GAEJ9J,IAAKgC,GAAkB,aACX,QAAQQ,KAAkB,cAC1B,cACZoH,QAASjF,GAAaoC,SAEtBN,EAACsD,EAAgB,CAAA,eAAA,UAK3B1J,IACEoG,EAAA,MAAA,CAAKI,UAAWmD,EAAc,cAAc,gBACxCvD,EAACwD,EAAWC,QACRrD,UAAWsD,EACXC,OAAO,yBACK,mBAAkBrD,SAChC,GAAGlG,GAAe,KAChBZ,GAAMkE,iBAMpBhE,IAjHVsG,EAAA,MAAA,CACII,UAAWwD,EACXrK,IAAKiC,GAAqB,cACd,qBACA,sBAAqB8E,SAEjCN,EAAA,MAAA,CAAKI,UAAWyD,WACXrK,GAAM8H,KAAI,CAACnI,EAAMkE,WACd,MAAM2B,EAAM9F,GAAaC,GACnBA,EAAK2K,aACY,UAAjB3K,EAAK2K,oBAAY,IAAAxK,EAAAA,EAAIH,EAAK6F,IAChC,OACIgB,SACII,UAAW2D,WAGX/D,EAAA,MAAA,CACII,UAAW4D,EAAoB,cAClB3G,IAAUjD,GAAY,cACvB,iBACZ+I,QAAS,IAAMrF,GAAUT,GACzB9D,IAAMyI,GACD9G,GAAcqD,QAAQlB,GAAS2E,EAAG1B,SAGtCtB,EACGgB,EAACwC,GAAa,CACVpC,UAAW6D,EACXjF,IAAKA,EACLxB,IAAK,aAAaH,EAAQ,IAC1BsF,IAAI,UAGR3C,EAAC6B,EAAgB,CACbzB,UACI0B,OArBXzE,EA0BH,WA2ElB8C,SACIC,UAAW8D,EACX3K,IAAK8B,wBACeW,GAAWsE,SAAA,CAE9BtE,IA9JM,MACnB,MAAME,SAAEA,EAAQC,SAAEA,GAAaT,SAAAA,GAAe,CAAA,EACxCyI,EAAcjI,eAAAA,EAAUJ,OACxBsI,EAAcjI,eAAAA,EAAUL,OAE9B,OACIqE,EAAA,MAAA,CACIC,UAAW2C,EACPsB,IACCD,GAAeE,IACnB,YACS,SAAQ,cACN,OAAM,cACN,gBAAehE,SAAA,CAE1B6D,GACGnE,EAACwD,EAAWe,QACRnE,UAAWoE,EACXb,OAAO,WAAU,cACL,iBAAgBrD,SAE3B6D,IAGRC,GACGpE,EAACwD,EAAWiB,OAAM,CACdrE,UAAWsE,GAAuB,cACtB,0BAEXN,MAGP,EA8HkBO,IACd9K,KAAkBX,GAAawC,KAC7BsE,EAAC8C,EAAa,CACV1C,UAAW4C,EAAiB,aACP,IAATtI,GAAa,UAAY,WACrCyI,QAtUA,iBACpB,GAAa,IAATzI,GAAY,CACZ,MAAMkK,EAAYtF,KACc,QAAhClD,EAAgB,QAAhB9C,EAAA6B,GAASoD,eAAO,IAAAjF,OAAA,EAAAA,EAAGc,WAAa,IAAAgC,GAAAA,EAAEyI,WAAWD,GAC7CjK,GAAQiK,QAAAA,EAAa,EACzB,MACIjK,GAAQ,GACwB,QAAhCmK,EAAgB,QAAhBC,EAAA5J,GAASoD,eAAO,IAAAwG,OAAA,EAAAA,EAAG3K,WAAa,IAAA0K,GAAAA,EAAEnF,gBACtC,EA8T4CW,SAGpBN,EADM,IAATtF,GACIsK,EAEAC,EAFiB,CAAA,eAAA,MAO7BnL,IACGkG,EAAC8C,EAAa,CACV1C,UAAW2C,EACPC,EACAkC,gBAEQ,UACPhM,GAAawC,cACVU,GAAAV,GAAYG,kCAAWC,SAC3B,wBAEQ,aACZqH,QA5WH,KACbzH,IAAe5B,IACfA,GAAS4B,GAAatB,GAC1B,EAyWyCkG,SAErBN,EAACmF,EAAO,CAAA,eAAA,MAIhBnF,EAAC8C,EAAa,CACV1C,UAAW4C,EAAiB,aAExBrH,GACM,iBACA,uBAEVwH,QAASpJ,GAAOuG,SAEhBN,EAACoF,gCAIP,EAILC,GAA0BC,EAGrCjM"}
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/image-button/image-button.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./image-button.styles_qtt605.css";const t="mqb1plh",m="mpjl8bn",o="mroo32y",s="mz6wr40",n="m1hsk0n5";export{t as main,n as mainDisabled,s as mainError,o as mainSelected,m as mainSelectedText};
+import"./image-button.styles_6n1qsr.css";const m="mqb1plh",t="mpjl8bn",o="mroo32y",s="mz6wr40",n="m1hsk0n5";export{m as main,n as mainDisabled,s as mainError,o as mainSelected,t as mainSelectedText};
 //# sourceMappingURL=image-button.styles.js.map

package/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/index.d.ts CHANGED Viewed

@@ -80,4 +80,3 @@ export * from "./toggle";
 export * from "./typography";
 export * from "./uneditable-section";
 export * from "./unit-number";
-export * from "./v3_theme";

package/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DashedBorder}from"./dashed-border/dashed-border.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{Example}from"./example/example.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{LanguageSwitcher}from"./language-switcher/language-switcher.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{Popover}from"./popover/popover.js";export{PopoverInline}from"./popover/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{ThemeProvider}from"./theme/theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme/theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./theme/tokens/border.js";export{Breakpoint}from"./theme/tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./theme/tokens/colour.js";export{ComponentToken}from"./theme/tokens/component.js";export{Font,FontSpec}from"./theme/tokens/font.js";export{MediaQuery}from"./theme/tokens/media-query.js";export{Motion}from"./theme/tokens/motion.js";export{Radius}from"./theme/tokens/radius.js";export{Shadow}from"./theme/tokens/shadow.js";export{Spacing}from"./theme/tokens/spacing.js";export{THEME_TYPES}from"./theme/types.js";export{extractFdsCssVariableName,formatUnitValue,getInheritedInlineCssVariables,normalizeCssLengthValue,parseCSSVariableValue,parsePxOrRemValue}from"./theme/utils/css-variable.js";export{generateFont,generateFontProperties}from"./theme/utils/font.js";export{getEffectiveTokenOrCustom,getResolvedValue,getTokenOrDefault,isTokenFromSet,isTokenWithPrefix,toCssValue}from"./theme/utils/token-resolver.js";export{useApplyStyle}from"./theme/utils/use-apply-styles.js";export{useDesignToken,useResolvedTokenValue}from"./theme/utils/use-design-token.js";export{DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,useMaxWidthMediaQuery,useMediaQuery,useMinWidthMediaQuery,useResolvedBreakpointToken}from"./theme/utils/use-media-query.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Typography}from"./typography/index.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";export{V3_A11yPlaygroundTheme,V3_BookingSGTheme,V3_Border,V3_Breakpoint,V3_CCubeTheme,V3_Colour,V3_Font,V3_IMDATheme,V3_LifeSGTheme,V3_MediaQuery,V3_Motion,V3_MyLegacyTheme,V3_OneServiceTheme,V3_PATheme,V3_RBSTheme,V3_Radius,V3_SGWDigitalLobbyTheme,V3_SGWDigitalLobbyThemeBase,V3_SMGSTheme,V3_SPFTheme,V3_Shadow,V3_Spacing,V3_SupportGoWhereTheme,V3_SupportGoWhereThemeBase}from"./v3_theme/index.js";export{V3_DSThemeProvider}from"./v3_theme/ds-theme-provider.js";export{createThemeWithColourMode,getSystemColourMode,useDSTheme}from"./v3_theme/use-theme-mode.js";
+export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DashedBorder}from"./dashed-border/dashed-border.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{Example}from"./example/example.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{LanguageSwitcher}from"./language-switcher/language-switcher.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{Popover}from"./popover/popover.js";export{PopoverInline}from"./popover/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{ThemeProvider}from"./theme/theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme/theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./theme/tokens/border.js";export{Breakpoint}from"./theme/tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./theme/tokens/colour.js";export{ComponentToken}from"./theme/tokens/component.js";export{Font,FontSpec}from"./theme/tokens/font.js";export{MediaQuery}from"./theme/tokens/media-query.js";export{Motion}from"./theme/tokens/motion.js";export{Radius}from"./theme/tokens/radius.js";export{Shadow}from"./theme/tokens/shadow.js";export{Spacing}from"./theme/tokens/spacing.js";export{THEME_TYPES}from"./theme/types.js";export{formatUnitValue,parsePxOrRemValue}from"./theme/utils/css-variable.js";export{useApplyStyle}from"./theme/utils/use-apply-styles.js";export{useDesignToken}from"./theme/utils/use-design-token.js";export{useMaxWidthMediaQuery,useMediaQuery,useMinWidthMediaQuery,useResolvedBreakpointToken}from"./theme/utils/use-media-query.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Typography}from"./typography/index.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";
 //# sourceMappingURL=index.js.map

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

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

package/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/input-group/input-group.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./input-group.styles_fpy81r.css";const p="afvd13",s="nx53mj4",t="l1s6ick6";export{p as addonWrapper,t as labelAddonContainer,s as noAddonWrapper};
+import"./input-group.styles_bqye6f.css";const p="afvd13",s="nx53mj4",t="l1s6ick6";export{p as addonWrapper,t as labelAddonContainer,s as noAddonWrapper};
 //# sourceMappingURL=input-group.styles.js.map

package/{cjs/input-group/input-group.styles_fpy81r.css → 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/input-multi-select/input-multi-select.js CHANGED Viewed

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

package/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":["InputMultiSelect","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":["InputMultiSelect","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/input-nested-multi-select/input-nested-multi-select.js CHANGED Viewed

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