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

package/cjs/file-upload/dropzone.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("../external/react-dropzone/dist/es/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var t=require("../theme/tokens/border.js"),s=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var a=require("../theme/tokens/radius.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("./dropzone.styles.js");const n=r.forwardRef((({children:n,accept:d,capture:u,multiple:l,id:c,className:p,name:h,border:m,disabled:j,onChange:q,"data-testid":b},g)=>{const x=r.useRef(null),{getRootProps:v,isDragActive:y}=i.useDropzone({onDrop:q,noClick:!0,disabled:j});r.useImperativeHandle(g,(()=>Object.assign(Object.assign({},x.current),{openFileDialog:()=>{x.current&&(x.current.value="",x.current.click())}})));return e.jsxs(o.Container,Object.assign({id:c,"data-testid":b||"dropzone",enabled:m,$showDashedBorder:m,thickness:t.Border["width-040"],radius:a.Radius.sm,colour:s.Colour.border,className:p},v(),{children:[e.jsx(o.HiddenInput,{type:"file",name:h,ref:x,tabIndex:-1,"aria-hidden":!0,accept:d,capture:u,multiple:l,"data-testid":b?`${b}-input`:"dropzone-input",onChange:e=>{e.target.files&&q(Array.from(e.target.files))}}),n,y&&e.jsxs(o.DragOverlay,{colour:s.Colour["border-primary"],thickness:t.Border["width-040"],radius:a.Radius.sm,enabled:m,backgroundColor:s.Colour["bg-primary-subtler"],children:[e.jsx(o.OverlayIcon,{}),e.jsx(o.OverlayText,{weight:"semibold",children:"Drop files here"})]})]}))}));exports.FileUploadDropzone=n;
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/cloud-arrow-up-fill"),i=require("clsx"),s=require("react"),t=require("../external/react-dropzone/dist/es/index.js"),a=require("../dashed-border/dashed-border.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var o=require("../theme/tokens/border.js"),d=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var n=require("../theme/tokens/radius.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");var u=require("../typography/index.js"),l=require("./dropzone.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(i);const h=s.forwardRef((({children:i,accept:c,capture:h,multiple:m,id:j,className:q,name:b,border:g,disabled:y,onChange:f,"data-testid":x},v)=>{const k=s.useRef(null),{getRootProps:D,isDragActive:C}=t.useDropzone({onDrop:f,noClick:!0,disabled:y});s.useImperativeHandle(v,(()=>Object.assign(Object.assign({},k.current),{openFileDialog:()=>{k.current&&(k.current.value="",k.current.click())}})));return e.jsxs(a.DashedBorder,Object.assign({id:j,"data-testid":x||"dropzone",enabled:g,thickness:o.Border["width-040"],radius:n.Radius.sm,colour:d.Colour.border,className:p.default(l.container,g&&l.containerWithDashedBorder,q)},D(),{children:[e.jsx("input",{type:"file",name:b,ref:k,tabIndex:-1,"aria-hidden":!0,className:l.hiddenInput,accept:c,capture:h,multiple:m,"data-testid":x?`${x}-input`:"dropzone-input",onChange:e=>{e.target.files&&f(Array.from(e.target.files))}}),i,C&&e.jsxs(a.DashedBorder,{colour:d.Colour["border-primary"],thickness:o.Border["width-040"],radius:n.Radius.sm,enabled:g,backgroundColor:d.Colour["bg-primary-subtler"],className:l.dragOverlay,children:[e.jsx(r.CloudArrowUpFillIcon,{className:l.overlayIcon}),e.jsx(u.Typography.BodyMD,{className:l.overlayText,weight:"semibold",children:"Drop files here"})]})]}))}));exports.FileUploadDropzone=h;
 //# sourceMappingURL=dropzone.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropzone.js","sources":["../../../src/file-upload/dropzone.tsx"],"sourcesContent":["import type React from \"react\";\nimport { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\n\nimport { Border, Colour, Radius } from \"../theme\";\nimport {\n    Container,\n    DragOverlay,\n    HiddenInput,\n    OverlayIcon,\n    OverlayText,\n} from \"./dropzone.styles\";\nimport type { FileInputProps } from \"./types\";\n\nexport interface DropzoneElement extends HTMLInputElement {\n    openFileDialog: () => void;\n}\n\ninterface Props extends FileInputProps {\n    children: React.ReactNode;\n    id: string;\n    border: boolean;\n    onChange: (files: File[]) => void;\n}\n\nconst Component = (\n    {\n        children,\n        accept,\n        capture,\n        multiple,\n        id,\n        className,\n        name,\n        border,\n        disabled,\n        onChange,\n        \"data-testid\": testId,\n    }: Props,\n    ref: React.Ref<DropzoneElement>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { getRootProps, isDragActive } = useDropzone({\n        onDrop: onChange,\n        noClick: true,\n        disabled,\n    });\n\n    useImperativeHandle(ref, () => ({\n        ...inputRef.current!,\n        openFileDialog: () => {\n            if (inputRef.current) {\n                inputRef.current.value = \"\"; // Reset the input to enable same file upload\n                inputRef.current.click();\n            }\n        },\n    }));\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n            onChange(Array.from(event.target.files));\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderDragOverlay = () => (\n        <DragOverlay\n            colour={Colour[\"border-primary\"]}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            enabled={border}\n            backgroundColor={Colour[\"bg-primary-subtler\"]}\n        >\n            <OverlayIcon />\n            <OverlayText weight=\"semibold\">Drop files here</OverlayText>\n        </DragOverlay>\n    );\n\n    return (\n        <Container\n            id={id}\n            data-testid={testId || \"dropzone\"}\n            enabled={border}\n            $showDashedBorder={border}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n            className={className}\n            {...getRootProps()}\n        >\n            <HiddenInput\n                type=\"file\"\n                name={name}\n                ref={inputRef}\n                tabIndex={-1}\n                aria-hidden\n                accept={accept}\n                capture={capture}\n                multiple={multiple}\n                data-testid={testId ? `${testId}-input` : \"dropzone-input\"}\n                onChange={handleChange}\n            />\n            {children}\n            {isDragActive && renderDragOverlay()}\n        </Container>\n    );\n};\n\nexport const FileUploadDropzone = forwardRef(Component);\n"],"names":["FileUploadDropzone","forwardRef","children","accept","capture","multiple","id","className","name","border","disabled","onChange","testId","ref","inputRef","useRef","getRootProps","isDragActive","useDropzone","onDrop","noClick","useImperativeHandle","Object","assign","current","openFileDialog","value","click","_jsxs","Container","enabled","$showDashedBorder","thickness","Border","radius","Radius","colour","Colour","_jsx","HiddenInput","type","tabIndex","event","target","files","Array","from","DragOverlay","backgroundColor","OverlayIcon","OverlayText","weight"],"mappings":"0oBAyBA,MA2FaA,EAAqBC,EAAAA,YA3FhB,EAEVC,WACAC,SACAC,UACAC,WACAC,KACAC,YACAC,OAAIC,OACJA,EACAC,WACAC,WACA,cAAeC,GAEnBC,KAKA,MAAMC,EAAWC,EAAAA,OAAyB,OACpCC,aAAEA,EAAYC,aAAEA,GAAiBC,cAAY,CAC/CC,OAAQR,EACRS,SAAS,EACTV,aAGJW,EAAAA,oBAAoBR,GAAK,IAAMS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACxBT,EAASU,SAAQ,CACpBC,eAAgB,KACRX,EAASU,UACTV,EAASU,QAAQE,MAAQ,GACzBZ,EAASU,QAAQG,QACrB,MA6BR,OACIC,EAAAA,KAACC,EAAAA,UAASP,OAAAC,OAAA,CACNjB,GAAIA,EAAE,cACOM,GAAU,WACvBkB,QAASrB,EAAMsB,kBACItB,EACnBuB,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQC,EAAAA,OAAe,OACvB9B,UAAWA,GACPS,IAAc,CAAAd,SAAA,CAElBoC,EAAAA,IAACC,EAAAA,YAAW,CACRC,KAAK,OACLhC,KAAMA,EACNK,IAAKC,EACL2B,UAAU,EAAE,eAAA,EAEZtC,OAAQA,EACRC,QAASA,EACTC,SAAUA,EAAQ,cACLO,EAAS,GAAGA,UAAiB,iBAC1CD,SA5CU+B,IACdA,EAAMC,OAAOC,OACbjC,EAASkC,MAAMC,KAAKJ,EAAMC,OAAOC,OACrC,IA2CK1C,EACAe,GArCLW,OAACmB,EAAAA,YAAW,CACRX,OAAQC,EAAAA,OAAO,kBACfL,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBL,QAASrB,EACTuC,gBAAiBX,EAAAA,OAAO,sBAAqBnC,SAAA,CAE7CoC,EAAAA,IAACW,EAAAA,YAAW,CAAA,GACZX,EAAAA,IAACY,EAAAA,YAAW,CAACC,OAAO,WAAUjD,SAAA,0BA8BtB"}
+{"version":3,"file":"dropzone.js","sources":["../../../src/file-upload/dropzone.tsx"],"sourcesContent":["import { CloudArrowUpFillIcon } from \"@lifesg/react-icons/cloud-arrow-up-fill\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./dropzone.styles\";\nimport type { FileInputProps } from \"./types\";\n\nexport interface DropzoneElement extends HTMLInputElement {\n    openFileDialog: () => void;\n}\n\ninterface Props extends FileInputProps {\n    children: React.ReactNode;\n    id: string;\n    border: boolean;\n    onChange: (files: File[]) => void;\n}\n\nconst Component = (\n    {\n        children,\n        accept,\n        capture,\n        multiple,\n        id,\n        className,\n        name,\n        border,\n        disabled,\n        onChange,\n        \"data-testid\": testId,\n    }: Props,\n    ref: React.Ref<DropzoneElement>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { getRootProps, isDragActive } = useDropzone({\n        onDrop: onChange,\n        noClick: true,\n        disabled,\n    });\n\n    useImperativeHandle(ref, () => ({\n        ...inputRef.current!,\n        openFileDialog: () => {\n            if (inputRef.current) {\n                inputRef.current.value = \"\"; // Reset the input to enable same file upload\n                inputRef.current.click();\n            }\n        },\n    }));\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n            onChange(Array.from(event.target.files));\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderDragOverlay = () => (\n        <DashedBorder\n            colour={Colour[\"border-primary\"]}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            enabled={border}\n            backgroundColor={Colour[\"bg-primary-subtler\"]}\n            className={styles.dragOverlay}\n        >\n            <CloudArrowUpFillIcon className={styles.overlayIcon} />\n            <Typography.BodyMD className={styles.overlayText} weight=\"semibold\">\n                Drop files here\n            </Typography.BodyMD>\n        </DashedBorder>\n    );\n\n    return (\n        <DashedBorder\n            id={id}\n            data-testid={testId || \"dropzone\"}\n            enabled={border}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n            className={clsx(\n                styles.container,\n                border && styles.containerWithDashedBorder,\n                className\n            )}\n            {...getRootProps()}\n        >\n            <input\n                type=\"file\"\n                name={name}\n                ref={inputRef}\n                tabIndex={-1}\n                aria-hidden\n                className={styles.hiddenInput}\n                accept={accept}\n                capture={capture}\n                multiple={multiple}\n                data-testid={testId ? `${testId}-input` : \"dropzone-input\"}\n                onChange={handleChange}\n            />\n            {children}\n            {isDragActive && renderDragOverlay()}\n        </DashedBorder>\n    );\n};\n\nexport const FileUploadDropzone = forwardRef(Component);\n"],"names":["FileUploadDropzone","forwardRef","children","accept","capture","multiple","id","className","name","border","disabled","onChange","testId","ref","inputRef","useRef","getRootProps","isDragActive","useDropzone","onDrop","noClick","useImperativeHandle","Object","assign","current","openFileDialog","value","click","_jsxs","DashedBorder","enabled","thickness","Border","radius","Radius","colour","Colour","clsx","styles.container","styles.containerWithDashedBorder","_jsx","type","tabIndex","styles.hiddenInput","event","target","files","Array","from","backgroundColor","styles.dragOverlay","CloudArrowUpFillIcon","styles.overlayIcon","Typography","BodyMD","styles.overlayText","weight"],"mappings":"o6BAuBA,MAkGaA,EAAqBC,EAAAA,YAlGhB,EAEVC,WACAC,SACAC,UACAC,WACAC,KACAC,YACAC,OAAIC,OACJA,EACAC,WACAC,WACA,cAAeC,GAEnBC,KAKA,MAAMC,EAAWC,EAAAA,OAAyB,OACpCC,aAAEA,EAAYC,aAAEA,GAAiBC,cAAY,CAC/CC,OAAQR,EACRS,SAAS,EACTV,aAGJW,EAAAA,oBAAoBR,GAAK,IAAMS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACxBT,EAASU,SAAQ,CACpBC,eAAgB,KACRX,EAASU,UACTV,EAASU,QAAQE,MAAQ,GACzBZ,EAASU,QAAQG,QACrB,MAgCR,OACIC,EAAAA,KAACC,EAAAA,aAAYP,OAAAC,OAAA,CACTjB,GAAIA,EAAE,cACOM,GAAU,WACvBkB,QAASrB,EACTsB,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQC,EAAAA,OAAe,OACvB7B,UAAW8B,EAAAA,QACPC,EAAAA,UACA7B,GAAU8B,EAAAA,0BACVhC,IAEAS,IAAc,CAAAd,SAAA,CAElBsC,EAAAA,IAAA,QAAA,CACIC,KAAK,OACLjC,KAAMA,EACNK,IAAKC,EACL4B,UAAU,mBAEVnC,UAAWoC,EAAAA,YACXxC,OAAQA,EACRC,QAASA,EACTC,SAAUA,EAAQ,cACLO,EAAS,GAAGA,UAAiB,iBAC1CD,SAnDUiC,IACdA,EAAMC,OAAOC,OACbnC,EAASoC,MAAMC,KAAKJ,EAAMC,OAAOC,OACrC,IAkDK5C,EACAe,GA5CLW,EAAAA,KAACC,EAAAA,aAAY,CACTM,OAAQC,EAAAA,OAAO,kBACfL,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBJ,QAASrB,EACTwC,gBAAiBb,EAAAA,OAAO,sBACxB7B,UAAW2C,cAAkBhD,SAAA,CAE7BsC,MAACW,EAAAA,qBAAoB,CAAC5C,UAAW6C,EAAAA,cACjCZ,MAACa,EAAAA,WAAWC,OAAM,CAAC/C,UAAWgD,EAAAA,YAAoBC,OAAO,WAAUtD,SAAA,0BAoCxD"}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n    ActionButton,\n    ActionButtonsSection,\n    ContentSection,\n    DetailsSection,\n    FileNameText,\n    FileSizeText,\n    Item,\n    NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={shouldShowThumbnail}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["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":"+bA2B4B,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 clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Form } from \"../form\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util\";\nimport * as styles from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <div ref={nameSectionRef} className={styles.nameSection}>\n            <Typography.BodyMD\n                className={styles.fileNameText}\n                weight=\"semibold\"\n            >\n                {formattedName}\n            </Typography.BodyMD>\n            <Typography.BodyMD>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </Typography.BodyMD>\n        </div>\n    );\n\n    return (\n        <li data-testid={`${id}-edit-display`} className={styles.item}>\n            <div className={styles.contentSection}>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <div className={styles.detailsSection}>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </div>\n            </div>\n            <div\n                className={clsx(\n                    styles.actionButtonsSection,\n                    shouldShowThumbnail &&\n                        styles.actionButtonsSectionWithThumbnail\n                )}\n            >\n                <Button\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                    className={styles.actionButton}\n                >\n                    Save\n                </Button>\n                <Button\n                    type=\"button\"\n                    sizeType=\"small\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                    className={styles.actionButton}\n                >\n                    Cancel\n                </Button>\n            </div>\n        </li>\n    );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","className","styles.item","children","styles.contentSection","_jsx","FileListItemThumbnail","fileType","styles.detailsSection","ref","styles.nameSection","Typography","BodyMD","styles.fileNameText","weight","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","clsx","styles.actionButtonsSection","styles.actionButtonsSectionWithThumbnail","Button","sizeType","disabled","trim","length","onClick","styles.actionButton","styleType"],"mappings":"ymBAqB4B,EACxBA,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAX,GAEGY,EAAeC,GAAoBC,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAKxCE,EAAmBC,eACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,EAAAA,WAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,EAAAA,WAAU,KACNb,EAAsBhB,EAAS8B,aAAe,GAAG,GAClD,CAAC9B,IAKJ,MAmBM+B,IACApB,GAAyBF,IAASuB,EAAAA,iBAAiBC,cAmBzD,OACIC,EAAAA,KAAA,KAAA,CAAA,cAAiB,GAAG5B,iBAAmB6B,UAAWC,EAAAA,KAAWC,SAAA,CACzDH,EAAAA,YAAKC,UAAWG,EAAAA,yBACXP,GACGQ,EAAAA,IAACC,EAAAA,sBAAqB,CAClB7B,sBAAuBA,EACvB8B,SAAUhC,IAGlByB,EAAAA,YAAKC,UAAWO,EAAAA,yBAtBxBR,EAAAA,KAAA,MAAA,CAAKS,IAAKxB,EAAgBgB,UAAWS,EAAAA,YAAkBP,SAAA,CACnDE,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CACdX,UAAWY,EAAAA,aACXC,OAAO,WAAUX,SAEhBzB,IAEL2B,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CAAAT,SACbL,EAAAA,iBAAiBiB,sBAAsBzC,QAgBpC+B,EAAAA,IAACW,EAAAA,KAAKC,UACFR,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPqC,UAAWnD,EACXoD,SAlDEC,IAClBtC,EAAsBsC,EAAMC,OAAOjC,MAAM,EAkDzBjB,OA/CAiD,IAChBjD,EAAOiD,EAAMC,OAAOjC,MAAM,EA+CVkC,KAAM,EAAC,aACK,yBAAyBjD,IACrCkD,MAAO,CACHpB,SAAU,oBACVqB,SACI,8EAKpBxB,EAAAA,KAAA,MAAA,CACIC,UAAWwB,UACPC,EAAAA,qBACA7B,GACI8B,qCACPxB,SAAA,CAEDE,MAACuB,EAAAA,OAAM,CAAA,cACU,GAAGxD,gBAChBG,KAAK,SACLsD,SAAS,QACTC,SA/DyB,IADVjD,EAAmBkD,OACpBC,OAgEdC,QAhFG,KACXlD,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAM2C,OACrC,EA8EY9B,UAAWiC,eAAmB/B,SAAA,SAIlCE,EAAAA,IAACuB,EAAAA,OAAM,CACHrD,KAAK,SACLsD,SAAS,QACTM,UAAU,YAAW,cACR,GAAG/D,kBAChB6D,QAAS/D,EACT+B,UAAWiC,EAAAA,aAAmB/B,SAAA,gBAKrC"}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";require("./file-list.styles_1ea12kj.css");exports.editableItemsContainer="e1y5148f",exports.listWrapper="l14goqmf",exports.listWrapperReadOnly="l1spcgo1";
+//# sourceMappingURL=file-list.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-list.styles.js","sources":["../../../../src/file-upload/file-list/file-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Spacing } from \"../../theme\";\n\nexport const listWrapper = css`\n    list-style-type: none;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const listWrapperReadOnly = css`\n    margin-bottom: 0;\n`;\n\nexport const editableItemsContainer = css`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-32\"]};\n    }\n\n    &:not(:first-child) {\n        margin-top: ${Spacing[\"spacing-32\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":[],"mappings":"2HAamC,+BATX,uCAKQ"}

package/cjs/file-upload/file-list/file-list.styles_1ea12kj.css

@@ -0,0 +1,3 @@
+.l14goqmf{list-style-type:none;margin-bottom:var(--fds-spacing-32);}
+.l1spcgo1{margin-bottom:0;}
+.e1y5148f{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.e1y5148f:not(:last-child){margin-bottom:var(--fds-spacing-32);}.e1y5148f:not(:first-child){margin-top:var(--fds-spacing-32);}.e1y5148f ul{list-style-type:none;}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport { FileUploadHelper } from \"../helper\";\n\ninterface Props {\n    thumbnailImageDataUrl?: string | undefined;\n    fileType?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    fileType,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    const isPdf = fileType === FileUploadHelper.PDF_MIME_TYPE;\n    const displaySrc = isPdf\n        ? thumbnailImageDataUrl || FileUploadHelper.PDF_ICON_URL\n        : thumbnailImageDataUrl || \"\";\n\n    return (\n        <Container data-testid={testId}>\n            <Thumbnail\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={displaySrc}\n                $isPdf={isPdf}\n            />\n            {renderReplaceButton && (\n                <ReplaceButton type=\"button\" onClick={handleReplace}>\n                    Replace\n                </ReplaceButton>\n            )}\n        </Container>\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    width: auto;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)<{ $isPdf?: boolean }>`\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${(props) =>\n        props.$isPdf\n            ? \"none\"\n            : `${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${V3_Colour[\"border\"]}`};\n    object-fit: cover;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const ReplaceButton = styled.button`\n    width: 100%;\n    height: 1.625rem;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    ${V3_Font[\"body-md-semibold\"]}\n    color: ${V3_Colour[\"text-primary\"]};\n\n    &:hover {\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["Container","styled","div","V3_Spacing","Thumbnail","ImageWithFallback","V3_Radius","props","$isPdf","V3_Border","V3_Colour","V3_MediaQuery","MaxWidth","md","ReplaceButton","button","V3_Font","thumbnailImageDataUrl","fileType","testId","renderReplaceButton","onReplaceClick","isPdf","FileUploadHelper","PDF_MIME_TYPE","displaySrc","PDF_ICON_URL","_jsxs","children","_jsx","undefined","src","type","onClick"],"mappings":"sSAqBO,MAqCMA,EAAYC,EAAAA,QAAOC,GAAG;;oBAEfC,EAAAA,WAAW;;;;;EAOlBC,EAAYH,EAAAA,QAAOI,EAAAA,kBAAwC;;;;qBAInDC,EAAAA,UAAc;cACpBC,GACPA,EAAMC,OACA,OACA,GAAGC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB,SAAKC,EAAAA,UAAkB;;;MAG7EC,EAAAA,cAAcC,SAASC;;;;EAMhBC,EAAgBb,EAAAA,QAAOc,MAAM;;;kBAGxBZ,EAAAA,WAAW;;;;;MAKvBa,EAAAA,QAAQ;aACDN,EAAAA,UAAU;;;iBAGNA,EAAAA,UAAU;;oDA3EU,EACjCO,wBACAC,WACA,cAAeC,EACfC,sBACAC,qBAEA,MAMMC,EAAQJ,IAAaK,EAAAA,iBAAiBC,cACtCC,EAAaH,EACbL,GAAyBM,EAAAA,iBAAiBG,aAC1CT,GAAyB,GAE/B,OACIU,EAAAA,KAAC3B,EAAS,CAAA,cAAcmB,EAAMS,SAAA,CAC1BC,EAAAA,IAACzB,EAAS,CAAA,cACOe,EAAS,GAAGA,eAAiBW,EAC1CC,IAAKN,EAAUjB,OACPc,IAEXF,GACGS,EAAAA,IAACf,EAAa,CAACkB,KAAK,SAASC,QAnBnB,KACdZ,GACAA,GACJ,EAgB2DO,SAAA,cAI/C"}
+{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { FileUploadHelper } from \"../helper\";\nimport * as styles from \"./file-list-item-thumbnail.styles\";\n\ninterface Props {\n    thumbnailImageDataUrl?: string | undefined;\n    fileType?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    fileType,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    const isPdf = fileType === FileUploadHelper.PDF_MIME_TYPE;\n    const displaySrc = isPdf\n        ? thumbnailImageDataUrl || FileUploadHelper.PDF_ICON_URL\n        : thumbnailImageDataUrl || \"\";\n\n    return (\n        <div className={styles.container} data-testid={testId}>\n            <ImageWithFallback\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={displaySrc}\n                className={clsx(styles.thumbnail, isPdf && styles.thumbnailPdf)}\n            />\n            {renderReplaceButton && (\n                <button\n                    type=\"button\"\n                    onClick={handleReplace}\n                    className={styles.replaceButton}\n                >\n                    Replace\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":["thumbnailImageDataUrl","fileType","testId","renderReplaceButton","onReplaceClick","isPdf","FileUploadHelper","PDF_MIME_TYPE","displaySrc","PDF_ICON_URL","_jsxs","className","styles.container","children","_jsx","ImageWithFallback","undefined","src","clsx","styles.thumbnail","styles.thumbnailPdf","type","onClick","styles.replaceButton"],"mappings":"oUAcqC,EACjCA,wBACAC,WACA,cAAeC,EACfC,sBACAC,qBAEA,MAMMC,EAAQJ,IAAaK,EAAAA,iBAAiBC,cACtCC,EAAaH,EACbL,GAAyBM,EAAAA,iBAAiBG,aAC1CT,GAAyB,GAE/B,OACIU,EAAAA,KAAA,MAAA,CAAKC,UAAWC,EAAAA,UAAgB,cAAeV,EAAMW,SAAA,CACjDC,EAAAA,IAACC,EAAAA,iCACgBb,EAAS,GAAGA,eAAiBc,EAC1CC,IAAKT,EACLG,UAAWO,UAAKC,EAAAA,UAAkBd,GAASe,EAAAA,gBAE9CjB,GACGW,MAAA,SAAA,CACIO,KAAK,SACLC,QArBM,KACdlB,GACAA,GACJ,EAmBYO,UAAWY,EAAAA,cAAoBV,SAAA,cAKrC"}

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

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

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

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

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

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

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

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