@lifesg/react-design-system 4.0.0-alpha.6 → 4.0.0-alpha.8

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

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

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

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

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

@@ -1,2 +1,2 @@
-"use strict";require("./file-list-item.styles_o8000f.css");exports.actionContainer="a3rvfgv",exports.box="bddx9rr",exports.contentSection="c1dhzflv",exports.descriptionFileSizeText="divlkvo",exports.desktopErrorMessage="d1gk2zsk",exports.dragHandleIcon="dqb8x5u",exports.errorIcon="eap0p9n",exports.extendedNameSection="elwke9e",exports.fileSizeSection="f14h64yt",exports.fileSizeText="f1wv8fjl",exports.iconButton="ilou5qo",exports.inlineActionContainer="i5ozu70",exports.item="i18pxk0j",exports.itemDescriptionLabel="i1jm950n",exports.itemDescriptionText="i1vgco4e",exports.mobileErrorMessage="m1wh4bod",exports.nameSection="nk38w4a";
+"use strict";require("./file-list-item.styles_kgtfke.css");exports.actionContainer="a3rvfgv",exports.box="bddx9rr",exports.contentSection="c1dhzflv",exports.descriptionFileSizeText="divlkvo",exports.desktopErrorMessage="d1gk2zsk",exports.dragHandleIcon="dqb8x5u",exports.errorIcon="eap0p9n",exports.extendedNameSection="elwke9e",exports.fileSizeSection="f14h64yt",exports.fileSizeText="f1wv8fjl",exports.iconButton="ilou5qo",exports.inlineActionContainer="i5ozu70",exports.item="i18pxk0j",exports.itemDescriptionLabel="i1jm950n",exports.itemDescriptionText="i1vgco4e",exports.mobileErrorMessage="m1wh4bod",exports.nameSection="nk38w4a";
 //# sourceMappingURL=file-list-item.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\n\nexport const item = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n    &[data-item-state=\"disabled\"] {\n        cursor: not-allowed;\n    }\n\n    &[data-item-state=\"sortable\"] {\n        &:hover {\n            cursor: grab;\n        }\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n\n    &[data-item-state=\"sortable-active\"] {\n        cursor: grabbing;\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n`;\n\nexport const dragHandleIcon = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    &[data-drag-handle-state=\"active\"] {\n        color: ${Colour[\"icon-primary\"]};\n    }\n\n    &[data-drag-handle-state=\"disabled\"] {\n        color: ${Colour[\"icon-disabled\"]};\n    }\n`;\n\nexport const box = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-box-state=\"focused\"] {\n        border-color: ${Colour[\"border-focus\"]};\n        box-shadow: ${Shadow[\"xs-focus-strong\"]};\n    }\n\n    &[data-box-state=\"disabled\"] {\n        border-color: ${Colour[\"border-disabled\"]};\n    }\n\n    &[data-box-state=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border-color: ${Colour[\"border-error\"]};\n    }\n\n    &[data-stack-mobile=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: column;\n            align-items: flex-start;\n        }\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    &[data-has-thumbnail=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: row;\n            align-items: center;\n        }\n    }\n`;\n\nexport const nameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const extendedNameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    align-items: flex-start;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    &[data-mobile-visibility=\"hidden\"] {\n        ${MediaQuery.MaxWidth.md} {\n            display: none;\n            visibility: hidden;\n        }\n    }\n\n    &[data-mobile-visibility=\"expand\"] {\n        ${MediaQuery.MaxWidth.md} {\n            width: 100%;\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-8\"]};\n            justify-content: flex-start;\n        }\n    }\n`;\n\nexport const fileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const descriptionFileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const itemDescriptionLabel = css`\n    ${Font[\"form-label\"]}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    color: ${Colour[\"text-subtle\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const itemDescriptionText = css`\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: fit-content;\n    }\n\n    &[data-mobile-layout=\"loading\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            width: 100%;\n        }\n    }\n\n    &[data-mobile-layout=\"editable\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            align-self: flex-end;\n        }\n    }\n`;\n\nexport const inlineActionContainer = css`\n    width: 100%;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-8\"]};\n    }\n`;\n"],"names":[],"mappings":"6HAgN4B,sBAnJZ,iCAmCW,2CAgES,sCAuBJ,kCAzIL,4BAkIL,sCAtDU,kCAWJ,gCAuBH,8BAwFF,wCARW,uBA9NjB,wCAuJgB,uCAOD,sCAuBD,+BAhFP"}
+{"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\n\nexport const item = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n    &[data-item-state=\"disabled\"] {\n        cursor: not-allowed;\n    }\n\n    &[data-item-state=\"sortable\"] {\n        &:hover {\n            cursor: grab;\n        }\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n\n    &[data-item-state=\"sortable-active\"] {\n        cursor: grabbing;\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n`;\n\nexport const dragHandleIcon = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    &[data-drag-handle-state=\"active\"] {\n        color: ${Colour[\"icon-primary\"]};\n    }\n\n    &[data-drag-handle-state=\"disabled\"] {\n        color: ${Colour[\"icon-disabled\"]};\n    }\n`;\n\nexport const box = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-box-state=\"focused\"] {\n        border-color: ${Colour[\"border-focus\"]};\n        box-shadow: ${Shadow[\"xs-focus-strong\"]};\n    }\n\n    &[data-box-state=\"disabled\"] {\n        border-color: ${Colour[\"border-disabled\"]};\n    }\n\n    &[data-box-state=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border-color: ${Colour[\"border-error\"]};\n    }\n\n    &[data-stack-mobile=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: column;\n            align-items: flex-start;\n        }\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    &[data-has-thumbnail=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: row;\n            align-items: center;\n        }\n    }\n`;\n\nexport const nameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const extendedNameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    align-items: flex-start;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    &[data-mobile-visibility=\"hidden\"] {\n        ${MediaQuery.MaxWidth.md} {\n            display: none;\n            visibility: hidden;\n        }\n    }\n\n    &[data-mobile-visibility=\"expand\"] {\n        ${MediaQuery.MaxWidth.md} {\n            width: 100%;\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-8\"]};\n            justify-content: flex-start;\n        }\n    }\n`;\n\nexport const fileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const descriptionFileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const itemDescriptionLabel = css`\n    ${Font[\"form-label\"]}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    color: ${Colour[\"text-subtle\"]};\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const itemDescriptionText = css`\n    margin-top: ${Spacing[\"spacing-4\"]};\n    overflow-wrap: anywhere;\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: fit-content;\n    }\n\n    &[data-mobile-layout=\"loading\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            width: 100%;\n        }\n    }\n\n    &[data-mobile-layout=\"editable\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            align-self: flex-end;\n        }\n    }\n`;\n\nexport const inlineActionContainer = css`\n    width: 100%;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-8\"]};\n    }\n`;\n"],"names":[],"mappings":"6HAiN4B,sBApJZ,iCAmCW,2CAgES,sCAwBJ,kCA1IL,4BAmIL,sCAvDU,kCAWJ,gCAuBH,8BAyFF,wCARW,uBA/NjB,wCAuJgB,uCAOD,sCAwBD,+BAjFP"}

package/{file-upload/file-list-item/file-list-item.styles_o8000f.css → cjs/file-upload/file-list-item/file-list-item.styles_kgtfke.css}

@@ -8,7 +8,7 @@
 .f1wv8fjl{color:var(--fds-colour-text-subtler);}
 .divlkvo{color:var(--fds-colour-text-subtler);margin-top:var(--fds-spacing-16);}
 .i1jm950n{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-form-label-size);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-form-label-lh);letter-spacing:var(--fds-font-form-label-ls);font-weight:var(--fds-font-weight-semibold);color:var(--fds-colour-text-subtle);margin-top:var(--fds-spacing-16);}
-.i1vgco4e{margin-top:var(--fds-spacing-4);}
+.i1vgco4e{margin-top:var(--fds-spacing-4);overflow-wrap:anywhere;}
 .eap0p9n{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
 .d1gk2zsk{color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-4);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-md-max) .d1gk2zsk{display:none;visibility:hidden;}
 .m1wh4bod{color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-md-max) .m1wh4bod{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","sources":["../../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { Typography } from \"../typography\";\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport * as styles from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\n/** Allows user to upload images via drag-and-drop or a native file dialog. */\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    descriptionRequired = true,\n    descriptionLabel,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        const filesToProcess = limitIncomingFiles(files);\n\n        if (!disabled && onChange && filesToProcess.length > 0) {\n            onChange(filesToProcess);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const limitIncomingFiles = (files: File[]) => {\n        if (maxFiles === undefined) {\n            return files;\n        }\n\n        const existingItemsCount = fileItems?.length ?? 0;\n        const remainingSlots = Math.max(maxFiles - existingItemsCount, 0);\n\n        return files.slice(0, remainingSlots);\n    };\n\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Typography.BodyBL>{title}</Typography.BodyBL>;\n        }\n\n        return (\n            <Markup\n                className={styles.markupContainer}\n                baseTextSize=\"body-baseline\"\n            >\n                {title}\n            </Markup>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {description}\n                </Typography.BodyMD>\n            );\n        }\n\n        return (\n            <Markup className={styles.markupContainer} baseTextSize=\"body-md\">\n                {description}\n            </Markup>\n        );\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <div className={styles.textContainer}>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </div>\n                )}\n                {!!warning && (\n                    <Alert className={styles.warningAlert} type=\"warning\">\n                        {warning}\n                    </Alert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    descriptionRequired={descriptionRequired}\n                    descriptionLabel={descriptionLabel}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <Alert className={styles.errorAlert} type=\"error\">\n                        {errorMessage}\n                    </Alert>\n                )}\n                {!readOnly && (\n                    <div className={styles.uploadButtonContainer}>\n                        <Button\n                            type=\"button\"\n                            sizeType=\"small\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                            className={styles.uploadButton}\n                        >\n                            {labels.uploadButton}\n                        </Button>\n                        <Typography.BodyMD\n                            className={styles.uploadButtonText}\n                            weight=\"semibold\"\n                        >\n                            or drop them here\n                        </Typography.BodyMD>\n                    </div>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","descriptionRequired","descriptionLabel","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","limitIncomingFiles","files","undefined","existingItemsCount","_a","length","remainingSlots","Math","max","slice","reachedMaxFiles","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","filesToProcess","current","focus","border","styles.textContainer","Typography","BodyBL","Markup","styles.markupContainer","baseTextSize","BodyMD","styles.description","Alert","styles.warningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","styles.errorAlert","styles.uploadButtonContainer","Button","sizeType","onClick","event","preventDefault","openFileDialog","styles.uploadButton","styles.uploadButtonText","weight"],"mappings":"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"}
+{"version":3,"file":"file-upload.js","sources":["../../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { Typography } from \"../typography\";\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport * as styles from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\n// @catalog\n/** Allows user to upload images via drag-and-drop or a native file dialog. */\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    descriptionRequired = true,\n    descriptionLabel,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        const filesToProcess = limitIncomingFiles(files);\n\n        if (!disabled && onChange && filesToProcess.length > 0) {\n            onChange(filesToProcess);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const limitIncomingFiles = (files: File[]) => {\n        if (maxFiles === undefined) {\n            return files;\n        }\n\n        const existingItemsCount = fileItems?.length ?? 0;\n        const remainingSlots = Math.max(maxFiles - existingItemsCount, 0);\n\n        return files.slice(0, remainingSlots);\n    };\n\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Typography.BodyBL>{title}</Typography.BodyBL>;\n        }\n\n        return (\n            <Markup\n                className={styles.markupContainer}\n                baseTextSize=\"body-baseline\"\n            >\n                {title}\n            </Markup>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {description}\n                </Typography.BodyMD>\n            );\n        }\n\n        return (\n            <Markup className={styles.markupContainer} baseTextSize=\"body-md\">\n                {description}\n            </Markup>\n        );\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <div className={styles.textContainer}>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </div>\n                )}\n                {!!warning && (\n                    <Alert className={styles.warningAlert} type=\"warning\">\n                        {warning}\n                    </Alert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    descriptionRequired={descriptionRequired}\n                    descriptionLabel={descriptionLabel}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <Alert className={styles.errorAlert} type=\"error\">\n                        {errorMessage}\n                    </Alert>\n                )}\n                {!readOnly && (\n                    <div className={styles.uploadButtonContainer}>\n                        <Button\n                            type=\"button\"\n                            sizeType=\"small\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                            className={styles.uploadButton}\n                        >\n                            {labels.uploadButton}\n                        </Button>\n                        <Typography.BodyMD\n                            className={styles.uploadButtonText}\n                            weight=\"semibold\"\n                        >\n                            or drop them here\n                        </Typography.BodyMD>\n                    </div>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","descriptionRequired","descriptionLabel","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","limitIncomingFiles","files","undefined","existingItemsCount","_a","length","remainingSlots","Math","max","slice","reachedMaxFiles","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","filesToProcess","current","focus","border","styles.textContainer","Typography","BodyBL","Markup","styles.markupContainer","baseTextSize","BodyMD","styles.description","Alert","styles.warningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","styles.errorAlert","styles.uploadButtonContainer","Button","sizeType","onClick","event","preventDefault","openFileDialog","styles.uploadButton","styles.uploadButtonText","weight"],"mappings":"2VAgB0B,EACtBA,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,uBAAsB,EACtBC,mBACAC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAAA,OAAwB,MACtCC,EAAcD,EAAAA,OAAoB,OACjCE,EAAUC,GAAeC,aA+C1BC,EAAsBC,UACxB,QAAiBC,IAAbjC,EACA,OAAOgC,EAGX,MAAME,EAAsC,QAAjBC,EAAAtC,aAAS,EAATA,EAAWuC,cAAM,IAAAD,EAAAA,EAAI,EAC1CE,EAAiBC,KAAKC,IAAIvC,EAAWkC,EAAoB,GAE/D,OAAOF,EAAMQ,MAAM,EAAGH,EAAe,EAGnCI,EAAkB,OACbzC,IAAYH,IAAYA,EAAUuC,QAAUpC,EA6CvD,OACI0C,EAAAA,IAACC,EAAAA,kBAAkBC,SAAQ,CAACC,MAAO,CAAEjB,WAAUC,eAAaiB,SACxDC,EAAAA,KAACC,EAAAA,mBAAkB,CACfC,IAAKxB,EACLP,SAvGUc,UAClB,MAAMkB,EAAiBnB,EAAmBC,IAErCvB,GAAYS,GAAYgC,EAAed,OAAS,IACjDlB,EAASgC,GACU,QAAnBf,EAAAR,EAAYwB,eAAO,IAAAhB,GAAAA,EAAEiB,QACzB,EAkGQhD,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACT8C,OAAsB,aAAdzD,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYgC,KAAqBzB,EAAQ8B,SAAA,IAE/ChD,IAASC,IACTgD,EAAAA,KAAA,MAAA,CAAK7C,UAAWoD,EAAAA,cAAoBR,SAAA,CAtD3ChD,EAIgB,iBAAVA,EACA4C,EAAAA,IAACa,EAAAA,WAAWC,OAAM,CAAAV,SAAEhD,IAI3B4C,EAAAA,IAACe,SAAM,CACHvD,UAAWwD,EAAAA,gBACXC,aAAa,yBAEZ7D,IAZE,KAkBNC,EAIsB,iBAAhBA,EAEH2C,EAAAA,IAACa,EAAAA,WAAWK,OAAM,CAAC1D,UAAW2D,cAAkBf,SAC3C/C,IAMT2C,EAAAA,IAACe,SAAM,CAACvD,UAAWwD,EAAAA,gBAAwBC,aAAa,mBACnD5D,IAbE,UAuCAE,GACCyC,EAAAA,IAACoB,EAAAA,MAAK,CAAC5D,UAAW6D,EAAAA,aAAqBC,KAAK,UAASlB,SAChD7C,IAGTyC,EAAAA,IAACuB,EAAAA,SAAQ,CACLhB,IAAKtB,EACL9B,UAAWA,EACXe,kBAAmBA,EACnBC,oBAAqBA,EACrBC,iBAAkBA,EAClBH,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVO,SAAUA,EACVkD,aA9HUC,UAClBhD,IACAA,EAASgD,GACU,QAAnBhC,EAAAR,EAAYwB,eAAO,IAAAhB,GAAAA,EAAEiB,QACzB,EA2HYgB,aA7GUC,IAClBjD,GACAA,EAAOiD,EACX,EA2GYhD,OAxGIiD,IACZjD,GACAA,EAAOiD,EACX,IAuGSvD,GACG2B,EAAAA,IAACoB,EAAAA,MAAK,CAAC5D,UAAWqE,EAAAA,WAAmBP,KAAK,QAAOlB,SAC5C/B,KAGPC,GACE+B,EAAAA,KAAA,MAAA,CAAK7C,UAAWsE,EAAAA,sBAA4B1B,SAAA,CACxCJ,EAAAA,IAAC+B,EAAAA,OAAM,CACHT,KAAK,SACLU,SAAS,QACT9E,UAAU,YACVa,WACMmB,GAAYnB,GAAYgC,IAE9BkC,QAxIpBC,IAEKnE,IACDmE,EAAMC,iBACFpD,EAAY0B,SACZ1B,EAAY0B,QAAQ2B,iBAE5B,EAkIoB5E,UAAW6E,EAAAA,aAAmBjC,SAE7BxB,EAAOC,eAEZmB,EAAAA,IAACa,aAAWK,OAAM,CACd1D,UAAW8E,EAAAA,iBACXC,OAAO,WAAUnC,SAAA,6BAOR"}

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

@@ -1 +1 @@
-{"version":3,"file":"filter-item-checkbox-helpers.js","sources":["../../../../src/filter/addons/filter-item-checkbox-helpers.ts"],"sourcesContent":["import type { FilterItemCheckboxOptionProps } from \"../types\";\nimport type { FlattenedFilterOption } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTIONS FOR NESTED OPTIONS\n// =============================================================================\n\n/**\n * Builds a key path string from an array of keys\n */\nexport const buildKeyPath = (keyPath: string[]): string => {\n    return keyPath.join(\".\");\n};\n\n/**\n * Flattens nested options into a flat array for rendering\n */\nexport const flattenNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    nestedOptions: T[],\n    parentKeyPath: string[] = [],\n    valueExtractor?: (item: T) => string,\n    labelExtractor?: (item: T) => string\n): FlattenedFilterOption<T>[] => {\n    const flattened: FlattenedFilterOption<T>[] = [];\n\n    nestedOptions.forEach((option, index) => {\n        const value: string = valueExtractor\n            ? valueExtractor(option)\n            : (option as any).value;\n        const label: string = labelExtractor\n            ? labelExtractor(option)\n            : (option as any).label;\n        const options: any[] = (option as any).options;\n        const keyPath = [...parentKeyPath, value];\n        const hasChildren = !!(options && options.length > 0);\n\n        flattened.push({\n            originalItem: option,\n            value,\n            label,\n            keyPath,\n            level: parentKeyPath.length,\n            hasChildren,\n            parentKeyPath: parentKeyPath.length > 0 ? parentKeyPath : undefined,\n            indexInParent: index,\n            parentSetSize: nestedOptions.length,\n        });\n\n        // Recursively flatten children\n        if (hasChildren) {\n            flattened.push(\n                ...flattenNestedOptions(\n                    options,\n                    keyPath,\n                    valueExtractor,\n                    labelExtractor\n                )\n            );\n        }\n    });\n\n    return flattened;\n};\n\n/**\n * Checks if a child key path is a descendant of a parent key path\n */\nconst isChild = (parentKeyPath: string[], childKeyPath: string[]): boolean => {\n    if (childKeyPath.length <= parentKeyPath.length) return false;\n\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const childKeyPathString = buildKeyPath(childKeyPath);\n\n    return childKeyPathString.startsWith(parentKeyPathString + \".\");\n};\n\n/**\n * Gets all descendant key paths (children, grandchildren, etc.) for a given parent\n */\nexport const getAllDescendantKeyPaths = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): string[][] => {\n    return flattenedOptions\n        .filter((option) => isChild(parentKeyPath, option.keyPath))\n        .map((option) => option.keyPath);\n};\n\n/**\n * Gets all descendant leaf children (non-parent items)\n */\nexport const getAllDescendantChildren = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): T[] => {\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const children: T[] = [];\n\n    const parentIndex = flattenedOptions.findIndex(\n        (option) => buildKeyPath(option.keyPath) === parentKeyPathString\n    );\n\n    if (parentIndex === -1) return children;\n\n    // Single pass: iterate from parent+1 until we find an item that's not a descendant\n    for (let i = parentIndex + 1; i < flattenedOptions.length; i++) {\n        const option = flattenedOptions[i];\n\n        // Check if this item is a descendant\n        if (isChild(parentKeyPath, option.keyPath)) {\n            // Only include leaf nodes (non-parent items)\n            if (!option.hasChildren) {\n                children.push(option.originalItem as T);\n            }\n        } else {\n            // No more descendants - we can break early\n            break;\n        }\n    }\n\n    return children;\n};\n\n/**\n * Checks if an option has nested options\n */\nexport const hasNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    options: T[],\n    optionsExtractor?: (item: T) => T[]\n): boolean => {\n    return options.some((option: T) => {\n        const nestedOptions: any[] = optionsExtractor\n            ? optionsExtractor(option)\n            : (option as any).options;\n        return nestedOptions && nestedOptions.length > 0;\n    });\n};\n"],"names":["buildKeyPath","keyPath","join","flattenNestedOptions","nestedOptions","parentKeyPath","valueExtractor","labelExtractor","flattened","forEach","option","index","value","label","options","hasChildren","length","push","originalItem","level","undefined","indexInParent","parentSetSize","isChild","childKeyPath","parentKeyPathString","startsWith","flattenedOptions","children","parentIndex","findIndex","i","filter","map","optionsExtractor","some"],"mappings":"aAUO,MAAMA,EAAgBC,GAClBA,EAAQC,KAAK,KAMXC,EAAuB,CAChCC,EACAC,EAA0B,GAC1BC,EACAC,KAEA,MAAMC,EAAwC,GAsC9C,OApCAJ,EAAcK,SAAQ,CAACC,EAAQC,KAC3B,MAAMC,EAAgBN,EAChBA,EAAeI,GACdA,EAAeE,MAChBC,EAAgBN,EAChBA,EAAeG,GACdA,EAAeG,MAChBC,EAAkBJ,EAAeI,QACjCb,EAAU,IAAII,EAAeO,GAC7BG,KAAiBD,GAAWA,EAAQE,OAAS,GAEnDR,EAAUS,KAAK,CACXC,aAAcR,EACdE,QACAC,QACAZ,UACAkB,MAAOd,EAAcW,OACrBD,cACAV,cAAeA,EAAcW,OAAS,EAAIX,OAAgBe,EAC1DC,cAAeV,EACfW,cAAelB,EAAcY,SAI7BD,GACAP,EAAUS,QACHd,EACCW,EACAb,EACAK,EACAC,GAGZ,IAGGC,CAAS,EAMde,EAAU,CAAClB,EAAyBmB,KACtC,GAAIA,EAAaR,QAAUX,EAAcW,OAAQ,OAAO,EAExD,MAAMS,EAAsBzB,EAAaK,GAGzC,OAF2BL,EAAawB,GAEdE,WAAWD,EAAsB,IAAI,yFAkB3B,CACpCE,EACAtB,KAEA,MAAMoB,EAAsBzB,EAAaK,GACnCuB,EAAgB,GAEhBC,EAAcF,EAAiBG,WAChCpB,GAAWV,EAAaU,EAAOT,WAAawB,IAGjD,IAAoB,IAAhBI,EAAoB,OAAOD,EAG/B,IAAK,IAAIG,EAAIF,EAAc,EAAGE,EAAIJ,EAAiBX,OAAQe,IAAK,CAC5D,MAAMrB,EAASiB,EAAiBI,GAGhC,IAAIR,EAAQlB,EAAeK,EAAOT,SAO9B,MALKS,EAAOK,aACRa,EAASX,KAAKP,EAAOQ,aAMjC,CAEA,OAAOU,CAAQ,mCAzCqB,CACpCD,EACAtB,IAEOsB,EACFK,QAAQtB,GAAWa,EAAQlB,EAAeK,EAAOT,WACjDgC,KAAKvB,GAAWA,EAAOT,mCAyCA,CAC5Ba,EACAoB,IAEOpB,EAAQqB,MAAMzB,IACjB,MAAMN,EAAuB8B,EACvBA,EAAiBxB,GAChBA,EAAeI,QACtB,OAAOV,GAAiBA,EAAcY,OAAS,CAAC"}
+{"version":3,"file":"filter-item-checkbox-helpers.js","sources":["../../../../src/filter/addons/filter-item-checkbox-helpers.ts"],"sourcesContent":["import type { FlattenedFilterOption } from \"./internal-types\";\nimport type { FilterItemCheckboxOptionProps } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTIONS FOR NESTED OPTIONS\n// =============================================================================\n\n/**\n * Builds a key path string from an array of keys\n */\nexport const buildKeyPath = (keyPath: string[]): string => {\n    return keyPath.join(\".\");\n};\n\n/**\n * Flattens nested options into a flat array for rendering\n */\nexport const flattenNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    nestedOptions: T[],\n    parentKeyPath: string[] = [],\n    valueExtractor?: (item: T) => string,\n    labelExtractor?: (item: T) => string\n): FlattenedFilterOption<T>[] => {\n    const flattened: FlattenedFilterOption<T>[] = [];\n\n    nestedOptions.forEach((option, index) => {\n        const value: string = valueExtractor\n            ? valueExtractor(option)\n            : (option as any).value;\n        const label: string = labelExtractor\n            ? labelExtractor(option)\n            : (option as any).label;\n        const options: any[] = (option as any).options;\n        const keyPath = [...parentKeyPath, value];\n        const hasChildren = !!(options && options.length > 0);\n\n        flattened.push({\n            originalItem: option,\n            value,\n            label,\n            keyPath,\n            level: parentKeyPath.length,\n            hasChildren,\n            parentKeyPath: parentKeyPath.length > 0 ? parentKeyPath : undefined,\n            indexInParent: index,\n            parentSetSize: nestedOptions.length,\n        });\n\n        // Recursively flatten children\n        if (hasChildren) {\n            flattened.push(\n                ...flattenNestedOptions(\n                    options,\n                    keyPath,\n                    valueExtractor,\n                    labelExtractor\n                )\n            );\n        }\n    });\n\n    return flattened;\n};\n\n/**\n * Checks if a child key path is a descendant of a parent key path\n */\nconst isChild = (parentKeyPath: string[], childKeyPath: string[]): boolean => {\n    if (childKeyPath.length <= parentKeyPath.length) return false;\n\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const childKeyPathString = buildKeyPath(childKeyPath);\n\n    return childKeyPathString.startsWith(parentKeyPathString + \".\");\n};\n\n/**\n * Gets all descendant key paths (children, grandchildren, etc.) for a given parent\n */\nexport const getAllDescendantKeyPaths = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): string[][] => {\n    return flattenedOptions\n        .filter((option) => isChild(parentKeyPath, option.keyPath))\n        .map((option) => option.keyPath);\n};\n\n/**\n * Gets all descendant leaf children (non-parent items)\n */\nexport const getAllDescendantChildren = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): T[] => {\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const children: T[] = [];\n\n    const parentIndex = flattenedOptions.findIndex(\n        (option) => buildKeyPath(option.keyPath) === parentKeyPathString\n    );\n\n    if (parentIndex === -1) return children;\n\n    // Single pass: iterate from parent+1 until we find an item that's not a descendant\n    for (let i = parentIndex + 1; i < flattenedOptions.length; i++) {\n        const option = flattenedOptions[i];\n\n        // Check if this item is a descendant\n        if (isChild(parentKeyPath, option.keyPath)) {\n            // Only include leaf nodes (non-parent items)\n            if (!option.hasChildren) {\n                children.push(option.originalItem as T);\n            }\n        } else {\n            // No more descendants - we can break early\n            break;\n        }\n    }\n\n    return children;\n};\n\n/**\n * Checks if an option has nested options\n */\nexport const hasNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    options: T[],\n    optionsExtractor?: (item: T) => T[]\n): boolean => {\n    return options.some((option: T) => {\n        const nestedOptions: any[] = optionsExtractor\n            ? optionsExtractor(option)\n            : (option as any).options;\n        return nestedOptions && nestedOptions.length > 0;\n    });\n};\n"],"names":["buildKeyPath","keyPath","join","flattenNestedOptions","nestedOptions","parentKeyPath","valueExtractor","labelExtractor","flattened","forEach","option","index","value","label","options","hasChildren","length","push","originalItem","level","undefined","indexInParent","parentSetSize","isChild","childKeyPath","parentKeyPathString","startsWith","flattenedOptions","children","parentIndex","findIndex","i","filter","map","optionsExtractor","some"],"mappings":"aAUO,MAAMA,EAAgBC,GAClBA,EAAQC,KAAK,KAMXC,EAAuB,CAChCC,EACAC,EAA0B,GAC1BC,EACAC,KAEA,MAAMC,EAAwC,GAsC9C,OApCAJ,EAAcK,SAAQ,CAACC,EAAQC,KAC3B,MAAMC,EAAgBN,EAChBA,EAAeI,GACdA,EAAeE,MAChBC,EAAgBN,EAChBA,EAAeG,GACdA,EAAeG,MAChBC,EAAkBJ,EAAeI,QACjCb,EAAU,IAAII,EAAeO,GAC7BG,KAAiBD,GAAWA,EAAQE,OAAS,GAEnDR,EAAUS,KAAK,CACXC,aAAcR,EACdE,QACAC,QACAZ,UACAkB,MAAOd,EAAcW,OACrBD,cACAV,cAAeA,EAAcW,OAAS,EAAIX,OAAgBe,EAC1DC,cAAeV,EACfW,cAAelB,EAAcY,SAI7BD,GACAP,EAAUS,QACHd,EACCW,EACAb,EACAK,EACAC,GAGZ,IAGGC,CAAS,EAMde,EAAU,CAAClB,EAAyBmB,KACtC,GAAIA,EAAaR,QAAUX,EAAcW,OAAQ,OAAO,EAExD,MAAMS,EAAsBzB,EAAaK,GAGzC,OAF2BL,EAAawB,GAEdE,WAAWD,EAAsB,IAAI,yFAkB3B,CACpCE,EACAtB,KAEA,MAAMoB,EAAsBzB,EAAaK,GACnCuB,EAAgB,GAEhBC,EAAcF,EAAiBG,WAChCpB,GAAWV,EAAaU,EAAOT,WAAawB,IAGjD,IAAoB,IAAhBI,EAAoB,OAAOD,EAG/B,IAAK,IAAIG,EAAIF,EAAc,EAAGE,EAAIJ,EAAiBX,OAAQe,IAAK,CAC5D,MAAMrB,EAASiB,EAAiBI,GAGhC,IAAIR,EAAQlB,EAAeK,EAAOT,SAO9B,MALKS,EAAOK,aACRa,EAASX,KAAKP,EAAOQ,aAMjC,CAEA,OAAOU,CAAQ,mCAzCqB,CACpCD,EACAtB,IAEOsB,EACFK,QAAQtB,GAAWa,EAAQlB,EAAeK,EAAOT,WACjDgC,KAAKvB,GAAWA,EAAOT,mCAyCA,CAC5Ba,EACAoB,IAEOpB,EAAQqB,MAAMzB,IACjB,MAAMN,EAAuB8B,EACvBA,EAAiBxB,GAChBA,EAAeI,QACtB,OAAOV,GAAiBA,EAAcY,OAAS,CAAC"}

package/cjs/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 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","isToggleVisible","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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"}
+{"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 * 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 \"./internal-types\";\nimport type {\n    FilterItemCheckboxOptionProps,\n    FilterItemCheckboxProps,\n} 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","isToggleVisible","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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"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./filter-item-checkbox.styles_7degw7.css");exports.checkbox="c13wglju",exports.filterItem="f1m3a5f4",exports.group="g11488am",exports.groupMobileToggleMode="g1nnu0tt",exports.item="i4hhc1a",exports.itemHidden="i7vabkq",exports.itemSelected="i4eh8j6",exports.selectAllButton="sbvftpe",exports.toggle="twhh8xx",exports.toggleHidden="tb2fwos",exports.tokens={item:{level:"--fds-internal-filterItemCheckbox-item-level"}};
+"use strict";require("./filter-item-checkbox.styles_6nbpdl.css");exports.checkbox="c13wglju",exports.filterItem="f1m3a5f4",exports.group="g11488am",exports.groupMobileToggleMode="g1nnu0tt",exports.item="i4hhc1a",exports.itemHidden="i7vabkq",exports.itemSelected="i4eh8j6",exports.selectAllButton="sbvftpe",exports.toggle="twhh8xx",exports.toggleHidden="tb2fwos",exports.tokens={item:{level:"--fds-internal-filterItemCheckbox-item-level"}};
 //# sourceMappingURL=filter-item-checkbox.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-item-checkbox.styles.js","sources":["../../../../src/filter/addons/filter-item-checkbox.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    item: {\n        level: \"--fds-internal-filterItemCheckbox-item-level\",\n    },\n} as const;\n\nexport const filterItem = css`\n    padding: 0 0 ${Spacing[\"spacing-16\"]};\n\n    [data-id=\"content-container\"] {\n        position: relative; // to get the item position relative to this parent\n        padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]} 0;\n\n        ${MediaQuery.MaxWidth.lg} {\n            padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]}\n                ${Spacing[\"spacing-8\"]};\n        }\n    }\n\n    [data-id=\"minimise-button\"] {\n        margin: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-20\"]} 0;\n    }\n`;\n\nexport const group = css`\n    display: flex;\n    flex-direction: column;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: 0;\n    }\n`;\n\nexport const groupMobileToggleMode = css`\n    ${MediaQuery.MaxWidth.lg} {\n        gap: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const item = css`\n    ${tokens.item.level}: 0;\n\n    display: flex;\n    align-items: flex-start;\n\n    position: relative;\n    width: 100%;\n    min-height: 1.5rem;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-12\"]};\n    padding-left: calc(\n        ${Spacing[\"spacing-12\"]} + var(${tokens.item.level}) *\n            ${Spacing[\"spacing-32\"]}\n    );\n\n    cursor: pointer;\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-8\"]};\n        padding-left: calc(\n            ${Spacing[\"spacing-8\"]} + var(${tokens.item.level}) *\n                ${Spacing[\"spacing-32\"]}\n        );\n    }\n`;\n\nexport const itemHidden = css`\n    display: none;\n`;\n\nexport const itemSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const checkbox = css`\n    flex-shrink: 0;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const toggle = css`\n    min-width: 5rem;\n`;\n\nexport const toggleHidden = css`\n    visibility: hidden;\n`;\n\nexport const selectAllButton = css`\n    height: fit-content;\n    padding: 0;\n    margin: ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 0 0 ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n"],"names":["item","level"],"mappings":"+GAiFqB,8BAvEE,yBAkBL,yCAWgB,wBAMjB,6BA4BM,+BAIE,kCAiBG,yBART,+BAIM,yBAtFH,CAClBA,KAAM,CACFC,MAAO"}
+{"version":3,"file":"filter-item-checkbox.styles.js","sources":["../../../../src/filter/addons/filter-item-checkbox.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    item: {\n        level: \"--fds-internal-filterItemCheckbox-item-level\",\n    },\n} as const;\n\nexport const filterItem = css`\n    padding: 0 0 ${Spacing[\"spacing-16\"]};\n\n    [data-id=\"content-container\"] {\n        position: relative; // to get the item position relative to this parent\n        padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]} 0;\n\n        ${MediaQuery.MaxWidth.lg} {\n            padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]}\n                ${Spacing[\"spacing-8\"]};\n        }\n    }\n\n    [data-id=\"minimise-button\"] {\n        margin: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-20\"]} 0;\n    }\n`;\n\nexport const group = css`\n    display: flex;\n    flex-direction: column;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: 0;\n    }\n`;\n\nexport const groupMobileToggleMode = css`\n    ${MediaQuery.MaxWidth.lg} {\n        gap: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const item = css`\n    ${tokens.item.level}: 0;\n\n    display: flex;\n    align-items: flex-start;\n\n    position: relative;\n    width: 100%;\n    min-height: 1.5rem;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-12\"]};\n    padding-left: calc(\n        ${Spacing[\"spacing-12\"]} + var(${tokens.item.level}) *\n            ${Spacing[\"spacing-32\"]}\n    );\n\n    cursor: pointer;\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-8\"]};\n        padding-left: calc(\n            ${Spacing[\"spacing-8\"]} + var(${tokens.item.level}) *\n                ${Spacing[\"spacing-32\"]}\n        );\n    }\n`;\n\nexport const itemHidden = css`\n    display: none;\n`;\n\nexport const itemSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const checkbox = css`\n    flex-shrink: 0;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const toggle = css`\n    min-width: 5rem;\n`;\n\nexport const toggleHidden = css`\n    visibility: hidden;\n`;\n\nexport const selectAllButton = css`\n    height: fit-content;\n    min-height: unset;\n    padding: 0;\n    margin: ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 0 0 ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n"],"names":["item","level"],"mappings":"+GAiFqB,8BAvEE,yBAkBL,yCAWgB,wBAMjB,6BA4BM,+BAIE,kCAiBG,yBART,+BAIM,yBAtFH,CAClBA,KAAM,CACFC,MAAO"}

package/cjs/filter/addons/{filter-item-checkbox.styles_7degw7.css → filter-item-checkbox.styles_6nbpdl.css}

@@ -13,4 +13,4 @@
 .c13wglju{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:var(--fds-spacing-8);}
 .twhh8xx{min-width:5rem;}
 .tb2fwos{visibility:hidden;}
-.sbvftpe{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;margin:var(--fds-spacing-16) 0 var(--fds-spacing-8) var(--fds-spacing-12);}:where(body.fds-breakpoint-lg-max) .sbvftpe{margin:0 0 var(--fds-spacing-16) 0;}}
+.sbvftpe{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;min-height:unset;padding:0;margin:var(--fds-spacing-16) 0 var(--fds-spacing-8) var(--fds-spacing-12);}:where(body.fds-breakpoint-lg-max) .sbvftpe{margin:0 0 var(--fds-spacing-16) 0;}}