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

package/cjs/file-upload/dropzone.styles.js

@@ -1,35 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/cloud-arrow-up-fill"),r=require("styled-components"),t=require("../dashed-border/dashed-border.js"),i=require("../typography/index.js"),o=require("../v3_theme/index.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(r);const d=n.default(t.DashedBorder)`
-    position: relative;
-    display: flex;
-    flex-direction: column;
-
-    ${e=>{if(e.$showDashedBorder)return r.css`
-                padding: ${o.V3_Spacing["spacing-32"]};
-
-                ${o.V3_MediaQuery.MaxWidth.md} {
-                    padding: ${o.V3_Spacing["spacing-32"]}
-                        ${o.V3_Spacing["spacing-20"]};
-                }
-            `}}
-`,l=n.default.input`
-    display: none;
-`,s=n.default(t.DashedBorder)`
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-`,p=n.default(i.Typography.BodyMD)`
-    color: ${o.V3_Colour["text-primary"]};
-    text-align: center;
-`,c=n.default(e.CloudArrowUpFillIcon)`
-    color: ${o.V3_Colour["icon-primary"]};
-    height: 4rem;
-    width: 4rem;
-`;exports.Container=d,exports.DragOverlay=s,exports.HiddenInput=l,exports.OverlayIcon=c,exports.OverlayText=p;
+"use strict";require("./dropzone.styles_1pllsau.css");exports.container="c1mdy24p",exports.containerWithDashedBorder="c1vk9wvq",exports.dragOverlay="dtq8bte",exports.hiddenInput="h1ogyved",exports.overlayIcon="o1seqaul",exports.overlayText="ozzxgak";
 //# sourceMappingURL=dropzone.styles.js.map

package/cjs/file-upload/dropzone.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.styles.js","sources":["../../../src/file-upload/dropzone.styles.tsx"],"sourcesContent":["import { CloudArrowUpFillIcon } from \"@lifesg/react-icons/cloud-arrow-up-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface StyleProps {\n    $showDashedBorder: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled(DashedBorder)<StyleProps>`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n\n    ${(props) => {\n        if (props.$showDashedBorder) {\n            return css`\n                padding: ${V3_Spacing[\"spacing-32\"]};\n\n                ${V3_MediaQuery.MaxWidth.md} {\n                    padding: ${V3_Spacing[\"spacing-32\"]}\n                        ${V3_Spacing[\"spacing-20\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const HiddenInput = styled.input`\n    display: none;\n`;\n\nexport const DragOverlay = styled(DashedBorder)`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const OverlayText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n    text-align: center;\n`;\n\nexport const OverlayIcon = styled(CloudArrowUpFillIcon)`\n    color: ${V3_Colour[\"icon-primary\"]};\n    height: 4rem;\n    width: 4rem;\n`;\n"],"names":["Container","styled","DashedBorder","props","$showDashedBorder","css","V3_Spacing","V3_MediaQuery","MaxWidth","md","HiddenInput","input","DragOverlay","OverlayText","Typography","BodyMD","V3_Colour","OverlayIcon","CloudArrowUpFillIcon"],"mappings":"mTAkBaA,EAAYC,EAAAA,QAAOC,EAAAA,aAAyB;;;;;MAKlDC,IACC,GAAIA,EAAMC,kBACN,OAAOC,KAAG;2BACKC,EAAAA,WAAW;;kBAEpBC,EAAAA,cAAcC,SAASC;+BACVH,EAAAA,WAAW;0BAChBA,EAAAA,WAAW;;aAG7B;EAIKI,EAAcT,EAAAA,QAAOU,KAAK;;EAI1BC,EAAcX,EAAAA,QAAOC,EAAAA,aAAa;;;;;;;;;;;EAalCW,EAAcZ,EAAAA,QAAOa,aAAWC,OAAO;aACvCC,EAAAA,UAAU;;EAIVC,EAAchB,EAAAA,QAAOiB,EAAAA,qBAAqB;aAC1CF,EAAAA,UAAU;;;"}
+{"version":3,"file":"dropzone.styles.js","sources":["../../../src/file-upload/dropzone.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const containerWithDashedBorder = css`\n    padding: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const hiddenInput = css`\n    display: none;\n`;\n\nexport const dragOverlay = css`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const overlayText = css`\n    color: ${Colour[\"text-primary\"]};\n    text-align: center;\n`;\n\nexport const overlayIcon = css`\n    color: ${Colour[\"icon-primary\"]};\n    height: 4rem;\n    width: 4rem;\n`;\n"],"names":[],"mappings":"mGAIsB,6CAMgB,+BAYd,8BAJA,+BAsBA,+BALA"}

package/cjs/file-upload/dropzone.styles_1pllsau.css

@@ -0,0 +1,6 @@
+.c1mdy24p{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.c1vk9wvq{padding:var(--fds-spacing-32);}:where(body.fds-breakpoint-md-max) .c1vk9wvq{padding:var(--fds-spacing-32) var(--fds-spacing-20);}
+.h1ogyved{display:none;}
+.dtq8bte{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;}
+.ozzxgak{color:var(--fds-colour-text-primary);text-align:center;}
+.o1seqaul{color:var(--fds-colour-icon-primary);height:4rem;width:4rem;}

package/cjs/file-upload/file-item-edit.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("../form/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var r=require("../util/string-helper.js"),n=require("./file-item-edit.styles.js"),a=require("./file-list-item/file-list-item-thumbnail.js"),l=require("./helper.js");exports.FileItemEdit=({fileItem:s,fileDescriptionMaxLength:u,wrapperWidth:o,onSave:c,onCancel:d,onBlur:h})=>{const{id:m,name:x,size:j,truncateText:p=!0,thumbnailImageDataUrl:b}=s,[f,g]=t.useState(),[y,S]=t.useState(""),q=t.useRef(null),v=t.useRef(null);t.useEffect((()=>{g(C(x))}),[o]),t.useEffect((()=>{S(s.description||"")}),[s]);const C=e=>{if(!p)return e;const t=v&&v.current?v.current.getBoundingClientRect().width:0;return r.StringHelper.truncateOneLine(e,t,t/2,t/2/8,16)};return e.jsxs(n.Item,{"data-testid":`${m}-edit-display`,children:[e.jsxs(n.ContentSection,{children:[b&&e.jsx(a.FileListItemThumbnail,{thumbnailImageDataUrl:b}),e.jsxs(n.DetailsSection,{children:[e.jsxs(n.NameSection,{ref:v,children:[e.jsx(n.FileNameText,{weight:"semibold",children:f}),e.jsx(n.FileSizeText,{children:l.FileUploadHelper.formatFileSizeDisplay(j)})]}),e.jsx(i.Form.Textarea,{ref:q,id:`${m}-description-textarea`,"data-testid":`${m}-textarea`,value:y,maxLength:u,onChange:e=>{S(e.target.value)},onBlur:e=>{h(e.target.value)},rows:3,"aria-label":`Photo description for ${x}`,label:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e.jsxs(n.ActionButtonsSection,{$thumbnail:!!b,children:[e.jsx(n.ActionButton,{"data-testid":`${m}-save-button`,type:"button",disabled:0===y.trim().length,onClick:()=>{q.current&&c(q.current.value.trim())},children:"Save"}),e.jsx(n.ActionButton,{type:"button",styleType:"secondary","data-testid":`${m}-cancel-button`,onClick:d,children:"Cancel"})]})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),i=require("react"),r=require("../button/button.js"),a=require("../form/index.js"),s=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js");var n=require("../util/string-helper.js");require("@react-aria/live-announcer");var l=require("./file-item-edit.styles.js"),u=require("./file-list-item/file-list-item-thumbnail.js"),o=require("./helper.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=c(t);exports.FileItemEdit=({fileItem:t,fileDescriptionMaxLength:c,wrapperWidth:m,onSave:h,onCancel:p,onBlur:j})=>{const{id:f,name:x,size:y,type:b,truncateText:g=!0,thumbnailImageDataUrl:v}=t,[q,T]=i.useState(),[B,S]=i.useState(""),N=i.useRef(null),D=i.useRef(null),C=i.useCallback((e=>{if(!g)return e;const t=D&&D.current?D.current.getBoundingClientRect().width:0;return n.StringHelper.truncateOneLine(e,t,t/2,t/2/8,16)}),[g]);i.useEffect((()=>{T(C(x))}),[m,C,x]),i.useEffect((()=>{S(t.description||"")}),[t]);const F=!!v||b===o.FileUploadHelper.PDF_MIME_TYPE;return e.jsxs("li",{"data-testid":`${f}-edit-display`,className:l.item,children:[e.jsxs("div",{className:l.contentSection,children:[F&&e.jsx(u.FileListItemThumbnail,{thumbnailImageDataUrl:v,fileType:b}),e.jsxs("div",{className:l.detailsSection,children:[e.jsxs("div",{ref:D,className:l.nameSection,children:[e.jsx(s.Typography.BodyMD,{className:l.fileNameText,weight:"semibold",children:q}),e.jsx(s.Typography.BodyMD,{children:o.FileUploadHelper.formatFileSizeDisplay(y)})]}),e.jsx(a.Form.Textarea,{ref:N,id:`${f}-description-textarea`,"data-testid":`${f}-textarea`,value:B,maxLength:c,onChange:e=>{S(e.target.value)},onBlur:e=>{j(e.target.value)},rows:3,"aria-label":`Photo description for ${x}`,label:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e.jsxs("div",{className:d.default(l.actionButtonsSection,F&&l.actionButtonsSectionWithThumbnail),children:[e.jsx(r.Button,{"data-testid":`${f}-save-button`,type:"button",sizeType:"small",disabled:0===B.trim().length,onClick:()=>{N.current&&h(N.current.value.trim())},className:l.actionButton,children:"Save"}),e.jsx(r.Button,{type:"button",sizeType:"small",styleType:"secondary","data-testid":`${f}-cancel-button`,onClick:p,className:l.actionButton,children:"Cancel"})]})]})};
 //# sourceMappingURL=file-item-edit.js.map

package/cjs/file-upload/file-item-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n    ActionButton,\n    ActionButtonsSection,\n    ContentSection,\n    DetailsSection,\n    FileNameText,\n    FileSizeText,\n    Item,\n    NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            nameSectionRef && nameSectionRef.current\n                ? nameSectionRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateOneLine(\n            value,\n            widthOfElement,\n            widthOfElement / 2,\n            widthOfElement / 2 / 8, // Arbitrary\n            16 // Font size\n        );\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {thumbnailImageDataUrl && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={!!thumbnailImageDataUrl}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","useEffect","getTruncatedText","description","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","FileUploadHelper","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","ActionButton","type","disabled","trim","length","onClick","styleType"],"mappings":"2WA2B4B,EACxBA,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAV,GAEGW,EAAeC,GAAoBC,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAK9CE,EAAAA,WAAU,KACNP,EAAiBQ,EAAiBb,GAAM,GACzC,CAACL,IAEJiB,EAAAA,WAAU,KACNJ,EAAsBf,EAASqB,aAAe,GAAG,GAClD,CAACrB,IAKJ,MAiBMoB,EAAoBE,IACtB,IAAKb,EAAc,OAAOa,EAE1B,MAAMC,EACFL,GAAkBA,EAAeM,QAC3BN,EAAeM,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,EAoBL,OACIM,EAAAA,KAACC,EAAAA,KAAI,CAAA,cAAc,GAAGxB,iBAAiByB,SAAA,CACnCF,EAAAA,KAACG,EAAAA,eAAc,CAAAD,SAAA,CACVrB,GACGuB,EAAAA,IAACC,EAAAA,sBAAqB,CAClBxB,sBAAuBA,IAG/BmB,OAACM,EAAAA,eAAc,CAAAJ,SAAA,CAhBvBF,OAACO,EAAAA,YAAW,CAACC,IAAKnB,EAAca,SAAA,CAC5BE,EAAAA,IAACK,EAAAA,aAAY,CAACC,OAAO,oBAAY5B,IACjCsB,EAAAA,IAACO,EAAAA,aAAY,CAAAT,SACRU,EAAAA,iBAAiBC,sBAAsBlC,QAepCyB,EAAAA,IAACU,EAAAA,KAAKC,UACFP,IAAKrB,EACLV,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOR,EACP+B,UAAW5C,EACX6C,SA7DEC,IAClBhC,EAAsBgC,EAAMC,OAAO1B,MAAM,EA6DzBjB,OA1DA0C,IAChB1C,EAAO0C,EAAMC,OAAO1B,MAAM,EA0DV2B,KAAM,eACM,yBAAyB1C,IACrC2C,MAAO,CACHnB,SAAU,oBACVoB,SACI,8EAKpBtB,EAAAA,KAACuB,EAAAA,mCAAmC1C,EAAqBqB,SAAA,CACrDE,EAAAA,IAACoB,8BACgB,GAAG/C,gBAChBgD,KAAK,SACLC,SA/CyB,IADVzC,EAAmB0C,OACpBC,OAgDdC,QApFG,KACX1C,EAAYQ,SACZrB,EAAOa,EAAYQ,QAAQF,MAAMkC,OACrC,EAiF+BzB,SAAA,SAIvBE,EAAAA,IAACoB,gBACGC,KAAK,SACLK,UAAU,YAAW,cACR,GAAGrD,kBAChBoD,QAAStD,EAAQ2B,SAAA,gBAKtB"}
+{"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Form } from \"../form\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util\";\nimport * as styles from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <div ref={nameSectionRef} className={styles.nameSection}>\n            <Typography.BodyMD\n                className={styles.fileNameText}\n                weight=\"semibold\"\n            >\n                {formattedName}\n            </Typography.BodyMD>\n            <Typography.BodyMD>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </Typography.BodyMD>\n        </div>\n    );\n\n    return (\n        <li data-testid={`${id}-edit-display`} className={styles.item}>\n            <div className={styles.contentSection}>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <div className={styles.detailsSection}>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </div>\n            </div>\n            <div\n                className={clsx(\n                    styles.actionButtonsSection,\n                    shouldShowThumbnail &&\n                        styles.actionButtonsSectionWithThumbnail\n                )}\n            >\n                <Button\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                    className={styles.actionButton}\n                >\n                    Save\n                </Button>\n                <Button\n                    type=\"button\"\n                    sizeType=\"small\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                    className={styles.actionButton}\n                >\n                    Cancel\n                </Button>\n            </div>\n        </li>\n    );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","className","styles.item","children","styles.contentSection","_jsx","FileListItemThumbnail","fileType","styles.detailsSection","ref","styles.nameSection","Typography","BodyMD","styles.fileNameText","weight","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","clsx","styles.actionButtonsSection","styles.actionButtonsSectionWithThumbnail","Button","sizeType","disabled","trim","length","onClick","styles.actionButton","styleType"],"mappings":"ymBAqB4B,EACxBA,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAX,GAEGY,EAAeC,GAAoBC,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAKxCE,EAAmBC,eACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,EAAAA,WAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,EAAAA,WAAU,KACNb,EAAsBhB,EAAS8B,aAAe,GAAG,GAClD,CAAC9B,IAKJ,MAmBM+B,IACApB,GAAyBF,IAASuB,EAAAA,iBAAiBC,cAmBzD,OACIC,EAAAA,KAAA,KAAA,CAAA,cAAiB,GAAG5B,iBAAmB6B,UAAWC,EAAAA,KAAWC,SAAA,CACzDH,EAAAA,YAAKC,UAAWG,EAAAA,yBACXP,GACGQ,EAAAA,IAACC,EAAAA,sBAAqB,CAClB7B,sBAAuBA,EACvB8B,SAAUhC,IAGlByB,EAAAA,YAAKC,UAAWO,EAAAA,yBAtBxBR,EAAAA,KAAA,MAAA,CAAKS,IAAKxB,EAAgBgB,UAAWS,EAAAA,YAAkBP,SAAA,CACnDE,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CACdX,UAAWY,EAAAA,aACXC,OAAO,WAAUX,SAEhBzB,IAEL2B,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CAAAT,SACbL,EAAAA,iBAAiBiB,sBAAsBzC,QAgBpC+B,EAAAA,IAACW,EAAAA,KAAKC,UACFR,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPqC,UAAWnD,EACXoD,SAlDEC,IAClBtC,EAAsBsC,EAAMC,OAAOjC,MAAM,EAkDzBjB,OA/CAiD,IAChBjD,EAAOiD,EAAMC,OAAOjC,MAAM,EA+CVkC,KAAM,EAAC,aACK,yBAAyBjD,IACrCkD,MAAO,CACHpB,SAAU,oBACVqB,SACI,8EAKpBxB,EAAAA,KAAA,MAAA,CACIC,UAAWwB,UACPC,EAAAA,qBACA7B,GACI8B,qCACPxB,SAAA,CAEDE,MAACuB,EAAAA,OAAM,CAAA,cACU,GAAGxD,gBAChBG,KAAK,SACLsD,SAAS,QACTC,SA/DyB,IADVjD,EAAmBkD,OACpBC,OAgEdC,QAhFG,KACXlD,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAM2C,OACrC,EA8EY9B,UAAWiC,eAAmB/B,SAAA,SAIlCE,EAAAA,IAACuB,EAAAA,OAAM,CACHrD,KAAK,SACLsD,SAAS,QACTM,UAAU,YAAW,cACR,GAAG/D,kBAChB6D,QAAS/D,EACT+B,UAAWiC,EAAAA,aAAmB/B,SAAA,gBAKrC"}

package/cjs/file-upload/file-item-edit.styles.js

@@ -1,67 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../button/button.js"),i=require("../typography/index.js"),a=require("../v3_theme/index.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=n(t);const r=o.default.li`
-    display: flex;
-    flex-direction: column;
-    padding: ${a.V3_Spacing["spacing-32"]} 0;
-    background: transparent;
-
-    &:not(:last-child) {
-        border-bottom: ${a.V3_Border["width-010"]} ${a.V3_Border.solid}
-            ${a.V3_Colour.border};
-    }
-`,d=o.default.div`
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: ${a.V3_Spacing["spacing-16"]};
-    width: 100%;
-`,l=o.default.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-`,s=o.default.div`
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: ${a.V3_Spacing["spacing-16"]};
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        flex-direction: column;
-        justify-content: flex-start;
-    }
-`,p=o.default(i.Typography.BodyMD)`
-    display: flex;
-    flex: 1;
-    margin-right: ${a.V3_Spacing["spacing-16"]};
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        margin-right: 0;
-        margin-bottom: ${a.V3_Spacing["spacing-8"]};
-    }
-`,c=o.default(i.Typography.BodyMD)``,u=o.default.div`
-    display: flex;
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        flex-direction: column;
-    }
-
-    ${e=>{if(e.$thumbnail)return t.css`
-                margin-left: calc(
-                    96px + ${a.V3_Spacing["spacing-32"]}
-                ); // thumbnail width + right margin
-
-                ${a.V3_MediaQuery.MaxWidth.md} {
-                    margin-left: 0;
-                }
-            `}}
-`,g=o.default(e.Button.Small)`
-    width: 7.5rem;
-    &:not(:last-of-type) {
-        margin-right: ${a.V3_Spacing["spacing-16"]};
-    }
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        width: 100%;
-        &:not(:last-of-type) {
-            margin-bottom: ${a.V3_Spacing["spacing-16"]};
-        }
-    }
-`;exports.ActionButton=g,exports.ActionButtonsSection=u,exports.ContentSection=d,exports.DetailsSection=l,exports.FileNameText=p,exports.FileSizeText=c,exports.Item=r,exports.NameSection=s;
+"use strict";require("./file-item-edit.styles_1qbpbxj.css");exports.actionButton="awg16zc",exports.actionButtonsSection="a18dc1yj",exports.actionButtonsSectionWithThumbnail="ajknckh",exports.contentSection="c1i0crev",exports.detailsSection="d4rbbwx",exports.fileNameText="fuau9z6",exports.item="i1432lvs",exports.nameSection="n18lt6ho";
 //# sourceMappingURL=file-item-edit.styles.js.map

package/cjs/file-upload/file-item-edit.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.styles.js","sources":["../../../src/file-upload/file-item-edit.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button/button\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ActionButtonSectionStyleProps {\n    $thumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    flex-direction: column;\n    padding: ${V3_Spacing[\"spacing-32\"]} 0;\n    background: transparent;\n\n    &:not(:last-child) {\n        border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n            ${V3_Colour.border};\n    }\n`;\n\nexport const ContentSection = styled.div`\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    width: 100%;\n`;\n\nexport const DetailsSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n`;\n\nexport const NameSection = styled.div`\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        justify-content: flex-start;\n    }\n`;\n\nexport const FileNameText = styled(Typography.BodyMD)`\n    display: flex;\n    flex: 1;\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        margin-right: 0;\n        margin-bottom: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)``;\n\nexport const ActionButtonsSection = styled.div<ActionButtonSectionStyleProps>`\n    display: flex;\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n\n    ${(props) => {\n        if (props.$thumbnail) {\n            return css`\n                margin-left: calc(\n                    96px + ${V3_Spacing[\"spacing-32\"]}\n                ); // thumbnail width + right margin\n\n                ${V3_MediaQuery.MaxWidth.md} {\n                    margin-left: 0;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    width: 7.5rem;\n    &:not(:last-of-type) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 100%;\n        &:not(:last-of-type) {\n            margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n        }\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","V3_Border","solid","V3_Colour","border","ContentSection","div","DetailsSection","NameSection","V3_MediaQuery","MaxWidth","md","FileNameText","Typography","BodyMD","FileSizeText","ActionButtonsSection","props","$thumbnail","css","ActionButton","Button","Small"],"mappings":"0OAgBO,MAAMA,EAAOC,EAAAA,QAAOC,EAAE;;;eAGdC,EAAAA,WAAW;;;;yBAIDC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;cAC/CC,EAAAA,UAAUC;;EAIXC,EAAiBP,EAAAA,QAAOQ,GAAG;;;qBAGnBN,EAAAA,WAAW;;EAInBO,EAAiBT,EAAAA,QAAOQ,GAAG;;;;EAM3BE,EAAcV,EAAAA,QAAOQ,GAAG;;;;qBAIhBN,EAAAA,WAAW;;MAE1BS,EAAAA,cAAcC,SAASC;;;;EAMhBC,EAAed,EAAAA,QAAOe,aAAWC,OAAO;;;oBAGjCd,EAAAA,WAAW;;MAEzBS,EAAAA,cAAcC,SAASC;;yBAEJX,EAAAA,WAAW;;EAIvBe,EAAejB,EAAAA,QAAOe,aAAWC,OAAO,GAExCE,EAAuBlB,EAAAA,QAAOQ,GAAkC;;MAEvEG,EAAAA,cAAcC,SAASC;;;;MAItBM,IACC,GAAIA,EAAMC,WACN,OAAOC,KAAG;;6BAEOnB,EAAAA,WAAW;;;kBAGtBS,EAAAA,cAAcC,SAASC;;;aAIjC;EAIKS,EAAetB,EAAAA,QAAOuB,SAAOC,MAAM;;;wBAGxBtB,EAAAA,WAAW;;;MAG7BS,EAAAA,cAAcC,SAASC;;;6BAGAX,EAAAA,WAAW;;;"}
+{"version":3,"file":"file-item-edit.styles.js","sources":["../../../src/file-upload/file-item-edit.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const item = css`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-32\"]} 0;\n    background: transparent;\n\n    &:not(:last-child) {\n        border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    width: 100%;\n`;\n\nexport const detailsSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n`;\n\nexport const nameSection = css`\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        justify-content: flex-start;\n    }\n`;\n\nexport const fileNameText = css`\n    display: flex;\n    flex: 1;\n    margin-right: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-right: 0;\n        margin-bottom: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionButtonsSection = css`\n    display: flex;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n`;\n\nexport const actionButtonsSectionWithThumbnail = css`\n    margin-left: calc(\n        96px + ${Spacing[\"spacing-32\"]}\n    ); // thumbnail width + right margin\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-left: 0;\n    }\n`;\n\nexport const actionButton = css`\n    width: 7.5rem;\n\n    &:not(:last-of-type) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n\n        &:not(:last-of-type) {\n            margin-bottom: ${Spacing[\"spacing-16\"]};\n        }\n    }\n`;\n"],"names":[],"mappings":"4GAqEyB,uCAlBQ,qDAQa,iCA5CnB,kCAOA,+BAkBF,uBApCR,+BAwBO"}

package/cjs/file-upload/file-item-edit.styles_1qbpbxj.css

@@ -0,0 +1,10 @@
+.i1432lvs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-32) 0;background:transparent;}.i1432lvs:not(:last-child){border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c1i0crev{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;margin-bottom:var(--fds-spacing-16);width:100%;}
+.d4rbbwx{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;}
+.n18lt6ho{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .n18lt6ho{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}
+.fuau9z6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .fuau9z6{margin-right:0;margin-bottom:var(--fds-spacing-8);}
+.a18dc1yj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}:where(body.fds-breakpoint-md-max) .a18dc1yj{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.ajknckh{margin-left:calc(
+        96px + var(--fds-spacing-32)
+    );}:where(body.fds-breakpoint-md-max) .ajknckh{margin-left:0;}
+.awg16zc{width:7.5rem;}.awg16zc:not(:last-of-type){margin-right:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .awg16zc{width:100%;}:where(body.fds-breakpoint-md-max) .awg16zc:not(:last-of-type){margin-bottom:var(--fds-spacing-16);}

package/cjs/file-upload/file-list-item/file-list-item-thumbnail.js

@@ -1,36 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../shared/image-with-fallback/image-with-fallback.js"),i=require("../../v3_theme/index.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(t);const d=o.default.div`
-    width: auto;
-    margin-right: ${i.V3_Spacing["spacing-32"]};
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    justify-content: center;
-`,n=o.default(r.ImageWithFallback)`
-    width: 96px;
-    height: 96px;
-    aspect-ratio: 1;
-    border-radius: ${i.V3_Radius.sm};
-    border: ${i.V3_Border["width-010"]} ${i.V3_Border.solid}
-        ${i.V3_Colour.border};
-    object-fit: cover;
-
-    ${i.V3_MediaQuery.MaxWidth.md} {
-        width: 64px;
-        height: 64px;
-    }
-`,l=o.default.button`
-    width: 100%;
-    height: 1.625rem;
-    margin-top: ${i.V3_Spacing["spacing-8"]};
-    border: none;
-    background: transparent;
-    cursor: pointer;
-
-    ${i.V3_Font["body-md-semibold"]}
-    color: ${i.V3_Colour["text-primary"]};
-
-    &:hover {
-        color: ${i.V3_Colour["text-hover"]};
-    }
-`;exports.Container=d,exports.FileListItemThumbnail=({thumbnailImageDataUrl:t,"data-testid":r,renderReplaceButton:i,onReplaceClick:a})=>e.jsxs(d,{"data-testid":r,children:[e.jsx(n,{"data-testid":r?`${r}-image`:void 0,src:t}),i&&e.jsx(l,{type:"button",onClick:()=>{a&&a()},children:"Replace"})]}),exports.ReplaceButton=l,exports.Thumbnail=n;
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("../../shared/image-with-fallback/image-with-fallback.js"),l=require("../helper.js"),i=require("./file-list-item-thumbnail.styles.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(t);exports.FileListItemThumbnail=({thumbnailImageDataUrl:t,fileType:r,"data-testid":n,renderReplaceButton:c,onReplaceClick:u})=>{const d=r===l.FileUploadHelper.PDF_MIME_TYPE,m=d?t||l.FileUploadHelper.PDF_ICON_URL:t||"";return e.jsxs("div",{className:i.container,"data-testid":n,children:[e.jsx(a.ImageWithFallback,{"data-testid":n?`${n}-image`:void 0,src:m,className:s.default(i.thumbnail,d&&i.thumbnailPdf)}),c&&e.jsx("button",{type:"button",onClick:()=>{u&&u()},className:i.replaceButton,children:"Replace"})]})};
 //# sourceMappingURL=file-list-item-thumbnail.js.map

package/cjs/file-upload/file-list-item/file-list-item-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\ninterface Props {\n    thumbnailImageDataUrl: string;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    return (\n        <Container data-testid={testId}>\n            <Thumbnail\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={thumbnailImageDataUrl}\n            />\n            {renderReplaceButton && (\n                <ReplaceButton type=\"button\" onClick={handleReplace}>\n                    Replace\n                </ReplaceButton>\n            )}\n        </Container>\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    width: auto;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    object-fit: cover;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const ReplaceButton = styled.button`\n    width: 100%;\n    height: 1.625rem;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    ${V3_Font[\"body-md-semibold\"]}\n    color: ${V3_Colour[\"text-primary\"]};\n\n    &:hover {\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["Container","styled","div","V3_Spacing","Thumbnail","ImageWithFallback","V3_Radius","V3_Border","V3_Colour","V3_MediaQuery","MaxWidth","md","ReplaceButton","button","V3_Font","thumbnailImageDataUrl","testId","renderReplaceButton","onReplaceClick","_jsxs","children","_jsx","undefined","src","type","onClick"],"mappings":"4QAmBO,MA8BMA,EAAYC,EAAAA,QAAOC,GAAG;;oBAEfC,EAAAA,WAAW;;;;;EAOlBC,EAAYH,EAAAA,QAAOI,EAAAA,kBAAkB;;;;qBAI7BC,EAAAA,UAAc;cACrBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;;;MAGtBC,EAAAA,cAAcC,SAASC;;;;EAMhBC,EAAgBX,EAAAA,QAAOY,MAAM;;;kBAGxBV,EAAAA,WAAW;;;;;MAKvBW,EAAAA,QAAQ;aACDN,EAAAA,UAAU;;;iBAGNA,EAAAA,UAAU;;oDAlEU,EACjCO,wBACA,cAAeC,EACfC,sBACAC,oBASIC,EAAAA,KAACnB,iBAAuBgB,EAAMI,SAAA,CAC1BC,EAAAA,IAACjB,EAAS,CAAA,cACOY,EAAS,GAAGA,eAAiBM,EAC1CC,IAAKR,IAERE,GACGI,EAAAA,IAACT,EAAa,CAACY,KAAK,SAASC,QAbnB,KACdP,GACAA,GACJ"}
+{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { FileUploadHelper } from \"../helper\";\nimport * as styles from \"./file-list-item-thumbnail.styles\";\n\ninterface Props {\n    thumbnailImageDataUrl?: string | undefined;\n    fileType?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    fileType,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    const isPdf = fileType === FileUploadHelper.PDF_MIME_TYPE;\n    const displaySrc = isPdf\n        ? thumbnailImageDataUrl || FileUploadHelper.PDF_ICON_URL\n        : thumbnailImageDataUrl || \"\";\n\n    return (\n        <div className={styles.container} data-testid={testId}>\n            <ImageWithFallback\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={displaySrc}\n                className={clsx(styles.thumbnail, isPdf && styles.thumbnailPdf)}\n            />\n            {renderReplaceButton && (\n                <button\n                    type=\"button\"\n                    onClick={handleReplace}\n                    className={styles.replaceButton}\n                >\n                    Replace\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":["thumbnailImageDataUrl","fileType","testId","renderReplaceButton","onReplaceClick","isPdf","FileUploadHelper","PDF_MIME_TYPE","displaySrc","PDF_ICON_URL","_jsxs","className","styles.container","children","_jsx","ImageWithFallback","undefined","src","clsx","styles.thumbnail","styles.thumbnailPdf","type","onClick","styles.replaceButton"],"mappings":"oUAcqC,EACjCA,wBACAC,WACA,cAAeC,EACfC,sBACAC,qBAEA,MAMMC,EAAQJ,IAAaK,EAAAA,iBAAiBC,cACtCC,EAAaH,EACbL,GAAyBM,EAAAA,iBAAiBG,aAC1CT,GAAyB,GAE/B,OACIU,EAAAA,KAAA,MAAA,CAAKC,UAAWC,EAAAA,UAAgB,cAAeV,EAAMW,SAAA,CACjDC,EAAAA,IAACC,EAAAA,iCACgBb,EAAS,GAAGA,eAAiBc,EAC1CC,IAAKT,EACLG,UAAWO,UAAKC,EAAAA,UAAkBd,GAASe,EAAAA,gBAE9CjB,GACGW,MAAA,SAAA,CACIO,KAAK,SACLC,QArBM,KACdlB,GACAA,GACJ,EAmBYO,UAAWY,EAAAA,cAAoBV,SAAA,cAKrC"}

package/cjs/file-upload/file-list-item/file-list-item-thumbnail.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./file-list-item-thumbnail.styles_1vrh1ve.css");exports.container="c1hu6y7h",exports.replaceButton="r5e5ep6",exports.thumbnail="t18h6q7y",exports.thumbnailPdf="t1w2z01d";
+//# sourceMappingURL=file-list-item-thumbnail.styles.js.map

package/cjs/file-upload/file-list-item/file-list-item-thumbnail.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-list-item-thumbnail.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item-thumbnail.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\nexport const container = css`\n    width: auto;\n    margin-right: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n`;\n\nexport const thumbnail = css`\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    object-fit: cover;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const thumbnailPdf = css`\n    border: none;\n`;\n\nexport const replaceButton = css`\n    width: 100%;\n    height: 1.625rem;\n    margin-top: ${Spacing[\"spacing-8\"]};\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n"],"names":[],"mappings":"kIAIsB,iCA2BI,4BAlBJ,gCAcG"}

package/cjs/file-upload/file-list-item/file-list-item-thumbnail.styles_1vrh1ve.css

@@ -0,0 +1,4 @@
+.c1hu6y7h{width:auto;margin-right:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.t18h6q7y{width:96px;height:96px;aspect-ratio:1;border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);object-fit:cover;}:where(body.fds-breakpoint-md-max) .t18h6q7y{width:64px;height:64px;}
+.t1w2z01d{border:none;}
+.r5e5ep6{width:100%;height:1.625rem;margin-top:var(--fds-spacing-8);border:none;background:transparent;cursor:pointer;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-primary);}.r5e5ep6:hover{color:var(--fds-colour-text-hover);}

package/cjs/file-upload/file-list-item/file-list-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../external/@dnd-kit/sortable/dist/sortable.esm.js"),r=require("../../external/@dnd-kit/utilities/dist/utilities.esm.js"),i=require("@lifesg/react-icons/bin"),s=require("@lifesg/react-icons/cross"),n=require("@lifesg/react-icons/pencil"),l=require("react"),a=require("../../shared/progress-bar/progress-bar.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var d=require("../../util/string-helper.js"),o=require("../context.js"),c=require("../helper.js"),u=require("./file-list-item.styles.js"),h=require("./file-list-item-thumbnail.js");const j=l.memo((({fileItem:j,editable:x,sortable:m,wrapperWidth:b,disabled:g,readOnly:p,onDelete:$,onEditClick:f})=>{const{id:I,name:S,size:y,description:q,progress:T=1,errorMessage:F,thumbnailImageDataUrl:C,truncateText:D=!0}=j,[E,k]=l.useState(),{activeId:w}=l.useContext(o.FileUploadContext),{attributes:z,listeners:B,setNodeRef:M,transform:N,transition:O}=t.useSortable({id:I}),v=l.useRef(null),U={transform:r.CSS.Translate.toString(N),transition:O},H=Object.assign(Object.assign({style:U},z),B),L=T<1,P=c.FileUploadHelper.formatFileSizeDisplay(y),R=w?w===I?"self":"others":"none";l.useEffect((()=>{k(G(S))}),[b]);const K=()=>{$()},A=()=>{f&&f()},W=e=>{m&&e.stopPropagation()},G=e=>{if(!D)return e;const t=v&&v.current?v.current.getBoundingClientRect().width:0;return d.StringHelper.truncateOneLine(e,t,t/2,t/2/8,16)},J=()=>g||!!w,Q=()=>!!m&&!p,V=()=>e.jsxs(e.Fragment,{children:[e.jsx(u.ItemText,{weight:q?"semibold":"regular",children:E}),q&&e.jsx(u.ItemDescriptionText,{children:q})]});return e.jsxs(u.Item,Object.assign({id:I,ref:M,$sortable:Q(),$disabled:J(),$focusType:R},Q()?H:{},{children:[Q()&&e.jsx(u.DragHandleIcon,{"data-testid":`${I}-drag-handle`,$disabled:J(),$active:"self"===R}),e.jsxs(u.Box,{$focused:"self"===R,$error:!!F,$loading:L,$disabled:J(),$editable:x,children:[(()=>{let t;return t=F?e.jsxs(e.Fragment,{children:[e.jsxs(u.NameSection,{ref:v,children:[V(),F&&e.jsxs(u.DesktopErrorMessage,{weight:"semibold",children:[e.jsx(u.ErrorIcon,{"aria-hidden":!0}),F]})]}),e.jsx(u.FileSizeSection,{children:e.jsx(u.ItemText,{children:P})}),F&&e.jsxs(u.MobileErrorMessage,{weight:"semibold",children:[e.jsx(u.ErrorIcon,{"aria-hidden":!0}),F]})]}):C?(t=>e.jsxs(e.Fragment,{children:[e.jsx(h.FileListItemThumbnail,{thumbnailImageDataUrl:t,"data-testid":`${I}-thumbnail`}),e.jsxs(u.ExtendedNameSection,{children:[e.jsx(u.NameSection,{ref:v,children:V()}),e.jsx(u.FileSizeSection,{children:e.jsx(u.ItemText,{children:P})})]})]}))(C):e.jsxs(e.Fragment,{children:[e.jsx(u.NameSection,{ref:v,children:V()}),e.jsx(u.FileSizeSection,{$hideInMobile:L,children:e.jsx(u.ItemText,{children:P})})]}),e.jsx(u.ContentSection,{$hasThumbnail:!!C,children:t})})(),!p&&(()=>{let t;return t=F?e.jsx(u.ErrorIconButton,{onClick:K,"data-testid":`${I}-error-delete-button`,"aria-label":`delete ${S}, error: ${F}`,children:e.jsx(s.CrossIcon,{"aria-hidden":!0})}):L?e.jsx(a.ProgressBar,{progress:T,"data-testid":`${I}-progress-bar`}):e.jsxs(e.Fragment,{children:[x&&e.jsx(u.IconButton,{"data-testid":`${I}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${S}`,disabled:J(),onClick:A,onKeyDown:W,children:e.jsx(n.PencilIcon,{"aria-hidden":!0})},"edit"),e.jsx(u.IconButton,{"data-testid":`${I}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${S}`,disabled:J(),onClick:K,onKeyDown:W,children:e.jsx(i.BinIcon,{"aria-hidden":!0})},"delete")]}),e.jsx(u.ActionContainer,{$editable:x,$error:!!F,$loading:L,children:t})})()]})]}))}));exports.FileListItem=j;
+"use strict";var e=require("react/jsx-runtime"),i=require("../../external/@dnd-kit/sortable/dist/sortable.esm.js"),t=require("../../external/@dnd-kit/utilities/dist/utilities.esm.js"),a=require("@lifesg/react-icons/bin"),s=require("@lifesg/react-icons/drag-handle"),r=require("@lifesg/react-icons/exclamation-circle-fill"),l=require("@lifesg/react-icons/pencil"),n=require("react"),d=require("../../button/button.js"),o=require("../../shared/progress-bar/progress-bar.js"),c=require("../../typography/index.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js");var m=require("../../util/string-helper.js");require("@react-aria/live-announcer");var u=require("../context.js"),h=require("../helper.js"),x=require("./file-list-item.styles.js"),p=require("./file-list-item-thumbnail.js");const b=n.memo((({fileItem:b,editable:j,sortable:g,wrapperWidth:y,disabled:f,readOnly:N,onDelete:v,onEditClick:S})=>{const{id:T,name:q,size:B,description:I,progress:D=1,errorMessage:F,thumbnailImageDataUrl:C,truncateText:M=!0}=b,[z,$]=n.useState(),{activeId:k}=n.useContext(u.FileUploadContext),{attributes:E,listeners:w,setNodeRef:H,transform:O,transition:P}=i.useSortable({id:T}),U=n.useRef(null),L={transform:t.CSS.Translate.toString(O),transition:P},R=Object.assign(Object.assign({style:L},E),w),K=D<1,_=h.FileUploadHelper.formatFileSizeDisplay(B),W=k?k===T?"self":"others":"none",Y=n.useCallback((e=>{if(!M)return e;const i=U&&U.current?U.current.getBoundingClientRect().width:0;return m.StringHelper.truncateOneLine(e,i,i/2,i/2/8,16)}),[M]);n.useEffect((()=>{$(Y(q))}),[y,Y,q]);const A=()=>{v()},G=()=>{S&&S()},J=e=>{g&&e.stopPropagation()},Q=()=>f||!!k,V=()=>!!g&&!N,X=()=>e.jsxs(e.Fragment,{children:[e.jsx(c.Typography.BodyMD,{weight:I?"semibold":"regular",children:z}),I&&e.jsx(c.Typography.BodyMD,{className:x.itemDescriptionText,children:I})]});return e.jsxs("li",Object.assign({id:T,ref:H,className:x.item,"data-item-state":Q()&&"none"===W?"disabled":V()&&"self"===W?"sortable-active":V()?"sortable":void 0,"data-testid":`${T}-item`},V()?R:{},{children:[V()&&e.jsx(s.DragHandleIcon,{"data-testid":`${T}-drag-handle`,className:x.dragHandleIcon,"data-drag-handle-state":"self"===W?"active":Q()?"disabled":void 0}),e.jsxs("div",{className:x.box,"data-box-state":"self"===W?"focused":Q()?"disabled":F?"error":void 0,"data-stack-mobile":!F&&(K||j),children:[(()=>{let i;const t=!!C||b.type===h.FileUploadHelper.PDF_MIME_TYPE;return i=F?e.jsxs(e.Fragment,{children:[e.jsxs("div",{ref:U,className:x.nameSection,children:[X(),F&&e.jsxs(c.Typography.BodySM,{className:x.desktopErrorMessage,weight:"semibold",children:[e.jsx(r.ExclamationCircleFillIcon,{className:x.errorIcon,"aria-hidden":!0}),F]})]}),e.jsx("div",{className:x.fileSizeSection,"data-mobile-visibility":K?"hidden":"expand",children:e.jsx(c.Typography.BodyMD,{className:x.fileSizeText,children:_})}),F&&e.jsxs(c.Typography.BodySM,{className:x.mobileErrorMessage,weight:"semibold",children:[e.jsx(r.ExclamationCircleFillIcon,{className:x.errorIcon,"aria-hidden":!0}),F]})]}):t?(i=>e.jsxs(e.Fragment,{children:[e.jsx(p.FileListItemThumbnail,{thumbnailImageDataUrl:i,fileType:b.type,"data-testid":`${T}-thumbnail`}),e.jsxs("div",{className:x.extendedNameSection,children:[e.jsx("div",{ref:U,className:x.nameSection,children:X()}),e.jsx("div",{className:x.fileSizeSection,"data-mobile-visibility":K?"hidden":"expand",children:e.jsx(c.Typography.BodyMD,{className:x.fileSizeText,children:_})})]})]}))(C||""):e.jsxs(e.Fragment,{children:[e.jsx("div",{ref:U,className:x.nameSection,children:X()}),e.jsx("div",{className:x.fileSizeSection,"data-mobile-visibility":K?"hidden":"expand",children:e.jsx(c.Typography.BodyMD,{className:x.fileSizeText,children:_})})]}),e.jsx("div",{className:x.contentSection,"data-has-thumbnail":t,children:i})})(),!N&&(()=>{let i;return i=F?e.jsx(d.Button,{"data-testid":`${T}-error-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${q}, error: ${F}`,onClick:A,className:x.iconButton,icon:e.jsx(a.BinIcon,{"aria-hidden":!0})}):K?e.jsx(o.ProgressBar,{progress:D,"data-testid":`${T}-progress-bar`}):e.jsxs(e.Fragment,{children:[j&&e.jsx(d.Button,{"data-testid":`${T}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${q}`,disabled:Q(),onClick:G,onKeyDown:J,icon:e.jsx(l.PencilIcon,{"aria-hidden":!0}),className:x.iconButton},"edit"),e.jsx(d.Button,{"data-testid":`${T}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${q}`,disabled:Q(),onClick:A,onKeyDown:J,icon:e.jsx(a.BinIcon,{"aria-hidden":!0}),className:x.iconButton},"delete")]}),e.jsx("div",{className:x.actionContainer,"data-mobile-layout":!F&&K?"loading":!F&&j?"editable":void 0,children:i})})()]})]}))}));exports.FileListItem=b;
 //# sourceMappingURL=file-list-item.js.map

package/cjs/file-upload/file-list-item/file-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport { memo, useContext, useEffect, useRef, useState } from \"react\";\n\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { ItemFocusType } from \"./file-list-item.styles\";\nimport {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DesktopErrorMessage,\n    DragHandleIcon,\n    ErrorIcon,\n    ErrorIconButton,\n    ExtendedNameSection,\n    FileSizeSection,\n    IconButton,\n    Item,\n    ItemDescriptionText,\n    ItemText,\n    MobileErrorMessage,\n    NameSection,\n} from \"./file-list-item.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport type { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n    readOnly?: boolean | undefined;\n}\n\nconst Component = ({\n    fileItem,\n    editable,\n    sortable,\n    wrapperWidth,\n    disabled,\n    readOnly,\n    onDelete,\n    onEditClick,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        description,\n        progress = 1,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n    } = fileItem;\n    const [formattedName, setFormattedName] = useState<string>();\n    const { activeId } = useContext(FileUploadContext);\n\n    // Sortable mechanism\n    const { attributes, listeners, setNodeRef, transform, transition } =\n        useSortable({ id });\n    const detailSectionRef = useRef<HTMLDivElement>(null);\n    const style = {\n        transform: CSS.Translate.toString(transform),\n        transition,\n    };\n\n    const sortableProps = {\n        style,\n        ...attributes,\n        ...listeners,\n    };\n\n    // Local variables\n    const isLoading = progress < 1;\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const focusType: ItemFocusType = activeId\n        ? activeId === id\n            ? \"self\"\n            : \"others\"\n        : \"none\";\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDelete = () => {\n        onDelete();\n    };\n\n    const handleEdit = () => {\n        if (onEditClick) {\n            onEditClick();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        /**\n         * Circumvent issue of keydown action activating the sort mechanism\n         * rather than the actual action\n         */\n        if (sortable) {\n            event.stopPropagation();\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            detailSectionRef && detailSectionRef.current\n                ? detailSectionRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateOneLine(\n            value,\n            widthOfElement,\n            widthOfElement / 2,\n            widthOfElement / 2 / 8, // Arbitrary\n            16 // Font size\n        );\n    };\n\n    const shouldDisable = () => disabled || !!activeId;\n\n    const shouldEnableSort = () => !!sortable && !readOnly;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemText weight={description ? \"semibold\" : \"regular\"}>\n                {formattedName}\n            </ItemText>\n            {description && (\n                <ItemDescriptionText>{description}</ItemDescriptionText>\n            )}\n        </>\n    );\n\n    const renderErrorState = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n                {errorMessage && (\n                    <DesktopErrorMessage weight=\"semibold\">\n                        <ErrorIcon aria-hidden />\n                        {errorMessage}\n                    </DesktopErrorMessage>\n                )}\n            </NameSection>\n            <FileSizeSection>\n                <ItemText>{fileSize}</ItemText>\n            </FileSizeSection>\n            {errorMessage && (\n                <MobileErrorMessage weight=\"semibold\">\n                    <ErrorIcon aria-hidden />\n                    {errorMessage}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailImageDataUrl: string) => (\n        <>\n            <FileListItemThumbnail\n                thumbnailImageDataUrl={thumbnailImageDataUrl}\n                data-testid={`${id}-thumbnail`}\n            />\n            <ExtendedNameSection>\n                <NameSection ref={detailSectionRef}>\n                    {renderNameDescription()}\n                </NameSection>\n                <FileSizeSection>\n                    <ItemText>{fileSize}</ItemText>\n                </FileSizeSection>\n            </ExtendedNameSection>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n            </NameSection>\n            <FileSizeSection $hideInMobile={isLoading}>\n                <ItemText>{fileSize}</ItemText>\n            </FileSizeSection>\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = renderErrorState();\n        } else 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        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = (\n                <ErrorIconButton\n                    onClick={handleDelete}\n                    data-testid={`${id}-error-delete-button`}\n                    aria-label={`delete ${name}, error: ${errorMessage}`}\n                >\n                    <CrossIcon aria-hidden />\n                </ErrorIconButton>\n            );\n        } else if (isLoading) {\n            content = (\n                <ProgressBar\n                    progress={progress}\n                    data-testid={`${id}-progress-bar`}\n                />\n            );\n        } else {\n            content = (\n                <>\n                    {editable && (\n                        <IconButton\n                            key=\"edit\"\n                            data-testid={`${id}-edit-button`}\n                            data-no-dnd=\"true\"\n                            type=\"button\"\n                            styleType=\"light\"\n                            sizeType=\"small\"\n                            aria-label={`edit ${name}`}\n                            disabled={shouldDisable()}\n                            onClick={handleEdit}\n                            onKeyDown={handleKeyDown}\n                        >\n                            <PencilIcon aria-hidden />\n                        </IconButton>\n                    )}\n                    <IconButton\n                        key=\"delete\"\n                        data-testid={`${id}-delete-button`}\n                        data-no-dnd=\"true\"\n                        type=\"button\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        aria-label={`delete ${name}`}\n                        disabled={shouldDisable()}\n                        onClick={handleDelete}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <BinIcon aria-hidden />\n                    </IconButton>\n                </>\n            );\n        }\n\n        return (\n            <ActionContainer\n                $editable={editable}\n                $error={!!errorMessage}\n                $loading={isLoading}\n            >\n                {content}\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item\n            id={id}\n            ref={setNodeRef}\n            $sortable={shouldEnableSort()}\n            $disabled={shouldDisable()}\n            $focusType={focusType}\n            {...(shouldEnableSort() ? sortableProps : {})}\n        >\n            {shouldEnableSort() && (\n                <DragHandleIcon\n                    data-testid={`${id}-drag-handle`}\n                    $disabled={shouldDisable()}\n                    $active={focusType === \"self\"}\n                />\n            )}\n            <Box\n                $focused={focusType === \"self\"}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $disabled={shouldDisable()}\n                $editable={editable}\n            >\n                {renderContents()}\n                {!readOnly && renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","focusType","useEffect","getTruncatedText","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_Fragment","children","_jsx","ItemText","weight","ItemDescriptionText","Item","Object","assign","ref","$sortable","$disabled","$focusType","DragHandleIcon","$active","Box","$focused","$loading","$editable","content","NameSection","DesktopErrorMessage","ErrorIcon","FileSizeSection","MobileErrorMessage","FileListItemThumbnail","ExtendedNameSection","renderWithThumbnail","$hideInMobile","ContentSection","$hasThumbnail","renderContents","ErrorIconButton","onClick","CrossIcon","ProgressBar","IconButton","type","styleType","sizeType","onKeyDown","PencilIcon","BinIcon","ActionContainer","$error","renderActions"],"mappings":"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"}
+{"version":3,"file":"file-list-item.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport {\n    memo,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { Button } from \"../../button\";\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { Typography } from \"../../typography\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { ItemFocusType } from \"./file-list-item.styles\";\nimport * as styles from \"./file-list-item.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport type { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n    readOnly?: boolean | undefined;\n}\n\nconst Component = ({\n    fileItem,\n    editable,\n    sortable,\n    wrapperWidth,\n    disabled,\n    readOnly,\n    onDelete,\n    onEditClick,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        description,\n        progress = 1,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n    } = fileItem;\n    const [formattedName, setFormattedName] = useState<string>();\n    const { activeId } = useContext(FileUploadContext);\n\n    // Sortable mechanism\n    const { attributes, listeners, setNodeRef, transform, transition } =\n        useSortable({ id });\n    const detailSectionRef = useRef<HTMLDivElement>(null);\n    const style = {\n        transform: CSS.Translate.toString(transform),\n        transition,\n    };\n\n    const sortableProps = {\n        style,\n        ...attributes,\n        ...listeners,\n    };\n\n    // Local variables\n    const isLoading = progress < 1;\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const focusType: ItemFocusType = activeId\n        ? activeId === id\n            ? \"self\"\n            : \"others\"\n        : \"none\";\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                detailSectionRef && detailSectionRef.current\n                    ? detailSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDelete = () => {\n        onDelete();\n    };\n\n    const handleEdit = () => {\n        if (onEditClick) {\n            onEditClick();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        /**\n         * Circumvent issue of keydown action activating the sort mechanism\n         * rather than the actual action\n         */\n        if (sortable) {\n            event.stopPropagation();\n        }\n    };\n\n    const shouldDisable = () => disabled || !!activeId;\n\n    const shouldEnableSort = () => !!sortable && !readOnly;\n\n    const getItemState = () => {\n        if (shouldDisable() && focusType === \"none\") {\n            return \"disabled\";\n        }\n\n        if (shouldEnableSort() && focusType === \"self\") {\n            return \"sortable-active\";\n        }\n\n        if (shouldEnableSort()) {\n            return \"sortable\";\n        }\n\n        return undefined;\n    };\n\n    const getDragHandleState = () => {\n        if (focusType === \"self\") {\n            return \"active\";\n        }\n\n        if (shouldDisable()) {\n            return \"disabled\";\n        }\n\n        return undefined;\n    };\n\n    const getBoxState = () => {\n        if (focusType === \"self\") {\n            return \"focused\";\n        }\n\n        if (shouldDisable()) {\n            return \"disabled\";\n        }\n\n        if (errorMessage) {\n            return \"error\";\n        }\n\n        return undefined;\n    };\n\n    const getActionContainerLayout = () => {\n        if (!errorMessage && isLoading) {\n            return \"loading\";\n        }\n\n        if (!errorMessage && editable) {\n            return \"editable\";\n        }\n\n        return undefined;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <Typography.BodyMD weight={description ? \"semibold\" : \"regular\"}>\n                {formattedName}\n            </Typography.BodyMD>\n            {description && (\n                <Typography.BodyMD className={styles.itemDescriptionText}>\n                    {description}\n                </Typography.BodyMD>\n            )}\n        </>\n    );\n\n    const renderErrorState = () => (\n        <>\n            <div ref={detailSectionRef} className={styles.nameSection}>\n                {renderNameDescription()}\n                {errorMessage && (\n                    <Typography.BodySM\n                        className={styles.desktopErrorMessage}\n                        weight=\"semibold\"\n                    >\n                        <ExclamationCircleFillIcon\n                            className={styles.errorIcon}\n                            aria-hidden\n                        />\n                        {errorMessage}\n                    </Typography.BodySM>\n                )}\n            </div>\n            <div\n                className={styles.fileSizeSection}\n                data-mobile-visibility={isLoading ? \"hidden\" : \"expand\"}\n            >\n                <Typography.BodyMD className={styles.fileSizeText}>\n                    {fileSize}\n                </Typography.BodyMD>\n            </div>\n            {errorMessage && (\n                <Typography.BodySM\n                    className={styles.mobileErrorMessage}\n                    weight=\"semibold\"\n                >\n                    <ExclamationCircleFillIcon\n                        className={styles.errorIcon}\n                        aria-hidden\n                    />\n                    {errorMessage}\n                </Typography.BodySM>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailImageDataUrl: string) => (\n        <>\n            <FileListItemThumbnail\n                thumbnailImageDataUrl={thumbnailImageDataUrl}\n                fileType={fileItem.type}\n                data-testid={`${id}-thumbnail`}\n            />\n            <div className={styles.extendedNameSection}>\n                <div ref={detailSectionRef} className={styles.nameSection}>\n                    {renderNameDescription()}\n                </div>\n                <div\n                    className={styles.fileSizeSection}\n                    data-mobile-visibility={isLoading ? \"hidden\" : \"expand\"}\n                >\n                    <Typography.BodyMD className={styles.fileSizeText}>\n                        {fileSize}\n                    </Typography.BodyMD>\n                </div>\n            </div>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <div ref={detailSectionRef} className={styles.nameSection}>\n                {renderNameDescription()}\n            </div>\n            <div\n                className={styles.fileSizeSection}\n                data-mobile-visibility={isLoading ? \"hidden\" : \"expand\"}\n            >\n                <Typography.BodyMD className={styles.fileSizeText}>\n                    {fileSize}\n                </Typography.BodyMD>\n            </div>\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n        const shouldShowThumbnail =\n            !!thumbnailImageDataUrl ||\n            fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n        if (errorMessage) {\n            content = renderErrorState();\n        } else if (shouldShowThumbnail) {\n            content = renderWithThumbnail(thumbnailImageDataUrl || \"\");\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <div\n                className={styles.contentSection}\n                data-has-thumbnail={shouldShowThumbnail}\n            >\n                {content}\n            </div>\n        );\n    };\n\n    const renderActions = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = (\n                <Button\n                    data-testid={`${id}-error-delete-button`}\n                    data-no-dnd=\"true\"\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`delete ${name}, error: ${errorMessage}`}\n                    onClick={handleDelete}\n                    className={styles.iconButton}\n                    icon={<BinIcon aria-hidden />}\n                />\n            );\n        } else if (isLoading) {\n            content = (\n                <ProgressBar\n                    progress={progress}\n                    data-testid={`${id}-progress-bar`}\n                />\n            );\n        } else {\n            content = (\n                <>\n                    {editable && (\n                        <Button\n                            key=\"edit\"\n                            data-testid={`${id}-edit-button`}\n                            data-no-dnd=\"true\"\n                            type=\"button\"\n                            styleType=\"light\"\n                            sizeType=\"small\"\n                            aria-label={`edit ${name}`}\n                            disabled={shouldDisable()}\n                            onClick={handleEdit}\n                            onKeyDown={handleKeyDown}\n                            icon={<PencilIcon aria-hidden />}\n                            className={styles.iconButton}\n                        />\n                    )}\n                    <Button\n                        key=\"delete\"\n                        data-testid={`${id}-delete-button`}\n                        data-no-dnd=\"true\"\n                        type=\"button\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        aria-label={`delete ${name}`}\n                        disabled={shouldDisable()}\n                        onClick={handleDelete}\n                        onKeyDown={handleKeyDown}\n                        icon={<BinIcon aria-hidden />}\n                        className={styles.iconButton}\n                    />\n                </>\n            );\n        }\n\n        return (\n            <div\n                className={styles.actionContainer}\n                data-mobile-layout={getActionContainerLayout()}\n            >\n                {content}\n            </div>\n        );\n    };\n\n    return (\n        <li\n            id={id}\n            ref={setNodeRef}\n            className={styles.item}\n            data-item-state={getItemState()}\n            data-testid={`${id}-item`}\n            {...(shouldEnableSort() ? sortableProps : {})}\n        >\n            {shouldEnableSort() && (\n                <DSDragHandleIcon\n                    data-testid={`${id}-drag-handle`}\n                    className={styles.dragHandleIcon}\n                    data-drag-handle-state={getDragHandleState()}\n                />\n            )}\n            <div\n                className={styles.box}\n                data-box-state={getBoxState()}\n                data-stack-mobile={!errorMessage && (isLoading || editable)}\n            >\n                {renderContents()}\n                {!readOnly && renderActions()}\n            </div>\n        </li>\n    );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","focusType","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_Fragment","children","_jsx","Typography","BodyMD","weight","className","styles.itemDescriptionText","Object","assign","ref","styles.item","DSDragHandleIcon","styles.dragHandleIcon","styles.box","content","shouldShowThumbnail","type","PDF_MIME_TYPE","styles.nameSection","BodySM","styles.desktopErrorMessage","ExclamationCircleFillIcon","styles.errorIcon","styles.fileSizeSection","styles.fileSizeText","styles.mobileErrorMessage","FileListItemThumbnail","fileType","styles.extendedNameSection","renderWithThumbnail","styles.contentSection","renderContents","Button","styleType","sizeType","onClick","styles.iconButton","icon","BinIcon","ProgressBar","onKeyDown","PencilIcon","styles.actionContainer","renderActions"],"mappings":"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"}