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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ClickableIcon } from \"../../shared/clickable-icon\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n    $sortable: boolean;\n    $disabled?: boolean | undefined;\n    $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n    $disabled?: boolean | undefined;\n    $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n    $disabled?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $editable?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n    $editable?: boolean | undefined;\n    $error?: boolean | undefined;\n    $loading?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n    $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$disabled && props.$focusType === \"none\") {\n            // Show disabled cursor only if no dragging is happening\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$sortable && props.$focusType === \"self\") {\n            return css`\n                cursor: grabbing;\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        } else if (props.$sortable) {\n            return css`\n                &:hover {\n                    cursor: grab;\n                }\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        }\n    }}\n`;\n\nexport const DragHandleIcon = styled(\n    DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${V3_Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${V3_Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    background: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${V3_Colour[\"border-focus\"]};\n                box-shadow: ${V3_Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${V3_Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: column;\n                    align-items: flex-start;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        ${(props) => {\n            if (props.$hideInMobile) {\n                return css`\n                    display: none;\n                    visibility: hidden;\n                `;\n            } else {\n                return css`\n                    width: 100%;\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\nexport const ItemDescriptionText = styled(ItemText)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${V3_Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: fit-content;\n\n        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    align-self: flex-end;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ErrorIconButton = styled(ClickableIcon)`\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: unset;\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${V3_Colour[\"icon\"]};\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","V3_Colour","$active","Box","div","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","md","$focused","V3_Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","ItemText","Typography","BodyMD","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","IconButton","DSIconButton","ErrorIconButton","ClickableIcon"],"mappings":"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"}
+{"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\n\nexport const item = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n    &[data-item-state=\"disabled\"] {\n        cursor: not-allowed;\n    }\n\n    &[data-item-state=\"sortable\"] {\n        &:hover {\n            cursor: grab;\n        }\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n\n    &[data-item-state=\"sortable-active\"] {\n        cursor: grabbing;\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n`;\n\nexport const dragHandleIcon = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    &[data-drag-handle-state=\"active\"] {\n        color: ${Colour[\"icon-primary\"]};\n    }\n\n    &[data-drag-handle-state=\"disabled\"] {\n        color: ${Colour[\"icon-disabled\"]};\n    }\n`;\n\nexport const box = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-box-state=\"focused\"] {\n        border-color: ${Colour[\"border-focus\"]};\n        box-shadow: ${Shadow[\"xs-focus-strong\"]};\n    }\n\n    &[data-box-state=\"disabled\"] {\n        border-color: ${Colour[\"border-disabled\"]};\n    }\n\n    &[data-box-state=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border-color: ${Colour[\"border-error\"]};\n    }\n\n    &[data-stack-mobile=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: column;\n            align-items: flex-start;\n        }\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    &[data-has-thumbnail=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: row;\n            align-items: center;\n        }\n    }\n`;\n\nexport const nameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const extendedNameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    align-items: flex-start;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    &[data-mobile-visibility=\"hidden\"] {\n        ${MediaQuery.MaxWidth.md} {\n            display: none;\n            visibility: hidden;\n        }\n    }\n\n    &[data-mobile-visibility=\"expand\"] {\n        ${MediaQuery.MaxWidth.md} {\n            width: 100%;\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-8\"]};\n            justify-content: flex-start;\n        }\n    }\n`;\n\nexport const fileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const descriptionFileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const itemDescriptionLabel = css`\n    ${Font[\"form-label\"]}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    color: ${Colour[\"text-subtle\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const itemDescriptionText = css`\n    margin-top: ${Spacing[\"spacing-4\"]};\n    overflow-wrap: anywhere;\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: fit-content;\n    }\n\n    &[data-mobile-layout=\"loading\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            width: 100%;\n        }\n    }\n\n    &[data-mobile-layout=\"editable\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            align-self: flex-end;\n        }\n    }\n`;\n\nexport const inlineActionContainer = css`\n    width: 100%;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-8\"]};\n    }\n`;\n"],"names":[],"mappings":"6HAiN4B,sBApJZ,iCAmCW,2CAgES,sCAwBJ,kCA1IL,4BAmIL,sCAvDU,kCAWJ,gCAuBH,8BAyFF,wCARW,uBA/NjB,wCAuJgB,uCAOD,sCAwBD,+BAjFP"}

package/cjs/file-upload/file-list-item/file-list-item.styles_kgtfke.css

@@ -0,0 +1,17 @@
+@layer fds{.i18pxk0j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border:none;}.i18pxk0j:not(:last-child){margin-bottom:var(--fds-spacing-16);}.i18pxk0j[data-item-state="disabled"]{cursor:not-allowed;}.i18pxk0j[data-item-state="sortable"]{touch-action:manipulation;}.i18pxk0j[data-item-state="sortable"]:hover{cursor:-webkit-grab;cursor:grab;}.i18pxk0j[data-item-state="sortable-active"]{cursor:-webkit-grabbing;cursor:grabbing;touch-action:manipulation;}
+.dqb8x5u{margin-right:var(--fds-spacing-16);height:1.5rem;width:1.5rem;color:var(--fds-colour-icon);}.dqb8x5u[data-drag-handle-state="active"]{color:var(--fds-colour-icon-primary);}.dqb8x5u[data-drag-handle-state="disabled"]{color:var(--fds-colour-icon-disabled);}
+.bddx9rr{background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);padding:var(--fds-spacing-16) var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}:where(body.fds-breakpoint-md-max) .bddx9rr{padding:var(--fds-spacing-16);}.bddx9rr[data-box-state="focused"]{border-color:var(--fds-colour-border-focus);box-shadow:var(--fds-shadow-xs-focus-strong);}.bddx9rr[data-box-state="disabled"]{border-color:var(--fds-colour-border-disabled);}.bddx9rr[data-box-state="error"]{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}:where(body.fds-breakpoint-md-max) .bddx9rr[data-stack-mobile="true"]{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.c1dhzflv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .c1dhzflv{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}:where(body.fds-breakpoint-md-max) .c1dhzflv[data-has-thumbnail="true"]{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.nk38w4a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}
+.elwke9e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}:where(body.fds-breakpoint-md-max) .elwke9e{width:100%;}
+.f14h64yt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:5rem;margin-left:var(--fds-spacing-8);-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}:where(body.fds-breakpoint-md-max) .f14h64yt[data-mobile-visibility="hidden"]{display:none;visibility:hidden;}:where(body.fds-breakpoint-md-max) .f14h64yt[data-mobile-visibility="expand"]{width:100%;margin-left:0;margin-top:var(--fds-spacing-8);-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}
+.f1wv8fjl{color:var(--fds-colour-text-subtler);}
+.divlkvo{color:var(--fds-colour-text-subtler);margin-top:var(--fds-spacing-16);}
+.i1jm950n{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-form-label-size);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-form-label-lh);letter-spacing:var(--fds-font-form-label-ls);font-weight:var(--fds-font-weight-semibold);color:var(--fds-colour-text-subtle);margin-top:var(--fds-spacing-16);}
+.i1vgco4e{margin-top:var(--fds-spacing-4);overflow-wrap:anywhere;}
+.eap0p9n{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
+.d1gk2zsk{color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-4);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-md-max) .d1gk2zsk{display:none;visibility:hidden;}
+.m1wh4bod{color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-md-max) .m1wh4bod{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}
+.a3rvfgv{width:6rem;margin-left:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .a3rvfgv{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}:where(body.fds-breakpoint-md-max) .a3rvfgv[data-mobile-layout="loading"]{margin-left:0;margin-top:var(--fds-spacing-16);width:100%;}:where(body.fds-breakpoint-md-max) .a3rvfgv[data-mobile-layout="editable"]{margin-left:0;margin-top:var(--fds-spacing-16);-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;}
+.i5ozu70{width:100%;margin-top:var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.ilou5qo{min-width:unset;}.ilou5qo:not(:last-child){margin-right:var(--fds-spacing-8);}}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./context.js"),l=require("./dropzone.js"),i=require("./file-list.js"),n=require("./file-upload.styles.js");exports.FileUpload=({styleType:o="bordered",fileItems:s,title:a,description:d,maxFiles:u,warning:c,className:p,name:x,id:h,"data-testid":j,accept:m,capture:f,multiple:b,disabled:g,sortable:y=!1,fileDescriptionMaxLength:v,editableFileItems:D=!1,errorMessage:C,readOnly:F,customLabels:I,onChange:U,onDelete:q,onEdit:B,onSort:T})=>{const L={uploadButton:(null==I?void 0:I.uploadButtonLabel)||"Upload files"},z=t.useRef(null),w=t.useRef(null),[A,M]=t.useState(),S=()=>!(!u||!s)&&s.length>=u;return e.jsx(r.FileUploadContext.Provider,{value:{activeId:A,setActiveId:M},children:e.jsxs(l.FileUploadDropzone,{ref:z,onChange:e=>{var t;!g&&U&&(U(e),null===(t=w.current)||void 0===t||t.focus())},id:h?`${h}-dropzone`:"dropzone",accept:m,capture:f,border:"bordered"===o,className:p,"data-testid":j,name:x,multiple:b,disabled:g||S()||F,children:[!(!a&&!d)&&e.jsxs(n.TextContainer,{children:[a?"string"==typeof a?e.jsx(n.Title,{children:a}):e.jsx(n.TitleContainer,{children:a}):null,d?"string"==typeof d?e.jsx(n.Description,{children:d}):e.jsx(n.DescriptionContainer,{children:d}):null]}),!!c&&e.jsx(n.WarningAlert,{type:"warning",children:c}),e.jsx(i.FileList,{ref:w,fileItems:s,editableFileItems:D,fileDescriptionMaxLength:v,sortable:y,disabled:g,readOnly:F,onItemDelete:e=>{var t;q&&(q(e),null===(t=w.current)||void 0===t||t.focus())},onItemUpdate:e=>{B&&B(e)},onSort:e=>{T&&T(e)}}),C&&e.jsx(n.ErrorAlert,{type:"error",children:C}),!F&&e.jsxs(n.UploadButtonContainer,{children:[e.jsx(n.UploadButton,{type:"button",styleType:"secondary",disabled:!!A||g||S(),onClick:e=>{g||(e.preventDefault(),z.current&&z.current.openFileDialog())},children:L.uploadButton}),e.jsx(n.UploadButtonText,{weight:"semibold",children:"or drop them here"})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../alert/alert.js"),l=require("../button/button.js"),i=require("../markup/markup.js"),s=require("../typography/index.js"),a=require("./context.js"),n=require("./dropzone.js"),o=require("./file-list/file-list.js"),d=require("./file-upload.styles.js");exports.FileUpload=({styleType:u="bordered",fileItems:c,title:p,description:m,maxFiles:h,warning:y,className:x,name:b,id:j,"data-testid":g,accept:f,capture:v,multiple:q,disabled:B,sortable:N=!1,fileDescriptionMaxLength:D,editableFileItems:T=!1,descriptionRequired:C=!0,descriptionLabel:F,errorMessage:I,readOnly:L,customLabels:M,onChange:k,onDelete:z,onEdit:A,onSort:S})=>{const U={uploadButton:(null==M?void 0:M.uploadButtonLabel)||"Upload files"},w=r.useRef(null),R=r.useRef(null),[O,E]=r.useState(),P=e=>{var r;if(void 0===h)return e;const t=null!==(r=null==c?void 0:c.length)&&void 0!==r?r:0,l=Math.max(h-t,0);return e.slice(0,l)},$=()=>!(!h||!c)&&c.length>=h;return e.jsx(a.FileUploadContext.Provider,{value:{activeId:O,setActiveId:E},children:e.jsxs(n.FileUploadDropzone,{ref:w,onChange:e=>{var r;const t=P(e);!B&&k&&t.length>0&&(k(t),null===(r=R.current)||void 0===r||r.focus())},id:j?`${j}-dropzone`:"dropzone",accept:f,capture:v,border:"bordered"===u,className:x,"data-testid":g,name:b,multiple:q,disabled:B||$()||L,children:[!(!p&&!m)&&e.jsxs("div",{className:d.textContainer,children:[p?"string"==typeof p?e.jsx(s.Typography.BodyBL,{children:p}):e.jsx(i.Markup,{className:d.markupContainer,baseTextSize:"body-baseline",children:p}):null,m?"string"==typeof m?e.jsx(s.Typography.BodyMD,{className:d.description,children:m}):e.jsx(i.Markup,{className:d.markupContainer,baseTextSize:"body-md",children:m}):null]}),!!y&&e.jsx(t.Alert,{className:d.warningAlert,type:"warning",children:y}),e.jsx(o.FileList,{ref:R,fileItems:c,editableFileItems:T,descriptionRequired:C,descriptionLabel:F,fileDescriptionMaxLength:D,sortable:N,disabled:B,readOnly:L,onItemDelete:e=>{var r;z&&(z(e),null===(r=R.current)||void 0===r||r.focus())},onItemUpdate:e=>{A&&A(e)},onSort:e=>{S&&S(e)}}),I&&e.jsx(t.Alert,{className:d.errorAlert,type:"error",children:I}),!L&&e.jsxs("div",{className:d.uploadButtonContainer,children:[e.jsx(l.Button,{type:"button",sizeType:"small",styleType:"secondary",disabled:!!O||B||$(),onClick:e=>{B||(e.preventDefault(),w.current&&w.current.openFileDialog())},className:d.uploadButton,children:U.uploadButton}),e.jsx(s.Typography.BodyMD,{className:d.uploadButtonText,weight:"semibold",children:"or drop them here"})]})]})})};
 //# sourceMappingURL=file-upload.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","sources":["../../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport {\n    Description,\n    DescriptionContainer,\n    ErrorAlert,\n    TextContainer,\n    Title,\n    TitleContainer,\n    UploadButton,\n    UploadButtonContainer,\n    UploadButtonText,\n    WarningAlert,\n} from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        if (!disabled && onChange) {\n            onChange(files);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <TextContainer>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </TextContainer>\n                )}\n                {!!warning && (\n                    <WarningAlert type=\"warning\">{warning}</WarningAlert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <ErrorAlert type=\"error\">{errorMessage}</ErrorAlert>\n                )}\n                {!readOnly && (\n                    <UploadButtonContainer>\n                        <UploadButton\n                            type=\"button\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                        >\n                            {labels.uploadButton}\n                        </UploadButton>\n                        <UploadButtonText weight=\"semibold\">\n                            or drop them here\n                        </UploadButtonText>\n                    </UploadButtonContainer>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","reachedMaxFiles","length","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","files","_a","current","focus","border","TextContainer","Title","TitleContainer","Description","DescriptionContainer","WarningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","ErrorAlert","UploadButtonContainer","UploadButton","onClick","event","preventDefault","openFileDialog","UploadButtonText","weight"],"mappings":"4MAqB0B,EACtBA,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAAA,OAAwB,MACtCC,EAAcD,EAAAA,OAAoB,OACjCE,EAAUC,GAAeC,aA6C1BC,EAAkB,OACb7B,IAAYH,IAAYA,EAAUiC,QAAU9B,EA8BvD,OACI+B,EAAAA,IAACC,EAAAA,kBAAkBC,UAASC,MAAO,CAAER,WAAUC,eAAaQ,SACxDC,EAAAA,KAACC,EAAAA,mBAAkB,CACfC,IAAKf,EACLP,SA3EUuB,WACb9B,GAAYO,IACbA,EAASuB,GACU,QAAnBC,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAwEQtC,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACToC,OAAsB,aAAd/C,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYoB,KAAqBf,eAEvChB,IAASC,IACTqC,EAAAA,KAACQ,gBAAa,CAAAT,SAAA,CAvCrBrC,EAIgB,iBAAVA,EACAiC,EAAAA,IAACc,EAAAA,MAAK,CAAAV,SAAErC,IAGZiC,EAAAA,IAACe,EAAAA,eAAc,CAAAX,SAAErC,IAPb,KAWNC,EAIsB,iBAAhBA,EACAgC,EAAAA,IAACgB,EAAAA,YAAW,CAAAZ,SAAEpC,IAGlBgC,EAAAA,IAACiB,EAAAA,qBAAoB,CAAAb,SAAEpC,IAPnB,UA+BAE,GACC8B,EAAAA,IAACkB,EAAAA,cAAaC,KAAK,UAASf,SAAElC,IAElC8B,EAAAA,IAACoB,EAAAA,SAAQ,CACLb,IAAKb,EACL5B,UAAWA,EACXe,kBAAmBA,EACnBD,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVK,SAAUA,EACVsC,aAhGUC,UAClBpC,IACAA,EAASoC,GACU,QAAnBb,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EA6FYY,aA/EUC,IAClBrC,GACAA,EAAOqC,EACX,EA6EYpC,OA1EIqC,IACZrC,GACAA,EAAOqC,EACX,IAyES3C,GACGkB,EAAAA,IAAC0B,EAAAA,WAAU,CAACP,KAAK,QAAOf,SAAEtB,KAE5BC,GACEsB,EAAAA,KAACsB,EAAAA,sBAAqB,CAAAvB,SAAA,CAClBJ,EAAAA,IAAC4B,EAAAA,aAAY,CACTT,KAAK,SACLtD,UAAU,YACVa,WACMiB,GAAYjB,GAAYoB,IAE9B+B,QAvGpBC,IAEKpD,IACDoD,EAAMC,iBACFvC,EAAYkB,SACZlB,EAAYkB,QAAQsB,iBAE5B,EAgGoD5B,SAE/Bf,EAAOC,eAEZU,EAAAA,IAACiC,EAAAA,iBAAgB,CAACC,OAAO,WAAU9B,SAAA,6BAMtB"}
+{"version":3,"file":"file-upload.js","sources":["../../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { Typography } from \"../typography\";\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport * as styles from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\n// @catalog\n/**\n * Allows user to upload images via drag-and-drop or a native file dialog.\n * @keywords attachment, file, upload\n */\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    descriptionRequired = true,\n    descriptionLabel,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        const filesToProcess = limitIncomingFiles(files);\n\n        if (!disabled && onChange && filesToProcess.length > 0) {\n            onChange(filesToProcess);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const limitIncomingFiles = (files: File[]) => {\n        if (maxFiles === undefined) {\n            return files;\n        }\n\n        const existingItemsCount = fileItems?.length ?? 0;\n        const remainingSlots = Math.max(maxFiles - existingItemsCount, 0);\n\n        return files.slice(0, remainingSlots);\n    };\n\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Typography.BodyBL>{title}</Typography.BodyBL>;\n        }\n\n        return (\n            <Markup\n                className={styles.markupContainer}\n                baseTextSize=\"body-baseline\"\n            >\n                {title}\n            </Markup>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {description}\n                </Typography.BodyMD>\n            );\n        }\n\n        return (\n            <Markup className={styles.markupContainer} baseTextSize=\"body-md\">\n                {description}\n            </Markup>\n        );\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <div className={styles.textContainer}>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </div>\n                )}\n                {!!warning && (\n                    <Alert className={styles.warningAlert} type=\"warning\">\n                        {warning}\n                    </Alert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    descriptionRequired={descriptionRequired}\n                    descriptionLabel={descriptionLabel}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <Alert className={styles.errorAlert} type=\"error\">\n                        {errorMessage}\n                    </Alert>\n                )}\n                {!readOnly && (\n                    <div className={styles.uploadButtonContainer}>\n                        <Button\n                            type=\"button\"\n                            sizeType=\"small\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                            className={styles.uploadButton}\n                        >\n                            {labels.uploadButton}\n                        </Button>\n                        <Typography.BodyMD\n                            className={styles.uploadButtonText}\n                            weight=\"semibold\"\n                        >\n                            or drop them here\n                        </Typography.BodyMD>\n                    </div>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","descriptionRequired","descriptionLabel","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","limitIncomingFiles","files","undefined","existingItemsCount","_a","length","remainingSlots","Math","max","slice","reachedMaxFiles","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","filesToProcess","current","focus","border","styles.textContainer","Typography","BodyBL","Markup","styles.markupContainer","baseTextSize","BodyMD","styles.description","Alert","styles.warningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","styles.errorAlert","styles.uploadButtonContainer","Button","sizeType","onClick","event","preventDefault","openFileDialog","styles.uploadButton","styles.uploadButtonText","weight"],"mappings":"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"}

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

@@ -1,43 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../alert/alert.js"),o=require("../button/button.js"),r=require("../shared/html-content/html-content.js"),i=require("../typography/index.js"),n=require("../v3_theme/index.js");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var l=a(t);const d=l.default.div`
-    display: flex;
-    flex-direction: column;
-    margin-bottom: ${n.V3_Spacing["spacing-32"]};
-    gap: ${n.V3_Spacing["spacing-8"]};
-`,p=l.default(i.Typography.BodyBL)``,s=l.default.div`
-    color: ${n.V3_Colour.text};
-    ${r.applyHtmlContentStyle({textSize:"body-baseline"})}
-`,u=l.default(i.Typography.BodyMD)`
-    color: ${n.V3_Colour["text-subtler"]};
-`,x=l.default.div`
-    color: ${n.V3_Colour.text};
-    ${r.applyHtmlContentStyle({textSize:"body-md"})}
-`,c=l.default(e.Alert)`
-    margin-bottom: ${n.V3_Spacing["spacing-32"]};
-`,y=l.default.div`
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-
-    ${n.V3_MediaQuery.MaxWidth.md} {
-        align-items: flex-start;
-    }
-`,m=l.default(o.Button.Small)`
-    width: 10rem;
-
-    ${n.V3_MediaQuery.MaxWidth.md} {
-        width: 100%;
-    }
-`,g=l.default(i.Typography.BodyMD)`
-    color: ${n.V3_Colour["text-subtler"]};
-    margin-top: ${n.V3_Spacing["spacing-8"]};
-    width: 10rem;
-    text-align: center;
-    ${n.V3_MediaQuery.MaxWidth.md} {
-        display: none;
-        visibility: hidden;
-    }
-`,f=l.default(e.Alert)`
-    margin-bottom: ${n.V3_Spacing["spacing-32"]};
-`;exports.Description=u,exports.DescriptionContainer=x,exports.ErrorAlert=f,exports.TextContainer=d,exports.Title=p,exports.TitleContainer=s,exports.UploadButton=m,exports.UploadButtonContainer=y,exports.UploadButtonText=g,exports.WarningAlert=c;
+"use strict";require("./file-upload.styles_9ffwcd.css");exports.description="dhybrj2",exports.errorAlert="emjmrml",exports.markupContainer="m7vp3hf",exports.textContainer="t9vodht",exports.uploadButton="u7dp799",exports.uploadButtonContainer="u723luu",exports.uploadButtonText="u1rz06ff",exports.warningAlert="wq1el8u";
 //# sourceMappingURL=file-upload.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.styles.js","sources":["../../../src/file-upload/file-upload.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const Title = styled(Typography.BodyBL)``;\n\nexport const TitleContainer = styled.div`\n    color: ${V3_Colour.text};\n    ${applyHtmlContentStyle({ textSize: \"body-baseline\" })}\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionContainer = styled.div`\n    color: ${V3_Colour.text};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n`;\n\nexport const WarningAlert = styled(Alert)`\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const UploadButtonContainer = styled.div`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        align-items: flex-start;\n    }\n`;\n\nexport const UploadButton = styled(Button.Small)`\n    width: 10rem;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const UploadButtonText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    width: 10rem;\n    text-align: center;\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const ErrorAlert = styled(Alert)`\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n"],"names":["TextContainer","styled","div","V3_Spacing","Title","Typography","BodyBL","TitleContainer","V3_Colour","text","applyHtmlContentStyle","textSize","Description","BodyMD","DescriptionContainer","WarningAlert","Alert","UploadButtonContainer","V3_MediaQuery","MaxWidth","md","UploadButton","Button","Small","UploadButtonText","ErrorAlert"],"mappings":"6TAWO,MAAMA,EAAgBC,EAAAA,QAAOC,GAAG;;;qBAGlBC,EAAAA,WAAW;WACrBA,EAAAA,WAAW;EAGTC,EAAQH,EAAAA,QAAOI,aAAWC,OAAO,GAEjCC,EAAiBN,EAAAA,QAAOC,GAAG;aAC3BM,EAAAA,UAAUC;MACjBC,wBAAsB,CAAEC,SAAU;EAG3BC,EAAcX,EAAAA,QAAOI,aAAWQ,OAAO;aACvCL,EAAAA,UAAU;EAGVM,EAAuBb,EAAAA,QAAOC,GAAG;aACjCM,EAAAA,UAAUC;MACjBC,wBAAsB,CAAEC,SAAU;EAG3BI,EAAed,EAAAA,QAAOe,EAAAA,MAAM;qBACpBb,EAAAA,WAAW;EAGnBc,EAAwBhB,EAAAA,QAAOC,GAAG;;;;;;MAMzCgB,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAepB,EAAAA,QAAOqB,SAAOC,MAAM;;;MAG1CL,EAAAA,cAAcC,SAASC;;;EAKhBI,EAAmBvB,EAAAA,QAAOI,aAAWQ,OAAO;aAC5CL,EAAAA,UAAU;kBACLL,EAAAA,WAAW;;;MAGvBe,EAAAA,cAAcC,SAASC;;;;EAMhBK,EAAaxB,EAAAA,QAAOe,EAAAA,MAAM;qBAClBb,EAAAA,WAAW;"}
+{"version":3,"file":"file-upload.styles.js","sources":["../../../src/file-upload/file-upload.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const markupContainer = css`\n    color: ${Colour.text};\n`;\n\nexport const description = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const warningAlert = css`\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const uploadButtonContainer = css`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n\n    ${MediaQuery.MaxWidth.md} {\n        align-items: flex-start;\n    }\n`;\n\nexport const uploadButton = css`\n    width: 10rem;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const uploadButtonText = css`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n    width: 10rem;\n    text-align: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const errorAlert = css`\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n"],"names":[],"mappings":"uGAewB,6BAuCD,kCA3CK,gCAPF,+BA8BD,wCAXS,mCAmBL,gCAvBJ"}

package/cjs/file-upload/file-upload.styles_9ffwcd.css

@@ -0,0 +1,8 @@
+@layer fds{.t9vodht{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--fds-spacing-32);gap:var(--fds-spacing-8);}
+.m7vp3hf{color:var(--fds-colour-text);}
+.dhybrj2{color:var(--fds-colour-text-subtler);}
+.wq1el8u{margin-bottom:var(--fds-spacing-32);}
+.u723luu{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}:where(body.fds-breakpoint-md-max) .u723luu{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.u7dp799{width:10rem;}:where(body.fds-breakpoint-md-max) .u7dp799{width:100%;}
+.u1rz06ff{color:var(--fds-colour-text-subtler);margin-top:var(--fds-spacing-8);width:10rem;text-align:center;}:where(body.fds-breakpoint-md-max) .u1rz06ff{display:none;visibility:hidden;}
+.emjmrml{margin-bottom:var(--fds-spacing-32);}}

package/cjs/file-upload/helper.js

@@ -1,2 +1,2 @@
-"use strict";exports.FileUploadHelper=class{static formatFileSizeDisplay(e){if(!e||0===e)return"0 KB";const i=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,i)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`}static isSupportedImageType(e){return["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e)}};
+"use strict";class e{static formatFileSizeDisplay(e){if(!e||0===e)return"0 KB";const i=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,i)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`}static isSupportedImageType(e){return["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e)}}e.PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg",exports.FileUploadHelper=e;
 //# sourceMappingURL=helper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../../src/file-upload/helper.ts"],"sourcesContent":["export class FileUploadHelper {\n    // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n    public static formatFileSizeDisplay(size?: number) {\n        if (!size || size === 0) return \"0 KB\";\n\n        const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n        const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n        const value = Number(size / Math.pow(1024, index)).toFixed(0);\n        const measurement = sizes[index];\n\n        return `${value} ${measurement}`;\n    }\n\n    public static isSupportedImageType(type: string): boolean {\n        /** Currently only images supported by html <img> */\n        const acceptedImageTypes = [\n            \"image/avif\",\n            \"image/gif\",\n            \"image/jpeg\",\n            \"image/png\",\n            \"image/svg+xml\",\n            \"image/webp\",\n        ];\n\n        return acceptedImageTypes.includes(type);\n    }\n}\n"],"names":["formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes"],"mappings":"4CAEW,4BAAOA,CAAsBC,GAChC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAG9B,CAEO,2BAAOO,CAAqBC,GAW/B,MAT2B,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD,EACvC"}
+{"version":3,"file":"helper.js","sources":["../../../src/file-upload/helper.ts"],"sourcesContent":["export class FileUploadHelper {\n    public static readonly PDF_MIME_TYPE = \"application/pdf\";\n    public static readonly PDF_ICON_URL =\n        \"https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg\";\n\n    // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n    public static formatFileSizeDisplay(size?: number) {\n        if (!size || size === 0) return \"0 KB\";\n\n        const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n        const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n        const value = Number(size / Math.pow(1024, index)).toFixed(0);\n        const measurement = sizes[index];\n\n        return `${value} ${measurement}`;\n    }\n\n    public static isSupportedImageType(type: string): boolean {\n        /** Currently only images supported by html <img> */\n        const acceptedImageTypes = [\n            \"image/avif\",\n            \"image/gif\",\n            \"image/jpeg\",\n            \"image/png\",\n            \"image/svg+xml\",\n            \"image/webp\",\n        ];\n\n        return acceptedImageTypes.includes(type);\n    }\n}\n"],"names":["FileUploadHelper","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes","PDF_MIME_TYPE","PDF_ICON_URL"],"mappings":"mBAAaA,EAMF,4BAAOC,CAAsBC,GAChC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAG9B,CAEO,2BAAOO,CAAqBC,GAW/B,MAT2B,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD,EACvC,EA9BuBX,EAAAa,cAAgB,kBAChBb,EAAAc,aACnB"}