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

package/cjs/file-download/file-download.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("./file-download.styles.js"),t=require("./file-list-card/file-list-card.js");exports.FileDownload=({id:l,fileItems:s,title:d,description:n,onDownload:o,"data-testid":a,className:c,styleType:j="bordered"})=>{const u=i=>e.__awaiter(void 0,void 0,void 0,(function*(){o&&(yield o(i))}));return i.jsxs(r.Container,{id:l?`${l}-file-download`:"file-download",className:c,"data-testid":a,$border:"bordered"===j,children:[(d||n)&&i.jsxs(r.TextContainer,{children:[d?"string"==typeof d?i.jsx(r.Title,{children:d}):i.jsx(r.TitleContainer,{children:d}):null,n?"string"==typeof n?i.jsx(r.Description,{children:n}):i.jsx(r.DescriptionContainer,{children:n}):null]}),i.jsx(r.ListWrapper,{children:s&&s.length>0&&s.map((e=>i.jsx(t.FileListCard,{fileItem:e,onDownload:u},e.id)))})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("./file-download.styles.js"),t=require("./file-list-card/file-list-card.js");exports.FileDownload=({id:l,fileItems:n,title:s,description:d,onDownload:o,onClick:a,"data-testid":c,className:j,styleType:u="bordered"})=>{const x=i=>e.__awaiter(void 0,void 0,void 0,(function*(){o&&(yield o(i))}));return i.jsxs(r.Container,{id:l?`${l}-file-download`:"file-download",className:j,"data-testid":c,$border:"bordered"===u,children:[(s||d)&&i.jsxs(r.TextContainer,{children:[s?"string"==typeof s?i.jsx(r.Title,{children:s}):i.jsx(r.TitleContainer,{children:s}):null,d?"string"==typeof d?i.jsx(r.Description,{children:d}):i.jsx(r.DescriptionContainer,{children:d}):null]}),i.jsx(r.ListWrapper,{children:n&&n.length>0&&n.map((e=>i.jsx(t.FileListCard,{fileItem:e,onDownload:x,onClick:a},e.id)))})]})};
 //# sourceMappingURL=file-download.js.map

package/cjs/file-download/file-download.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-download.js","sources":["../../../src/file-download/file-download.tsx"],"sourcesContent":["import {\n    Container,\n    Description,\n    DescriptionContainer,\n    ListWrapper,\n    TextContainer,\n    Title,\n    TitleContainer,\n} from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <Container\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={className}\n            data-testid={testId}\n            $border={styleType === \"bordered\"}\n        >\n            {(title || description) && (\n                <TextContainer>\n                    {renderTitle()}\n                    {renderDescription()}\n                </TextContainer>\n            )}\n            <ListWrapper>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                        />\n                    ))}\n            </ListWrapper>\n        </Container>\n    );\n};\n"],"names":["id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","_jsxs","Container","$border","TextContainer","_jsx","Title","children","TitleContainer","Description","DescriptionContainer","ListWrapper","length","map","FileListCard","fileItem"],"mappings":"+LAY4B,EACxBA,KACAC,YACAC,QACAC,cACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IA6BA,OACIE,EAAAA,KAACC,EAAAA,UAAS,CACNZ,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWA,EAAS,cACPD,EAAMQ,QACI,aAAdN,aAEPL,GAASC,IACPQ,EAAAA,KAACG,EAAAA,yBA/BJZ,EAIgB,iBAAVA,EACAa,EAAAA,IAACC,EAAAA,MAAK,CAAAC,SAAEf,IAGZa,EAAAA,IAACG,EAAAA,eAAc,CAAAD,SAAEf,IAPb,KAWNC,EAIsB,iBAAhBA,EACAY,EAAAA,IAACI,EAAAA,YAAW,CAAAF,SAAEd,IAGlBY,EAAAA,IAACK,EAAAA,qBAAoB,CAAAH,SAAEd,IAPnB,QAuBPY,EAAAA,IAACM,EAAAA,YAAW,CAAAJ,SACPhB,GACGA,EAAUqB,OAAS,GACnBrB,EAAUsB,KAAKd,GACXM,EAAAA,IAACS,EAAAA,aAAY,CAETC,SAAUhB,EACVL,WAAYI,GAFPC,EAAKT,UAMlB"}
+{"version":3,"file":"file-download.js","sources":["../../../src/file-download/file-download.tsx"],"sourcesContent":["import {\n    Container,\n    Description,\n    DescriptionContainer,\n    ListWrapper,\n    TextContainer,\n    Title,\n    TitleContainer,\n} from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    onClick,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <Container\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={className}\n            data-testid={testId}\n            $border={styleType === \"bordered\"}\n        >\n            {(title || description) && (\n                <TextContainer>\n                    {renderTitle()}\n                    {renderDescription()}\n                </TextContainer>\n            )}\n            <ListWrapper>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                            onClick={onClick}\n                        />\n                    ))}\n            </ListWrapper>\n        </Container>\n    );\n};\n"],"names":["id","fileItems","title","description","onDownload","onClick","testId","className","styleType","handleDownloadItem","item","__awaiter","_jsxs","Container","$border","TextContainer","_jsx","Title","children","TitleContainer","Description","DescriptionContainer","ListWrapper","length","map","FileListCard","fileItem"],"mappings":"+LAY4B,EACxBA,KACAC,YACAC,QACAC,cACAC,aACAC,UACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACzDP,UACMA,EAAWM,GAEzB,IA6BA,OACIE,EAAAA,KAACC,EAAAA,UAAS,CACNb,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCO,UAAWA,EAAS,cACPD,EAAMQ,QACI,aAAdN,aAEPN,GAASC,IACPS,EAAAA,KAACG,EAAAA,yBA/BJb,EAIgB,iBAAVA,EACAc,EAAAA,IAACC,EAAAA,MAAK,CAAAC,SAAEhB,IAGZc,EAAAA,IAACG,EAAAA,eAAc,CAAAD,SAAEhB,IAPb,KAWNC,EAIsB,iBAAhBA,EACAa,EAAAA,IAACI,EAAAA,YAAW,CAAAF,SAAEf,IAGlBa,EAAAA,IAACK,EAAAA,qBAAoB,CAAAH,SAAEf,IAPnB,QAuBPa,EAAAA,IAACM,EAAAA,YAAW,CAAAJ,SACPjB,GACGA,EAAUsB,OAAS,GACnBtB,EAAUuB,KAAKd,GACXM,EAAAA,IAACS,eAAY,CAETC,SAAUhB,EACVN,WAAYK,EACZJ,QAASA,GAHJK,EAAKV,UAOlB"}

package/cjs/file-download/file-list-card/file-list-card.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),t=require("react"),n=require("../../external/react-responsive/dist/react-responsive.js"),s=require("styled-components"),a=require("../../file-upload/helper.js"),l=require("../../theme/index.js");require("../../util/calendar-helper.js"),require("../../util/date-helper.js"),require("../../util/date-input-helper.js"),require("../../util/simple-id-generator.js");var o=require("../../util/string-helper.js");require("@react-aria/live-announcer");var d=require("./file-list-card.styles.js");const c=t.memo((({fileItem:c,onDownload:u})=>{const{id:h,name:x,size:j,errorMessage:m,thumbnailImageDataUrl:p,truncateText:g=!0,ready:S=!0}=c,[q,f]=t.useState(!1),[w,b]=t.useState(!1),v=a.FileUploadHelper.formatFileSizeDisplay(j),y=t.useContext(s.ThemeContext),E=l.Breakpoint["sm-max"]({theme:y}),I=n.reactResponsiveExports.useMediaQuery({maxWidth:E}),[T,C]=t.useState(),F=t.useRef(null);t.useEffect((()=>{F.current&&C(I?M(x):x)}),[x,I]);const M=e=>{if(!g)return e;const r=F&&F.current?F.current.getBoundingClientRect().width:0;return o.StringHelper.truncateTwoLines(e,r,16,1.5)},z=()=>r.jsxs(r.Fragment,{children:[r.jsx(d.ItemNameText,{ref:F,children:T}),w&&r.jsxs(d.DesktopErrorMessage,{children:[r.jsx(d.ErrorIcon,{"aria-hidden":!0}),m||"Something went wrong"]})]});return r.jsx(d.Item,{"data-testid":h,children:r.jsxs(d.Box,{onClick:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(S&&!q){f(!0);try{b(!1),yield u(c)}catch(e){b(!0)}finally{f(!1)}}})),$error:w,children:[(()=>{let e;var i;return p?(i=p,e=r.jsxs(r.Fragment,{children:[r.jsx(d.ThumbnailContainer,{"data-testid":`${h}-thumbnail`,children:r.jsx(d.Thumbnail,{"data-testid":`${h}-thumbnail-image`,src:i})}),r.jsxs(d.ExtendedNameSection,{children:[r.jsx(d.NameSection,{children:z()}),r.jsx(d.FileSizeSection,{children:v||"-"}),w&&r.jsxs(d.MobileErrorMessage,{children:[r.jsx(d.ErrorIcon,{"aria-hidden":!0}),m||"Something went wrong"]})]})]})):e=r.jsxs(r.Fragment,{children:[r.jsx(d.NameSection,{children:z()}),r.jsx(d.FileSizeSection,{children:v||"-"}),w&&r.jsxs(d.MobileErrorMessage,{children:[r.jsx(d.ErrorIcon,{"aria-hidden":!0}),m||"Something went wrong"]})]}),r.jsx(d.ContentSection,{$hasThumbnail:!!p,children:e})})(),r.jsx(d.ActionContainer,{children:r.jsx(d.IconButton,{"data-testid":`${h}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${x}`,children:q||!S?r.jsx(d.Spinner,{size:16,"aria-hidden":!0}):r.jsx(i.DownloadIcon,{"aria-hidden":!0})})})]})})}));exports.FileListCard=c;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),t=require("react"),n=require("../../external/react-responsive/dist/react-responsive.js"),a=require("styled-components"),s=require("../../file-upload/helper.js"),l=require("../../shared/accessibility/index.js"),o=require("../../theme/index.js");require("../../util/calendar-helper.js"),require("../../util/date-helper.js"),require("../../util/date-input-helper.js"),require("../../util/simple-id-generator.js");var d=require("../../util/string-helper.js");require("@react-aria/live-announcer");var u=require("./file-list-card.styles.js");const c=t.memo((({fileItem:c,onDownload:h,onClick:p})=>{const{id:m,name:x,mimeType:j,size:g,errorMessage:b,thumbnailImageDataUrl:y,truncateText:q=!0,ready:f=!0,clickLabel:C}=c,[S,v]=t.useState(!1),[T,w]=t.useState(!1),F=s.FileUploadHelper.formatFileSizeDisplay(g),I=s.FileUploadHelper.resolveThumbnailDisplay(j,y),$="none"!==I.type,k=t.useContext(a.ThemeContext),D=o.Breakpoint["sm-max"]({theme:k}),E=n.reactResponsiveExports.useMediaQuery({maxWidth:D}),[_,z]=t.useState(),B=t.useRef(null);t.useEffect((()=>{B.current&&z(E?N(x):x)}),[x,E]);const H=()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(f&&!S){v(!0);try{w(!1),yield h(c)}catch(e){w(!0)}finally{v(!1)}}})),M=()=>{f&&(p?p(c):H())},U=e=>{e.stopPropagation(),M()},L=e=>{e.stopPropagation(),H()},N=e=>{if(!q)return e;const r=B&&B.current?B.current.getBoundingClientRect().width:0;return d.StringHelper.truncateTwoLines(e,r,16,1.5)},P=()=>r.jsxs(r.Fragment,{children:[r.jsx(u.NameSection,{children:r.jsxs(r.Fragment,{children:[r.jsx(u.ItemNameText,{ref:B,children:_}),T&&r.jsxs(u.DesktopErrorMessage,{children:[r.jsx(u.ErrorIcon,{"aria-hidden":!0}),b||"Something went wrong"]})]})}),r.jsx(u.FileSizeSection,{children:F||"-"}),T&&r.jsxs(u.MobileErrorMessage,{children:[r.jsx(u.ErrorIcon,{"aria-hidden":!0}),b||"Something went wrong"]})]});return r.jsx(u.Item,{"data-testid":m,children:r.jsxs(u.Box,{onClick:M,$error:T,children:[r.jsxs(u.ContentSection,{$hasThumbnail:$,children:["none"===I.type?null:r.jsx(u.ThumbnailContainer,{"data-testid":`${m}-thumbnail`,children:"pdf-icon"===I.type?r.jsx(u.PdfThumbnail,{"data-testid":`${m}-thumbnail-image`,src:s.FileUploadHelper.PDF_ICON_URL}):r.jsx(u.Thumbnail,{"data-testid":`${m}-thumbnail-image`,src:I.src})}),$?r.jsx(u.ExtendedNameSection,{children:P()}):P()]}),p?r.jsx(l.VisuallyHidden,{children:r.jsx(u.CardButton,{type:"button","data-testid":`${m}-card-button`,"aria-label":null!=C?C:x,disabled:!f,onClick:U})}):null,r.jsx(u.ActionContainer,{children:r.jsx(u.IconButton,{"data-testid":`${m}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${x}`,onClick:L,children:S||!f?r.jsx(u.Spinner,{size:16,"aria-hidden":!0}):r.jsx(i.DownloadIcon,{"aria-hidden":!0})})})]})})}));exports.FileListCard=c;
 //# sourceMappingURL=file-list-card.js.map

package/cjs/file-download/file-list-card/file-list-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-card.js","sources":["../../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { memo, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { Breakpoint } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\nimport {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DesktopErrorMessage,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    IconButton,\n    Item,\n    ItemNameText,\n    MobileErrorMessage,\n    NameSection,\n    Spinner,\n    Thumbnail,\n    ThumbnailContainer,\n} from \"./file-list-card.styles\";\nimport { FileListItemProps } from \"./types\";\n\nconst Component = ({ fileItem, onDownload }: FileListItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n        ready = true,\n    } = fileItem;\n\n    // Local variables\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [isError, setIsError] = useState<boolean>(false);\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const [displayText, setDisplayText] = useState<string>();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!containerRef.current) return;\n        if (isMobile) {\n            setDisplayText(getTruncatedText(name));\n        } else {\n            setDisplayText(name);\n        }\n    }, [name, isMobile]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownload = async () => {\n        if (!ready || isLoading) {\n            return;\n        }\n\n        setIsLoading(true);\n        try {\n            setIsError(false);\n            await onDownload(fileItem);\n        } catch {\n            setIsError(true);\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            containerRef && containerRef.current\n                ? containerRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemNameText ref={containerRef}>{displayText}</ItemNameText>\n            {isError && (\n                <DesktopErrorMessage>\n                    <ErrorIcon aria-hidden />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </DesktopErrorMessage>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailSrc: string) => (\n        <>\n            <ThumbnailContainer data-testid={`${id}-thumbnail`}>\n                <Thumbnail\n                    data-testid={`${id}-thumbnail-image`}\n                    src={thumbnailSrc}\n                />\n            </ThumbnailContainer>\n            <ExtendedNameSection>\n                <NameSection>{renderNameDescription()}</NameSection>\n                <FileSizeSection>{fileSize ? fileSize : \"-\"}</FileSizeSection>\n                {isError && (\n                    <MobileErrorMessage>\n                        <ErrorIcon aria-hidden />\n                        {errorMessage ? errorMessage : \"Something went wrong\"}\n                    </MobileErrorMessage>\n                )}\n            </ExtendedNameSection>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <NameSection>{renderNameDescription()}</NameSection>\n            <FileSizeSection>{fileSize ? fileSize : \"-\"}</FileSizeSection>\n            {isError && (\n                <MobileErrorMessage>\n                    <ErrorIcon aria-hidden />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n\n        if (thumbnailImageDataUrl) {\n            content = renderWithThumbnail(thumbnailImageDataUrl);\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <ContentSection $hasThumbnail={!!thumbnailImageDataUrl}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        return (\n            <ActionContainer>\n                <IconButton\n                    data-testid={`${id}-download-button`}\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`download ${name}`}\n                >\n                    {isLoading || !ready ? (\n                        <Spinner size={16} aria-hidden />\n                    ) : (\n                        <DownloadIcon aria-hidden />\n                    )}\n                </IconButton>\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item data-testid={id}>\n            <Box onClick={handleDownload} $error={isError}>\n                {renderContents()}\n                {renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["FileListCard","memo","fileItem","onDownload","id","name","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameDescription","_jsxs","_jsx","ItemNameText","ref","children","DesktopErrorMessage","ErrorIcon","Item","Box","onClick","__awaiter","_a","$error","content","thumbnailSrc","_Fragment","ThumbnailContainer","Thumbnail","src","ExtendedNameSection","NameSection","FileSizeSection","MobileErrorMessage","ContentSection","$hasThumbnail","renderContents","ActionContainer","IconButton","type","styleType","sizeType","Spinner","DownloadIcon"],"mappings":"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"}
+{"version":3,"file":"file-list-card.js","sources":["../../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { memo, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { VisuallyHidden } from \"../../shared/accessibility\";\nimport { Breakpoint } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\nimport {\n    ActionContainer,\n    Box,\n    CardButton,\n    ContentSection,\n    DesktopErrorMessage,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    IconButton,\n    Item,\n    ItemNameText,\n    MobileErrorMessage,\n    NameSection,\n    PdfThumbnail,\n    Spinner,\n    Thumbnail,\n    ThumbnailContainer,\n} from \"./file-list-card.styles\";\nimport { FileListItemProps } from \"./types\";\n\nconst Component = ({ fileItem, onDownload, onClick }: FileListItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        mimeType,\n        size,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n        ready = true,\n        clickLabel,\n    } = fileItem;\n\n    // Local variables\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [isError, setIsError] = useState<boolean>(false);\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const thumbnailDisplay = FileUploadHelper.resolveThumbnailDisplay(\n        mimeType,\n        thumbnailImageDataUrl\n    );\n    const hasThumbnail = thumbnailDisplay.type !== \"none\";\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const [displayText, setDisplayText] = useState<string>();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!containerRef.current) return;\n        if (isMobile) {\n            setDisplayText(getTruncatedText(name));\n        } else {\n            setDisplayText(name);\n        }\n    }, [name, isMobile]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownload = async () => {\n        if (!ready || isLoading) {\n            return;\n        }\n\n        setIsLoading(true);\n        try {\n            setIsError(false);\n            await onDownload(fileItem);\n        } catch {\n            setIsError(true);\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    const handleCardClick = () => {\n        if (!ready) {\n            return;\n        }\n\n        if (onClick) {\n            onClick(fileItem);\n            return;\n        }\n\n        handleDownload();\n    };\n\n    const handleCardButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        // The button sits inside Box, which also handles clicks. Without this,\n        // both handlers fire and the action runs twice.\n        event.stopPropagation();\n        handleCardClick();\n    };\n\n    const handleDownloadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        // Same reason as above: stop the click from also reaching Box.\n        event.stopPropagation();\n        handleDownload();\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            containerRef && containerRef.current\n                ? containerRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemNameText ref={containerRef}>{displayText}</ItemNameText>\n            {isError && (\n                <DesktopErrorMessage>\n                    <ErrorIcon aria-hidden />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </DesktopErrorMessage>\n            )}\n        </>\n    );\n\n    const renderThumbnail = () => {\n        if (thumbnailDisplay.type === \"none\") {\n            return null;\n        }\n\n        return (\n            <ThumbnailContainer data-testid={`${id}-thumbnail`}>\n                {thumbnailDisplay.type === \"pdf-icon\" ? (\n                    <PdfThumbnail\n                        data-testid={`${id}-thumbnail-image`}\n                        src={FileUploadHelper.PDF_ICON_URL}\n                    />\n                ) : (\n                    <Thumbnail\n                        data-testid={`${id}-thumbnail-image`}\n                        src={thumbnailDisplay.src}\n                    />\n                )}\n            </ThumbnailContainer>\n        );\n    };\n\n    const renderNameSizeError = () => (\n        <>\n            <NameSection>{renderNameDescription()}</NameSection>\n            <FileSizeSection>{fileSize ? fileSize : \"-\"}</FileSizeSection>\n            {isError && (\n                <MobileErrorMessage>\n                    <ErrorIcon aria-hidden />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderContents = () => (\n        <ContentSection $hasThumbnail={hasThumbnail}>\n            {renderThumbnail()}\n            {hasThumbnail ? (\n                <ExtendedNameSection>\n                    {renderNameSizeError()}\n                </ExtendedNameSection>\n            ) : (\n                renderNameSizeError()\n            )}\n        </ContentSection>\n    );\n\n    const renderCardButton = () => {\n        if (!onClick) {\n            return null;\n        }\n\n        return (\n            <VisuallyHidden>\n                <CardButton\n                    type=\"button\"\n                    data-testid={`${id}-card-button`}\n                    aria-label={clickLabel ?? name}\n                    disabled={!ready}\n                    onClick={handleCardButtonClick}\n                />\n            </VisuallyHidden>\n        );\n    };\n\n    const renderActions = () => {\n        return (\n            <ActionContainer>\n                <IconButton\n                    data-testid={`${id}-download-button`}\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`download ${name}`}\n                    onClick={handleDownloadButtonClick}\n                >\n                    {isLoading || !ready ? (\n                        <Spinner size={16} aria-hidden />\n                    ) : (\n                        <DownloadIcon aria-hidden />\n                    )}\n                </IconButton>\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item data-testid={id}>\n            <Box onClick={handleCardClick} $error={isError}>\n                {renderContents()}\n                {renderCardButton()}\n                {renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["FileListCard","memo","fileItem","onDownload","onClick","id","name","mimeType","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","clickLabel","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","thumbnailDisplay","resolveThumbnailDisplay","hasThumbnail","type","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","handleDownload","__awaiter","_a","handleCardClick","handleCardButtonClick","event","stopPropagation","handleDownloadButtonClick","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameSizeError","_jsxs","_Fragment","children","_jsx","NameSection","ItemNameText","ref","DesktopErrorMessage","ErrorIcon","FileSizeSection","MobileErrorMessage","Item","Box","$error","ContentSection","$hasThumbnail","ThumbnailContainer","PdfThumbnail","src","PDF_ICON_URL","Thumbnail","ExtendedNameSection","VisuallyHidden","CardButton","disabled","ActionContainer","IconButton","styleType","sizeType","Spinner","DownloadIcon"],"mappings":"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"}

package/cjs/file-download/file-list-card/file-list-card.styles.js

@@ -1,4 +1,4 @@
-"use strict";var e=require("styled-components"),i=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("../../icon-button/icon-button.js"),t=require("../../shared/component-loading-spinner/component-loading-spinner.js"),a=require("../../shared/image-with-fallback/image-with-fallback.js"),o=require("../../shared/styles/index.js"),n=require("../../theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(e);const s=d.default.li`
+"use strict";var e=require("styled-components"),i=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("../../icon-button/icon-button.js"),o=require("../../shared/component-loading-spinner/component-loading-spinner.js"),t=require("../../shared/image-with-fallback/image-with-fallback.js"),n=require("../../shared/styles/index.js"),a=require("../../theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(e);const s=d.default.li`
     display: flex;
     align-items: center;
 
@@ -6,34 +6,48 @@
     border: none;
 
     &:not(:last-child) {
-        margin-bottom: ${n.Spacing["spacing-16"]};
+        margin-bottom: ${a.Spacing["spacing-16"]};
     }
-`,c=d.default.div`
+`,c=d.default.button`
+    appearance: none;
+    padding: 0;
+    background: none;
+    border: none;
+`,u=d.default.div`
     display: flex;
     align-items: center;
 
     width: 100%;
-    padding: ${n.Spacing["spacing-16"]} ${n.Spacing["spacing-32"]};
+    padding: ${a.Spacing["spacing-16"]} ${a.Spacing["spacing-32"]};
     cursor: pointer;
 
-    background: ${n.Colour["bg-primary-subtlest"]};
-    border: ${n.Border["width-010"]} ${n.Border.solid} ${n.Colour.border};
-    border-radius: ${n.Radius.sm};
+    background: ${a.Colour["bg-primary-subtlest"]};
+    border: ${a.Border["width-010"]} ${a.Border.solid} ${a.Colour.border};
+    border-radius: ${a.Radius.sm};
 
-    ${n.MediaQuery.MaxWidth.lg} {
-        padding: ${n.Spacing["spacing-16"]};
+    ${a.MediaQuery.MaxWidth.lg} {
+        padding: ${a.Spacing["spacing-16"]};
     }
 
     &:hover {
-        background: ${n.Colour["bg-hover"]};
+        background: ${a.Colour["bg-hover"]};
+    }
+
+    &:has(${c}:focus-visible) {
+        outline: 2px solid ${a.Colour["focus-ring"]};
+        outline-offset: -2px;
     }
 
     ${i=>{if(i.$error)return e.css`
-                background: ${n.Colour["bg-error"]};
-                border-color: ${n.Colour["border-error"]};
+                background: ${a.Colour["bg-error"]};
+                border-color: ${a.Colour["border-error"]};
 
                 &:hover {
-                    background: ${n.Colour["bg-error"]};
+                    background: ${a.Colour["bg-error"]};
+                }
+
+                &:has(${c}:focus-visible) {
+                    outline-color: ${a.Colour["border-error-focus"]};
                 }
             `}}
 `,g=d.default.div`
@@ -41,14 +55,14 @@
     flex: 1;
     align-items: center;
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
     }
 
     ${i=>{if(i.$hasThumbnail)return e.css`
-                ${n.MediaQuery.MaxWidth.lg} {
+                ${a.MediaQuery.MaxWidth.lg} {
                     flex-direction: row;
                     align-items: center;
                 }
@@ -63,12 +77,12 @@
     overflow-wrap: break-word;
     word-break: break-all;
     white-space: normal;
-`,u=d.default.div`
+`,f=d.default.div`
     display: flex;
     flex: 1;
     align-items: center;
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
@@ -78,99 +92,101 @@
     justify-content: flex-end;
 
     width: 5rem;
-    margin-left: ${n.Spacing["spacing-8"]};
+    margin-left: ${a.Spacing["spacing-8"]};
 
-    ${n.Font["body-md-regular"]}
-    color: ${n.Colour.text};
+    ${a.Font["body-md-regular"]}
+    color: ${a.Colour.text};
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         justify-content: flex-start;
 
         width: 100%;
         margin-left: 0;
-        margin-top: ${n.Spacing["spacing-8"]};
+        margin-top: ${a.Spacing["spacing-8"]};
 
-        ${o.lineClampCss(2)}
+        ${n.lineClampCss(2)}
     }
-`,f=d.default.div`
-    ${n.Font["body-md-regular"]}
-    color: ${n.Colour.text};
+`,h=d.default.div`
+    ${a.Font["body-md-regular"]}
+    color: ${a.Colour.text};
 
-    ${n.MediaQuery.MaxWidth.lg} {
-        ${o.lineClampCss(2)}
+    ${a.MediaQuery.MaxWidth.lg} {
+        ${n.lineClampCss(2)}
     }
-`;d.default(f)`
-    ${n.Font["body-md-regular"]}
-    margin-top: ${n.Spacing["spacing-4"]};
+`;d.default(h)`
+    ${a.Font["body-md-regular"]}
+    margin-top: ${a.Spacing["spacing-4"]};
 `;const m=d.default(i.ExclamationCircleFillIcon)`
     height: 1lh;
     width: 1em;
     flex-shrink: 0;
-    color: ${n.Colour["icon-error-strong"]};
-`,h=d.default.div`
-    ${n.Font["body-sm-semibold"]}
-    color: ${n.Colour["text-error"]};
-`,$=d.default(h)`
-    margin-top: ${n.Spacing["spacing-8"]};
+    color: ${a.Colour["icon-error-strong"]};
+`,$=d.default.div`
+    ${a.Font["body-sm-semibold"]}
+    color: ${a.Colour["text-error"]};
+`,b=d.default($)`
+    margin-top: ${a.Spacing["spacing-8"]};
     display: flex;
-    gap: ${n.Spacing["spacing-4"]};
+    gap: ${a.Spacing["spacing-4"]};
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         display: none;
         visibility: hidden;
     }
-`,b=d.default(h)`
+`,y=d.default($)`
     display: none;
     visibility: hidden;
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         display: flex;
-        gap: ${n.Spacing["spacing-4"]};
+        gap: ${a.Spacing["spacing-4"]};
         visibility: visible;
-        margin-top: ${n.Spacing["spacing-8"]};
+        margin-top: ${a.Spacing["spacing-8"]};
     }
-`,y=d.default(t.ComponentLoadingSpinner)`
-    color: ${n.Colour["icon-primary"]};
-`,M=d.default.div`
+`,M=d.default(o.ComponentLoadingSpinner)`
+    color: ${a.Colour["icon-primary"]};
+`,C=d.default.div`
     display: flex;
     justify-content: flex-end;
     align-items: center;
 
-    margin-left: ${n.Spacing["spacing-32"]};
+    margin-left: ${a.Spacing["spacing-32"]};
 
-    ${n.MediaQuery.MaxWidth.lg} {
-        margin-left: ${n.Spacing["spacing-16"]};
+    ${a.MediaQuery.MaxWidth.lg} {
+        margin-left: ${a.Spacing["spacing-16"]};
     }
 `,S=d.default(r.IconButton)`
     min-width: unset;
 
     &:not(:last-child) {
-        margin-right: ${n.Spacing["spacing-16"]};
+        margin-right: ${a.Spacing["spacing-16"]};
     }
-`,w=d.default.div`
+`,v=d.default.div`
     width: auto;
-    margin-right: ${n.Spacing["spacing-32"]};
+    margin-right: ${a.Spacing["spacing-32"]};
 
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
     justify-content: center;
 
-    ${n.MediaQuery.MaxWidth.lg} {
-        margin-right: ${n.Spacing["spacing-16"]};
+    ${a.MediaQuery.MaxWidth.lg} {
+        margin-right: ${a.Spacing["spacing-16"]};
     }
-`,C=d.default(a.ImageWithFallback)`
-    border-radius: ${n.Radius.sm};
-    border: ${n.Border["width-010"]} ${n.Border.solid} ${n.Colour.border};
+`,w=d.default(t.ImageWithFallback)`
+    border-radius: ${a.Radius.sm};
+    border: ${a.Border["width-010"]} ${a.Border.solid} ${a.Colour.border};
 
     width: 96px;
     height: 96px;
     aspect-ratio: 1;
     object-fit: cover;
 
-    ${n.MediaQuery.MaxWidth.lg} {
+    ${a.MediaQuery.MaxWidth.lg} {
         width: 64px;
         height: 64px;
     }
-`;exports.ActionContainer=M,exports.Box=c,exports.ContentSection=g,exports.DesktopErrorMessage=$,exports.ErrorIcon=m,exports.ExtendedNameSection=u,exports.FileSizeSection=x,exports.IconButton=S,exports.Item=s,exports.ItemNameText=f,exports.MobileErrorMessage=b,exports.NameSection=p,exports.Spinner=y,exports.Thumbnail=C,exports.ThumbnailContainer=w;
+`,k=d.default(w)`
+    border: none;
+`;exports.ActionContainer=C,exports.Box=u,exports.CardButton=c,exports.ContentSection=g,exports.DesktopErrorMessage=b,exports.ErrorIcon=m,exports.ExtendedNameSection=f,exports.FileSizeSection=x,exports.IconButton=S,exports.Item=s,exports.ItemNameText=h,exports.MobileErrorMessage=y,exports.NameSection=p,exports.PdfThumbnail=k,exports.Spinner=M,exports.Thumbnail=w,exports.ThumbnailContainer=v;
 //# sourceMappingURL=file-list-card.styles.js.map

package/cjs/file-download/file-list-card/file-list-card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-card.styles.js","sources":["../../../../src/file-download/file-list-card/file-list-card.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n\n    ${(props) => {\n        if (props.$error) {\n            return css`\n                background: ${Colour[\"bg-error\"]};\n                border-color: ${Colour[\"border-error\"]};\n\n                &:hover {\n                    background: ${Colour[\"bg-error\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${MediaQuery.MaxWidth.lg} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemNameText = styled.div`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemDescriptionText = styled(ItemNameText)`\n    ${Font[\"body-md-regular\"]}\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst BaseErrorMessage = styled.div`\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const ActionContainer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ThumbnailContainer = styled.div`\n    width: auto;\n    margin-right: ${Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n"],"names":["Item","styled","li","Spacing","Box","div","Colour","Border","Radius","MediaQuery","MaxWidth","lg","props","$error","css","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","Font","lineClampCss","ItemNameText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","DesktopErrorMessage","MobileErrorMessage","Spinner","ComponentLoadingSpinner","ActionContainer","IconButton","DSIconButton","ThumbnailContainer","Thumbnail","ImageWithFallback"],"mappings":"4cAuBO,MAAMA,EAAOC,EAAAA,QAAOC,EAAE;;;;;;;;yBAQJC,EAAAA,QAAQ;;EAIpBC,EAAMH,EAAAA,QAAOI,GAAkB;;;;;eAK7BF,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;kBAG9BG,EAAAA,OAAO;cACXC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;;MAE1BC,EAAAA,WAAWC,SAASC;mBACPR,EAAAA,QAAQ;;;;sBAILG,EAAAA,OAAO;;;MAGtBM,IACC,GAAIA,EAAMC,OACN,OAAOC,KAAG;8BACQR,EAAAA,OAAO;gCACLA,EAAAA,OAAO;;;kCAGLA,EAAAA,OAAO;;aAGjC;EAIKS,EAAiBd,EAAAA,QAAOI,GAA6B;;;;;MAK5DI,EAAAA,WAAWC,SAASC;;;;;;MAMnBC,IACC,GAAIA,EAAMI,cACN,OAAOF,KAAG;kBACJL,EAAAA,WAAWC,SAASC;;;;aAK9B;EAIKM,EAAchB,EAAAA,QAAOI,GAAG;;;;;;;;;;EAYxBa,EAAsBjB,EAAAA,QAAOI,GAAG;;;;;MAKvCI,EAAAA,WAAWC,SAASC;;;;;EAObQ,EAAkBlB,EAAAA,QAAOI,GAAG;;;;;mBAKtBF,EAAAA,QAAQ;;MAErBiB,EAAAA,KAAK;aACEd,EAAAA,OAAa;;MAEpBG,EAAAA,WAAWC,SAASC;;;;;sBAKJR,EAAAA,QAAQ;;UAEpBkB,EAAAA,aAAa;;EAIVC,EAAerB,EAAAA,QAAOI,GAAG;MAChCe,EAAAA,KAAK;aACEd,EAAAA,OAAa;;MAEpBG,EAAAA,WAAWC,SAASC;UAChBU,EAAAA,aAAa;;EAIYpB,EAAAA,QAAOqB,EAAa;MACjDF,EAAAA,KAAK;kBACOjB,EAAAA,QAAQ;QAGboB,EAAYtB,EAAAA,QAAOuB,EAAAA,0BAA0B;;;;aAI7ClB,EAAAA,OAAO;EAGdmB,EAAmBxB,EAAAA,QAAOI,GAAG;MAC7Be,EAAAA,KAAK;aACEd,EAAAA,OAAO;EAGPoB,EAAsBzB,EAAAA,QAAOwB,EAAiB;kBACzCtB,EAAAA,QAAQ;;WAEfA,EAAAA,QAAQ;;MAEbM,EAAAA,WAAWC,SAASC;;;;EAMbgB,EAAqB1B,EAAAA,QAAOwB,EAAiB;;;;MAIpDhB,EAAAA,WAAWC,SAASC;;eAEXR,EAAAA,QAAQ;;sBAEDA,EAAAA,QAAQ;;EAIjByB,EAAU3B,EAAAA,QAAO4B,EAAAA,wBAAwB;aACzCvB,EAAAA,OAAO;EAGPwB,EAAkB7B,EAAAA,QAAOI,GAAG;;;;;mBAKtBF,EAAAA,QAAQ;;MAErBM,EAAAA,WAAWC,SAASC;uBACHR,EAAAA,QAAQ;;EAIlB4B,EAAa9B,EAAAA,QAAO+B,EAAAA,WAAa;;;;wBAItB7B,EAAAA,QAAQ;;EAInB8B,EAAqBhC,EAAAA,QAAOI,GAAG;;oBAExBF,EAAAA,QAAQ;;;;;;;MAOtBM,EAAAA,WAAWC,SAASC;wBACFR,EAAAA,QAAQ;;EAInB+B,EAAYjC,EAAAA,QAAOkC,EAAAA,kBAAkB;qBAC7B3B,EAAAA,OAAW;cAClBD,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;;;;;;;MAOjEG,EAAAA,WAAWC,SAASC;;;;"}
+{"version":3,"file":"file-list-card.styles.js","sources":["../../../../src/file-download/file-list-card/file-list-card.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const CardButton = styled.button`\n    appearance: none;\n    padding: 0;\n    background: none;\n    border: none;\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n\n    &:has(${CardButton}:focus-visible) {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n\n    ${(props) => {\n        if (props.$error) {\n            return css`\n                background: ${Colour[\"bg-error\"]};\n                border-color: ${Colour[\"border-error\"]};\n\n                &:hover {\n                    background: ${Colour[\"bg-error\"]};\n                }\n\n                &:has(${CardButton}:focus-visible) {\n                    outline-color: ${Colour[\"border-error-focus\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${MediaQuery.MaxWidth.lg} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemNameText = styled.div`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemDescriptionText = styled(ItemNameText)`\n    ${Font[\"body-md-regular\"]}\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst BaseErrorMessage = styled.div`\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const ActionContainer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ThumbnailContainer = styled.div`\n    width: auto;\n    margin-right: ${Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const PdfThumbnail = styled(Thumbnail)`\n    border: none;\n`;\n"],"names":["Item","styled","li","Spacing","CardButton","button","Box","div","Colour","Border","Radius","MediaQuery","MaxWidth","lg","props","$error","css","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","Font","lineClampCss","ItemNameText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","DesktopErrorMessage","MobileErrorMessage","Spinner","ComponentLoadingSpinner","ActionContainer","IconButton","DSIconButton","ThumbnailContainer","Thumbnail","ImageWithFallback","PdfThumbnail"],"mappings":"4cAuBO,MAAMA,EAAOC,EAAAA,QAAOC,EAAE;;;;;;;;yBAQJC,EAAAA,QAAQ;;EAIpBC,EAAaH,EAAAA,QAAOI,MAAM;;;;;EAO1BC,EAAML,EAAAA,QAAOM,GAAkB;;;;;eAK7BJ,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;kBAG9BK,EAAAA,OAAO;cACXC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;;MAE1BC,EAAAA,WAAWC,SAASC;mBACPV,EAAAA,QAAQ;;;;sBAILK,EAAAA,OAAO;;;YAGjBJ;6BACiBI,EAAAA,OAAO;;;;MAI7BM,IACC,GAAIA,EAAMC,OACN,OAAOC,KAAG;8BACQR,EAAAA,OAAO;gCACLA,EAAAA,OAAO;;;kCAGLA,EAAAA,OAAO;;;wBAGjBJ;qCACaI,EAAAA,OAAO;;aAGpC;EAIKS,EAAiBhB,EAAAA,QAAOM,GAA6B;;;;;MAK5DI,EAAAA,WAAWC,SAASC;;;;;;MAMnBC,IACC,GAAIA,EAAMI,cACN,OAAOF,KAAG;kBACJL,EAAAA,WAAWC,SAASC;;;;aAK9B;EAIKM,EAAclB,EAAAA,QAAOM,GAAG;;;;;;;;;;EAYxBa,EAAsBnB,EAAAA,QAAOM,GAAG;;;;;MAKvCI,EAAAA,WAAWC,SAASC;;;;;EAObQ,EAAkBpB,EAAAA,QAAOM,GAAG;;;;;mBAKtBJ,EAAAA,QAAQ;;MAErBmB,EAAAA,KAAK;aACEd,EAAAA,OAAa;;MAEpBG,EAAAA,WAAWC,SAASC;;;;;sBAKJV,EAAAA,QAAQ;;UAEpBoB,EAAAA,aAAa;;EAIVC,EAAevB,EAAAA,QAAOM,GAAG;MAChCe,EAAAA,KAAK;aACEd,EAAAA,OAAa;;MAEpBG,EAAAA,WAAWC,SAASC;UAChBU,EAAAA,aAAa;;EAIYtB,EAAAA,QAAOuB,EAAa;MACjDF,EAAAA,KAAK;kBACOnB,EAAAA,QAAQ;QAGbsB,EAAYxB,EAAAA,QAAOyB,EAAAA,0BAA0B;;;;aAI7ClB,EAAAA,OAAO;EAGdmB,EAAmB1B,EAAAA,QAAOM,GAAG;MAC7Be,EAAAA,KAAK;aACEd,EAAAA,OAAO;EAGPoB,EAAsB3B,EAAAA,QAAO0B,EAAiB;kBACzCxB,EAAAA,QAAQ;;WAEfA,EAAAA,QAAQ;;MAEbQ,EAAAA,WAAWC,SAASC;;;;EAMbgB,EAAqB5B,EAAAA,QAAO0B,EAAiB;;;;MAIpDhB,EAAAA,WAAWC,SAASC;;eAEXV,EAAAA,QAAQ;;sBAEDA,EAAAA,QAAQ;;EAIjB2B,EAAU7B,EAAAA,QAAO8B,EAAAA,wBAAwB;aACzCvB,EAAAA,OAAO;EAGPwB,EAAkB/B,EAAAA,QAAOM,GAAG;;;;;mBAKtBJ,EAAAA,QAAQ;;MAErBQ,EAAAA,WAAWC,SAASC;uBACHV,EAAAA,QAAQ;;EAIlB8B,EAAahC,EAAAA,QAAOiC,EAAAA,WAAa;;;;wBAItB/B,EAAAA,QAAQ;;EAInBgC,EAAqBlC,EAAAA,QAAOM,GAAG;;oBAExBJ,EAAAA,QAAQ;;;;;;;MAOtBQ,EAAAA,WAAWC,SAASC;wBACFV,EAAAA,QAAQ;;EAInBiC,EAAYnC,EAAAA,QAAOoC,EAAAA,kBAAkB;qBAC7B3B,EAAAA,OAAW;cAClBD,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;;;;;;;MAOjEG,EAAAA,WAAWC,SAASC;;;;EAMbyB,EAAerC,EAAAA,QAAOmC,EAAU;;"}

package/cjs/file-upload/helper.js

@@ -1,2 +1,2 @@
-"use strict";var e;exports.FileUploadHelper=void 0,(e=exports.FileUploadHelper||(exports.FileUploadHelper={})).PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg",e.formatFileSizeDisplay=e=>{if(!e||0===e)return"0 KB";const i=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,i)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`},e.isSupportedImageType=e=>["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e);
+"use strict";var e;exports.FileUploadHelper=void 0,(e=exports.FileUploadHelper||(exports.FileUploadHelper={})).PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg",e.formatFileSizeDisplay=e=>{if(!e||0===e)return"0 KB";const i=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,i)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`},e.isSupportedImageType=e=>["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e),e.resolveThumbnailDisplay=(i,p)=>p?{type:"image",src:p}:i===e.PDF_MIME_TYPE?{type:"pdf-icon"}:{type:"none"};
 //# sourceMappingURL=helper.js.map

package/cjs/file-upload/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../../src/file-upload/helper.ts"],"sourcesContent":["export namespace FileUploadHelper {\n    export const PDF_MIME_TYPE = \"application/pdf\";\n    export const PDF_ICON_URL =\n        \"https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg\";\n\n    // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n    export const formatFileSizeDisplay = (size?: number) => {\n        if (!size || size === 0) return \"0 KB\";\n\n        const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n        const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n        const value = Number(size / Math.pow(1024, index)).toFixed(0);\n        const measurement = sizes[index];\n\n        return `${value} ${measurement}`;\n    };\n\n    export const isSupportedImageType = (type: string) => {\n        /** Currently only images supported by html <img> */\n        const acceptedImageTypes = [\n            \"image/avif\",\n            \"image/gif\",\n            \"image/jpeg\",\n            \"image/png\",\n            \"image/svg+xml\",\n            \"image/webp\",\n        ];\n\n        return acceptedImageTypes.includes(type);\n    };\n}\n"],"names":["FileUploadHelper","PDF_MIME_TYPE","PDF_ICON_URL","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes"],"mappings":"aAAA,IAAiBA,EAAAA,QAAAA,sBAAAA,GAAAA,EAAAA,QAAAA,mBAAAA,yBAAgB,CAAA,IAChBC,cAAgB,kBAChBD,EAAAE,aACT,oEAGSF,EAAAG,sBAAyBC,IAClC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAEM,EAGvBL,EAAAY,qBAAwBC,GAEN,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD"}
+{"version":3,"file":"helper.js","sources":["../../../src/file-upload/helper.ts"],"sourcesContent":["/**\n * How a file's thumbnail slot should be rendered.\n *\n * - `image` — a thumbnail was supplied; render it at `src`\n * - `pdf-icon` — a PDF with no thumbnail; render the PDF badge borderless\n * - `none` — nothing to show; render no thumbnail slot at all\n */\nexport type FileThumbnailDisplay =\n    | { type: \"image\"; src: string }\n    | { type: \"pdf-icon\" }\n    | { type: \"none\" };\n\nexport namespace FileUploadHelper {\n    export const PDF_MIME_TYPE = \"application/pdf\";\n    export const PDF_ICON_URL =\n        \"https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg\";\n\n    // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n    export const formatFileSizeDisplay = (size?: number) => {\n        if (!size || size === 0) return \"0 KB\";\n\n        const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n        const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n        const value = Number(size / Math.pow(1024, index)).toFixed(0);\n        const measurement = sizes[index];\n\n        return `${value} ${measurement}`;\n    };\n\n    export const isSupportedImageType = (type: string) => {\n        /** Currently only images supported by html <img> */\n        const acceptedImageTypes = [\n            \"image/avif\",\n            \"image/gif\",\n            \"image/jpeg\",\n            \"image/png\",\n            \"image/svg+xml\",\n            \"image/webp\",\n        ];\n\n        return acceptedImageTypes.includes(type);\n    };\n\n    /**\n     * Decides how a file's thumbnail slot should render, given its MIME type\n     * and any thumbnail the consumer supplied.\n     *\n     * Lives on `FileUploadHelper` so `FileUpload` can adopt it later. Today\n     * only `FileDownload` calls it: `FileUpload` still decides this inline in\n     * `file-list-item-thumbnail.tsx`, and the two do NOT yet agree — for a\n     * non-PDF with no thumbnail this returns `\"none\"` while `FileUpload`\n     * renders an `<img>` with an empty `src`. Do not read this as an invariant\n     * the two components already share.\n     *\n     * Callers render the result with their own markup, because their thumbnails\n     * change size at different breakpoints.\n     */\n    export const resolveThumbnailDisplay = (\n        mimeType: string | undefined,\n        thumbnailImageDataUrl: string | undefined\n    ): FileThumbnailDisplay => {\n        if (thumbnailImageDataUrl) {\n            return { type: \"image\", src: thumbnailImageDataUrl };\n        }\n\n        if (mimeType === PDF_MIME_TYPE) {\n            return { type: \"pdf-icon\" };\n        }\n\n        return { type: \"none\" };\n    };\n}\n"],"names":["FileUploadHelper","PDF_MIME_TYPE","PDF_ICON_URL","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes","resolveThumbnailDisplay","mimeType","thumbnailImageDataUrl","src"],"mappings":"aAYA,IAAiBA,EAAAA,QAAAA,sBAAAA,GAAAA,EAAAA,QAAAA,mBAAAA,yBAAgB,CAAA,IAChBC,cAAgB,kBAChBD,EAAAE,aACT,oEAGSF,EAAAG,sBAAyBC,IAClC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAEM,EAGvBL,EAAAY,qBAAwBC,GAEN,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD,GAiB1Bb,EAAAe,wBAA0B,CACnCC,EACAC,IAEIA,EACO,CAAEJ,KAAM,QAASK,IAAKD,GAG7BD,IAAahB,EAAAC,cACN,CAAEY,KAAM,YAGZ,CAAEA,KAAM"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),n=require("@lifesg/react-icons/bin"),r=require("@react-aria/live-announcer"),l=require("react"),a=require("react-zoom-pan-pinch"),o=require("../modal-v2/index.js"),s=require("../shared/hooks/use-state-callback.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var u=require("../util/use-event-listener.js"),d=require("./fullscreen-image-carousel.style.js");const c=e=>!!e&&"custom"===e.type,h=(h,m)=>{var v,{items:f,initialActiveItemIndex:g,hideThumbnail:j=!1,hideNavigation:x=!1,hideCounter:p=!1,hideMagnifier:b=!1,onDelete:I,onClose:C,insets:$,show:T}=h,S=e.__rest(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[w,q]=s.useStateCallback(null!=g?g:0),[k,y]=l.useState({}),[M,R]=l.useState(1),[F,A]=l.useState(),[B,L]=l.useState(),N=l.useRef(null),W=l.useRef([]),D=l.useRef([]),E=l.useRef(null),P=F&&B?F-B:0,z=f[w],G=f.some((e=>{var i;return c(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),Z=G?"item":"image",_=l.useMemo((()=>f.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())}))),[f]),O=l.useCallback((e=>{var i,t;const n=f[e],r=G?"Item":"Image",l=c(n)?(null===(i=n.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=n.alt)||void 0===t?void 0:t.trim())||"",a=`${r} ${e+1} of ${f.length}.`;return l?`${l}. ${a}`:a}),[f,G]);l.useImperativeHandle(m,(()=>({currentItemIndex:w,setCurrentItem:Q,goToPrevItem:J,goToNextItem:K}))),u.useEventListener("keydown",(function(e){"ArrowRight"===e.key?K():"ArrowLeft"===e.key?J():"Escape"===e.key&&(null==C||C())}),"document"),l.useEffect((()=>{var e;T&&(null===(e=E.current)||void 0===e||e.focus())}),[T]),l.useEffect((()=>{0!==f.length?w>f.length-1&&q(f.length-1):q(0)}),[w,f.length,q]),l.useEffect((()=>{var e,i;null===(i=null===(e=W.current)||void 0===e?void 0:e[w])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),R(1)}),[w]);const V=e=>{R(e.state.scale)};const X=({src:e,height:i,width:t})=>{y((n=>Object.assign(Object.assign({},n),{[e]:{height:i,width:t}})))},H=()=>{if(!z||c(z))return;const e=k[z.src];if(N.current&&e){const{clientHeight:i,clientWidth:t}=N.current,{width:n,height:r}=e,l=r/n<i/t;return n<t&&r<i?l?t/n:i/r:l?i/(r/(n/t)):t/(n/(r/i))}},J=()=>{var e,i;null===(i=null===(e=D.current)||void 0===e?void 0:e[w])||void 0===i||i.resetTransform(),q((e=>0===e?f.length-1:e-1),(e=>{r.clearAnnouncer("polite"),r.announce(O(e),"polite")}))},K=()=>{var e,i;null===(i=null===(e=D.current)||void 0===e?void 0:e[w])||void 0===i||i.resetTransform(),q((e=>e===f.length-1?0:e+1),(e=>{r.clearAnnouncer("polite"),r.announce(O(e),"polite")}))},Q=e=>{var i,t;null===(t=null===(i=D.current)||void 0===i?void 0:i[w])||void 0===t||t.resetTransform(),q(e)};return i.jsx(o.ModalV2,Object.assign({},S,{"data-testid":"image-carousel-modal","aria-label":G?"Carousel":"Image carousel",show:T,disableInitialFocus:!0,children:i.jsxs(d.CarouselModalContent,{children:[i.jsxs(d.ImageGalleryContainer,{children:[i.jsxs(d.ImageGalleryWrapper,{children:[i.jsx(d.ImageGallerySwipe,{ref:N,onTouchStart:e=>{M<=1&&A(e.touches[0].clientX)},onTouchMove:e=>{!F||M>1||L(e.touches[0].clientX)},onTouchEnd:()=>{N.current&&(Math.abs(P)>N.current.offsetWidth/3&&(P>0?K():J()),A(void 0),L(void 0))},children:i.jsx(d.ImageGallerySlides,{style:{transform:`translateX(calc(${100*-w}% - ${P}px))`},children:f.map(((e,t)=>{const n=t===w,r=Math.abs(t-w)<=1||0===w&&t===f.length-1||w===f.length-1&&0===t;return i.jsx(d.ImageGallerySlide,{"data-testid":"slide-item",children:i.jsx(d.FocusableImageRegion,{ref:n?E:null,tabIndex:n?0:-1,children:c(e)?r?e.renderContent():i.jsx(d.SlidePlaceholderImage,{}):i.jsx(a.TransformWrapper,{ref:e=>D.current[t]=e,panning:{disabled:M<=1},initialScale:1,onZoom:V,onZoomStop:V,onWheel:V,children:i.jsx(a.TransformComponent,{children:i.jsx(d.SlideImage,{src:e.src,alt:O(t),placeholder:i.jsx(d.SlidePlaceholderImage,{}),fit:"scale-down",retrieveImageDimension:!0,setDimension:X})})})})},t)}))})}),!x&&i.jsxs(i.Fragment,{children:[i.jsx(d.ArrowButton,{"aria-label":`Previous ${Z}`,"data-testid":"prev-btn",$position:"left",onClick:J,$insetLeft:null==$?void 0:$.left,$insetRight:null==$?void 0:$.right,children:i.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),i.jsx(d.ArrowButton,{"aria-label":`Next ${Z}`,"data-testid":"forward-btn",$position:"right",onClick:K,$insetLeft:null==$?void 0:$.left,$insetRight:null==$?void 0:$.right,children:i.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]}),!p&&i.jsx(d.BoxChip,{"aria-hidden":"true",children:i.jsx(d.Chip,{weight:"semibold",children:`${w+1}/${f.length}`})})]}),!j&&i.jsx(d.ThumbnailContainer,{$insetBottom:null==$?void 0:$.bottom,"aria-hidden":"true",children:i.jsx(d.ThumbnailWrapper,{children:f.map(((e,t)=>{var n;const r=c(e)?e.thumbnailSrc:null!==(n=e.thumbnailSrc)&&void 0!==n?n:e.src;return i.jsx(d.ThumbnailItemContainer,{children:i.jsx(d.ThumbnailItem,{"data-testid":"thumbnail-item",$active:t===w,onClick:()=>Q(t),ref:e=>W.current[t]=e,children:r?i.jsx(d.ThumbnailImage,{src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i.jsx(d.SlidePlaceholderImage,{})})},t)}))})})]}),i.jsxs(d.TopActionButtons,{$hasFileInfo:_,$insetTop:null==$?void 0:$.top,$insetLeft:null==$?void 0:$.left,$insetRight:null==$?void 0:$.right,children:[_&&(()=>{const{fileName:e,fileSize:t}=null!=z?z:{},n=null==e?void 0:e.trim(),r=null==t?void 0:t.trim();return i.jsxs(d.FileInfoTextWrapper,{$centerContent:!r,"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[n&&i.jsx(d.FileInfoFileName,{weight:"semibold","data-testid":"file-info-name",children:n}),r&&i.jsx(d.FileInfoFileSize,{"data-testid":"file-info-size",children:r})]})})(),!b&&!c(z)&&i.jsx(d.MagnifierButton,{"aria-label":1===M?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,n;if(1===M){const t=H();null===(i=null===(e=D.current)||void 0===e?void 0:e[w])||void 0===i||i.centerView(t),R(null!=t?t:1)}else R(1),null===(n=null===(t=D.current)||void 0===t?void 0:t[w])||void 0===n||n.resetTransform()},children:1===M?i.jsx(t.MagnifierPlusIcon,{"aria-hidden":!0}):i.jsx(t.MagnifierMinusIcon,{"aria-hidden":!0})}),I&&i.jsx(d.DeleteButton,{"aria-label":`Delete ${c(z)&&(null===(v=z.itemLabel)||void 0===v?void 0:v.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{z&&I&&I(z,w)},children:i.jsx(n.BinIcon,{"aria-hidden":!0})}),i.jsx(d.CloseButton,{"aria-label":G?"Close carousel":"Close image carousel",onClick:C,children:i.jsx(t.CrossIcon,{"aria-hidden":!0})})]})]})}))},m=l.forwardRef(h);exports.Component=h,exports.FullscreenImageCarousel=m;
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),n=require("@lifesg/react-icons/bin"),r=require("@react-aria/live-announcer"),l=require("react"),a=require("react-zoom-pan-pinch"),o=require("../modal-v2/index.js"),s=require("../shared/hooks/use-state-callback.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var d=require("../util/use-event-listener.js"),u=require("./fullscreen-image-carousel.style.js");const c=e=>!!e&&"custom"===e.type,h=(h,m)=>{var v,f,{items:g,initialActiveItemIndex:j,hideThumbnail:x=!1,hideNavigation:p=!1,hideCounter:b=!1,hideMagnifier:I=!1,customActions:C,onDelete:$,onClose:T,insets:S,topBarRef:w,show:k}=h,q=e.__rest(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","customActions","onDelete","onClose","insets","topBarRef","show"]);const[A,R]=s.useStateCallback(null!=j?j:0),[y,B]=l.useState({}),[M,F]=l.useState(1),[L,E]=l.useState(),[N,W]=l.useState(),D=l.useRef(null),P=l.useRef([]),z=l.useRef([]),G=l.useRef(null),Z=L&&N?L-N:0,_=g[A],O=null!==(f=null!==(v=null==_?void 0:_.customActions)&&void 0!==v?v:C)&&void 0!==f?f:[],V=g.some((e=>{var i;return c(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),X=V?"item":"image",H=l.useMemo((()=>g.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())}))),[g]),J=l.useCallback((e=>{var i,t;const n=g[e],r=V?"Item":"Image",l=c(n)?(null===(i=n.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=n.alt)||void 0===t?void 0:t.trim())||"",a=`${r} ${e+1} of ${g.length}.`;return l?`${l}. ${a}`:a}),[g,V]);l.useImperativeHandle(m,(()=>({currentItemIndex:A,setCurrentItem:ne,goToPrevItem:ie,goToNextItem:te}))),d.useEventListener("keydown",(function(e){"ArrowRight"===e.key?te():"ArrowLeft"===e.key?ie():"Escape"===e.key&&(null==T||T())}),"document"),l.useEffect((()=>{var e;k&&(null===(e=G.current)||void 0===e||e.focus())}),[k]),l.useEffect((()=>{0!==g.length?A>g.length-1&&R(g.length-1):R(0)}),[A,g.length,R]),l.useEffect((()=>{var e,i;null===(i=null===(e=P.current)||void 0===e?void 0:e[A])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),F(1)}),[A]);const K=e=>{F(e.state.scale)},Q=()=>{_&&$&&$(_,A)};const U=()=>{var e,i,t,n;if(1===M){const t=ee();null===(i=null===(e=z.current)||void 0===e?void 0:e[A])||void 0===i||i.centerView(t),F(null!=t?t:1)}else F(1),null===(n=null===(t=z.current)||void 0===t?void 0:t[A])||void 0===n||n.resetTransform()},Y=({src:e,height:i,width:t})=>{B((n=>Object.assign(Object.assign({},n),{[e]:{height:i,width:t}})))},ee=()=>{if(!_||c(_))return;const e=y[_.src];if(D.current&&e){const{clientHeight:i,clientWidth:t}=D.current,{width:n,height:r}=e,l=r/n<i/t;return n<t&&r<i?l?t/n:i/r:l?i/(r/(n/t)):t/(n/(r/i))}},ie=()=>{var e,i;null===(i=null===(e=z.current)||void 0===e?void 0:e[A])||void 0===i||i.resetTransform(),R((e=>0===e?g.length-1:e-1),(e=>{r.clearAnnouncer("polite"),r.announce(J(e),"polite")}))},te=()=>{var e,i;null===(i=null===(e=z.current)||void 0===e?void 0:e[A])||void 0===i||i.resetTransform(),R((e=>e===g.length-1?0:e+1),(e=>{r.clearAnnouncer("polite"),r.announce(J(e),"polite")}))},ne=e=>{var i,t;null===(t=null===(i=z.current)||void 0===i?void 0:i[A])||void 0===t||t.resetTransform(),R(e)},re=()=>{const{fileName:e,fileSize:t}=null!=_?_:{},n=null==e?void 0:e.trim(),r=null==t?void 0:t.trim();return i.jsxs(u.FileInfoTextWrapper,{$centerContent:!r,"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[n&&i.jsx(u.FileInfoFileName,{weight:"semibold","data-testid":"file-info-name",children:n}),r&&i.jsx(u.FileInfoFileSize,{"data-testid":"file-info-size",children:r})]})};return i.jsx(o.ModalV2,Object.assign({},q,{"data-testid":"image-carousel-modal","aria-label":V?"Carousel":"Image carousel",show:k,disableInitialFocus:!0,children:i.jsxs(u.CarouselModalContent,{children:[i.jsxs(u.ImageGalleryContainer,{children:[i.jsxs(u.ImageGalleryWrapper,{children:[i.jsx(u.ImageGallerySwipe,{ref:D,onTouchStart:e=>{M<=1&&E(e.touches[0].clientX)},onTouchMove:e=>{!L||M>1||W(e.touches[0].clientX)},onTouchEnd:()=>{D.current&&(Math.abs(Z)>D.current.offsetWidth/3&&(Z>0?te():ie()),E(void 0),W(void 0))},children:i.jsx(u.ImageGallerySlides,{style:{transform:`translateX(calc(${100*-A}% - ${Z}px))`},children:g.map(((e,t)=>{const n=t===A,r=Math.abs(t-A)<=1||0===A&&t===g.length-1||A===g.length-1&&0===t;return i.jsx(u.ImageGallerySlide,{"data-testid":"slide-item",children:i.jsx(u.FocusableImageRegion,{ref:n?G:null,tabIndex:n?0:-1,children:c(e)?r?e.renderContent():i.jsx(u.SlidePlaceholderImage,{}):i.jsx(a.TransformWrapper,{ref:e=>z.current[t]=e,panning:{disabled:M<=1},initialScale:1,onZoom:K,onZoomStop:K,onWheel:K,children:i.jsx(a.TransformComponent,{children:i.jsx(u.SlideImage,{src:e.src,alt:J(t),placeholder:i.jsx(u.SlidePlaceholderImage,{}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Y})})})})},t)}))})}),!p&&i.jsxs(i.Fragment,{children:[i.jsx(u.ArrowButton,{"aria-label":`Previous ${X}`,"data-testid":"prev-btn",$position:"left",onClick:ie,$insetLeft:null==S?void 0:S.left,$insetRight:null==S?void 0:S.right,children:i.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),i.jsx(u.ArrowButton,{"aria-label":`Next ${X}`,"data-testid":"forward-btn",$position:"right",onClick:te,$insetLeft:null==S?void 0:S.left,$insetRight:null==S?void 0:S.right,children:i.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]}),!b&&i.jsx(u.BoxChip,{"aria-hidden":"true",children:i.jsx(u.Chip,{weight:"semibold",children:`${A+1}/${g.length}`})})]}),!x&&i.jsx(u.ThumbnailContainer,{$insetBottom:null==S?void 0:S.bottom,"aria-hidden":"true",children:i.jsx(u.ThumbnailWrapper,{children:g.map(((e,t)=>{var n;const r=c(e)?e.thumbnailSrc:null!==(n=e.thumbnailSrc)&&void 0!==n?n:e.src;return i.jsx(u.ThumbnailItemContainer,{children:i.jsx(u.ThumbnailItem,{"data-testid":"thumbnail-item",$active:t===A,onClick:()=>ne(t),ref:e=>P.current[t]=e,children:r?i.jsx(u.ThumbnailImage,{src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i.jsx(u.SlidePlaceholderImage,{})})},t)}))})})]}),(()=>{var e;return i.jsxs(u.TopActionButtons,{ref:w,$hasFileInfo:H,$insetTop:null==S?void 0:S.top,$insetLeft:null==S?void 0:S.left,$insetRight:null==S?void 0:S.right,children:[H&&re(),O.map(((e,t)=>i.jsx(u.CustomActionButton,{"aria-label":e.ariaLabel,"data-testid":e["data-testid"],onClick:()=>(e=>{_&&e.onClick(_,A)})(e),children:l.cloneElement(e.icon,{"aria-hidden":!0})},t))),!I&&!c(_)&&i.jsx(u.MagnifierButton,{"aria-label":1===M?"Zoom in":"Zoom out",onClick:U,children:1===M?i.jsx(t.MagnifierPlusIcon,{"aria-hidden":!0}):i.jsx(t.MagnifierMinusIcon,{"aria-hidden":!0})}),$&&i.jsx(u.DeleteButton,{"aria-label":`Delete ${c(_)&&(null===(e=_.itemLabel)||void 0===e?void 0:e.trim())||"image"}`,"data-testid":"delete-btn",onClick:Q,children:i.jsx(n.BinIcon,{"aria-hidden":!0})}),i.jsx(u.CloseButton,{"aria-label":V?"Close carousel":"Close image carousel",onClick:T,children:i.jsx(t.CrossIcon,{"aria-hidden":!0})})]})})()]})}))},m=l.forwardRef(h);exports.Component=h,exports.FullscreenImageCarousel=m;
 //# sourceMappingURL=fullscreen-image-carousel.js.map