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

package/file-upload/dropzone.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useRef as o,useImperativeHandle as i}from"react";import{useDropzone as s}from"../external/react-dropzone/dist/es/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import{Border as n}from"../theme/tokens/border.js";import{Colour as a}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as d}from"../theme/tokens/radius.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/string-helper.js";import{Container as m,HiddenInput as l,DragOverlay as p,OverlayIcon as c,OverlayText as h}from"./dropzone.styles.js";const u=t((({children:t,accept:u,capture:j,multiple:b,id:f,className:g,name:k,border:x,disabled:y,onChange:D,"data-testid":v},w)=>{const z=o(null),{getRootProps:C,isDragActive:O}=s({onDrop:D,noClick:!0,disabled:y});i(w,(()=>Object.assign(Object.assign({},z.current),{openFileDialog:()=>{z.current&&(z.current.value="",z.current.click())}})));return e(m,Object.assign({id:f,"data-testid":v||"dropzone",enabled:x,$showDashedBorder:x,thickness:n["width-040"],radius:d.sm,colour:a.border,className:g},C(),{children:[r(l,{type:"file",name:k,ref:z,tabIndex:-1,"aria-hidden":!0,accept:u,capture:j,multiple:b,"data-testid":v?`${v}-input`:"dropzone-input",onChange:e=>{e.target.files&&D(Array.from(e.target.files))}}),t,O&&e(p,{colour:a["border-primary"],thickness:n["width-040"],radius:d.sm,enabled:x,backgroundColor:a["bg-primary-subtler"],children:[r(c,{}),r(h,{weight:"semibold",children:"Drop files here"})]})]}))}));export{u as FileUploadDropzone};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useRef as i,useImperativeHandle as o}from"react";import{useDropzone as s}from"../external/react-dropzone/dist/es/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import{Border as a}from"../theme/tokens/border.js";import{Colour as n}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as d}from"../theme/tokens/radius.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Container as m,HiddenInput as l,DragOverlay as p,OverlayIcon as c,OverlayText as u}from"./dropzone.styles.js";const h=t((({children:t,accept:h,capture:j,multiple:b,id:g,className:f,name:k,border:x,disabled:y,onChange:v,"data-testid":D},w)=>{const z=i(null),{getRootProps:C,isDragActive:O}=s({onDrop:v,noClick:!0,disabled:y});o(w,(()=>Object.assign(Object.assign({},z.current),{openFileDialog:()=>{z.current&&(z.current.value="",z.current.click())}})));return e(m,Object.assign({id:g,"data-testid":D||"dropzone",enabled:x,$showDashedBorder:x,thickness:a["width-040"],radius:d.sm,colour:n.border,className:f},C(),{children:[r(l,{type:"file",name:k,ref:z,tabIndex:-1,"aria-hidden":!0,accept:h,capture:j,multiple:b,"data-testid":D?`${D}-input`:"dropzone-input",onChange:e=>{e.target.files&&v(Array.from(e.target.files))}}),t,O&&e(p,{colour:n["border-primary"],thickness:a["width-040"],radius:d.sm,enabled:x,backgroundColor:n["bg-primary-subtler"],children:[r(c,{}),r(u,{weight:"semibold",children:"Drop files here"})]})]}))}));export{h as FileUploadDropzone};
 //# sourceMappingURL=dropzone.js.map

package/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":"wtBAyBA,MA2FaA,EAAqBC,GA3FhB,EAEVC,WACAC,SACAC,UACAC,WACAC,KACAC,YACAC,OACAC,SACAC,WACAC,WACA,cAAeC,GAEnBC,KAKA,MAAMC,EAAWC,EAAyB,OACpCC,aAAEA,EAAYC,aAAEA,GAAiBC,EAAY,CAC/CC,OAAQR,EACRS,SAAS,EACTV,aAGJW,EAAoBR,GAAK,IAAMS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACxBT,EAASU,SAAQ,CACpBC,eAAgB,KACRX,EAASU,UACTV,EAASU,QAAQE,MAAQ,GACzBZ,EAASU,QAAQG,QACrB,MA6BR,OACIC,EAACC,EAASP,OAAAC,OAAA,CACNjB,GAAIA,EAAE,cACOM,GAAU,WACvBkB,QAASrB,EAAMsB,kBACItB,EACnBuB,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBC,OAAQC,EAAe,OACvB9B,UAAWA,GACPS,IAAc,CAAAd,SAAA,CAElBoC,EAACC,EAAW,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,EAACmB,EAAW,CACRX,OAAQC,EAAO,kBACfL,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBL,QAASrB,EACTuC,gBAAiBX,EAAO,sBAAqBnC,SAAA,CAE7CoC,EAACW,EAAW,CAAA,GACZX,EAACY,EAAW,CAACC,OAAO,WAAUjD,SAAA,0BA8BtB"}
+{"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":"kyBAyBA,MA2FaA,EAAqBC,GA3FhB,EAEVC,WACAC,SACAC,UACAC,WACAC,KACAC,YACAC,OACAC,SACAC,WACAC,WACA,cAAeC,GAEnBC,KAKA,MAAMC,EAAWC,EAAyB,OACpCC,aAAEA,EAAYC,aAAEA,GAAiBC,EAAY,CAC/CC,OAAQR,EACRS,SAAS,EACTV,aAGJW,EAAoBR,GAAK,IAAMS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACxBT,EAASU,SAAQ,CACpBC,eAAgB,KACRX,EAASU,UACTV,EAASU,QAAQE,MAAQ,GACzBZ,EAASU,QAAQG,QACrB,MA6BR,OACIC,EAACC,EAASP,OAAAC,OAAA,CACNjB,GAAIA,EAAE,cACOM,GAAU,WACvBkB,QAASrB,EAAMsB,kBACItB,EACnBuB,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBC,OAAQC,EAAe,OACvB9B,UAAWA,GACPS,IAAc,CAAAd,SAAA,CAElBoC,EAACC,EAAW,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,EAACmB,EAAW,CACRX,OAAQC,EAAO,kBACfL,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBL,QAASrB,EACTuC,gBAAiBX,EAAO,sBAAqBnC,SAAA,CAE7CoC,EAACW,EAAW,CAAA,GACZX,EAACY,EAAW,CAACC,OAAO,WAAUjD,SAAA,0BA8BtB"}

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

@@ -1,15 +1,33 @@
 interface StyleProps {
     $showDashedBorder: boolean | undefined;
 }
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, StyleProps>> & string & Omit<(props: import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const HiddenInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const DragOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<(props: import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const OverlayText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, "$showDashedBorder"> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, "$showDashedBorder"> & StyleProps, never>>> & string & Omit<(props: import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const HiddenInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
+export declare const DragOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<(props: import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const OverlayText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export declare const OverlayIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.js","sources":["../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n    ActionButton,\n    ActionButtonsSection,\n    ContentSection,\n    DetailsSection,\n    FileNameText,\n    FileSizeText,\n    Item,\n    NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            nameSectionRef && nameSectionRef.current\n                ? nameSectionRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateOneLine(\n            value,\n            widthOfElement,\n            widthOfElement / 2,\n            widthOfElement / 2 / 8, // Arbitrary\n            16 // Font size\n        );\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {thumbnailImageDataUrl && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={!!thumbnailImageDataUrl}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["FileItemEdit","fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","useEffect","getTruncatedText","description","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","FileUploadHelper","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","ActionButton","type","disabled","trim","length","onClick","styleType"],"mappings":"ulBA2BO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAV,GAEGW,EAAeC,GAAoBC,KACnCC,EAAoBC,GAAyBF,EAAiB,IAE/DG,EAAcC,EAA4B,MAC1CC,EAAiBD,EAAuB,MAK9CE,GAAU,KACNP,EAAiBQ,EAAiBb,GAAM,GACzC,CAACL,IAEJiB,GAAU,KACNJ,EAAsBf,EAASqB,aAAe,GAAG,GAClD,CAACrB,IAKJ,MAiBMoB,EAAoBE,IACtB,IAAKb,EAAc,OAAOa,EAE1B,MAAMC,EACFL,GAAkBA,EAAeM,QAC3BN,EAAeM,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,EAoBL,OACIM,EAACC,EAAI,CAAA,cAAc,GAAGxB,iBAAiByB,SAAA,CACnCF,EAACG,EAAc,CAAAD,SAAA,CACVrB,GACGuB,EAACC,EAAqB,CAClBxB,sBAAuBA,IAG/BmB,EAACM,EAAc,CAAAJ,SAAA,CAhBvBF,EAACO,EAAW,CAACC,IAAKnB,EAAca,SAAA,CAC5BE,EAACK,EAAY,CAACC,OAAO,oBAAY5B,IACjCsB,EAACO,EAAY,CAAAT,SACRU,EAAiBC,sBAAsBlC,QAepCyB,EAACU,EAAKC,UACFP,IAAKrB,EACLV,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOR,EACP+B,UAAW5C,EACX6C,SA7DEC,IAClBhC,EAAsBgC,EAAMC,OAAO1B,MAAM,EA6DzBjB,OA1DA0C,IAChB1C,EAAO0C,EAAMC,OAAO1B,MAAM,EA0DV2B,KAAM,eACM,yBAAyB1C,IACrC2C,MAAO,CACHnB,SAAU,oBACVoB,SACI,8EAKpBtB,EAACuB,gBAAmC1C,EAAqBqB,SAAA,CACrDE,EAACoB,iBACgB,GAAG/C,gBAChBgD,KAAK,SACLC,SA/CyB,IADVzC,EAAmB0C,OACpBC,OAgDdC,QApFG,KACX1C,EAAYQ,SACZrB,EAAOa,EAAYQ,QAAQF,MAAMkC,OACrC,EAiF+BzB,SAAA,SAIvBE,EAACoB,GACGC,KAAK,SACLK,UAAU,YAAW,cACR,GAAGrD,kBAChBoD,QAAStD,EAAQ2B,SAAA,gBAKtB"}
+{"version":3,"file":"file-item-edit.js","sources":["../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n    ActionButton,\n    ActionButtonsSection,\n    ContentSection,\n    DetailsSection,\n    FileNameText,\n    FileSizeText,\n    Item,\n    NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={shouldShowThumbnail}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["FileItemEdit","fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","fileType","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","$thumbnail","ActionButton","disabled","trim","length","onClick","styleType"],"mappings":"krBA2BO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAX,GAEGY,EAAeC,GAAoBC,KACnCC,EAAoBC,GAAyBF,EAAiB,IAE/DG,EAAcC,EAA4B,MAC1CC,EAAiBD,EAAuB,MAKxCE,EAAmBC,GACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,GAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,GAAU,KACNb,EAAsBhB,EAAS8B,aAAe,GAAG,GAClD,CAAC9B,IAKJ,MAmBM+B,IACApB,GAAyBF,IAASuB,EAAiBC,cAczD,OACIC,EAACC,EAAI,CAAA,cAAc,GAAG7B,iBAAiB8B,SAAA,CACnCF,EAACG,aACIN,GACGO,EAACC,EAAqB,CAClB5B,sBAAuBA,EACvB6B,SAAU/B,IAGlByB,EAACO,EAAc,CAAAL,SAAA,CAjBvBF,EAACQ,EAAW,CAACC,IAAKxB,EAAciB,SAAA,CAC5BE,EAACM,EAAY,CAACC,OAAO,oBAAYjC,IACjC0B,EAACQ,EAAY,CAAAV,SACRJ,EAAiBe,sBAAsBvC,QAgBpC8B,EAACU,EAAKC,SAAQ,CACVN,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPmC,UAAWjD,EACXkD,SA7CEC,IAClBpC,EAAsBoC,EAAMC,OAAO/B,MAAM,EA6CzBjB,OA1CA+C,IAChB/C,EAAO+C,EAAMC,OAAO/B,MAAM,EA0CVgC,KAAM,EAAC,aACK,yBAAyB/C,IACrCgD,MAAO,CACHnB,SAAU,oBACVoB,SACI,8EAKpBtB,EAACuB,EAAoB,CAAAC,WAAa3B,EAAmBK,SAAA,CACjDE,EAACqB,EAAY,CAAA,cACI,GAAGrD,gBAChBG,KAAK,SACLmD,SAnDyB,IADV7C,EAAmB8C,OACpBC,OAoDdC,QApEG,KACX9C,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAMuC,OACrC,EAiE+BzB,SAAA,SAIvBE,EAACqB,EAAY,CACTlD,KAAK,SACLuD,UAAU,0BACG,GAAG1D,kBAChByD,QAAS3D,EAAQgC,SAAA,gBAKtB"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\ninterface Props {\n    thumbnailImageDataUrl: string;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    return (\n        <Container data-testid={testId}>\n            <Thumbnail\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={thumbnailImageDataUrl}\n            />\n            {renderReplaceButton && (\n                <ReplaceButton type=\"button\" onClick={handleReplace}>\n                    Replace\n                </ReplaceButton>\n            )}\n        </Container>\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    width: auto;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    object-fit: cover;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const ReplaceButton = styled.button`\n    width: 100%;\n    height: 1.625rem;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    ${V3_Font[\"body-md-semibold\"]}\n    color: ${V3_Colour[\"text-primary\"]};\n\n    &:hover {\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["FileListItemThumbnail","thumbnailImageDataUrl","testId","renderReplaceButton","onReplaceClick","_jsxs","Container","children","_jsx","Thumbnail","undefined","src","ReplaceButton","type","onClick","styled","div","V3_Spacing","ImageWithFallback","V3_Radius","V3_Border","V3_Colour","V3_MediaQuery","MaxWidth","md","button","V3_Font"],"mappings":"iTAmBO,MAAMA,EAAwB,EACjCC,wBACA,cAAeC,EACfC,sBACAC,oBASIC,EAACC,iBAAuBJ,EAAMK,SAAA,CAC1BC,EAACC,EAAS,CAAA,cACOP,EAAS,GAAGA,eAAiBQ,EAC1CC,IAAKV,IAERE,GACGK,EAACI,EAAa,CAACC,KAAK,SAASC,QAbnB,KACdV,GACAA,GACJ,0BAqBKE,EAAYS,EAAOC,GAAG;;oBAEfC,EAAW;;;;;EAOlBR,EAAYM,EAAOG,EAAkB;;;;qBAI7BC,EAAc;cACrBC,EAAU,gBAAgBA,EAAiB;UAC/CC,EAAkB;;;MAGtBC,EAAcC,SAASC;;;;EAMhBZ,EAAgBG,EAAOU,MAAM;;;kBAGxBR,EAAW;;;;;MAKvBS,EAAQ;aACDL,EAAU;;;iBAGNA,EAAU;;"}
+{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport { FileUploadHelper } from \"../helper\";\n\ninterface Props {\n    thumbnailImageDataUrl?: string | undefined;\n    fileType?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    fileType,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    const isPdf = fileType === FileUploadHelper.PDF_MIME_TYPE;\n    const displaySrc = isPdf\n        ? thumbnailImageDataUrl || FileUploadHelper.PDF_ICON_URL\n        : thumbnailImageDataUrl || \"\";\n\n    return (\n        <Container data-testid={testId}>\n            <Thumbnail\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={displaySrc}\n                $isPdf={isPdf}\n            />\n            {renderReplaceButton && (\n                <ReplaceButton type=\"button\" onClick={handleReplace}>\n                    Replace\n                </ReplaceButton>\n            )}\n        </Container>\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    width: auto;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)<{ $isPdf?: boolean }>`\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${(props) =>\n        props.$isPdf\n            ? \"none\"\n            : `${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${V3_Colour[\"border\"]}`};\n    object-fit: cover;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const ReplaceButton = styled.button`\n    width: 100%;\n    height: 1.625rem;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    ${V3_Font[\"body-md-semibold\"]}\n    color: ${V3_Colour[\"text-primary\"]};\n\n    &:hover {\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["FileListItemThumbnail","thumbnailImageDataUrl","fileType","testId","renderReplaceButton","onReplaceClick","isPdf","FileUploadHelper","PDF_MIME_TYPE","displaySrc","PDF_ICON_URL","_jsxs","Container","children","_jsx","Thumbnail","undefined","src","$isPdf","ReplaceButton","type","onClick","styled","div","V3_Spacing","ImageWithFallback","V3_Radius","props","V3_Border","V3_Colour","V3_MediaQuery","MaxWidth","md","button","V3_Font"],"mappings":"iWAqBO,MAAMA,EAAwB,EACjCC,wBACAC,WACA,cAAeC,EACfC,sBACAC,qBAEA,MAMMC,EAAQJ,IAAaK,EAAiBC,cACtCC,EAAaH,EACbL,GAAyBM,EAAiBG,aAC1CT,GAAyB,GAE/B,OACIU,EAACC,EAAS,CAAA,cAAcT,EAAMU,SAAA,CAC1BC,EAACC,EAAS,CAAA,cACOZ,EAAS,GAAGA,eAAiBa,EAC1CC,IAAKR,EAAUS,OACPZ,IAEXF,GACGU,EAACK,EAAa,CAACC,KAAK,SAASC,QAnBnB,KACdhB,GACAA,GACJ,EAgB2DQ,SAAA,cAI/C,EAOPD,EAAYU,EAAOC,GAAG;;oBAEfC,EAAW;;;;;EAOlBT,EAAYO,EAAOG,EAAwC;;;;qBAInDC,EAAc;cACpBC,GACPA,EAAMT,OACA,OACA,GAAGU,EAAU,gBAAgBA,EAAiB,SAAKC,EAAkB;;;MAG7EC,EAAcC,SAASC;;;;EAMhBb,EAAgBG,EAAOW,MAAM;;;kBAGxBT,EAAW;;;;;MAKvBU,EAAQ;aACDL,EAAU;;;iBAGNA,EAAU;;"}

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

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

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

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