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

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

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

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

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

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

@@ -1,171 +1,15 @@
 export type ItemFocusType = "self" | "others" | "none";
-interface ItemStyleProps {
-    $sortable: boolean;
-    $disabled?: boolean | undefined;
-    $focusType: ItemFocusType;
-}
-interface DragHandleIconStyleProps {
-    $disabled?: boolean | undefined;
-    $active?: boolean | undefined;
-}
-interface BoxStyleProps {
-    $error?: boolean | undefined;
-    $disabled?: boolean | undefined;
-    $focused?: boolean | undefined;
-    $loading?: boolean | undefined;
-    $editable?: boolean | undefined;
-}
-interface ContentSectionStyleProps {
-    $hasThumbnail?: boolean | undefined;
-}
-interface ActionContainerStyleProps {
-    $editable?: boolean | undefined;
-    $error?: boolean | undefined;
-    $loading?: boolean | undefined;
-}
-interface FileSizeSectionStyleProps {
-    $hideInMobile?: boolean | undefined;
-}
-export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ItemStyleProps> & ItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ItemStyleProps> & ItemStyleProps, never>>> & string;
-export declare const DragHandleIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, keyof DragHandleIconStyleProps> & DragHandleIconStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, keyof DragHandleIconStyleProps> & DragHandleIconStyleProps, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxStyleProps> & BoxStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxStyleProps> & BoxStyleProps, never>>> & string;
-export declare const ContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasThumbnail"> & ContentSectionStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasThumbnail"> & ContentSectionStyleProps, never>>> & string;
-export declare const NameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ExtendedNameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const FileSizeSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hideInMobile"> & FileSizeSectionStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hideInMobile"> & FileSizeSectionStyleProps, never>>> & string;
-export declare const FileSizeText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ItemText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ItemDescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const BaseErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const DesktopErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const MobileErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ActionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionContainerStyleProps> & ActionContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionContainerStyleProps> & ActionContainerStyleProps, never>>> & string;
-export declare const IconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<((props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
-    Default: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Small: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Large: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-}, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const item: import("@linaria/core").LinariaClassName;
+export declare const dragHandleIcon: import("@linaria/core").LinariaClassName;
+export declare const box: import("@linaria/core").LinariaClassName;
+export declare const contentSection: import("@linaria/core").LinariaClassName;
+export declare const nameSection: import("@linaria/core").LinariaClassName;
+export declare const extendedNameSection: import("@linaria/core").LinariaClassName;
+export declare const fileSizeSection: import("@linaria/core").LinariaClassName;
+export declare const fileSizeText: import("@linaria/core").LinariaClassName;
+export declare const itemDescriptionText: import("@linaria/core").LinariaClassName;
+export declare const errorIcon: import("@linaria/core").LinariaClassName;
+export declare const desktopErrorMessage: import("@linaria/core").LinariaClassName;
+export declare const mobileErrorMessage: import("@linaria/core").LinariaClassName;
+export declare const actionContainer: import("@linaria/core").LinariaClassName;
+export declare const iconButton: import("@linaria/core").LinariaClassName;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button as DSIconButton } from \"../../button\";\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 FileSizeText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionText = styled(Typography.BodyMD)`\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(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\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(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\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"],"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","FileSizeText","Typography","BodyMD","ItemText","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","IconButton","DSIconButton"],"mappings":"+aAuDO,MAAMA,EAAOC,EAAOC,EAAkB;;;;;;;yBAOpBC,EAAW;;;MAG7BC,GACKA,EAAMC,WAAkC,SAArBD,EAAME,WAElBC,CAAG;;cAGHH,EAAMI,WAAkC,SAArBJ,EAAME,WACzBC,CAAG;;;;;cAMHH,EAAMI,UACND,CAAG;;;;;;;mBADP;EAaFE,EAAiBR,EAC1BS,EACuB;oBACPP,EAAW;;;aAGlBQ,EAAgB;;MAEtBP,GACKA,EAAMQ,QACCL,CAAG;yBACGI,EAAU;cAIvBP,EAAMC,UACCE,CAAG;yBACGI,EAAU;mBAF3B;EAQKE,EAAMZ,EAAOa,GAAkB;kBAC1BH,EAAU;cACdI,EAAU,gBAAgBA,EAAiB;UAC/CJ,EAAkB;qBACPK,EAAc;eACpBb,EAAW,iBAAiBA,EAAW;;;;;MAKhDc,EAAcC,SAASC;mBACVhB,EAAW;;;MAGvBC,GACKA,EAAMgB,SACCb,CAAG;gCACUI,EAAU;8BACZU,EAAU;cAErBjB,EAAMC,UACNE,CAAG;gCACUI,EAAU;cAEvBP,EAAMkB,OACNf,CAAG;8BACQI,EAAU;gCACRA,EAAU;mBAH3B;;MAQRP,IACC,IAAKA,EAAMkB,SAAWlB,EAAMmB,UAAYnB,EAAMoB,WAC1C,OAAOjB,CAAG;kBACJU,EAAcC,SAASC;;;;aAKjC;EAIKM,EAAiBxB,EAAOa,GAA6B;;;;;MAK5DG,EAAcC,SAASC;;;;;;MAMtBf,IACC,GAAIA,EAAMsB,cACN,OAAOnB,CAAG;kBACJU,EAAcC,SAASC;;;;aAKjC;EAIKQ,EAAc1B,EAAOa,GAAG;;;;;EAOxBc,EAAsB3B,EAAOa,GAAG;;;;;MAKvCG,EAAcC,SAASC;;;;;EAOhBU,EAAkB5B,EAAOa,GAA8B;;;mBAGjDX,EAAW;;;MAGxBc,EAAcC,SAASC;UAClBf,GACKA,EAAM0B,cACCvB,CAAG;;;kBAKHA,CAAG;;;kCAGQJ,EAAW;;;;EAQhC4B,EAAe9B,EAAO+B,EAAWC,OAAO;aACxCtB,EAAU;EAGVuB,EAAWjC,EAAO+B,EAAWC,OAAO,GAEpCE,EAAsBlC,EAAO+B,EAAWC,OAAO;kBAC1C9B,EAAW;EAGhBiC,EAAYnC,EAAOoC,EAA0B;;;;aAI7C1B,EAAU;EAGSV,EAAO+B,EAAWM,OAAO;aAC5C3B,EAAU;EAGhB,MAAM4B,EAAsBtC,EAAO+B,EAAWM,OAAO;aAC/C3B,EAAU;kBACLR,EAAW;;WAElBA,EAAW;;MAEhBc,EAAcC,SAASC;;;;EAMhBqB,EAAqBvC,EAAO+B,EAAWM,OAAO;aAC9C3B,EAAU;;;;MAIjBM,EAAcC,SAASC;;eAEdhB,EAAW;;sBAEJA,EAAW;;EAIpBsC,EAAkBxC,EAAOa,GAA8B;;mBAEjDX,EAAW;;;;;MAKxBc,EAAcC,SAASC;;;UAGlBf,GACKA,EAAMmB,WAAanB,EAAMkB,OAClBf,CAAG;;kCAEQJ,EAAW;;kBAGtBC,EAAMoB,YAAcpB,EAAMkB,OAC1Bf,CAAG;;kCAEQJ,EAAW;;uBAH1B;;EAWNuC,EAAazC,EAAO0C,EAAa;;;;wBAItBxC,EAAW;;"}
+{"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\n\nexport const item = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n    &[data-item-state=\"disabled\"] {\n        cursor: not-allowed;\n    }\n\n    &[data-item-state=\"sortable\"] {\n        &:hover {\n            cursor: grab;\n        }\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n\n    &[data-item-state=\"sortable-active\"] {\n        cursor: grabbing;\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n`;\n\nexport const dragHandleIcon = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    &[data-drag-handle-state=\"active\"] {\n        color: ${Colour[\"icon-primary\"]};\n    }\n\n    &[data-drag-handle-state=\"disabled\"] {\n        color: ${Colour[\"icon-disabled\"]};\n    }\n`;\n\nexport const box = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-box-state=\"focused\"] {\n        border-color: ${Colour[\"border-focus\"]};\n        box-shadow: ${Shadow[\"xs-focus-strong\"]};\n    }\n\n    &[data-box-state=\"disabled\"] {\n        border-color: ${Colour[\"border-disabled\"]};\n    }\n\n    &[data-box-state=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border-color: ${Colour[\"border-error\"]};\n    }\n\n    &[data-stack-mobile=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: column;\n            align-items: flex-start;\n        }\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    &[data-has-thumbnail=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: row;\n            align-items: center;\n        }\n    }\n`;\n\nexport const nameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const extendedNameSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    &[data-mobile-visibility=\"hidden\"] {\n        ${MediaQuery.MaxWidth.md} {\n            display: none;\n            visibility: hidden;\n        }\n    }\n\n    &[data-mobile-visibility=\"expand\"] {\n        ${MediaQuery.MaxWidth.md} {\n            width: 100%;\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-8\"]};\n            justify-content: flex-start;\n        }\n    }\n`;\n\nexport const fileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const itemDescriptionText = css`\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: fit-content;\n    }\n\n    &[data-mobile-layout=\"loading\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            width: 100%;\n        }\n    }\n\n    &[data-mobile-layout=\"editable\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            align-self: flex-end;\n        }\n    }\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n"],"names":["item","dragHandleIcon","box","contentSection","nameSection","extendedNameSection","fileSizeSection","fileSizeText","itemDescriptionText","errorIcon","desktopErrorMessage","mobileErrorMessage","actionContainer","iconButton"],"mappings":"qFAaO,MAAMA,EAAI,WAgCJC,EAAc,UAedC,EAAG,UAmCHC,EAAc,WAmBdC,EAAW,UAOXC,EAAmB,UAYnBC,EAAe,WAuBfC,EAAY,WAIZC,EAAmB,UAInBC,EAAS,WAOTC,EAAmB,WAYnBC,EAAkB,UAalBC,EAAe,WA4BfC,EAAU"}

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

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

package/file-upload/file-upload.js

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