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

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

@@ -1,43 +1,48 @@
-import t,{css as i}from"styled-components";import{Button as n}from"../button/button.js";import{Spacing as o,Border as a,Colour as d,MediaQuery as r}from"../theme/index.js";import{Typography as e}from"../typography/typography.js";const l=t.li`
+import t,{css as i}from"styled-components";import{Button as n}from"../button/button.js";import{Spacing as o,Colour as a,Border as r,Radius as e,MediaQuery as d}from"../theme/index.js";import{Typography as l}from"../typography/typography.js";const m=t.li`
     display: flex;
     flex-direction: column;
-    padding: ${o["spacing-32"]} 0;
-    background: transparent;
+    padding: ${o["spacing-32"]};
+    background: ${a["bg-primary-subtlest"]};
+    border: ${r["width-010"]} ${r.solid} ${a.border};
+    border-radius: ${e.sm};
 
     &:not(:last-child) {
-        border-bottom: ${a["width-010"]} ${a.solid} ${d.border};
+        margin-bottom: ${o["spacing-16"]};
     }
-`,m=t.div`
+`,s=t.div`
     display: flex;
     align-items: flex-start;
     margin-bottom: ${o["spacing-16"]};
     width: 100%;
-`,s=t.div`
+`,p=t.div`
     display: flex;
     flex: 1;
     flex-direction: column;
-`,p=t.div`
+`,g=t.div`
     width: 100%;
     display: flex;
     justify-content: space-between;
     margin-bottom: ${o["spacing-16"]};
 
-    ${r.MaxWidth.md} {
+    ${d.MaxWidth.md} {
         flex-direction: column;
         justify-content: flex-start;
     }
-`,g=t(e.BodyMD)`
+`,c=t(l.BodyMD)`
     display: flex;
     flex: 1;
     margin-right: ${o["spacing-16"]};
 
-    ${r.MaxWidth.md} {
+    ${d.MaxWidth.md} {
         margin-right: 0;
         margin-bottom: ${o["spacing-8"]};
     }
-`,c=t(e.BodyMD)``,f=t.div`
+`,f=t(l.BodyMD)`
+    color: ${a["text-subtler"]};
+`,x=t.div`
     display: flex;
-    ${r.MaxWidth.md} {
+    justify-content: flex-end;
+    ${d.MaxWidth.md} {
         flex-direction: column;
     }
 
@@ -46,21 +51,21 @@ import t,{css as i}from"styled-components";import{Button as n}from"../button/but
                     96px + ${o["spacing-32"]}
                 ); // thumbnail width + right margin
 
-                ${r.MaxWidth.md} {
+                ${d.MaxWidth.md} {
                     margin-left: 0;
                 }
             `}}
-`,x=t(n.Small)`
+`,$=t(n.Small)`
     width: 7.5rem;
     &:not(:last-of-type) {
         margin-right: ${o["spacing-16"]};
     }
 
-    ${r.MaxWidth.md} {
+    ${d.MaxWidth.md} {
         width: 100%;
         &:not(:last-of-type) {
             margin-bottom: ${o["spacing-16"]};
         }
     }
-`;export{x as ActionButton,f as ActionButtonsSection,m as ContentSection,s as DetailsSection,g as FileNameText,c as FileSizeText,l as Item,p as NameSection};
+`;export{$ as ActionButton,x as ActionButtonsSection,s as ContentSection,p as DetailsSection,c as FileNameText,f as FileSizeText,m as Item,g as NameSection};
 //# sourceMappingURL=file-item-edit.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.styles.js","sources":["../../src/file-upload/file-item-edit.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../button/button\";\nimport { Border, Colour, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ActionButtonSectionStyleProps {\n    $thumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-32\"]} 0;\n    background: transparent;\n\n    &:not(:last-child) {\n        border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    }\n`;\n\nexport const ContentSection = styled.div`\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    width: 100%;\n`;\n\nexport const DetailsSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n`;\n\nexport const NameSection = styled.div`\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        justify-content: flex-start;\n    }\n`;\n\nexport const FileNameText = styled(Typography.BodyMD)`\n    display: flex;\n    flex: 1;\n    margin-right: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-right: 0;\n        margin-bottom: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)``;\n\nexport const ActionButtonsSection = styled.div<ActionButtonSectionStyleProps>`\n    display: flex;\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n\n    ${(props) => {\n        if (props.$thumbnail) {\n            return css`\n                margin-left: calc(\n                    96px + ${Spacing[\"spacing-32\"]}\n                ); // thumbnail width + right margin\n\n                ${MediaQuery.MaxWidth.md} {\n                    margin-left: 0;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    width: 7.5rem;\n    &:not(:last-of-type) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n        &:not(:last-of-type) {\n            margin-bottom: ${Spacing[\"spacing-16\"]};\n        }\n    }\n`;\n"],"names":["Item","styled","li","Spacing","Border","solid","Colour","border","ContentSection","div","DetailsSection","NameSection","MediaQuery","MaxWidth","md","FileNameText","Typography","BodyMD","FileSizeText","ActionButtonsSection","props","$thumbnail","css","ActionButton","Button","Small"],"mappings":"qOAeO,MAAMA,EAAOC,EAAOC,EAAE;;;eAGdC,EAAQ;;;;yBAIEC,EAAO,gBAAgBA,EAAOC,SAASC,EAAOC;;EAI1DC,EAAiBP,EAAOQ,GAAG;;;qBAGnBN,EAAQ;;EAIhBO,EAAiBT,EAAOQ,GAAG;;;;EAM3BE,EAAcV,EAAOQ,GAAG;;;;qBAIhBN,EAAQ;;MAEvBS,EAAWC,SAASC;;;;EAMbC,EAAed,EAAOe,EAAWC,OAAO;;;oBAGjCd,EAAQ;;MAEtBS,EAAWC,SAASC;;yBAEDX,EAAQ;;EAIpBe,EAAejB,EAAOe,EAAWC,OAAO,GAExCE,EAAuBlB,EAAOQ,GAAkC;;MAEvEG,EAAWC,SAASC;;;;MAInBM,IACC,GAAIA,EAAMC,WACN,OAAOC,CAAG;;6BAEOnB,EAAQ;;;kBAGnBS,EAAWC,SAASC;;;aAI9B;EAIKS,EAAetB,EAAOuB,EAAOC,MAAM;;;wBAGxBtB,EAAQ;;;MAG1BS,EAAWC,SAASC;;;6BAGGX,EAAQ;;;"}
+{"version":3,"file":"file-item-edit.styles.js","sources":["../../src/file-upload/file-item-edit.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../button/button\";\nimport { Border, Colour, MediaQuery, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ActionButtonSectionStyleProps {\n    $thumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-radius: ${Radius[\"sm\"]};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ContentSection = styled.div`\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    width: 100%;\n`;\n\nexport const DetailsSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n`;\n\nexport const NameSection = styled.div`\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        justify-content: flex-start;\n    }\n`;\n\nexport const FileNameText = styled(Typography.BodyMD)`\n    display: flex;\n    flex: 1;\n    margin-right: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-right: 0;\n        margin-bottom: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const ActionButtonsSection = styled.div<ActionButtonSectionStyleProps>`\n    display: flex;\n    justify-content: flex-end;\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n\n    ${(props) => {\n        if (props.$thumbnail) {\n            return css`\n                margin-left: calc(\n                    96px + ${Spacing[\"spacing-32\"]}\n                ); // thumbnail width + right margin\n\n                ${MediaQuery.MaxWidth.md} {\n                    margin-left: 0;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    width: 7.5rem;\n    &:not(:last-of-type) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n        &:not(:last-of-type) {\n            margin-bottom: ${Spacing[\"spacing-16\"]};\n        }\n    }\n`;\n"],"names":["Item","styled","li","Spacing","Colour","Border","solid","border","Radius","ContentSection","div","DetailsSection","NameSection","MediaQuery","MaxWidth","md","FileNameText","Typography","BodyMD","FileSizeText","ActionButtonsSection","props","$thumbnail","css","ActionButton","Button","Small"],"mappings":"iPAeO,MAAMA,EAAOC,EAAOC,EAAE;;;eAGdC,EAAQ;kBACLC,EAAO;cACXC,EAAO,gBAAgBA,EAAOC,SAASF,EAAOG;qBACvCC,EAAW;;;yBAGPL,EAAQ;;EAIpBM,EAAiBR,EAAOS,GAAG;;;qBAGnBP,EAAQ;;EAIhBQ,EAAiBV,EAAOS,GAAG;;;;EAM3BE,EAAcX,EAAOS,GAAG;;;;qBAIhBP,EAAQ;;MAEvBU,EAAWC,SAASC;;;;EAMbC,EAAef,EAAOgB,EAAWC,OAAO;;;oBAGjCf,EAAQ;;MAEtBU,EAAWC,SAASC;;yBAEDZ,EAAQ;;EAIpBgB,EAAelB,EAAOgB,EAAWC,OAAO;aACxCd,EAAO;EAGPgB,EAAuBnB,EAAOS,GAAkC;;;MAGvEG,EAAWC,SAASC;;;;MAInBM,IACC,GAAIA,EAAMC,WACN,OAAOC,CAAG;;6BAEOpB,EAAQ;;;kBAGnBU,EAAWC,SAASC;;;aAI9B;EAIKS,EAAevB,EAAOwB,EAAOC,MAAM;;;wBAGxBvB,EAAQ;;;MAG1BU,EAAWC,SAASC;;;6BAGGZ,EAAQ;;;"}

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

@@ -1,6 +1,8 @@
+import { FormLabelProps } from "../../form/types";
 import { FileListItemProps } from "./types";
 interface Props extends FileListItemProps {
     readOnly?: boolean | undefined;
+    descriptionLabel?: FormLabelProps | undefined;
 }
-export declare const FileListItem: import("react").MemoExoticComponent<({ fileItem, editable, sortable, wrapperWidth, disabled, readOnly, onDelete, onEditClick, }: Props) => import("react/jsx-runtime").JSX.Element>;
+export declare const FileListItem: import("react").MemoExoticComponent<({ fileItem, editable, sortable, wrapperWidth, disabled, readOnly, descriptionLabel, onDelete, onEditClick, }: Props) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{useSortable as r}from"../../external/@dnd-kit/sortable/dist/sortable.esm.js";import{CSS as l}from"../../external/@dnd-kit/utilities/dist/utilities.esm.js";import{BinIcon as n}from"@lifesg/react-icons/bin";import{PencilIcon as a}from"@lifesg/react-icons/pencil";import{memo as d,useState as s,useContext as o,useRef as c,useCallback as h,useEffect as m}from"react";import{ProgressBar as p}from"../../shared/progress-bar/progress-bar.js";import"../../util/calendar-helper.js";import"../../util/date-helper.js";import"../../util/date-input-helper.js";import"../../util/simple-id-generator.js";import{StringHelper as b}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{FileUploadContext as u}from"../context.js";import{FileUploadHelper as f}from"../helper.js";import{FileListItemThumbnail as g}from"./file-list-item-thumbnail.js";import{Item as $,DragHandleIcon as y,Box as j,ContentSection as T,IconButton as w,ActionContainer as D,NameSection as k,DesktopErrorMessage as x,ErrorIcon as I,FileSizeSection as z,FileSizeText as C,MobileErrorMessage as O,ExtendedNameSection as M,ItemText as v,ItemDescriptionText as E}from"./file-list-item.styles.js";const P=d((({fileItem:d,editable:P,sortable:F,wrapperWidth:K,disabled:R,readOnly:S,onDelete:U,onEditClick:_})=>{const{id:B,name:L,size:N,description:W,progress:Y=1,errorMessage:q,thumbnailImageDataUrl:A,truncateText:G=!0}=d,[H,J]=s(),{activeId:Q}=o(u),{attributes:V,listeners:X,setNodeRef:Z,transform:ee,transition:te}=r({id:B}),ie=c(null),re={transform:l.Translate.toString(ee),transition:te},le=Object.assign(Object.assign({style:re},V),X),ne=Y<1,ae=f.formatFileSizeDisplay(N),de=Q?Q===B?"self":"others":"none",se=h((e=>{if(!G)return e;const t=ie&&ie.current?ie.current.getBoundingClientRect().width:0;return b.truncateOneLine(e,t,t/2,t/2/8,16)}),[G]);m((()=>{J(se(L))}),[K,se,L]);const oe=()=>{U()},ce=()=>{_&&_()},he=e=>{F&&e.stopPropagation()},me=()=>R||!!Q,pe=()=>!!F&&!S,be=()=>e(i,{children:[t(v,{weight:W?"semibold":"regular",children:H}),W&&t(E,{children:W})]});return e($,Object.assign({id:B,ref:Z,$sortable:pe(),$disabled:me(),$focusType:de},pe()?le:{},{children:[pe()&&t(y,{"data-testid":`${B}-drag-handle`,$disabled:me(),$active:"self"===de}),e(j,{$focused:"self"===de,$error:!!q,$loading:ne,$disabled:me(),$editable:P,children:[(()=>{let r;const l=!!A||d.type===f.PDF_MIME_TYPE;return r=q?e(i,{children:[e(k,{ref:ie,children:[be(),q&&e(x,{weight:"semibold",children:[t(I,{"aria-hidden":!0}),q]})]}),t(z,{children:t(C,{children:ae})}),q&&e(O,{weight:"semibold",children:[t(I,{"aria-hidden":!0}),q]})]}):l?(r=>e(i,{children:[t(g,{thumbnailImageDataUrl:r,fileType:d.type,"data-testid":`${B}-thumbnail`}),e(M,{children:[t(k,{ref:ie,children:be()}),t(z,{children:t(C,{children:ae})})]})]}))(A||""):e(i,{children:[t(k,{ref:ie,children:be()}),t(z,{$hideInMobile:ne,children:t(C,{children:ae})})]}),t(T,{$hasThumbnail:l,children:r})})(),!S&&(()=>{let r;return r=q?t(w,{"data-testid":`${B}-error-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${L}, error: ${q}`,onClick:oe,children:t(n,{"aria-hidden":!0})}):ne?t(p,{progress:Y,"data-testid":`${B}-progress-bar`}):e(i,{children:[P&&t(w,{"data-testid":`${B}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${L}`,disabled:me(),onClick:ce,onKeyDown:he,children:t(a,{"aria-hidden":!0})},"edit"),t(w,{"data-testid":`${B}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${L}`,disabled:me(),onClick:oe,onKeyDown:he,children:t(n,{"aria-hidden":!0})},"delete")]}),t(D,{$editable:P,$error:!!q,$loading:ne,children:r})})()]})]}))}));export{P as FileListItem};
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{useSortable as r}from"../../external/@dnd-kit/sortable/dist/sortable.esm.js";import{CSS as l}from"../../external/@dnd-kit/utilities/dist/utilities.esm.js";import{BinIcon as n}from"@lifesg/react-icons/bin";import{PencilIcon as d}from"@lifesg/react-icons/pencil";import{memo as a,useState as o,useContext as s,useRef as c,useCallback as h,useEffect as p}from"react";import{ProgressBar as m}from"../../shared/progress-bar/progress-bar.js";import"../../util/calendar-helper.js";import"../../util/date-helper.js";import"../../util/date-input-helper.js";import"../../util/simple-id-generator.js";import{StringHelper as u}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{FileUploadContext as b}from"../context.js";import{FileUploadHelper as $}from"../helper.js";import{FileListItemThumbnail as g}from"./file-list-item-thumbnail.js";import{Item as y,DragHandleIcon as f,Box as T,ContentSection as j,IconButton as D,ActionContainer as w,NameSection as v,DesktopErrorMessage as k,ErrorIcon as z,FileSizeSection as C,FileSizeText as P,MobileErrorMessage as x,DescriptionFileSizeText as I,ItemText as E,ItemDescriptionLabel as M,ItemDescriptionText as O,ExtendedNameSection as K}from"./file-list-item.styles.js";const _=a((({fileItem:a,editable:_,sortable:F,wrapperWidth:L,disabled:R,readOnly:S,descriptionLabel:U,onDelete:Y,onEditClick:B})=>{const{id:N,name:W,size:q,description:A,progress:G=1,errorMessage:H,thumbnailImageDataUrl:J,truncateText:Q=!0}=a,[V,X]=o(),{activeId:Z}=s(b),{attributes:ee,listeners:te,setNodeRef:ie,transform:re,transition:le}=r({id:N}),ne=c(null),de={transform:l.Translate.toString(re),transition:le},ae=Object.assign(Object.assign({style:de},ee),te),oe=G<1,se=$.formatFileSizeDisplay(q),ce=!!A&&!!_,he=Z?Z===N?"self":"others":"none",pe=h((e=>{if(!Q)return e;const t=ne&&ne.current?ne.current.getBoundingClientRect().width:0;return u.truncateOneLine(e,t,t/2,t/2/8,16)}),[Q]);p((()=>{X(pe(W))}),[L,pe,W]);const me=()=>{Y()},ue=()=>{B&&B()},be=e=>{F&&e.stopPropagation()},$e=()=>R||!!Z,ge=()=>!!F&&!S,ye=()=>{var r;return e(i,{children:[t(E,{weight:A?"semibold":"regular",children:V}),A&&e(i,{children:[t(M,{children:null!==(r=null==U?void 0:U.children)&&void 0!==r?r:"Photo description"}),t(O,{children:A})]})]})};return e(y,Object.assign({id:N,ref:ie,$sortable:ge(),$disabled:$e(),$focusType:he},ge()?ae:{},{children:[ge()&&t(f,{"data-testid":`${N}-drag-handle`,$disabled:$e(),$active:"self"===he}),e(T,{$focused:"self"===he,$error:!!H,$loading:oe,$disabled:$e(),$editable:_,$hasDescription:!!A,children:[(()=>{const r=!!J||a.type===$.PDF_MIME_TYPE,l=H?e(i,{children:[e(v,{ref:ne,children:[ye(),H&&e(k,{weight:"semibold",children:[t(z,{"aria-hidden":!0}),H]})]}),t(C,{children:t(P,{children:se})}),H&&e(x,{weight:"semibold",children:[t(z,{"aria-hidden":!0}),H]})]}):(r=>{const l=r||a.type===$.PDF_MIME_TYPE?t(g,{thumbnailImageDataUrl:r||"",fileType:a.type,"data-testid":`${N}-thumbnail`}):null;return e(i,ce?{children:[l,e(K,{ref:ne,children:[t(E,{weight:"semibold",children:V}),t(M,{children:null!==(o=null==U?void 0:U.children)&&void 0!==o?o:"Photo description"}),t(O,{children:A}),t(I,{children:se}),!S&&ce&&e(w,{$editable:_,$error:!1,$loading:!1,$hasDescription:!0,children:[t(D,{"data-testid":`${N}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${W}`,disabled:$e(),onClick:ue,onKeyDown:be,children:t(d,{"aria-hidden":!0})},"edit"),t(D,{"data-testid":`${N}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${W}`,disabled:$e(),onClick:me,onKeyDown:be,children:t(n,{"aria-hidden":!0})},"delete")]})]})]}:{children:[l,e(v,{ref:ne,children:[ye(),!oe&&t(I,{children:se})]})]});var o})(J);return t(j,{$hasThumbnail:r,children:l})})(),!S&&!ce&&(()=>{let r;return r=H?t(D,{"data-testid":`${N}-error-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${W}, error: ${H}`,onClick:me,children:t(n,{"aria-hidden":!0})}):oe?t(m,{progress:G,"data-testid":`${N}-progress-bar`}):e(i,{children:[_&&t(D,{"data-testid":`${N}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${W}`,disabled:$e(),onClick:ue,onKeyDown:be,children:t(d,{"aria-hidden":!0})},"edit"),t(D,{"data-testid":`${N}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${W}`,disabled:$e(),onClick:me,onKeyDown:be,children:t(n,{"aria-hidden":!0})},"delete")]}),t(w,{$editable:_,$error:!!H,$loading:oe,$hasDescription:!!A,children:r})})()]})]}))}));export{_ as FileListItem};
 //# 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 { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport { memo, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DesktopErrorMessage,\n    DragHandleIcon,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    FileSizeText,\n    IconButton,\n    Item,\n    ItemDescriptionText,\n    ItemFocusType,\n    ItemText,\n    MobileErrorMessage,\n    NameSection,\n} from \"./file-list-item.styles\";\nimport { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n    readOnly?: boolean | undefined;\n}\n\nconst Component = ({\n    fileItem,\n    editable,\n    sortable,\n    wrapperWidth,\n    disabled,\n    readOnly,\n    onDelete,\n    onEditClick,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        description,\n        progress = 1,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n    } = fileItem;\n    const [formattedName, setFormattedName] = useState<string>();\n    const { activeId } = useContext(FileUploadContext);\n\n    // Sortable mechanism\n    const { attributes, listeners, setNodeRef, transform, transition } =\n        useSortable({ id });\n    const detailSectionRef = useRef<HTMLDivElement>(null);\n    const style = {\n        transform: CSS.Translate.toString(transform),\n        transition,\n    };\n\n    const sortableProps = {\n        style,\n        ...attributes,\n        ...listeners,\n    };\n\n    // Local variables\n    const isLoading = progress < 1;\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const focusType: ItemFocusType = activeId\n        ? activeId === id\n            ? \"self\"\n            : \"others\"\n        : \"none\";\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                detailSectionRef && detailSectionRef.current\n                    ? detailSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDelete = () => {\n        onDelete();\n    };\n\n    const handleEdit = () => {\n        if (onEditClick) {\n            onEditClick();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        /**\n         * Circumvent issue of keydown action activating the sort mechanism\n         * rather than the actual action\n         */\n        if (sortable) {\n            event.stopPropagation();\n        }\n    };\n\n    const shouldDisable = () => disabled || !!activeId;\n\n    const shouldEnableSort = () => !!sortable && !readOnly;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemText weight={description ? \"semibold\" : \"regular\"}>\n                {formattedName}\n            </ItemText>\n            {description && (\n                <ItemDescriptionText>{description}</ItemDescriptionText>\n            )}\n        </>\n    );\n\n    const renderErrorState = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n                {errorMessage && (\n                    <DesktopErrorMessage weight=\"semibold\">\n                        <ErrorIcon aria-hidden />\n                        {errorMessage}\n                    </DesktopErrorMessage>\n                )}\n            </NameSection>\n            <FileSizeSection>\n                <FileSizeText>{fileSize}</FileSizeText>\n            </FileSizeSection>\n            {errorMessage && (\n                <MobileErrorMessage weight=\"semibold\">\n                    <ErrorIcon aria-hidden />\n                    {errorMessage}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailImageDataUrl: string) => (\n        <>\n            <FileListItemThumbnail\n                thumbnailImageDataUrl={thumbnailImageDataUrl}\n                fileType={fileItem.type}\n                data-testid={`${id}-thumbnail`}\n            />\n            <ExtendedNameSection>\n                <NameSection ref={detailSectionRef}>\n                    {renderNameDescription()}\n                </NameSection>\n                <FileSizeSection>\n                    <FileSizeText>{fileSize}</FileSizeText>\n                </FileSizeSection>\n            </ExtendedNameSection>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n            </NameSection>\n            <FileSizeSection $hideInMobile={isLoading}>\n                <FileSizeText>{fileSize}</FileSizeText>\n            </FileSizeSection>\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n        const shouldShowThumbnail =\n            !!thumbnailImageDataUrl ||\n            fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n        if (errorMessage) {\n            content = renderErrorState();\n        } else if (shouldShowThumbnail) {\n            content = renderWithThumbnail(thumbnailImageDataUrl || \"\");\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <ContentSection $hasThumbnail={shouldShowThumbnail}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = (\n                <IconButton\n                    data-testid={`${id}-error-delete-button`}\n                    data-no-dnd=\"true\"\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`delete ${name}, error: ${errorMessage}`}\n                    onClick={handleDelete}\n                >\n                    <BinIcon aria-hidden />\n                </IconButton>\n            );\n        } else if (isLoading) {\n            content = (\n                <ProgressBar\n                    progress={progress}\n                    data-testid={`${id}-progress-bar`}\n                />\n            );\n        } else {\n            content = (\n                <>\n                    {editable && (\n                        <IconButton\n                            key=\"edit\"\n                            data-testid={`${id}-edit-button`}\n                            data-no-dnd=\"true\"\n                            type=\"button\"\n                            styleType=\"light\"\n                            sizeType=\"small\"\n                            aria-label={`edit ${name}`}\n                            disabled={shouldDisable()}\n                            onClick={handleEdit}\n                            onKeyDown={handleKeyDown}\n                        >\n                            <PencilIcon aria-hidden />\n                        </IconButton>\n                    )}\n                    <IconButton\n                        key=\"delete\"\n                        data-testid={`${id}-delete-button`}\n                        data-no-dnd=\"true\"\n                        type=\"button\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        aria-label={`delete ${name}`}\n                        disabled={shouldDisable()}\n                        onClick={handleDelete}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <BinIcon aria-hidden />\n                    </IconButton>\n                </>\n            );\n        }\n\n        return (\n            <ActionContainer\n                $editable={editable}\n                $error={!!errorMessage}\n                $loading={isLoading}\n            >\n                {content}\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item\n            id={id}\n            ref={setNodeRef}\n            $sortable={shouldEnableSort()}\n            $disabled={shouldDisable()}\n            $focusType={focusType}\n            {...(shouldEnableSort() ? sortableProps : {})}\n        >\n            {shouldEnableSort() && (\n                <DragHandleIcon\n                    data-testid={`${id}-drag-handle`}\n                    $disabled={shouldDisable()}\n                    $active={focusType === \"self\"}\n                />\n            )}\n            <Box\n                $focused={focusType === \"self\"}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $disabled={shouldDisable()}\n                $editable={editable}\n            >\n                {renderContents()}\n                {!readOnly && renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","focusType","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_Fragment","children","_jsx","ItemText","weight","ItemDescriptionText","Item","Object","assign","ref","$sortable","$disabled","$focusType","DragHandleIcon","$active","Box","$focused","$loading","$editable","content","shouldShowThumbnail","type","PDF_MIME_TYPE","NameSection","DesktopErrorMessage","ErrorIcon","FileSizeSection","FileSizeText","MobileErrorMessage","FileListItemThumbnail","fileType","ExtendedNameSection","renderWithThumbnail","$hideInMobile","ContentSection","$hasThumbnail","renderContents","IconButton","styleType","sizeType","onClick","BinIcon","ProgressBar","onKeyDown","PencilIcon","ActionContainer","$error","renderActions"],"mappings":"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"}
+{"version":3,"file":"file-list-item.js","sources":["../../../src/file-upload/file-list-item/file-list-item.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport {\n    memo,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DescriptionFileSizeText,\n    DesktopErrorMessage,\n    DragHandleIcon,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    FileSizeText,\n    IconButton,\n    Item,\n    ItemDescriptionLabel,\n    ItemDescriptionText,\n    ItemFocusType,\n    ItemText,\n    MobileErrorMessage,\n    NameSection,\n} from \"./file-list-item.styles\";\nimport { FormLabelProps } from \"../../form/types\";\nimport { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n    readOnly?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n}\n\nconst Component = ({\n    fileItem,\n    editable,\n    sortable,\n    wrapperWidth,\n    disabled,\n    readOnly,\n    descriptionLabel,\n    onDelete,\n    onEditClick,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        description,\n        progress = 1,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n    } = fileItem;\n    const [formattedName, setFormattedName] = useState<string>();\n    const { activeId } = useContext(FileUploadContext);\n\n    // Sortable mechanism\n    const { attributes, listeners, setNodeRef, transform, transition } =\n        useSortable({ id });\n    const detailSectionRef = useRef<HTMLDivElement>(null);\n    const style = {\n        transform: CSS.Translate.toString(transform),\n        transition,\n    };\n\n    const sortableProps = {\n        style,\n        ...attributes,\n        ...listeners,\n    };\n\n    // Local variables\n    const isLoading = progress < 1;\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const hasInlineActions = !!description && !!editable;\n    const focusType: ItemFocusType = activeId\n        ? activeId === id\n            ? \"self\"\n            : \"others\"\n        : \"none\";\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                detailSectionRef && detailSectionRef.current\n                    ? detailSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDelete = () => {\n        onDelete();\n    };\n\n    const handleEdit = () => {\n        if (onEditClick) {\n            onEditClick();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        /**\n         * Circumvent issue of keydown action activating the sort mechanism\n         * rather than the actual action\n         */\n        if (sortable) {\n            event.stopPropagation();\n        }\n    };\n\n    const shouldDisable = () => disabled || !!activeId;\n\n    const shouldEnableSort = () => !!sortable && !readOnly;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemText weight={description ? \"semibold\" : \"regular\"}>\n                {formattedName}\n            </ItemText>\n            {description && (\n                <>\n                    <ItemDescriptionLabel>\n                        {descriptionLabel?.children ?? \"Photo description\"}\n                    </ItemDescriptionLabel>\n                    <ItemDescriptionText>{description}</ItemDescriptionText>\n                </>\n            )}\n        </>\n    );\n\n    const renderErrorState = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n                {errorMessage && (\n                    <DesktopErrorMessage weight=\"semibold\">\n                        <ErrorIcon aria-hidden />\n                        {errorMessage}\n                    </DesktopErrorMessage>\n                )}\n            </NameSection>\n            <FileSizeSection>\n                <FileSizeText>{fileSize}</FileSizeText>\n            </FileSizeSection>\n            {errorMessage && (\n                <MobileErrorMessage weight=\"semibold\">\n                    <ErrorIcon aria-hidden />\n                    {errorMessage}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderInlineActions = () => (\n        <ActionContainer\n            $editable={editable}\n            $error={false}\n            $loading={false}\n            $hasDescription={true}\n        >\n            <IconButton\n                key=\"edit\"\n                data-testid={`${id}-edit-button`}\n                data-no-dnd=\"true\"\n                type=\"button\"\n                styleType=\"light\"\n                sizeType=\"small\"\n                aria-label={`edit ${name}`}\n                disabled={shouldDisable()}\n                onClick={handleEdit}\n                onKeyDown={handleKeyDown}\n            >\n                <PencilIcon aria-hidden />\n            </IconButton>\n            <IconButton\n                key=\"delete\"\n                data-testid={`${id}-delete-button`}\n                data-no-dnd=\"true\"\n                type=\"button\"\n                styleType=\"light\"\n                sizeType=\"small\"\n                aria-label={`delete ${name}`}\n                disabled={shouldDisable()}\n                onClick={handleDelete}\n                onKeyDown={handleKeyDown}\n            >\n                <BinIcon aria-hidden />\n            </IconButton>\n        </ActionContainer>\n    );\n\n    const renderDescriptionContent = () => (\n        <ExtendedNameSection ref={detailSectionRef}>\n            <ItemText weight=\"semibold\">{formattedName}</ItemText>\n            <ItemDescriptionLabel>\n                {descriptionLabel?.children ?? \"Photo description\"}\n            </ItemDescriptionLabel>\n            <ItemDescriptionText>{description}</ItemDescriptionText>\n            <DescriptionFileSizeText>{fileSize}</DescriptionFileSizeText>\n            {!readOnly && hasInlineActions && renderInlineActions()}\n        </ExtendedNameSection>\n    );\n\n    const renderFileContent = (thumbnailImageDataUrl?: string) => {\n        const shouldShowThumbnail =\n            !!thumbnailImageDataUrl ||\n            fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n        const thumbnail = shouldShowThumbnail ? (\n            <FileListItemThumbnail\n                thumbnailImageDataUrl={thumbnailImageDataUrl || \"\"}\n                fileType={fileItem.type}\n                data-testid={`${id}-thumbnail`}\n            />\n        ) : null;\n\n        if (hasInlineActions) {\n            return (\n                <>\n                    {thumbnail}\n                    {renderDescriptionContent()}\n                </>\n            );\n        }\n\n        return (\n            <>\n                {thumbnail}\n                <NameSection ref={detailSectionRef}>\n                    {renderNameDescription()}\n                    {!isLoading && (\n                        <DescriptionFileSizeText>\n                            {fileSize}\n                        </DescriptionFileSizeText>\n                    )}\n                </NameSection>\n            </>\n        );\n    };\n\n    const renderContents = () => {\n        const shouldShowThumbnail =\n            !!thumbnailImageDataUrl ||\n            fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n        const content = errorMessage\n            ? renderErrorState()\n            : renderFileContent(thumbnailImageDataUrl);\n\n        return (\n            <ContentSection $hasThumbnail={shouldShowThumbnail}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = (\n                <IconButton\n                    data-testid={`${id}-error-delete-button`}\n                    data-no-dnd=\"true\"\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`delete ${name}, error: ${errorMessage}`}\n                    onClick={handleDelete}\n                >\n                    <BinIcon aria-hidden />\n                </IconButton>\n            );\n        } else if (isLoading) {\n            content = (\n                <ProgressBar\n                    progress={progress}\n                    data-testid={`${id}-progress-bar`}\n                />\n            );\n        } else {\n            content = (\n                <>\n                    {editable && (\n                        <IconButton\n                            key=\"edit\"\n                            data-testid={`${id}-edit-button`}\n                            data-no-dnd=\"true\"\n                            type=\"button\"\n                            styleType=\"light\"\n                            sizeType=\"small\"\n                            aria-label={`edit ${name}`}\n                            disabled={shouldDisable()}\n                            onClick={handleEdit}\n                            onKeyDown={handleKeyDown}\n                        >\n                            <PencilIcon aria-hidden />\n                        </IconButton>\n                    )}\n                    <IconButton\n                        key=\"delete\"\n                        data-testid={`${id}-delete-button`}\n                        data-no-dnd=\"true\"\n                        type=\"button\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        aria-label={`delete ${name}`}\n                        disabled={shouldDisable()}\n                        onClick={handleDelete}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <BinIcon aria-hidden />\n                    </IconButton>\n                </>\n            );\n        }\n\n        return (\n            <ActionContainer\n                $editable={editable}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $hasDescription={!!description}\n            >\n                {content}\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item\n            id={id}\n            ref={setNodeRef}\n            $sortable={shouldEnableSort()}\n            $disabled={shouldDisable()}\n            $focusType={focusType}\n            {...(shouldEnableSort() ? sortableProps : {})}\n        >\n            {shouldEnableSort() && (\n                <DragHandleIcon\n                    data-testid={`${id}-drag-handle`}\n                    $disabled={shouldDisable()}\n                    $active={focusType === \"self\"}\n                />\n            )}\n            <Box\n                $focused={focusType === \"self\"}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $disabled={shouldDisable()}\n                $editable={editable}\n                $hasDescription={!!description}\n            >\n                {renderContents()}\n                {!readOnly && !hasInlineActions && renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","descriptionLabel","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","hasInlineActions","focusType","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_jsx","ItemText","weight","children","_Fragment","ItemDescriptionLabel","_a","ItemDescriptionText","Item","ref","$sortable","$disabled","$focusType","DragHandleIcon","Box","$error","$loading","$editable","shouldShowThumbnail","type","PDF_MIME_TYPE","content","NameSection","DesktopErrorMessage","ErrorIcon","FileSizeSection","FileSizeText","MobileErrorMessage","thumbnail","FileListItemThumbnail","fileType","ExtendedNameSection","DescriptionFileSizeText","ActionContainer","$hasDescription","IconButton","styleType","sizeType","onClick","onKeyDown","PencilIcon","BinIcon","renderFileContent","ContentSection","$hasThumbnail","renderContents","ProgressBar","renderActions"],"mappings":"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"}

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

@@ -14,6 +14,7 @@ interface BoxStyleProps {
     $focused?: boolean | undefined;
     $loading?: boolean | undefined;
     $editable?: boolean | undefined;
+    $hasDescription?: boolean | undefined;
 }
 interface ContentSectionStyleProps {
     $hasThumbnail?: boolean | undefined;
@@ -22,6 +23,7 @@ interface ActionContainerStyleProps {
     $editable?: boolean | undefined;
     $error?: boolean | undefined;
     $loading?: boolean | undefined;
+    $hasDescription?: boolean | undefined;
 }
 interface FileSizeSectionStyleProps {
     $hideInMobile?: boolean | undefined;
@@ -51,6 +53,17 @@ export declare const FileSizeText: import("styled-components/dist/types").IStyle
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, never>>> & string;
+export declare const DescriptionFileSizeText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
+    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
+} & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, never> & Partial<Pick<import("../..").TypographyProps & {
+    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
+} & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, never>>> & string;
 export declare const ItemText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
     ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
 } & {
@@ -62,6 +75,7 @@ export declare const ItemText: import("styled-components/dist/types").IStyledCom
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, never>>> & string;
+export declare const ItemDescriptionLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 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;
 } & {

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

@@ -1,4 +1,4 @@
-import i,{css as o}from"styled-components";import{DragHandleIcon as e}from"@lifesg/react-icons/drag-handle";import{ExclamationCircleFillIcon as t}from"@lifesg/react-icons/exclamation-circle-fill";import{IconButton as r}from"../../icon-button/icon-button.js";import{Spacing as n,Colour as d,Border as a,Radius as l,MediaQuery as s,Shadow as c}from"../../theme/index.js";import{Typography as m}from"../../typography/typography.js";const g=i.li`
+import i,{css as t}from"styled-components";import{DragHandleIcon as o}from"@lifesg/react-icons/drag-handle";import{ExclamationCircleFillIcon as e}from"@lifesg/react-icons/exclamation-circle-fill";import{IconButton as r}from"../../icon-button/icon-button.js";import{Spacing as n,Colour as a,Border as d,Radius as l,MediaQuery as s,Shadow as c,Font as m}from"../../theme/index.js";import{Typography as $}from"../../typography/typography.js";const g=i.li`
     display: flex;
     align-items: center;
     width: 100%;
@@ -8,14 +8,14 @@ import i,{css as o}from"styled-components";import{DragHandleIcon as e}from"@life
         margin-bottom: ${n["spacing-16"]};
     }
 
-    ${i=>i.$disabled&&"none"===i.$focusType?o`
+    ${i=>i.$disabled&&"none"===i.$focusType?t`
                 cursor: not-allowed;
-            `:i.$sortable&&"self"===i.$focusType?o`
+            `: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?o`
+            `:i.$sortable?t`
                 &:hover {
                     cursor: grab;
                 }
@@ -23,20 +23,20 @@ import i,{css as o}from"styled-components";import{DragHandleIcon as e}from"@life
                 // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations
                 touch-action: manipulation;
             `:void 0}
-`,$=i(e)`
+`,p=i(o)`
     margin-right: ${n["spacing-16"]};
     height: 1.5rem;
     width: 1.5rem;
-    color: ${d.icon};
+    color: ${a.icon};
 
-    ${i=>i.$active?o`
-                color: ${d["icon-primary"]};
-            `:i.$disabled?o`
-                color: ${d["icon-disabled"]};
+    ${i=>i.$active?t`
+                color: ${a["icon-primary"]};
+            `:i.$disabled?t`
+                color: ${a["icon-disabled"]};
             `:void 0};
-`,p=i.div`
-    background: ${d["bg-primary-subtlest"]};
-    border: ${a["width-010"]} ${a.solid} ${d.border};
+`,f=i.div`
+    background: ${a["bg-primary-subtlest"]};
+    border: ${d["width-010"]} ${d.solid} ${a.border};
     border-radius: ${l.sm};
     padding: ${n["spacing-16"]} ${n["spacing-32"]};
     display: flex;
@@ -47,17 +47,17 @@ import i,{css as o}from"styled-components";import{DragHandleIcon as e}from"@life
         padding: ${n["spacing-16"]};
     }
 
-    ${i=>i.$focused?o`
-                border-color: ${d["border-focus"]};
+    ${i=>i.$focused?t`
+                border-color: ${a["border-focus"]};
                 box-shadow: ${c["xs-focus-strong"]};
-            `:i.$disabled?o`
-                border-color: ${d["border-disabled"]};
-            `:i.$error?o`
-                background: ${d["bg-error"]};
-                border-color: ${d["border-error"]};
+            `:i.$disabled?t`
+                border-color: ${a["border-disabled"]};
+            `:i.$error?t`
+                background: ${a["bg-error"]};
+                border-color: ${a["border-error"]};
             `:void 0}
 
-    ${i=>{if(!i.$error&&(i.$loading||i.$editable))return o`
+    ${i=>{if(!i.$error&&(i.$loading||i.$editable))return t`
                 ${s.MaxWidth.md} {
                     flex-direction: column;
                     align-items: flex-start;
@@ -74,56 +74,71 @@ import i,{css as o}from"styled-components";import{DragHandleIcon as e}from"@life
         align-items: flex-start;
     }
 
-    ${i=>{if(i.$hasThumbnail)return o`
+    ${i=>{if(i.$hasThumbnail)return t`
                 ${s.MaxWidth.md} {
                     flex-direction: row;
                     align-items: center;
                 }
             `}}
-`,f=i.div`
+`,b=i.div`
     display: flex;
     flex: 1;
     flex-direction: column;
     width: 100%;
-`,b=i.div`
+`,x=i.div`
     display: flex;
     flex: 1;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
 
     ${s.MaxWidth.md} {
-        flex-direction: column;
-        align-items: flex-start;
         width: 100%;
     }
-`,x=i.div`
+`,u=i.div`
     display: flex;
     width: 5rem;
     margin-left: ${n["spacing-8"]};
     justify-content: flex-end;
 
+    ${x} > & {
+        width: auto;
+        margin-left: 0;
+        margin-top: ${n["spacing-16"]};
+        justify-content: flex-start;
+    }
+
     ${s.MaxWidth.md} {
-        ${i=>i.$hideInMobile?o`
+        ${i=>i.$hideInMobile?t`
                     display: none;
                     visibility: hidden;
-                `:o`
+                `:t`
                     width: 100%;
                     margin-left: 0;
                     margin-top: ${n["spacing-8"]};
                     justify-content: flex-start;
                 `}
     }
-`,u=i(m.BodyMD)`
-    color: ${d["text-subtler"]};
-`,y=i(m.BodyMD)``,v=i(y)`
+`,y=i($.BodyMD)`
+    color: ${a["text-subtler"]};
+`,w=i($.BodyMD)`
+    color: ${a["text-subtler"]};
+    margin-top: ${n["spacing-16"]};
+`,v=i($.BodyMD)``,M=i.span`
+    ${m["form-label"]}
+    font-weight: ${m.Spec["weight-semibold"]};
+    color: ${a["text-subtle"]};
+    display: block;
+    margin-top: ${n["spacing-16"]};
+`,W=i(v)`
     margin-top: ${n["spacing-4"]};
-`,w=i(t)`
+`,j=i(e)`
     height: 1lh;
     width: 1em;
     flex-shrink: 0;
-    color: ${d["icon-error-strong"]};
-`,M=i(m.BodySM)`
-    color: ${d["text-error"]};
-`,W=i(M)`
+    color: ${a["icon-error-strong"]};
+`,k=i($.BodySM)`
+    color: ${a["text-error"]};
+`,B=i(k)`
     margin-top: ${n["spacing-4"]};
     display: flex;
     gap: ${n["spacing-4"]};
@@ -132,7 +147,7 @@ import i,{css as o}from"styled-components";import{DragHandleIcon as e}from"@life
         display: none;
         visibility: hidden;
     }
-`,j=i(M)`
+`,D=i(k)`
     display: none;
     visibility: hidden;
 
@@ -142,31 +157,38 @@ import i,{css as o}from"styled-components";import{DragHandleIcon as e}from"@life
         visibility: visible;
         margin-top: ${n["spacing-8"]};
     }
-`,k=i.div`
+`,I=i.div`
     width: 6rem;
     margin-left: ${n["spacing-32"]};
     display: flex;
     justify-content: flex-end;
     align-items: center;
 
+    ${i=>{if(i.$hasDescription&&i.$editable&&!i.$error&&!i.$loading)return t`
+                width: 100%;
+                margin-left: 0;
+                margin-top: ${n["spacing-16"]};
+                justify-content: flex-end;
+            `}}
+
     ${s.MaxWidth.md} {
         width: fit-content;
 
-        ${i=>i.$loading&&!i.$error?o`
+        ${i=>i.$loading&&!i.$error?t`
                     margin-left: 0;
                     margin-top: ${n["spacing-16"]};
                     width: 100%;
-                `:i.$editable&&!i.$error?o`
+                `:i.$editable&&!i.$error?t`
                     margin-left: 0;
                     margin-top: ${n["spacing-16"]};
                     align-self: flex-end;
                 `:void 0}
     }
-`,B=i(r)`
+`,T=i(r)`
     min-width: unset;
 
     &:not(:last-child) {
-        margin-right: ${n["spacing-16"]};
+        margin-right: ${n["spacing-8"]};
     }
-`;export{k as ActionContainer,M as BaseErrorMessage,p as Box,h as ContentSection,W as DesktopErrorMessage,$ as DragHandleIcon,w as ErrorIcon,b as ExtendedNameSection,x as FileSizeSection,u as FileSizeText,B as IconButton,g as Item,v as ItemDescriptionText,y as ItemText,j as MobileErrorMessage,f as NameSection};
+`;export{I as ActionContainer,k as BaseErrorMessage,f as Box,h as ContentSection,w as DescriptionFileSizeText,B as DesktopErrorMessage,p as DragHandleIcon,j as ErrorIcon,x as ExtendedNameSection,u as FileSizeSection,y as FileSizeText,T as IconButton,g as Item,M as ItemDescriptionLabel,W as ItemDescriptionText,v as ItemText,D as MobileErrorMessage,b 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 styled, { css } from \"styled-components\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport {\n    Border,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\nimport { Typography } from \"../../typography\";\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: ${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: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\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    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${Colour[\"border-focus\"]};\n                box-shadow: ${Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${Colour[\"bg-error\"]};\n                border-color: ${Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${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    ${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                ${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    ${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: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${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: ${Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionText = styled(ItemText)`\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\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 = styled.div<ActionContainerStyleProps>`\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        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${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: ${Spacing[\"spacing-16\"]};\n    }\n`;\n"],"names":["Item","styled","li","Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","Colour","$active","Box","div","Border","Radius","MediaQuery","MaxWidth","md","$focused","Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","ItemText","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","IconButton","DSIconButton"],"mappings":"6aAsDO,MAAMA,EAAOC,EAAOC,EAAkB;;;;;;;yBAOpBC,EAAQ;;;MAG1BC,GACKA,EAAMC,WAAkC,SAArBD,EAAME,WAElBC,CAAG;;cAGHH,EAAMI,WAAkC,SAArBJ,EAAME,WACzBC,CAAG;;;;;cAMHH,EAAMI,UACND,CAAG;;;;;;;mBADP;EAaFE,EAAiBR,EAC1BS,EACuB;oBACPP,EAAQ;;;aAGfQ,EAAa;;MAEnBP,GACKA,EAAMQ,QACCL,CAAG;yBACGI,EAAO;cAIpBP,EAAMC,UACCE,CAAG;yBACGI,EAAO;mBAFxB;EAQKE,EAAMZ,EAAOa,GAAkB;kBAC1BH,EAAO;cACXI,EAAO,gBAAgBA,EAAc,SAAKJ,EAAe;qBAClDK,EAAW;eACjBb,EAAQ,iBAAiBA,EAAQ;;;;;MAK1Cc,EAAWC,SAASC;mBACPhB,EAAQ;;;MAGpBC,GACKA,EAAMgB,SACCb,CAAG;gCACUI,EAAO;8BACTU,EAAO;cAElBjB,EAAMC,UACNE,CAAG;gCACUI,EAAO;cAEpBP,EAAMkB,OACNf,CAAG;8BACQI,EAAO;gCACLA,EAAO;mBAHxB;;MAQRP,IACC,IAAKA,EAAMkB,SAAWlB,EAAMmB,UAAYnB,EAAMoB,WAC1C,OAAOjB,CAAG;kBACJU,EAAWC,SAASC;;;;aAK9B;EAIKM,EAAiBxB,EAAOa,GAA6B;;;;;MAK5DG,EAAWC,SAASC;;;;;;MAMnBf,IACC,GAAIA,EAAMsB,cACN,OAAOnB,CAAG;kBACJU,EAAWC,SAASC;;;;aAK9B;EAIKQ,EAAc1B,EAAOa,GAAG;;;;;EAOxBc,EAAsB3B,EAAOa,GAAG;;;;;MAKvCG,EAAWC,SAASC;;;;;EAObU,EAAkB5B,EAAOa,GAA8B;;;mBAGjDX,EAAQ;;;MAGrBc,EAAWC,SAASC;UACff,GACKA,EAAM0B,cACCvB,CAAG;;;kBAKHA,CAAG;;;kCAGQJ,EAAQ;;;;EAQ7B4B,EAAe9B,EAAO+B,EAAWC,OAAO;aACxCtB,EAAO;EAGPuB,EAAWjC,EAAO+B,EAAWC,OAAO,GAEpCE,EAAsBlC,EAAOiC,EAAS;kBACjC/B,EAAQ;EAGbiC,EAAYnC,EAAOoC,EAA0B;;;;aAI7C1B,EAAO;EAGP2B,EAAmBrC,EAAO+B,EAAWO,OAAO;aAC5C5B,EAAO;EAGP6B,EAAsBvC,EAAOqC,EAAiB;kBACzCnC,EAAQ;;WAEfA,EAAQ;;MAEbc,EAAWC,SAASC;;;;EAMbsB,EAAqBxC,EAAOqC,EAAiB;;;;MAIpDrB,EAAWC,SAASC;;eAEXhB,EAAQ;;sBAEDA,EAAQ;;EAIjBuC,EAAkBzC,EAAOa,GAA8B;;mBAEjDX,EAAQ;;;;;MAKrBc,EAAWC,SAASC;;;UAGff,GACKA,EAAMmB,WAAanB,EAAMkB,OAClBf,CAAG;;kCAEQJ,EAAQ;;kBAGnBC,EAAMoB,YAAcpB,EAAMkB,OAC1Bf,CAAG;;kCAEQJ,EAAQ;;uBAHvB;;EAWNwC,EAAa1C,EAAO2C,EAAa;;;;wBAItBzC,EAAQ;;"}
+{"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\nimport { Typography } from \"../../typography\";\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    $hasDescription?: 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    $hasDescription?: 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: ${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: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\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    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${Colour[\"border-focus\"]};\n                box-shadow: ${Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${Colour[\"bg-error\"]};\n                border-color: ${Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${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    ${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                ${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    flex-direction: column;\n    align-items: flex-start;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${ExtendedNameSection} > & {\n        width: auto;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-16\"]};\n        justify-content: flex-start;\n    }\n\n    ${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: ${Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionFileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionLabel = styled.span`\n    ${Font[\"form-label\"]}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    color: ${Colour[\"text-subtle\"]};\n    display: block;\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemDescriptionText = styled(ItemText)`\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\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 = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${(props) => {\n        if (\n            props.$hasDescription &&\n            props.$editable &&\n            !props.$error &&\n            !props.$loading\n        ) {\n            return css`\n                width: 100%;\n                margin-left: 0;\n                margin-top: ${Spacing[\"spacing-16\"]};\n                justify-content: flex-end;\n            `;\n        }\n    }}\n\n    ${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: ${Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${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: ${Spacing[\"spacing-8\"]};\n    }\n`;\n"],"names":["Item","styled","li","Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","Colour","$active","Box","div","Border","Radius","MediaQuery","MaxWidth","md","$focused","Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","DescriptionFileSizeText","ItemText","ItemDescriptionLabel","span","Font","Spec","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","$hasDescription","IconButton","DSIconButton"],"mappings":"ubAyDO,MAAMA,EAAOC,EAAOC,EAAkB;;;;;;;yBAOpBC,EAAQ;;;MAG1BC,GACKA,EAAMC,WAAkC,SAArBD,EAAME,WAElBC,CAAG;;cAGHH,EAAMI,WAAkC,SAArBJ,EAAME,WACzBC,CAAG;;;;;cAMHH,EAAMI,UACND,CAAG;;;;;;;mBADP;EAaFE,EAAiBR,EAC1BS,EACuB;oBACPP,EAAQ;;;aAGfQ,EAAa;;MAEnBP,GACKA,EAAMQ,QACCL,CAAG;yBACGI,EAAO;cAIpBP,EAAMC,UACCE,CAAG;yBACGI,EAAO;mBAFxB;EAQKE,EAAMZ,EAAOa,GAAkB;kBAC1BH,EAAO;cACXI,EAAO,gBAAgBA,EAAc,SAAKJ,EAAe;qBAClDK,EAAW;eACjBb,EAAQ,iBAAiBA,EAAQ;;;;;MAK1Cc,EAAWC,SAASC;mBACPhB,EAAQ;;;MAGpBC,GACKA,EAAMgB,SACCb,CAAG;gCACUI,EAAO;8BACTU,EAAO;cAElBjB,EAAMC,UACNE,CAAG;gCACUI,EAAO;cAEpBP,EAAMkB,OACNf,CAAG;8BACQI,EAAO;gCACLA,EAAO;mBAHxB;;MAQRP,IACC,IAAKA,EAAMkB,SAAWlB,EAAMmB,UAAYnB,EAAMoB,WAC1C,OAAOjB,CAAG;kBACJU,EAAWC,SAASC;;;;aAK9B;EAIKM,EAAiBxB,EAAOa,GAA6B;;;;;MAK5DG,EAAWC,SAASC;;;;;;MAMnBf,IACC,GAAIA,EAAMsB,cACN,OAAOnB,CAAG;kBACJU,EAAWC,SAASC;;;;aAK9B;EAIKQ,EAAc1B,EAAOa,GAAG;;;;;EAOxBc,EAAsB3B,EAAOa,GAAG;;;;;;MAMvCG,EAAWC,SAASC;;;EAKbU,EAAkB5B,EAAOa,GAA8B;;;mBAGjDX,EAAQ;;;MAGrByB;;;sBAGgBzB,EAAQ;;;;MAIxBc,EAAWC,SAASC;UACff,GACKA,EAAM0B,cACCvB,CAAG;;;kBAKHA,CAAG;;;kCAGQJ,EAAQ;;;;EAQ7B4B,EAAe9B,EAAO+B,EAAWC,OAAO;aACxCtB,EAAO;EAGPuB,EAA0BjC,EAAO+B,EAAWC,OAAO;aACnDtB,EAAO;kBACFR,EAAQ;EAGbgC,EAAWlC,EAAO+B,EAAWC,OAAO,GAEpCG,EAAuBnC,EAAOoC,IAAI;MACzCC,EAAK;mBACQA,EAAKC,KAAK;aAChB5B,EAAO;;kBAEFR,EAAQ;EAGbqC,EAAsBvC,EAAOkC,EAAS;kBACjChC,EAAQ;EAGbsC,EAAYxC,EAAOyC,EAA0B;;;;aAI7C/B,EAAO;EAGPgC,EAAmB1C,EAAO+B,EAAWY,OAAO;aAC5CjC,EAAO;EAGPkC,EAAsB5C,EAAO0C,EAAiB;kBACzCxC,EAAQ;;WAEfA,EAAQ;;MAEbc,EAAWC,SAASC;;;;EAMb2B,EAAqB7C,EAAO0C,EAAiB;;;;MAIpD1B,EAAWC,SAASC;;eAEXhB,EAAQ;;sBAEDA,EAAQ;;EAIjB4C,EAAkB9C,EAAOa,GAA8B;;mBAEjDX,EAAQ;;;;;MAKpBC,IACC,GACIA,EAAM4C,iBACN5C,EAAMoB,YACLpB,EAAMkB,SACNlB,EAAMmB,SAEP,OAAOhB,CAAG;;;8BAGQJ,EAAQ;;aAG9B;;MAGFc,EAAWC,SAASC;;;UAGff,GACKA,EAAMmB,WAAanB,EAAMkB,OAClBf,CAAG;;kCAEQJ,EAAQ;;kBAGnBC,EAAMoB,YAAcpB,EAAMkB,OAC1Bf,CAAG;;kCAEQJ,EAAQ;;uBAHvB;;EAWN8C,EAAahD,EAAOiD,EAAa;;;;wBAItB/C,EAAQ;;"}

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

@@ -1,9 +1,12 @@
 import React from "react";
 import { FileItemProps } from "./types";
+import { FormLabelProps } from "../form/types";
 interface Props {
     fileItems: FileItemProps[] | undefined;
     editableFileItems: boolean;
     fileDescriptionMaxLength?: number | undefined;
+    descriptionRequired?: boolean | undefined;
+    descriptionLabel?: FormLabelProps | undefined;
     sortable?: boolean | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;