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

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

@@ -1,7 +1,7 @@
-import i,{css as t}from"styled-components";import{Button as e}from"../button/button.js";import{IconButton as o}from"../icon-button/icon-button.js";import{Modal as a}from"../modal/index.js";import{MediaQuery as n,Breakpoint as r,Colour as d,Border as s,Radius as g,Spacing as c,Font as p}from"../theme/index.js";import{Typography as h}from"../typography/typography.js";const l=t`
-    ${i=>`\n        ${n.MaxWidth.sm(i)},\n        (orientation: landscape) and (max-height: ${r["sm-max"](i)}px)\n    `}
+import i,{css as t}from"styled-components";import{Button as e}from"../button/button.js";import{IconButton as o}from"../icon-button/icon-button.js";import{Modal as r}from"../modal/index.js";import{MediaQuery as n,Breakpoint as a,Colour as d,Border as s,Radius as g,Spacing as c,Font as l}from"../theme/index.js";import{Typography as h}from"../typography/typography.js";const p=t`
+    ${i=>`\n        ${n.MaxWidth.sm(i)},\n        (orientation: landscape) and (max-height: ${a["sm-max"](i)}px)\n    `}
 `,m=t`
-    ${i=>`\n        @media (orientation: landscape) and (max-height: ${r["sm-max"](i)}px)\n    `}
+    ${i=>`\n        @media (orientation: landscape) and (max-height: ${a["sm-max"](i)}px)\n    `}
 `,$=i.div`
     position: relative;
     display: flex;
@@ -34,6 +34,8 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
     object-position: center;
     width: calc(100% - (3rem + ${c["spacing-16"]}) * 2);
     height: 100%;
+
+    ${i=>{var t;return"dark"===(null===(t=i.theme)||void 0===t?void 0:t.colourMode)&&"filter: invert(1);"}}
 `,f=i.div`
     background: ${d["bg-primary-subtlest"]};
     border: ${s["width-010"]} ${s.solid} ${d.border};
@@ -45,25 +47,25 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
     flex: 1;
     flex-direction: column;
     align-items: center;
-`,w=i(h.BodySM)`
+`,v=i(h.BodySM)`
     margin-top: ${c["spacing-16"]};
-`,y=i(a)`
+`,w=i(r)`
     /* increase specificity as the styles are overwritten */
     && {
         height: 100%;
         overflow-y: auto;
     }
-`,v=i.div`
+`,y=i.div`
     width: 100%;
     margin: auto;
     padding: ${c["layout-xxl"]} ${c["layout-sm"]};
 
-    ${l} {
+    ${p} {
         padding: 0;
         width: 100%;
         height: 100%;
     }
-`,j=i(a.Box)`
+`,j=i(r.Box)`
     width: 100%;
     height: 29rem;
     max-width: 672px;
@@ -71,7 +73,7 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
     margin: 0 auto;
     padding: ${c["spacing-16"]};
 
-    ${l} {
+    ${p} {
         display: flex;
         flex-direction: column;
         max-width: none;
@@ -83,13 +85,13 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
         --close-button-right-inset: ${c["spacing-20"]};
     }
 `,k=i.h2`
-    ${p["body-baseline-semibold"]}
+    ${l["body-baseline-semibold"]}
     color: ${d.text};
     margin-bottom: ${c["spacing-16"]};
     text-align: center;
 
-    ${l} {
-        ${p["body-md-semibold"]}
+    ${p} {
+        ${l["body-md-semibold"]}
         margin: ${c["spacing-12"]} 0;
     }
 `,M=i.div`
@@ -98,7 +100,7 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
     border-radius: ${g.lg};
     overflow: hidden;
 
-    ${l} {
+    ${p} {
         border-radius: 0;
         flex: 1;
     }
@@ -113,7 +115,7 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
     background: ${d["bg-stronger"]};
     margin: auto;
 
-    ${l} {
+    ${p} {
         aspect-ratio: 4/3;
     }
     ${n.MaxWidth.sm} {
@@ -134,7 +136,7 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
     background-color: ${d["border-strong"]};
     pointer-events: none;
 
-    ${l} {
+    ${p} {
         width: calc(100% - ${c["spacing-40"]});
         max-width: 300px;
         left: 50%;
@@ -169,5 +171,7 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
     overflow: hidden;
 `,X=i.canvas`
     cursor: crosshair;
-`;export{b as AddSignatureButton,M as ESignatureContainer,W as ESignatureDrawable,u as EditSignatureButton,v as GrowContainer,w as Instructions,S as ModalActionButton,j as ModalBox,D as ModalButtons,k as ModalTitle,f as ProgressBox,y as ScrollableModal,$ as SignatureArea,X as SignatureCanvas,U as SignatureCanvasContainer,B as SignatureLine,x as SignaturePreviewImage};
+
+    ${i=>{var t;return"dark"===(null===(t=i.theme)||void 0===t?void 0:t.colourMode)&&"filter: invert(1);"}}
+`;export{b as AddSignatureButton,M as ESignatureContainer,W as ESignatureDrawable,u as EditSignatureButton,y as GrowContainer,v as Instructions,S as ModalActionButton,j as ModalBox,D as ModalButtons,k as ModalTitle,f as ProgressBox,w as ScrollableModal,$ as SignatureArea,X as SignatureCanvas,U as SignatureCanvasContainer,B as SignatureLine,x as SignaturePreviewImage};
 //# sourceMappingURL=e-signature.styles.js.map

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

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

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

@@ -111,7 +111,7 @@ import i,{css as r}from"styled-components";import{ExclamationCircleFillIcon as e
     ${m["body-sm-semibold"]}
     color: ${d["text-error"]};
 `,v=i(w)`
-    margin-top: ${l["spacing-4"]};
+    margin-top: ${l["spacing-8"]};
     display: flex;
     gap: ${l["spacing-4"]};
 

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

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

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

@@ -1,11 +1,14 @@
 import { FileItemProps } from "./types";
+import { FormLabelProps } from "../form/types";
 interface Props {
     fileItem: FileItemProps;
     wrapperWidth: number;
     fileDescriptionMaxLength?: number | undefined;
+    descriptionRequired?: boolean | undefined;
+    descriptionLabel?: FormLabelProps | undefined;
     onSave: (description: string) => void;
     onCancel: () => void;
     onBlur: (value: string) => void;
 }
-export declare const FileItemEdit: ({ fileItem, fileDescriptionMaxLength, wrapperWidth, onSave, onCancel, onBlur, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FileItemEdit: ({ fileItem, fileDescriptionMaxLength, descriptionRequired, descriptionLabel, wrapperWidth, onSave, onCancel, onBlur, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.js","sources":["../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n    ActionButton,\n    ActionButtonsSection,\n    ContentSection,\n    DetailsSection,\n    FileNameText,\n    FileSizeText,\n    Item,\n    NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={shouldShowThumbnail}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["FileItemEdit","fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","fileType","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","$thumbnail","ActionButton","disabled","trim","length","onClick","styleType"],"mappings":"+sBA0BO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAX,GAEGY,EAAeC,GAAoBC,KACnCC,EAAoBC,GAAyBF,EAAiB,IAE/DG,EAAcC,EAA4B,MAC1CC,EAAiBD,EAAuB,MAKxCE,EAAmBC,GACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,GAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,GAAU,KACNb,EAAsBhB,EAAS8B,aAAe,GAAG,GAClD,CAAC9B,IAKJ,MAmBM+B,IACApB,GAAyBF,IAASuB,EAAiBC,cAczD,OACIC,EAACC,EAAI,CAAA,cAAc,GAAG7B,iBAAiB8B,SAAA,CACnCF,EAACG,aACIN,GACGO,EAACC,EAAqB,CAClB5B,sBAAuBA,EACvB6B,SAAU/B,IAGlByB,EAACO,EAAc,CAAAL,SAAA,CAjBvBF,EAACQ,EAAW,CAACC,IAAKxB,EAAciB,SAAA,CAC5BE,EAACM,EAAY,CAACC,OAAO,oBAAYjC,IACjC0B,EAACQ,EAAY,CAAAV,SACRJ,EAAiBe,sBAAsBvC,QAgBpC8B,EAACU,EAAKC,SAAQ,CACVN,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPmC,UAAWjD,EACXkD,SA7CEC,IAClBpC,EAAsBoC,EAAMC,OAAO/B,MAAM,EA6CzBjB,OA1CA+C,IAChB/C,EAAO+C,EAAMC,OAAO/B,MAAM,EA0CVgC,KAAM,EAAC,aACK,yBAAyB/C,IACrCgD,MAAO,CACHnB,SAAU,oBACVoB,SACI,8EAKpBtB,EAACuB,EAAoB,CAAAC,WAAa3B,EAAmBK,SAAA,CACjDE,EAACqB,EAAY,CAAA,cACI,GAAGrD,gBAChBG,KAAK,SACLmD,SAnDyB,IADV7C,EAAmB8C,OACpBC,OAoDdC,QApEG,KACX9C,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAMuC,OACrC,EAiE+BzB,SAAA,SAIvBE,EAACqB,EAAY,CACTlD,KAAK,SACLuD,UAAU,0BACG,GAAG1D,kBAChByD,QAAS3D,EAAQgC,SAAA,gBAKtB"}
+{"version":3,"file":"file-item-edit.js","sources":["../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n    ActionButton,\n    ActionButtonsSection,\n    ContentSection,\n    DetailsSection,\n    FileNameText,\n    FileSizeText,\n    Item,\n    NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport { FileItemProps } from \"./types\";\nimport { FormLabelProps } from \"../form/types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    descriptionRequired = true,\n    descriptionLabel,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        if (!descriptionRequired) return false;\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        label={\n                            descriptionLabel ?? {\n                                children: \"Photo description\",\n                                subtitle:\n                                    \"Describe this photo to users who may not be able to see the image.\",\n                            }\n                        }\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={shouldShowThumbnail}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["FileItemEdit","fileItem","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","fileType","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","$thumbnail","ActionButton","disabled","trim","length","shouldDisableSave","onClick","styleType"],"mappings":"+sBA6BO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,uBAAsB,EACtBC,mBACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAb,GAEGc,EAAeC,GAAoBC,KACnCC,EAAoBC,GAAyBF,EAAiB,IAE/DG,EAAcC,EAA4B,MAC1CC,EAAiBD,EAAuB,MAKxCE,EAAmBC,GACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,GAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,GAAU,KACNb,EAAsBlB,EAASgC,aAAe,GAAG,GAClD,CAAChC,IAKJ,MAoBMiC,IACApB,GAAyBF,IAASuB,EAAiBC,cAczD,OACIC,EAACC,EAAI,CAAA,cAAc,GAAG7B,iBAAiB8B,SAAA,CACnCF,EAACG,aACIN,GACGO,EAACC,EAAqB,CAClB5B,sBAAuBA,EACvB6B,SAAU/B,IAGlByB,EAACO,EAAc,CAAAL,SAAA,CAjBvBF,EAACQ,EAAW,CAACC,IAAKxB,EAAciB,SAAA,CAC5BE,EAACM,EAAY,CAACC,OAAO,oBAAYjC,IACjC0B,EAACQ,EAAY,CAAAV,SACRJ,EAAiBe,sBAAsBvC,QAgBpC8B,EAACU,EAAKC,SAAQ,CACVN,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPmC,UAAWnD,EACXoD,SA9CEC,IAClBpC,EAAsBoC,EAAMC,OAAO/B,MAAM,EA8CzBjB,OA3CA+C,IAChB/C,EAAO+C,EAAMC,OAAO/B,MAAM,EA2CVgC,KAAM,EACNC,MACItD,QAAAA,EAAoB,CAChBmC,SAAU,oBACVoB,SACI,8EAMxBtB,EAACuB,EAAoB,CAAAC,WAAa3B,EAAmBK,SAAA,CACjDE,EAACqB,EAAY,CAAA,cACI,GAAGrD,gBAChBG,KAAK,SACLmD,SAvDU,MACtB,IAAK5D,EAAqB,OAAO,EAEjC,OAAqC,IADVe,EAAmB8C,OACpBC,MAAY,EAoDhBC,GACVC,QAtEG,KACX/C,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAMuC,OACrC,EAmE+BzB,SAAA,SAIvBE,EAACqB,EAAY,CACTlD,KAAK,SACLwD,UAAU,0BACG,GAAG3D,kBAChB0D,QAAS5D,EAAQgC,SAAA,gBAKtB"}

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;
 } & {