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

package/cjs/e-signature/e-signature-canvas.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("fabric"),n=require("react"),i=require("styled-components"),u=require("../theme/index.js"),c=require("./e-signature.styles.js");const a=n.forwardRef(((a,s)=>{const{baseImageDataURL:o}=a,l=n.useRef(null),d=n.useRef(null),v=n.useRef(),f=n.useRef(),h=n.useContext(i.ThemeContext);n.useImperativeHandle(s,(()=>({clear:()=>{var e;return null===(e=v.current)||void 0===e?void 0:e.clear()},export:()=>w()})));const w=()=>{if(!v.current)return null;if(!v.current.getObjects().length)return null;return v.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},g=n.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(yield new Promise((e=>setTimeout(e))),l.current&&d.current&&v.current){const e=l.current.clientWidth,r=l.current.clientHeight;d.current.width=e,d.current.height=r,v.current.setDimensions({width:e,height:r}),v.current.forEachObject((e=>{v.current&&v.current.centerObject(e)}))}}))),[]);return n.useEffect((()=>{if(l.current&&d.current)return v.current=new t.Canvas("eSignatureCanvas"),v.current.selection=!1,v.current.isDrawingMode=!0,f.current=new t.PencilBrush(v.current),f.current.color=u.Colour.text({theme:h}),f.current.width=3,v.current.freeDrawingBrush=f.current,()=>{var e;null===(e=v.current)||void 0===e||e.dispose()}}),[]),n.useEffect((()=>{var e;if(window)return window.addEventListener("resize",g),null===(e=screen.orientation)||void 0===e||e.addEventListener("change",g),g(),()=>{var e;window.removeEventListener("resize",g),null===(e=screen.orientation)||void 0===e||e.removeEventListener("change",g)}}),[g]),n.useEffect((()=>{e.__awaiter(void 0,void 0,void 0,(function*(){if(o){const e=yield t.FabricImage.fromURL(o);v.current&&(v.current.clear(),e.selectable=!1,e.hoverCursor="default",v.current.width&&e.width&&e.scale(v.current.width/e.width),v.current.add(e),v.current.centerObject(e))}}))}),[o]),r.jsx(c.SignatureCanvasContainer,{ref:l,children:r.jsx(c.SignatureCanvas,{id:"eSignatureCanvas",ref:d})})}));exports.ESignatureCanvas=a;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("fabric"),n=require("react"),i=require("styled-components"),u=require("../theme/index.js"),c=require("./e-signature.styles.js");const a=n.forwardRef(((a,s)=>{const{baseImageDataURL:o}=a,l=n.useRef(null),d=n.useRef(null),v=n.useRef(),f=n.useRef(),h=n.useContext(i.ThemeContext);n.useImperativeHandle(s,(()=>({clear:()=>{var e;return null===(e=v.current)||void 0===e?void 0:e.clear()},export:()=>g()})));const g=()=>{if(!v.current)return null;if(!v.current.getObjects().length)return null;return v.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},w=n.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(yield new Promise((e=>setTimeout(e))),l.current&&d.current&&v.current){const e=l.current.clientWidth,r=l.current.clientHeight;d.current.width=e,d.current.height=r,v.current.setDimensions({width:e,height:r}),v.current.forEachObject((e=>{v.current&&v.current.centerObject(e)}))}}))),[]);return n.useEffect((()=>{if(l.current&&d.current)return v.current=new t.Canvas("eSignatureCanvas"),v.current.selection=!1,v.current.isDrawingMode=!0,f.current=new t.PencilBrush(v.current),f.current.color=h?u.Colour.text({theme:Object.assign(Object.assign({},h),{colourMode:"light"})}):"#000000",f.current.width=3,v.current.freeDrawingBrush=f.current,()=>{var e;null===(e=v.current)||void 0===e||e.dispose()}}),[]),n.useEffect((()=>{var e;if(window)return window.addEventListener("resize",w),null===(e=screen.orientation)||void 0===e||e.addEventListener("change",w),w(),()=>{var e;window.removeEventListener("resize",w),null===(e=screen.orientation)||void 0===e||e.removeEventListener("change",w)}}),[w]),n.useEffect((()=>{e.__awaiter(void 0,void 0,void 0,(function*(){if(o){const e=yield t.FabricImage.fromURL(o);v.current&&(v.current.clear(),e.selectable=!1,e.hoverCursor="default",v.current.width&&e.width&&e.scale(v.current.width/e.width),v.current.add(e),v.current.centerObject(e))}}))}),[o]),r.jsx(c.SignatureCanvasContainer,{ref:l,children:r.jsx(c.SignatureCanvas,{id:"eSignatureCanvas",ref:d})})}));exports.ESignatureCanvas=a;
 //# sourceMappingURL=e-signature-canvas.js.map

package/cjs/e-signature/e-signature-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"e-signature-canvas.js","sources":["../../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport {\n    Ref,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport {\n    SignatureCanvas,\n    SignatureCanvasContainer,\n} from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n    baseImageDataURL?: string | null | undefined;\n    forwardedRef?: Ref<ESignatureCanvasRef> | undefined;\n}\n\nexport interface ESignatureCanvasRef {\n    clear: VoidFunction;\n    export: () => string | null;\n}\n\nconst Component = (\n    props: ESignatureCanvasProps,\n    ref: Ref<ESignatureCanvasRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { baseImageDataURL } = props;\n    const containerRef = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const fabricCanvas = useRef<FabricCanvas>();\n    const pencilBrush = useRef<PencilBrush>();\n    const theme = useContext(ThemeContext);\n\n    // =============================================================================\n    // HOOKS\n    // =============================================================================\n    useImperativeHandle(ref, () => ({\n        clear: () => fabricCanvas.current?.clear(),\n        export: () => exportAsImage(),\n    }));\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const exportAsImage = () => {\n        if (!fabricCanvas.current) return null;\n        if (!fabricCanvas.current.getObjects().length) return null;\n        const dataURL = fabricCanvas.current.toDataURL({\n            multiplier: 1,\n            format: \"png\",\n            quality: 1,\n            enableRetinaScaling: true,\n        });\n        return dataURL;\n    };\n\n    const handleResize = useCallback(async () => {\n        // slight delay for fabricjs to update on orientation change\n        await new Promise((resolve) => setTimeout(resolve));\n        if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n            const canvasWidth = containerRef.current.clientWidth;\n            const canvasHeight = containerRef.current.clientHeight;\n            canvasRef.current.width = canvasWidth;\n            canvasRef.current.height = canvasHeight;\n            fabricCanvas.current.setDimensions({\n                width: canvasWidth,\n                height: canvasHeight,\n            });\n\n            fabricCanvas.current.forEachObject((obj) => {\n                if (fabricCanvas.current) {\n                    fabricCanvas.current.centerObject(obj);\n                }\n            });\n        }\n    }, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    // initialise fabric and brushes\n    useEffect(() => {\n        if (containerRef.current && canvasRef.current) {\n            fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n            fabricCanvas.current.selection = false;\n            fabricCanvas.current.isDrawingMode = true;\n\n            pencilBrush.current = new PencilBrush(fabricCanvas.current);\n            pencilBrush.current.color = Colour[\"text\"]({ theme });\n            pencilBrush.current.width = 3;\n\n            fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n            return () => {\n                fabricCanvas.current?.dispose();\n            };\n        }\n    }, []);\n\n    // resize\n    useEffect(() => {\n        if (window) {\n            window.addEventListener(\"resize\", handleResize);\n            screen.orientation?.addEventListener(\"change\", handleResize);\n            handleResize();\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n                screen.orientation?.removeEventListener(\"change\", handleResize);\n            };\n        }\n    }, [handleResize]);\n\n    // update base image\n    useEffect(() => {\n        const updateImage = async () => {\n            if (baseImageDataURL) {\n                const img = await FabricImage.fromURL(baseImageDataURL);\n                if (fabricCanvas.current) {\n                    fabricCanvas.current.clear();\n                    img.selectable = false;\n                    img.hoverCursor = \"default\";\n\n                    if (fabricCanvas.current.width && img.width) {\n                        img.scale(fabricCanvas.current.width / img.width);\n                    }\n                    fabricCanvas.current.add(img);\n                    fabricCanvas.current.centerObject(img);\n                }\n            }\n        };\n\n        updateImage();\n    }, [baseImageDataURL]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <SignatureCanvasContainer ref={containerRef}>\n            <SignatureCanvas id=\"eSignatureCanvas\" ref={canvasRef} />\n        </SignatureCanvasContainer>\n    );\n};\n\nexport const ESignatureCanvas = forwardRef<\n    ESignatureCanvasRef,\n    ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","theme","useContext","ThemeContext","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","Colour","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","SignatureCanvasContainer","SignatureCanvas","id"],"mappings":"6NA2BA,MA6HaA,EAAmBC,EAAAA,YA7Hd,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAAA,OAAuB,MACtCC,EAAYD,EAAAA,OAA0B,MACtCE,EAAeF,EAAAA,SACfG,EAAcH,EAAAA,SACdI,EAAQC,EAAAA,WAAWC,gBAKzBC,EAAAA,oBAAoBV,GAAK,KAAA,CACrBW,MAAO,KAAK,IAAAC,EAAC,OAAoB,QAApBA,EAAAP,EAAaQ,eAAO,IAAAD,OAAA,EAAAA,EAAED,OAAO,EAC1CG,OAAQ,IAAMC,QAMlB,MAAMA,EAAgB,KAClB,IAAKV,EAAaQ,QAAS,OAAO,KAClC,IAAKR,EAAaQ,QAAQG,aAAaC,OAAQ,OAAO,KAOtD,OANgBZ,EAAaQ,QAAQK,UAAU,CAC3CC,WAAY,EACZC,OAAQ,MACRC,QAAS,EACTC,qBAAqB,GAEX,EAGZC,EAAeC,EAAAA,aAAY,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAGxC,SADM,IAAIC,SAASC,GAAYC,WAAWD,KACtCzB,EAAaW,SAAWT,EAAUS,SAAWR,EAAaQ,QAAS,CACnE,MAAMgB,EAAc3B,EAAaW,QAAQiB,YACnCC,EAAe7B,EAAaW,QAAQmB,aAC1C5B,EAAUS,QAAQoB,MAAQJ,EAC1BzB,EAAUS,QAAQqB,OAASH,EAC3B1B,EAAaQ,QAAQsB,cAAc,CAC/BF,MAAOJ,EACPK,OAAQH,IAGZ1B,EAAaQ,QAAQuB,eAAeC,IAC5BhC,EAAaQ,SACbR,EAAaQ,QAAQyB,aAAaD,EACtC,GAER,CACJ,KAAG,IA8DH,OAxDAE,EAAAA,WAAU,KACN,GAAIrC,EAAaW,SAAWT,EAAUS,QAWlC,OAVAR,EAAaQ,QAAU,IAAI2B,EAAAA,OAAa,oBACxCnC,EAAaQ,QAAQ4B,WAAY,EACjCpC,EAAaQ,QAAQ6B,eAAgB,EAErCpC,EAAYO,QAAU,IAAI8B,cAAYtC,EAAaQ,SACnDP,EAAYO,QAAQ+B,MAAQC,EAAAA,OAAa,KAAE,CAAEtC,UAC7CD,EAAYO,QAAQoB,MAAQ,EAE5B5B,EAAaQ,QAAQiC,iBAAmBxC,EAAYO,QAE7C,WACiB,QAApBD,EAAAP,EAAaQ,eAAO,IAAAD,GAAAA,EAAEmC,SAAS,CAEvC,GACD,IAGHR,EAAAA,WAAU,WACN,GAAIS,OAIA,OAHAA,OAAOC,iBAAiB,SAAU1B,GAChB,QAAlBX,EAAAsC,OAAOC,mBAAW,IAAAvC,GAAAA,EAAEqC,iBAAiB,SAAU1B,GAC/CA,IACO,WACHyB,OAAOI,oBAAoB,SAAU7B,GACnB,QAAlBX,EAAAsC,OAAOC,mBAAW,IAAAvC,GAAAA,EAAEwC,oBAAoB,SAAU7B,EAAa,CAEvE,GACD,CAACA,IAGJgB,EAAAA,WAAU,KACyBd,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC3B,GAAIxB,EAAkB,CAClB,MAAMoD,QAAYC,cAAYC,QAAQtD,GAClCI,EAAaQ,UACbR,EAAaQ,QAAQF,QACrB0C,EAAIG,YAAa,EACjBH,EAAII,YAAc,UAEdpD,EAAaQ,QAAQoB,OAASoB,EAAIpB,OAClCoB,EAAIK,MAAMrD,EAAaQ,QAAQoB,MAAQoB,EAAIpB,OAE/C5B,EAAaQ,QAAQ8C,IAAIN,GACzBhD,EAAaQ,QAAQyB,aAAae,GAE1C,CACJ,GAEa,GACd,CAACpD,IAMA2D,EAAAA,IAACC,EAAAA,yBAAwB,CAAC7D,IAAKE,WAC3B0D,EAAAA,IAACE,EAAAA,iBAAgBC,GAAG,mBAAmB/D,IAAKI,KACrB"}
+{"version":3,"file":"e-signature-canvas.js","sources":["../../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport {\n    Ref,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport {\n    SignatureCanvas,\n    SignatureCanvasContainer,\n} from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n    baseImageDataURL?: string | null | undefined;\n    forwardedRef?: Ref<ESignatureCanvasRef> | undefined;\n}\n\nexport interface ESignatureCanvasRef {\n    clear: VoidFunction;\n    export: () => string | null;\n}\n\nconst Component = (\n    props: ESignatureCanvasProps,\n    ref: Ref<ESignatureCanvasRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { baseImageDataURL } = props;\n    const containerRef = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const fabricCanvas = useRef<FabricCanvas>();\n    const pencilBrush = useRef<PencilBrush>();\n    const theme = useContext(ThemeContext);\n\n    // =============================================================================\n    // HOOKS\n    // =============================================================================\n    useImperativeHandle(ref, () => ({\n        clear: () => fabricCanvas.current?.clear(),\n        export: () => exportAsImage(),\n    }));\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const exportAsImage = () => {\n        if (!fabricCanvas.current) return null;\n        if (!fabricCanvas.current.getObjects().length) return null;\n        const dataURL = fabricCanvas.current.toDataURL({\n            multiplier: 1,\n            format: \"png\",\n            quality: 1,\n            enableRetinaScaling: true,\n        });\n        return dataURL;\n    };\n\n    const handleResize = useCallback(async () => {\n        // slight delay for fabricjs to update on orientation change\n        await new Promise((resolve) => setTimeout(resolve));\n        if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n            const canvasWidth = containerRef.current.clientWidth;\n            const canvasHeight = containerRef.current.clientHeight;\n            canvasRef.current.width = canvasWidth;\n            canvasRef.current.height = canvasHeight;\n            fabricCanvas.current.setDimensions({\n                width: canvasWidth,\n                height: canvasHeight,\n            });\n\n            fabricCanvas.current.forEachObject((obj) => {\n                if (fabricCanvas.current) {\n                    fabricCanvas.current.centerObject(obj);\n                }\n            });\n        }\n    }, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    // initialise fabric and brushes\n    useEffect(() => {\n        if (containerRef.current && canvasRef.current) {\n            fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n            fabricCanvas.current.selection = false;\n            fabricCanvas.current.isDrawingMode = true;\n\n            pencilBrush.current = new PencilBrush(fabricCanvas.current);\n            if (theme) {\n                pencilBrush.current.color = Colour[\"text\"]({\n                    theme: {\n                        ...theme,\n                        colourMode: \"light\",\n                    },\n                });\n            } else {\n                pencilBrush.current.color = \"#000000\";\n            }\n            pencilBrush.current.width = 3;\n\n            fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n            return () => {\n                fabricCanvas.current?.dispose();\n            };\n        }\n    }, []);\n\n    // resize\n    useEffect(() => {\n        if (window) {\n            window.addEventListener(\"resize\", handleResize);\n            screen.orientation?.addEventListener(\"change\", handleResize);\n            handleResize();\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n                screen.orientation?.removeEventListener(\"change\", handleResize);\n            };\n        }\n    }, [handleResize]);\n\n    // update base image\n    useEffect(() => {\n        const updateImage = async () => {\n            if (baseImageDataURL) {\n                const img = await FabricImage.fromURL(baseImageDataURL);\n                if (fabricCanvas.current) {\n                    fabricCanvas.current.clear();\n                    img.selectable = false;\n                    img.hoverCursor = \"default\";\n\n                    if (fabricCanvas.current.width && img.width) {\n                        img.scale(fabricCanvas.current.width / img.width);\n                    }\n                    fabricCanvas.current.add(img);\n                    fabricCanvas.current.centerObject(img);\n                }\n            }\n        };\n\n        updateImage();\n    }, [baseImageDataURL]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <SignatureCanvasContainer ref={containerRef}>\n            <SignatureCanvas id=\"eSignatureCanvas\" ref={canvasRef} />\n        </SignatureCanvasContainer>\n    );\n};\n\nexport const ESignatureCanvas = forwardRef<\n    ESignatureCanvasRef,\n    ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","theme","useContext","ThemeContext","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","Colour","colourMode","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","SignatureCanvasContainer","SignatureCanvas","id"],"mappings":"6NA2BA,MAsIaA,EAAmBC,EAAAA,YAtId,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAAA,OAAuB,MACtCC,EAAYD,EAAAA,OAA0B,MACtCE,EAAeF,EAAAA,SACfG,EAAcH,EAAAA,SACdI,EAAQC,EAAAA,WAAWC,gBAKzBC,EAAAA,oBAAoBV,GAAK,KAAA,CACrBW,MAAO,KAAK,IAAAC,EAAC,OAAoB,QAApBA,EAAAP,EAAaQ,eAAO,IAAAD,OAAA,EAAAA,EAAED,OAAO,EAC1CG,OAAQ,IAAMC,QAMlB,MAAMA,EAAgB,KAClB,IAAKV,EAAaQ,QAAS,OAAO,KAClC,IAAKR,EAAaQ,QAAQG,aAAaC,OAAQ,OAAO,KAOtD,OANgBZ,EAAaQ,QAAQK,UAAU,CAC3CC,WAAY,EACZC,OAAQ,MACRC,QAAS,EACTC,qBAAqB,GAEX,EAGZC,EAAeC,EAAAA,aAAY,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAGxC,SADM,IAAIC,SAASC,GAAYC,WAAWD,KACtCzB,EAAaW,SAAWT,EAAUS,SAAWR,EAAaQ,QAAS,CACnE,MAAMgB,EAAc3B,EAAaW,QAAQiB,YACnCC,EAAe7B,EAAaW,QAAQmB,aAC1C5B,EAAUS,QAAQoB,MAAQJ,EAC1BzB,EAAUS,QAAQqB,OAASH,EAC3B1B,EAAaQ,QAAQsB,cAAc,CAC/BF,MAAOJ,EACPK,OAAQH,IAGZ1B,EAAaQ,QAAQuB,eAAeC,IAC5BhC,EAAaQ,SACbR,EAAaQ,QAAQyB,aAAaD,EACtC,GAER,CACJ,KAAG,IAuEH,OAjEAE,EAAAA,WAAU,KACN,GAAIrC,EAAaW,SAAWT,EAAUS,QAoBlC,OAnBAR,EAAaQ,QAAU,IAAI2B,EAAAA,OAAa,oBACxCnC,EAAaQ,QAAQ4B,WAAY,EACjCpC,EAAaQ,QAAQ6B,eAAgB,EAErCpC,EAAYO,QAAU,IAAI8B,cAAYtC,EAAaQ,SAE/CP,EAAYO,QAAQ+B,MADpBrC,EAC4BsC,EAAAA,OAAa,KAAE,CACvCtC,qCACOA,GAAK,CACRuC,WAAY,YAIQ,UAEhCxC,EAAYO,QAAQoB,MAAQ,EAE5B5B,EAAaQ,QAAQkC,iBAAmBzC,EAAYO,QAE7C,WACiB,QAApBD,EAAAP,EAAaQ,eAAO,IAAAD,GAAAA,EAAEoC,SAAS,CAEvC,GACD,IAGHT,EAAAA,WAAU,WACN,GAAIU,OAIA,OAHAA,OAAOC,iBAAiB,SAAU3B,GAChB,QAAlBX,EAAAuC,OAAOC,mBAAW,IAAAxC,GAAAA,EAAEsC,iBAAiB,SAAU3B,GAC/CA,IACO,WACH0B,OAAOI,oBAAoB,SAAU9B,GACnB,QAAlBX,EAAAuC,OAAOC,mBAAW,IAAAxC,GAAAA,EAAEyC,oBAAoB,SAAU9B,EAAa,CAEvE,GACD,CAACA,IAGJgB,EAAAA,WAAU,KACyBd,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC3B,GAAIxB,EAAkB,CAClB,MAAMqD,QAAYC,cAAYC,QAAQvD,GAClCI,EAAaQ,UACbR,EAAaQ,QAAQF,QACrB2C,EAAIG,YAAa,EACjBH,EAAII,YAAc,UAEdrD,EAAaQ,QAAQoB,OAASqB,EAAIrB,OAClCqB,EAAIK,MAAMtD,EAAaQ,QAAQoB,MAAQqB,EAAIrB,OAE/C5B,EAAaQ,QAAQ+C,IAAIN,GACzBjD,EAAaQ,QAAQyB,aAAagB,GAE1C,CACJ,GAEa,GACd,CAACrD,IAMA4D,EAAAA,IAACC,EAAAA,yBAAwB,CAAC9D,IAAKE,WAC3B2D,EAAAA,IAACE,EAAAA,iBAAgBC,GAAG,mBAAmBhE,IAAKI,KACrB"}

package/cjs/e-signature/e-signature.styles.js

@@ -1,8 +1,8 @@
 "use strict";var e=require("styled-components"),t=require("../button/button.js"),i=require("../icon-button/icon-button.js"),a=require("../modal/index.js"),o=require("../theme/index.js"),r=require("../typography/typography.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(e);const s=e.css`
     ${e=>`\n        ${o.MediaQuery.MaxWidth.sm(e)},\n        (orientation: landscape) and (max-height: ${o.Breakpoint["sm-max"](e)}px)\n    `}
-`,g=e.css`
+`,l=e.css`
     ${e=>`\n        @media (orientation: landscape) and (max-height: ${o.Breakpoint["sm-max"](e)}px)\n    `}
-`,l=d.default.div`
+`,g=d.default.div`
     position: relative;
     display: flex;
     align-items: center;
@@ -34,6 +34,8 @@
     object-position: center;
     width: calc(100% - (3rem + ${o.Spacing["spacing-16"]}) * 2);
     height: 100%;
+
+    ${e=>{var t;return"dark"===(null===(t=e.theme)||void 0===t?void 0:t.colourMode)&&"filter: invert(1);"}}
 `,h=d.default.div`
     background: ${o.Colour["bg-primary-subtlest"]};
     border: ${o.Border["width-010"]} ${o.Border.solid} ${o.Colour.border};
@@ -53,7 +55,7 @@
         height: 100%;
         overflow-y: auto;
     }
-`,b=d.default.div`
+`,m=d.default.div`
     width: 100%;
     margin: auto;
     padding: ${o.Spacing["layout-xxl"]} ${o.Spacing["layout-sm"]};
@@ -63,7 +65,7 @@
         width: 100%;
         height: 100%;
     }
-`,m=d.default(a.Modal.Box)`
+`,b=d.default(a.Modal.Box)`
     width: 100%;
     height: 29rem;
     max-width: 672px;
@@ -103,10 +105,10 @@
         flex: 1;
     }
 
-    ${g} {
+    ${l} {
         background: ${o.Colour["bg-strong"]};
     }
-`,w=d.default.div`
+`,v=d.default.div`
     position: relative;
     width: 100%;
     height: 100%;
@@ -120,11 +122,11 @@
         width: 100%;
         height: auto;
     }
-    ${g} {
+    ${l} {
         width: auto;
         height: 100%;
     }
-`,y=d.default.div`
+`,w=d.default.div`
     position: absolute;
     left: 50%;
     top: calc(75% - 1px);
@@ -139,7 +141,7 @@
         max-width: 300px;
         left: 50%;
     }
-`,v=d.default.div`
+`,y=d.default.div`
     display: flex;
     justify-content: space-between;
     margin-top: ${o.Spacing["spacing-16"]};
@@ -151,23 +153,25 @@
         gap: ${o.Spacing["spacing-16"]};
     }
 
-    ${g} {
+    ${l} {
         flex-direction: row;
         margin: ${o.Spacing["spacing-16"]} ${o.Spacing["spacing-20"]};
     }
-`,B=d.default(t.Button.Default)`
+`,M=d.default(t.Button.Default)`
     width: 8.5rem;
     ${o.MediaQuery.MaxWidth.sm} {
         width: 100%;
     }
-    ${g} {
+    ${l} {
         height: 2.5rem;
     }
-`,C=d.default.div`
+`,B=d.default.div`
     width: 100%;
     height: 100%;
     overflow: hidden;
-`,M=d.default.canvas`
+`,C=d.default.canvas`
     cursor: crosshair;
-`;exports.AddSignatureButton=c,exports.ESignatureContainer=S,exports.ESignatureDrawable=w,exports.EditSignatureButton=p,exports.GrowContainer=b,exports.Instructions=$,exports.ModalActionButton=B,exports.ModalBox=m,exports.ModalButtons=v,exports.ModalTitle=f,exports.ProgressBox=h,exports.ScrollableModal=x,exports.SignatureArea=l,exports.SignatureCanvas=M,exports.SignatureCanvasContainer=C,exports.SignatureLine=y,exports.SignaturePreviewImage=u;
+
+    ${e=>{var t;return"dark"===(null===(t=e.theme)||void 0===t?void 0:t.colourMode)&&"filter: invert(1);"}}
+`;exports.AddSignatureButton=c,exports.ESignatureContainer=S,exports.ESignatureDrawable=v,exports.EditSignatureButton=p,exports.GrowContainer=m,exports.Instructions=$,exports.ModalActionButton=M,exports.ModalBox=b,exports.ModalButtons=y,exports.ModalTitle=f,exports.ProgressBox=h,exports.ScrollableModal=x,exports.SignatureArea=g,exports.SignatureCanvas=C,exports.SignatureCanvasContainer=B,exports.SignatureLine=w,exports.SignaturePreviewImage=u;
 //# sourceMappingURL=e-signature.styles.js.map

package/cjs/e-signature/e-signature.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"e-signature.styles.js","sources":["../../../src/e-signature/e-signature.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../button\";\nimport { IconButton } from \"../icon-button\";\nimport { Modal } from \"../modal\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface SignatureAreaProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// CUSTOM MEDIA QUERIES\n// =============================================================================\n// for mobileL and below in both orientations\nconst mobileMediaQuery = css`\n    ${(props) => `\n        ${MediaQuery.MaxWidth.sm(props)},\n        (orientation: landscape) and (max-height: ${Breakpoint[\"sm-max\"](\n    props\n)}px)\n    `}\n`;\nconst mobileLandscapeMediaQuery = css`\n    ${(props) => `\n        @media (orientation: landscape) and (max-height: ${Breakpoint[\"sm-max\"](\n    props\n)}px)\n    `}\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN FIELD\n// -----------------------------------------------------------------------------\n\nexport const SignatureArea = styled.div<SignatureAreaProps>`\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ${(props) =>\n        css`\n            ${Border.Util[\"dashed-default\"]({\n            radius: Radius[\"sm\"],\n            thickness: Border[\"width-040\"],\n            colour: props.$disabled\n                ? Colour[\"border-disabled\"]\n                : Colour[\"border\"],\n        })}\n\n            background-color: ${props.$disabled\n                ? Colour[\"bg-disabled\"]\n                : Colour[\"bg\"]};\n        `}\n    height: 14.125rem;\n`;\n\nexport const AddSignatureButton = styled(Button.Default)`\n    width: fit-content;\n    margin: 0 ${Spacing[\"spacing-20\"]};\n\n    &:disabled {\n        border-color: ${Colour[\"border-strong\"]};\n    }\n`;\n\nexport const EditSignatureButton = styled(IconButton)`\n    position: absolute;\n    top: ${Spacing[\"spacing-16\"]};\n    right: ${Spacing[\"spacing-16\"]};\n\n    &:disabled {\n        border-color: ${Colour[\"border-strong\"]};\n    }\n`;\n\nexport const SignaturePreviewImage = styled.img`\n    display: block;\n    object-fit: contain;\n    object-position: center;\n    width: calc(100% - (3rem + ${Spacing[\"spacing-16\"]}) * 2);\n    height: 100%;\n`;\n\nexport const ProgressBox = styled.div`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    margin: 0 ${Spacing[\"spacing-20\"]};\n    padding: ${Spacing[\"spacing-16\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-16\"]};\n    flex: 1;\n    flex-direction: column;\n    align-items: center;\n`;\n\nexport const Instructions = styled(Typography.BodySM)`\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// SIGNATURE MODAL\n// -----------------------------------------------------------------------------\n\nexport const ScrollableModal = styled(Modal)`\n    /* increase specificity as the styles are overwritten */\n    && {\n        height: 100%;\n        overflow-y: auto;\n    }\n`;\n\nexport const GrowContainer = styled.div`\n    width: 100%;\n    margin: auto;\n    padding: ${Spacing[\"layout-xxl\"]} ${Spacing[\"layout-sm\"]};\n\n    ${mobileMediaQuery} {\n        padding: 0;\n        width: 100%;\n        height: 100%;\n    }\n`;\n\nexport const ModalBox = styled(Modal.Box)`\n    width: 100%;\n    height: 29rem;\n    max-width: 672px;\n    max-height: none;\n    margin: 0 auto;\n    padding: ${Spacing[\"spacing-16\"]};\n\n    ${mobileMediaQuery} {\n        display: flex;\n        flex-direction: column;\n        max-width: none;\n        height: 100%;\n        border-radius: 0;\n        padding: 0;\n\n        --close-button-top-inset: ${Spacing[\"spacing-8\"]};\n        --close-button-right-inset: ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const ModalTitle = styled.h2`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text\"]};\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    text-align: center;\n\n    ${mobileMediaQuery} {\n        ${Font[\"body-md-semibold\"]}\n        margin: ${Spacing[\"spacing-12\"]} 0;\n    }\n`;\n\nexport const ESignatureContainer = styled.div`\n    width: 100%;\n    height: 20rem;\n    border-radius: ${Radius[\"lg\"]};\n    overflow: hidden;\n\n    ${mobileMediaQuery} {\n        border-radius: 0;\n        flex: 1;\n    }\n\n    ${mobileLandscapeMediaQuery} {\n        background: ${Colour[\"bg-strong\"]};\n    }\n`;\n\nexport const ESignatureDrawable = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    background: ${Colour[\"bg-stronger\"]};\n    margin: auto;\n\n    ${mobileMediaQuery} {\n        aspect-ratio: 4/3;\n    }\n    ${MediaQuery.MaxWidth.sm} {\n        width: 100%;\n        height: auto;\n    }\n    ${mobileLandscapeMediaQuery} {\n        width: auto;\n        height: 100%;\n    }\n`;\n\nexport const SignatureLine = styled.div`\n    position: absolute;\n    left: 50%;\n    top: calc(75% - 1px);\n    width: 300px;\n    height: 2px;\n    transform: translateX(-50%);\n    background-color: ${Colour[\"border-strong\"]};\n    pointer-events: none;\n\n    ${mobileMediaQuery} {\n        width: calc(100% - ${Spacing[\"spacing-40\"]});\n        max-width: 300px;\n        left: 50%;\n    }\n`;\n\nexport const ModalButtons = styled.div`\n    display: flex;\n    justify-content: space-between;\n    margin-top: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column-reverse;\n        margin: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]}\n            ${Spacing[\"spacing-48\"]};\n        gap: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${mobileLandscapeMediaQuery} {\n        flex-direction: row;\n        margin: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const ModalActionButton = styled(Button.Default)`\n    width: 8.5rem;\n    ${MediaQuery.MaxWidth.sm} {\n        width: 100%;\n    }\n    ${mobileLandscapeMediaQuery} {\n        height: 2.5rem;\n    }\n`;\n\nexport const SignatureCanvasContainer = styled.div`\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const SignatureCanvas = styled.canvas`\n    cursor: crosshair;\n`;\n"],"names":["mobileMediaQuery","css","props","MediaQuery","MaxWidth","sm","Breakpoint","mobileLandscapeMediaQuery","SignatureArea","styled","div","Border","Util","radius","Radius","thickness","colour","$disabled","Colour","AddSignatureButton","Button","Default","Spacing","EditSignatureButton","IconButton","SignaturePreviewImage","img","ProgressBox","Instructions","Typography","BodySM","ScrollableModal","Modal","GrowContainer","ModalBox","Box","ModalTitle","h2","Font","ESignatureContainer","ESignatureDrawable","SignatureLine","ModalButtons","ModalActionButton","SignatureCanvasContainer","SignatureCanvas","canvas"],"mappings":"sTA0BA,MAAMA,EAAmBC,EAAAA,GAAG;MACrBC,GAAU,aACPC,aAAWC,SAASC,GAAGH,0DACmBI,aAAW,UAC3DJ;EAIEK,EAA4BN,EAAAA,GAAG;MAC9BC,GAAU,8DAC0CI,aAAW,UAClEJ;EAaSM,EAAgBC,EAAAA,QAAOC,GAAuB;;;;;MAKpDR,GACCD,KAAG;cACGU,EAAAA,OAAOC,KAAK,kBAAkB,CAChCC,OAAQC,EAAAA,OAAW,GACnBC,UAAWJ,EAAAA,OAAO,aAClBK,OAAQd,EAAMe,UACRC,EAAAA,OAAO,mBACPA,EAAAA,OAAe;;gCAGDhB,EAAMe,UACpBC,EAAAA,OAAO,eACPA,EAAAA,OAAW;;;EAKhBC,EAAqBV,EAAAA,QAAOW,SAAOC,QAAQ;;gBAExCC,EAAAA,QAAQ;;;wBAGAJ,EAAAA,OAAO;;EAIlBK,EAAsBd,EAAAA,QAAOe,EAAAA,WAAW;;WAE1CF,EAAAA,QAAQ;aACNA,EAAAA,QAAQ;;;wBAGGJ,EAAAA,OAAO;;EAIlBO,EAAwBhB,EAAAA,QAAOiB,GAAG;;;;iCAIdJ,EAAAA,QAAQ;;EAI5BK,EAAclB,EAAAA,QAAOC,GAAG;kBACnBQ,EAAAA,OAAO;cACXP,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKO,SAAe;qBAClDJ,EAAAA,OAAW;gBAChBQ,EAAAA,QAAQ;eACTA,EAAAA,QAAQ;;WAEZA,EAAAA,QAAQ;;;;EAMNM,EAAenB,EAAAA,QAAOoB,aAAWC,OAAO;kBACnCR,EAAAA,QAAQ;EAObS,EAAkBtB,EAAAA,QAAOuB,EAAAA,MAAM;;;;;;EAQ/BC,EAAgBxB,EAAAA,QAAOC,GAAG;;;eAGxBY,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;MAE1CtB;;;;;EAOOkC,EAAWzB,EAAAA,QAAOuB,QAAMG,IAAI;;;;;;eAM1Bb,EAAAA,QAAQ;;MAEjBtB;;;;;;;;oCAQ8BsB,EAAAA,QAAQ;sCACNA,EAAAA,QAAQ;;EAIjCc,EAAa3B,EAAAA,QAAO4B,EAAE;MAC7BC,EAAAA,KAAK;aACEpB,EAAAA,OAAa;qBACLI,EAAAA,QAAQ;;;MAGvBtB;UACIsC,EAAAA,KAAK;kBACGhB,EAAAA,QAAQ;;EAIbiB,EAAsB9B,EAAAA,QAAOC,GAAG;;;qBAGxBI,EAAAA,OAAW;;;MAG1Bd;;;;;MAKAO;sBACgBW,EAAAA,OAAO;;EAIhBsB,EAAqB/B,EAAAA,QAAOC,GAAG;;;;kBAI1BQ,EAAAA,OAAO;;;MAGnBlB;;;MAGAG,EAAAA,WAAWC,SAASC;;;;MAIpBE;;;;EAMOkC,EAAgBhC,EAAAA,QAAOC,GAAG;;;;;;;wBAOfQ,EAAAA,OAAO;;;MAGzBlB;6BACuBsB,EAAAA,QAAQ;;;;EAMxBoB,EAAejC,EAAAA,QAAOC,GAAG;;;kBAGpBY,EAAAA,QAAQ;;MAEpBnB,EAAAA,WAAWC,SAASC;;kBAERiB,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;cACrCA,EAAAA,QAAQ;eACPA,EAAAA,QAAQ;;;MAGjBf;;kBAEYe,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;EAItCqB,EAAoBlC,EAAAA,QAAOW,SAAOC,QAAQ;;MAEjDlB,EAAAA,WAAWC,SAASC;;;MAGpBE;;;EAKOqC,EAA2BnC,EAAAA,QAAOC,GAAG;;;;EAMrCmC,EAAkBpC,EAAAA,QAAOqC,MAAM;;"}
+{"version":3,"file":"e-signature.styles.js","sources":["../../../src/e-signature/e-signature.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../button\";\nimport { IconButton } from \"../icon-button\";\nimport { Modal } from \"../modal\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface SignatureAreaProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// CUSTOM MEDIA QUERIES\n// =============================================================================\n// for mobileL and below in both orientations\nconst mobileMediaQuery = css`\n    ${(props) => `\n        ${MediaQuery.MaxWidth.sm(props)},\n        (orientation: landscape) and (max-height: ${Breakpoint[\"sm-max\"](\n            props\n        )}px)\n    `}\n`;\nconst mobileLandscapeMediaQuery = css`\n    ${(props) => `\n        @media (orientation: landscape) and (max-height: ${Breakpoint[\"sm-max\"](\n            props\n        )}px)\n    `}\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN FIELD\n// -----------------------------------------------------------------------------\n\nexport const SignatureArea = styled.div<SignatureAreaProps>`\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ${(props) =>\n        css`\n            ${Border.Util[\"dashed-default\"]({\n                radius: Radius[\"sm\"],\n                thickness: Border[\"width-040\"],\n                colour: props.$disabled\n                    ? Colour[\"border-disabled\"]\n                    : Colour[\"border\"],\n            })}\n\n            background-color: ${props.$disabled\n                ? Colour[\"bg-disabled\"]\n                : Colour[\"bg\"]};\n        `}\n    height: 14.125rem;\n`;\n\nexport const AddSignatureButton = styled(Button.Default)`\n    width: fit-content;\n    margin: 0 ${Spacing[\"spacing-20\"]};\n\n    &:disabled {\n        border-color: ${Colour[\"border-strong\"]};\n    }\n`;\n\nexport const EditSignatureButton = styled(IconButton)`\n    position: absolute;\n    top: ${Spacing[\"spacing-16\"]};\n    right: ${Spacing[\"spacing-16\"]};\n\n    &:disabled {\n        border-color: ${Colour[\"border-strong\"]};\n    }\n`;\n\nexport const SignaturePreviewImage = styled.img`\n    display: block;\n    object-fit: contain;\n    object-position: center;\n    width: calc(100% - (3rem + ${Spacing[\"spacing-16\"]}) * 2);\n    height: 100%;\n\n    ${(props) => props.theme?.colourMode === \"dark\" && `filter: invert(1);`}\n`;\n\nexport const ProgressBox = styled.div`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    margin: 0 ${Spacing[\"spacing-20\"]};\n    padding: ${Spacing[\"spacing-16\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-16\"]};\n    flex: 1;\n    flex-direction: column;\n    align-items: center;\n`;\n\nexport const Instructions = styled(Typography.BodySM)`\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// SIGNATURE MODAL\n// -----------------------------------------------------------------------------\n\nexport const ScrollableModal = styled(Modal)`\n    /* increase specificity as the styles are overwritten */\n    && {\n        height: 100%;\n        overflow-y: auto;\n    }\n`;\n\nexport const GrowContainer = styled.div`\n    width: 100%;\n    margin: auto;\n    padding: ${Spacing[\"layout-xxl\"]} ${Spacing[\"layout-sm\"]};\n\n    ${mobileMediaQuery} {\n        padding: 0;\n        width: 100%;\n        height: 100%;\n    }\n`;\n\nexport const ModalBox = styled(Modal.Box)`\n    width: 100%;\n    height: 29rem;\n    max-width: 672px;\n    max-height: none;\n    margin: 0 auto;\n    padding: ${Spacing[\"spacing-16\"]};\n\n    ${mobileMediaQuery} {\n        display: flex;\n        flex-direction: column;\n        max-width: none;\n        height: 100%;\n        border-radius: 0;\n        padding: 0;\n\n        --close-button-top-inset: ${Spacing[\"spacing-8\"]};\n        --close-button-right-inset: ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const ModalTitle = styled.h2`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text\"]};\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    text-align: center;\n\n    ${mobileMediaQuery} {\n        ${Font[\"body-md-semibold\"]}\n        margin: ${Spacing[\"spacing-12\"]} 0;\n    }\n`;\n\nexport const ESignatureContainer = styled.div`\n    width: 100%;\n    height: 20rem;\n    border-radius: ${Radius[\"lg\"]};\n    overflow: hidden;\n\n    ${mobileMediaQuery} {\n        border-radius: 0;\n        flex: 1;\n    }\n\n    ${mobileLandscapeMediaQuery} {\n        background: ${Colour[\"bg-strong\"]};\n    }\n`;\n\nexport const ESignatureDrawable = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    background: ${Colour[\"bg-stronger\"]};\n    margin: auto;\n\n    ${mobileMediaQuery} {\n        aspect-ratio: 4/3;\n    }\n    ${MediaQuery.MaxWidth.sm} {\n        width: 100%;\n        height: auto;\n    }\n    ${mobileLandscapeMediaQuery} {\n        width: auto;\n        height: 100%;\n    }\n`;\n\nexport const SignatureLine = styled.div`\n    position: absolute;\n    left: 50%;\n    top: calc(75% - 1px);\n    width: 300px;\n    height: 2px;\n    transform: translateX(-50%);\n    background-color: ${Colour[\"border-strong\"]};\n    pointer-events: none;\n\n    ${mobileMediaQuery} {\n        width: calc(100% - ${Spacing[\"spacing-40\"]});\n        max-width: 300px;\n        left: 50%;\n    }\n`;\n\nexport const ModalButtons = styled.div`\n    display: flex;\n    justify-content: space-between;\n    margin-top: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column-reverse;\n        margin: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]}\n            ${Spacing[\"spacing-48\"]};\n        gap: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${mobileLandscapeMediaQuery} {\n        flex-direction: row;\n        margin: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const ModalActionButton = styled(Button.Default)`\n    width: 8.5rem;\n    ${MediaQuery.MaxWidth.sm} {\n        width: 100%;\n    }\n    ${mobileLandscapeMediaQuery} {\n        height: 2.5rem;\n    }\n`;\n\nexport const SignatureCanvasContainer = styled.div`\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const SignatureCanvas = styled.canvas`\n    cursor: crosshair;\n\n    ${(props) => props.theme?.colourMode === \"dark\" && `filter: invert(1);`}\n`;\n"],"names":["mobileMediaQuery","css","props","MediaQuery","MaxWidth","sm","Breakpoint","mobileLandscapeMediaQuery","SignatureArea","styled","div","Border","Util","radius","Radius","thickness","colour","$disabled","Colour","AddSignatureButton","Button","Default","Spacing","EditSignatureButton","IconButton","SignaturePreviewImage","img","_a","theme","colourMode","ProgressBox","Instructions","Typography","BodySM","ScrollableModal","Modal","GrowContainer","ModalBox","Box","ModalTitle","h2","Font","ESignatureContainer","ESignatureDrawable","SignatureLine","ModalButtons","ModalActionButton","SignatureCanvasContainer","SignatureCanvas","canvas"],"mappings":"sTA0BA,MAAMA,EAAmBC,EAAAA,GAAG;MACrBC,GAAU,aACPC,aAAWC,SAASC,GAAGH,0DACmBI,aAAW,UACnDJ;EAINK,EAA4BN,EAAAA,GAAG;MAC9BC,GAAU,8DAC0CI,aAAW,UAC1DJ;EAaCM,EAAgBC,EAAAA,QAAOC,GAAuB;;;;;MAKpDR,GACCD,KAAG;cACGU,EAAAA,OAAOC,KAAK,kBAAkB,CAC5BC,OAAQC,EAAAA,OAAW,GACnBC,UAAWJ,EAAAA,OAAO,aAClBK,OAAQd,EAAMe,UACRC,EAAAA,OAAO,mBACPA,EAAAA,OAAe;;gCAGLhB,EAAMe,UACpBC,EAAAA,OAAO,eACPA,EAAAA,OAAW;;;EAKhBC,EAAqBV,EAAAA,QAAOW,SAAOC,QAAQ;;gBAExCC,EAAAA,QAAQ;;;wBAGAJ,EAAAA,OAAO;;EAIlBK,EAAsBd,EAAAA,QAAOe,EAAAA,WAAW;;WAE1CF,EAAAA,QAAQ;aACNA,EAAAA,QAAQ;;;wBAGGJ,EAAAA,OAAO;;EAIlBO,EAAwBhB,EAAAA,QAAOiB,GAAG;;;;iCAIdJ,EAAAA,QAAQ;;;MAGlCpB,IAAS,IAAAyB,EAAC,MAA4B,kBAA5BA,EAAAzB,EAAM0B,4BAAOC,aAAyB,oBAAoB;EAG9DC,EAAcrB,EAAAA,QAAOC,GAAG;kBACnBQ,EAAAA,OAAO;cACXP,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKO,SAAe;qBAClDJ,EAAAA,OAAW;gBAChBQ,EAAAA,QAAQ;eACTA,EAAAA,QAAQ;;WAEZA,EAAAA,QAAQ;;;;EAMNS,EAAetB,EAAAA,QAAOuB,aAAWC,OAAO;kBACnCX,EAAAA,QAAQ;EAObY,EAAkBzB,EAAAA,QAAO0B,EAAAA,MAAM;;;;;;EAQ/BC,EAAgB3B,EAAAA,QAAOC,GAAG;;;eAGxBY,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;MAE1CtB;;;;;EAOOqC,EAAW5B,EAAAA,QAAO0B,QAAMG,IAAI;;;;;;eAM1BhB,EAAAA,QAAQ;;MAEjBtB;;;;;;;;oCAQ8BsB,EAAAA,QAAQ;sCACNA,EAAAA,QAAQ;;EAIjCiB,EAAa9B,EAAAA,QAAO+B,EAAE;MAC7BC,EAAAA,KAAK;aACEvB,EAAAA,OAAa;qBACLI,EAAAA,QAAQ;;;MAGvBtB;UACIyC,EAAAA,KAAK;kBACGnB,EAAAA,QAAQ;;EAIboB,EAAsBjC,EAAAA,QAAOC,GAAG;;;qBAGxBI,EAAAA,OAAW;;;MAG1Bd;;;;;MAKAO;sBACgBW,EAAAA,OAAO;;EAIhByB,EAAqBlC,EAAAA,QAAOC,GAAG;;;;kBAI1BQ,EAAAA,OAAO;;;MAGnBlB;;;MAGAG,EAAAA,WAAWC,SAASC;;;;MAIpBE;;;;EAMOqC,EAAgBnC,EAAAA,QAAOC,GAAG;;;;;;;wBAOfQ,EAAAA,OAAO;;;MAGzBlB;6BACuBsB,EAAAA,QAAQ;;;;EAMxBuB,EAAepC,EAAAA,QAAOC,GAAG;;;kBAGpBY,EAAAA,QAAQ;;MAEpBnB,EAAAA,WAAWC,SAASC;;kBAERiB,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;cACrCA,EAAAA,QAAQ;eACPA,EAAAA,QAAQ;;;MAGjBf;;kBAEYe,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;EAItCwB,EAAoBrC,EAAAA,QAAOW,SAAOC,QAAQ;;MAEjDlB,EAAAA,WAAWC,SAASC;;;MAGpBE;;;EAKOwC,EAA2BtC,EAAAA,QAAOC,GAAG;;;;EAMrCsC,EAAkBvC,EAAAA,QAAOwC,MAAM;;;MAGrC/C,IAAS,IAAAyB,EAAC,MAA4B,kBAA5BA,EAAAzB,EAAM0B,4BAAOC,aAAyB,oBAAoB;"}

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

@@ -111,7 +111,7 @@
     ${n.Font["body-sm-semibold"]}
     color: ${n.Colour["text-error"]};
 `,$=d.default(h)`
-    margin-top: ${n.Spacing["spacing-4"]};
+    margin-top: ${n.Spacing["spacing-8"]};
     display: flex;
     gap: ${n.Spacing["spacing-4"]};
 

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { 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\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={shouldShowThumbnail}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","fileType","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","$thumbnail","ActionButton","disabled","trim","length","onClick","styleType"],"mappings":"+dA0B4B,EACxBA,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAX,GAEGY,EAAeC,GAAoBC,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAKxCE,EAAmBC,eACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,EAAAA,WAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,EAAAA,WAAU,KACNb,EAAsBhB,EAAS8B,aAAe,GAAG,GAClD,CAAC9B,IAKJ,MAmBM+B,IACApB,GAAyBF,IAASuB,EAAAA,iBAAiBC,cAczD,OACIC,EAAAA,KAACC,EAAAA,KAAI,CAAA,cAAc,GAAG7B,iBAAiB8B,SAAA,CACnCF,EAAAA,KAACG,EAAAA,0BACIN,GACGO,EAAAA,IAACC,EAAAA,sBAAqB,CAClB5B,sBAAuBA,EACvB6B,SAAU/B,IAGlByB,EAAAA,KAACO,EAAAA,eAAc,CAAAL,SAAA,CAjBvBF,OAACQ,EAAAA,YAAW,CAACC,IAAKxB,EAAciB,SAAA,CAC5BE,EAAAA,IAACM,EAAAA,aAAY,CAACC,OAAO,oBAAYjC,IACjC0B,EAAAA,IAACQ,EAAAA,aAAY,CAAAV,SACRJ,EAAAA,iBAAiBe,sBAAsBvC,QAgBpC8B,EAAAA,IAACU,OAAKC,SAAQ,CACVN,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPmC,UAAWjD,EACXkD,SA7CEC,IAClBpC,EAAsBoC,EAAMC,OAAO/B,MAAM,EA6CzBjB,OA1CA+C,IAChB/C,EAAO+C,EAAMC,OAAO/B,MAAM,EA0CVgC,KAAM,EAAC,aACK,yBAAyB/C,IACrCgD,MAAO,CACHnB,SAAU,oBACVoB,SACI,8EAKpBtB,OAACuB,EAAAA,qBAAoB,CAAAC,WAAa3B,EAAmBK,SAAA,CACjDE,MAACqB,EAAAA,aAAY,CAAA,cACI,GAAGrD,gBAChBG,KAAK,SACLmD,SAnDyB,IADV7C,EAAmB8C,OACpBC,OAoDdC,QApEG,KACX9C,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAMuC,OACrC,EAiE+BzB,SAAA,SAIvBE,EAAAA,IAACqB,eAAY,CACTlD,KAAK,SACLuD,UAAU,0BACG,GAAG1D,kBAChByD,QAAS3D,EAAQgC,SAAA,gBAKtB"}
+{"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { 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":["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":"+dA6B4B,EACxBA,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,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAKxCE,EAAmBC,eACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,EAAAA,WAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,EAAAA,WAAU,KACNb,EAAsBlB,EAASgC,aAAe,GAAG,GAClD,CAAChC,IAKJ,MAoBMiC,IACApB,GAAyBF,IAASuB,EAAAA,iBAAiBC,cAczD,OACIC,EAAAA,KAACC,EAAAA,KAAI,CAAA,cAAc,GAAG7B,iBAAiB8B,SAAA,CACnCF,EAAAA,KAACG,EAAAA,0BACIN,GACGO,EAAAA,IAACC,EAAAA,sBAAqB,CAClB5B,sBAAuBA,EACvB6B,SAAU/B,IAGlByB,EAAAA,KAACO,EAAAA,eAAc,CAAAL,SAAA,CAjBvBF,OAACQ,EAAAA,YAAW,CAACC,IAAKxB,EAAciB,SAAA,CAC5BE,EAAAA,IAACM,EAAAA,aAAY,CAACC,OAAO,oBAAYjC,IACjC0B,EAAAA,IAACQ,EAAAA,aAAY,CAAAV,SACRJ,EAAAA,iBAAiBe,sBAAsBvC,QAgBpC8B,EAAAA,IAACU,OAAKC,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,OAACuB,EAAAA,qBAAoB,CAAAC,WAAa3B,EAAmBK,SAAA,CACjDE,MAACqB,EAAAA,aAAY,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,EAAAA,IAACqB,eAAY,CACTlD,KAAK,SACLwD,UAAU,0BACG,GAAG3D,kBAChB0D,QAAS5D,EAAQgC,SAAA,gBAKtB"}

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

@@ -1,11 +1,13 @@
 "use strict";var t=require("styled-components"),e=require("../button/button.js"),i=require("../theme/index.js"),a=require("../typography/typography.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=n(t);const r=o.default.li`
     display: flex;
     flex-direction: column;
-    padding: ${i.Spacing["spacing-32"]} 0;
-    background: transparent;
+    padding: ${i.Spacing["spacing-32"]};
+    background: ${i.Colour["bg-primary-subtlest"]};
+    border: ${i.Border["width-010"]} ${i.Border.solid} ${i.Colour.border};
+    border-radius: ${i.Radius.sm};
 
     &:not(:last-child) {
-        border-bottom: ${i.Border["width-010"]} ${i.Border.solid} ${i.Colour.border};
+        margin-bottom: ${i.Spacing["spacing-16"]};
     }
 `,d=o.default.div`
     display: flex;
@@ -16,7 +18,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-`,p=o.default.div`
+`,s=o.default.div`
     width: 100%;
     display: flex;
     justify-content: space-between;
@@ -26,7 +28,7 @@
         flex-direction: column;
         justify-content: flex-start;
     }
-`,s=o.default(a.Typography.BodyMD)`
+`,p=o.default(a.Typography.BodyMD)`
     display: flex;
     flex: 1;
     margin-right: ${i.Spacing["spacing-16"]};
@@ -35,8 +37,11 @@
         margin-right: 0;
         margin-bottom: ${i.Spacing["spacing-8"]};
     }
-`,c=o.default(a.Typography.BodyMD)``,u=o.default.div`
+`,c=o.default(a.Typography.BodyMD)`
+    color: ${i.Colour["text-subtler"]};
+`,u=o.default.div`
     display: flex;
+    justify-content: flex-end;
     ${i.MediaQuery.MaxWidth.md} {
         flex-direction: column;
     }
@@ -62,5 +67,5 @@
             margin-bottom: ${i.Spacing["spacing-16"]};
         }
     }
-`;exports.ActionButton=g,exports.ActionButtonsSection=u,exports.ContentSection=d,exports.DetailsSection=l,exports.FileNameText=s,exports.FileSizeText=c,exports.Item=r,exports.NameSection=p;
+`;exports.ActionButton=g,exports.ActionButtonsSection=u,exports.ContentSection=d,exports.DetailsSection=l,exports.FileNameText=p,exports.FileSizeText=c,exports.Item=r,exports.NameSection=s;
 //# sourceMappingURL=file-item-edit.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.styles.js","sources":["../../../src/file-upload/file-item-edit.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../button/button\";\nimport { Border, Colour, MediaQuery, 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\"]} 0;\n    background: transparent;\n\n    &:not(:last-child) {\n        border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    }\n`;\n\nexport const ContentSection = 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\nexport const ActionButtonsSection = styled.div<ActionButtonSectionStyleProps>`\n    display: flex;\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","Border","solid","Colour","border","ContentSection","div","DetailsSection","NameSection","MediaQuery","MaxWidth","md","FileNameText","Typography","BodyMD","FileSizeText","ActionButtonsSection","props","$thumbnail","css","ActionButton","Button","Small"],"mappings":"4OAeO,MAAMA,EAAOC,EAAAA,QAAOC,EAAE;;;eAGdC,EAAAA,QAAQ;;;;yBAIEC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASC,EAAAA,OAAOC;;EAI1DC,EAAiBP,EAAAA,QAAOQ,GAAG;;;qBAGnBN,EAAAA,QAAQ;;EAIhBO,EAAiBT,EAAAA,QAAOQ,GAAG;;;;EAM3BE,EAAcV,EAAAA,QAAOQ,GAAG;;;;qBAIhBN,EAAAA,QAAQ;;MAEvBS,EAAAA,WAAWC,SAASC;;;;EAMbC,EAAed,EAAAA,QAAOe,aAAWC,OAAO;;;oBAGjCd,EAAAA,QAAQ;;MAEtBS,EAAAA,WAAWC,SAASC;;yBAEDX,EAAAA,QAAQ;;EAIpBe,EAAejB,EAAAA,QAAOe,aAAWC,OAAO,GAExCE,EAAuBlB,EAAAA,QAAOQ,GAAkC;;MAEvEG,EAAAA,WAAWC,SAASC;;;;MAInBM,IACC,GAAIA,EAAMC,WACN,OAAOC,KAAG;;6BAEOnB,EAAAA,QAAQ;;;kBAGnBS,EAAAA,WAAWC,SAASC;;;aAI9B;EAIKS,EAAetB,EAAAA,QAAOuB,SAAOC,MAAM;;;wBAGxBtB,EAAAA,QAAQ;;;MAG1BS,EAAAA,WAAWC,SAASC;;;6BAGGX,EAAAA,QAAQ;;;"}
+{"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":"4OAeO,MAAMA,EAAOC,EAAAA,QAAOC,EAAE;;;eAGdC,EAAAA,QAAQ;kBACLC,EAAAA,OAAO;cACXC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASF,EAAAA,OAAOG;qBACvCC,EAAAA,OAAW;;;yBAGPL,EAAAA,QAAQ;;EAIpBM,EAAiBR,EAAAA,QAAOS,GAAG;;;qBAGnBP,EAAAA,QAAQ;;EAIhBQ,EAAiBV,EAAAA,QAAOS,GAAG;;;;EAM3BE,EAAcX,EAAAA,QAAOS,GAAG;;;;qBAIhBP,EAAAA,QAAQ;;MAEvBU,EAAAA,WAAWC,SAASC;;;;EAMbC,EAAef,EAAAA,QAAOgB,aAAWC,OAAO;;;oBAGjCf,EAAAA,QAAQ;;MAEtBU,EAAAA,WAAWC,SAASC;;yBAEDZ,EAAAA,QAAQ;;EAIpBgB,EAAelB,EAAAA,QAAOgB,aAAWC,OAAO;aACxCd,EAAAA,OAAO;EAGPgB,EAAuBnB,EAAAA,QAAOS,GAAkC;;;MAGvEG,EAAAA,WAAWC,SAASC;;;;MAInBM,IACC,GAAIA,EAAMC,WACN,OAAOC,KAAG;;6BAEOpB,EAAAA,QAAQ;;;kBAGnBU,EAAAA,WAAWC,SAASC;;;aAI9B;EAIKS,EAAevB,EAAAA,QAAOwB,SAAOC,MAAM;;;wBAGxBvB,EAAAA,QAAQ;;;MAG1BU,EAAAA,WAAWC,SAASC;;;6BAGGZ,EAAAA,QAAQ;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport { memo, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DesktopErrorMessage,\n    DragHandleIcon,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    FileSizeText,\n    IconButton,\n    Item,\n    ItemDescriptionText,\n    ItemFocusType,\n    ItemText,\n    MobileErrorMessage,\n    NameSection,\n} from \"./file-list-item.styles\";\nimport { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n    readOnly?: boolean | undefined;\n}\n\nconst Component = ({\n    fileItem,\n    editable,\n    sortable,\n    wrapperWidth,\n    disabled,\n    readOnly,\n    onDelete,\n    onEditClick,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        description,\n        progress = 1,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n    } = fileItem;\n    const [formattedName, setFormattedName] = useState<string>();\n    const { activeId } = useContext(FileUploadContext);\n\n    // Sortable mechanism\n    const { attributes, listeners, setNodeRef, transform, transition } =\n        useSortable({ id });\n    const detailSectionRef = useRef<HTMLDivElement>(null);\n    const style = {\n        transform: CSS.Translate.toString(transform),\n        transition,\n    };\n\n    const sortableProps = {\n        style,\n        ...attributes,\n        ...listeners,\n    };\n\n    // Local variables\n    const isLoading = progress < 1;\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const focusType: ItemFocusType = activeId\n        ? activeId === id\n            ? \"self\"\n            : \"others\"\n        : \"none\";\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                detailSectionRef && detailSectionRef.current\n                    ? detailSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDelete = () => {\n        onDelete();\n    };\n\n    const handleEdit = () => {\n        if (onEditClick) {\n            onEditClick();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        /**\n         * Circumvent issue of keydown action activating the sort mechanism\n         * rather than the actual action\n         */\n        if (sortable) {\n            event.stopPropagation();\n        }\n    };\n\n    const shouldDisable = () => disabled || !!activeId;\n\n    const shouldEnableSort = () => !!sortable && !readOnly;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemText weight={description ? \"semibold\" : \"regular\"}>\n                {formattedName}\n            </ItemText>\n            {description && (\n                <ItemDescriptionText>{description}</ItemDescriptionText>\n            )}\n        </>\n    );\n\n    const renderErrorState = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n                {errorMessage && (\n                    <DesktopErrorMessage weight=\"semibold\">\n                        <ErrorIcon aria-hidden />\n                        {errorMessage}\n                    </DesktopErrorMessage>\n                )}\n            </NameSection>\n            <FileSizeSection>\n                <FileSizeText>{fileSize}</FileSizeText>\n            </FileSizeSection>\n            {errorMessage && (\n                <MobileErrorMessage weight=\"semibold\">\n                    <ErrorIcon aria-hidden />\n                    {errorMessage}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailImageDataUrl: string) => (\n        <>\n            <FileListItemThumbnail\n                thumbnailImageDataUrl={thumbnailImageDataUrl}\n                fileType={fileItem.type}\n                data-testid={`${id}-thumbnail`}\n            />\n            <ExtendedNameSection>\n                <NameSection ref={detailSectionRef}>\n                    {renderNameDescription()}\n                </NameSection>\n                <FileSizeSection>\n                    <FileSizeText>{fileSize}</FileSizeText>\n                </FileSizeSection>\n            </ExtendedNameSection>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n            </NameSection>\n            <FileSizeSection $hideInMobile={isLoading}>\n                <FileSizeText>{fileSize}</FileSizeText>\n            </FileSizeSection>\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n        const shouldShowThumbnail =\n            !!thumbnailImageDataUrl ||\n            fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n        if (errorMessage) {\n            content = renderErrorState();\n        } else if (shouldShowThumbnail) {\n            content = renderWithThumbnail(thumbnailImageDataUrl || \"\");\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <ContentSection $hasThumbnail={shouldShowThumbnail}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = (\n                <IconButton\n                    data-testid={`${id}-error-delete-button`}\n                    data-no-dnd=\"true\"\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`delete ${name}, error: ${errorMessage}`}\n                    onClick={handleDelete}\n                >\n                    <BinIcon aria-hidden />\n                </IconButton>\n            );\n        } else if (isLoading) {\n            content = (\n                <ProgressBar\n                    progress={progress}\n                    data-testid={`${id}-progress-bar`}\n                />\n            );\n        } else {\n            content = (\n                <>\n                    {editable && (\n                        <IconButton\n                            key=\"edit\"\n                            data-testid={`${id}-edit-button`}\n                            data-no-dnd=\"true\"\n                            type=\"button\"\n                            styleType=\"light\"\n                            sizeType=\"small\"\n                            aria-label={`edit ${name}`}\n                            disabled={shouldDisable()}\n                            onClick={handleEdit}\n                            onKeyDown={handleKeyDown}\n                        >\n                            <PencilIcon aria-hidden />\n                        </IconButton>\n                    )}\n                    <IconButton\n                        key=\"delete\"\n                        data-testid={`${id}-delete-button`}\n                        data-no-dnd=\"true\"\n                        type=\"button\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        aria-label={`delete ${name}`}\n                        disabled={shouldDisable()}\n                        onClick={handleDelete}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <BinIcon aria-hidden />\n                    </IconButton>\n                </>\n            );\n        }\n\n        return (\n            <ActionContainer\n                $editable={editable}\n                $error={!!errorMessage}\n                $loading={isLoading}\n            >\n                {content}\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item\n            id={id}\n            ref={setNodeRef}\n            $sortable={shouldEnableSort()}\n            $disabled={shouldDisable()}\n            $focusType={focusType}\n            {...(shouldEnableSort() ? sortableProps : {})}\n        >\n            {shouldEnableSort() && (\n                <DragHandleIcon\n                    data-testid={`${id}-drag-handle`}\n                    $disabled={shouldDisable()}\n                    $active={focusType === \"self\"}\n                />\n            )}\n            <Box\n                $focused={focusType === \"self\"}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $disabled={shouldDisable()}\n                $editable={editable}\n            >\n                {renderContents()}\n                {!readOnly && renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","focusType","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_Fragment","children","_jsx","ItemText","weight","ItemDescriptionText","Item","Object","assign","ref","$sortable","$disabled","$focusType","DragHandleIcon","$active","Box","$focused","$loading","$editable","content","shouldShowThumbnail","type","PDF_MIME_TYPE","NameSection","DesktopErrorMessage","ErrorIcon","FileSizeSection","FileSizeText","MobileErrorMessage","FileListItemThumbnail","fileType","ExtendedNameSection","renderWithThumbnail","$hideInMobile","ContentSection","$hasThumbnail","renderContents","IconButton","styleType","sizeType","onClick","BinIcon","ProgressBar","onKeyDown","PencilIcon","ActionContainer","$error","renderActions"],"mappings":"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"}
+{"version":3,"file":"file-list-item.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport {\n    memo,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DescriptionFileSizeText,\n    DesktopErrorMessage,\n    DragHandleIcon,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    FileSizeText,\n    IconButton,\n    Item,\n    ItemDescriptionLabel,\n    ItemDescriptionText,\n    ItemFocusType,\n    ItemText,\n    MobileErrorMessage,\n    NameSection,\n} from \"./file-list-item.styles\";\nimport { FormLabelProps } from \"../../form/types\";\nimport { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n    readOnly?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n}\n\nconst Component = ({\n    fileItem,\n    editable,\n    sortable,\n    wrapperWidth,\n    disabled,\n    readOnly,\n    descriptionLabel,\n    onDelete,\n    onEditClick,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        description,\n        progress = 1,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n    } = fileItem;\n    const [formattedName, setFormattedName] = useState<string>();\n    const { activeId } = useContext(FileUploadContext);\n\n    // Sortable mechanism\n    const { attributes, listeners, setNodeRef, transform, transition } =\n        useSortable({ id });\n    const detailSectionRef = useRef<HTMLDivElement>(null);\n    const style = {\n        transform: CSS.Translate.toString(transform),\n        transition,\n    };\n\n    const sortableProps = {\n        style,\n        ...attributes,\n        ...listeners,\n    };\n\n    // Local variables\n    const isLoading = progress < 1;\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const hasInlineActions = !!description && !!editable;\n    const focusType: ItemFocusType = activeId\n        ? activeId === id\n            ? \"self\"\n            : \"others\"\n        : \"none\";\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                detailSectionRef && detailSectionRef.current\n                    ? detailSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDelete = () => {\n        onDelete();\n    };\n\n    const handleEdit = () => {\n        if (onEditClick) {\n            onEditClick();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        /**\n         * Circumvent issue of keydown action activating the sort mechanism\n         * rather than the actual action\n         */\n        if (sortable) {\n            event.stopPropagation();\n        }\n    };\n\n    const shouldDisable = () => disabled || !!activeId;\n\n    const shouldEnableSort = () => !!sortable && !readOnly;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemText weight={description ? \"semibold\" : \"regular\"}>\n                {formattedName}\n            </ItemText>\n            {description && (\n                <>\n                    <ItemDescriptionLabel>\n                        {descriptionLabel?.children ?? \"Photo description\"}\n                    </ItemDescriptionLabel>\n                    <ItemDescriptionText>{description}</ItemDescriptionText>\n                </>\n            )}\n        </>\n    );\n\n    const renderErrorState = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n                {errorMessage && (\n                    <DesktopErrorMessage weight=\"semibold\">\n                        <ErrorIcon aria-hidden />\n                        {errorMessage}\n                    </DesktopErrorMessage>\n                )}\n            </NameSection>\n            <FileSizeSection>\n                <FileSizeText>{fileSize}</FileSizeText>\n            </FileSizeSection>\n            {errorMessage && (\n                <MobileErrorMessage weight=\"semibold\">\n                    <ErrorIcon aria-hidden />\n                    {errorMessage}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderInlineActions = () => (\n        <ActionContainer\n            $editable={editable}\n            $error={false}\n            $loading={false}\n            $hasDescription={true}\n        >\n            <IconButton\n                key=\"edit\"\n                data-testid={`${id}-edit-button`}\n                data-no-dnd=\"true\"\n                type=\"button\"\n                styleType=\"light\"\n                sizeType=\"small\"\n                aria-label={`edit ${name}`}\n                disabled={shouldDisable()}\n                onClick={handleEdit}\n                onKeyDown={handleKeyDown}\n            >\n                <PencilIcon aria-hidden />\n            </IconButton>\n            <IconButton\n                key=\"delete\"\n                data-testid={`${id}-delete-button`}\n                data-no-dnd=\"true\"\n                type=\"button\"\n                styleType=\"light\"\n                sizeType=\"small\"\n                aria-label={`delete ${name}`}\n                disabled={shouldDisable()}\n                onClick={handleDelete}\n                onKeyDown={handleKeyDown}\n            >\n                <BinIcon aria-hidden />\n            </IconButton>\n        </ActionContainer>\n    );\n\n    const renderDescriptionContent = () => (\n        <ExtendedNameSection ref={detailSectionRef}>\n            <ItemText weight=\"semibold\">{formattedName}</ItemText>\n            <ItemDescriptionLabel>\n                {descriptionLabel?.children ?? \"Photo description\"}\n            </ItemDescriptionLabel>\n            <ItemDescriptionText>{description}</ItemDescriptionText>\n            <DescriptionFileSizeText>{fileSize}</DescriptionFileSizeText>\n            {!readOnly && hasInlineActions && renderInlineActions()}\n        </ExtendedNameSection>\n    );\n\n    const renderFileContent = (thumbnailImageDataUrl?: string) => {\n        const shouldShowThumbnail =\n            !!thumbnailImageDataUrl ||\n            fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n        const thumbnail = shouldShowThumbnail ? (\n            <FileListItemThumbnail\n                thumbnailImageDataUrl={thumbnailImageDataUrl || \"\"}\n                fileType={fileItem.type}\n                data-testid={`${id}-thumbnail`}\n            />\n        ) : null;\n\n        if (hasInlineActions) {\n            return (\n                <>\n                    {thumbnail}\n                    {renderDescriptionContent()}\n                </>\n            );\n        }\n\n        return (\n            <>\n                {thumbnail}\n                <NameSection ref={detailSectionRef}>\n                    {renderNameDescription()}\n                    {!isLoading && (\n                        <DescriptionFileSizeText>\n                            {fileSize}\n                        </DescriptionFileSizeText>\n                    )}\n                </NameSection>\n            </>\n        );\n    };\n\n    const renderContents = () => {\n        const shouldShowThumbnail =\n            !!thumbnailImageDataUrl ||\n            fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n        const content = errorMessage\n            ? renderErrorState()\n            : renderFileContent(thumbnailImageDataUrl);\n\n        return (\n            <ContentSection $hasThumbnail={shouldShowThumbnail}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = (\n                <IconButton\n                    data-testid={`${id}-error-delete-button`}\n                    data-no-dnd=\"true\"\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`delete ${name}, error: ${errorMessage}`}\n                    onClick={handleDelete}\n                >\n                    <BinIcon aria-hidden />\n                </IconButton>\n            );\n        } else if (isLoading) {\n            content = (\n                <ProgressBar\n                    progress={progress}\n                    data-testid={`${id}-progress-bar`}\n                />\n            );\n        } else {\n            content = (\n                <>\n                    {editable && (\n                        <IconButton\n                            key=\"edit\"\n                            data-testid={`${id}-edit-button`}\n                            data-no-dnd=\"true\"\n                            type=\"button\"\n                            styleType=\"light\"\n                            sizeType=\"small\"\n                            aria-label={`edit ${name}`}\n                            disabled={shouldDisable()}\n                            onClick={handleEdit}\n                            onKeyDown={handleKeyDown}\n                        >\n                            <PencilIcon aria-hidden />\n                        </IconButton>\n                    )}\n                    <IconButton\n                        key=\"delete\"\n                        data-testid={`${id}-delete-button`}\n                        data-no-dnd=\"true\"\n                        type=\"button\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        aria-label={`delete ${name}`}\n                        disabled={shouldDisable()}\n                        onClick={handleDelete}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <BinIcon aria-hidden />\n                    </IconButton>\n                </>\n            );\n        }\n\n        return (\n            <ActionContainer\n                $editable={editable}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $hasDescription={!!description}\n            >\n                {content}\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item\n            id={id}\n            ref={setNodeRef}\n            $sortable={shouldEnableSort()}\n            $disabled={shouldDisable()}\n            $focusType={focusType}\n            {...(shouldEnableSort() ? sortableProps : {})}\n        >\n            {shouldEnableSort() && (\n                <DragHandleIcon\n                    data-testid={`${id}-drag-handle`}\n                    $disabled={shouldDisable()}\n                    $active={focusType === \"self\"}\n                />\n            )}\n            <Box\n                $focused={focusType === \"self\"}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $disabled={shouldDisable()}\n                $editable={editable}\n                $hasDescription={!!description}\n            >\n                {renderContents()}\n                {!readOnly && !hasInlineActions && renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","descriptionLabel","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","hasInlineActions","focusType","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_jsx","ItemText","weight","children","_Fragment","ItemDescriptionLabel","_a","ItemDescriptionText","Item","ref","$sortable","$disabled","$focusType","DragHandleIcon","Box","$error","$loading","$editable","shouldShowThumbnail","type","PDF_MIME_TYPE","content","NameSection","DesktopErrorMessage","ErrorIcon","FileSizeSection","FileSizeText","MobileErrorMessage","thumbnail","FileListItemThumbnail","fileType","ExtendedNameSection","DescriptionFileSizeText","ActionContainer","$hasDescription","IconButton","styleType","sizeType","onClick","onKeyDown","PencilIcon","BinIcon","renderFileContent","ContentSection","$hasThumbnail","renderContents","ProgressBar","renderActions"],"mappings":"otBA6CA,MAsWaA,EAAeC,EAAAA,MAtWV,EACdC,WACAC,WACAC,WACAC,eACAC,WACAC,WACAC,mBACAC,WACAC,kBAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,YACJA,EAAWC,SACXA,EAAW,EAACC,aACZA,EAAYC,sBACZA,EAAqBC,aACrBA,GAAe,GACfhB,GACGiB,EAAeC,GAAoBC,cACpCC,SAAEA,GAAaC,EAAAA,WAAWC,sBAG1BC,WAAEA,EAAUC,UAAEA,EAASC,WAAEA,EAAUC,UAAEA,EAASC,WAAEA,GAClDC,EAAAA,YAAY,CAAEnB,OACZoB,EAAmBC,EAAAA,OAAuB,MAC1CC,EAAQ,CACVL,UAAWM,EAAAA,IAAIC,UAAUC,SAASR,GAClCC,cAGEQ,+BACFJ,SACGR,GACAC,GAIDY,EAAYvB,EAAW,EACvBwB,EAAWC,EAAAA,iBAAiBC,sBAAsB5B,GAClD6B,IAAqB5B,KAAiBX,EACtCwC,EAA2BrB,EAC3BA,IAAaX,EACT,OACA,SACJ,OAKAiC,EAAmBC,eACpBC,IACG,IAAK5B,EAAc,OAAO4B,EAE1B,MAAMC,EACFhB,GAAoBA,EAAiBiB,QAC/BjB,EAAiBiB,QAAQC,wBAAwBC,MACjD,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAAC7B,IAMLmC,EAAAA,WAAU,KACNjC,EAAiBwB,EAAiBhC,GAAM,GACzC,CAACP,EAAcuC,EAAkBhC,IAKpC,MAAM0C,EAAe,KACjB7C,GAAU,EAGR8C,EAAa,KACX7C,GACAA,GACJ,EAGE8C,EAAiBC,IAKfrD,GACAqD,EAAMC,iBACV,EAGEC,EAAgB,IAAMrD,KAAcgB,EAEpCsC,EAAmB,MAAQxD,IAAaG,EAKxCsD,EAAwB,WAAM,OAChCC,EAAAA,2BACIC,MAACC,EAAAA,UAASC,OAAQnD,EAAc,WAAa,UAASoD,SACjD/C,IAEJL,GACGgD,OAAAK,EAAAA,SAAA,CAAAD,SAAA,CACIH,EAAAA,IAACK,EAAAA,qBAAoB,CAAAF,SACU,UAA1B1D,aAAgB,EAAhBA,EAAkB0D,gBAAQ,IAAAG,EAAAA,EAAI,sBAEnCN,MAACO,EAAAA,oBAAmB,CAAAJ,SAAEpD,SAG/B,EA0MP,OACIgD,EAAAA,KAACS,EAAAA,oBACG5D,GAAIA,EACJ6D,IAAK7C,EAAU8C,UACJb,IAAkBc,UAClBf,IAAegB,WACdhC,GACPiB,IAAqBvB,EAAgB,CAAA,aAEzCuB,KACGG,EAAAA,IAACa,EAAAA,eAAc,CAAA,cACE,GAAGjE,gBAAgB+D,UACrBf,YACY,SAAdhB,IAGjBmB,EAAAA,KAACe,EAAAA,cAC2B,SAAdlC,EAAoBmC,SACpB9D,EAAY+D,SACZzC,EAASoC,UACRf,IAAeqB,UACf7E,oBACQW,EAAWoD,SAAA,CA/GnB,MACnB,MAAMe,IACAhE,GACFf,EAASgF,OAAS1C,EAAAA,iBAAiB2C,cAEjCC,EAAUpE,EAlHhB8C,EAAAA,KAAAK,EAAAA,SAAA,CAAAD,SAAA,CACIJ,OAACuB,EAAAA,YAAW,CAACb,IAAKzC,EAAgBmC,SAAA,CAC7BL,IACA7C,GACG8C,EAAAA,KAACwB,EAAAA,oBAAmB,CAACrB,OAAO,WAAUC,SAAA,CAClCH,EAAAA,IAACwB,EAAAA,8BACAvE,QAIb+C,EAAAA,IAACyB,EAAAA,gBAAe,CAAAtB,SACZH,EAAAA,IAAC0B,EAAAA,aAAY,CAAAvB,SAAE3B,MAElBvB,GACG8C,EAAAA,KAAC4B,EAAAA,mBAAkB,CAACzB,OAAO,qBACvBF,EAAAA,IAACwB,EAAAA,UAAS,CAAA,eAAA,IACTvE,QAwDS,CAACC,IACvB,MAIM0E,EAHA1E,GACFf,EAASgF,OAAS1C,EAAAA,iBAAiB2C,cAGnCpB,EAAAA,IAAC6B,EAAAA,sBAAqB,CAClB3E,sBAAuBA,GAAyB,GAChD4E,SAAU3F,EAASgF,mBACN,GAAGvE,gBAEpB,KAEJ,OAAI+B,EAEIoB,EAAAA,2BACK6B,EA3Bb7B,OAACgC,EAAAA,oBAAmB,CAACtB,IAAKzC,EAAgBmC,SAAA,CACtCH,MAACC,EAAAA,SAAQ,CAACC,OAAO,WAAUC,SAAE/C,IAC7B4C,MAACK,EAAAA,qBAAoB,CAAAF,SACU,QAA1BG,EAAA7D,aAAgB,EAAhBA,EAAkB0D,gBAAQ,IAAAG,EAAAA,EAAI,sBAEnCN,EAAAA,IAACO,EAAAA,oBAAmB,CAAAJ,SAAEpD,IACtBiD,MAACgC,EAAAA,kCAAyBxD,KACxBhC,GAAYmC,GA7ClBoB,EAAAA,KAACkC,EAAAA,gBAAe,CAAAhB,UACD7E,EAAQ2E,QACX,YACE,EAAKmB,iBACE,EAAI/B,SAAA,CAErBH,EAAAA,IAACmC,EAAAA,0BAEgB,GAAGvF,gBAAgB,cACpB,OACZuE,KAAK,SACLiB,UAAU,QACVC,SAAS,QAAO,aACJ,QAAQxF,IACpBN,SAAUqD,IACV0C,QAAS9C,EACT+C,UAAW9C,WAEXO,EAAAA,IAACwC,EAAAA,WAAU,CAAA,eAAA,KAXP,QAaRxC,EAAAA,IAACmC,aAAU,CAAA,cAEM,GAAGvF,gCACJ,OACZuE,KAAK,SACLiB,UAAU,QACVC,SAAS,qBACG,UAAUxF,IACtBN,SAAUqD,IACV0C,QAAS/C,EACTgD,UAAW9C,EAAaU,SAExBH,EAAAA,IAACyC,UAAO,CAAA,eAAA,KAXJ,mBAmDR1C,OAAAK,EAAAA,SAAA,CAAAD,SAAA,CACKyB,EACD7B,EAAAA,KAACuB,cAAW,CAACb,IAAKzC,EAAgBmC,SAAA,CAC7BL,KACCvB,GACEyB,EAAAA,IAACgC,0BAAuB,CAAA7B,SACnB3B,UAzCQ,KA6CtB,EAWDkE,CAAkBxF,GAExB,OACI8C,EAAAA,IAAC2C,EAAAA,eAAc,CAAAC,cAAgB1B,EAAmBf,SAC7CkB,GACY,EAqGZwB,IACCrG,IAAamC,GAlGL,MAClB,IAAI0C,EA4DJ,OAzDIA,EADApE,EAEI+C,EAAAA,IAACmC,EAAAA,WAAU,CAAA,cACM,GAAGvF,wBAAwB,cAC5B,OACZuE,KAAK,SACLiB,UAAU,QACVC,SAAS,QAAO,aACJ,UAAUxF,aAAgBI,IACtCqF,QAAS/C,EAAYY,SAErBH,EAAAA,IAACyC,EAAAA,QAAO,CAAA,eAAA,MAGTlE,EAEHyB,EAAAA,IAAC8C,eACG9F,SAAUA,EAAQ,cACL,GAAGJ,mBAKpBmD,EAAAA,KAAAK,WAAA,CAAAD,SAAA,CACK/D,GACG4D,EAAAA,IAACmC,aAAU,CAAA,cAEM,GAAGvF,gBAAgB,cACpB,OACZuE,KAAK,SACLiB,UAAU,QACVC,SAAS,qBACG,QAAQxF,IACpBN,SAAUqD,IACV0C,QAAS9C,EACT+C,UAAW9C,EAAaU,SAExBH,EAAAA,IAACwC,aAAU,CAAA,eAAA,KAXP,QAcZxC,MAACmC,EAAAA,WAAU,CAAA,cAEM,GAAGvF,gCACJ,OACZuE,KAAK,SACLiB,UAAU,QACVC,SAAS,QAAO,aACJ,UAAUxF,IACtBN,SAAUqD,IACV0C,QAAS/C,EACTgD,UAAW9C,EAAaU,SAExBH,EAAAA,IAACyC,EAAAA,QAAO,CAAA,eAAA,KAXJ,aAkBhBzC,EAAAA,IAACiC,EAAAA,2BACc7F,EAAQ2E,SACT9D,WACAsB,EAAS2D,kBACAnF,WAElBsE,GACa,EA6BqB0B,SAEpC"}