@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

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

@@ -1,5 +1,5 @@
-import { FileItemProps } from "./types";
-import { FormLabelProps } from "../form/types";
+import type { FormLabelProps } from "../form/form-label/types";
+import type { FileItemProps } from "./types";
 interface Props {
     fileItem: FileItemProps;
     wrapperWidth: number;

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 l}from"react";import{Form as a}from"../form/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.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 d,DetailsSection as c,ActionButtonsSection as m,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,descriptionRequired:x=!0,descriptionLabel:v,wrapperWidth:C,onSave:D,onCancel:$,onBlur:w})=>{const{id:T,name:I,size:L,type:B,truncateText:M=!0,thumbnailImageDataUrl:P}=y,[S,k]=i(),[z,E]=i(""),F=r(null),R=r(null),U=n((e=>{if(!M)return e;const t=R&&R.current?R.current.getBoundingClientRect().width:0;return o.truncateOneLine(e,t,t/2,t/2/8,16)}),[M]);l((()=>{k(U(I))}),[C,U,I]),l((()=>{E(y.description||"")}),[y]);const _=!!P||B===g.PDF_MIME_TYPE;return e(s,{"data-testid":`${T}-edit-display`,children:[e(d,{children:[_&&t(b,{thumbnailImageDataUrl:P,fileType:B}),e(c,{children:[e(p,{ref:R,children:[t(h,{weight:"semibold",children:S}),t(f,{children:g.formatFileSizeDisplay(L)})]}),t(a.Textarea,{ref:F,id:`${T}-description-textarea`,"data-testid":`${T}-textarea`,value:z,maxLength:j,onChange:e=>{E(e.target.value)},onBlur:e=>{w(e.target.value)},rows:3,label:null!=v?v:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e(m,{$thumbnail:_,children:[t(u,{"data-testid":`${T}-save-button`,type:"button",disabled:(()=>{if(!x)return!1;return 0===z.trim().length})(),onClick:()=>{F.current&&D(F.current.value.trim())},children:"Save"}),t(u,{type:"button",styleType:"secondary","data-testid":`${T}-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 s}from"../button/button.js";import{Form as o}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,fileSizeText as j}from"./file-item-edit.styles.js";import{FileListItemThumbnail as v}from"./file-list-item/file-list-item-thumbnail.js";import{FileUploadHelper as x}from"./helper.js";const N=({fileItem:N,fileDescriptionMaxLength:D,descriptionRequired:T=!0,descriptionLabel:C,wrapperWidth:w,onSave:B,onCancel:M,onBlur:$})=>{const{id:z,name:I,size:L,type:P,truncateText:S=!0,thumbnailImageDataUrl:k}=N,[E,F]=r(),[R,U]=r(""),_=a(null),q=a(null),O=l((e=>{if(!S)return e;const t=q&&q.current?q.current.getBoundingClientRect().width:0;return c.truncateOneLine(e,t,t/2,t/2/8,16)}),[S]);n((()=>{F(O(I))}),[w,O,I]),n((()=>{U(N.description||"")}),[N]);const W=!!k||P===x.PDF_MIME_TYPE;return e("li",{"data-testid":`${z}-edit-display`,className:d,children:[e("div",{className:p,children:[W&&t(v,{thumbnailImageDataUrl:k,fileType:P}),e("div",{className:u,children:[e("div",{ref:q,className:b,children:[t(m.BodyMD,{className:g,weight:"semibold",children:E}),t(m.BodyMD,{className:j,children:x.formatFileSizeDisplay(L)})]}),t(o.Textarea,{ref:_,id:`${z}-description-textarea`,"data-testid":`${z}-textarea`,value:R,maxLength:D,onChange:e=>{U(e.target.value)},onBlur:e=>{$(e.target.value)},rows:3,label:null!=C?C:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e("div",{className:i(f,W&&y),children:[t(s,{"data-testid":`${z}-save-button`,type:"button",sizeType:"small",disabled:(()=>{if(!T)return!1;return 0===R.trim().length})(),onClick:()=>{_.current&&B(_.current.value.trim())},className:h,children:"Save"}),t(s,{type:"button",sizeType:"small",styleType:"secondary","data-testid":`${z}-cancel-button`,onClick:M,className:h,children:"Cancel"})]})]})};export{N 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\";\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 { FileItemProps } from \"./types\";\nimport { FormLabelProps } from \"../form/types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    descriptionRequired = true,\n    descriptionLabel,\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        if (!descriptionRequired) return false;\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                        label={\n                            descriptionLabel ?? {\n                                children: \"Photo description\",\n                                subtitle:\n                                    \"Describe this photo to users who may not be able to see the image.\",\n                            }\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","descriptionRequired","descriptionLabel","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","shouldDisableSave","onClick","styleType"],"mappings":"+sBA6BO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,uBAAsB,EACtBC,mBACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAb,GAEGc,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,EAAsBlB,EAASgC,aAAe,GAAG,GAClD,CAAChC,IAKJ,MAoBMiC,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,UAAWnD,EACXoD,SA9CEC,IAClBpC,EAAsBoC,EAAMC,OAAO/B,MAAM,EA8CzBjB,OA3CA+C,IAChB/C,EAAO+C,EAAMC,OAAO/B,MAAM,EA2CVgC,KAAM,EACNC,MACItD,QAAAA,EAAoB,CAChBmC,SAAU,oBACVoB,SACI,8EAMxBtB,EAACuB,EAAoB,CAAAC,WAAa3B,EAAmBK,SAAA,CACjDE,EAACqB,EAAY,CAAA,cACI,GAAGrD,gBAChBG,KAAK,SACLmD,SAvDU,MACtB,IAAK5D,EAAqB,OAAO,EAEjC,OAAqC,IADVe,EAAmB8C,OACpBC,MAAY,EAoDhBC,GACVC,QAtEG,KACX/C,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAMuC,OACrC,EAmE+BzB,SAAA,SAIvBE,EAACqB,EAAY,CACTlD,KAAK,SACLwD,UAAU,0BACG,GAAG3D,kBAChB0D,QAAS5D,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 type { FormLabelProps } from \"../form/form-label/types\";\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    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    descriptionRequired = true,\n    descriptionLabel,\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        if (!descriptionRequired) return false;\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 className={styles.fileSizeText}>\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                        label={\n                            descriptionLabel ?? {\n                                children: \"Photo description\",\n                                subtitle:\n                                    \"Describe this photo to users who may not be able to see the image.\",\n                            }\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","descriptionRequired","descriptionLabel","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","styles.fileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","clsx","styles.actionButtonsSection","styles.actionButtonsSectionWithThumbnail","Button","sizeType","disabled","trim","length","shouldDisableSave","onClick","styles.actionButton","styleType"],"mappings":"80BAwBO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,uBAAsB,EACtBC,mBACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAb,GAEGc,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,EAAsBlB,EAASgC,aAAe,GAAG,GAClD,CAAChC,IAKJ,MAoBMiC,IACApB,GAAyBF,IAASuB,EAAiBC,cAmBzD,OACIC,EAAA,KAAA,CAAA,cAAiB,GAAG5B,iBAAmB6B,UAAWC,EAAWC,SAAA,CACzDH,SAAKC,UAAWG,YACXP,GACGQ,EAACC,GACG7B,sBAAuBA,EACvB8B,SAAUhC,IAGlByB,EAAA,MAAA,CAAKC,UAAWO,EAAqBL,SAAA,CAtB7CH,EAAA,MAAA,CAAKS,IAAKxB,EAAgBgB,UAAWS,EAAkBP,SAAA,CACnDE,EAACM,EAAWC,OAAM,CACdX,UAAWY,EACXC,OAAO,WAAUX,SAEhBzB,IAEL2B,EAACM,EAAWC,OAAM,CAACX,UAAWc,EAAmBZ,SAC5CL,EAAiBkB,sBAAsB1C,QAgBpC+B,EAACY,EAAKC,SAAQ,CACVT,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPsC,UAAWtD,EACXuD,SAnDEC,IAClBvC,EAAsBuC,EAAMC,OAAOlC,MAAM,EAmDzBjB,OAhDAkD,IAChBlD,EAAOkD,EAAMC,OAAOlC,MAAM,EAgDVmC,KAAM,EACNC,MACIzD,QAAAA,EAAoB,CAChBoC,SAAU,oBACVsB,SACI,8EAMxBzB,EAAA,MAAA,CACIC,UAAWyB,EACPC,EACA9B,GACI+B,GACPzB,SAAA,CAEDE,EAACwB,EAAM,CAAA,cACU,GAAGzD,gBAChBG,KAAK,SACLuD,SAAS,QACTC,SAnEU,MACtB,IAAKjE,EAAqB,OAAO,EAEjC,OAAqC,IADVe,EAAmBmD,OACpBC,MAAY,EAgEhBC,GACVC,QAlFG,KACXpD,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAM4C,OACrC,EAgFY/B,UAAWmC,EAAmBjC,SAAA,SAIlCE,EAACwB,EAAM,CACHtD,KAAK,SACLuD,SAAS,QACTO,UAAU,YAAW,cACR,GAAGjE,kBAChB+D,QAASjE,EACT+B,UAAWmC,EAAmBjC,SAAA,gBAKrC"}

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

@@ -1,32 +1,9 @@
-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<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const FileSizeText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-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 fileSizeText: 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,71 +1,2 @@
-import t,{css as i}from"styled-components";import{Button as n}from"../button/button.js";import{Spacing as o,Colour as a,Border as r,Radius as e,MediaQuery as d}from"../theme/index.js";import{Typography as l}from"../typography/typography.js";const m=t.li`
-    display: flex;
-    flex-direction: column;
-    padding: ${o["spacing-32"]};
-    background: ${a["bg-primary-subtlest"]};
-    border: ${r["width-010"]} ${r.solid} ${a.border};
-    border-radius: ${e.sm};
-
-    &:not(:last-child) {
-        margin-bottom: ${o["spacing-16"]};
-    }
-`,s=t.div`
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: ${o["spacing-16"]};
-    width: 100%;
-`,p=t.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-`,g=t.div`
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: ${o["spacing-16"]};
-
-    ${d.MaxWidth.md} {
-        flex-direction: column;
-        justify-content: flex-start;
-    }
-`,c=t(l.BodyMD)`
-    display: flex;
-    flex: 1;
-    margin-right: ${o["spacing-16"]};
-
-    ${d.MaxWidth.md} {
-        margin-right: 0;
-        margin-bottom: ${o["spacing-8"]};
-    }
-`,f=t(l.BodyMD)`
-    color: ${a["text-subtler"]};
-`,x=t.div`
-    display: flex;
-    justify-content: flex-end;
-    ${d.MaxWidth.md} {
-        flex-direction: column;
-    }
-
-    ${t=>{if(t.$thumbnail)return i`
-                margin-left: calc(
-                    96px + ${o["spacing-32"]}
-                ); // thumbnail width + right margin
-
-                ${d.MaxWidth.md} {
-                    margin-left: 0;
-                }
-            `}}
-`,$=t(n.Small)`
-    width: 7.5rem;
-    &:not(:last-of-type) {
-        margin-right: ${o["spacing-16"]};
-    }
-
-    ${d.MaxWidth.md} {
-        width: 100%;
-        &:not(:last-of-type) {
-            margin-bottom: ${o["spacing-16"]};
-        }
-    }
-`;export{$ as ActionButton,x as ActionButtonsSection,s as ContentSection,p as DetailsSection,c as FileNameText,f as FileSizeText,m as Item,g as NameSection};
+import"./file-item-edit.styles_19bvztn.css";const i="i1432lvs",t="c1i0crev",c="d4rbbwx",e="n18lt6ho",l="fuau9z6",s="f18dc1yj",a="ajknckh",d="awg16zc",f="aigdfjq";export{f as actionButton,a as actionButtonsSection,d as actionButtonsSectionWithThumbnail,t as contentSection,c as detailsSection,l as fileNameText,s as fileSizeText,i as item,e 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\";\nimport { Button } from \"../button/button\";\nimport { Border, Colour, MediaQuery, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\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: ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-radius: ${Radius[\"sm\"]};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ContentSection = styled.div`\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: ${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: ${Spacing[\"spacing-16\"]};\n\n    ${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: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-right: 0;\n        margin-bottom: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const ActionButtonsSection = styled.div<ActionButtonSectionStyleProps>`\n    display: flex;\n    justify-content: flex-end;\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n\n    ${(props) => {\n        if (props.$thumbnail) {\n            return 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        }\n    }}\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    width: 7.5rem;\n    &:not(:last-of-type) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n        &:not(:last-of-type) {\n            margin-bottom: ${Spacing[\"spacing-16\"]};\n        }\n    }\n`;\n"],"names":["Item","styled","li","Spacing","Colour","Border","solid","border","Radius","ContentSection","div","DetailsSection","NameSection","MediaQuery","MaxWidth","md","FileNameText","Typography","BodyMD","FileSizeText","ActionButtonsSection","props","$thumbnail","css","ActionButton","Button","Small"],"mappings":"iPAeO,MAAMA,EAAOC,EAAOC,EAAE;;;eAGdC,EAAQ;kBACLC,EAAO;cACXC,EAAO,gBAAgBA,EAAOC,SAASF,EAAOG;qBACvCC,EAAW;;;yBAGPL,EAAQ;;EAIpBM,EAAiBR,EAAOS,GAAG;;;qBAGnBP,EAAQ;;EAIhBQ,EAAiBV,EAAOS,GAAG;;;;EAM3BE,EAAcX,EAAOS,GAAG;;;;qBAIhBP,EAAQ;;MAEvBU,EAAWC,SAASC;;;;EAMbC,EAAef,EAAOgB,EAAWC,OAAO;;;oBAGjCf,EAAQ;;MAEtBU,EAAWC,SAASC;;yBAEDZ,EAAQ;;EAIpBgB,EAAelB,EAAOgB,EAAWC,OAAO;aACxCd,EAAO;EAGPgB,EAAuBnB,EAAOS,GAAkC;;;MAGvEG,EAAWC,SAASC;;;;MAInBM,IACC,GAAIA,EAAMC,WACN,OAAOC,CAAG;;6BAEOpB,EAAQ;;;kBAGnBU,EAAWC,SAASC;;;aAI9B;EAIKS,EAAevB,EAAOwB,EAAOC,MAAM;;;wBAGxBvB,EAAQ;;;MAG1BU,EAAWC,SAASC;;;6BAGGZ,EAAQ;;;"}
+{"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, Radius, Spacing } from \"../theme\";\n\nexport const item = css`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-radius: ${Radius[\"sm\"]};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\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 fileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const actionButtonsSection = css`\n    display: flex;\n    justify-content: flex-end;\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","fileSizeText","actionButtonsSection","actionButtonsSectionWithThumbnail","actionButton"],"mappings":"uEAIO,MAAMA,EAAI,WAaJC,EAAc,WAOdC,EAAc,UAMdC,EAAW,WAYXC,EAAY,UAWZC,EAAY,WAIZC,EAAoB,UASpBC,EAAiC,UAUjCC,EAAY"}

package/file-upload/file-item-edit.styles_19bvztn.css

@@ -0,0 +1,11 @@
+@layer fds{.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);background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}.i1432lvs:not(:last-child){margin-bottom:var(--fds-spacing-16);}
+.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);}
+.f18dc1yj{color:var(--fds-colour-text-subtler);}
+.ajknckh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}:where(body.fds-breakpoint-md-max) .ajknckh{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.awg16zc{margin-left:calc(
+        96px + var(--fds-spacing-32)
+    );}:where(body.fds-breakpoint-md-max) .awg16zc{margin-left:0;}
+.aigdfjq{width:7.5rem;}.aigdfjq:not(:last-of-type){margin-right:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .aigdfjq{width:100%;}:where(body.fds-breakpoint-md-max) .aigdfjq:not(:last-of-type){margin-bottom:var(--fds-spacing-16);}}

package/file-upload/file-list/file-list.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+import type { FormLabelProps } from "../../form/form-label/types";
+import type { FileItemProps } from "../types";
+interface Props {
+    fileItems: FileItemProps[] | undefined;
+    editableFileItems: boolean;
+    fileDescriptionMaxLength?: number | undefined;
+    descriptionRequired?: boolean | undefined;
+    descriptionLabel?: FormLabelProps | undefined;
+    sortable?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    onItemUpdate: (item: FileItemProps) => void;
+    onItemDelete: (item: FileItemProps) => void;
+    onSort?: ((reorderedFileItems: FileItemProps[]) => void) | undefined;
+}
+export interface FileListRef {
+    focus: () => void;
+}
+export declare const FileList: (props: Props & React.RefAttributes<FileListRef>) => React.ReactElement | null;
+export {};

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

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useSensors as i,useSensor as s,DndContext as o,KeyboardSensor as n,TouchSensor as l}from"../../external/@dnd-kit/core/dist/core.esm.js";import{SortableContext as d,verticalListSortingStrategy as a,arrayMove as c,sortableKeyboardCoordinates as p}from"../../external/@dnd-kit/sortable/dist/sortable.esm.js";import f from"clsx";import{forwardRef as u,useState as m,useContext as g,useRef as h,useImperativeHandle as b,useEffect as y}from"react";import{useResizeDetector as v}from"../../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as j}from"../../shared/accessibility/index.js";import{FileUploadContext as x}from"../context.js";import{MouseSensor as $}from"../custom-sensors.js";import{FileItemEdit as I}from"../file-item-edit.js";import{FileListItem as O}from"../file-list-item/file-list-item.js";import{FileUploadHelper as M}from"../helper.js";import{listWrapper as D,listWrapperReadOnly as S,editableItemsContainer as k}from"./file-list.styles.js";const w=u((function({fileItems:u=[],editableFileItems:w,fileDescriptionMaxLength:A,descriptionRequired:L,descriptionLabel:C,sortable:E,disabled:F,readOnly:N,onItemUpdate:R,onItemDelete:q,onSort:B},W){const[z,G]=m({}),{setActiveId:K}=g(x),[T,U]=m(""),H=h({});b(W,(()=>({focus:()=>{var e;null===(e=P.current)||void 0===e||e.focus()}})));const{width:J=0,ref:P}=v(),Q=h({}),V=i(s($,{activationConstraint:{distance:8}}),s(l,{activationConstraint:{delay:150,tolerance:5}}),s(n,{coordinateGetter:p})),X=e=>{delete Q.current[e]};y((()=>{const e=ne(u);((e,r)=>{const t=Object.keys(e),i=Object.keys(r);if(t.length!==i.length)return!1;for(const t of i)if(e[t]!==r[t])return!1;return!0})(z,e)||G(e)}),[u,w,N]),y((()=>{var e;if(!u||0===u.length)return void U("");const r=Date.now(),t=[];for(const i of u){const s=H.current[i.id];if(i.errorMessage)"error"!==(null==s?void 0:s.status)&&(t.push("string"==typeof i.errorMessage?`Error uploading ${i.name}: ${i.errorMessage}`:`Error uploading ${i.name}`),H.current[i.id]={progress:null!==(e=i.progress)&&void 0!==e?e:1,timestamp:r,status:"error"});else if(void 0!==i.progress)if(i.progress>=1)"complete"!==(null==s?void 0:s.status)&&(t.push(`${i.name} upload is complete`),H.current[i.id]={progress:1,timestamp:r,status:"complete"});else if("number"==typeof i.progress&&i.progress<1){(!s||"in-progress"!==s.status)&&(t.push(`Starting upload of ${i.name}`),H.current[i.id]={progress:i.progress,timestamp:r,status:"in-progress"})}}t.length>0&&U(t.join(", "))}),[u]);const Y=e=>r=>{le(e.id,"display"),X(e.id);const t=Object.assign(Object.assign({},e),{description:r});R(t)},Z=e=>r=>{Q.current[e.id]=r},_=e=>()=>{e.description&&0!==e.description.length?le(e.id,"display"):q(e),X(e.id)},ee=e=>()=>{le(e.id,"edit")},re=e=>()=>{q(e),P.current&&P.current.focus()},te=e=>{if(B&&u){const{active:r,over:t}=e;if(t&&r.id!==t.id){const e=u.findIndex((e=>e.id===r.id)),i=u.findIndex((e=>e.id===t.id)),s=c(u,e,i);B(s)}}K(void 0)},ie=e=>{const{active:r}=e;K(r.id)},se=e=>w&&M.isSupportedImageType(e.type),oe=e=>!e.errorMessage&&!N&&!("number"==typeof e.progress&&e.progress<1)&&se(e)&&!e.description,ne=e=>{if(!e||0===e.length)return{};const r={};for(const t of e)t.errorMessage?r[t.id]="error":z[t.id]?r[t.id]=z[t.id]:r[t.id]=oe(t)?"edit":"display";return r},le=(e,r)=>{G((t=>Object.assign(Object.assign({},t),{[e]:r})))},de=()=>u&&u.length>1&&E&&Object.values(z).every((e=>"display"===e)),ae=()=>{if(0===u.length)return"No files uploaded";const e=u.filter((e=>!(null==e?void 0:e.errorMessage)&&(1===e.progress||void 0===e.progress))).length,r=u.filter((e=>"number"==typeof e.progress&&e.progress<1)).length,t=u.filter((e=>e.errorMessage)).length;if(0===e&&0===r&&0===t)return"File list";const i=[e>0?`${e} completed files`:"",r>0?`${r} file in progress`:"",t>0?`${t} ${t>1?"files":"file"} with error`:""].filter(Boolean);return`${N?"Read-only file list":"File list"}. ${i.join(", ")}`},ce=()=>{const r=((e,r)=>{if(!e||0===e.length)return[];const t=[];for(const i of e)if("edit"===r[i.id]){const e=t[t.length-1];Array.isArray(e)?e.push(i):t.push([i])}else t.push(i);return t})(u,z);return 0===r.length?null:r.map(((r,t)=>Array.isArray(r)?((r,t)=>{const i=r.map((r=>{const t=Object.assign({},r);return void 0!==Q.current[r.id]&&(t.description=Q.current[r.id]),e(I,{fileItem:t,wrapperWidth:J,fileDescriptionMaxLength:A,descriptionRequired:L,descriptionLabel:C,onSave:Y(r),onCancel:_(r),onBlur:Z(r)},r.id)}));return e("li",{className:k,children:e("ul",{children:i})},`editable-${t}`)})(r,t):e(O,{fileItem:r,editable:se(r),wrapperWidth:J,sortable:de(),disabled:F,readOnly:N,descriptionLabel:C,onDelete:re(r),onEditClick:ee(r)},r.id)))},pe=()=>r(t,{children:[e(j,{"aria-live":"polite","aria-atomic":"true",children:T}),e("ul",{tabIndex:-1,className:f(D,N&&S),ref:P,"aria-label":ae(),children:ce()})]});return F||N||!de()?pe():e(o,{sensors:V,onDragEnd:te,onDragStart:ie,children:e(d,{items:u,strategy:a,children:pe()})})}));export{w as FileList};
+//# sourceMappingURL=file-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-list.js","sources":["../../../src/file-upload/file-list/file-list.tsx"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } from \"@dnd-kit/core\";\nimport {\n    DndContext,\n    KeyboardSensor,\n    TouchSensor,\n    useSensor,\n    useSensors,\n} from \"@dnd-kit/core\";\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport type { FormLabelProps } from \"../../form/form-label/types\";\nimport { VisuallyHidden } from \"../../shared/accessibility\";\nimport { FileUploadContext } from \"../context\";\nimport { MouseSensor } from \"../custom-sensors\";\nimport { FileItemEdit } from \"../file-item-edit\";\nimport { FileListItem } from \"../file-list-item\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { FileItemProps } from \"../types\";\nimport * as styles from \"./file-list.styles\";\n\n// =============================================================================\n// INTERFACES\n// =============================================================================\ntype RenderMode = \"edit\" | \"display\" | \"error\";\n\ntype FileItemRenderModes = Record<string, RenderMode>;\ntype FileEditedDescriptions = Record<string, string>;\n\ntype RenderItem = FileItemProps | FileItemProps[];\n\ninterface Props {\n    fileItems: FileItemProps[] | undefined;\n    editableFileItems: boolean;\n    fileDescriptionMaxLength?: number | undefined;\n    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    sortable?: boolean | undefined;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    onItemUpdate: (item: FileItemProps) => void;\n    onItemDelete: (item: FileItemProps) => void;\n    onSort?: ((reorderedFileItems: FileItemProps[]) => void) | undefined;\n}\n\ntype AnnouncementProgress = Record<\n    string,\n    {\n        progress: number;\n        timestamp: number;\n        status: \"in-progress\" | \"complete\" | \"error\";\n    }\n>;\n\nexport interface FileListRef {\n    focus: () => void;\n}\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\n\nfunction Component(\n    {\n        fileItems = [],\n        editableFileItems,\n        fileDescriptionMaxLength,\n        descriptionRequired,\n        descriptionLabel,\n        sortable,\n        disabled,\n        readOnly,\n        onItemUpdate,\n        onItemDelete,\n        onSort,\n    }: Props,\n    ref: React.Ref<FileListRef>\n) {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [renderModes, setRenderModes] = useState<FileItemRenderModes>({});\n    const { setActiveId } = useContext(FileUploadContext);\n\n    // Progress announcement state (for aria-live) - announces start and completion only\n    const [progressAnnouncement, setProgressAnnouncement] = useState(\"\");\n    const lastAnnouncedRef = useRef<AnnouncementProgress>({});\n\n    useImperativeHandle(ref, () => ({\n        focus: () => {\n            wrapperRef.current?.focus();\n        },\n    }));\n    const { width: wrapperWidth = 0, ref: wrapperRef } = useResizeDetector();\n\n    // Keep track of edited description without re-rendering\n    const descriptionsValueRef = useRef<FileEditedDescriptions>({});\n\n    /**\n     * As the default drag sensors interfere with click events\n     * on the file items, we'll need to configure the sensor to\n     * only activate the drag if the mouse moves a certain distance\n     */\n    const sensors = useSensors(\n        useSensor(MouseSensor, {\n            activationConstraint: {\n                distance: 8, // mouse drag of 8px then activate the drag event\n            },\n        }),\n        useSensor(TouchSensor, {\n            activationConstraint: {\n                delay: 150,\n                tolerance: 5,\n            },\n        }),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    // =========================================================================\n    // REF METHODS\n    // =========================================================================\n    const removeDescription = (itemId: string) => {\n        delete descriptionsValueRef.current[itemId];\n    };\n\n    const shallowCompareRenderModes = (\n        prev: FileItemRenderModes,\n        next: FileItemRenderModes\n    ) => {\n        const prevKeys = Object.keys(prev);\n        const nextKeys = Object.keys(next);\n        if (prevKeys.length !== nextKeys.length) {\n            return false;\n        }\n        for (const k of nextKeys) {\n            if (prev[k] !== next[k]) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const nextModes = getItemsRenderMode(fileItems);\n        const prevModes = renderModes;\n        // We perform shallowCompare to avoid infinite re-render loop\n        if (shallowCompareRenderModes(prevModes, nextModes)) {\n            return;\n        }\n        setRenderModes(nextModes);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [fileItems, editableFileItems, readOnly]);\n\n    // Progress announcements only at start and completion\n    useEffect(() => {\n        if (!fileItems || fileItems.length === 0) {\n            setProgressAnnouncement(\"\");\n            return;\n        }\n        const now = Date.now();\n        const messages: string[] = [];\n\n        for (const item of fileItems) {\n            const fileStatus = lastAnnouncedRef.current[item.id];\n\n            if (item.errorMessage) {\n                if (fileStatus?.status !== \"error\") {\n                    messages.push(\n                        typeof item.errorMessage === \"string\"\n                            ? `Error uploading ${item.name}: ${item.errorMessage}`\n                            : `Error uploading ${item.name}`\n                    );\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress ?? 1,\n                        timestamp: now,\n                        status: \"error\",\n                    };\n                }\n                continue;\n            }\n\n            if (item.progress === undefined) {\n                continue;\n            }\n\n            if (item.progress >= 1) {\n                if (fileStatus?.status !== \"complete\") {\n                    messages.push(`${item.name} upload is complete`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: 1,\n                        timestamp: now,\n                        status: \"complete\",\n                    };\n                }\n                continue;\n            }\n\n            // In progress - only announce start, not progress updates\n            if (typeof item.progress === \"number\" && item.progress < 1) {\n                // Only announce when starting upload (no previous status or status was not in-progress)\n                const shouldAnnounce =\n                    !fileStatus || fileStatus.status !== \"in-progress\";\n\n                if (shouldAnnounce) {\n                    messages.push(`Starting upload of ${item.name}`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress,\n                        timestamp: now,\n                        status: \"in-progress\",\n                    };\n                }\n            }\n        }\n\n        if (messages.length > 0) {\n            // Update aria-live region once with aggregated message\n            setProgressAnnouncement(messages.join(\", \"));\n        }\n    }, [fileItems]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSaveEdit = (item: FileItemProps) => (description: string) => {\n        updateRenderModes(item.id, \"display\");\n        removeDescription(item.id);\n\n        const updatedItem = { ...item, description };\n        onItemUpdate(updatedItem);\n    };\n\n    const handleBlurEdit = (item: FileItemProps) => (value: string) => {\n        descriptionsValueRef.current[item.id] = value;\n    };\n\n    const handleCancel = (item: FileItemProps) => () => {\n        if (!item.description || item.description.length === 0) {\n            // New addition\n            onItemDelete(item);\n        } else {\n            updateRenderModes(item.id, \"display\");\n        }\n        removeDescription(item.id);\n    };\n\n    const handleInitiateEdit = (item: FileItemProps) => () => {\n        updateRenderModes(item.id, \"edit\");\n    };\n\n    const handleDelete = (item: FileItemProps) => () => {\n        onItemDelete(item);\n        if (wrapperRef.current) {\n            wrapperRef.current.focus();\n        }\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        if (onSort && fileItems) {\n            const { active, over } = event;\n\n            if (over && active.id !== over.id) {\n                const oldIndex = fileItems.findIndex(\n                    (item) => item.id === active.id\n                );\n                const newIndex = fileItems.findIndex(\n                    (item) => item.id === over.id\n                );\n\n                const updatedFileItems = arrayMove(\n                    fileItems,\n                    oldIndex,\n                    newIndex\n                );\n\n                onSort(updatedFileItems);\n            }\n        }\n\n        setActiveId(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setActiveId(active.id as string);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const checkEditable = (item: FileItemProps) => {\n        return (\n            editableFileItems &&\n            FileUploadHelper.isSupportedImageType(item.type)\n        );\n    };\n\n    const shouldRenderEditMode = (item: FileItemProps) => {\n        return (\n            !item.errorMessage &&\n            !readOnly &&\n            !(typeof item.progress === \"number\" && item.progress < 1) &&\n            checkEditable(item) &&\n            !item.description\n        );\n    };\n\n    const getItemsRenderMode = (\n        fileItems: FileItemProps[] | undefined\n    ): FileItemRenderModes => {\n        if (!fileItems || fileItems.length === 0) return {};\n\n        const newRenderModes: FileItemRenderModes = {};\n\n        for (const item of fileItems) {\n            if (item.errorMessage) {\n                newRenderModes[item.id] = \"error\";\n            } else if (!renderModes[item.id]) {\n                newRenderModes[item.id] = shouldRenderEditMode(item)\n                    ? \"edit\"\n                    : \"display\";\n            } else {\n                newRenderModes[item.id] = renderModes[item.id];\n            }\n        }\n\n        return newRenderModes;\n    };\n\n    const updateRenderModes = (itemId: string, mode: RenderMode) => {\n        setRenderModes((prevRenderModes) => {\n            return {\n                ...prevRenderModes,\n                [itemId]: mode,\n            };\n        });\n    };\n\n    /**\n     * Due to a UI requirement, we will render the items\n     * with edit modes as a group\n     */\n    const getArrangedItems = (\n        fileItems: FileItemProps[] | undefined,\n        renderModes: FileItemRenderModes\n    ) => {\n        if (!fileItems || fileItems.length === 0) return [];\n\n        const arrangedItems: RenderItem[] = [];\n\n        for (const fileItem of fileItems) {\n            if (renderModes[fileItem.id] === \"edit\") {\n                const previousElement = arrangedItems[arrangedItems.length - 1];\n                if (Array.isArray(previousElement)) {\n                    previousElement.push(fileItem);\n                } else {\n                    arrangedItems.push([fileItem]);\n                }\n            } else {\n                arrangedItems.push(fileItem);\n            }\n        }\n\n        return arrangedItems;\n    };\n\n    const areAllItemsInDisplayViews = () => {\n        return Object.values(renderModes).every((mode) => mode === \"display\");\n    };\n\n    const shouldEnableSort = () => {\n        return (\n            fileItems &&\n            fileItems.length > 1 &&\n            sortable &&\n            areAllItemsInDisplayViews()\n        );\n    };\n\n    /**\n     * If there are no files, return \"No files uploaded\".\n     * If readOnly is true, return \"Read-only file list\".\n     * If there are files, return a summary of the file statuses.\n     * For example, \"File list. 2 completed files, 1 file in progress, 1 file with error\".\n     *\n     * @returns aria label\n     */\n    const getWrapperAriaLabel = () => {\n        if (fileItems.length === 0) {\n            return \"No files uploaded\";\n        }\n        const completedCount = fileItems.filter(\n            (item) =>\n                !item?.errorMessage &&\n                (item.progress === 1 || item.progress === undefined)\n        ).length;\n        const inProgressCount = fileItems.filter(\n            (item) => typeof item.progress === \"number\" && item.progress < 1\n        ).length;\n        const errorCount = fileItems.filter((item) => item.errorMessage).length;\n        if (completedCount === 0 && inProgressCount === 0 && errorCount === 0) {\n            return `File list`;\n        }\n        const completedText =\n            completedCount > 0 ? `${completedCount} completed files` : \"\";\n        const inProgressText =\n            inProgressCount > 0 ? `${inProgressCount} file in progress` : \"\";\n        const errorText =\n            errorCount > 0\n                ? `${errorCount} ${\n                      errorCount > 1 ? \"files\" : \"file\"\n                  } with error`\n                : \"\";\n        const parts = [completedText, inProgressText, errorText].filter(\n            Boolean\n        );\n        const prefix = readOnly ? \"Read-only file list\" : \"File list\";\n        return `${prefix}. ${parts.join(\", \")}`;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderItemsInEditMode = (\n        fileItems: FileItemProps[],\n        keyToUse: number\n    ) => {\n        const itemsToRender = fileItems.map((item) => {\n            const updatedFileItem = { ...item };\n            if (descriptionsValueRef.current[item.id] !== undefined) {\n                updatedFileItem.description =\n                    descriptionsValueRef.current[item.id];\n            }\n\n            return (\n                <FileItemEdit\n                    key={item.id}\n                    fileItem={updatedFileItem}\n                    wrapperWidth={wrapperWidth}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    descriptionRequired={descriptionRequired}\n                    descriptionLabel={descriptionLabel}\n                    onSave={handleSaveEdit(item)}\n                    onCancel={handleCancel(item)}\n                    onBlur={handleBlurEdit(item)}\n                />\n            );\n        });\n\n        return (\n            <li\n                key={`editable-${keyToUse}`}\n                className={styles.editableItemsContainer}\n            >\n                <ul>{itemsToRender}</ul>\n            </li>\n        );\n    };\n\n    const renderItems = () => {\n        const arrangedItems = getArrangedItems(fileItems, renderModes);\n\n        if (arrangedItems.length === 0) return null;\n\n        return arrangedItems.map((item, index) => {\n            if (Array.isArray(item)) {\n                return renderItemsInEditMode(item, index);\n            } else {\n                return (\n                    <FileListItem\n                        key={item.id}\n                        fileItem={item}\n                        editable={checkEditable(item)}\n                        wrapperWidth={wrapperWidth}\n                        sortable={shouldEnableSort()}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        descriptionLabel={descriptionLabel}\n                        onDelete={handleDelete(item)}\n                        onEditClick={handleInitiateEdit(item)}\n                    />\n                );\n            }\n        });\n    };\n\n    /**\n     * Renders the progress status of each file upload.\n     * In progress: 25% complete for uploading filename.pdf\n     * Complete: filename.pdf upload is complete\n     * Error: Error uploading filename.pdf: error message\n     *\n     * @returns A visually hidden element announcing the progress status.\n     */\n    const renderProgressStatus = () => (\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n            {progressAnnouncement}\n        </VisuallyHidden>\n    );\n\n    const renderItemsWithWrapper = () => {\n        return (\n            <>\n                {renderProgressStatus()}\n                <ul\n                    tabIndex={-1}\n                    className={clsx(\n                        styles.listWrapper,\n                        readOnly && styles.listWrapperReadOnly\n                    )}\n                    ref={wrapperRef}\n                    aria-label={getWrapperAriaLabel()}\n                >\n                    {renderItems()}\n                </ul>\n            </>\n        );\n    };\n\n    if (disabled || readOnly || !shouldEnableSort()) {\n        return renderItemsWithWrapper();\n    } else {\n        return (\n            <DndContext\n                sensors={sensors}\n                onDragEnd={handleDragEnd}\n                onDragStart={handleDragStart}\n            >\n                <SortableContext\n                    items={fileItems}\n                    strategy={verticalListSortingStrategy}\n                >\n                    {renderItemsWithWrapper()}\n                </SortableContext>\n            </DndContext>\n        );\n    }\n}\n\nexport const FileList = forwardRef<FileListRef, Props>(Component);\n"],"names":["FileList","forwardRef","fileItems","editableFileItems","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","sortable","disabled","readOnly","onItemUpdate","onItemDelete","onSort","ref","renderModes","setRenderModes","useState","setActiveId","useContext","FileUploadContext","progressAnnouncement","setProgressAnnouncement","lastAnnouncedRef","useRef","useImperativeHandle","focus","_a","wrapperRef","current","width","wrapperWidth","useResizeDetector","descriptionsValueRef","sensors","useSensors","useSensor","MouseSensor","activationConstraint","distance","TouchSensor","delay","tolerance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","removeDescription","itemId","useEffect","nextModes","getItemsRenderMode","prev","next","prevKeys","Object","keys","nextKeys","length","k","shallowCompareRenderModes","now","Date","messages","item","fileStatus","id","errorMessage","status","push","name","progress","timestamp","undefined","join","handleSaveEdit","description","updateRenderModes","updatedItem","assign","handleBlurEdit","value","handleCancel","handleInitiateEdit","handleDelete","handleDragEnd","event","active","over","oldIndex","findIndex","newIndex","updatedFileItems","arrayMove","handleDragStart","checkEditable","FileUploadHelper","isSupportedImageType","type","shouldRenderEditMode","newRenderModes","mode","prevRenderModes","shouldEnableSort","values","every","getWrapperAriaLabel","completedCount","filter","inProgressCount","errorCount","parts","Boolean","renderItems","arrangedItems","fileItem","previousElement","Array","isArray","getArrangedItems","map","index","keyToUse","itemsToRender","updatedFileItem","_jsx","FileItemEdit","onSave","onCancel","onBlur","className","styles.editableItemsContainer","children","renderItemsInEditMode","FileListItem","editable","onDelete","onEditClick","renderItemsWithWrapper","_jsxs","_Fragment","VisuallyHidden","tabIndex","clsx","styles.listWrapper","styles.listWrapperReadOnly","DndContext","onDragEnd","onDragStart","SortableContext","items","strategy","verticalListSortingStrategy"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export declare const listWrapper: import("@linaria/core").LinariaClassName;
+export declare const listWrapperReadOnly: import("@linaria/core").LinariaClassName;
+export declare const editableItemsContainer: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./file-list.styles_1w7so98.css";const l="l14goqmf",s="l1spcgo1",o="e1y5148f";export{o as editableItemsContainer,l as listWrapper,s as listWrapperReadOnly};
+//# sourceMappingURL=file-list.styles.js.map

package/file-upload/file-list/file-list.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-list.styles.js","sources":["../../../src/file-upload/file-list/file-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../../theme\";\n\nexport const listWrapper = css`\n    list-style-type: none;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const listWrapperReadOnly = css`\n    margin-bottom: 0;\n`;\n\nexport const editableItemsContainer = css`\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":["listWrapper","listWrapperReadOnly","editableItemsContainer"],"mappings":"4EAIO,MAAMA,EAAW,WAKXC,EAAmB,WAInBC,EAAsB"}

package/file-upload/file-list/file-list.styles_1w7so98.css

@@ -0,0 +1,3 @@
+@layer fds{.l14goqmf{list-style-type:none;margin-bottom:var(--fds-spacing-32);}
+.l1spcgo1{margin-bottom:0;}
+.e1y5148f:not(:last-child){margin-bottom:var(--fds-spacing-16);}.e1y5148f ul{list-style-type:none;}}

package/file-upload/file-list/index.d.ts

@@ -0,0 +1 @@
+export * from "./file-list";

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{Spacing as o,Radius as a,Border as d,Colour as n,MediaQuery as c,Font as m}from"../../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\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../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: ${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: ${Radius[\"sm\"]};\n    border: ${(props) =>\n        props.$isPdf\n            ? \"none\"\n            : `${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 ReplaceButton = styled.button`\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":["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","Spacing","ImageWithFallback","Radius","props","Border","Colour","MediaQuery","MaxWidth","md","button","Font"],"mappings":"4UAaO,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,EAAQ;;;;;EAOfT,EAAYO,EAAOG,EAAwC;;;;qBAInDC,EAAW;cACjBC,GACPA,EAAMT,OACA,OACA,GAAGU,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;;;MAGpEC,EAAWC,SAASC;;;;EAMbb,EAAgBG,EAAOW,MAAM;;;kBAGxBT,EAAQ;;;;;MAKpBU,EAAK;aACEL,EAAO;;;iBAGHA,EAAO;;"}
+{"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_1y4si19.css";const t="c1hu6y7h",i="t18h6q7y",e="t1w2z01d",l="r5e5ep6";export{t as container,l as replaceButton,i as thumbnail,e 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_1y4si19.css

@@ -0,0 +1,4 @@
+@layer fds{.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-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-primary);}.r5e5ep6:hover{color:var(--fds-colour-text-hover);}}

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

@@ -1,5 +1,5 @@
-import { FormLabelProps } from "../../form/types";
-import { FileListItemProps } from "./types";
+import type { FormLabelProps } from "../../form/form-label/types";
+import type { FileListItemProps } from "./types";
 interface Props extends FileListItemProps {
     readOnly?: boolean | undefined;
     descriptionLabel?: FormLabelProps | undefined;

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