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

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

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 (1629) hide show

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

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as l}from"react/jsx-runtime";import{ChevronLeftIcon as r,ChevronRightIcon as o,MagnifierPlusIcon as a,MagnifierMinusIcon as n,CrossIcon as s}from"@lifesg/react-icons";import{BinIcon as d}from"@lifesg/react-icons/bin";import{clearAnnouncer as m,announce as c}from"@react-aria/live-announcer";import u from"clsx";import{forwardRef as h,useState as v,useRef as p,useMemo as f,useCallback as g,useImperativeHandle as b,useEffect as N}from"react";import{TransformWrapper as j,TransformComponent as x}from"react-zoom-pan-pinch";import{ModalV2 as k}from"../modal-v2/index.js";import{ClickableIcon as y}from"../shared/clickable-icon/clickable-icon.js";import{useStateCallback as w}from"../shared/hooks/use-state-callback.js";import"../external/lodash/_root.js";import"../external/lodash/_baseGetTag.js";import{ImagePlaceholder as C}from"../shared/image-placeholder/image-placeholder.js";import"../theme/theme-provider/index.js";import{formatUnitValue as I}from"../theme/utils/css-variable.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{useApplyStyle as T}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as $}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import{useEventListener as B}from"../util/use-event-listener.js";import{tokens as S,carouselModalContent as A,imageGalleryContainer as L,imageGalleryWrapper as D,imageGallerySwipe as M,iconButton as z,arrowButton as X,arrowButtonLeft as Z,arrowButtonRight as _,boxChip as O,chip as R,topActionButtons as W,iconButtonError as q,imageGallerySlides as E,imageGallerySlide as P,focusableImageRegion as V,slidePlaceholderImage as F,slideImage as G,thumbnailContainer as H,thumbnailWrapper as J,thumbnailItemContainer as K,thumbnailItem as Q,thumbnailImage as U,fileInfoFileName as Y,fileInfoFileSize as ee,fileInfoTextWrapper as ie,fileInfoTextWrapperCentered as te}from"./fullscreen-image-carousel.styles.js";import{StatefulImage as le}from"./stateful-image.js";const re=e=>!!e&&"custom"===e.type,oe=(h,oe)=>{var ae,{items:ne,initialActiveItemIndex:se,hideThumbnail:de=!1,hideNavigation:me=!1,hideCounter:ce=!1,hideMagnifier:ue=!1,onDelete:he,onClose:ve,insets:pe,show:fe}=h,ge=e(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[be,Ne]=w(null!=se?se:0),[je,xe]=v({}),[ke,ye]=v(1),[we,Ce]=v(),[Ie,Te]=v(),$e=p(null),Be=p([]),Se=p([]),Ae=p(null),Le=p(null),De=p(null),Me=p(null),ze=p(null),Xe=we&&Ie?we-Ie:0,Ze=ne[be],_e=ne.some((e=>{var i;return re(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),Oe=_e?"item":"image",Re=f((()=>ne.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[ne]);T(Le,{[S.topActionButtons.insetTop]:I(null==pe?void 0:pe.top,"px"),[S.topActionButtons.insetLeft]:I(null==pe?void 0:pe.left,"px"),[S.topActionButtons.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(De,{[S.arrowButton.insetLeft]:I(null==pe?void 0:pe.left,"px")}),T(Me,{[S.arrowButton.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(ze,{[S.thumbnailContainer.insetBottom]:I(null==pe?void 0:pe.bottom,"px")});const We=g((e=>{var i,t;const l=ne[e],r=_e?"Item":"Image",o=re(l)?(null===(i=l.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=l.alt)||void 0===t?void 0:t.trim())||"",a=`${r} ${e+1} of ${ne.length}.`;return o?`${o}. ${a}`:a}),[ne,_e]);b(oe,(()=>({currentItemIndex:be,setCurrentItem:Ge,goToPrevItem:Ve,goToNextItem:Fe}))),B("keydown",(function(e){"ArrowRight"===e.key?Fe():"ArrowLeft"===e.key?Ve():"Escape"===e.key&&(null==ve||ve())}),"document"),N((()=>{var e;fe&&(null===(e=Ae.current)||void 0===e||e.focus())}),[fe]),N((()=>{0!==ne.length?be>ne.length-1&&Ne(ne.length-1):Ne(0)}),[be,ne.length,Ne]),N((()=>{var e,i;null===(i=null===(e=Be.current)||void 0===e?void 0:e[be])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),ye(1)}),[be]);const qe=e=>{ye(e.state.scale)};const Ee=({src:e,height:i,width:t})=>{xe((l=>Object.assign(Object.assign({},l),{[e]:{height:i,width:t}})))},Pe=()=>{if(!Ze||re(Ze))return;const e=je[Ze.src];if($e.current&&e){const{clientHeight:i,clientWidth:t}=$e.current,{width:l,height:r}=e,o=r/l<i/t;return l<t&&r<i?o?t/l:i/r:o?i/(r/(l/t)):t/(l/(r/i))}},Ve=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>0===e?ne.length-1:e-1),(e=>{m("polite"),c(We(e),"polite")}))},Fe=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>e===ne.length-1?0:e+1),(e=>{m("polite"),c(We(e),"polite")}))},Ge=e=>{var i,t;null===(t=null===(i=Se.current)||void 0===i?void 0:i[be])||void 0===t||t.resetTransform(),Ne(e)};return i(k,Object.assign({},ge,{"data-testid":"image-carousel-modal","aria-label":_e?"Carousel":"Image carousel",show:fe,disableInitialFocus:!0,children:t("div",{className:A,children:[t("div",{className:L,children:[t("div",{className:D,children:[i("div",{className:M,ref:$e,onTouchStart:e=>{ke<=1&&Ce(e.touches[0].clientX)},onTouchMove:e=>{!we||ke>1||Te(e.touches[0].clientX)},onTouchEnd:()=>{$e.current&&(Math.abs(Xe)>$e.current.offsetWidth/3&&(Xe>0?Fe():Ve()),Ce(void 0),Te(void 0))},children:i("div",{className:E,style:{transform:`translateX(calc(${100*-be}% - ${Xe}px))`},children:ne.map(((e,t)=>{const l=t===be,r=Math.abs(t-be)<=1||0===be&&t===ne.length-1||be===ne.length-1&&0===t;return i("div",{className:P,"data-testid":"slide-item",children:i("div",{className:V,ref:l?Ae:null,tabIndex:l?0:-1,children:re(e)?r?e.renderContent():i(C,{className:F}):i(j,{ref:e=>Se.current[t]=e,panning:{disabled:ke<=1},initialScale:1,onZoom:qe,onZoomStop:qe,onWheel:qe,children:i(x,{children:i(le,{className:G,src:e.src,alt:We(t),placeholder:i(C,{className:F}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Ee})})})})},t)}))})}),!me&&t(l,{children:[i(y,{className:u(z,X,Z),ref:De,"aria-label":`Previous ${Oe}`,"data-testid":"prev-btn",onClick:Ve,children:i(r,{"aria-hidden":!0})}),i(y,{className:u(z,X,_),ref:Me,"aria-label":`Next ${Oe}`,"data-testid":"forward-btn",onClick:Fe,children:i(o,{"aria-hidden":!0})})]}),!ce&&i("div",{className:O,"aria-hidden":"true",children:i($.BodyXS,{className:R,weight:"semibold","data-testid":"carousel-counter",children:`${be+1}/${ne.length}`})})]}),!de&&i("div",{className:H,ref:ze,"aria-hidden":"true","data-testid":"thumbnail-container",children:i("div",{className:J,children:ne.map(((e,t)=>{var l;const r=re(e)?e.thumbnailSrc:null!==(l=e.thumbnailSrc)&&void 0!==l?l:e.src;return i("div",{className:K,children:i("div",{className:Q,"data-active":t===be,"data-testid":"thumbnail-item",onClick:()=>Ge(t),ref:e=>Be.current[t]=e,children:r?i(le,{className:U,src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i(C,{className:F})})},t)}))})})]}),t("div",{className:W,ref:Le,"data-has-file-info":Re,children:[Re&&(()=>{const{fileName:e,fileSize:l}=null!=Ze?Ze:{},r=null==e?void 0:e.trim(),o=null==l?void 0:l.trim();return t("div",{className:u(ie,!o&&te),"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[r&&i($.BodyBL,{className:Y,weight:"semibold","data-testid":"file-info-name",children:r}),o&&i($.BodyMD,{className:ee,"data-testid":"file-info-size",children:o})]})})(),!ue&&!re(Ze)&&i(y,{className:z,"aria-label":1===ke?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,l;if(1===ke){const t=Pe();null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.centerView(t),ye(null!=t?t:1)}else ye(1),null===(l=null===(t=Se.current)||void 0===t?void 0:t[be])||void 0===l||l.resetTransform()},children:i(1===ke?a:n,{"aria-hidden":!0})}),he&&i(y,{className:u(z,q),"aria-label":`Delete ${re(Ze)&&(null===(ae=Ze.itemLabel)||void 0===ae?void 0:ae.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{Ze&&he&&he(Ze,be)},children:i(d,{"aria-hidden":!0})}),i(y,{className:z,"aria-label":_e?"Close carousel":"Close image carousel",onClick:ve,children:i(s,{"aria-hidden":!0})})]})]})}))},ae=h(oe);export{oe as Component,ae as FullscreenImageCarousel};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as l}from"react/jsx-runtime";import{ChevronLeftIcon as r,ChevronRightIcon as o,MagnifierPlusIcon as n,MagnifierMinusIcon as a,CrossIcon as s}from"@lifesg/react-icons";import{BinIcon as d}from"@lifesg/react-icons/bin";import{clearAnnouncer as c,announce as m}from"@react-aria/live-announcer";import u from"clsx";import{forwardRef as h,useState as v,useRef as p,useMemo as f,useCallback as g,useImperativeHandle as b,useEffect as N}from"react";import{TransformWrapper as j,TransformComponent as x}from"react-zoom-pan-pinch";import{ModalV2 as k}from"../modal-v2/index.js";import{ClickableIcon as y}from"../shared/clickable-icon/clickable-icon.js";import{useStateCallback as w}from"../shared/hooks/use-state-callback.js";import{ImagePlaceholder as C}from"../shared/image-placeholder/image-placeholder.js";import"../theme/theme-provider/index.js";import{formatUnitValue as I}from"../theme/utils/css-variable.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{useApplyStyle as T}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as $}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import{useEventListener as B}from"../util/use-event-listener.js";import{tokens as S,carouselModalContent as A,imageGalleryContainer as L,imageGalleryWrapper as D,imageGallerySwipe as M,iconButton as z,arrowButton as X,arrowButtonLeft as Z,arrowButtonRight as O,boxChip as R,chip as W,topActionButtons as q,iconButtonError as E,imageGallerySlides as P,imageGallerySlide as V,focusableImageRegion as _,slidePlaceholderImage as F,slideImage as H,thumbnailContainer as G,thumbnailWrapper as J,thumbnailItemContainer as K,thumbnailItem as Q,thumbnailImage as U,fileInfoFileName as Y,fileInfoFileSize as ee,fileInfoTextWrapper as ie,fileInfoTextWrapperCentered as te}from"./fullscreen-image-carousel.styles.js";import{StatefulImage as le}from"./stateful-image.js";const re=e=>!!e&&"custom"===e.type,oe=(h,oe)=>{var ne,{items:ae,initialActiveItemIndex:se,hideThumbnail:de=!1,hideNavigation:ce=!1,hideCounter:me=!1,hideMagnifier:ue=!1,onDelete:he,onClose:ve,insets:pe,show:fe}=h,ge=e(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[be,Ne]=w(null!=se?se:0),[je,xe]=v({}),[ke,ye]=v(1),[we,Ce]=v(),[Ie,Te]=v(),$e=p(null),Be=p([]),Se=p([]),Ae=p(null),Le=p(null),De=p(null),Me=p(null),ze=p(null),Xe=we&&Ie?we-Ie:0,Ze=ae[be],Oe=ae.some((e=>{var i;return re(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),Re=Oe?"item":"image",We=f((()=>ae.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[ae]);T(Le,{[S.topActionButtons.insetTop]:I(null==pe?void 0:pe.top,"px"),[S.topActionButtons.insetLeft]:I(null==pe?void 0:pe.left,"px"),[S.topActionButtons.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(De,{[S.arrowButton.insetLeft]:I(null==pe?void 0:pe.left,"px")}),T(Me,{[S.arrowButton.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(ze,{[S.thumbnailContainer.insetBottom]:I(null==pe?void 0:pe.bottom,"px")});const qe=g((e=>{var i,t;const l=ae[e],r=Oe?"Item":"Image",o=re(l)?(null===(i=l.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=l.alt)||void 0===t?void 0:t.trim())||"",n=`${r} ${e+1} of ${ae.length}.`;return o?`${o}. ${n}`:n}),[ae,Oe]);b(oe,(()=>({currentItemIndex:be,setCurrentItem:He,goToPrevItem:_e,goToNextItem:Fe}))),B("keydown",(function(e){"ArrowRight"===e.key?Fe():"ArrowLeft"===e.key?_e():"Escape"===e.key&&(null==ve||ve())}),"document"),N((()=>{var e;fe&&(null===(e=Ae.current)||void 0===e||e.focus())}),[fe]),N((()=>{0!==ae.length?be>ae.length-1&&Ne(ae.length-1):Ne(0)}),[be,ae.length,Ne]),N((()=>{var e,i;null===(i=null===(e=Be.current)||void 0===e?void 0:e[be])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),ye(1)}),[be]);const Ee=e=>{ye(e.state.scale)};const Pe=({src:e,height:i,width:t})=>{xe((l=>Object.assign(Object.assign({},l),{[e]:{height:i,width:t}})))},Ve=()=>{if(!Ze||re(Ze))return;const e=je[Ze.src];if($e.current&&e){const{clientHeight:i,clientWidth:t}=$e.current,{width:l,height:r}=e,o=r/l<i/t;return l<t&&r<i?o?t/l:i/r:o?i/(r/(l/t)):t/(l/(r/i))}},_e=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>0===e?ae.length-1:e-1),(e=>{c("polite"),m(qe(e),"polite")}))},Fe=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>e===ae.length-1?0:e+1),(e=>{c("polite"),m(qe(e),"polite")}))},He=e=>{var i,t;null===(t=null===(i=Se.current)||void 0===i?void 0:i[be])||void 0===t||t.resetTransform(),Ne(e)};return i(k,Object.assign({},ge,{"data-testid":"image-carousel-modal","aria-label":Oe?"Carousel":"Image carousel",show:fe,disableInitialFocus:!0,children:t("div",{className:A,children:[t("div",{className:L,children:[t("div",{className:D,children:[i("div",{className:M,ref:$e,onTouchStart:e=>{ke<=1&&Ce(e.touches[0].clientX)},onTouchMove:e=>{!we||ke>1||Te(e.touches[0].clientX)},onTouchEnd:()=>{$e.current&&(Math.abs(Xe)>$e.current.offsetWidth/3&&(Xe>0?Fe():_e()),Ce(void 0),Te(void 0))},children:i("div",{className:P,style:{transform:`translateX(calc(${100*-be}% - ${Xe}px))`},children:ae.map(((e,t)=>{const l=t===be,r=Math.abs(t-be)<=1||0===be&&t===ae.length-1||be===ae.length-1&&0===t;return i("div",{className:V,"data-testid":"slide-item",children:i("div",{className:_,ref:l?Ae:null,tabIndex:l?0:-1,children:re(e)?r?e.renderContent():i(C,{className:F}):i(j,{ref:e=>Se.current[t]=e,panning:{disabled:ke<=1},initialScale:1,onZoom:Ee,onZoomStop:Ee,onWheel:Ee,children:i(x,{children:i(le,{className:H,src:e.src,alt:qe(t),placeholder:i(C,{className:F}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Pe})})})})},t)}))})}),!ce&&t(l,{children:[i(y,{className:u(z,X,Z),ref:De,"aria-label":`Previous ${Re}`,"data-testid":"prev-btn",onClick:_e,children:i(r,{"aria-hidden":!0})}),i(y,{className:u(z,X,O),ref:Me,"aria-label":`Next ${Re}`,"data-testid":"forward-btn",onClick:Fe,children:i(o,{"aria-hidden":!0})})]}),!me&&i("div",{className:R,"aria-hidden":"true",children:i($.BodyXS,{className:W,weight:"semibold","data-testid":"carousel-counter",children:`${be+1}/${ae.length}`})})]}),!de&&i("div",{className:G,ref:ze,"aria-hidden":"true","data-testid":"thumbnail-container",children:i("div",{className:J,children:ae.map(((e,t)=>{var l;const r=re(e)?e.thumbnailSrc:null!==(l=e.thumbnailSrc)&&void 0!==l?l:e.src;return i("div",{className:K,children:i("div",{className:Q,"data-active":t===be,"data-testid":"thumbnail-item",onClick:()=>He(t),ref:e=>Be.current[t]=e,children:r?i(le,{className:U,src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i(C,{className:F})})},t)}))})})]}),t("div",{className:q,ref:Le,"data-has-file-info":We,children:[We&&(()=>{const{fileName:e,fileSize:l}=null!=Ze?Ze:{},r=null==e?void 0:e.trim(),o=null==l?void 0:l.trim();return t("div",{className:u(ie,!o&&te),"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[r&&i($.BodyBL,{className:Y,weight:"semibold","data-testid":"file-info-name",children:r}),o&&i($.BodyMD,{className:ee,"data-testid":"file-info-size",children:o})]})})(),!ue&&!re(Ze)&&i(y,{className:z,"aria-label":1===ke?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,l;if(1===ke){const t=Ve();null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.centerView(t),ye(null!=t?t:1)}else ye(1),null===(l=null===(t=Se.current)||void 0===t?void 0:t[be])||void 0===l||l.resetTransform()},children:i(1===ke?n:a,{"aria-hidden":!0})}),he&&i(y,{className:u(z,E),"aria-label":`Delete ${re(Ze)&&(null===(ne=Ze.itemLabel)||void 0===ne?void 0:ne.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{Ze&&he&&he(Ze,be)},children:i(d,{"aria-hidden":!0})}),i(y,{className:z,"aria-label":Oe?"Close carousel":"Close image carousel",onClick:ve,children:i(s,{"aria-hidden":!0})})]})]})}))},ne=h(oe);export{oe as Component,ne as FullscreenImageCarousel};
 //# sourceMappingURL=fullscreen-image-carousel.js.map

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/fullscreen-image-carousel/fullscreen-image-carousel.styles_vc6y5c.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.t1d7v1ct{--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop:initial;--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft:initial;--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight:initial;-webkit-order:-1;-ms-flex-order:-1;order:-1;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;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;gap:var(--fds-spacing-16);}.t1d7v1ct[data-has-file-info="true"]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-color:var(--fds-colour-bg-inverse);padding-top:calc(
+@layer fds{.t1d7v1ct{--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop:initial;--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft:initial;--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight:initial;-webkit-order:-1;-ms-flex-order:-1;order:-1;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;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;gap:var(--fds-spacing-16);}.t1d7v1ct[data-has-file-info="true"]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-color:var(--fds-colour-bg-inverse);padding-top:calc(
             var(--fds-spacing-24) +
                 var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop, 0px)
         );padding-bottom:var(--fds-spacing-24);padding-left:calc(
@@ -72,4 +72,4 @@
     );}
 .f1ysk79e{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
 .f1cpwiz6{color:var(--fds-colour-text-inverse);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
-.f17g5ble{color:var(--fds-colour-text-inverse);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
+.f17g5ble{color:var(--fds-colour-text-inverse);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}}

package/fullscreen-image-carousel/stateful-image.styles_1xe8ypm.css CHANGED Viewed

@@ -1,3 +1,3 @@
-.i1h1mxc8{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;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+@layer fds{.i1h1mxc8{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;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
 .i1k1jgcv{--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit:initial;height:100%;width:100%;object-fit:var(--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit, contain);}
-.d1w2ubkx{width:100%;height:100%;}
+.d1w2ubkx{width:100%;height:100%;}}

package/histogram-slider/histogram-slider.styles_wvd4w.css CHANGED Viewed

@@ -1,8 +1,8 @@
-.l1qwb62w{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:var(--fds-spacing-16);-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
+@layer fds{.l1qwb62w{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:var(--fds-spacing-16);-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
 .s1f028jb{margin:0 0.5rem;}
 .hu29dsu{width:100%;height:4rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;padding:0 0.4375rem;}
 .b1koddre{-webkit-flex:1;-ms-flex:1;flex:1;border-radius:var(--fds-radius-sm) var(--fds-radius-sm) 0 0;border:0.5px solid transparent;-webkit-background-clip:content-box;background-clip:content-box;background-color:var(--fds-colour-bg-strongest);}
 .b1im7sez{background-color:var(--fds-colour-bg-disabled);}
 .b8ooyxk{background-color:var(--fds-colour-bg-selected-stronger);}
 .b9tfims{background-color:var(--fds-colour-bg-selected-stronger-disabled);}
-.s1q1626e{margin-top:-0.3125rem;}
+.s1q1626e{margin-top:-0.3125rem;}}

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_6n1qsr.css ADDED Viewed

@@ -0,0 +1,5 @@
+@layer fds{.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);}
+.m1hsk0n5{color:var(--fds-colour-text-disabled);cursor:not-allowed;}.m1hsk0n5 img{-webkit-filter:grayscale(100%);filter:grayscale(100%);}.m1hsk0n5:hover{border-color:transparent;}}

package/index.d.ts CHANGED Viewed

@@ -19,7 +19,6 @@ export * from "./divider";
 export * from "./drawer";
 export * from "./e-signature";
 export * from "./error-display";
-export * from "./example";
 export * from "./feedback-rating";
 export * from "./file-download";
 export * from "./file-upload";
@@ -80,4 +79,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{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/input.styles_1cblor0.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.in7cu42{width:100%;height:calc(3rem - 2px);}
+@layer fds{.in7cu42{width:100%;height:calc(3rem - 2px);}
 .igi2hjf{color:var(--fds-colour-text-subtler);}.igi2hjf:hover{cursor:not-allowed;}
 .i13ih4tu{padding-left:var(--fds-spacing-16);}
 .itgr0ej{padding-right:var(--fds-spacing-16);}
@@ -9,4 +9,4 @@
 .d7twtqb{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%;}
 .dtt8rz0{border-color:transparent;padding:0;background:transparent!important;}.dtt8rz0:focus-within{outline-color:var(--fds-colour-border-focus);}
 .d1rboro0{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.d1rboro0:focus-within{outline-color:var(--fds-colour-border-disabled);}
-.d6he67o{border-color:var(--fds-colour-border-error);}.d6he67o:focus-within{outline-color:var(--fds-colour-border-error-focus);}
+.d6he67o{border-color:var(--fds-colour-border-error);}.d6he67o:focus-within{outline-color:var(--fds-colour-border-error-focus);}}

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":"ojFAsBaA,EAAY,CACrBC,EAgBAC,KAhBA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,UACRA,EAASC,OACTA,EAAMC,SACNA,EACA,cAAeC,EACf,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAChB,aAAcC,GAAgBd,EAC3Be,EAAUC,EAAAhB,EAdjB,mKAkBA,MAAMiB,eAEFA,EAAcC,cACdA,EAAaC,aAEbA,EAAYC,qBACZA,EAAoBC,qBACpBA,EAAoBC,kBACpBA,EAAiBC,eACjBA,EAAcC,SACdA,EAAQC,YAERA,EAAc,SAAQC,sBACtBA,EACA,uBAAwBC,GAAcC,QACtCA,GAAOC,eACPA,GAAcC,eACdA,GAAcC,iBACdA,GAAgBC,qBAChBA,GAAoBC,QACpBA,GAAOC,cACPA,GAAaC,cACbA,GAAaC,eACbA,GAAcC,iBACdA,GACA,aAAcC,IACdpC,EAAOqC,YAELC,SAAEA,GAAW,QAAWtC,GAKvBuC,GAAUC,IAAeC,EAAwBd,KACjDe,GAAaC,IAAkBF,GAAkB,IACjDG,GAASC,IAAcJ,GAAkB,GAC1CK,GAAaC,IACbC,GAAY,GAAGF,aACfG,GAAgB,GAAGH,iBACnBI,GAAkB,GAAGJ,oBACrBK,GAAiB,GAAGL,mBAEpBM,GAAUC,EAAuB,MACjCC,GAAcD,EAA0B,MAK9CE,GAAU,KACNf,GAAYb,GAAe,GAC5B,CAACA,KAKJ,MAAM6B,GAAkB,KACpB,GAAKjB,GAEL,OAAIf,EACOA,EAAsBe,IAG7BxB,EACOA,EAAewB,IAGnBA,GAASkB,UAAU,EAGxBC,GAAgCC,IAC9BA,EACA1B,UAAAA,KAEAD,UAAAA,IACJ,EAME4B,GAAsB,CAACC,EAASC,WACf,QAAnBhE,EAAAwD,GAAYS,eAAO,IAAAjE,GAAAA,EAAEkE,QACrBxB,GAAYqB,GACZlB,IAAe,GACfe,IAA6B,GAE7B9B,UAAAA,GAAiBiC,EAAMC,EAAe,EAGpCG,GAAoB,KAClBvB,KACAC,IAAe,GACfe,IAA6B,GACjC,EAyBEQ,GAAa,KACfvB,IAAe,GACfe,IAA6B,GAC7Bb,IAAW,EAAK,EAGdsB,GAAeC,IACjBzB,IAAe,GACfe,IAA6B,GAGd,UAAXU,IACAvB,IAAW,GACXvC,SAAAA,IACJ,EAGE+D,GAAgB,WACC,QAAnBvE,EAAAwD,GAAYS,eAAO,IAAAjE,GAAAA,EAAEkE,QACrBrB,IAAe,GACfe,IAA6B,EAAM,EAkBjCY,GAAgB,IAEdC,EAAA,MAAA,CAAAC,SAAA,CACIC,EAACC,GACG3E,IAAKuD,GACLlD,SAAUA,EACVuE,SAAUjC,GACVM,UAAWA,GACX4B,UAAU,UACVzE,SAAUA,EAAQ,kBACD0E,EAAUpE,EAAgByC,IAAgB,mBACzC2B,EAAUnE,EAAiBuC,IAAc,eAC7CtC,EAAW,gBACV2B,GACfjC,UAAWyE,EACPvE,GAAYwE,GACfP,SAnBbC,EAACO,EAAc,CAAC5E,SAAUA,EAAQoE,SAR9BjC,GACOkC,EAACQ,EAAU,CAAAT,SAAEhB,OAGjBiB,EAACS,EAAgB,CAAAV,SAAEjD,QA2BlBkD,EAACU,EAAc,CAACC,GAAInC,GAAauB,SAAA,mCAOvCa,GAAiB,IAEfZ,EAACa,EAAY,CACTtC,UAAWA,GACXuC,UAAW7D,GACX8D,aAAc5B,GACd6B,UAAWxB,GACXlD,eAAgBA,EAChBC,cAAeA,EACfC,aAAcA,EACdC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,kBAAmBA,EACnBC,eAAgBA,EAChBC,SAAUA,EACVoE,cAAenD,GAAW,CAACA,IAAY,GACvCoD,eAAgB9D,GAChB+D,mBAAoB9D,GACpBC,QAASA,GACT8D,mBAAiB,IA6C7B,OACIpB,EAACqB,YACGvB,EAACwB,GACGnD,QAASA,GACTxC,SAAUA,EACVD,SAAUA,EACVF,MAAOA,EACPF,IAAKqD,GACL7C,SAAUA,EAAQ,cACLC,EACbwF,UAAU,EACVC,QA9JY,KACfrD,IAAYF,IACbG,IAAW,EACf,EA4JQvC,OAzJY4F,IAEhBtD,KACCF,IACDU,GAAQW,UACPX,GAAQW,QAAQoC,SAASD,EAAEE,iBAE5BvD,IAAW,GACXvC,SAAAA,IACJ,EAgJ8B,gBACPgC,GACfjC,UAAWyE,EAAKuB,EAAqBhG,aAErCoE,EAACU,oBAA2BC,GAAIlC,GAAesB,SAC1CpC,KAELqC,uBACiBhD,GACbpB,UAAWiG,EAAoB9B,SA5DvCrE,EACOoC,GACHkC,EAAA,MAAA,CAAA,cACgB,iBACZuB,SAAU,EACVO,KAAK,WAAU,gBACD,UAAS,iBAAA,EAAA,iBAER,oBACE9F,EAAc,mBACbC,EAAe,eACnBC,EACdN,UAAWmG,WAEX/B,EAACQ,YAAYzB,SAEjB,KAGAiB,EAACgC,EAAmB,CAChBC,SAAUvG,IAAaC,EACvBuG,OAAQjE,GACR4B,cAAeA,GACfe,eAAgBA,GAChBuB,OAAQ1C,GACR2C,QAAS1C,GACTsB,UAAWpB,GACXyC,eAAa,EACbC,OAAQ,EACRC,UAAwB,UAAb1E,GAAuB,QAAU,OAC5C2E,oBAAkB,EAClBC,aAAchF,GACdiF,SAAUhF,GACViF,YAAahE,OA+BjBqB,EAAA,MAAA,CAAA,gBACmBnC,GACfjC,UAAWyE,EACPuC,EACAlH,GAAYmH,KAGpB7C,EAACU,EAAc,CAAA,eAAA,EAAaC,GAAIjC,YAC3BvC,IAEL6D,EAAA,MAAA,CAAA,gBACmBnC,GACfjC,UAAWyE,EACPyC,EACAhH,GAAYiH,EACZrH,GAAYsH,GACfjD,SAEDC,EAACiD,EAAKC,OAAAC,OAAA,CACF7H,IAAKA,GACDc,EAAU,CACdV,SAAUA,EACVC,SAAUA,EACVH,MAAOA,EACPC,SAxMO2H,IACnB3H,GAAUA,EAAS2H,EAAM,gBAwMD,QACZC,UAAU,8BACOjD,EACbpE,EACA0C,IACH,mBACiBzC,iBACJC,WAIV,EAIfoH,EAAsBC,EAAMC,WAAWpI"}
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-list-addon.styles_17iuqtw.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.fmhspm1{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;}.fmhspm1[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+@layer fds{.fmhspm1{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;}.fmhspm1[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
 .e135ws0j[data-position="right"]{padding-right:0;}.e135ws0j[data-position="left"]{padding-left:0;}
 .faf95up{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}
 .f96umbl{width:100%;}.f96umbl[data-position="right"]{padding-left:var(--fds-spacing-16);}.f96umbl[data-position="left"]{padding-right:var(--fds-spacing-16);}
@@ -6,4 +6,4 @@
 .fioonlm{padding:0;}
 .s1b40hsu{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;padding:0;background:transparent;margin-right:var(--fds-spacing-12);color:var(--fds-colour-text);}
 .d7gwol5{width:1px;background:var(--fds-colour-border);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1.25rem;}.d7gwol5[data-position="right"]{margin-left:var(--fds-spacing-12);}.d7gwol5[data-position="left"]{margin-right:var(--fds-spacing-12);}
-.d181f48m{display:none;}
+.d181f48m{display:none;}}

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/input-group/input-group.styles_bqye6f.css ADDED Viewed

@@ -0,0 +1,3 @@
+@layer fds{.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-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