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

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

@@ -1 +1 @@
-{"version":3,"file":"file-list.js","sources":["../../src/file-upload/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 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 { VisuallyHidden } from \"../shared/accessibility\";\nimport { FileUploadContext } from \"./context\";\nimport { MouseSensor } from \"./custom-sensors\";\nimport { FileItemEdit } from \"./file-item-edit\";\nimport { EditableItemsContainer, ListWrapper } from \"./file-list.styles\";\nimport { FileListItem } from \"./file-list-item\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\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    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        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    }, [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                    onSave={handleSaveEdit(item)}\n                    onCancel={handleCancel(item)}\n                    onBlur={handleBlurEdit(item)}\n                />\n            );\n        });\n\n        return (\n            <EditableItemsContainer key={`editable-${keyToUse}`}>\n                <ul>{itemsToRender}</ul>\n            </EditableItemsContainer>\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                        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                <ListWrapper\n                    tabIndex={-1}\n                    $readOnly={readOnly}\n                    ref={wrapperRef}\n                    aria-label={getWrapperAriaLabel()}\n                >\n                    {renderItems()}\n                </ListWrapper>\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","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","EditableItemsContainer","children","renderItemsInEditMode","FileListItem","editable","onDelete","onEditClick","renderItemsWithWrapper","_jsxs","_Fragment","VisuallyHidden","ListWrapper","tabIndex","$readOnly","DndContext","onDragEnd","onDragStart","SortableContext","items","strategy","verticalListSortingStrategy"],"mappings":"+9BA8hBaA,EAAWC,GArdxB,UACIC,UACIA,EAAY,GAAEC,kBACdA,EAAiBC,yBACjBA,EAAwBC,SACxBA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,aACRA,EAAYC,aACZA,EAAYC,OACZA,GAEJC,GAKA,MAAOC,EAAaC,GAAkBC,EAA8B,CAAA,IAC9DC,YAAEA,GAAgBC,EAAWC,IAG5BC,EAAsBC,GAA2BL,EAAS,IAC3DM,EAAmBC,EAA6B,IAEtDC,EAAoBX,GAAK,KAAA,CACrBY,MAAO,WACe,QAAlBC,EAAAC,EAAWC,eAAO,IAAAF,GAAAA,EAAED,OAAO,MAGnC,MAAQI,MAAOC,EAAe,EAAGjB,IAAKc,GAAeI,IAG/CC,EAAuBT,EAA+B,IAOtDU,EAAUC,EACZC,EAAUC,EAAa,CACnBC,qBAAsB,CAClBC,SAAU,KAGlBH,EAAUI,EAAa,CACnBF,qBAAsB,CAClBG,MAAO,IACPC,UAAW,KAGnBN,EAAUO,EAAgB,CACtBC,iBAAkBC,KAOpBC,EAAqBC,WAChBd,EAAqBJ,QAAQkB,EAAO,EAuB/CC,GAAU,KACN,MAAMC,EAAYC,GAAmB7C,GArBP,EAC9B8C,EACAC,KAEA,MAAMC,EAAWC,OAAOC,KAAKJ,GACvBK,EAAWF,OAAOC,KAAKH,GAC7B,GAAIC,EAASI,SAAWD,EAASC,OAC7B,OAAO,EAEX,IAAK,MAAMC,KAAKF,EACZ,GAAIL,EAAKO,KAAON,EAAKM,GACjB,OAAO,EAGf,OAAO,CAAI,EAUPC,CAFc5C,EAEuBkC,IAGzCjC,EAAeiC,EAAU,GAC1B,CAAC5C,EAAWC,EAAmBI,IAGlCsC,GAAU,WACN,IAAK3C,GAAkC,IAArBA,EAAUoD,OAExB,YADAnC,EAAwB,IAG5B,MAAMsC,EAAMC,KAAKD,MACXE,EAAqB,GAE3B,IAAK,MAAMC,KAAQ1D,EAAW,CAC1B,MAAM2D,EAAazC,EAAiBM,QAAQkC,EAAKE,IAEjD,GAAIF,EAAKG,aACsB,WAAvBF,aAAU,EAAVA,EAAYG,UACZL,EAASM,KACwB,iBAAtBL,EAAKG,aACN,mBAAmBH,EAAKM,SAASN,EAAKG,eACtC,mBAAmBH,EAAKM,QAElC9C,EAAiBM,QAAQkC,EAAKE,IAAM,CAChCK,iBAAU3C,EAAAoC,EAAKO,wBAAY,EAC3BC,UAAWX,EACXO,OAAQ,eAMpB,QAAsBK,IAAlBT,EAAKO,SAIT,GAAIP,EAAKO,UAAY,EACU,cAAvBN,aAAU,EAAVA,EAAYG,UACZL,EAASM,KAAK,GAAGL,EAAKM,2BACtB9C,EAAiBM,QAAQkC,EAAKE,IAAM,CAChCK,SAAU,EACVC,UAAWX,EACXO,OAAQ,kBAOpB,GAA6B,iBAAlBJ,EAAKO,UAAyBP,EAAKO,SAAW,EAAG,GAGnDN,GAAoC,gBAAtBA,EAAWG,UAG1BL,EAASM,KAAK,sBAAsBL,EAAKM,QACzC9C,EAAiBM,QAAQkC,EAAKE,IAAM,CAChCK,SAAUP,EAAKO,SACfC,UAAWX,EACXO,OAAQ,eAGpB,CACJ,CAEIL,EAASL,OAAS,GAElBnC,EAAwBwC,EAASW,KAAK,MAC1C,GACD,CAACpE,IAKJ,MAAMqE,EAAkBX,GAAyBY,IAC7CC,GAAkBb,EAAKE,GAAI,WAC3BnB,EAAkBiB,EAAKE,IAEvB,MAAMY,EAAWvB,OAAAwB,OAAAxB,OAAAwB,OAAA,CAAA,EAAQf,GAAI,CAAEY,gBAC/BhE,EAAakE,EAAY,EAGvBE,EAAkBhB,GAAyBiB,IAC7C/C,EAAqBJ,QAAQkC,EAAKE,IAAMe,CAAK,EAG3CC,EAAgBlB,GAAwB,KACrCA,EAAKY,aAA2C,IAA5BZ,EAAKY,YAAYlB,OAItCmB,GAAkBb,EAAKE,GAAI,WAF3BrD,EAAamD,GAIjBjB,EAAkBiB,EAAKE,GAAG,EAGxBiB,EAAsBnB,GAAwB,KAChDa,GAAkBb,EAAKE,GAAI,OAAO,EAGhCkB,EAAgBpB,GAAwB,KAC1CnD,EAAamD,GACTnC,EAAWC,SACXD,EAAWC,QAAQH,OACvB,EAGE0D,EAAiBC,IACnB,GAAIxE,GAAUR,EAAW,CACrB,MAAMiF,OAAEA,EAAMC,KAAEA,GAASF,EAEzB,GAAIE,GAAQD,EAAOrB,KAAOsB,EAAKtB,GAAI,CAC/B,MAAMuB,EAAWnF,EAAUoF,WACtB1B,GAASA,EAAKE,KAAOqB,EAAOrB,KAE3ByB,EAAWrF,EAAUoF,WACtB1B,GAASA,EAAKE,KAAOsB,EAAKtB,KAGzB0B,EAAmBC,EACrBvF,EACAmF,EACAE,GAGJ7E,EAAO8E,EACX,CACJ,CAEAzE,OAAYsD,EAAU,EAGpBqB,EAAmBR,IACrB,MAAMC,OAAEA,GAAWD,EACnBnE,EAAYoE,EAAOrB,GAAa,EAM9B6B,GAAiB/B,GAEfzD,GACAyF,EAAiBC,qBAAqBjC,EAAKkC,MAI7CC,GAAwBnC,IAErBA,EAAKG,eACLxD,KAC0B,iBAAlBqD,EAAKO,UAAyBP,EAAKO,SAAW,IACvDwB,GAAc/B,KACbA,EAAKY,YAIRzB,GACF7C,IAEA,IAAKA,GAAkC,IAArBA,EAAUoD,OAAc,MAAO,CAAA,EAEjD,MAAM0C,EAAsC,CAAA,EAE5C,IAAK,MAAMpC,KAAQ1D,EACX0D,EAAKG,aACLiC,EAAepC,EAAKE,IAAM,QAClBlD,EAAYgD,EAAKE,IAKzBkC,EAAepC,EAAKE,IAAMlD,EAAYgD,EAAKE,IAJ3CkC,EAAepC,EAAKE,IAAMiC,GAAqBnC,GACzC,OACA,UAMd,OAAOoC,CAAc,EAGnBvB,GAAoB,CAAC7B,EAAgBqD,KACvCpF,GAAgBqF,GACZ/C,OAAAwB,OAAAxB,OAAAwB,OAAA,CAAA,EACOuB,GAAe,CAClBtD,CAACA,GAASqD,KAEhB,EAmCAE,GAAmB,IAEjBjG,GACAA,EAAUoD,OAAS,GACnBjD,GAPG8C,OAAOiD,OAAOxF,GAAayF,OAAOJ,GAAkB,YAATA,IAoBhDK,GAAsB,KACxB,GAAyB,IAArBpG,EAAUoD,OACV,MAAO,oBAEX,MAAMiD,EAAiBrG,EAAUsG,QAC5B5C,KACIA,eAAAA,EAAMG,gBACY,IAAlBH,EAAKO,eAAoCE,IAAlBT,EAAKO,YACnCb,OACImD,EAAkBvG,EAAUsG,QAC7B5C,GAAkC,iBAAlBA,EAAKO,UAAyBP,EAAKO,SAAW,IACjEb,OACIoD,EAAaxG,EAAUsG,QAAQ5C,GAASA,EAAKG,eAAcT,OACjE,GAAuB,IAAnBiD,GAA4C,IAApBE,GAAwC,IAAfC,EACjD,MAAO,YAEX,MAUMC,EAAQ,CATVJ,EAAiB,EAAI,GAAGA,oBAAmC,GAE3DE,EAAkB,EAAI,GAAGA,qBAAqC,GAE9DC,EAAa,EACP,GAAGA,KACCA,EAAa,EAAI,QAAU,oBAE/B,IAC+CF,OACrDI,SAGJ,MAAO,GADQrG,EAAW,sBAAwB,gBAC7BoG,EAAMrC,KAAK,OAAO,EAqCrCuC,GAAc,KAChB,MAAMC,EAjHe,EACrB5G,EACAU,KAEA,IAAKV,GAAkC,IAArBA,EAAUoD,OAAc,MAAO,GAEjD,MAAMwD,EAA8B,GAEpC,IAAK,MAAMC,KAAY7G,EACnB,GAAiC,SAA7BU,EAAYmG,EAASjD,IAAgB,CACrC,MAAMkD,EAAkBF,EAAcA,EAAcxD,OAAS,GACzD2D,MAAMC,QAAQF,GACdA,EAAgB/C,KAAK8C,GAErBD,EAAc7C,KAAK,CAAC8C,GAE5B,MACID,EAAc7C,KAAK8C,GAI3B,OAAOD,CAAa,EA4FEK,CAAiBjH,EAAWU,GAElD,OAA6B,IAAzBkG,EAAcxD,OAAqB,KAEhCwD,EAAcM,KAAI,CAACxD,EAAMyD,IACxBJ,MAAMC,QAAQtD,GArCI,EAC1B1D,EACAoH,KAEA,MAAMC,EAAgBrH,EAAUkH,KAAKxD,IACjC,MAAM4D,EAAerE,OAAAwB,OAAA,CAAA,EAAQf,GAM7B,YAL8CS,IAA1CvC,EAAqBJ,QAAQkC,EAAKE,MAClC0D,EAAgBhD,YACZ1C,EAAqBJ,QAAQkC,EAAKE,KAItC2D,EAACC,GAEGX,SAAUS,EACV5F,aAAcA,EACdxB,yBAA0BA,EAC1BuH,OAAQpD,EAAeX,GACvBgE,SAAU9C,EAAalB,GACvBiE,OAAQjD,EAAehB,IANlBA,EAAKE,GAOZ,IAIV,OACI2D,EAACK,EAAsB,CAAAC,SACnBN,EAAA,KAAA,CAAAM,SAAKR,KADoB,YAAYD,IAEhB,EAWdU,CAAsBpE,EAAMyD,GAG/BI,EAACQ,EAAY,CAETlB,SAAUnD,EACVsE,SAAUvC,GAAc/B,GACxBhC,aAAcA,EACdvB,SAAU8F,KACV7F,SAAUA,EACVC,SAAUA,EACV4H,SAAUnD,EAAapB,GACvBwE,YAAarD,EAAmBnB,IAR3BA,EAAKE,KAYxB,EAiBAuE,GAAyB,IAEvBC,EAAAC,EAAA,CAAAR,SAAA,CAPJN,EAACe,EAAc,CAAA,YAAW,uBAAqB,OAAMT,SAChD7G,IAQGuG,EAACgB,EAAW,CACRC,UAAU,EAAEC,UACDpI,EACXI,IAAKc,EAAU,aACH6E,KAAqByB,SAEhClB,UAMjB,OAAIvG,GAAYC,IAAa4F,KAClBkC,KAGHZ,EAACmB,EAAU,CACP7G,QAASA,EACT8G,UAAW5D,EACX6D,YAAapD,EAAeqC,SAE5BN,EAACsB,EAAe,CACZC,MAAO9I,EACP+I,SAAUC,EAA2BnB,SAEpCM,QAKrB"}
+{"version":3,"file":"file-list.js","sources":["../../src/file-upload/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 { VisuallyHidden } from \"../shared/accessibility\";\nimport { FileUploadContext } from \"./context\";\nimport { MouseSensor } from \"./custom-sensors\";\nimport { FileItemEdit } from \"./file-item-edit\";\nimport * as styles from \"./file-list.styles\";\nimport { FileListItem } from \"./file-list-item\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\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    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        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    }, [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                    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                        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","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/file-upload/file-list.styles.d.ts

@@ -1,6 +1,3 @@
-interface ListWrapperStyleProps {
-    $readOnly?: boolean | undefined;
-}
-export declare const ListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, ListWrapperStyleProps>> & string;
-export declare const EditableItemsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export {};
+export declare const listWrapper: import("@linaria/core").LinariaClassName;
+export declare const listWrapperReadOnly: import("@linaria/core").LinariaClassName;
+export declare const editableItemsContainer: import("@linaria/core").LinariaClassName;

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

@@ -1,21 +1,2 @@
-import t from"styled-components";import{V3_Spacing as o,V3_Border as i,V3_Colour as r}from"../v3_theme/index.js";const e=t.ul`
-    list-style-type: none;
-    margin-bottom: ${t=>t.$readOnly?"0":o["spacing-32"]};
-`,n=t.li`
-    border-top: ${i["width-010"]} ${i.solid} ${r.border};
-    border-bottom: ${i["width-010"]} ${i.solid}
-        ${r.border};
-
-    &:not(:last-child) {
-        margin-bottom: ${o["spacing-32"]};
-    }
-
-    &:not(:first-child) {
-        margin-top: ${o["spacing-32"]};
-    }
-
-    ul {
-        list-style-type: none;
-    }
-`;export{n as EditableItemsContainer,e as ListWrapper};
+import"./file-list.styles_16vplxk.css";const l="lzv8h5c",s="l1rx15rp",t="e1mlljmt";export{t as editableItemsContainer,l as listWrapper,s as listWrapperReadOnly};
 //# sourceMappingURL=file-list.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-list.styles.js","sources":["../../src/file-upload/file-list.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Border, V3_Colour, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ListWrapperStyleProps {\n    $readOnly?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ListWrapper = styled.ul<ListWrapperStyleProps>`\n    list-style-type: none;\n    margin-bottom: ${(props) =>\n        props.$readOnly ? \"0\" : V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const EditableItemsContainer = styled.li`\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour.border};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour.border};\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n    }\n\n    &:not(:first-child) {\n        margin-top: ${V3_Spacing[\"spacing-32\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":["ListWrapper","styled","ul","props","$readOnly","V3_Spacing","EditableItemsContainer","li","V3_Border","solid","V3_Colour","border"],"mappings":"iHAcO,MAAMA,EAAcC,EAAOC,EAAyB;;qBAErCC,GACdA,EAAMC,UAAY,IAAMC,EAAW;EAG9BC,EAAyBL,EAAOM,EAAE;kBAC7BC,EAAU,gBAAgBA,EAAUC,SAASC,EAAUC;qBACpDH,EAAU,gBAAgBA,EAAUC;UAC/CC,EAAUC;;;yBAGKN,EAAW;;;;sBAIdA,EAAW;;;;;;"}
+{"version":3,"file":"file-list.styles.js","sources":["../../src/file-upload/file-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, 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    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-32\"]};\n    }\n\n    &:not(:first-child) {\n        margin-top: ${Spacing[\"spacing-32\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":["listWrapper","listWrapperReadOnly","editableItemsContainer"],"mappings":"kEAIO,MAAMA,EAAW,UAKXC,EAAmB,WAInBC,EAAsB"}

package/file-upload/file-list.styles_16vplxk.css

@@ -0,0 +1,3 @@
+.lzv8h5c{list-style-type:none;margin-bottom:var(--fds-spacing-32);}
+.l1rx15rp{margin-bottom:0;}
+.e1mlljmt{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.e1mlljmt:not(:last-child){margin-bottom:var(--fds-spacing-32);}.e1mlljmt:not(:first-child){margin-top:var(--fds-spacing-32);}.e1mlljmt ul{list-style-type:none;}

package/file-upload/file-upload.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","sources":["../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport {\n    Description,\n    DescriptionContainer,\n    ErrorAlert,\n    TextContainer,\n    Title,\n    TitleContainer,\n    UploadButton,\n    UploadButtonContainer,\n    UploadButtonText,\n    WarningAlert,\n} from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        if (!disabled && onChange) {\n            onChange(files);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <TextContainer>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </TextContainer>\n                )}\n                {!!warning && (\n                    <WarningAlert type=\"warning\">{warning}</WarningAlert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <ErrorAlert type=\"error\">{errorMessage}</ErrorAlert>\n                )}\n                {!readOnly && (\n                    <UploadButtonContainer>\n                        <UploadButton\n                            type=\"button\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                        >\n                            {labels.uploadButton}\n                        </UploadButton>\n                        <UploadButtonText weight=\"semibold\">\n                            or drop them here\n                        </UploadButtonText>\n                    </UploadButtonContainer>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["FileUpload","styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","reachedMaxFiles","length","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","files","_a","current","focus","border","TextContainer","Title","TitleContainer","Description","DescriptionContainer","WarningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","ErrorAlert","UploadButtonContainer","UploadButton","onClick","event","preventDefault","openFileDialog","UploadButtonText","weight"],"mappings":"odAqBO,MAAMA,EAAa,EACtBC,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAwB,MACtCC,EAAcD,EAAoB,OACjCE,EAAUC,GAAeC,IA6C1BC,EAAkB,OACb7B,IAAYH,IAAYA,EAAUiC,QAAU9B,EA8BvD,OACI+B,EAACC,EAAkBC,UAASC,MAAO,CAAER,WAAUC,eAAaQ,SACxDC,EAACC,EAAkB,CACfC,IAAKf,EACLP,SA3EUuB,WACb9B,GAAYO,IACbA,EAASuB,GACU,QAAnBC,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAwEQtC,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACToC,OAAsB,aAAd/C,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYoB,KAAqBf,eAEvChB,IAASC,IACTqC,EAACQ,EAAa,CAAAT,SAAA,CAvCrBrC,EAKMiC,EADU,iBAAVjC,EACC+C,EAGJC,EAHS,CAAAX,SAAErC,IAJR,KAWNC,EAKMgC,EADgB,iBAAhBhC,EACCgD,EAGJC,EAHe,CAAAb,SAAEpC,IAJd,UA+BAE,GACC8B,EAACkB,GAAaC,KAAK,UAASf,SAAElC,IAElC8B,EAACoB,EAAQ,CACLb,IAAKb,EACL5B,UAAWA,EACXe,kBAAmBA,EACnBD,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVK,SAAUA,EACVsC,aAhGUC,UAClBpC,IACAA,EAASoC,GACU,QAAnBb,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EA6FYY,aA/EUC,IAClBrC,GACAA,EAAOqC,EACX,EA6EYpC,OA1EIqC,IACZrC,GACAA,EAAOqC,EACX,IAyES3C,GACGkB,EAAC0B,EAAU,CAACP,KAAK,QAAOf,SAAEtB,KAE5BC,GACEsB,EAACsB,EAAqB,CAAAvB,SAAA,CAClBJ,EAAC4B,EAAY,CACTT,KAAK,SACLtD,UAAU,YACVa,WACMiB,GAAYjB,GAAYoB,IAE9B+B,QAvGpBC,IAEKpD,IACDoD,EAAMC,iBACFvC,EAAYkB,SACZlB,EAAYkB,QAAQsB,iBAE5B,EAgGoD5B,SAE/Bf,EAAOC,eAEZU,EAACiC,EAAgB,CAACC,OAAO,WAAU9B,SAAA,6BAMtB"}
+{"version":3,"file":"file-upload.js","sources":["../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { Typography } from \"../typography\";\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport * as styles from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        const filesToProcess = limitIncomingFiles(files);\n\n        if (!disabled && onChange && filesToProcess.length > 0) {\n            onChange(filesToProcess);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const limitIncomingFiles = (files: File[]) => {\n        if (maxFiles === undefined) {\n            return files;\n        }\n\n        const existingItemsCount = fileItems?.length ?? 0;\n        const remainingSlots = Math.max(maxFiles - existingItemsCount, 0);\n\n        return files.slice(0, remainingSlots);\n    };\n\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Typography.BodyBL>{title}</Typography.BodyBL>;\n        }\n\n        return (\n            <Markup\n                className={styles.markupContainer}\n                baseTextSize=\"body-baseline\"\n            >\n                {title}\n            </Markup>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {description}\n                </Typography.BodyMD>\n            );\n        }\n\n        return (\n            <Markup className={styles.markupContainer} baseTextSize=\"body-md\">\n                {description}\n            </Markup>\n        );\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <div className={styles.textContainer}>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </div>\n                )}\n                {!!warning && (\n                    <Alert className={styles.warningAlert} type=\"warning\">\n                        {warning}\n                    </Alert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <Alert className={styles.errorAlert} type=\"error\">\n                        {errorMessage}\n                    </Alert>\n                )}\n                {!readOnly && (\n                    <div className={styles.uploadButtonContainer}>\n                        <Button\n                            type=\"button\"\n                            sizeType=\"small\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                            className={styles.uploadButton}\n                        >\n                            {labels.uploadButton}\n                        </Button>\n                        <Typography.BodyMD\n                            className={styles.uploadButtonText}\n                            weight=\"semibold\"\n                        >\n                            or drop them here\n                        </Typography.BodyMD>\n                    </div>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["FileUpload","styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","limitIncomingFiles","files","undefined","existingItemsCount","_a","length","remainingSlots","Math","max","slice","reachedMaxFiles","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","filesToProcess","current","focus","border","styles.textContainer","Typography","BodyBL","Markup","styles.markupContainer","baseTextSize","BodyMD","styles.description","Alert","styles.warningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","styles.errorAlert","styles.uploadButtonContainer","Button","sizeType","onClick","event","preventDefault","openFileDialog","styles.uploadButton","styles.uploadButtonText","weight"],"mappings":"wmBAcO,MAAMA,EAAa,EACtBC,YAAY,WACZC,YACAC,QAAKC,YACLA,EACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAwB,MACtCC,EAAcD,EAAoB,OACjCE,EAAUC,GAAeC,IA+C1BC,EAAsBC,UACxB,QAAiBC,IAAb/B,EACA,OAAO8B,EAGX,MAAME,EAAsC,QAAjBC,EAAApC,aAAS,EAATA,EAAWqC,cAAM,IAAAD,EAAAA,EAAI,EAC1CE,EAAiBC,KAAKC,IAAIrC,EAAWgC,EAAoB,GAE/D,OAAOF,EAAMQ,MAAM,EAAGH,EAAe,EAGnCI,EAAkB,OACbvC,IAAYH,IAAYA,EAAUqC,QAAUlC,EA6CvD,OACIwC,EAACC,EAAkBC,SAAQ,CAACC,MAAO,CAAEjB,WAAUC,eAAaiB,SACxDC,EAACC,EAAkB,CACfC,IAAKxB,EACLP,SAvGUc,UAClB,MAAMkB,EAAiBnB,EAAmBC,IAErCrB,GAAYO,GAAYgC,EAAed,OAAS,IACjDlB,EAASgC,GACU,QAAnBf,EAAAR,EAAYwB,eAAO,IAAAhB,GAAAA,EAAEiB,QACzB,EAkGQ9C,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACT4C,OAAsB,aAAdvD,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAY8B,KAAqBzB,EAAQ8B,SAAA,IAE/C9C,IAASC,IACT8C,EAAA,MAAA,CAAK3C,UAAWkD,EAAoBR,SAAA,CAtD3C9C,EAIgB,iBAAVA,EACA0C,EAACa,EAAWC,OAAM,CAAAV,SAAE9C,IAI3B0C,EAACe,EAAM,CACHrD,UAAWsD,EACXC,aAAa,yBAEZ3D,IAZE,KAkBNC,EAIsB,iBAAhBA,EAEHyC,EAACa,EAAWK,OAAM,CAACxD,UAAWyD,EAAkBf,SAC3C7C,IAMTyC,EAACe,EAAM,CAACrD,UAAWsD,EAAwBC,aAAa,mBACnD1D,IAbE,UAuCAE,GACCuC,EAACoB,EAAK,CAAC1D,UAAW2D,EAAqBC,KAAK,UAASlB,SAChD3C,IAGTuC,EAACuB,EAAQ,CACLhB,IAAKtB,EACL5B,UAAWA,EACXe,kBAAmBA,EACnBD,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVK,SAAUA,EACVkD,aA5HUC,UAClBhD,IACAA,EAASgD,GACU,QAAnBhC,EAAAR,EAAYwB,eAAO,IAAAhB,GAAAA,EAAEiB,QACzB,EAyHYgB,aA3GUC,IAClBjD,GACAA,EAAOiD,EACX,EAyGYhD,OAtGIiD,IACZjD,GACAA,EAAOiD,EACX,IAqGSvD,GACG2B,EAACoB,EAAK,CAAC1D,UAAWmE,EAAmBP,KAAK,QAAOlB,SAC5C/B,KAGPC,GACE+B,EAAA,MAAA,CAAK3C,UAAWoE,EAA4B1B,SAAA,CACxCJ,EAAC+B,EAAM,CACHT,KAAK,SACLU,SAAS,QACT5E,UAAU,YACVa,WACMiB,GAAYjB,GAAY8B,IAE9BkC,QAtIpBC,IAEKjE,IACDiE,EAAMC,iBACFpD,EAAY0B,SACZ1B,EAAY0B,QAAQ2B,iBAE5B,EAgIoB1E,UAAW2E,EAAmBjC,SAE7BxB,EAAOC,eAEZmB,EAACa,EAAWK,OAAM,CACdxD,UAAW4E,EACXC,OAAO,WAAUnC,SAAA,6BAOR"}

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

@@ -1,16 +1,8 @@
-export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const TitleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const DescriptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const WarningAlert: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").AlertProps, never>> & string & Omit<({ type, className, children, actionLink, actionLinkIcon, sizeType, showIcon, customIcon, maxCollapsedHeight, role, ...otherProps }: import("..").AlertProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const UploadButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const UploadButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const UploadButtonText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const ErrorAlert: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").AlertProps, never>> & string & Omit<({ type, className, children, actionLink, actionLinkIcon, sizeType, showIcon, customIcon, maxCollapsedHeight, role, ...otherProps }: import("..").AlertProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const textContainer: import("@linaria/core").LinariaClassName;
+export declare const markupContainer: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const warningAlert: import("@linaria/core").LinariaClassName;
+export declare const uploadButtonContainer: import("@linaria/core").LinariaClassName;
+export declare const uploadButton: import("@linaria/core").LinariaClassName;
+export declare const uploadButtonText: import("@linaria/core").LinariaClassName;
+export declare const errorAlert: import("@linaria/core").LinariaClassName;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.styles.js","sources":["../../src/file-upload/file-upload.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const Title = styled(Typography.BodyBL)``;\n\nexport const TitleContainer = styled.div`\n    color: ${V3_Colour.text};\n    ${applyHtmlContentStyle({ textSize: \"body-baseline\" })}\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionContainer = styled.div`\n    color: ${V3_Colour.text};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n`;\n\nexport const WarningAlert = styled(Alert)`\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const UploadButtonContainer = styled.div`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        align-items: flex-start;\n    }\n`;\n\nexport const UploadButton = styled(Button.Small)`\n    width: 10rem;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const UploadButtonText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    width: 10rem;\n    text-align: center;\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const ErrorAlert = styled(Alert)`\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n"],"names":["TextContainer","styled","div","V3_Spacing","Title","Typography","BodyBL","TitleContainer","V3_Colour","text","applyHtmlContentStyle","textSize","Description","BodyMD","DescriptionContainer","WarningAlert","Alert","UploadButtonContainer","V3_MediaQuery","MaxWidth","md","UploadButton","Button","Small","UploadButtonText","ErrorAlert"],"mappings":"+UAWO,MAAMA,EAAgBC,EAAOC,GAAG;;;qBAGlBC,EAAW;WACrBA,EAAW;EAGTC,EAAQH,EAAOI,EAAWC,OAAO,GAEjCC,EAAiBN,EAAOC,GAAG;aAC3BM,EAAUC;MACjBC,EAAsB,CAAEC,SAAU;EAG3BC,EAAcX,EAAOI,EAAWQ,OAAO;aACvCL,EAAU;EAGVM,EAAuBb,EAAOC,GAAG;aACjCM,EAAUC;MACjBC,EAAsB,CAAEC,SAAU;EAG3BI,EAAed,EAAOe,EAAM;qBACpBb,EAAW;EAGnBc,EAAwBhB,EAAOC,GAAG;;;;;;MAMzCgB,EAAcC,SAASC;;;EAKhBC,EAAepB,EAAOqB,EAAOC,MAAM;;;MAG1CL,EAAcC,SAASC;;;EAKhBI,EAAmBvB,EAAOI,EAAWQ,OAAO;aAC5CL,EAAU;kBACLL,EAAW;;;MAGvBe,EAAcC,SAASC;;;;EAMhBK,EAAaxB,EAAOe,EAAM;qBAClBb,EAAW;"}
+{"version":3,"file":"file-upload.styles.js","sources":["../../src/file-upload/file-upload.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const markupContainer = css`\n    color: ${Colour.text};\n`;\n\nexport const description = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const warningAlert = css`\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const uploadButtonContainer = css`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n\n    ${MediaQuery.MaxWidth.md} {\n        align-items: flex-start;\n    }\n`;\n\nexport const uploadButton = css`\n    width: 10rem;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const uploadButtonText = css`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n    width: 10rem;\n    text-align: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const errorAlert = css`\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n"],"names":["textContainer","markupContainer","description","warningAlert","uploadButtonContainer","uploadButton","uploadButtonText","errorAlert"],"mappings":"mEAIO,MAAMA,EAAa,UAObC,EAAe,UAIfC,EAAW,UAIXC,EAAY,UAIZC,EAAqB,UAWrBC,EAAY,UAQZC,EAAgB,WAYhBC,EAAU"}

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

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

package/file-upload/helper.d.ts

@@ -1,4 +1,6 @@
 export declare class FileUploadHelper {
+    static readonly PDF_MIME_TYPE = "application/pdf";
+    static readonly PDF_ICON_URL = "https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg";
     static formatFileSizeDisplay(size?: number): string;
     static isSupportedImageType(type: string): boolean;
 }

package/file-upload/helper.js

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

package/file-upload/helper.js.map

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

package/filter/addons/filter-item-checkbox.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as i,Fragment as l}from"react/jsx-runtime";import{useContext as n,useState as r,useRef as o,useMemo as a,useCallback as s,useEffect as c}from"react";import{useResizeDetector as d}from"../../external/react-resize-detector/build/index.esm.js";import{FilterContext as h}from"../filter-context.js";import{StyledFilterItem as m,Group as u,SelectAllButton as g,StyledToggle as f,Item as p,StyledCheckbox as v}from"./filter-item-checkbox.styles.js";import{hasNestedOptions as b,flattenNestedOptions as k,buildKeyPath as x,getAllDescendantChildren as C,getAllDescendantKeyPaths as y}from"./filter-item-checkbox-helpers.js";const I=I=>{var{selectedOptions:S,options:j,showAsCheckboxInMobile:O=!1,minimisableOptions:E=!0,onSelect:M,labelExtractor:T,valueExtractor:$,useToggleContentWidth:z}=I,P=e(I,["selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth"]);const{mode:W}=n(h),[w,A]=r(S||[]),[H,D]=r(),[R,_]=r(j.length),F=o(null),K=o(null),L=a((()=>b(j,(e=>e.options))),[j]),N="mobile"===W&&!O&&!L,q=a((()=>k(j,[],$||(e=>e.value),T||(e=>e.label))),[j,$,T]),B=q.length,G=e=>()=>{const t=q.find((t=>t.originalItem===e));if(t)if(t.hasChildren){const e=C(q,t.keyPath),i=e.filter((e=>w.some((t=>Y(t)===Y(e)))));let l=[...w];i.length===e.length?l=l.filter((t=>!e.some((e=>Y(e)===Y(t))))):e.forEach((e=>{l.some((t=>Y(t)===Y(e)))||l.push(e)})),A(l),null==M||M(l)}else{const t=[...w],i=w.findIndex((t=>Y(t)===Y(e)));i>=0?t.splice(i,1):t.push(e),A(t),null==M||M(t)}},J=()=>{if(L)if(w.length>0)A([]),null==M||M([]);else{const e=q.filter((e=>!e.hasChildren)).map((e=>e.originalItem));A(e),null==M||M(e)}else{const e=w.length?[]:j;A(e),null==M||M(e)}},Q=e=>t=>{!L||" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),G(e)())},U=e=>()=>{L||G(e)()},V=e=>{if(!e.hasChildren)return{checked:w.some((t=>Y(t)===Y(e.originalItem))),indeterminate:!1};const t=y(q,e.keyPath).map((e=>q.find((t=>x(t.keyPath)===x(e))))).filter((e=>e&&!e.hasChildren)).map((e=>e.originalItem)),i=t.filter((e=>w.some((t=>Y(t)===Y(e)))));return{checked:i.length===t.length&&t.length>0,indeterminate:i.length>0&&i.length<t.length}},X=e=>{var t;return T?T(e):null!==(t=e.label)&&void 0!==t?t:null==e?void 0:e.toString()},Y=e=>{var t;return $?$(e):null!==(t=e.value)&&void 0!==t?t:null==e?void 0:e.toString()},Z=()=>{const e=K.current?K.current.offsetTop+K.current.clientHeight:void 0;D(e)},ee=s((()=>{if(!F.current)return void D(void 0);const e=Array.from(F.current.children);let t=0,i=0,l=-1;for(let n=0;n<e.length;n++){const r=e[n].offsetTop;if(r>l&&(i++,l=r,i>2))break;t=n}_(t),D(i>2?l-8:void 0)}),[]);c((()=>{S!==w&&A(S||[])}),[S]),c((()=>{N?ee():Z()}),[j]),d({handleWidth:!0,handleHeight:!1,skipOnMount:!0,refreshMode:"throttle",targetRef:F,onResize:N?ee:Z});const te=(e,i)=>{const{checked:l,indeterminate:n}=V(i);return t(v,{displaySize:"small",checked:l,indeterminate:n,onChange:U(e),tabIndex:L?-1:void 0,"aria-hidden":L?"true":void 0})},ie=()=>{var e;return B<3?null:t(g,{styleType:"link",type:"button",onClick:J,"aria-label":w.length?"Clear all selections":`Select all in ${(null===(e=F.current)||void 0===e?void 0:e.ariaLabel)||"this group"}`,children:w.length?"Clear all":"Select all"})};return t(m,Object.assign({minimisable:!!E&&(N?!!H:B>5),minimisedHeight:H},P,{children:(e,{minimised:n})=>i(l,{children:[ie(),t(u,{role:L?"tree":"group","aria-label":P.title,"aria-multiselectable":!0,ref:F,$isMobileToggleMode:N,children:q.map(((e,l)=>N?((e,i,l)=>{const n=e.originalItem,r=X(n),o=Y(n),a=!!w.find((e=>Y(e)===o));return t(f,{type:"checkbox",checked:a,$visible:!l||!!H&&i<=R,onChange:G(n),useContentWidth:z,children:r},o)})(e,l,n):((e,t,l)=>{const n=e.originalItem,r=X(n),{checked:o,indeterminate:a}=V(e),s=o||a,c=!l||t<5,d=L?{"aria-checked":a?"mixed":o,"aria-selected":!!o,"aria-level":e.level+1,"aria-posinset":e.indexInParent+1,"aria-setsize":e.parentSetSize}:{};return i(p,Object.assign({as:L?"div":"label",role:L?"treeitem":void 0},d,{onClick:L?G(n):void 0,onKeyDown:Q(n),tabIndex:L?0:void 0,$visible:c,$selected:s,$level:e.level,ref:4===t?K:void 0,children:[te(n,e),r]}),x(e.keyPath))})(e,l,n)))})]})}))};I.displayName="Filter.Checkbox";export{I as FilterItemCheckbox};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as l,Fragment as i}from"react/jsx-runtime";import n from"clsx";import{useContext as r,useState as o,useRef as a,useMemo as s,useCallback as c,useEffect as m}from"react";import{useResizeDetector as h}from"../../external/react-resize-detector/build/index.esm.js";import{Button as d}from"../../button/button.js";import{Checkbox as u}from"../../checkbox/checkbox.js";import{Toggle as f}from"../../toggle/toggle.js";import{FilterContext as p}from"../filter-context.js";import{FilterItem as g}from"../filter-item.js";import{group as b,groupMobileToggleMode as v,filterItem as k,selectAllButton as x,toggle as y,toggleHidden as C,item as j,itemHidden as I,itemSelected as S,checkbox as N,tokens as O}from"./filter-item-checkbox.styles.js";import{hasNestedOptions as P,flattenNestedOptions as z,buildKeyPath as E,getAllDescendantChildren as T,getAllDescendantKeyPaths as w}from"./filter-item-checkbox-helpers.js";const M=M=>{var{selectedOptions:W,options:A,showAsCheckboxInMobile:D=!1,minimisableOptions:H=!0,onSelect:K,labelExtractor:R,valueExtractor:_,useToggleContentWidth:F}=M,L=e(M,["selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth"]);const{mode:$}=r(p),[q,B]=o(W||[]),[G,J]=o(),[Q,U]=o(A.length),V=a(null),X=a(null),Y=s((()=>P(A,(e=>e.options))),[A]),Z="mobile"===$&&!D&&!Y,ee=s((()=>z(A,[],_||(e=>e.value),R||(e=>e.label))),[A,_,R]),te=ee.length,le=e=>()=>{const t=ee.find((t=>t.originalItem===e));if(t)if(t.hasChildren){const e=T(ee,t.keyPath),l=e.filter((e=>q.some((t=>se(t)===se(e)))));let i=[...q];l.length===e.length?i=i.filter((t=>!e.some((e=>se(e)===se(t))))):e.forEach((e=>{i.some((t=>se(t)===se(e)))||i.push(e)})),B(i),null==K||K(i)}else{const t=[...q],l=q.findIndex((t=>se(t)===se(e)));l>=0?t.splice(l,1):t.push(e),B(t),null==K||K(t)}},ie=()=>{if(Y)if(q.length>0)B([]),null==K||K([]);else{const e=ee.filter((e=>!e.hasChildren)).map((e=>e.originalItem));B(e),null==K||K(e)}else{const e=q.length?[]:A;B(e),null==K||K(e)}},ne=e=>t=>{!Y||" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),le(e)())},re=e=>()=>{Y||le(e)()},oe=e=>{if(!e.hasChildren)return{checked:q.some((t=>se(t)===se(e.originalItem))),indeterminate:!1};const t=w(ee,e.keyPath).map((e=>ee.find((t=>E(t.keyPath)===E(e))))).filter((e=>e&&!e.hasChildren)).map((e=>e.originalItem)),l=t.filter((e=>q.some((t=>se(t)===se(e)))));return{checked:l.length===t.length&&t.length>0,indeterminate:l.length>0&&l.length<t.length}},ae=e=>{var t;return R?R(e):null!==(t=e.label)&&void 0!==t?t:null==e?void 0:e.toString()},se=e=>{var t;return _?_(e):null!==(t=e.value)&&void 0!==t?t:null==e?void 0:e.toString()},ce=()=>{const e=X.current?X.current.offsetTop+X.current.clientHeight:void 0;J(e)},me=c((()=>{if(!V.current)return void J(void 0);const e=Array.from(V.current.children);let t=0,l=0,i=-1;for(let n=0;n<e.length;n++){const r=e[n].offsetTop;if(r>i&&(l++,i=r,l>2))break;t=n}U(t),J(l>2?i-8:void 0)}),[]);m((()=>{W!==q&&B(W||[])}),[W]),m((()=>{Z?me():ce()}),[A]),h({handleWidth:!0,handleHeight:!1,skipOnMount:!0,refreshMode:"throttle",targetRef:V,onResize:Z?me:ce});const he=(e,l)=>{const{checked:i,indeterminate:n}=oe(l);return t(u,{className:N,displaySize:"small",checked:i,indeterminate:n,onChange:re(e),tabIndex:Y?-1:void 0,"aria-hidden":Y?"true":void 0})},de=()=>{var e;return te<3?null:t(d,{className:x,styleType:"link",type:"button",sizeType:"small",onClick:ie,"aria-label":q.length?"Clear all selections":`Select all in ${(null===(e=V.current)||void 0===e?void 0:e.ariaLabel)||"this group"}`,children:q.length?"Clear all":"Select all"})};return t(g,Object.assign({minimisable:!!H&&(Z?!!G:te>5),minimisedHeight:G},L,{className:n(k,L.className),children:(e,{minimised:r})=>l(i,{children:[de(),t("div",{role:Y?"tree":"group","aria-label":L.title,"aria-multiselectable":!0,ref:V,className:n(b,Z&&v),children:ee.map(((e,o)=>Z?((e,l,i)=>{const r=e.originalItem,o=ae(r),a=se(r),s=!!q.find((e=>se(e)===a));return t(f,{type:"checkbox",checked:s,className:n(!F&&y,!(!i||G&&l<=Q)&&C),onChange:le(r),useContentWidth:F,children:o},a)})(e,o,r):((e,r,o)=>{const a=e.originalItem,s=ae(a),{checked:c,indeterminate:m}=oe(e),h=c||m,d=!o||r<5,u=Y?{"aria-checked":m?"mixed":c,"aria-selected":!!c,"aria-level":e.level+1,"aria-posinset":e.indexInParent+1,"aria-setsize":e.parentSetSize}:{},f=t=>{t&&e.level&&t.style.setProperty(O.item.level,String(e.level)),4===r&&(X.current=t)},p=n(j,!d&&I,h&&S),g=l(i,{children:[he(a,e),s]});return Y?t("div",Object.assign({role:"treeitem"},u,{onClick:le(a),onKeyDown:ne(a),tabIndex:0,className:p,ref:f,children:g}),E(e.keyPath)):t("label",{onKeyDown:ne(a),className:p,ref:f,children:g},E(e.keyPath))})(e,o,r)))})]})}))};M.displayName="Filter.Checkbox";export{M as FilterItemCheckbox};
 //# sourceMappingURL=filter-item-checkbox.js.map

package/filter/addons/filter-item-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item-checkbox.js","sources":["../../../src/filter/addons/filter-item-checkbox.tsx"],"sourcesContent":["import type { AriaAttributes } from \"react\";\nimport {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { FilterContext } from \"../filter-context\";\nimport type {\n    FilterItemCheckboxOptionProps,\n    FilterItemCheckboxProps,\n} from \"../types\";\nimport {\n    Group,\n    Item,\n    SelectAllButton,\n    StyledCheckbox,\n    StyledFilterItem,\n    StyledToggle,\n} from \"./filter-item-checkbox.styles\";\nimport {\n    buildKeyPath,\n    flattenNestedOptions,\n    getAllDescendantChildren,\n    getAllDescendantKeyPaths,\n    hasNestedOptions,\n} from \"./filter-item-checkbox-helpers\";\nimport type { FlattenedFilterOption } from \"./types\";\n\nexport const FilterItemCheckbox = <T = FilterItemCheckboxOptionProps,>({\n    selectedOptions,\n    options,\n    showAsCheckboxInMobile = false,\n    minimisableOptions = true,\n    onSelect,\n    labelExtractor,\n    valueExtractor,\n    useToggleContentWidth,\n    ...filterItemProps\n}: FilterItemCheckboxProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode } = useContext(FilterContext);\n    const [selected, setSelected] = useState<T[]>(selectedOptions || []);\n    const [minimisedHeight, setMinimisedHeight] = useState<number>();\n    const [lastVisibleElementIndex, setLastVisibleElementIndex] =\n        useState<number>(options.length);\n    const parentRef = useRef<HTMLDivElement>(null);\n    const lastVisibleElement = useRef<HTMLLabelElement>(null);\n\n    // Check if options have nested structure\n    const isNested = useMemo(\n        () => hasNestedOptions(options, (item) => (item as any).options),\n        [options]\n    );\n\n    const isMobileToggleMode =\n        mode === \"mobile\" && !showAsCheckboxInMobile && !isNested;\n\n    // Flatten nested options\n    const flattenedOptions = useMemo(\n        () =>\n            flattenNestedOptions(\n                options,\n                [],\n                valueExtractor || ((item) => (item as any).value),\n                labelExtractor || ((item) => (item as any).label)\n            ),\n        [options, valueExtractor, labelExtractor]\n    );\n\n    const optionCount = flattenedOptions.length;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemClick = (item: T) => () => {\n        // Find the flattened option\n        const flatOption = flattenedOptions.find(\n            (opt) => opt.originalItem === item\n        );\n        if (!flatOption) return;\n\n        if (flatOption.hasChildren) {\n            // Handle parent click - select/deselect all children\n            const allChildren = getAllDescendantChildren<T>(\n                flattenedOptions,\n                flatOption.keyPath\n            );\n\n            const currentlySelectedChildren = allChildren.filter((child) =>\n                selected.some((s) => getValue(s) === getValue(child))\n            );\n\n            let newSelection = [...selected];\n\n            if (currentlySelectedChildren.length === allChildren.length) {\n                // All children selected, deselect all\n                newSelection = newSelection.filter(\n                    (s) =>\n                        !allChildren.some(\n                            (child) => getValue(child) === getValue(s)\n                        )\n                );\n            } else {\n                // Some or no children selected, select all\n                allChildren.forEach((child) => {\n                    if (\n                        !newSelection.some(\n                            (s) => getValue(s) === getValue(child)\n                        )\n                    ) {\n                        newSelection.push(child);\n                    }\n                });\n            }\n\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        } else {\n            // Handle leaf item click - toggle selection\n            const newSelection = [...selected];\n            const selectedIndex = selected.findIndex(\n                (s) => getValue(s) === getValue(item)\n            );\n\n            if (selectedIndex >= 0) {\n                newSelection.splice(selectedIndex, 1);\n            } else {\n                newSelection.push(item);\n            }\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleSelectClearAll = () => {\n        if (isNested) {\n            if (selected.length > 0) {\n                // Clear all\n                setSelected([]);\n                onSelect?.([]);\n            } else {\n                // Select all leaf nodes\n                const leafOptions = flattenedOptions.filter(\n                    (option) => !option.hasChildren\n                );\n                const allValues = leafOptions.map(\n                    (option) => option.originalItem\n                ) as T[];\n                setSelected(allValues);\n                onSelect?.(allValues);\n            }\n        } else {\n            const newSelection = selected.length ? [] : options;\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleListItemKeyDown =\n        (originalItem: T) => (event: React.KeyboardEvent) => {\n            if (isNested && (event.key === \" \" || event.key === \"Enter\")) {\n                event.preventDefault();\n                handleItemClick(originalItem)();\n            }\n        };\n\n    const handleCheckboxChange = (originalItem: T) => () => {\n        if (!isNested) {\n            handleItemClick(originalItem)();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCheckboxState = (flatOption: (typeof flattenedOptions)[0]) => {\n        if (!flatOption.hasChildren) {\n            // Leaf item - simple check\n            return {\n                checked: selected.some(\n                    (s) =>\n                        getValue(s) === getValue(flatOption.originalItem as T)\n                ),\n                indeterminate: false,\n            };\n        }\n\n        // Parent item - check children states (following IndeterminateState pattern)\n        const allChildren = getAllDescendantKeyPaths(\n            flattenedOptions,\n            flatOption.keyPath\n        )\n            .map((keyPath: string[]) =>\n                flattenedOptions.find(\n                    (opt) => buildKeyPath(opt.keyPath) === buildKeyPath(keyPath)\n                )\n            )\n            .filter((opt) => opt && !opt.hasChildren)\n            .map((opt) => opt!.originalItem as T);\n\n        const selectedChildren = allChildren.filter((child) =>\n            selected.some((s) => getValue(s) === getValue(child))\n        );\n\n        return {\n            checked:\n                selectedChildren.length === allChildren.length &&\n                allChildren.length > 0,\n            indeterminate:\n                selectedChildren.length > 0 &&\n                selectedChildren.length < allChildren.length,\n        };\n    };\n\n    const getLabel = (item: T): React.ReactNode => {\n        return labelExtractor\n            ? labelExtractor(item)\n            : (item as any).label ?? item?.toString();\n    };\n\n    const getValue = (item: T): string => {\n        return valueExtractor\n            ? valueExtractor(item)\n            : (item as any).value ?? item?.toString();\n    };\n\n    const setVisibleItemsWhenMinimised = () => {\n        const elementBottom = lastVisibleElement.current\n            ? lastVisibleElement.current.offsetTop +\n              lastVisibleElement.current.clientHeight\n            : undefined;\n        setMinimisedHeight(elementBottom);\n    };\n\n    const setVisibleMobileItemsWhenMinimised = useCallback(() => {\n        if (!parentRef.current) {\n            setMinimisedHeight(undefined);\n            return;\n        }\n\n        const children = Array.from(parentRef.current.children);\n\n        let lastElementInRow = 0;\n        let rowCount = 0;\n        let rowTop = -1;\n\n        for (let i = 0; i < children.length; i++) {\n            const childTop = (children[i] as HTMLDivElement).offsetTop;\n            if (childTop > rowTop) {\n                rowCount++;\n                rowTop = childTop;\n                // show only the first 2 rows\n                if (rowCount > 2) {\n                    break;\n                }\n            }\n            lastElementInRow = i;\n        }\n\n        setLastVisibleElementIndex(lastElementInRow);\n\n        if (rowCount > 2) {\n            setMinimisedHeight(rowTop - 8); // gap from next row\n        } else {\n            setMinimisedHeight(undefined);\n        }\n    }, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (selectedOptions !== selected) {\n            setSelected(selectedOptions || []);\n        }\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (isMobileToggleMode) {\n            setVisibleMobileItemsWhenMinimised();\n        } else {\n            setVisibleItemsWhenMinimised();\n        }\n    }, [options]);\n\n    useResizeDetector({\n        handleWidth: true,\n        handleHeight: false,\n        skipOnMount: true,\n        refreshMode: \"throttle\",\n        targetRef: parentRef,\n        onResize: isMobileToggleMode\n            ? setVisibleMobileItemsWhenMinimised\n            : setVisibleItemsWhenMinimised,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCheckboxIcon = (\n        originalItem: T,\n        flatOption: FlattenedFilterOption<T>\n    ) => {\n        const { checked, indeterminate } = getCheckboxState(flatOption);\n\n        return (\n            <StyledCheckbox\n                displaySize=\"small\"\n                checked={checked}\n                indeterminate={indeterminate}\n                onChange={handleCheckboxChange(originalItem)}\n                tabIndex={isNested ? -1 : undefined}\n                aria-hidden={isNested ? \"true\" : undefined}\n            />\n        );\n    };\n\n    const renderCheckbox = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const { checked, indeterminate } = getCheckboxState(option);\n        const isSelected = checked || indeterminate;\n        const isVisible = !minimised || index < 5;\n\n        // ARIA attributes for tree items\n        const treeItemAriaAttributes: AriaAttributes = isNested\n            ? {\n                  \"aria-checked\": indeterminate ? \"mixed\" : checked,\n                  \"aria-selected\": !!checked,\n                  \"aria-level\": option.level + 1,\n                  \"aria-posinset\": option.indexInParent + 1,\n                  \"aria-setsize\": option.parentSetSize,\n              }\n            : {};\n\n        return (\n            <Item\n                key={buildKeyPath(option.keyPath)}\n                as={isNested ? \"div\" : \"label\"}\n                role={isNested ? \"treeitem\" : undefined}\n                {...treeItemAriaAttributes}\n                onClick={isNested ? handleItemClick(originalItem) : undefined}\n                onKeyDown={handleListItemKeyDown(originalItem)}\n                tabIndex={isNested ? 0 : undefined}\n                $visible={isVisible}\n                $selected={isSelected}\n                $level={option.level}\n                ref={index === 4 ? lastVisibleElement : undefined}\n            >\n                {renderCheckboxIcon(originalItem, option)}\n                {optionLabel}\n            </Item>\n        );\n    };\n\n    const renderToggle = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const optionValue = getValue(originalItem);\n        const checked = !!selected.find((s) => getValue(s) === optionValue);\n        return (\n            <StyledToggle\n                key={optionValue}\n                type=\"checkbox\"\n                checked={checked}\n                $visible={\n                    !minimised ||\n                    (!!minimisedHeight && index <= lastVisibleElementIndex)\n                }\n                onChange={handleItemClick(originalItem)}\n                useContentWidth={useToggleContentWidth}\n            >\n                {optionLabel}\n            </StyledToggle>\n        );\n    };\n\n    const renderSelectClearAllButton = () => {\n        if (optionCount < 3) {\n            return null;\n        }\n        return (\n            <SelectAllButton\n                styleType=\"link\"\n                type=\"button\"\n                onClick={handleSelectClearAll}\n                aria-label={\n                    selected.length\n                        ? \"Clear all selections\"\n                        : `Select all in ${\n                              parentRef.current?.ariaLabel || \"this group\"\n                          }`\n                }\n            >\n                {selected.length ? \"Clear all\" : \"Select all\"}\n            </SelectAllButton>\n        );\n    };\n\n    return (\n        <StyledFilterItem\n            minimisable={\n                minimisableOptions\n                    ? isMobileToggleMode // set minimisable base on mobile toggle mode\n                        ? !!minimisedHeight\n                        : optionCount > 5\n                    : false // if minimisableOptions is false, never allow minimising\n            }\n            minimisedHeight={minimisedHeight}\n            {...filterItemProps}\n        >\n            {(_, { minimised }) => (\n                <>\n                    {renderSelectClearAllButton()}\n                    <Group\n                        role={isNested ? \"tree\" : \"group\"}\n                        aria-label={filterItemProps.title}\n                        aria-multiselectable={true}\n                        ref={parentRef}\n                        $isMobileToggleMode={isMobileToggleMode}\n                    >\n                        {flattenedOptions.map((option, i) =>\n                            isMobileToggleMode\n                                ? renderToggle(option, i, minimised)\n                                : renderCheckbox(option, i, minimised)\n                        )}\n                    </Group>\n                </>\n            )}\n        </StyledFilterItem>\n    );\n};\n\nFilterItemCheckbox.displayName = \"Filter.Checkbox\";\n"],"names":["FilterItemCheckbox","_a","selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth","filterItemProps","__rest","mode","useContext","FilterContext","selected","setSelected","useState","minimisedHeight","setMinimisedHeight","lastVisibleElementIndex","setLastVisibleElementIndex","length","parentRef","useRef","lastVisibleElement","isNested","useMemo","hasNestedOptions","item","isMobileToggleMode","flattenedOptions","flattenNestedOptions","value","label","optionCount","handleItemClick","flatOption","find","opt","originalItem","hasChildren","allChildren","getAllDescendantChildren","keyPath","currentlySelectedChildren","filter","child","some","s","getValue","newSelection","forEach","push","selectedIndex","findIndex","splice","handleSelectClearAll","allValues","option","map","handleListItemKeyDown","event","key","preventDefault","handleCheckboxChange","getCheckboxState","checked","indeterminate","getAllDescendantKeyPaths","buildKeyPath","selectedChildren","getLabel","toString","setVisibleItemsWhenMinimised","elementBottom","current","offsetTop","clientHeight","undefined","setVisibleMobileItemsWhenMinimised","useCallback","children","Array","from","lastElementInRow","rowCount","rowTop","i","childTop","useEffect","useResizeDetector","handleWidth","handleHeight","skipOnMount","refreshMode","targetRef","onResize","renderCheckboxIcon","_jsx","StyledCheckbox","displaySize","onChange","tabIndex","renderSelectClearAllButton","SelectAllButton","styleType","type","onClick","ariaLabel","StyledFilterItem","Object","assign","minimisable","_","minimised","_jsxs","_Fragment","Group","role","title","ref","$isMobileToggleMode","index","optionLabel","optionValue","StyledToggle","$visible","useContentWidth","renderToggle","isSelected","isVisible","treeItemAriaAttributes","level","indexInParent","parentSetSize","Item","as","onKeyDown","$selected","$level","renderCheckbox","displayName"],"mappings":"8qBAiCO,MAAMA,EAA0DC,QAAAC,gBACnEA,EAAeC,QACfA,EAAOC,uBACPA,GAAyB,EAAKC,mBAC9BA,GAAqB,EAAIC,SACzBA,EAAQC,eACRA,EAAcC,eACdA,EAAcC,sBACdA,KACGC,EAAeC,EAAAV,EATiD,CAAA,kBAAA,UAAA,yBAAA,qBAAA,WAAA,iBAAA,iBAAA,0BAcnE,MAAMW,KAAEA,GAASC,EAAWC,IACrBC,EAAUC,GAAeC,EAAcf,GAAmB,KAC1DgB,EAAiBC,GAAsBF,KACvCG,EAAyBC,GAC5BJ,EAAiBd,EAAQmB,QACvBC,EAAYC,EAAuB,MACnCC,EAAqBD,EAAyB,MAG9CE,EAAWC,GACb,IAAMC,EAAiBzB,GAAU0B,GAAUA,EAAa1B,WACxD,CAACA,IAGC2B,EACO,WAATlB,IAAsBR,IAA2BsB,EAG/CK,EAAmBJ,GACrB,IACIK,EACI7B,EACA,GACAK,GAAc,CAAMqB,GAAUA,EAAaI,OAC3C1B,GAAc,CAAMsB,GAAUA,EAAaK,SAEnD,CAAC/B,EAASK,EAAgBD,IAGxB4B,EAAcJ,EAAiBT,OAK/Bc,EAAmBP,GAAY,KAEjC,MAAMQ,EAAaN,EAAiBO,MAC/BC,GAAQA,EAAIC,eAAiBX,IAElC,GAAKQ,EAEL,GAAIA,EAAWI,YAAa,CAExB,MAAMC,EAAcC,EAChBZ,EACAM,EAAWO,SAGTC,EAA4BH,EAAYI,QAAQC,GAClDhC,EAASiC,MAAMC,GAAMC,EAASD,KAAOC,EAASH,OAGlD,IAAII,EAAe,IAAIpC,GAEnB8B,EAA0BvB,SAAWoB,EAAYpB,OAEjD6B,EAAeA,EAAaL,QACvBG,IACIP,EAAYM,MACRD,GAAUG,EAASH,KAAWG,EAASD,OAKpDP,EAAYU,SAASL,IAEZI,EAAaH,MACTC,GAAMC,EAASD,KAAOC,EAASH,MAGpCI,EAAaE,KAAKN,EACtB,IAIR/B,EAAYmC,GACZ7C,SAAAA,EAAW6C,EACf,KAAO,CAEH,MAAMA,EAAe,IAAIpC,GACnBuC,EAAgBvC,EAASwC,WAC1BN,GAAMC,EAASD,KAAOC,EAASrB,KAGhCyB,GAAiB,EACjBH,EAAaK,OAAOF,EAAe,GAEnCH,EAAaE,KAAKxB,GAEtBb,EAAYmC,GACZ7C,SAAAA,EAAW6C,EACf,GAGEM,EAAuB,KACzB,GAAI/B,EACA,GAAIX,EAASO,OAAS,EAElBN,EAAY,IACZV,SAAAA,EAAW,QACR,CAEH,MAGMoD,EAHc3B,EAAiBe,QAChCa,IAAYA,EAAOlB,cAEMmB,KACzBD,GAAWA,EAAOnB,eAEvBxB,EAAY0C,GACZpD,SAAAA,EAAWoD,EACf,KACG,CACH,MAAMP,EAAepC,EAASO,OAAS,GAAKnB,EAC5Ca,EAAYmC,GACZ7C,SAAAA,EAAW6C,EACf,GAGEU,EACDrB,GAAqBsB,KACdpC,GAA2B,MAAdoC,EAAMC,KAA6B,UAAdD,EAAMC,MACxCD,EAAME,iBACN5B,EAAgBI,EAAhBJ,GACJ,EAGF6B,EAAwBzB,GAAoB,KACzCd,GACDU,EAAgBI,EAAhBJ,EACJ,EAME8B,EAAoB7B,IACtB,IAAKA,EAAWI,YAEZ,MAAO,CACH0B,QAASpD,EAASiC,MACbC,GACGC,EAASD,KAAOC,EAASb,EAAWG,gBAE5C4B,eAAe,GAKvB,MAAM1B,EAAc2B,EAChBtC,EACAM,EAAWO,SAEVgB,KAAKhB,GACFb,EAAiBO,MACZC,GAAQ+B,EAAa/B,EAAIK,WAAa0B,EAAa1B,OAG3DE,QAAQP,GAAQA,IAAQA,EAAIE,cAC5BmB,KAAKrB,GAAQA,EAAKC,eAEjB+B,EAAmB7B,EAAYI,QAAQC,GACzChC,EAASiC,MAAMC,GAAMC,EAASD,KAAOC,EAASH,OAGlD,MAAO,CACHoB,QACII,EAAiBjD,SAAWoB,EAAYpB,QACxCoB,EAAYpB,OAAS,EACzB8C,cACIG,EAAiBjD,OAAS,GAC1BiD,EAAiBjD,OAASoB,EAAYpB,OAC7C,EAGCkD,EAAY3C,UACd,OAAOtB,EACDA,EAAesB,GACI,QAAnB5B,EAAC4B,EAAaK,aAAK,IAAAjC,EAAAA,EAAI4B,aAAI,EAAJA,EAAM4C,UAAU,EAG3CvB,EAAYrB,UACd,OAAOrB,EACDA,EAAeqB,GACI,QAAnB5B,EAAC4B,EAAaI,aAAK,IAAAhC,EAAAA,EAAI4B,aAAI,EAAJA,EAAM4C,UAAU,EAG3CC,EAA+B,KACjC,MAAMC,EAAgBlD,EAAmBmD,QACnCnD,EAAmBmD,QAAQC,UAC3BpD,EAAmBmD,QAAQE,kBAC3BC,EACN5D,EAAmBwD,EAAc,EAG/BK,GAAqCC,GAAY,KACnD,IAAK1D,EAAUqD,QAEX,YADAzD,OAAmB4D,GAIvB,MAAMG,EAAWC,MAAMC,KAAK7D,EAAUqD,QAAQM,UAE9C,IAAIG,EAAmB,EACnBC,EAAW,EACXC,GAAS,EAEb,IAAK,IAAIC,EAAI,EAAGA,EAAIN,EAAS5D,OAAQkE,IAAK,CACtC,MAAMC,EAAYP,EAASM,GAAsBX,UACjD,GAAIY,EAAWF,IACXD,IACAC,EAASE,EAELH,EAAW,GACX,MAGRD,EAAmBG,CACvB,CAEAnE,EAA2BgE,GAGvBlE,EADAmE,EAAW,EACQC,EAAS,OAETR,EACvB,GACD,IAKHW,GAAU,KACFxF,IAAoBa,GACpBC,EAAYd,GAAmB,GACnC,GACD,CAACA,IAEJwF,GAAU,KACF5D,EACAkD,KAEAN,GACJ,GACD,CAACvE,IAEJwF,EAAkB,CACdC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,YAAa,WACbC,UAAWzE,EACX0E,SAAUnE,EACJkD,GACAN,IAMV,MAAMwB,GAAqB,CACvB1D,EACAH,KAEA,MAAM8B,QAAEA,EAAOC,cAAEA,GAAkBF,EAAiB7B,GAEpD,OACI8D,EAACC,EAAc,CACXC,YAAY,QACZlC,QAASA,EACTC,cAAeA,EACfkC,SAAUrC,EAAqBzB,GAC/B+D,SAAU7E,GAAW,OAAKqD,EAAS,cACtBrD,EAAW,YAASqD,GACnC,EAwEJyB,GAA6B,WAC/B,OAAIrE,EAAc,EACP,KAGPgE,EAACM,GACGC,UAAU,OACVC,KAAK,SACLC,QAASnD,EAAoB,aAEzB1C,EAASO,OACH,uBACA,kBACqB,QAAjBrB,EAAAsB,EAAUqD,eAAO,IAAA3E,OAAA,EAAAA,EAAE4G,YAAa,eAClC3B,SAGXnE,EAASO,OAAS,YAAc,cACnB,EAI1B,OACI6E,EAACW,EAAgBC,OAAAC,OAAA,CACbC,cACI5G,IACMyB,IACMZ,EACFiB,EAAc,GAG5BjB,gBAAiBA,GACbR,EAAe,CAAAwE,SAElB,CAACgC,GAAKC,eACHC,EAAAC,EAAA,CAAAnC,SAAA,CACKsB,KACDL,EAACmB,EAAK,CACFC,KAAM7F,EAAW,OAAS,QAAO,aACrBhB,EAAgB8G,MAAK,wBACX,EACtBC,IAAKlG,EAASmG,oBACO5F,EAAkBoD,SAEtCnD,EAAiB6B,KAAI,CAACD,EAAQ6B,IAC3B1D,EAvEH,EACjB6B,EACAgE,EACAR,KAEA,MAAM3E,EAAemB,EAAOnB,aACtBoF,EAAcpD,EAAShC,GACvBqF,EAAc3E,EAASV,GACvB2B,IAAYpD,EAASuB,MAAMW,GAAMC,EAASD,KAAO4E,IACvD,OACI1B,EAAC2B,EAAY,CAETnB,KAAK,WACLxC,QAASA,EAAO4D,UAEXZ,KACEjG,GAAmByG,GAASvG,EAEnCkF,SAAUlE,EAAgBI,GAC1BwF,gBAAiBvH,EAAqByE,SAErC0C,GAVIC,EAWM,EAkDOI,CAAatE,EAAQ6B,EAAG2B,GAlH/B,EACnBxD,EACAgE,EACAR,KAEA,MAAM3E,EAAemB,EAAOnB,aACtBoF,EAAcpD,EAAShC,IACvB2B,QAAEA,EAAOC,cAAEA,GAAkBF,EAAiBP,GAC9CuE,EAAa/D,GAAWC,EACxB+D,GAAahB,GAAaQ,EAAQ,EAGlCS,EAAyC1G,EACzC,CACI,eAAgB0C,EAAgB,QAAUD,EAC1C,kBAAmBA,EACnB,aAAcR,EAAO0E,MAAQ,EAC7B,gBAAiB1E,EAAO2E,cAAgB,EACxC,eAAgB3E,EAAO4E,eAE3B,CAAA,EAEN,OACInB,EAACoB,EAAIzB,OAAAC,OAAA,CAEDyB,GAAI/G,EAAW,MAAQ,QACvB6F,KAAM7F,EAAW,gBAAaqD,GAC1BqD,EAAsB,CAC1BxB,QAASlF,EAAWU,EAAgBI,QAAgBuC,EACpD2D,UAAW7E,EAAsBrB,GACjC+D,SAAU7E,EAAW,OAAIqD,EAASgD,SACxBI,EAASQ,UACRT,EAAUU,OACbjF,EAAO0E,MACfZ,IAAe,IAAVE,EAAclG,OAAqBsD,EAASG,SAAA,CAEhDgB,GAAmB1D,EAAcmB,GACjCiE,KAbItD,EAAaX,EAAOf,SActB,EA6EeiG,CAAelF,EAAQ6B,EAAG2B,YAKjC,EAI3BnH,EAAmB8I,YAAc"}
+{"version":3,"file":"filter-item-checkbox.js","sources":["../../../src/filter/addons/filter-item-checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { AriaAttributes } from \"react\";\nimport {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Button } from \"../../button\";\nimport { Checkbox } from \"../../checkbox\";\nimport { Toggle } from \"../../toggle\";\nimport { FilterContext } from \"../filter-context\";\nimport { FilterItem } from \"../filter-item\";\nimport type {\n    FilterItemCheckboxOptionProps,\n    FilterItemCheckboxProps,\n} from \"../types\";\nimport * as styles from \"./filter-item-checkbox.styles\";\nimport {\n    buildKeyPath,\n    flattenNestedOptions,\n    getAllDescendantChildren,\n    getAllDescendantKeyPaths,\n    hasNestedOptions,\n} from \"./filter-item-checkbox-helpers\";\nimport type { FlattenedFilterOption } from \"./types\";\n\nexport const FilterItemCheckbox = <T = FilterItemCheckboxOptionProps,>({\n    selectedOptions,\n    options,\n    showAsCheckboxInMobile = false,\n    minimisableOptions = true,\n    onSelect,\n    labelExtractor,\n    valueExtractor,\n    useToggleContentWidth,\n    ...filterItemProps\n}: FilterItemCheckboxProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode } = useContext(FilterContext);\n    const [selected, setSelected] = useState<T[]>(selectedOptions || []);\n    const [minimisedHeight, setMinimisedHeight] = useState<number>();\n    const [lastVisibleElementIndex, setLastVisibleElementIndex] =\n        useState<number>(options.length);\n    const parentRef = useRef<HTMLDivElement>(null);\n    const lastVisibleElement = useRef<HTMLElement | null>(null);\n\n    // Check if options have nested structure\n    const isNested = useMemo(\n        () => hasNestedOptions(options, (item) => (item as any).options),\n        [options]\n    );\n\n    const isMobileToggleMode =\n        mode === \"mobile\" && !showAsCheckboxInMobile && !isNested;\n\n    // Flatten nested options\n    const flattenedOptions = useMemo(\n        () =>\n            flattenNestedOptions(\n                options,\n                [],\n                valueExtractor || ((item) => (item as any).value),\n                labelExtractor || ((item) => (item as any).label)\n            ),\n        [options, valueExtractor, labelExtractor]\n    );\n\n    const optionCount = flattenedOptions.length;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemClick = (item: T) => () => {\n        // Find the flattened option\n        const flatOption = flattenedOptions.find(\n            (opt) => opt.originalItem === item\n        );\n        if (!flatOption) return;\n\n        if (flatOption.hasChildren) {\n            // Handle parent click - select/deselect all children\n            const allChildren = getAllDescendantChildren<T>(\n                flattenedOptions,\n                flatOption.keyPath\n            );\n\n            const currentlySelectedChildren = allChildren.filter((child) =>\n                selected.some((s) => getValue(s) === getValue(child))\n            );\n\n            let newSelection = [...selected];\n\n            if (currentlySelectedChildren.length === allChildren.length) {\n                // All children selected, deselect all\n                newSelection = newSelection.filter(\n                    (s) =>\n                        !allChildren.some(\n                            (child) => getValue(child) === getValue(s)\n                        )\n                );\n            } else {\n                // Some or no children selected, select all\n                allChildren.forEach((child) => {\n                    if (\n                        !newSelection.some(\n                            (s) => getValue(s) === getValue(child)\n                        )\n                    ) {\n                        newSelection.push(child);\n                    }\n                });\n            }\n\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        } else {\n            // Handle leaf item click - toggle selection\n            const newSelection = [...selected];\n            const selectedIndex = selected.findIndex(\n                (s) => getValue(s) === getValue(item)\n            );\n\n            if (selectedIndex >= 0) {\n                newSelection.splice(selectedIndex, 1);\n            } else {\n                newSelection.push(item);\n            }\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleSelectClearAll = () => {\n        if (isNested) {\n            if (selected.length > 0) {\n                // Clear all\n                setSelected([]);\n                onSelect?.([]);\n            } else {\n                // Select all leaf nodes\n                const leafOptions = flattenedOptions.filter(\n                    (option) => !option.hasChildren\n                );\n                const allValues = leafOptions.map(\n                    (option) => option.originalItem\n                ) as T[];\n                setSelected(allValues);\n                onSelect?.(allValues);\n            }\n        } else {\n            const newSelection = selected.length ? [] : options;\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleListItemKeyDown =\n        (originalItem: T) => (event: React.KeyboardEvent) => {\n            if (isNested && (event.key === \" \" || event.key === \"Enter\")) {\n                event.preventDefault();\n                handleItemClick(originalItem)();\n            }\n        };\n\n    const handleCheckboxChange = (originalItem: T) => () => {\n        if (!isNested) {\n            handleItemClick(originalItem)();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCheckboxState = (flatOption: (typeof flattenedOptions)[0]) => {\n        if (!flatOption.hasChildren) {\n            // Leaf item - simple check\n            return {\n                checked: selected.some(\n                    (s) =>\n                        getValue(s) === getValue(flatOption.originalItem as T)\n                ),\n                indeterminate: false,\n            };\n        }\n\n        // Parent item - check children states (following IndeterminateState pattern)\n        const allChildren = getAllDescendantKeyPaths(\n            flattenedOptions,\n            flatOption.keyPath\n        )\n            .map((keyPath: string[]) =>\n                flattenedOptions.find(\n                    (opt) => buildKeyPath(opt.keyPath) === buildKeyPath(keyPath)\n                )\n            )\n            .filter((opt) => opt && !opt.hasChildren)\n            .map((opt) => opt!.originalItem as T);\n\n        const selectedChildren = allChildren.filter((child) =>\n            selected.some((s) => getValue(s) === getValue(child))\n        );\n\n        return {\n            checked:\n                selectedChildren.length === allChildren.length &&\n                allChildren.length > 0,\n            indeterminate:\n                selectedChildren.length > 0 &&\n                selectedChildren.length < allChildren.length,\n        };\n    };\n\n    const getLabel = (item: T): React.ReactNode => {\n        return labelExtractor\n            ? labelExtractor(item)\n            : (item as any).label ?? item?.toString();\n    };\n\n    const getValue = (item: T): string => {\n        return valueExtractor\n            ? valueExtractor(item)\n            : (item as any).value ?? item?.toString();\n    };\n\n    const setVisibleItemsWhenMinimised = () => {\n        const elementBottom = lastVisibleElement.current\n            ? lastVisibleElement.current.offsetTop +\n              lastVisibleElement.current.clientHeight\n            : undefined;\n        setMinimisedHeight(elementBottom);\n    };\n\n    const setVisibleMobileItemsWhenMinimised = useCallback(() => {\n        if (!parentRef.current) {\n            setMinimisedHeight(undefined);\n            return;\n        }\n\n        const children = Array.from(parentRef.current.children);\n\n        let lastElementInRow = 0;\n        let rowCount = 0;\n        let rowTop = -1;\n\n        for (let i = 0; i < children.length; i++) {\n            const childTop = (children[i] as HTMLDivElement).offsetTop;\n            if (childTop > rowTop) {\n                rowCount++;\n                rowTop = childTop;\n                // show only the first 2 rows\n                if (rowCount > 2) {\n                    break;\n                }\n            }\n            lastElementInRow = i;\n        }\n\n        setLastVisibleElementIndex(lastElementInRow);\n\n        if (rowCount > 2) {\n            setMinimisedHeight(rowTop - 8); // gap from next row\n        } else {\n            setMinimisedHeight(undefined);\n        }\n    }, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (selectedOptions !== selected) {\n            setSelected(selectedOptions || []);\n        }\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (isMobileToggleMode) {\n            setVisibleMobileItemsWhenMinimised();\n        } else {\n            setVisibleItemsWhenMinimised();\n        }\n    }, [options]);\n\n    useResizeDetector({\n        handleWidth: true,\n        handleHeight: false,\n        skipOnMount: true,\n        refreshMode: \"throttle\",\n        targetRef: parentRef,\n        onResize: isMobileToggleMode\n            ? setVisibleMobileItemsWhenMinimised\n            : setVisibleItemsWhenMinimised,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCheckboxIcon = (\n        originalItem: T,\n        flatOption: FlattenedFilterOption<T>\n    ) => {\n        const { checked, indeterminate } = getCheckboxState(flatOption);\n\n        return (\n            <Checkbox\n                className={styles.checkbox}\n                displaySize=\"small\"\n                checked={checked}\n                indeterminate={indeterminate}\n                onChange={handleCheckboxChange(originalItem)}\n                tabIndex={isNested ? -1 : undefined}\n                aria-hidden={isNested ? \"true\" : undefined}\n            />\n        );\n    };\n\n    const renderCheckbox = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const { checked, indeterminate } = getCheckboxState(option);\n        const isSelected = checked || indeterminate;\n        const isVisible = !minimised || index < 5;\n\n        // ARIA attributes for tree items\n        const treeItemAriaAttributes: AriaAttributes = isNested\n            ? {\n                  \"aria-checked\": indeterminate ? \"mixed\" : checked,\n                  \"aria-selected\": !!checked,\n                  \"aria-level\": option.level + 1,\n                  \"aria-posinset\": option.indexInParent + 1,\n                  \"aria-setsize\": option.parentSetSize,\n              }\n            : {};\n\n        const itemRef = (el: HTMLElement | null) => {\n            if (el && option.level) {\n                el.style.setProperty(\n                    styles.tokens.item.level,\n                    String(option.level)\n                );\n            }\n            if (index === 4) {\n                lastVisibleElement.current = el;\n            }\n        };\n\n        const itemClassName = clsx(\n            styles.item,\n            !isVisible && styles.itemHidden,\n            isSelected && styles.itemSelected\n        );\n\n        const itemContent = (\n            <>\n                {renderCheckboxIcon(originalItem, option)}\n                {optionLabel}\n            </>\n        );\n\n        if (isNested) {\n            return (\n                <div\n                    key={buildKeyPath(option.keyPath)}\n                    role=\"treeitem\"\n                    {...treeItemAriaAttributes}\n                    onClick={handleItemClick(originalItem)}\n                    onKeyDown={handleListItemKeyDown(originalItem)}\n                    tabIndex={0}\n                    className={itemClassName}\n                    ref={itemRef}\n                >\n                    {itemContent}\n                </div>\n            );\n        }\n\n        return (\n            <label\n                key={buildKeyPath(option.keyPath)}\n                onKeyDown={handleListItemKeyDown(originalItem)}\n                className={itemClassName}\n                ref={itemRef}\n            >\n                {itemContent}\n            </label>\n        );\n    };\n\n    const renderToggle = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const optionValue = getValue(originalItem);\n        const checked = !!selected.find((s) => getValue(s) === optionValue);\n        const isToggleVisible =\n            !minimised ||\n            (!!minimisedHeight && index <= lastVisibleElementIndex);\n        return (\n            <Toggle\n                key={optionValue}\n                type=\"checkbox\"\n                checked={checked}\n                className={clsx(\n                    !useToggleContentWidth && styles.toggle,\n                    !isToggleVisible && styles.toggleHidden\n                )}\n                onChange={handleItemClick(originalItem)}\n                useContentWidth={useToggleContentWidth}\n            >\n                {optionLabel}\n            </Toggle>\n        );\n    };\n\n    const renderSelectClearAllButton = () => {\n        if (optionCount < 3) {\n            return null;\n        }\n        return (\n            <Button\n                className={styles.selectAllButton}\n                styleType=\"link\"\n                type=\"button\"\n                sizeType=\"small\"\n                onClick={handleSelectClearAll}\n                aria-label={\n                    selected.length\n                        ? \"Clear all selections\"\n                        : `Select all in ${\n                              parentRef.current?.ariaLabel || \"this group\"\n                          }`\n                }\n            >\n                {selected.length ? \"Clear all\" : \"Select all\"}\n            </Button>\n        );\n    };\n\n    return (\n        <FilterItem\n            minimisable={\n                minimisableOptions\n                    ? isMobileToggleMode // set minimisable base on mobile toggle mode\n                        ? !!minimisedHeight\n                        : optionCount > 5\n                    : false // if minimisableOptions is false, never allow minimising\n            }\n            minimisedHeight={minimisedHeight}\n            {...filterItemProps}\n            className={clsx(styles.filterItem, filterItemProps.className)}\n        >\n            {(_, { minimised }) => (\n                <>\n                    {renderSelectClearAllButton()}\n                    <div\n                        role={isNested ? \"tree\" : \"group\"}\n                        aria-label={filterItemProps.title}\n                        aria-multiselectable={true}\n                        ref={parentRef}\n                        className={clsx(\n                            styles.group,\n                            isMobileToggleMode && styles.groupMobileToggleMode\n                        )}\n                    >\n                        {flattenedOptions.map((option, i) =>\n                            isMobileToggleMode\n                                ? renderToggle(option, i, minimised)\n                                : renderCheckbox(option, i, minimised)\n                        )}\n                    </div>\n                </>\n            )}\n        </FilterItem>\n    );\n};\n\nFilterItemCheckbox.displayName = \"Filter.Checkbox\";\n"],"names":["FilterItemCheckbox","_a","selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth","filterItemProps","__rest","mode","useContext","FilterContext","selected","setSelected","useState","minimisedHeight","setMinimisedHeight","lastVisibleElementIndex","setLastVisibleElementIndex","length","parentRef","useRef","lastVisibleElement","isNested","useMemo","hasNestedOptions","item","isMobileToggleMode","flattenedOptions","flattenNestedOptions","value","label","optionCount","handleItemClick","flatOption","find","opt","originalItem","hasChildren","allChildren","getAllDescendantChildren","keyPath","currentlySelectedChildren","filter","child","some","s","getValue","newSelection","forEach","push","selectedIndex","findIndex","splice","handleSelectClearAll","allValues","option","map","handleListItemKeyDown","event","key","preventDefault","handleCheckboxChange","getCheckboxState","checked","indeterminate","getAllDescendantKeyPaths","buildKeyPath","selectedChildren","getLabel","toString","setVisibleItemsWhenMinimised","elementBottom","current","offsetTop","clientHeight","undefined","setVisibleMobileItemsWhenMinimised","useCallback","children","Array","from","lastElementInRow","rowCount","rowTop","i","childTop","useEffect","useResizeDetector","handleWidth","handleHeight","skipOnMount","refreshMode","targetRef","onResize","renderCheckboxIcon","_jsx","Checkbox","className","styles.checkbox","displaySize","onChange","tabIndex","renderSelectClearAllButton","Button","styles.selectAllButton","styleType","type","sizeType","onClick","ariaLabel","FilterItem","Object","assign","minimisable","clsx","styles.filterItem","_","minimised","_jsxs","_Fragment","role","title","ref","styles.group","styles.groupMobileToggleMode","index","optionLabel","optionValue","Toggle","styles.toggle","styles.toggleHidden","useContentWidth","renderToggle","isSelected","isVisible","treeItemAriaAttributes","level","indexInParent","parentSetSize","itemRef","el","style","setProperty","styles.tokens","String","itemClassName","styles.item","styles.itemHidden","styles.itemSelected","itemContent","onKeyDown","renderCheckbox","displayName"],"mappings":"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"}