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

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

@@ -1,11 +1,9 @@
 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 {};

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\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 clsx from \"clsx\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { FileUploadHelper } from \"../helper\";\nimport * as styles from \"./file-list-item-thumbnail.styles\";\n\ninterface Props {\n    thumbnailImageDataUrl?: string | undefined;\n    fileType?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    fileType,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    const isPdf = fileType === FileUploadHelper.PDF_MIME_TYPE;\n    const displaySrc = isPdf\n        ? thumbnailImageDataUrl || FileUploadHelper.PDF_ICON_URL\n        : thumbnailImageDataUrl || \"\";\n\n    return (\n        <div className={styles.container} data-testid={testId}>\n            <ImageWithFallback\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={displaySrc}\n                className={clsx(styles.thumbnail, isPdf && styles.thumbnailPdf)}\n            />\n            {renderReplaceButton && (\n                <button\n                    type=\"button\"\n                    onClick={handleReplace}\n                    className={styles.replaceButton}\n                >\n                    Replace\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":["FileListItemThumbnail","thumbnailImageDataUrl","fileType","testId","renderReplaceButton","onReplaceClick","isPdf","FileUploadHelper","PDF_MIME_TYPE","displaySrc","PDF_ICON_URL","_jsxs","className","styles.container","children","_jsx","ImageWithFallback","undefined","src","clsx","styles.thumbnail","styles.thumbnailPdf","type","onClick","styles.replaceButton"],"mappings":"uUAcO,MAAMA,EAAwB,EACjCC,wBACAC,WACA,cAAeC,EACfC,sBACAC,qBAEA,MAMMC,EAAQJ,IAAaK,EAAiBC,cACtCC,EAAaH,EACbL,GAAyBM,EAAiBG,aAC1CT,GAAyB,GAE/B,OACIU,EAAA,MAAA,CAAKC,UAAWC,EAAgB,cAAeV,EAAMW,SAAA,CACjDC,EAACC,iBACgBb,EAAS,GAAGA,eAAiBc,EAC1CC,IAAKT,EACLG,UAAWO,EAAKC,EAAkBd,GAASe,KAE9CjB,GACGW,EAAA,SAAA,CACIO,KAAK,SACLC,QArBM,KACdlB,GACAA,GACJ,EAmBYO,UAAWY,EAAoBV,SAAA,cAKrC"}

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

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

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

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

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

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

package/file-upload/file-list-item/file-list-item-thumbnail.styles_1vrh1ve.css

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

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

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

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

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

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

@@ -1,65 +1,15 @@
 export type ItemFocusType = "self" | "others" | "none";
-interface ItemStyleProps {
-    $sortable: boolean;
-    $disabled?: boolean | undefined;
-    $focusType: ItemFocusType;
-}
-interface DragHandleIconStyleProps {
-    $disabled?: boolean | undefined;
-    $active?: boolean | undefined;
-}
-interface BoxStyleProps {
-    $error?: boolean | undefined;
-    $disabled?: boolean | undefined;
-    $focused?: boolean | undefined;
-    $loading?: boolean | undefined;
-    $editable?: boolean | undefined;
-}
-interface ContentSectionStyleProps {
-    $hasThumbnail?: boolean | undefined;
-}
-interface ActionContainerStyleProps {
-    $editable?: boolean | undefined;
-    $error?: boolean | undefined;
-    $loading?: boolean | undefined;
-}
-interface FileSizeSectionStyleProps {
-    $hideInMobile?: boolean | undefined;
-}
-export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ItemStyleProps>> & string;
-export declare const DragHandleIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, DragHandleIconStyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxStyleProps>> & string;
-export declare const ContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentSectionStyleProps>> & 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 ExtendedNameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSizeSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FileSizeSectionStyleProps>> & string;
-export declare const ItemText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const ItemDescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>, never>> & string;
-export declare const ErrorIcon: 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<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const BaseErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const DesktopErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>, never>> & string;
-export declare const MobileErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>, never>> & string;
-export declare const ActionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ActionContainerStyleProps>> & string;
-export declare const IconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ErrorIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const item: import("@linaria/core").LinariaClassName;
+export declare const dragHandleIcon: import("@linaria/core").LinariaClassName;
+export declare const box: import("@linaria/core").LinariaClassName;
+export declare const contentSection: import("@linaria/core").LinariaClassName;
+export declare const nameSection: import("@linaria/core").LinariaClassName;
+export declare const extendedNameSection: import("@linaria/core").LinariaClassName;
+export declare const fileSizeSection: import("@linaria/core").LinariaClassName;
+export declare const fileSizeText: import("@linaria/core").LinariaClassName;
+export declare const itemDescriptionText: import("@linaria/core").LinariaClassName;
+export declare const errorIcon: import("@linaria/core").LinariaClassName;
+export declare const desktopErrorMessage: import("@linaria/core").LinariaClassName;
+export declare const mobileErrorMessage: import("@linaria/core").LinariaClassName;
+export declare const actionContainer: import("@linaria/core").LinariaClassName;
+export declare const iconButton: import("@linaria/core").LinariaClassName;

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

@@ -1,180 +1,2 @@
-import{DragHandleIcon as i}from"@lifesg/react-icons/drag-handle";import{ExclamationCircleFillIcon as e}from"@lifesg/react-icons/exclamation-circle-fill";import o,{css as t}from"styled-components";import{IconButton as r}from"../../icon-button/icon-button.js";import{ClickableIcon as n}from"../../shared/clickable-icon/clickable-icon.js";import{Typography as d}from"../../typography/index.js";import{V3_Spacing as a,V3_Colour as l,V3_Border as s,V3_Radius as c,V3_MediaQuery as m,V3_Shadow as g}from"../../v3_theme/index.js";const $=o.li`
-    display: flex;
-    align-items: center;
-    width: 100%;
-    border: none;
-
-    &:not(:last-child) {
-        margin-bottom: ${a["spacing-16"]};
-    }
-
-    ${i=>i.$disabled&&"none"===i.$focusType?t`
-                cursor: not-allowed;
-            `:i.$sortable&&"self"===i.$focusType?t`
-                cursor: grabbing;
-                // Following recommendation by the library for touch events
-                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations
-                touch-action: manipulation;
-            `:i.$sortable?t`
-                &:hover {
-                    cursor: grab;
-                }
-                // Following recommendation by the library for touch events
-                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations
-                touch-action: manipulation;
-            `:void 0}
-`,h=o(i)`
-    margin-right: ${a["spacing-16"]};
-    height: 1.5rem;
-    width: 1.5rem;
-    color: ${l.icon};
-
-    ${i=>i.$active?t`
-                color: ${l["icon-primary"]};
-            `:i.$disabled?t`
-                color: ${l["icon-disabled"]};
-            `:void 0};
-`,p=o.div`
-    background: ${l["bg-primary-subtlest"]};
-    border: ${s["width-010"]} ${s.solid}
-        ${l.border};
-    border-radius: ${c.sm};
-    padding: ${a["spacing-16"]} ${a["spacing-32"]};
-    display: flex;
-    align-items: center;
-    width: 100%;
-
-    ${m.MaxWidth.md} {
-        padding: ${a["spacing-16"]};
-    }
-
-    ${i=>i.$focused?t`
-                border-color: ${l["border-focus"]};
-                box-shadow: ${g["xs-focus-strong"]};
-            `:i.$disabled?t`
-                border-color: ${l["border-disabled"]};
-            `:i.$error?t`
-                background: ${l["bg-error"]};
-                border-color: ${l["border-error"]};
-            `:void 0}
-
-    ${i=>{if(!i.$error&&(i.$loading||i.$editable))return t`
-                ${m.MaxWidth.md} {
-                    flex-direction: column;
-                    align-items: flex-start;
-                }
-            `}}
-`,f=o.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${m.MaxWidth.md} {
-        flex-direction: column;
-        width: 100%;
-        align-items: flex-start;
-    }
-
-    ${i=>{if(i.$hasThumbnail)return t`
-                ${m.MaxWidth.md} {
-                    flex-direction: row;
-                    align-items: center;
-                }
-            `}}
-`,b=o.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    width: 100%;
-`,x=o.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${m.MaxWidth.md} {
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-    }
-`,u=o.div`
-    display: flex;
-    width: 5rem;
-    margin-left: ${a["spacing-8"]};
-    justify-content: flex-end;
-
-    ${m.MaxWidth.md} {
-        ${i=>i.$hideInMobile?t`
-                    display: none;
-                    visibility: hidden;
-                `:t`
-                    width: 100%;
-                    margin-left: 0;
-                    margin-top: ${a["spacing-8"]};
-                    justify-content: flex-start;
-                `}
-    }
-`,y=o(d.BodyMD)``,v=o(y)`
-    margin-top: ${a["spacing-4"]};
-`,w=o(e)`
-    height: 1lh;
-    width: 1em;
-    flex-shrink: 0;
-    color: ${l["icon-error-strong"]};
-`,M=o(d.BodySM)`
-    color: ${l["text-error"]};
-`,W=o(M)`
-    margin-top: ${a["spacing-4"]};
-    display: flex;
-    gap: ${a["spacing-4"]};
-
-    ${m.MaxWidth.md} {
-        display: none;
-        visibility: hidden;
-    }
-`,j=o(M)`
-    display: none;
-    visibility: hidden;
-
-    ${m.MaxWidth.md} {
-        display: flex;
-        gap: ${a["spacing-4"]};
-        visibility: visible;
-        margin-top: ${a["spacing-8"]};
-    }
-`,k=o.div`
-    width: 6rem;
-    margin-left: ${a["spacing-32"]};
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    ${m.MaxWidth.md} {
-        width: fit-content;
-
-        ${i=>i.$loading&&!i.$error?t`
-                    margin-left: 0;
-                    margin-top: ${a["spacing-16"]};
-                    width: 100%;
-                `:i.$editable&&!i.$error?t`
-                    margin-left: 0;
-                    margin-top: ${a["spacing-16"]};
-                    align-self: flex-end;
-                `:void 0}
-    }
-`,B=o(r)`
-    min-width: unset;
-
-    &:not(:last-child) {
-        margin-right: ${a["spacing-16"]};
-    }
-`,I=o(n)`
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: unset;
-    svg {
-        height: 1.5rem;
-        width: 1.5rem;
-        color: ${l.icon};
-    }
-`;export{k as ActionContainer,M as BaseErrorMessage,p as Box,f as ContentSection,W as DesktopErrorMessage,h as DragHandleIcon,w as ErrorIcon,I as ErrorIconButton,x as ExtendedNameSection,u as FileSizeSection,B as IconButton,$ as Item,v as ItemDescriptionText,y as ItemText,j as MobileErrorMessage,b as NameSection};
+import"./file-list-item.styles_y7my2m.css";const e="i18pxk0j",i="dqb8x5u",l="bddx9rr",t="c1dhzflv",s="nk38w4a",d="elwke9e",f="f14h64yt",m="f1wv8fjl",o="iivlkvo",k="e1jm950n",p="d1vgco4e",v="map0p9n",a="a1gk2zsk",c="i1wh4bod";export{a as actionContainer,l as box,t as contentSection,p as desktopErrorMessage,i as dragHandleIcon,k as errorIcon,d as extendedNameSection,f as fileSizeSection,m as fileSizeText,c as iconButton,e as item,o as itemDescriptionText,v as mobileErrorMessage,s as nameSection};
 //# sourceMappingURL=file-list-item.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ClickableIcon } from \"../../shared/clickable-icon\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n    $sortable: boolean;\n    $disabled?: boolean | undefined;\n    $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n    $disabled?: boolean | undefined;\n    $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n    $disabled?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $editable?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n    $editable?: boolean | undefined;\n    $error?: boolean | undefined;\n    $loading?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n    $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$disabled && props.$focusType === \"none\") {\n            // Show disabled cursor only if no dragging is happening\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$sortable && props.$focusType === \"self\") {\n            return css`\n                cursor: grabbing;\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        } else if (props.$sortable) {\n            return css`\n                &:hover {\n                    cursor: grab;\n                }\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        }\n    }}\n`;\n\nexport const DragHandleIcon = styled(\n    DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${V3_Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${V3_Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    background: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${V3_Colour[\"border-focus\"]};\n                box-shadow: ${V3_Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${V3_Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: column;\n                    align-items: flex-start;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        ${(props) => {\n            if (props.$hideInMobile) {\n                return css`\n                    display: none;\n                    visibility: hidden;\n                `;\n            } else {\n                return css`\n                    width: 100%;\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\nexport const ItemDescriptionText = styled(ItemText)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${V3_Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: fit-content;\n\n        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    align-self: flex-end;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ErrorIconButton = styled(ClickableIcon)`\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: unset;\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${V3_Colour[\"icon\"]};\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","V3_Colour","$active","Box","div","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","md","$focused","V3_Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","ItemText","Typography","BodyMD","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","IconButton","DSIconButton","ErrorIconButton","ClickableIcon"],"mappings":"2gBAwDO,MAAMA,EAAOC,EAAOC,EAAkB;;;;;;;yBAOpBC,EAAW;;;MAG7BC,GACKA,EAAMC,WAAkC,SAArBD,EAAME,WAElBC,CAAG;;cAGHH,EAAMI,WAAkC,SAArBJ,EAAME,WACzBC,CAAG;;;;;cAMHH,EAAMI,UACND,CAAG;;;;;;;mBADP;EAaFE,EAAiBR,EAC1BS,EACuB;oBACPP,EAAW;;;aAGlBQ,EAAgB;;MAEtBP,GACKA,EAAMQ,QACCL,CAAG;yBACGI,EAAU;cAIvBP,EAAMC,UACCE,CAAG;yBACGI,EAAU;mBAF3B;EAQKE,EAAMZ,EAAOa,GAAkB;kBAC1BH,EAAU;cACdI,EAAU,gBAAgBA,EAAiB;UAC/CJ,EAAkB;qBACPK,EAAc;eACpBb,EAAW,iBAAiBA,EAAW;;;;;MAKhDc,EAAcC,SAASC;mBACVhB,EAAW;;;MAGvBC,GACKA,EAAMgB,SACCb,CAAG;gCACUI,EAAU;8BACZU,EAAU;cAErBjB,EAAMC,UACNE,CAAG;gCACUI,EAAU;cAEvBP,EAAMkB,OACNf,CAAG;8BACQI,EAAU;gCACRA,EAAU;mBAH3B;;MAQRP,IACC,IAAKA,EAAMkB,SAAWlB,EAAMmB,UAAYnB,EAAMoB,WAC1C,OAAOjB,CAAG;kBACJU,EAAcC,SAASC;;;;aAKjC;EAIKM,EAAiBxB,EAAOa,GAA6B;;;;;MAK5DG,EAAcC,SAASC;;;;;;MAMtBf,IACC,GAAIA,EAAMsB,cACN,OAAOnB,CAAG;kBACJU,EAAcC,SAASC;;;;aAKjC;EAIKQ,EAAc1B,EAAOa,GAAG;;;;;EAOxBc,EAAsB3B,EAAOa,GAAG;;;;;MAKvCG,EAAcC,SAASC;;;;;EAOhBU,EAAkB5B,EAAOa,GAA8B;;;mBAGjDX,EAAW;;;MAGxBc,EAAcC,SAASC;UAClBf,GACKA,EAAM0B,cACCvB,CAAG;;;kBAKHA,CAAG;;;kCAGQJ,EAAW;;;;EAQhC4B,EAAW9B,EAAO+B,EAAWC,OAAO,GACpCC,EAAsBjC,EAAO8B,EAAS;kBACjC5B,EAAW;EAGhBgC,EAAYlC,EAAOmC,EAA0B;;;;aAI7CzB,EAAU;EAGV0B,EAAmBpC,EAAO+B,EAAWM,OAAO;aAC5C3B,EAAU;EAGV4B,EAAsBtC,EAAOoC,EAAiB;kBACzClC,EAAW;;WAElBA,EAAW;;MAEhBc,EAAcC,SAASC;;;;EAMhBqB,EAAqBvC,EAAOoC,EAAiB;;;;MAIpDpB,EAAcC,SAASC;;eAEdhB,EAAW;;sBAEJA,EAAW;;EAIpBsC,EAAkBxC,EAAOa,GAA8B;;mBAEjDX,EAAW;;;;;MAKxBc,EAAcC,SAASC;;;UAGlBf,GACKA,EAAMmB,WAAanB,EAAMkB,OAClBf,CAAG;;kCAEQJ,EAAW;;kBAGtBC,EAAMoB,YAAcpB,EAAMkB,OAC1Bf,CAAG;;kCAEQJ,EAAW;;uBAH1B;;EAWNuC,EAAazC,EAAO0C,EAAa;;;;wBAItBxC,EAAW;;EAItByC,EAAkB3C,EAAO4C,EAAc;;;;;;;iBAOnClC,EAAgB;;"}
+{"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\n\nexport const item = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n    &[data-item-state=\"disabled\"] {\n        cursor: not-allowed;\n    }\n\n    &[data-item-state=\"sortable\"] {\n        &:hover {\n            cursor: grab;\n        }\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n\n    &[data-item-state=\"sortable-active\"] {\n        cursor: grabbing;\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n`;\n\nexport const dragHandleIcon = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    &[data-drag-handle-state=\"active\"] {\n        color: ${Colour[\"icon-primary\"]};\n    }\n\n    &[data-drag-handle-state=\"disabled\"] {\n        color: ${Colour[\"icon-disabled\"]};\n    }\n`;\n\nexport const box = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-box-state=\"focused\"] {\n        border-color: ${Colour[\"border-focus\"]};\n        box-shadow: ${Shadow[\"xs-focus-strong\"]};\n    }\n\n    &[data-box-state=\"disabled\"] {\n        border-color: ${Colour[\"border-disabled\"]};\n    }\n\n    &[data-box-state=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border-color: ${Colour[\"border-error\"]};\n    }\n\n    &[data-stack-mobile=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: column;\n            align-items: flex-start;\n        }\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    &[data-has-thumbnail=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: row;\n            align-items: center;\n        }\n    }\n`;\n\nexport const nameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const extendedNameSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    &[data-mobile-visibility=\"hidden\"] {\n        ${MediaQuery.MaxWidth.md} {\n            display: none;\n            visibility: hidden;\n        }\n    }\n\n    &[data-mobile-visibility=\"expand\"] {\n        ${MediaQuery.MaxWidth.md} {\n            width: 100%;\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-8\"]};\n            justify-content: flex-start;\n        }\n    }\n`;\n\nexport const fileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const itemDescriptionText = css`\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: fit-content;\n    }\n\n    &[data-mobile-layout=\"loading\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            width: 100%;\n        }\n    }\n\n    &[data-mobile-layout=\"editable\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            align-self: flex-end;\n        }\n    }\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n"],"names":["item","dragHandleIcon","box","contentSection","nameSection","extendedNameSection","fileSizeSection","fileSizeText","itemDescriptionText","errorIcon","desktopErrorMessage","mobileErrorMessage","actionContainer","iconButton"],"mappings":"qFAaO,MAAMA,EAAI,WAgCJC,EAAc,UAedC,EAAG,UAmCHC,EAAc,WAmBdC,EAAW,UAOXC,EAAmB,UAYnBC,EAAe,WAuBfC,EAAY,WAIZC,EAAmB,UAInBC,EAAS,WAOTC,EAAmB,WAYnBC,EAAkB,UAalBC,EAAe,WA4BfC,EAAU"}

package/file-upload/file-list-item/file-list-item.styles_y7my2m.css

@@ -0,0 +1,14 @@
+.i18pxk0j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border:none;}.i18pxk0j:not(:last-child){margin-bottom:var(--fds-spacing-16);}.i18pxk0j[data-item-state="disabled"]{cursor:not-allowed;}.i18pxk0j[data-item-state="sortable"]{touch-action:manipulation;}.i18pxk0j[data-item-state="sortable"]:hover{cursor:-webkit-grab;cursor:grab;}.i18pxk0j[data-item-state="sortable-active"]{cursor:-webkit-grabbing;cursor:grabbing;touch-action:manipulation;}
+.dqb8x5u{margin-right:var(--fds-spacing-16);height:1.5rem;width:1.5rem;color:var(--fds-colour-icon);}.dqb8x5u[data-drag-handle-state="active"]{color:var(--fds-colour-icon-primary);}.dqb8x5u[data-drag-handle-state="disabled"]{color:var(--fds-colour-icon-disabled);}
+.bddx9rr{background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);padding:var(--fds-spacing-16) var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}:where(body.fds-breakpoint-md-max) .bddx9rr{padding:var(--fds-spacing-16);}.bddx9rr[data-box-state="focused"]{border-color:var(--fds-colour-border-focus);box-shadow:var(--fds-shadow-xs-focus-strong);}.bddx9rr[data-box-state="disabled"]{border-color:var(--fds-colour-border-disabled);}.bddx9rr[data-box-state="error"]{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}:where(body.fds-breakpoint-md-max) .bddx9rr[data-stack-mobile="true"]{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.c1dhzflv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .c1dhzflv{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}:where(body.fds-breakpoint-md-max) .c1dhzflv[data-has-thumbnail="true"]{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.nk38w4a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}
+.elwke9e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .elwke9e{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
+.f14h64yt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:5rem;margin-left:var(--fds-spacing-8);-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}:where(body.fds-breakpoint-md-max) .f14h64yt[data-mobile-visibility="hidden"]{display:none;visibility:hidden;}:where(body.fds-breakpoint-md-max) .f14h64yt[data-mobile-visibility="expand"]{width:100%;margin-left:0;margin-top:var(--fds-spacing-8);-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}
+.f1wv8fjl{color:var(--fds-colour-text-subtler);}
+.iivlkvo{margin-top:var(--fds-spacing-4);}
+.e1jm950n{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
+.d1vgco4e{color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-4);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-md-max) .d1vgco4e{display:none;visibility:hidden;}
+.map0p9n{color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-md-max) .map0p9n{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}
+.a1gk2zsk{width:6rem;margin-left:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .a1gk2zsk{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}:where(body.fds-breakpoint-md-max) .a1gk2zsk[data-mobile-layout="loading"]{margin-left:0;margin-top:var(--fds-spacing-16);width:100%;}:where(body.fds-breakpoint-md-max) .a1gk2zsk[data-mobile-layout="editable"]{margin-left:0;margin-top:var(--fds-spacing-16);-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;}
+.i1wh4bod{min-width:unset;}.i1wh4bod:not(:last-child){margin-right:var(--fds-spacing-16);}

package/file-upload/file-list.js

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