@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-list.js","sources":["../../../../src/file-upload/file-list/file-list.tsx"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } from \"@dnd-kit/core\";\nimport {\n    DndContext,\n    KeyboardSensor,\n    TouchSensor,\n    useSensor,\n    useSensors,\n} from \"@dnd-kit/core\";\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport type { FormLabelProps } from \"../../form/form-label/types\";\nimport { VisuallyHidden } from \"../../shared/accessibility\";\nimport { FileUploadContext } from \"../context\";\nimport { MouseSensor } from \"../custom-sensors\";\nimport { FileItemEdit } from \"../file-item-edit\";\nimport { FileListItem } from \"../file-list-item\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { FileItemProps } from \"../types\";\nimport * as styles from \"./file-list.styles\";\n\n// =============================================================================\n// INTERFACES\n// =============================================================================\ntype RenderMode = \"edit\" | \"display\" | \"error\";\n\ntype FileItemRenderModes = Record<string, RenderMode>;\ntype FileEditedDescriptions = Record<string, string>;\n\ntype RenderItem = FileItemProps | FileItemProps[];\n\ninterface Props {\n    fileItems: FileItemProps[] | undefined;\n    editableFileItems: boolean;\n    fileDescriptionMaxLength?: number | undefined;\n    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    sortable?: boolean | undefined;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    onItemUpdate: (item: FileItemProps) => void;\n    onItemDelete: (item: FileItemProps) => void;\n    onSort?: ((reorderedFileItems: FileItemProps[]) => void) | undefined;\n}\n\ntype AnnouncementProgress = Record<\n    string,\n    {\n        progress: number;\n        timestamp: number;\n        status: \"in-progress\" | \"complete\" | \"error\";\n    }\n>;\n\nexport interface FileListRef {\n    focus: () => void;\n}\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\n\nfunction Component(\n    {\n        fileItems = [],\n        editableFileItems,\n        fileDescriptionMaxLength,\n        descriptionRequired,\n        descriptionLabel,\n        sortable,\n        disabled,\n        readOnly,\n        onItemUpdate,\n        onItemDelete,\n        onSort,\n    }: Props,\n    ref: React.Ref<FileListRef>\n) {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [renderModes, setRenderModes] = useState<FileItemRenderModes>({});\n    const { setActiveId } = useContext(FileUploadContext);\n\n    // Progress announcement state (for aria-live) - announces start and completion only\n    const [progressAnnouncement, setProgressAnnouncement] = useState(\"\");\n    const lastAnnouncedRef = useRef<AnnouncementProgress>({});\n\n    useImperativeHandle(ref, () => ({\n        focus: () => {\n            wrapperRef.current?.focus();\n        },\n    }));\n    const { width: wrapperWidth = 0, ref: wrapperRef } = useResizeDetector();\n\n    // Keep track of edited description without re-rendering\n    const descriptionsValueRef = useRef<FileEditedDescriptions>({});\n\n    /**\n     * As the default drag sensors interfere with click events\n     * on the file items, we'll need to configure the sensor to\n     * only activate the drag if the mouse moves a certain distance\n     */\n    const sensors = useSensors(\n        useSensor(MouseSensor, {\n            activationConstraint: {\n                distance: 8, // mouse drag of 8px then activate the drag event\n            },\n        }),\n        useSensor(TouchSensor, {\n            activationConstraint: {\n                delay: 150,\n                tolerance: 5,\n            },\n        }),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    // =========================================================================\n    // REF METHODS\n    // =========================================================================\n    const removeDescription = (itemId: string) => {\n        delete descriptionsValueRef.current[itemId];\n    };\n\n    const shallowCompareRenderModes = (\n        prev: FileItemRenderModes,\n        next: FileItemRenderModes\n    ) => {\n        const prevKeys = Object.keys(prev);\n        const nextKeys = Object.keys(next);\n        if (prevKeys.length !== nextKeys.length) {\n            return false;\n        }\n        for (const k of nextKeys) {\n            if (prev[k] !== next[k]) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const nextModes = getItemsRenderMode(fileItems);\n        const prevModes = renderModes;\n        // We perform shallowCompare to avoid infinite re-render loop\n        if (shallowCompareRenderModes(prevModes, nextModes)) {\n            return;\n        }\n        setRenderModes(nextModes);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [fileItems, editableFileItems, readOnly]);\n\n    // Progress announcements only at start and completion\n    useEffect(() => {\n        if (!fileItems || fileItems.length === 0) {\n            setProgressAnnouncement(\"\");\n            return;\n        }\n        const now = Date.now();\n        const messages: string[] = [];\n\n        for (const item of fileItems) {\n            const fileStatus = lastAnnouncedRef.current[item.id];\n\n            if (item.errorMessage) {\n                if (fileStatus?.status !== \"error\") {\n                    messages.push(\n                        typeof item.errorMessage === \"string\"\n                            ? `Error uploading ${item.name}: ${item.errorMessage}`\n                            : `Error uploading ${item.name}`\n                    );\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress ?? 1,\n                        timestamp: now,\n                        status: \"error\",\n                    };\n                }\n                continue;\n            }\n\n            if (item.progress === undefined) {\n                continue;\n            }\n\n            if (item.progress >= 1) {\n                if (fileStatus?.status !== \"complete\") {\n                    messages.push(`${item.name} upload is complete`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: 1,\n                        timestamp: now,\n                        status: \"complete\",\n                    };\n                }\n                continue;\n            }\n\n            // In progress - only announce start, not progress updates\n            if (typeof item.progress === \"number\" && item.progress < 1) {\n                // Only announce when starting upload (no previous status or status was not in-progress)\n                const shouldAnnounce =\n                    !fileStatus || fileStatus.status !== \"in-progress\";\n\n                if (shouldAnnounce) {\n                    messages.push(`Starting upload of ${item.name}`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress,\n                        timestamp: now,\n                        status: \"in-progress\",\n                    };\n                }\n            }\n        }\n\n        if (messages.length > 0) {\n            // Update aria-live region once with aggregated message\n            setProgressAnnouncement(messages.join(\", \"));\n        }\n    }, [fileItems]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSaveEdit = (item: FileItemProps) => (description: string) => {\n        updateRenderModes(item.id, \"display\");\n        removeDescription(item.id);\n\n        const updatedItem = { ...item, description };\n        onItemUpdate(updatedItem);\n    };\n\n    const handleBlurEdit = (item: FileItemProps) => (value: string) => {\n        descriptionsValueRef.current[item.id] = value;\n    };\n\n    const handleCancel = (item: FileItemProps) => () => {\n        if (!item.description || item.description.length === 0) {\n            // New addition\n            onItemDelete(item);\n        } else {\n            updateRenderModes(item.id, \"display\");\n        }\n        removeDescription(item.id);\n    };\n\n    const handleInitiateEdit = (item: FileItemProps) => () => {\n        updateRenderModes(item.id, \"edit\");\n    };\n\n    const handleDelete = (item: FileItemProps) => () => {\n        onItemDelete(item);\n        if (wrapperRef.current) {\n            wrapperRef.current.focus();\n        }\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        if (onSort && fileItems) {\n            const { active, over } = event;\n\n            if (over && active.id !== over.id) {\n                const oldIndex = fileItems.findIndex(\n                    (item) => item.id === active.id\n                );\n                const newIndex = fileItems.findIndex(\n                    (item) => item.id === over.id\n                );\n\n                const updatedFileItems = arrayMove(\n                    fileItems,\n                    oldIndex,\n                    newIndex\n                );\n\n                onSort(updatedFileItems);\n            }\n        }\n\n        setActiveId(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setActiveId(active.id as string);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const checkEditable = (item: FileItemProps) => {\n        return (\n            editableFileItems &&\n            FileUploadHelper.isSupportedImageType(item.type)\n        );\n    };\n\n    const shouldRenderEditMode = (item: FileItemProps) => {\n        return (\n            !item.errorMessage &&\n            !readOnly &&\n            !(typeof item.progress === \"number\" && item.progress < 1) &&\n            checkEditable(item) &&\n            !item.description\n        );\n    };\n\n    const getItemsRenderMode = (\n        fileItems: FileItemProps[] | undefined\n    ): FileItemRenderModes => {\n        if (!fileItems || fileItems.length === 0) return {};\n\n        const newRenderModes: FileItemRenderModes = {};\n\n        for (const item of fileItems) {\n            if (item.errorMessage) {\n                newRenderModes[item.id] = \"error\";\n            } else if (!renderModes[item.id]) {\n                newRenderModes[item.id] = shouldRenderEditMode(item)\n                    ? \"edit\"\n                    : \"display\";\n            } else {\n                newRenderModes[item.id] = renderModes[item.id];\n            }\n        }\n\n        return newRenderModes;\n    };\n\n    const updateRenderModes = (itemId: string, mode: RenderMode) => {\n        setRenderModes((prevRenderModes) => {\n            return {\n                ...prevRenderModes,\n                [itemId]: mode,\n            };\n        });\n    };\n\n    /**\n     * Due to a UI requirement, we will render the items\n     * with edit modes as a group\n     */\n    const getArrangedItems = (\n        fileItems: FileItemProps[] | undefined,\n        renderModes: FileItemRenderModes\n    ) => {\n        if (!fileItems || fileItems.length === 0) return [];\n\n        const arrangedItems: RenderItem[] = [];\n\n        for (const fileItem of fileItems) {\n            if (renderModes[fileItem.id] === \"edit\") {\n                const previousElement = arrangedItems[arrangedItems.length - 1];\n                if (Array.isArray(previousElement)) {\n                    previousElement.push(fileItem);\n                } else {\n                    arrangedItems.push([fileItem]);\n                }\n            } else {\n                arrangedItems.push(fileItem);\n            }\n        }\n\n        return arrangedItems;\n    };\n\n    const areAllItemsInDisplayViews = () => {\n        return Object.values(renderModes).every((mode) => mode === \"display\");\n    };\n\n    const shouldEnableSort = () => {\n        return (\n            fileItems &&\n            fileItems.length > 1 &&\n            sortable &&\n            areAllItemsInDisplayViews()\n        );\n    };\n\n    /**\n     * If there are no files, return \"No files uploaded\".\n     * If readOnly is true, return \"Read-only file list\".\n     * If there are files, return a summary of the file statuses.\n     * For example, \"File list. 2 completed files, 1 file in progress, 1 file with error\".\n     *\n     * @returns aria label\n     */\n    const getWrapperAriaLabel = () => {\n        if (fileItems.length === 0) {\n            return \"No files uploaded\";\n        }\n        const completedCount = fileItems.filter(\n            (item) =>\n                !item?.errorMessage &&\n                (item.progress === 1 || item.progress === undefined)\n        ).length;\n        const inProgressCount = fileItems.filter(\n            (item) => typeof item.progress === \"number\" && item.progress < 1\n        ).length;\n        const errorCount = fileItems.filter((item) => item.errorMessage).length;\n        if (completedCount === 0 && inProgressCount === 0 && errorCount === 0) {\n            return `File list`;\n        }\n        const completedText =\n            completedCount > 0 ? `${completedCount} completed files` : \"\";\n        const inProgressText =\n            inProgressCount > 0 ? `${inProgressCount} file in progress` : \"\";\n        const errorText =\n            errorCount > 0\n                ? `${errorCount} ${\n                      errorCount > 1 ? \"files\" : \"file\"\n                  } with error`\n                : \"\";\n        const parts = [completedText, inProgressText, errorText].filter(\n            Boolean\n        );\n        const prefix = readOnly ? \"Read-only file list\" : \"File list\";\n        return `${prefix}. ${parts.join(\", \")}`;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderItemsInEditMode = (\n        fileItems: FileItemProps[],\n        keyToUse: number\n    ) => {\n        const itemsToRender = fileItems.map((item) => {\n            const updatedFileItem = { ...item };\n            if (descriptionsValueRef.current[item.id] !== undefined) {\n                updatedFileItem.description =\n                    descriptionsValueRef.current[item.id];\n            }\n\n            return (\n                <FileItemEdit\n                    key={item.id}\n                    fileItem={updatedFileItem}\n                    wrapperWidth={wrapperWidth}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    descriptionRequired={descriptionRequired}\n                    descriptionLabel={descriptionLabel}\n                    onSave={handleSaveEdit(item)}\n                    onCancel={handleCancel(item)}\n                    onBlur={handleBlurEdit(item)}\n                />\n            );\n        });\n\n        return (\n            <li\n                key={`editable-${keyToUse}`}\n                className={styles.editableItemsContainer}\n            >\n                <ul>{itemsToRender}</ul>\n            </li>\n        );\n    };\n\n    const renderItems = () => {\n        const arrangedItems = getArrangedItems(fileItems, renderModes);\n\n        if (arrangedItems.length === 0) return null;\n\n        return arrangedItems.map((item, index) => {\n            if (Array.isArray(item)) {\n                return renderItemsInEditMode(item, index);\n            } else {\n                return (\n                    <FileListItem\n                        key={item.id}\n                        fileItem={item}\n                        editable={checkEditable(item)}\n                        wrapperWidth={wrapperWidth}\n                        sortable={shouldEnableSort()}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        descriptionLabel={descriptionLabel}\n                        onDelete={handleDelete(item)}\n                        onEditClick={handleInitiateEdit(item)}\n                    />\n                );\n            }\n        });\n    };\n\n    /**\n     * Renders the progress status of each file upload.\n     * In progress: 25% complete for uploading filename.pdf\n     * Complete: filename.pdf upload is complete\n     * Error: Error uploading filename.pdf: error message\n     *\n     * @returns A visually hidden element announcing the progress status.\n     */\n    const renderProgressStatus = () => (\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n            {progressAnnouncement}\n        </VisuallyHidden>\n    );\n\n    const renderItemsWithWrapper = () => {\n        return (\n            <>\n                {renderProgressStatus()}\n                <ul\n                    tabIndex={-1}\n                    className={clsx(\n                        styles.listWrapper,\n                        readOnly && styles.listWrapperReadOnly\n                    )}\n                    ref={wrapperRef}\n                    aria-label={getWrapperAriaLabel()}\n                >\n                    {renderItems()}\n                </ul>\n            </>\n        );\n    };\n\n    if (disabled || readOnly || !shouldEnableSort()) {\n        return renderItemsWithWrapper();\n    } else {\n        return (\n            <DndContext\n                sensors={sensors}\n                onDragEnd={handleDragEnd}\n                onDragStart={handleDragStart}\n            >\n                <SortableContext\n                    items={fileItems}\n                    strategy={verticalListSortingStrategy}\n                >\n                    {renderItemsWithWrapper()}\n                </SortableContext>\n            </DndContext>\n        );\n    }\n}\n\nexport const FileList = forwardRef<FileListRef, Props>(Component);\n"],"names":["FileList","forwardRef","fileItems","editableFileItems","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","sortable","disabled","readOnly","onItemUpdate","onItemDelete","onSort","ref","renderModes","setRenderModes","useState","setActiveId","useContext","FileUploadContext","progressAnnouncement","setProgressAnnouncement","lastAnnouncedRef","useRef","useImperativeHandle","focus","_a","wrapperRef","current","width","wrapperWidth","useResizeDetector","descriptionsValueRef","sensors","useSensors","useSensor","MouseSensor","activationConstraint","distance","TouchSensor","delay","tolerance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","removeDescription","itemId","useEffect","nextModes","getItemsRenderMode","prev","next","prevKeys","Object","keys","nextKeys","length","k","shallowCompareRenderModes","now","Date","messages","item","fileStatus","id","errorMessage","status","push","name","progress","timestamp","undefined","join","handleSaveEdit","description","updateRenderModes","updatedItem","assign","handleBlurEdit","value","handleCancel","handleInitiateEdit","handleDelete","handleDragEnd","event","active","over","oldIndex","findIndex","newIndex","updatedFileItems","arrayMove","handleDragStart","checkEditable","FileUploadHelper","isSupportedImageType","type","shouldRenderEditMode","newRenderModes","mode","prevRenderModes","shouldEnableSort","values","every","getWrapperAriaLabel","completedCount","filter","inProgressCount","errorCount","parts","Boolean","renderItems","arrangedItems","fileItem","previousElement","Array","isArray","getArrangedItems","map","index","keyToUse","itemsToRender","updatedFileItem","_jsx","FileItemEdit","onSave","onCancel","onBlur","className","styles.editableItemsContainer","children","renderItemsInEditMode","FileListItem","editable","onDelete","onEditClick","renderItemsWithWrapper","_jsxs","_Fragment","VisuallyHidden","tabIndex","clsx","styles.listWrapper","styles.listWrapperReadOnly","DndContext","onDragEnd","onDragStart","SortableContext","items","strategy","verticalListSortingStrategy"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./file-list.styles_1w7so98.css");exports.editableItemsContainer="e1y5148f",exports.listWrapper="l14goqmf",exports.listWrapperReadOnly="l1spcgo1";
+//# sourceMappingURL=file-list.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-list.styles.js","sources":["../../../../src/file-upload/file-list/file-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../../theme\";\n\nexport const listWrapper = css`\n    list-style-type: none;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const listWrapperReadOnly = css`\n    margin-bottom: 0;\n`;\n\nexport const editableItemsContainer = css`\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":[],"mappings":"2HAamC,+BATX,uCAKQ"}

package/cjs/file-upload/file-list/file-list.styles_1w7so98.css

@@ -0,0 +1,3 @@
+@layer fds{.l14goqmf{list-style-type:none;margin-bottom:var(--fds-spacing-32);}
+.l1spcgo1{margin-bottom:0;}
+.e1y5148f:not(:last-child){margin-bottom:var(--fds-spacing-16);}.e1y5148f ul{list-style-type:none;}}

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

@@ -1,35 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../shared/image-with-fallback/image-with-fallback.js"),i=require("../../theme/index.js"),a=require("../helper.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(t);const n=d.default.div`
-    width: auto;
-    margin-right: ${i.Spacing["spacing-32"]};
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    justify-content: center;
-`,l=d.default(r.ImageWithFallback)`
-    width: 96px;
-    height: 96px;
-    aspect-ratio: 1;
-    border-radius: ${i.Radius.sm};
-    border: ${e=>e.$isPdf?"none":`${i.Border["width-010"]} ${i.Border.solid} ${i.Colour.border}`};
-    object-fit: cover;
-
-    ${i.MediaQuery.MaxWidth.md} {
-        width: 64px;
-        height: 64px;
-    }
-`,s=d.default.button`
-    width: 100%;
-    height: 1.625rem;
-    margin-top: ${i.Spacing["spacing-8"]};
-    border: none;
-    background: transparent;
-    cursor: pointer;
-
-    ${i.Font["body-md-semibold"]}
-    color: ${i.Colour["text-primary"]};
-
-    &:hover {
-        color: ${i.Colour["text-hover"]};
-    }
-`;exports.Container=n,exports.FileListItemThumbnail=({thumbnailImageDataUrl:t,fileType:r,"data-testid":i,renderReplaceButton:o,onReplaceClick:d})=>{const c=r===a.FileUploadHelper.PDF_MIME_TYPE,u=c?t||a.FileUploadHelper.PDF_ICON_URL:t||"";return e.jsxs(n,{"data-testid":i,children:[e.jsx(l,{"data-testid":i?`${i}-image`:void 0,src:u,$isPdf:c}),o&&e.jsx(s,{type:"button",onClick:()=>{d&&d()},children:"Replace"})]})},exports.ReplaceButton=s,exports.Thumbnail=l;
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("../../shared/image-with-fallback/image-with-fallback.js"),l=require("../helper.js"),i=require("./file-list-item-thumbnail.styles.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(t);exports.FileListItemThumbnail=({thumbnailImageDataUrl:t,fileType:r,"data-testid":n,renderReplaceButton:c,onReplaceClick:u})=>{const d=r===l.FileUploadHelper.PDF_MIME_TYPE,m=d?t||l.FileUploadHelper.PDF_ICON_URL:t||"";return e.jsxs("div",{className:i.container,"data-testid":n,children:[e.jsx(a.ImageWithFallback,{"data-testid":n?`${n}-image`:void 0,src:m,className:s.default(i.thumbnail,d&&i.thumbnailPdf)}),c&&e.jsx("button",{type:"button",onClick:()=>{u&&u()},className:i.replaceButton,children:"Replace"})]})};
 //# sourceMappingURL=file-list-item-thumbnail.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\nimport { FileUploadHelper } from \"../helper\";\n\ninterface Props {\n    thumbnailImageDataUrl?: string | undefined;\n    fileType?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    fileType,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    const isPdf = fileType === FileUploadHelper.PDF_MIME_TYPE;\n    const displaySrc = isPdf\n        ? thumbnailImageDataUrl || FileUploadHelper.PDF_ICON_URL\n        : thumbnailImageDataUrl || \"\";\n\n    return (\n        <Container data-testid={testId}>\n            <Thumbnail\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={displaySrc}\n                $isPdf={isPdf}\n            />\n            {renderReplaceButton && (\n                <ReplaceButton type=\"button\" onClick={handleReplace}>\n                    Replace\n                </ReplaceButton>\n            )}\n        </Container>\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    width: auto;\n    margin-right: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)<{ $isPdf?: boolean }>`\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    border-radius: ${Radius[\"sm\"]};\n    border: ${(props) =>\n        props.$isPdf\n            ? \"none\"\n            : `${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]}`};\n    object-fit: cover;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const ReplaceButton = styled.button`\n    width: 100%;\n    height: 1.625rem;\n    margin-top: ${Spacing[\"spacing-8\"]};\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["Container","styled","div","Spacing","Thumbnail","ImageWithFallback","Radius","props","$isPdf","Border","Colour","MediaQuery","MaxWidth","md","ReplaceButton","button","Font","thumbnailImageDataUrl","fileType","testId","renderReplaceButton","onReplaceClick","isPdf","FileUploadHelper","PDF_MIME_TYPE","displaySrc","PDF_ICON_URL","_jsxs","children","_jsx","undefined","src","type","onClick"],"mappings":"mSAaO,MAqCMA,EAAYC,EAAAA,QAAOC,GAAG;;oBAEfC,EAAAA,QAAQ;;;;;EAOfC,EAAYH,EAAAA,QAAOI,EAAAA,kBAAwC;;;;qBAInDC,EAAAA,OAAW;cACjBC,GACPA,EAAMC,OACA,OACA,GAAGC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,EAAAA,OAAe;;;MAGpEC,EAAAA,WAAWC,SAASC;;;;EAMbC,EAAgBb,EAAAA,QAAOc,MAAM;;;kBAGxBZ,EAAAA,QAAQ;;;;;MAKpBa,EAAAA,KAAK;aACEN,EAAAA,OAAO;;;iBAGHA,EAAAA,OAAO;;oDA3Ea,EACjCO,wBACAC,WACA,cAAeC,EACfC,sBACAC,qBAEA,MAMMC,EAAQJ,IAAaK,EAAAA,iBAAiBC,cACtCC,EAAaH,EACbL,GAAyBM,EAAAA,iBAAiBG,aAC1CT,GAAyB,GAE/B,OACIU,EAAAA,KAAC3B,EAAS,CAAA,cAAcmB,EAAMS,SAAA,CAC1BC,EAAAA,IAACzB,EAAS,CAAA,cACOe,EAAS,GAAGA,eAAiBW,EAC1CC,IAAKN,EAAUjB,OACPc,IAEXF,GACGS,EAAAA,IAACf,EAAa,CAACkB,KAAK,SAASC,QAnBnB,KACdZ,GACAA,GACJ,EAgB2DO,SAAA,cAI/C"}
+{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { FileUploadHelper } from \"../helper\";\nimport * as styles from \"./file-list-item-thumbnail.styles\";\n\ninterface Props {\n    thumbnailImageDataUrl?: string | undefined;\n    fileType?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    fileType,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    const isPdf = fileType === FileUploadHelper.PDF_MIME_TYPE;\n    const displaySrc = isPdf\n        ? thumbnailImageDataUrl || FileUploadHelper.PDF_ICON_URL\n        : thumbnailImageDataUrl || \"\";\n\n    return (\n        <div className={styles.container} data-testid={testId}>\n            <ImageWithFallback\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={displaySrc}\n                className={clsx(styles.thumbnail, isPdf && styles.thumbnailPdf)}\n            />\n            {renderReplaceButton && (\n                <button\n                    type=\"button\"\n                    onClick={handleReplace}\n                    className={styles.replaceButton}\n                >\n                    Replace\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":["thumbnailImageDataUrl","fileType","testId","renderReplaceButton","onReplaceClick","isPdf","FileUploadHelper","PDF_MIME_TYPE","displaySrc","PDF_ICON_URL","_jsxs","className","styles.container","children","_jsx","ImageWithFallback","undefined","src","clsx","styles.thumbnail","styles.thumbnailPdf","type","onClick","styles.replaceButton"],"mappings":"oUAcqC,EACjCA,wBACAC,WACA,cAAeC,EACfC,sBACAC,qBAEA,MAMMC,EAAQJ,IAAaK,EAAAA,iBAAiBC,cACtCC,EAAaH,EACbL,GAAyBM,EAAAA,iBAAiBG,aAC1CT,GAAyB,GAE/B,OACIU,EAAAA,KAAA,MAAA,CAAKC,UAAWC,EAAAA,UAAgB,cAAeV,EAAMW,SAAA,CACjDC,EAAAA,IAACC,EAAAA,iCACgBb,EAAS,GAAGA,eAAiBc,EAC1CC,IAAKT,EACLG,UAAWO,UAAKC,EAAAA,UAAkBd,GAASe,EAAAA,gBAE9CjB,GACGW,MAAA,SAAA,CACIO,KAAK,SACLC,QArBM,KACdlB,GACAA,GACJ,EAmBYO,UAAWY,EAAAA,cAAoBV,SAAA,cAKrC"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./file-list-item-thumbnail.styles_1y4si19.css");exports.container="c1hu6y7h",exports.replaceButton="r5e5ep6",exports.thumbnail="t18h6q7y",exports.thumbnailPdf="t1w2z01d";
+//# sourceMappingURL=file-list-item-thumbnail.styles.js.map

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

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

package/cjs/file-upload/file-list-item/file-list-item-thumbnail.styles_1y4si19.css

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

package/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"),i=require("../../external/@dnd-kit/utilities/dist/utilities.esm.js"),r=require("@lifesg/react-icons/bin"),n=require("@lifesg/react-icons/pencil"),s=require("react"),l=require("../../shared/progress-bar/progress-bar.js");require("../../util/calendar-helper.js"),require("../../util/date-helper.js"),require("../../util/date-input-helper.js"),require("../../util/simple-id-generator.js");var a=require("../../util/string-helper.js");require("@react-aria/live-announcer");var d=require("../context.js"),o=require("../helper.js"),c=require("./file-list-item-thumbnail.js"),u=require("./file-list-item.styles.js");const h=s.memo((({fileItem:h,editable:p,sortable:x,wrapperWidth:j,disabled:b,readOnly:m,descriptionLabel:g,onDelete:$,onEditClick:y})=>{const{id:I,name:T,size:f,description:D,progress:F=1,errorMessage:q,thumbnailImageDataUrl:S,truncateText:C=!0}=h,[v,z]=s.useState(),{activeId:B}=s.useContext(d.FileUploadContext),{attributes:E,listeners:k,setNodeRef:w,transform:P,transition:M}=t.useSortable({id:I}),L=s.useRef(null),U={transform:i.CSS.Translate.toString(P),transition:M},H=Object.assign(Object.assign({style:U},E),k),O=F<1,K=o.FileUploadHelper.formatFileSizeDisplay(f),N=!!D&&!!p,_=B?B===I?"self":"others":"none",R=s.useCallback((e=>{if(!C)return e;const t=L&&L.current?L.current.getBoundingClientRect().width:0;return a.StringHelper.truncateOneLine(e,t,t/2,t/2/8,16)}),[C]);s.useEffect((()=>{z(R(T))}),[j,R,T]);const A=()=>{$()},Y=()=>{y&&y()},W=e=>{x&&e.stopPropagation()},G=()=>b||!!B,J=()=>!!x&&!m,Q=()=>{var t;return e.jsxs(e.Fragment,{children:[e.jsx(u.ItemText,{weight:D?"semibold":"regular",children:v}),D&&e.jsxs(e.Fragment,{children:[e.jsx(u.ItemDescriptionLabel,{children:null!==(t=null==g?void 0:g.children)&&void 0!==t?t:"Photo description"}),e.jsx(u.ItemDescriptionText,{children:D})]})]})};return e.jsxs(u.Item,Object.assign({id:I,ref:w,$sortable:J(),$disabled:G(),$focusType:_},J()?H:{},{children:[J()&&e.jsx(u.DragHandleIcon,{"data-testid":`${I}-drag-handle`,$disabled:G(),$active:"self"===_}),e.jsxs(u.Box,{$focused:"self"===_,$error:!!q,$loading:O,$disabled:G(),$editable:p,$hasDescription:!!D,children:[(()=>{const t=!!S||h.type===o.FileUploadHelper.PDF_MIME_TYPE,i=q?e.jsxs(e.Fragment,{children:[e.jsxs(u.NameSection,{ref:L,children:[Q(),q&&e.jsxs(u.DesktopErrorMessage,{weight:"semibold",children:[e.jsx(u.ErrorIcon,{"aria-hidden":!0}),q]})]}),e.jsx(u.FileSizeSection,{children:e.jsx(u.FileSizeText,{children:K})}),q&&e.jsxs(u.MobileErrorMessage,{weight:"semibold",children:[e.jsx(u.ErrorIcon,{"aria-hidden":!0}),q]})]}):(t=>{const i=t||h.type===o.FileUploadHelper.PDF_MIME_TYPE?e.jsx(c.FileListItemThumbnail,{thumbnailImageDataUrl:t||"",fileType:h.type,"data-testid":`${I}-thumbnail`}):null;return N?e.jsxs(e.Fragment,{children:[i,e.jsxs(u.ExtendedNameSection,{ref:L,children:[e.jsx(u.ItemText,{weight:"semibold",children:v}),e.jsx(u.ItemDescriptionLabel,{children:null!==(s=null==g?void 0:g.children)&&void 0!==s?s:"Photo description"}),e.jsx(u.ItemDescriptionText,{children:D}),e.jsx(u.DescriptionFileSizeText,{children:K}),!m&&N&&e.jsxs(u.ActionContainer,{$editable:p,$error:!1,$loading:!1,$hasDescription:!0,children:[e.jsx(u.IconButton,{"data-testid":`${I}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${T}`,disabled:G(),onClick:Y,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 ${T}`,disabled:G(),onClick:A,onKeyDown:W,children:e.jsx(r.BinIcon,{"aria-hidden":!0})},"delete")]})]})]}):e.jsxs(e.Fragment,{children:[i,e.jsxs(u.NameSection,{ref:L,children:[Q(),!O&&e.jsx(u.DescriptionFileSizeText,{children:K})]})]});var s})(S);return e.jsx(u.ContentSection,{$hasThumbnail:t,children:i})})(),!m&&!N&&(()=>{let t;return t=q?e.jsx(u.IconButton,{"data-testid":`${I}-error-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${T}, error: ${q}`,onClick:A,children:e.jsx(r.BinIcon,{"aria-hidden":!0})}):O?e.jsx(l.ProgressBar,{progress:F,"data-testid":`${I}-progress-bar`}):e.jsxs(e.Fragment,{children:[p&&e.jsx(u.IconButton,{"data-testid":`${I}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${T}`,disabled:G(),onClick:Y,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 ${T}`,disabled:G(),onClick:A,onKeyDown:W,children:e.jsx(r.BinIcon,{"aria-hidden":!0})},"delete")]}),e.jsx(u.ActionContainer,{$editable:p,$error:!!q,$loading:O,$hasDescription:!!D,children:t})})()]})]}))}));exports.FileListItem=h;
+"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 { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport {\n    memo,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DescriptionFileSizeText,\n    DesktopErrorMessage,\n    DragHandleIcon,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    FileSizeText,\n    IconButton,\n    Item,\n    ItemDescriptionLabel,\n    ItemDescriptionText,\n    ItemFocusType,\n    ItemText,\n    MobileErrorMessage,\n    NameSection,\n} from \"./file-list-item.styles\";\nimport { FormLabelProps } from \"../../form/types\";\nimport { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n    readOnly?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n}\n\nconst Component = ({\n    fileItem,\n    editable,\n    sortable,\n    wrapperWidth,\n    disabled,\n    readOnly,\n    descriptionLabel,\n    onDelete,\n    onEditClick,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        description,\n        progress = 1,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n    } = fileItem;\n    const [formattedName, setFormattedName] = useState<string>();\n    const { activeId } = useContext(FileUploadContext);\n\n    // Sortable mechanism\n    const { attributes, listeners, setNodeRef, transform, transition } =\n        useSortable({ id });\n    const detailSectionRef = useRef<HTMLDivElement>(null);\n    const style = {\n        transform: CSS.Translate.toString(transform),\n        transition,\n    };\n\n    const sortableProps = {\n        style,\n        ...attributes,\n        ...listeners,\n    };\n\n    // Local variables\n    const isLoading = progress < 1;\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const hasInlineActions = !!description && !!editable;\n    const focusType: ItemFocusType = activeId\n        ? activeId === id\n            ? \"self\"\n            : \"others\"\n        : \"none\";\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                detailSectionRef && detailSectionRef.current\n                    ? detailSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDelete = () => {\n        onDelete();\n    };\n\n    const handleEdit = () => {\n        if (onEditClick) {\n            onEditClick();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        /**\n         * Circumvent issue of keydown action activating the sort mechanism\n         * rather than the actual action\n         */\n        if (sortable) {\n            event.stopPropagation();\n        }\n    };\n\n    const shouldDisable = () => disabled || !!activeId;\n\n    const shouldEnableSort = () => !!sortable && !readOnly;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemText weight={description ? \"semibold\" : \"regular\"}>\n                {formattedName}\n            </ItemText>\n            {description && (\n                <>\n                    <ItemDescriptionLabel>\n                        {descriptionLabel?.children ?? \"Photo description\"}\n                    </ItemDescriptionLabel>\n                    <ItemDescriptionText>{description}</ItemDescriptionText>\n                </>\n            )}\n        </>\n    );\n\n    const renderErrorState = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n                {errorMessage && (\n                    <DesktopErrorMessage weight=\"semibold\">\n                        <ErrorIcon aria-hidden />\n                        {errorMessage}\n                    </DesktopErrorMessage>\n                )}\n            </NameSection>\n            <FileSizeSection>\n                <FileSizeText>{fileSize}</FileSizeText>\n            </FileSizeSection>\n            {errorMessage && (\n                <MobileErrorMessage weight=\"semibold\">\n                    <ErrorIcon aria-hidden />\n                    {errorMessage}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderInlineActions = () => (\n        <ActionContainer\n            $editable={editable}\n            $error={false}\n            $loading={false}\n            $hasDescription={true}\n        >\n            <IconButton\n                key=\"edit\"\n                data-testid={`${id}-edit-button`}\n                data-no-dnd=\"true\"\n                type=\"button\"\n                styleType=\"light\"\n                sizeType=\"small\"\n                aria-label={`edit ${name}`}\n                disabled={shouldDisable()}\n                onClick={handleEdit}\n                onKeyDown={handleKeyDown}\n            >\n                <PencilIcon aria-hidden />\n            </IconButton>\n            <IconButton\n                key=\"delete\"\n                data-testid={`${id}-delete-button`}\n                data-no-dnd=\"true\"\n                type=\"button\"\n                styleType=\"light\"\n                sizeType=\"small\"\n                aria-label={`delete ${name}`}\n                disabled={shouldDisable()}\n                onClick={handleDelete}\n                onKeyDown={handleKeyDown}\n            >\n                <BinIcon aria-hidden />\n            </IconButton>\n        </ActionContainer>\n    );\n\n    const renderDescriptionContent = () => (\n        <ExtendedNameSection ref={detailSectionRef}>\n            <ItemText weight=\"semibold\">{formattedName}</ItemText>\n            <ItemDescriptionLabel>\n                {descriptionLabel?.children ?? \"Photo description\"}\n            </ItemDescriptionLabel>\n            <ItemDescriptionText>{description}</ItemDescriptionText>\n            <DescriptionFileSizeText>{fileSize}</DescriptionFileSizeText>\n            {!readOnly && hasInlineActions && renderInlineActions()}\n        </ExtendedNameSection>\n    );\n\n    const renderFileContent = (thumbnailImageDataUrl?: string) => {\n        const shouldShowThumbnail =\n            !!thumbnailImageDataUrl ||\n            fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n        const thumbnail = shouldShowThumbnail ? (\n            <FileListItemThumbnail\n                thumbnailImageDataUrl={thumbnailImageDataUrl || \"\"}\n                fileType={fileItem.type}\n                data-testid={`${id}-thumbnail`}\n            />\n        ) : null;\n\n        if (hasInlineActions) {\n            return (\n                <>\n                    {thumbnail}\n                    {renderDescriptionContent()}\n                </>\n            );\n        }\n\n        return (\n            <>\n                {thumbnail}\n                <NameSection ref={detailSectionRef}>\n                    {renderNameDescription()}\n                    {!isLoading && (\n                        <DescriptionFileSizeText>\n                            {fileSize}\n                        </DescriptionFileSizeText>\n                    )}\n                </NameSection>\n            </>\n        );\n    };\n\n    const renderContents = () => {\n        const shouldShowThumbnail =\n            !!thumbnailImageDataUrl ||\n            fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n        const content = errorMessage\n            ? renderErrorState()\n            : renderFileContent(thumbnailImageDataUrl);\n\n        return (\n            <ContentSection $hasThumbnail={shouldShowThumbnail}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = (\n                <IconButton\n                    data-testid={`${id}-error-delete-button`}\n                    data-no-dnd=\"true\"\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`delete ${name}, error: ${errorMessage}`}\n                    onClick={handleDelete}\n                >\n                    <BinIcon aria-hidden />\n                </IconButton>\n            );\n        } else if (isLoading) {\n            content = (\n                <ProgressBar\n                    progress={progress}\n                    data-testid={`${id}-progress-bar`}\n                />\n            );\n        } else {\n            content = (\n                <>\n                    {editable && (\n                        <IconButton\n                            key=\"edit\"\n                            data-testid={`${id}-edit-button`}\n                            data-no-dnd=\"true\"\n                            type=\"button\"\n                            styleType=\"light\"\n                            sizeType=\"small\"\n                            aria-label={`edit ${name}`}\n                            disabled={shouldDisable()}\n                            onClick={handleEdit}\n                            onKeyDown={handleKeyDown}\n                        >\n                            <PencilIcon aria-hidden />\n                        </IconButton>\n                    )}\n                    <IconButton\n                        key=\"delete\"\n                        data-testid={`${id}-delete-button`}\n                        data-no-dnd=\"true\"\n                        type=\"button\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        aria-label={`delete ${name}`}\n                        disabled={shouldDisable()}\n                        onClick={handleDelete}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <BinIcon aria-hidden />\n                    </IconButton>\n                </>\n            );\n        }\n\n        return (\n            <ActionContainer\n                $editable={editable}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $hasDescription={!!description}\n            >\n                {content}\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item\n            id={id}\n            ref={setNodeRef}\n            $sortable={shouldEnableSort()}\n            $disabled={shouldDisable()}\n            $focusType={focusType}\n            {...(shouldEnableSort() ? sortableProps : {})}\n        >\n            {shouldEnableSort() && (\n                <DragHandleIcon\n                    data-testid={`${id}-drag-handle`}\n                    $disabled={shouldDisable()}\n                    $active={focusType === \"self\"}\n                />\n            )}\n            <Box\n                $focused={focusType === \"self\"}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $disabled={shouldDisable()}\n                $editable={editable}\n                $hasDescription={!!description}\n            >\n                {renderContents()}\n                {!readOnly && !hasInlineActions && renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","descriptionLabel","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","hasInlineActions","focusType","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_jsx","ItemText","weight","children","_Fragment","ItemDescriptionLabel","_a","ItemDescriptionText","Item","ref","$sortable","$disabled","$focusType","DragHandleIcon","Box","$error","$loading","$editable","shouldShowThumbnail","type","PDF_MIME_TYPE","content","NameSection","DesktopErrorMessage","ErrorIcon","FileSizeSection","FileSizeText","MobileErrorMessage","thumbnail","FileListItemThumbnail","fileType","ExtendedNameSection","DescriptionFileSizeText","ActionContainer","$hasDescription","IconButton","styleType","sizeType","onClick","onKeyDown","PencilIcon","BinIcon","renderFileContent","ContentSection","$hasThumbnail","renderContents","ProgressBar","renderActions"],"mappings":"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"}
+{"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,195 +1,2 @@
-"use strict";var e=require("styled-components"),i=require("@lifesg/react-icons/drag-handle"),o=require("@lifesg/react-icons/exclamation-circle-fill"),t=require("../../icon-button/icon-button.js"),r=require("../../theme/index.js"),n=require("../../typography/typography.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(e);const l=s.default.li`
-    display: flex;
-    align-items: center;
-    width: 100%;
-    border: none;
-
-    &:not(:last-child) {
-        margin-bottom: ${r.Spacing["spacing-16"]};
-    }
-
-    ${i=>i.$disabled&&"none"===i.$focusType?e.css`
-                cursor: not-allowed;
-            `:i.$sortable&&"self"===i.$focusType?e.css`
-                cursor: grabbing;
-                // Following recommendation by the library for touch events
-                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations
-                touch-action: manipulation;
-            `:i.$sortable?e.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}
-`,d=s.default(i.DragHandleIcon)`
-    margin-right: ${r.Spacing["spacing-16"]};
-    height: 1.5rem;
-    width: 1.5rem;
-    color: ${r.Colour.icon};
-
-    ${i=>i.$active?e.css`
-                color: ${r.Colour["icon-primary"]};
-            `:i.$disabled?e.css`
-                color: ${r.Colour["icon-disabled"]};
-            `:void 0};
-`,c=s.default.div`
-    background: ${r.Colour["bg-primary-subtlest"]};
-    border: ${r.Border["width-010"]} ${r.Border.solid} ${r.Colour.border};
-    border-radius: ${r.Radius.sm};
-    padding: ${r.Spacing["spacing-16"]} ${r.Spacing["spacing-32"]};
-    display: flex;
-    align-items: center;
-    width: 100%;
-
-    ${r.MediaQuery.MaxWidth.md} {
-        padding: ${r.Spacing["spacing-16"]};
-    }
-
-    ${i=>i.$focused?e.css`
-                border-color: ${r.Colour["border-focus"]};
-                box-shadow: ${r.Shadow["xs-focus-strong"]};
-            `:i.$disabled?e.css`
-                border-color: ${r.Colour["border-disabled"]};
-            `:i.$error?e.css`
-                background: ${r.Colour["bg-error"]};
-                border-color: ${r.Colour["border-error"]};
-            `:void 0}
-
-    ${i=>{if(!i.$error&&(i.$loading||i.$editable))return e.css`
-                ${r.MediaQuery.MaxWidth.md} {
-                    flex-direction: column;
-                    align-items: flex-start;
-                }
-            `}}
-`,p=s.default.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${r.MediaQuery.MaxWidth.md} {
-        flex-direction: column;
-        width: 100%;
-        align-items: flex-start;
-    }
-
-    ${i=>{if(i.$hasThumbnail)return e.css`
-                ${r.MediaQuery.MaxWidth.md} {
-                    flex-direction: row;
-                    align-items: center;
-                }
-            `}}
-`,g=s.default.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    width: 100%;
-`,u=s.default.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: flex-start;
-
-    ${r.MediaQuery.MaxWidth.md} {
-        width: 100%;
-    }
-`,$=s.default.div`
-    display: flex;
-    width: 5rem;
-    margin-left: ${r.Spacing["spacing-8"]};
-    justify-content: flex-end;
-
-    ${u} > & {
-        width: auto;
-        margin-left: 0;
-        margin-top: ${r.Spacing["spacing-16"]};
-        justify-content: flex-start;
-    }
-
-    ${r.MediaQuery.MaxWidth.md} {
-        ${i=>i.$hideInMobile?e.css`
-                    display: none;
-                    visibility: hidden;
-                `:e.css`
-                    width: 100%;
-                    margin-left: 0;
-                    margin-top: ${r.Spacing["spacing-8"]};
-                    justify-content: flex-start;
-                `}
-    }
-`,f=s.default(n.Typography.BodyMD)`
-    color: ${r.Colour["text-subtler"]};
-`,m=s.default(n.Typography.BodyMD)`
-    color: ${r.Colour["text-subtler"]};
-    margin-top: ${r.Spacing["spacing-16"]};
-`,x=s.default(n.Typography.BodyMD)``,h=s.default.span`
-    ${r.Font["form-label"]}
-    font-weight: ${r.Font.Spec["weight-semibold"]};
-    color: ${r.Colour["text-subtle"]};
-    display: block;
-    margin-top: ${r.Spacing["spacing-16"]};
-`,y=s.default(x)`
-    margin-top: ${r.Spacing["spacing-4"]};
-    overflow-wrap: anywhere;
-`,b=s.default(o.ExclamationCircleFillIcon)`
-    height: 1lh;
-    width: 1em;
-    flex-shrink: 0;
-    color: ${r.Colour["icon-error-strong"]};
-`,S=s.default(n.Typography.BodySM)`
-    color: ${r.Colour["text-error"]};
-`,w=s.default(S)`
-    margin-top: ${r.Spacing["spacing-4"]};
-    display: flex;
-    gap: ${r.Spacing["spacing-4"]};
-
-    ${r.MediaQuery.MaxWidth.md} {
-        display: none;
-        visibility: hidden;
-    }
-`,M=s.default(S)`
-    display: none;
-    visibility: hidden;
-
-    ${r.MediaQuery.MaxWidth.md} {
-        display: flex;
-        gap: ${r.Spacing["spacing-4"]};
-        visibility: visible;
-        margin-top: ${r.Spacing["spacing-8"]};
-    }
-`,v=s.default.div`
-    width: 6rem;
-    margin-left: ${r.Spacing["spacing-32"]};
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    ${i=>{if(i.$hasDescription&&i.$editable&&!i.$error&&!i.$loading)return e.css`
-                width: 100%;
-                margin-left: 0;
-                margin-top: ${r.Spacing["spacing-16"]};
-                justify-content: flex-end;
-            `}}
-
-    ${r.MediaQuery.MaxWidth.md} {
-        width: fit-content;
-
-        ${i=>i.$loading&&!i.$error?e.css`
-                    margin-left: 0;
-                    margin-top: ${r.Spacing["spacing-16"]};
-                    width: 100%;
-                `:i.$editable&&!i.$error?e.css`
-                    margin-left: 0;
-                    margin-top: ${r.Spacing["spacing-16"]};
-                    align-self: flex-end;
-                `:void 0}
-    }
-`,C=s.default(t.IconButton)`
-    min-width: unset;
-
-    &:not(:last-child) {
-        margin-right: ${r.Spacing["spacing-8"]};
-    }
-`;exports.ActionContainer=v,exports.BaseErrorMessage=S,exports.Box=c,exports.ContentSection=p,exports.DescriptionFileSizeText=m,exports.DesktopErrorMessage=w,exports.DragHandleIcon=d,exports.ErrorIcon=b,exports.ExtendedNameSection=u,exports.FileSizeSection=$,exports.FileSizeText=f,exports.IconButton=C,exports.Item=l,exports.ItemDescriptionLabel=h,exports.ItemDescriptionText=y,exports.ItemText=x,exports.MobileErrorMessage=M,exports.NameSection=g;
+"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 styled, { css } from \"styled-components\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\nimport { Typography } from \"../../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n    $sortable: boolean;\n    $disabled?: boolean | undefined;\n    $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n    $disabled?: boolean | undefined;\n    $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n    $disabled?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $editable?: boolean | undefined;\n    $hasDescription?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n    $editable?: boolean | undefined;\n    $error?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $hasDescription?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n    $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$disabled && props.$focusType === \"none\") {\n            // Show disabled cursor only if no dragging is happening\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$sortable && props.$focusType === \"self\") {\n            return css`\n                cursor: grabbing;\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        } else if (props.$sortable) {\n            return css`\n                &:hover {\n                    cursor: grab;\n                }\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        }\n    }}\n`;\n\nexport const DragHandleIcon = styled(\n    DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${Colour[\"border-focus\"]};\n                box-shadow: ${Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${Colour[\"bg-error\"]};\n                border-color: ${Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${MediaQuery.MaxWidth.md} {\n                    flex-direction: column;\n                    align-items: flex-start;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${MediaQuery.MaxWidth.md} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    align-items: flex-start;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${ExtendedNameSection} > & {\n        width: auto;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-16\"]};\n        justify-content: flex-start;\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        ${(props) => {\n            if (props.$hideInMobile) {\n                return css`\n                    display: none;\n                    visibility: hidden;\n                `;\n            } else {\n                return css`\n                    width: 100%;\n                    margin-left: 0;\n                    margin-top: ${Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionFileSizeText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionLabel = styled.span`\n    ${Font[\"form-label\"]}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    color: ${Colour[\"text-subtle\"]};\n    display: block;\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemDescriptionText = styled(ItemText)`\n    margin-top: ${Spacing[\"spacing-4\"]};\n    overflow-wrap: anywhere;\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${(props) => {\n        if (\n            props.$hasDescription &&\n            props.$editable &&\n            !props.$error &&\n            !props.$loading\n        ) {\n            return css`\n                width: 100%;\n                margin-left: 0;\n                margin-top: ${Spacing[\"spacing-16\"]};\n                justify-content: flex-end;\n            `;\n        }\n    }}\n\n    ${MediaQuery.MaxWidth.md} {\n        width: fit-content;\n\n        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${Spacing[\"spacing-16\"]};\n                    align-self: flex-end;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-8\"]};\n    }\n`;\n"],"names":["Item","styled","li","Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","Colour","$active","Box","div","Border","Radius","MediaQuery","MaxWidth","md","$focused","Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","DescriptionFileSizeText","ItemText","ItemDescriptionLabel","span","Font","Spec","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","$hasDescription","IconButton","DSIconButton"],"mappings":"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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);}}