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

package/file-upload/dropzone.styles.js

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

package/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":"yUAkBaA,EAAYC,EAAOC,EAAyB;;;;;MAKlDC,IACC,GAAIA,EAAMC,kBACN,OAAOC,CAAG;2BACKC,EAAW;;kBAEpBC,EAAcC,SAASC;+BACVH,EAAW;0BAChBA,EAAW;;aAG7B;EAIKI,EAAcT,EAAOU,KAAK;;EAI1BC,EAAcX,EAAOC,EAAa;;;;;;;;;;;EAalCW,EAAcZ,EAAOa,EAAWC,OAAO;aACvCC,EAAU;;EAIVC,EAAchB,EAAOiB,EAAqB;aAC1CF,EAAU;;;"}
+{"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":["container","containerWithDashedBorder","hiddenInput","dragOverlay","overlayText","overlayIcon"],"mappings":"iEAIO,MAAMA,EAAS,WAMTC,EAAyB,WAQzBC,EAAW,WAIXC,EAAW,UAaXC,EAAW,UAKXC,EAAW"}

package/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/file-upload/file-item-edit.js

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

package/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 { useCallback, 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        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        <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                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\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={shouldShowThumbnail}>\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":["FileItemEdit","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","Item","children","ContentSection","_jsx","FileListItemThumbnail","fileType","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","$thumbnail","ActionButton","disabled","trim","length","onClick","styleType"],"mappings":"krBA2BO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAX,GAEGY,EAAeC,GAAoBC,KACnCC,EAAoBC,GAAyBF,EAAiB,IAE/DG,EAAcC,EAA4B,MAC1CC,EAAiBD,EAAuB,MAKxCE,EAAmBC,GACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,GAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,GAAU,KACNb,EAAsBhB,EAAS8B,aAAe,GAAG,GAClD,CAAC9B,IAKJ,MAmBM+B,IACApB,GAAyBF,IAASuB,EAAiBC,cAczD,OACIC,EAACC,EAAI,CAAA,cAAc,GAAG7B,iBAAiB8B,SAAA,CACnCF,EAACG,aACIN,GACGO,EAACC,EAAqB,CAClB5B,sBAAuBA,EACvB6B,SAAU/B,IAGlByB,EAACO,EAAc,CAAAL,SAAA,CAjBvBF,EAACQ,EAAW,CAACC,IAAKxB,EAAciB,SAAA,CAC5BE,EAACM,EAAY,CAACC,OAAO,oBAAYjC,IACjC0B,EAACQ,EAAY,CAAAV,SACRJ,EAAiBe,sBAAsBvC,QAgBpC8B,EAACU,EAAKC,SAAQ,CACVN,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPmC,UAAWjD,EACXkD,SA7CEC,IAClBpC,EAAsBoC,EAAMC,OAAO/B,MAAM,EA6CzBjB,OA1CA+C,IAChB/C,EAAO+C,EAAMC,OAAO/B,MAAM,EA0CVgC,KAAM,EAAC,aACK,yBAAyB/C,IACrCgD,MAAO,CACHnB,SAAU,oBACVoB,SACI,8EAKpBtB,EAACuB,EAAoB,CAAAC,WAAa3B,EAAmBK,SAAA,CACjDE,EAACqB,EAAY,CAAA,cACI,GAAGrD,gBAChBG,KAAK,SACLmD,SAnDyB,IADV7C,EAAmB8C,OACpBC,OAoDdC,QApEG,KACX9C,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAMuC,OACrC,EAiE+BzB,SAAA,SAIvBE,EAACqB,EAAY,CACTlD,KAAK,SACLuD,UAAU,0BACG,GAAG1D,kBAChByD,QAAS3D,EAAQgC,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":["FileItemEdit","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":"4zBAqBO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAX,GAEGY,EAAeC,GAAoBC,KACnCC,EAAoBC,GAAyBF,EAAiB,IAE/DG,EAAcC,EAA4B,MAC1CC,EAAiBD,EAAuB,MAKxCE,EAAmBC,GACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,GAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,GAAU,KACNb,EAAsBhB,EAAS8B,aAAe,GAAG,GAClD,CAAC9B,IAKJ,MAmBM+B,IACApB,GAAyBF,IAASuB,EAAiBC,cAmBzD,OACIC,EAAA,KAAA,CAAA,cAAiB,GAAG5B,iBAAmB6B,UAAWC,EAAWC,SAAA,CACzDH,SAAKC,UAAWG,YACXP,GACGQ,EAACC,EAAqB,CAClB7B,sBAAuBA,EACvB8B,SAAUhC,IAGlByB,SAAKC,UAAWO,YAtBxBR,EAAA,MAAA,CAAKS,IAAKxB,EAAgBgB,UAAWS,EAAkBP,SAAA,CACnDE,EAACM,EAAWC,OAAM,CACdX,UAAWY,EACXC,OAAO,WAAUX,SAEhBzB,IAEL2B,EAACM,EAAWC,OAAM,CAAAT,SACbL,EAAiBiB,sBAAsBzC,QAgBpC+B,EAACW,EAAKC,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,EAAA,MAAA,CACIC,UAAWwB,EACPC,EACA7B,GACI8B,GACPxB,SAAA,CAEDE,EAACuB,EAAM,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,EAACuB,EAAM,CACHrD,KAAK,SACLsD,SAAS,QACTM,UAAU,YAAW,cACR,GAAG/D,kBAChB6D,QAAS/D,EACT+B,UAAWiC,EAAmB/B,SAAA,gBAKrC"}

package/file-upload/file-item-edit.styles.d.ts

@@ -1,48 +1,8 @@
-interface ActionButtonSectionStyleProps {
-    $thumbnail?: boolean | undefined;
-}
-export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
-export declare const ContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const DetailsSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const NameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const FileNameText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const FileSizeText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ActionButtonsSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$thumbnail"> & ActionButtonSectionStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$thumbnail"> & ActionButtonSectionStyleProps, never>>> & string;
-export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const item: import("@linaria/core").LinariaClassName;
+export declare const contentSection: import("@linaria/core").LinariaClassName;
+export declare const detailsSection: import("@linaria/core").LinariaClassName;
+export declare const nameSection: import("@linaria/core").LinariaClassName;
+export declare const fileNameText: import("@linaria/core").LinariaClassName;
+export declare const actionButtonsSection: import("@linaria/core").LinariaClassName;
+export declare const actionButtonsSectionWithThumbnail: import("@linaria/core").LinariaClassName;
+export declare const actionButton: import("@linaria/core").LinariaClassName;

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

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

package/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":"+OAgBO,MAAMA,EAAOC,EAAOC,EAAE;;;eAGdC,EAAW;;;;yBAIDC,EAAU,gBAAgBA,EAAUC;cAC/CC,EAAUC;;EAIXC,EAAiBP,EAAOQ,GAAG;;;qBAGnBN,EAAW;;EAInBO,EAAiBT,EAAOQ,GAAG;;;;EAM3BE,EAAcV,EAAOQ,GAAG;;;;qBAIhBN,EAAW;;MAE1BS,EAAcC,SAASC;;;;EAMhBC,EAAed,EAAOe,EAAWC,OAAO;;;oBAGjCd,EAAW;;MAEzBS,EAAcC,SAASC;;yBAEJX,EAAW;;EAIvBe,EAAejB,EAAOe,EAAWC,OAAO,GAExCE,EAAuBlB,EAAOQ,GAAkC;;MAEvEG,EAAcC,SAASC;;;;MAItBM,IACC,GAAIA,EAAMC,WACN,OAAOC,CAAG;;6BAEOnB,EAAW;;;kBAGtBS,EAAcC,SAASC;;;aAIjC;EAIKS,EAAetB,EAAOuB,EAAOC,MAAM;;;wBAGxBtB,EAAW;;;MAG7BS,EAAcC,SAASC;;;6BAGAX,EAAW;;;"}
+{"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":["item","contentSection","detailsSection","nameSection","fileNameText","actionButtonsSection","actionButtonsSectionWithThumbnail","actionButton"],"mappings":"uEAIO,MAAMA,EAAI,WAWJC,EAAc,WAOdC,EAAc,UAMdC,EAAW,WAYXC,EAAY,UAWZC,EAAoB,WAQpBC,EAAiC,UAUjCC,EAAY"}

package/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/file-upload/file-list-item/file-list-item-thumbnail.d.ts

@@ -6,11 +6,4 @@ interface Props {
     onReplaceClick?: (() => void) | undefined;
 }
 export declare const FileListItemThumbnail: ({ thumbnailImageDataUrl, fileType, "data-testid": testId, renderReplaceButton, onReplaceClick, }: Props) => import("react/jsx-runtime").JSX.Element;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Thumbnail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps, "$isPdf"> & {
-    $isPdf?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps, "$isPdf"> & {
-    $isPdf?: boolean;
-}, never>>> & string & Omit<({ src, alt, className, "data-testid": testId, }: import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const ReplaceButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
 export {};

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

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

package/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\";\nimport { FileUploadHelper } from \"../helper\";\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        <Container data-testid={testId}>\n            <Thumbnail\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={displaySrc}\n                $isPdf={isPdf}\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)<{ $isPdf?: boolean }>`\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${(props) =>\n        props.$isPdf\n            ? \"none\"\n            : `${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${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":["FileListItemThumbnail","thumbnailImageDataUrl","fileType","testId","renderReplaceButton","onReplaceClick","isPdf","FileUploadHelper","PDF_MIME_TYPE","displaySrc","PDF_ICON_URL","_jsxs","Container","children","_jsx","Thumbnail","undefined","src","$isPdf","ReplaceButton","type","onClick","styled","div","V3_Spacing","ImageWithFallback","V3_Radius","props","V3_Border","V3_Colour","V3_MediaQuery","MaxWidth","md","button","V3_Font"],"mappings":"iWAqBO,MAAMA,EAAwB,EACjCC,wBACAC,WACA,cAAeC,EACfC,sBACAC,qBAEA,MAMMC,EAAQJ,IAAaK,EAAiBC,cACtCC,EAAaH,EACbL,GAAyBM,EAAiBG,aAC1CT,GAAyB,GAE/B,OACIU,EAACC,EAAS,CAAA,cAAcT,EAAMU,SAAA,CAC1BC,EAACC,EAAS,CAAA,cACOZ,EAAS,GAAGA,eAAiBa,EAC1CC,IAAKR,EAAUS,OACPZ,IAEXF,GACGU,EAACK,EAAa,CAACC,KAAK,SAASC,QAnBnB,KACdhB,GACAA,GACJ,EAgB2DQ,SAAA,cAI/C,EAOPD,EAAYU,EAAOC,GAAG;;oBAEfC,EAAW;;;;;EAOlBT,EAAYO,EAAOG,EAAwC;;;;qBAInDC,EAAc;cACpBC,GACPA,EAAMT,OACA,OACA,GAAGU,EAAU,gBAAgBA,EAAiB,SAAKC,EAAkB;;;MAG7EC,EAAcC,SAASC;;;;EAMhBb,EAAgBG,EAAOW,MAAM;;;kBAGxBT,EAAW;;;;;MAKvBU,EAAQ;aACDL,EAAU;;;iBAGNA,EAAU;;"}
+{"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":["FileListItemThumbnail","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":"uUAcO,MAAMA,EAAwB,EACjCC,wBACAC,WACA,cAAeC,EACfC,sBACAC,qBAEA,MAMMC,EAAQJ,IAAaK,EAAiBC,cACtCC,EAAaH,EACbL,GAAyBM,EAAiBG,aAC1CT,GAAyB,GAE/B,OACIU,EAAA,MAAA,CAAKC,UAAWC,EAAgB,cAAeV,EAAMW,SAAA,CACjDC,EAACC,iBACgBb,EAAS,GAAGA,eAAiBc,EAC1CC,IAAKT,EACLG,UAAWO,EAAKC,EAAkBd,GAASe,KAE9CjB,GACGW,EAAA,SAAA,CACIO,KAAK,SACLC,QArBM,KACdlB,GACAA,GACJ,EAmBYO,UAAWY,EAAoBV,SAAA,cAKrC"}

package/file-upload/file-list-item/file-list-item-thumbnail.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const thumbnail: import("@linaria/core").LinariaClassName;
+export declare const thumbnailPdf: import("@linaria/core").LinariaClassName;
+export declare const replaceButton: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./file-list-item-thumbnail.styles_1vrh1ve.css";const t="c1hu6y7h",e="t18h6q7y",i="t1w2z01d",l="r5e5ep6";export{t as container,l as replaceButton,e as thumbnail,i as thumbnailPdf};
+//# sourceMappingURL=file-list-item-thumbnail.styles.js.map

package/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":["container","thumbnail","thumbnailPdf","replaceButton"],"mappings":"gGAIO,MAAMA,EAAS,WASTC,EAAS,WAcTC,EAAY,WAIZC,EAAa"}

package/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/file-upload/file-list-item/file-list-item.js

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

package/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 { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport {\n    memo,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} 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 * 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 {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DesktopErrorMessage,\n    DragHandleIcon,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    FileSizeText,\n    IconButton,\n    Item,\n    ItemDescriptionText,\n    ItemText,\n    MobileErrorMessage,\n    NameSection,\n} = styles;\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    // =========================================================================\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                <FileSizeText>{fileSize}</FileSizeText>\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                fileType={fileItem.type}\n                data-testid={`${id}-thumbnail`}\n            />\n            <ExtendedNameSection>\n                <NameSection ref={detailSectionRef}>\n                    {renderNameDescription()}\n                </NameSection>\n                <FileSizeSection>\n                    <FileSizeText>{fileSize}</FileSizeText>\n                </FileSizeSection>\n            </ExtendedNameSection>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n            </NameSection>\n            <FileSizeSection $hideInMobile={isLoading}>\n                <FileSizeText>{fileSize}</FileSizeText>\n            </FileSizeSection>\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            <ContentSection $hasThumbnail={shouldShowThumbnail}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = (\n                <IconButton\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                >\n                    <BinIcon aria-hidden />\n                </IconButton>\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                            icon={<PencilIcon aria-hidden />}\n                        />\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                        icon={<BinIcon aria-hidden />}\n                    />\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":["ActionContainer","Box","ContentSection","DesktopErrorMessage","DragHandleIcon","ErrorIcon","ExtendedNameSection","FileSizeSection","FileSizeText","IconButton","Item","ItemDescriptionText","ItemText","MobileErrorMessage","NameSection","styles","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","weight","Object","assign","ref","$sortable","$disabled","$focusType","$active","$focused","$loading","$editable","content","shouldShowThumbnail","type","PDF_MIME_TYPE","FileListItemThumbnail","fileType","renderWithThumbnail","$hideInMobile","$hasThumbnail","renderContents","styleType","sizeType","onClick","BinIcon","ProgressBar","onKeyDown","icon","PencilIcon","$error","renderActions"],"mappings":"w6BA0BA,MAAMA,gBACFA,EAAeC,IACfA,EAAGC,eACHA,EAAcC,oBACdA,EAAmBC,eACnBA,EAAcC,UACdA,EAASC,oBACTA,EAAmBC,gBACnBA,EAAeC,aACfA,EAAYC,WACZA,EAAUC,KACVA,EAAIC,oBACJA,EAAmBC,SACnBA,EAAQC,mBACRA,EAAkBC,YAClBA,GACAC,EAwSSC,EAAeC,GAtSV,EACdC,WACAC,WACAC,WACAC,eACAC,WACAC,WACAC,WACAC,kBAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,YACJA,EAAWC,SACXA,EAAW,EAACC,aACZA,EAAYC,sBACZA,EAAqBC,aACrBA,GAAe,GACff,GACGgB,EAAeC,GAAoBC,KACpCC,SAAEA,GAAaC,EAAWC,IAG1BC,WAAEA,EAAUC,UAAEA,EAASC,WAAEA,EAAUC,UAAEA,GAASC,WAAEA,IAClDC,EAAY,CAAEnB,OACZoB,GAAmBC,EAAuB,MAC1CC,GAAQ,CACVL,UAAWM,EAAIC,UAAUC,SAASR,IAClCC,eAGEQ,gCACFJ,UACGR,GACAC,GAIDY,GAAYvB,EAAW,EACvBwB,GAAWC,EAAiBC,sBAAsB5B,GAClD6B,GAA2BpB,EAC3BA,IAAaX,EACT,OACA,SACJ,OAKAgC,GAAmBC,GACpBC,IACG,IAAK3B,EAAc,OAAO2B,EAE1B,MAAMC,EACFf,IAAoBA,GAAiBgB,QAC/BhB,GAAiBgB,QAAQC,wBAAwBC,MACjD,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAAC5B,IAMLkC,GAAU,KACNhC,EAAiBuB,GAAiB/B,GAAM,GACzC,CAACN,EAAcqC,GAAkB/B,IAKpC,MAAMyC,GAAe,KACjB5C,GAAU,EAGR6C,GAAa,KACX5C,GACAA,GACJ,EAGE6C,GAAiBC,IAKfnD,GACAmD,EAAMC,iBACV,EAGEC,GAAgB,IAAMnD,KAAce,EAEpCqC,GAAmB,MAAQtD,IAAaG,EAKxCoD,GAAwB,IAC1BC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACnE,EAAQ,CAACoE,OAAQnD,EAAc,WAAa,UAASiD,SACjD5C,IAEJL,GACGkD,EAACpE,YAAqBkB,OAoJlC,OACI+C,EAAClE,EAAIuE,OAAAC,OAAA,CACDxD,GAAIA,EACJyD,IAAKzC,EAAU0C,UACJV,KAAkBW,UAClBZ,KAAea,WACd7B,IACPiB,KAAqBtB,GAAgB,CAAA,aAEzCsB,MACGK,EAAC3E,EAAc,CAAA,cACE,GAAGsB,0BACL+C,KAAec,QACH,SAAd9B,KAGjBmB,EAAC3E,EAAG,CAAAuF,SACwB,SAAd/B,YACA1B,EAAY0D,SACZpC,GAASgC,UACRZ,KAAeiB,UACfvE,YAhHA,MACnB,IAAIwE,EACJ,MAAMC,IACA5D,GACFd,EAAS2E,OAAStC,EAAiBuC,cAUvC,OAPIH,EADA5D,EAzDJ6C,EAAAC,EAAA,CAAAC,SAAA,CACIF,EAAC9D,EAAW,CAACqE,IAAKrC,GAAgBgC,SAAA,CAC7BH,KACA5C,GACG6C,EAACzE,EAAmB,CAAC6E,OAAO,WAAUF,SAAA,CAClCC,EAAC1E,sBACA0B,QAIbgD,EAACxE,EAAe,CAAAuE,SACZC,EAACvE,EAAY,CAAAsE,SAAExB,OAElBvB,GACG6C,EAAC/D,EAAkB,CAACmE,OAAO,qBACvBD,EAAC1E,EAAS,CAAA,eAAA,IACT0B,QA2CF6D,EArCa,CAAC5D,GACzB4C,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACgB,EAAqB,CAClB/D,sBAAuBA,EACvBgE,SAAU9E,EAAS2E,KAAI,cACV,GAAGnE,gBAEpBkD,EAACtE,EAAmB,CAAAwE,SAAA,CAChBC,EAACjE,EAAW,CAACqE,IAAKrC,GAAgBgC,SAC7BH,OAELI,EAACxE,EAAe,CAAAuE,SACZC,EAACvE,EAAY,CAAAsE,SAAExB,aA0Bb2C,CAAoBjE,GAAyB,IAnB3D4C,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACjE,EAAW,CAACqE,IAAKrC,GAAgBgC,SAC7BH,OAELI,EAACxE,EAAe,CAAA2F,cAAgB7C,GAASyB,SACrCC,EAACvE,EAAY,CAAAsE,SAAExB,UAoBnByB,EAAC7E,EAAc,CAAAiG,cAAgBP,EAAmBd,SAC7Ca,GACY,EAiGZS,IACC7E,GA9FQ,MAClB,IAAIoE,EA0DJ,OAvDIA,EADA5D,EAEIgD,EAACtE,EAAU,CAAA,cACM,GAAGiB,wBAAwB,cAC5B,OACZmE,KAAK,SACLQ,UAAU,QACVC,SAAS,QAAO,aACJ,UAAU3E,aAAgBI,IACtCwE,QAASnC,GAAYU,SAErBC,EAACyB,EAAO,CAAA,eAAA,MAGTnD,GAEH0B,EAAC0B,GACG3E,SAAUA,EAAQ,cACL,GAAGJ,mBAKpBkD,EAAAC,EAAA,CAAAC,SAAA,CACK3D,GACG4D,EAACtE,EAAU,CAAA,cAEM,GAAGiB,gBAAgB,cACpB,OACZmE,KAAK,SACLQ,UAAU,QACVC,SAAS,QAAO,aACJ,QAAQ3E,IACpBL,SAAUmD,KACV8B,QAASlC,GACTqC,UAAWpC,GACXqC,KAAM5B,EAAC6B,EAAU,CAAA,eAAA,KAVb,QAaZ7B,EAACtE,EAAU,CAAA,cAEM,GAAGiB,kBAAkB,cACtB,OACZmE,KAAK,SACLQ,UAAU,QACVC,SAAS,QAAO,aACJ,UAAU3E,IACtBL,SAAUmD,KACV8B,QAASnC,GACTsC,UAAWpC,GACXqC,KAAM5B,EAACyB,EAAO,CAAA,eAAA,KAVV,aAiBhBzB,EAAC/E,EAAe,CAAA0F,UACDvE,EAAQ0F,SACT9E,WACAsB,GAASyB,SAElBa,GACa,EA4BAmB,SAEf"}
+{"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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"}