@epam/ai-dial-ui-kit 0.5.0-rc.9 → 0.5.0-rc.90

package/dist/src/components/EllipsisTooltip/EllipsisTooltip.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import { DialTooltipContainerOptions } from '../Tooltip/TooltipContext';
 export interface DialEllipsisTooltipProps extends DialTooltipContainerOptions {
     text: string | ReactNode;
-    cssClass?: string;
+    className?: string;
     contentClassName?: string;
     hideTooltip?: boolean;
 }
@@ -11,19 +11,19 @@ export interface DialEllipsisTooltipProps extends DialTooltipContainerOptions {
  * If the text fits, tooltip content is empty and the popup stays hidden.
  *
  * Important: width must be finite for truncation.
- * Consumers can override via `cssClass`.
+ * Consumers can override via `className`.
  *
  * a11y: when truncated, the full text is exposed via `aria-label` on the reference node.
  *
  * @example
  * ```tsx
  * <DialEllipsisTooltip text="Very long message that will be truncated" />
- * <DialEllipsisTooltip text={<span className="font-medium">Custom node</span>} cssClass="max-w-[160px]" />
+ * <DialEllipsisTooltip text={<span className="font-medium">Custom node</span>} className="max-w-[160px]" />
  * <DialEllipsisTooltip text="Tooltip disabled even if truncated" hideTooltip />
  * ```
  *
  * @param text The text or node to display (truncated with ellipsis if too long).
- * @param cssClass Optional additional CSS classes for the text container (e.g. to set width).
+ * @param className Optional additional CSS classes for the text container (e.g. to set width).
  * @param contentClassName Optional additional CSS classes for the tooltip content.
  * @param hideTooltip If true, disables the tooltip even if text is truncated.
  * @param tooltipProps Additional props to pass to the underlying DialTooltipContainer.

package/dist/src/components/EllipsisTooltip/constants.d.ts

@@ -1 +1 @@
-export declare const tooltipContentBaseClasses = "text-primary";
+export declare const tooltipContentBaseClassName = "text-primary";

package/dist/src/components/Field/Field.d.ts

@@ -1,10 +1,9 @@
-import { FC, ReactNode } from 'react';
-export interface DialFieldLabelProps {
+import { FC, LabelHTMLAttributes, ReactNode } from 'react';
+type NativeLabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'defaultValue' | 'onChange'>;
+export interface DialFieldLabelProps extends NativeLabelProps {
     fieldTitle?: string | ReactNode;
-    htmlFor: string;
     optional?: boolean;
     optionalText?: string;
-    cssClass?: string;
     description?: string;
 }
 /**
@@ -16,11 +15,10 @@ export interface DialFieldLabelProps {
  * <DialFieldLabel htmlFor="email-input" fieldTitle="Email Address" />
  * ```
  *
- * @param htmlFor - The ID of the form element this label is associated with
  * @param [fieldTitle] - The title/label text to display for the field
  * @param [optional=false] - Whether the field is optional (displays "(Optional)" text if optionalText is not provided)
  * @param [optionalText="(Optional)"] - Custom text for optional indicator
- * @param [cssClass] - Additional CSS classes to apply to the label element
  * @param [description] - Additional description text, displayed below the label.
  */
 export declare const DialFieldLabel: FC<DialFieldLabelProps>;
+export {};

package/dist/src/components/FileIcon/FileIcon.d.ts

@@ -3,7 +3,7 @@ export interface DialFileIconProps {
     extension: string;
     size?: number;
     stroke?: number;
-    cssClass?: string;
+    className?: string;
     decorative?: boolean;
     label?: string;
     indicator?: ReactNode;
@@ -23,7 +23,7 @@ export interface DialFileIconProps {
  * @param extension - File extension string (with or without leading dot)
  * @param [size=baseIconProps.size] - Icon pixel size
  * @param [stroke=baseIconProps.stroke] - Tabler icon stroke width
- * @param [cssClass] - Additional classes on the container
+ * @param [className] - Additional classes on the container
  * @param [decorative=false] - Whether the icon should be hidden from assistive technologies
  * @param [label] - Accessible label when not decorative; defaults to "<EXT> file icon"
  * @param [indicator] - Optional indicator element to display alongside the icon

package/dist/src/components/FileManager/FileManager.d.ts

@@ -6,18 +6,30 @@ import { DialFileManagerNavigationPanelProps } from './components/FileManagerNav
 import { DialGridProps } from '../Grid/Grid';
 import { DialFileManagerToolbarProps } from './components/FileManagerToolbar/DialFileManagerToolbar';
 import { DialFileManagerBulkActionsToolbarProps } from './components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar';
-import { DialFileManagerActions, DialCopiedItem, DialDeletedItem } from '../../types/file-manager';
+import { DialCopiedItem, DialDeletedItem, DialUploadFileItem } from '../../models/file-manager';
 import { FileManagerGridRow } from './FileManagerContext';
 import { DestinationFolderPopupProps } from './components/DestinationFolderPopup/DestinationFolderPopup';
+import { FileUploadValidationResult, FileUploadValidationMessages } from './hooks/use-file-upload';
+import { DialFileManagerActions, FileManagerColumnKey } from '../../types/file-manager';
+import { FolderCreationValidationMessages } from './hooks/use-folder-creation';
+import { ConflictResolutionPopupProps } from './components/ConflictResolutionPopup/ConflictResolutionPopup';
+import { RenameValidationMessages } from './hooks/use-item-renaming';
 type GridRow = FileManagerGridRow;
-export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolderPopupProps, 'setDestinationFolderPath' | 'destinationFolderPath' | 'addFolderLabel' | 'copyLabel' | 'moveLabel' | 'hiddenFilesSwitcherLabel'>;
+export type DialFileManagerConflictResolutionPopupOptions = Omit<ConflictResolutionPopupProps, 'open' | 'onClose' | 'onReplace' | 'onDuplicate' | 'conflictingFiles'>;
+export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolderPopupProps, 'setDestinationFolderPath' | 'destinationFolderPath' | 'addFolderLabel' | 'copyLabel' | 'moveLabel' | 'hiddenFilesSwitcherLabel' | 'title'> & {
+    getCopyHeader?: (itemsCount: number, itemName?: string) => string;
+    getMoveHeader?: (itemsCount: number, itemName?: string) => string;
+};
 export interface FileTreeOptions extends Omit<DialFoldersTreeProps, 'items' | 'selectedPath' | 'onItemClick'> {
     width?: number;
     title?: string;
-    containerCssClass?: string;
+    containerClassName?: string;
     additionalButtons?: ReactNode;
     collapsed?: boolean;
     onCollapseChange?: (collapsed: boolean) => void;
+    expandedPaths?: Set<string>;
+    loadedPaths?: Set<string>;
+    onExpandedPathsChange?: (expandedPaths: Set<string>) => void;
     actionLabels?: {
         [DialFileManagerActions.Duplicate]?: string;
         [DialFileManagerActions.Copy]?: string;
@@ -39,9 +51,24 @@ export interface GridOptions extends Omit<DialGridProps<GridRow>, 'rowData' | 'c
     filterable?: boolean;
     dateLocale?: Intl.LocalesArgument;
     dateOptions?: Intl.DateTimeFormatOptions;
+    visibleColumns?: FileManagerColumnKey[];
+    actionLabels?: {
+        [DialFileManagerActions.Duplicate]?: string;
+        [DialFileManagerActions.Copy]?: string;
+        [DialFileManagerActions.Rename]?: string;
+        [DialFileManagerActions.Download]?: string;
+        [DialFileManagerActions.Delete]?: string;
+        [DialFileManagerActions.Move]?: string;
+    };
 }
-export type ToolbarOptions = Omit<DialFileManagerToolbarProps, 'areHiddenFilesVisible' | 'onToggleHiddenFiles'>;
-export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection' | 'actions'> & {
+export type ToolbarOptions = Omit<DialFileManagerToolbarProps, 'areHiddenFilesVisible' | 'onToggleHiddenFiles'> & {
+    newActionLabels?: {
+        uploadFiles?: string;
+        newFolder?: string;
+        uploadArchive?: string;
+    };
+};
+export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection' | 'actions' | 'selectedCount'> & {
     actionLabels?: {
         [DialFileManagerActions.Duplicate]?: string;
         [DialFileManagerActions.Copy]?: string;
@@ -57,7 +84,7 @@ export interface CreateFolderValidationMessages {
 }
 export interface DialFileManagerProps {
     path?: string;
-    cssClass?: string;
+    className?: string;
     items?: DialFile[];
     rootItem?: DialRootFolder;
     filesLoading?: boolean;
@@ -70,19 +97,24 @@ export interface DialFileManagerProps {
     bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
     deleteConfirmationOptions?: DeleteConfirmationOptions;
     destinationFolderPopupOptions?: DialFileManagerDestinationFolderPopupOptions;
+    conflictResolutionPopupOptions?: DialFileManagerConflictResolutionPopupOptions;
+    compactViewWidthBreakpoint?: number;
     onPathChange?: (nextPath?: string) => void;
     onTableFileClick?: (file: GridRow) => void;
     onCopyFiles?: (items: DialCopiedItem[], destinationFolder: string) => void;
     onMoveToFiles?: (items: DialCopiedItem[], sourceFolder: string, destinationFolder: string) => void;
     onDeleteFiles?: (items: DialDeletedItem[], sourceFolder: string) => void;
     onDownloadFiles?: (items: DialFile[]) => void;
-    onRename?: (itemPath: string) => void;
-    onRenameSave?: (value: string) => void;
-    onRenameCancel?: () => void;
     onRenameValidate?: (value: string, item: DialFile) => string | null;
-    onCreateFolder?: (folderPath: string, file: File, name: string, bucket?: string) => void;
+    renameValidationMessages?: RenameValidationMessages;
+    onCreateFolder?: (file: DialUploadFileItem, folderPath: string, fileId: string) => void | Promise<void>;
     onCreateFolderValidate?: (name: string, parentFolder: DialFile) => string | null;
-    createFolderValidationMessages?: CreateFolderValidationMessages;
+    folderCreationValidationMessages?: FolderCreationValidationMessages;
+    onUploadFiles?: (files: DialUploadFileItem[], destinationFolder: string) => void;
+    onValidateUpload?: (files: DialUploadFileItem[], existingFiles: DialFile[], destinationFolder: string) => FileUploadValidationResult | Promise<FileUploadValidationResult>;
+    maxFileSize?: number;
+    uploadValidationMessages?: FileUploadValidationMessages;
+    onUploadArchive?: (file: File, name: string, destinationFolder: string) => void;
 }
 /**
  * File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.
@@ -130,7 +162,7 @@ export interface DialFileManagerProps {
  * ```
  *
  * @param [path] - Absolute path of the current location (e.g. "/All files/Design/Icons")
- * @param [cssClass] - Additional classes for the root container
+ * @param [className] - Additional classes for the root container
  * @param [items] - Full hierarchical list of files and folders used by both tree and grid
  * @param [rootItem] - Optional root folder item to represent the top-level container in the tree
  * @param [filesLoading=false] - When true, shows skeleton loading state in the grid
@@ -142,12 +174,18 @@ export interface DialFileManagerProps {
  * @param [bulkActionsToolbarOptions] - Options for the bulk actions toolbar shown when items are selected
  * @param [deleteConfirmationOptions] - Options for the delete confirmation popup
  *
+ * @param [compactViewWidthBreakpoint=DEFAULT_COMPACT_VIEW_WIDTH_BREAKPOINT] - Width (px) below which the component switches to compact view.
+ *
  * @param [onPathChange] - Callback fired when user navigates via tree or breadcrumb
  * @param [onTableFileClick] - Callback fired when a file row is clicked in the grid
  *
  * @param [onCopyFiles] - Callback fired when files copy-paste
  * @param [onMoveToFiles] - Callback fired when files cut-paste or rename
  * @param [onDeleteFiles] - Callback fired when files are deleted
+ *
+ * @param [onDownloadFiles] - Callback fired when files are downloaded
+ *
+ * @param [onUploadArchive] - Callback fired when archive files are uploaded
  */
 export declare const DialFileManager: FC<DialFileManagerProps>;
 /**

package/dist/src/components/FileManager/FileManagerContext.d.ts

@@ -1,6 +1,10 @@
+import { DragEvent, RefObject } from 'react';
 import { DialFile, DialRootFolder, DialFileNodeType } from '../../models/file';
-import { FileTreeOptions, NavigationPanelOptions, GridOptions, ToolbarOptions, BulkActionsToolbarOptions, DialFileManagerProps, DeleteConfirmationOptions, DialFileManagerDestinationFolderPopupOptions } from './FileManager';
-import { DestinationFolderMode } from './hooks/use-file-clipboard';
+import { FileTreeOptions, NavigationPanelOptions, GridOptions, ToolbarOptions, BulkActionsToolbarOptions, DialFileManagerProps, DeleteConfirmationOptions, DialFileManagerDestinationFolderPopupOptions, DialFileManagerConflictResolutionPopupOptions } from './FileManager';
+import { FileUploadValidationMessages } from './hooks/use-file-upload';
+import { DropdownItem } from '../../models/dropdown';
+import { FileConflictDecision } from './components/ConflictResolutionPopup/ConflictResolutionPopup';
+import { DestinationFolderMode } from '../../types/file-manager';
 export interface FileManagerGridRow {
     id: string;
     name: string;
@@ -10,9 +14,10 @@ export interface FileManagerGridRow {
     path: string;
     nodeType: DialFileNodeType;
     extension?: string;
+    isTemporary?: boolean;
 }
 export interface FileManagerContextValue {
-    cssClass?: string;
+    className?: string;
     items: DialFile[];
     rootItem?: DialRootFolder;
     filesLoading?: boolean;
@@ -23,6 +28,8 @@ export interface FileManagerContextValue {
     bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
     deleteConfirmationOptions?: DeleteConfirmationOptions;
     destinationFolderPopupOptions?: DialFileManagerDestinationFolderPopupOptions;
+    conflictResolutionPopupOptions?: DialFileManagerConflictResolutionPopupOptions;
+    compactViewWidthBreakpoint?: number;
     currentPath?: string;
     setCurrentPath: (p?: string) => void;
     searchValue: string;
@@ -40,7 +47,7 @@ export interface FileManagerContextValue {
     currentFolder?: DialFile;
     gridRows: FileManagerGridRow[];
     handleCopyTo: (destinationFolder: string) => void;
-    handleMoveTo: (destinationFolder: string, sourceFolder: string) => void;
+    handleMoveTo: (destinationFolder: string, sourceFolder?: string) => void;
     handleDuplicate: (files: DialFile[]) => void;
     handleOpenDestinationFolderPopup: (mode: DestinationFolderMode) => void;
     handleCloseDestinationFolderPopup: () => void;
@@ -49,10 +56,12 @@ export interface FileManagerContextValue {
     handleSetCopiedFiles: (files: DialFile[]) => void;
     handleSetMovedFiles: (files: DialFile[]) => void;
     renamedPath?: string;
+    renamedItem?: DialFile;
     onRename: (file: string) => void;
     onRenameSave: (value: string) => void;
     onRenameCancel: () => void;
     onRenameValidate: (value: string, item: DialFile) => string | null;
+    getDisplayName: (item: DialFile) => string;
     openDeleteConfirmation: (items: DialFile[], parentFolderPath: string) => void;
     closeDeleteConfirmation: () => void;
     confirmDelete: () => void;
@@ -65,5 +74,39 @@ export interface FileManagerContextValue {
     handleTableRowClick: (row: FileManagerGridRow) => void;
     onTableFileClick?: DialFileManagerProps['onTableFileClick'];
     handleDownloadFiles: (items: DialFile[]) => void;
+    isDragging: boolean;
+    isDraggingOverWindow: boolean;
+    uploadError?: string;
+    handleDragEnter: (e: DragEvent) => void;
+    handleDragLeave: (e: DragEvent) => void;
+    handleDragOver: (e: DragEvent) => void;
+    handleDrop: (e: DragEvent) => void;
+    clearUploadError: () => void;
+    onUploadFiles?: DialFileManagerProps['onUploadFiles'];
+    onValidateUpload?: DialFileManagerProps['onValidateUpload'];
+    maxFileSize?: number;
+    uploadValidationMessages?: FileUploadValidationMessages;
+    newActions: DropdownItem[];
+    isNewButtonVisible: boolean;
+    openFileDialog: () => void;
+    fileInputRef: RefObject<HTMLInputElement | null>;
+    isCreatingFolder: boolean;
+    newFolderTempId: string | null;
+    startFolderCreation: () => void;
+    cancelFolderCreation: () => void;
+    saveFolderCreation: (name: string) => Promise<void>;
+    validateFolderName: (name: string) => string | null;
+    conflictingFiles: DialFile[];
+    conflictResolutionOpen: boolean;
+    closeConflictResolution: () => void;
+    handleConflictReplace: () => void;
+    handleConflictDuplicate: () => void;
+    handleConflictDecideForEach: (decisions: FileConflictDecision[]) => void;
+    uploadConflictingFiles: DialFile[];
+    uploadConflictResolutionOpen: boolean;
+    closeUploadConflictResolution: () => void;
+    handleUploadConflictReplace: () => void;
+    handleUploadConflictDuplicate: () => void;
+    handleUploadConflictDecideForEach: (decisions: FileConflictDecision[]) => void;
 }
 export declare const FileManagerContext: import('react').Context<FileManagerContextValue | undefined>;

package/dist/src/components/FileManager/FileManagerProvider.d.ts

@@ -13,6 +13,7 @@ export interface FileManagerProviderProps extends Omit<DialFileManagerProps, 'ch
  * - clipboard (copy / cut / paste)
  * - delete confirmation state
  * - computed grid rows
+ * - new actions
  *
  */
 export declare const FileManagerProvider: FC<FileManagerProviderProps>;

package/dist/src/components/FileManager/components/ConflictResolutionPopup/ConflictResolutionPopup.d.ts

@@ -0,0 +1,92 @@
+import { FC } from 'react';
+import { DialFile } from '../../../../models/file';
+import { DialFileManagerConflictActions, DialFileManagerConflictStrategies } from '../../../../types/file-manager';
+export interface FileConflictDecision {
+    file: DialFile;
+    action: DialFileManagerConflictActions;
+}
+export interface ConflictResolutionPopupProps {
+    open: boolean;
+    onClose: () => void;
+    onReplace: () => void;
+    onDuplicate: () => void;
+    onDecideForEach?: (decisions: FileConflictDecision[]) => void;
+    conflictingFiles: DialFile[];
+    title?: string;
+    singleFileTitle?: string;
+    multipleFilesTitle?: string;
+    message?: string;
+    actionLabels?: {
+        [DialFileManagerConflictActions.Replace]?: string;
+        [DialFileManagerConflictActions.Duplicate]?: string;
+        [DialFileManagerConflictActions.Cancel]?: string;
+    };
+    strategyLabels?: {
+        [DialFileManagerConflictStrategies.ReplaceAll]?: string;
+        [DialFileManagerConflictStrategies.DuplicateAll]?: string;
+        [DialFileManagerConflictStrategies.DecideForEach]?: string;
+    };
+    confirmLabel?: string;
+    cancelLabel?: string;
+    nameColumnLabel?: string;
+    actionColumnLabel?: string;
+}
+/**
+ * ConflictResolutionPopup
+ *
+ * A popup dialog for resolving file name conflicts during copy or move operations.
+ * Shows different UI based on number of conflicting files:
+ * - Single file: Simple Replace/Duplicate choice with radio buttons
+ * - Multiple files: Replace all / Duplicate all / Decide for each strategy with optional grid
+ *
+ * When "Decide for each" is selected, displays a grid with dropdown selectors for individual
+ * file resolution (Replace/Duplicate/Cancel).
+ *
+ * @example
+ * ```tsx
+ * // Single file conflict
+ * <ConflictResolutionPopup
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   onReplace={handleReplace}
+ *   onDuplicate={handleDuplicate}
+ *   conflictingFiles={[file]}
+ * />
+ *
+ * // Multiple files with custom labels
+ * <ConflictResolutionPopup
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   onReplace={handleReplaceAll}
+ *   onDuplicate={handleDuplicateAll}
+ *   onDecideForEach={handleDecisions}
+ *   conflictingFiles={files}
+ *   actionLabels={{
+ *     [DialFileManagerConflictActions.Replace]: 'Overwrite',
+ *     [DialFileManagerConflictActions.Duplicate]: 'Keep Both',
+ *   }}
+ *   strategyLabels={{
+ *     [DialFileManagerConflictStrategies.ReplaceAll]: 'Overwrite All',
+ *     [DialFileManagerConflictStrategies.DuplicateAll]: 'Keep All',
+ *   }}
+ * />
+ * ```
+ *
+ * @param open - Whether the popup is visible
+ * @param onClose - Callback fired when the popup is closed
+ * @param onReplace - Callback fired when Replace/Replace All is confirmed
+ * @param onDuplicate - Callback fired when Duplicate/Duplicate All is confirmed
+ * @param [onDecideForEach] - Callback fired when individual decisions are confirmed; receives array of decisions
+ * @param conflictingFiles - Array of files with name conflicts
+ * @param [title] - Custom title (overrides singleFileTitle and multipleFilesTitle)
+ * @param [singleFileTitle="Replace Or Duplicate Item"] - Title for single file conflicts
+ * @param [multipleFilesTitle="Replace Or Duplicate Items"] - Title for multiple file conflicts
+ * @param [message] - Custom message (overrides default conflict description)
+ * @param [actionLabels] - Custom labels for conflict actions (Replace/Duplicate/Cancel)
+ * @param [strategyLabels] - Custom labels for conflict strategies (Replace all/Duplicate all/Decide for each)
+ * @param [confirmLabel="Confirm"] - Label for the confirm button
+ * @param [cancelLabel="Cancel"] - Label for the cancel button
+ * @param [nameColumnLabel="Name"] - Label for the file name column in the grid
+ * @param [actionColumnLabel="Action"] - Label for the action column in the grid
+ */
+export declare const ConflictResolutionPopup: FC<ConflictResolutionPopupProps>;

package/dist/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.d.ts

@@ -11,6 +11,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
     addFolderLabel?: string;
     hiddenFilesSwitcherLabel?: string;
     mode?: 'copy' | 'move';
+    title?: string;
 }
 /**
  * DestinationFolderPopup
@@ -26,6 +27,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
  *   onClose={handleClose}
  *   onConfirm={handleConfirm}
  *   mode="copy"
+ *   title="Copy 3 files"
  *   items={files}
  *   rootItem={rootFolder}
  *   path={currentPath}
@@ -36,11 +38,12 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
  * @param open - Whether the popup is visible
  * @param onClose - Callback fired when the popup is closed
  * @param [onConfirm] - Callback fired when the confirm button is clicked
- * @param [mode="copy"] - Operation mode: 'copy' or 'move'
+ * @param [mode=DestinationFolderMode.Copy] - Operation mode: 'copy' or 'move'
  * @param [copyLabel="Copy"] - Label for the copy button
  * @param [moveLabel="Move"] - Label for the move button
  * @param [addFolderLabel="Add folder"] - Label for the add folder button
  * @param [hiddenFilesSwitcherLabel="Show hidden files"] - Label for the hidden files toggle
+ * @param [title] - Custom title for the popup header
  * @param items - Array of files to display in the File Manager
  * @param rootItem - Root folder item
  * @param path - Current path in the File Manager

package/dist/src/components/FileManager/components/DialFileManagerItemSummaryCell/DialFileManagerItemSummaryCell.d.ts

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import { DialFileNodeType } from '../../../../models/file';
+interface DialFileManagerItemSummaryCellProps {
+    id: string;
+    name: string;
+    nodeType: DialFileNodeType;
+    size?: string;
+    updatedAt?: string;
+    dateLocale?: Intl.LocalesArgument;
+    dateOptions?: Intl.DateTimeFormatOptions;
+}
+/**
+ * Renders file or folder details inside the File Manager list/grid item.
+ *
+ * Displays the item name with an icon (via `DialFileManagerItemName`),
+ * followed by a small details row:
+ *
+ * - File size (e.g., `"15 KB"`)
+ * - A separator dot
+ * - Formatted update date (via `DialDateCellRenderer`)
+ *
+ * The component automatically determines whether to show a **file** or **folder**
+ * icon based on `nodeType`.
+ *
+ * ### Example
+ * ```tsx
+ * <DialFileManagerItemSummaryCell
+ *   id="42"
+ *   name="Report.pdf"
+ *   nodeType={DialFileNodeType.FILE}
+ *   size="220 KB"
+ *   updatedAt="2025-07-20T00:00:00Z"
+ *   dateLocale="en-US"
+ *   dateOptions={{ timeZone: 'UTC' }}
+ * />
+ *
+ * <DialFileManagerItemSummaryCell
+ *   id="folder-1"
+ *   name="Projects"
+ *   nodeType={DialFileNodeType.FOLDER}
+ *   size="—"
+ *   updatedAt={undefined}
+ * />
+ * ```
+ *
+ * @param id - Unique identifier passed to `DialFileManagerItemName` as `elementId`.
+ * @param name - File or folder display name.
+ * @param nodeType - Determines whether the item renders as a **File** or **Folder**.
+ * @param size - Human-readable file size (e.g., `"15 KB"`). May be `"—"` or omitted.
+ * @param updatedAt - Date or timestamp passed to `DialDateCellRenderer`. If invalid or missing, renders `"—"`.
+ * @param dateLocale - Optional locale override for date formatting (e.g., `"fr-FR"`).
+ * @param dateOptions - Optional `Intl.DateTimeFormat` configuration (e.g., `{ timeZone: 'UTC' }`).
+ */
+export declare const DialFileManagerItemSummaryCell: FC<DialFileManagerItemSummaryCellProps>;
+export {};

package/dist/src/components/FileManager/components/DialFileManagerItemSummaryCell/DialFileManagerItemSummaryCell.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/FileManager/components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar.d.ts

@@ -4,9 +4,10 @@ export interface DialActionDropdownItem extends DropdownItem {
     title: string;
 }
 export interface DialFileManagerBulkActionsToolbarProps {
-    selectionLabel: string;
+    getSelectionLabel: (selectedCount: number) => string;
     onClearSelection: () => void;
     actions: DialActionDropdownItem[];
+    selectedCount: number;
 }
 /**
  * A responsive toolbar component displayed when files or items are selected
@@ -33,7 +34,7 @@ export interface DialFileManagerBulkActionsToolbarProps {
  * @example
  * ```tsx
  * <DialFileManagerSelectionToolbar
- *   selectionLabel="3 files selected"
+ *   getSelectionLabel={(count) => `${count} files selected`}
  *   onClearSelection={() => console.log('Cleared')}
  *   actions={[
  *     { key: 'download', title: 'Download', icon: <IconDownload />, onClick: () => {} },
@@ -43,10 +44,11 @@ export interface DialFileManagerBulkActionsToolbarProps {
  * ```
  *
  * @param {object} props
- * @param {string} props.selectionLabel - Label showing current selection status (e.g., "3 files selected").
+ * @param {() => string} props.getSelectionLabel - Function to get the label showing current selection status (e.g., "3 files selected").
  * @param {() => void} props.onClearSelection - Callback invoked when the clear selection button is clicked.
  * @param {DialActionDropdownItem[]} props.actions - List of available toolbar actions.
  *   Each action defines a title, icon, key, and optional click handler.
+ * @param {number} [props.selectedCount] - Count of currently selected items.
  *
  * @returns {JSX.Element} A responsive toolbar that adjusts visible actions based on available width.
  */

package/dist/src/components/FileManager/components/FileManagerItemIcon/FileManagerItemIcon.d.ts

@@ -38,7 +38,7 @@ export interface DialFileManagerItemIconProps extends Omit<DialFileIconProps, 'e
  * @param {boolean} [props.loading=false] - Whether to display the loading state.
  * @param {number} [props.size] - Optional icon size override.
  * @param {number} [props.stroke] - Optional icon stroke width override.
- * @param {string} [props.cssClass] - Optional CSS class for styling.
+ * @param {string} [props.className] - Optional CSS class for styling.
  * @param {boolean} [props.decorative] - Whether the icon is decorative (for accessibility).
  * @param {string} [props.label] - Accessible label for screen readers.
  * @param {ReactNode} [props.indicator] - Optional indicator to display over the icon.

package/dist/src/components/FileManager/components/FileManagerItemName/FileManagerItemName.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { DialFileManagerItemNameInputProps } from '../FileManagerItemNameInput/FileManagerItemNameInput';
 import { DialItemType } from '../../../../types/item';
 export interface DialFileManagerItemNameProps extends DialFileManagerItemNameInputProps {
@@ -8,6 +8,7 @@ export interface DialFileManagerItemNameProps extends DialFileManagerItemNameInp
     editing?: boolean;
     loading?: boolean;
     shared?: boolean;
+    details?: ReactNode;
     validate?: (value: string) => string | null;
     onSave?: (value: string) => void;
     onCancel?: () => void;

package/dist/src/components/FileManager/components/FileManagerItemNameInput/FileManagerItemNameInput.d.ts

@@ -8,11 +8,12 @@ export interface DialFileManagerItemNameInputProps {
     elementId: string;
     iconSize?: number;
     iconStroke?: number;
-    iconCssClass?: string;
+    iconClassName?: string;
     iconLabel?: string;
     iconIndicator?: ReactNode;
     inputInvalid?: boolean;
     inputInvalidMessage?: string;
+    inputContainerClassName?: string;
     inputIconAfter?: ReactNode;
     inputRef?: Ref<HTMLInputElement>;
     onChange?: (value?: string) => void;
@@ -53,12 +54,13 @@ export interface DialFileManagerItemNameInputProps {
  * @param {boolean} [props.loading=false] - Whether the icon is loading.
  * @param {number} [props.iconSize] - Optional size override for the icon.
  * @param {number} [props.iconStroke] - Optional stroke width override for the icon.
- * @param {string} [props.iconCssClass] - Optional CSS class for the icon.
+ * @param {string} [props.iconClassName] - Optional CSS class for the icon.
  * @param {string} [props.iconLabel] - Optional accessible label for the icon.
  * @param {ReactNode} [props.iconIndicator] - Optional indicator to render over the icon.
  * @param {boolean} [props.inputInvalid=false] - Marks the input as invalid.
  * @param {string} [props.inputInvalidMessage] - Tooltip message shown when invalid.
  * @param {ReactNode} [props.inputIconAfter] - Optional icon shown after the input (defaults to an error icon).
+ * @param {string} [props.inputContainerClassName] - Additional CSS classes applied to the input container.
  * @param {Ref<HTMLInputElement>} [props.inputRef] - Ref to access the underlying input element.
  * @param {(value: string) => void} [props.onChange] - Callback fired when input value changes.
  */

package/dist/src/components/FileManager/components/FileManagerNavigationPanel/FileManagerNavigationPanel.d.ts

@@ -1,11 +1,11 @@
 import { FC } from 'react';
 import { DialBreadcrumbProps } from '../../../Breadcrumb/Breadcrumb';
 import { DialSearchProps } from '../../../Search/Search';
-export interface DialFileManagerNavigationPanelProps extends Omit<DialBreadcrumbProps, 'pathItems' | 'children' | 'cssClass' | 'separator'>, Omit<DialSearchProps, 'onChange' | 'elementId' | 'value' | 'cssClass' | 'containerCssClass' | 'placeholder' | 'size'> {
+export interface DialFileManagerNavigationPanelProps extends Omit<DialBreadcrumbProps, 'pathItems' | 'children' | 'className' | 'separator'>, Omit<DialSearchProps, 'onChange' | 'elementId' | 'value' | 'className' | 'containerClassName' | 'placeholder' | 'size'> {
     path?: string;
     makeHref?: (segments: string[], index: number) => string | undefined;
-    cssClass?: string;
-    breadcrumbCssClass?: string;
+    className?: string;
+    breadcrumbClassName?: string;
     onItemClick?: (href?: string) => void;
     rootItemPath?: string;
     rootItemLabel?: string;
@@ -13,8 +13,9 @@ export interface DialFileManagerNavigationPanelProps extends Omit<DialBreadcrumb
     value?: string | number | null;
     elementId?: string;
     onSearchChange?: (value: string) => void;
-    searchCssClass?: string;
-    searchContainerCssClass?: string;
+    searchClassName?: string;
+    searchContainerClassName?: string;
+    isCompactView?: boolean;
 }
 /**
  * FileManagerNavigationPanel
@@ -38,23 +39,24 @@ export interface DialFileManagerNavigationPanelProps extends Omit<DialBreadcrumb
  * // With clickable parents
  * <FileManagerNavigationPanel
  *   path="Org/Design/Assets"
- *   makeHref={(segments, i) => '#' + '/' + segments.slice(0, i + 1).join('/')}
+ *   makeHref={(segments, i) => '#' + segments.slice(0, i + 1).join('/')}
  * />
  * ```
  *
  * @param [ariaLabel="Breadcrumb"] - Aria label for the breadcrumb `<nav>`
- * @param [titleCssClass] - Extra classes for breadcrumb titles
+ * @param [titleClassName] - Extra classes for breadcrumb titles
  * @param [path] - A full path string that will be split into breadcrumb items
  * @param [makeHref] - Factory to create hrefs for segments
  * @param [onItemClick] - Callback fired when a breadcrumb item is clicked
- * @param [cssClass] - Additional classes for the panel container
- * @param [breadcrumbCssClass] - Classes forwarded to inner `DialBreadcrumb`
+ * @param [className] - Additional classes for the panel container
+ * @param [breadcrumbClassName] - ClassName forwarded to inner `DialBreadcrumb`
  * @param [searchable=true] - Whether to render the search control
  * @param [value] - Controlled value for the search input (parent-managed)
  * @param [elementId="fm-search"] - DOM id for the internal DialSearch input
  * @param [size=SearchSize.Base] - Size of the search input (from DialSearchProps)
  * @param [onSearchChange] - Callback fired when the search value changes
- * @param [searchCssClass] - Extra classes for the search input element
- * @param [searchContainerCssClass] - Extra classes for the search container
+ * @param [searchClassName] - Extra classes for the search input element
+ * @param [searchContainerClassName] - Extra classes for the search container
+ * @param [isCompactView=false] - Whether the component should render in compact mode
  */
 export declare const DialFileManagerNavigationPanel: FC<DialFileManagerNavigationPanelProps>;

package/dist/src/components/FileManager/components/FileManagerNavigationPanel/constants.d.ts

@@ -1,3 +1,3 @@
-export declare const panelBaseClasses = "w-full h-[12] flex items-center justify-between gap-4";
-export declare const breadcrumbContainerClasses = "min-w-0 h-[38px] flex-1 overflow-hidden bg-layer-3 px-3 flex items-center rounded";
-export declare const searchContainerClasses = "w-[260px]";
+export declare const panelBaseClassName = "w-full flex items-center justify-between gap-4";
+export declare const breadcrumbContainerClassName = "min-w-0 h-[38px] flex-1 overflow-hidden bg-layer-3 px-3 flex items-center rounded";
+export declare const searchContainerWrapperClassName = "w-[260px]";