@epam/ai-dial-ui-kit 0.5.0-rc.7 → 0.5.0-rc.71

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

@@ -10,10 +10,10 @@ export interface DialFileManagerToolbarProps {
     hiddenFilesSwitcherLabel?: string;
     showHiddenFilesLabel?: string;
     hideHiddenFilesLabel?: string;
-    isCreateButtonVisible?: boolean;
-    createButtonVariant?: ButtonVariant;
-    createButtonDropdownItems?: DropdownItem[];
-    createButtonLabel?: string;
+    isNewButtonVisible?: boolean;
+    newButtonVariant?: ButtonVariant;
+    newButtonDropdownItems?: DropdownItem[];
+    newButtonLabel?: string;
     onTabChange?: (id: DialFileManagerTabs) => void;
     onToggleHiddenFiles?: (value: boolean) => void;
 }
@@ -24,7 +24,7 @@ export interface DialFileManagerToolbarProps {
  * - Tab navigation for switching between file sections or views
  * - A toggle for showing or hiding hidden files
  * - A refresh button for reloading content
- * - An optional "Create" button or dropdown for creating new files or folders
+ * - An optional "New" button or dropdown for creating new files or folders
  *
  * @example
  * ```tsx
@@ -40,8 +40,8 @@ export interface DialFileManagerToolbarProps {
  *   onTabChange={(id) => console.log('Switched to tab:', id)}
  *   onToggleHiddenFiles={(visible) => console.log('Hidden files visible:', visible)}
  *   onRefresh={() => console.log('Refreshed')}
- *   isCreateButtonVisible
- *   createButtonDropdownItems={[
+ *   isNewButtonVisible
+ *   newButtonDropdownItems={[
  *     { key: 'folder', label: 'New Folder' },
  *     { key: 'file', label: 'Upload File' },
  *   ]}
@@ -56,16 +56,16 @@ export interface DialFileManagerToolbarProps {
  * @param [hideHiddenFilesLabel='Hide hidden'] - Label shown when hidden files are visible.
  * @param [onTabChange] - Callback fired when the user switches between tabs. Receives the selected tab ID.
  * @param [onToggleHiddenFiles] - Callback fired when the hidden files visibility is toggled. Receives the new visibility state.
- * @param [isCreateButtonVisible] - Whether the "Create" button or dropdown should be displayed.
- * @param [createButtonVariant=ButtonVariant.Secondary] - Visual style variant for the create button.
- * @param [createButtonDropdownItems=[]] - Dropdown items available under the create button. If empty, a single create button is shown instead.
- * @param [createButtonLabel='Create'] - Label text for the create button.
+ * @param [isNewButtonVisible] - Whether the "New" button or dropdown should be displayed.
+ * @param [newButtonVariant=ButtonVariant.Secondary] - Visual style variant for the new button.
+ * @param [newButtonDropdownItems=[]] - Dropdown items available under the new button. If empty, a single new button is shown instead.
+ * @param [newButtonLabel='New'] - Label text for the new button.
  *
  * @remarks
  * - Tabs are rendered via `DialTabs`.
  * - The hidden files toggle uses `DialSwitch`.
- * - The refresh and create actions use `DialButton` or dropdown variants for consistency.
+ * - The refresh and new actions use `DialButton` or dropdown variants for consistency.
  * - The toolbar automatically adapts its layout for different screen sizes.
- * - When `createButtonDropdownItems` is provided, the create button becomes a dropdown menu.
+ * - When `newButtonDropdownItems` is provided, the new button becomes a dropdown menu.
  */
 export declare const DialFileManagerToolbar: FC<DialFileManagerToolbarProps>;

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

@@ -5,6 +5,7 @@ export interface DialFoldersTreeProps {
     items: DialFile[];
     expandedPaths?: Set<string>;
     loadingPaths?: Set<string>;
+    loadedPaths?: Set<string>;
     selectedPath?: string;
     renamedPath?: string;
     showFiles?: boolean;
@@ -17,6 +18,7 @@ export interface DialFoldersTreeProps {
     onRenameValidate?: (value: string, item: DialFile) => string | null;
     getContextMenuItems?: (item: DialFile) => DropdownItem[];
     areHiddenFilesVisible?: boolean;
+    onExpandedPathsChange?: (expandedPaths: Set<string>) => void;
 }
 /**
  * DialFoldersTree — A hierarchical folder tree component with nested expand/collapse support, selection highlighting,
@@ -89,6 +91,7 @@ export interface DialFoldersTreeProps {
  * @param [items] - Array of folder and file nodes to display in the tree.
  * @param [expandedPaths] - Set of folder paths that should be expanded.
  * @param [loadingPaths] - Set of folder paths currently loading (shows spinner or placeholder).
+ * @param [loadedPaths] - Set of folder paths that have loaded.
  * @param [selectedPath] - Path representing the currently selected folder or file.
  * @param [renamedPath] - Path of the folder or file currently being edited.
  * @param [showFiles=false] - Whether to show files in addition to folders.

package/dist/src/components/FileManager/components/FoldersTree/hooks/use-expanded-paths.d.ts

@@ -0,0 +1,13 @@
+export interface UseExpandedPathsOptions {
+    expandedPaths?: Set<string>;
+    onExpandedPathsChange?: (expandedPaths: Set<string>) => void;
+}
+export declare const useExpandedPaths: (options?: UseExpandedPathsOptions) => {
+    expandedPaths: Set<string>;
+    setExpandedPaths: (newSet: Set<string>) => void;
+    togglePath: (path: string) => void;
+    collapseAll: () => void;
+    expandPath: (path: string) => void;
+    collapsePath: (path: string) => void;
+    isControlled: boolean;
+};

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

@@ -1,9 +1,17 @@
-export declare const containerBaseClasses = "w-full h-full grid grid-rows-[auto_1fr] gap-5 p-6 overflow-hidden min-w-0 bg-layer-2";
-export declare const toolbarBaseClasses = "w-full text-secondary flex items-center gap-2";
-export declare const mainGridClasses = "flex min-h-0 min-w-0 h-full gap-4 overflow-hidden";
-export declare const contentGridClasses = "flex flex-col flex-1 min-h-0 min-w-0 h-full gap-4";
-export declare const contentHeaderClasses = "items-center";
-export declare const treeBaseClasses = "w-full h-full rounded bg-layer-3 text-secondary overflow-auto min-w-0";
-export declare const gridBaseClasses = "flex-1 w-full rounded text-secondary overflow-auto min-h-0 min-w-0";
+export declare const containerBaseClassName = "w-full h-full grid grid-rows-[auto_1fr] gap-5 p-6 overflow-hidden min-w-0 bg-layer-2";
+export declare const toolbarBaseClassName = "w-full text-secondary flex items-center gap-2";
+export declare const mainGridClassName = "flex min-h-0 min-w-0 h-full gap-4 overflow-hidden";
+export declare const contentGridClassName = "flex flex-col flex-1 min-h-0 min-w-0 h-full gap-4";
+export declare const contentHeaderClassName = "items-center";
+export declare const treeBaseClassName = "w-full h-full rounded bg-layer-3 text-secondary overflow-auto min-w-0";
+export declare const gridBaseClassName = "flex-1 w-full rounded text-secondary overflow-auto min-h-0 min-w-0";
 export declare const sidebarWidth = 280;
 export declare const sidebarTitleDefault = "Files";
+export declare const BASE_FILE_MANAGER_ICON_SIZE = 20;
+export declare const FILES_DATA_TRANSFER_TYPE = "Files";
+export declare const FOLDER_PLACEHOLDER_FILE_NAME = ".dial_folder";
+export declare const FOLDERS_TREE_PANEL_MIN_WIDTH = 280;
+export declare const FOLDERS_TREE_PANEL_MAX_WIDTH = 460;
+export declare const COMPACT_VIEW_HEADER_HEIGHT = 44;
+export declare const COMPACT_VIEW_FILE_ROW_HEIGHT = 56;
+export declare const DEFAULT_COMPACT_VIEW_WIDTH_BREAKPOINT = 800;

package/dist/src/components/FileManager/hooks/__tests__/use-conflict-resolution.spec.d.ts

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

package/dist/src/components/FileManager/hooks/__tests__/use-file-upload.spec.d.ts

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

package/dist/src/components/FileManager/hooks/use-bulk-actions.d.ts

@@ -0,0 +1,22 @@
+import { DialFile } from '../../../models/file';
+import { DialFileManagerActions } from '../../../types/file-manager';
+import { DialActionDropdownItem } from '../components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar';
+export interface UseBulkActionsProps {
+    selectedFiles: Map<string, DialFile>;
+    actionLabels?: {
+        [DialFileManagerActions.Duplicate]?: string;
+        [DialFileManagerActions.Copy]?: string;
+        [DialFileManagerActions.Rename]?: string;
+        [DialFileManagerActions.Download]?: string;
+        [DialFileManagerActions.Delete]?: string;
+        [DialFileManagerActions.Move]?: string;
+    };
+    onDuplicate: (files: DialFile[]) => void;
+    onCopy: (files: DialFile[]) => void;
+    onMove: (files: DialFile[]) => void;
+    onDownload: (files: DialFile[]) => void;
+    onRename: (filePath: string) => void;
+    onDelete: (files: DialFile[], parentFolderPath: string) => void;
+    getCurrentFolderPath: () => string;
+}
+export declare const useBulkActions: ({ selectedFiles, actionLabels, onDuplicate, onCopy, onMove, onDownload, onDelete, getCurrentFolderPath, }: UseBulkActionsProps) => DialActionDropdownItem[];

package/dist/src/components/FileManager/hooks/use-conflict-resolution.d.ts

@@ -0,0 +1,26 @@
+import { DialFile } from '../../../models/file';
+import { DialCopiedItem } from '../../../models/file-manager';
+import { FileConflictDecision } from '../components/ConflictResolutionPopup/ConflictResolutionPopup';
+import { DialFileManagerConflictActions } from '../../../types/file-manager';
+export interface UseConflictResolutionOptions {
+    getDestinationFiles: (path: string) => DialFile[];
+    onResolve?: (items: DialCopiedItem[], destinationFolder: string) => void;
+}
+export interface ConflictResolutionResult {
+    hasConflicts: boolean;
+    conflicts: DialFile[];
+}
+export declare const useConflictResolution: ({ getDestinationFiles, onResolve, }: UseConflictResolutionOptions) => {
+    conflictingFiles: DialFile[];
+    conflictResolutionOpen: boolean;
+    hasActiveConflictRef: import('react').RefObject<boolean>;
+    checkForConflicts: (destinationFolder: string, files: DialFile[]) => ConflictResolutionResult;
+    startConflictResolution: (destinationFolder: string, files: DialFile[], metadata?: Record<string, unknown>) => ConflictResolutionResult;
+    resolveConflictsWithStrategy: (destinationFolder: string, files: DialFile[], overwrite: boolean, metadata?: Record<string, unknown>) => DialCopiedItem[];
+    resolveConflictsWithDecisions: (destinationFolder: string, files: DialFile[], decisions: Map<string, DialFileManagerConflictActions>, metadata?: Record<string, unknown>) => DialCopiedItem[];
+    openConflictResolution: (files: DialFile[]) => void;
+    closeConflictResolution: () => void;
+    handleReplaceAll: () => void;
+    handleDuplicateAll: () => void;
+    handleDecideForEach: (decisions: FileConflictDecision[]) => void;
+};

package/dist/src/components/FileManager/hooks/use-file-clipboard.d.ts

@@ -1,13 +1,19 @@
 import { DialFile } from '../../../models/file';
-import { DialCopiedItem } from '../../../types/file-manager';
+import { DialCopiedItem } from '../../../models/file-manager';
+import { FileConflictDecision } from '../components/ConflictResolutionPopup/ConflictResolutionPopup';
+import { DestinationFolderMode } from '../../../types/file-manager';
 export interface UseFileClipboardOptions {
     getDestinationFiles: (path: string) => DialFile[];
     getSourceFiles: () => DialFile[];
     onCopyFiles?: (items: DialCopiedItem[], destinationFolder: string) => void;
     onMoveToFiles?: (items: DialCopiedItem[], sourceFolder: string, destinationFolder: string) => void;
+    onCopySuccess?: () => void;
+    onMoveSuccess?: () => void;
+    onDuplicateSuccess?: () => void;
+    getCopyHeader?: (itemsCount: number, itemName?: string) => string;
+    getMoveHeader?: (itemsCount: number, itemName?: string) => string;
 }
-export type DestinationFolderMode = 'copy' | 'move';
-export declare const useFileClipboard: ({ getDestinationFiles, onCopyFiles, onMoveToFiles, }: UseFileClipboardOptions) => {
+export declare const useFileClipboard: ({ getDestinationFiles, onCopyFiles, onMoveToFiles, onCopySuccess, onMoveSuccess, onDuplicateSuccess, getCopyHeader, getMoveHeader, }: UseFileClipboardOptions) => {
     handleDuplicate: (files: DialFile[]) => void;
     handleCloseDestinationFolderPopup: () => void;
     handleOpenDestinationFolderPopup: (mode: DestinationFolderMode) => void;
@@ -15,7 +21,15 @@ export declare const useFileClipboard: ({ getDestinationFiles, onCopyFiles, onMo
     handleMoveTo: (destinationFolder: string, sourceFolder: string) => void;
     openDestinationFolderPopup: boolean;
     destinationFolderMode: DestinationFolderMode;
+    destinationFolderTitle: string | undefined;
     handleSetCopiedFiles: (files: DialFile[]) => void;
     handleSetMovedFiles: (files: DialFile[]) => void;
     clearState: () => void;
+    conflictingFiles: DialFile[];
+    conflictResolutionOpen: boolean;
+    openConflictResolution: (files: DialFile[]) => void;
+    closeConflictResolution: () => void;
+    handleConflictReplace: () => void;
+    handleConflictDuplicate: () => void;
+    handleConflictDecideForEach: (decisions: FileConflictDecision[]) => void;
 };

package/dist/src/components/FileManager/hooks/use-file-delete.d.ts

@@ -1,9 +1,10 @@
 import { DialFile } from '../../../models/file';
-import { DialDeletedItem } from '../../../types/file-manager';
+import { DialDeletedItem } from '../../../models/file-manager';
 export interface UseFileDeleteOptions {
     onDeleteFiles?: (items: DialDeletedItem[], sourceFolder: string) => void;
+    onDeleteSuccess?: () => void;
 }
-export declare const useFileDelete: ({ onDeleteFiles }: UseFileDeleteOptions) => {
+export declare const useFileDelete: ({ onDeleteFiles, onDeleteSuccess, }: UseFileDeleteOptions) => {
     deleteConfirmationOpen: boolean;
     itemsToDelete: DialFile[];
     openDeleteConfirmation: (items: DialFile[], parentFolderPath: string) => void;

package/dist/src/components/FileManager/hooks/use-file-download.d.ts

@@ -1,7 +1,8 @@
 import { DialFile } from '../../../models/file';
 export interface UseFileDownloadOptions {
     onDownloadFiles?: (items: DialFile[]) => void;
+    onDownloadSuccess?: () => void;
 }
-export declare const useFileDownload: ({ onDownloadFiles, }: UseFileDownloadOptions) => {
+export declare const useFileDownload: ({ onDownloadFiles, onDownloadSuccess, }: UseFileDownloadOptions) => {
     handleDownloadFiles: (items: DialFile[]) => void;
 };

package/dist/src/components/FileManager/hooks/use-file-upload.d.ts

@@ -0,0 +1,34 @@
+import { DragEvent } from 'react';
+import { DialFile } from '../../../models/file';
+import { DialUploadFileItem } from '../../../models/file-manager';
+export interface FileUploadValidationResult {
+    valid: boolean;
+    message?: string;
+}
+export interface FileUploadValidationMessages {
+    duplicateFiles?: string;
+    oversizedFiles?: string;
+    validationFailed?: string;
+    validationError?: string;
+}
+export interface UseFileUploadOptions {
+    onUploadFiles?: (files: DialUploadFileItem[], destinationFolder: string) => void;
+    onValidateUpload?: (files: DialUploadFileItem[], existingFiles: DialFile[], destinationFolder: string) => FileUploadValidationResult | Promise<FileUploadValidationResult>;
+    maxFileSize?: number;
+    validationMessages?: FileUploadValidationMessages;
+    onUploadArchive?: (file: File, name: string, destinationFolder: string) => void;
+}
+export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileSize, validationMessages, onUploadArchive, }?: UseFileUploadOptions) => {
+    isDragging: boolean;
+    isDraggingOverWindow: boolean;
+    uploadError: string | undefined;
+    handleDragEnter: (e: DragEvent) => void;
+    handleDragLeave: (e: DragEvent) => void;
+    handleDragOver: (e: DragEvent) => void;
+    handleDrop: (e: DragEvent, destinationFolder: string, existingFiles: DialFile[]) => Promise<void>;
+    clearError: () => void;
+    handleUpload: (files: DialUploadFileItem[], destinationFolder: string, existingFiles: DialFile[]) => Promise<boolean>;
+    openFileDialog: (destinationFolder: string, existingFiles: DialFile[]) => void;
+    openArchiveDialog: (destinationFolder: string, existingFiles: DialFile[]) => void;
+    fileInputRef: import('react').RefObject<HTMLInputElement | null>;
+};

package/dist/src/components/FileManager/hooks/use-folder-creation.d.ts

@@ -0,0 +1,21 @@
+import { DialFile } from '../../../models/file';
+import { DialUploadFileItem } from '../../../models/file-manager';
+export interface FolderCreationValidationMessages {
+    emptyName?: string;
+    duplicateName?: string;
+}
+export interface UseFolderCreationProps {
+    currentFolder?: DialFile;
+    onCreateFolder?: (file: DialUploadFileItem, folderPath: string, fileId: string) => void | Promise<void>;
+    onValidateFolderName?: (name: string, parentFolder: DialFile) => string | null;
+    validationMessages?: FolderCreationValidationMessages;
+}
+export interface UseFolderCreationResult {
+    isCreatingFolder: boolean;
+    newFolderTempId: string | null;
+    startFolderCreation: () => void;
+    cancelFolderCreation: () => void;
+    saveFolderCreation: (name: string) => Promise<void>;
+    validateFolderName: (name: string) => string | null;
+}
+export declare const useFolderCreation: ({ currentFolder, onCreateFolder, onValidateFolderName, validationMessages, }: UseFolderCreationProps) => UseFolderCreationResult;

package/dist/src/components/FileManager/hooks/use-grid-actions-column.d.ts

@@ -0,0 +1,10 @@
+import { ColDef } from 'ag-grid-community';
+import { FileManagerGridRow } from '../FileManagerContext';
+import { DropdownItem } from '../../../models/dropdown';
+interface UseGridActionsColumnProps {
+    getContextMenuItems: (row: FileManagerGridRow) => DropdownItem[];
+}
+export declare const useGridActionsColumn: ({ getContextMenuItems, }: UseGridActionsColumnProps) => {
+    actionsColumnDef: ColDef<FileManagerGridRow, any>;
+};
+export {};

package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts

@@ -0,0 +1,20 @@
+import { DialFile } from '../../../models/file';
+import { DialFileManagerActions } from '../../../types/file-manager';
+import { DropdownItem } from '../../../models/dropdown';
+export interface UseGridContextMenuProps {
+    actionLabels?: {
+        [DialFileManagerActions.Duplicate]?: string;
+        [DialFileManagerActions.Copy]?: string;
+        [DialFileManagerActions.Rename]?: string;
+        [DialFileManagerActions.Download]?: string;
+        [DialFileManagerActions.Delete]?: string;
+        [DialFileManagerActions.Move]?: string;
+    };
+    onDuplicate: (file: DialFile) => void;
+    onCopy: (file: DialFile) => void;
+    onMove: (file: DialFile) => void;
+    onDownload: (file: DialFile) => void;
+    onRename: (filePath: string) => void;
+    onDelete: (file: DialFile, parentFolderPath: string) => void;
+}
+export declare const useGridContextMenu: ({ actionLabels, onDuplicate, onCopy, onMove, onDownload, onRename, onDelete, }: UseGridContextMenuProps) => (file: DialFile) => DropdownItem[];

package/dist/src/components/FileManager/hooks/use-item-renaming.d.ts

@@ -1,14 +1,17 @@
 import { DialFile } from '../../../models/file';
-import { DialCopiedItem } from '../../../types/file-manager';
-export declare const useItemRenaming: ({ items, onRename, onRenameSave, onRenameCancel, onRenameValidate, onMoveToFiles, }: {
+import { DialCopiedItem } from '../../../models/file-manager';
+export interface RenameValidationMessages {
+    emptyName?: string;
+    duplicateName?: string;
+}
+export declare const useItemRenaming: ({ items, onRenameValidate, validationMessages, onMoveToFiles, }: {
     items?: DialFile[];
-    onRename?: (path: string) => void;
-    onRenameSave?: (value: string) => void;
-    onRenameCancel?: () => void;
     onRenameValidate?: (value: string, item: DialFile) => string | null;
+    validationMessages?: RenameValidationMessages;
     onMoveToFiles?: (items: DialCopiedItem[], sourceFolder: string, destinationFolder: string) => void;
 }) => {
     renamedPath: string | undefined;
+    renamedItem: DialFile | undefined;
     renameHandler: (path: string) => void;
     renameSaveHandler: (value: string) => void;
     renameCancelHandler: () => void;

package/dist/src/components/FileManager/hooks/use-new-actions.d.ts

@@ -0,0 +1,16 @@
+import { DropdownItem } from '../../../models/dropdown';
+export interface UseNewActionsProps {
+    newActionLabels?: {
+        uploadFiles?: string;
+        newFolder?: string;
+        uploadArchive?: string;
+    };
+    onUploadFiles?: () => void;
+    onCreateFolder?: () => void;
+    onUploadArchive?: () => void;
+}
+export interface UseNewActionsResult {
+    newActions: DropdownItem[];
+    isNewButtonVisible: boolean;
+}
+export declare const useNewActions: ({ newActionLabels, onUploadFiles, onCreateFolder, onUploadArchive, }: UseNewActionsProps) => UseNewActionsResult;

package/dist/src/components/FileManager/hooks/use-tree-additional-buttons.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+interface useTreeAdditionalButtonsOptions {
+    additionalButtons?: ReactNode;
+    expandedPathsLength: number;
+    collapseAll: () => void;
+}
+/**
+ * Provides additional action buttons for the tree component, including a
+ * built-in "Collapse All" button. The hook memoizes the returned JSX to avoid
+ * unnecessary re-renders and applies disabled state automatically based on
+ * the number of expanded paths.
+ *
+ * @param {ReactNode} [additionalButtons] - Optional custom buttons rendered before the Collapse All button.
+ * @param {number} expandedPathsLength - Number of currently expanded paths in the tree.
+ * @param {() => void} collapseAll - Callback fired when the Collapse All button is clicked.
+ *
+ * @returns {{ additionalButtons: ReactNode }} - The rendered buttons fragment.
+ */
+export declare const useTreeAdditionalButtons: ({ additionalButtons, expandedPathsLength, collapseAll, }: useTreeAdditionalButtonsOptions) => {
+    additionalButtons: import("react/jsx-runtime").JSX.Element;
+};
+export {};

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

@@ -1,5 +1,5 @@
 import { DialFile } from '../../models/file';
-export declare const findNodeByPath: (nodes: DialFile[] | undefined, path?: string) => DialFile | undefined;
+export declare const findNodeByPath: (nodes: DialFile[] | undefined, path: string) => DialFile | undefined;
 export declare const findFolderForPath: (root: DialFile[] | undefined, path?: string) => DialFile | undefined;
 export declare const normalizeToLowerCase: (input?: string) => string;
 export declare const normalizeExtensionWithoutDot: (input?: string) => string;

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

@@ -1,20 +1,34 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 export interface DialFileNameProps {
     name: string;
-    cssClass?: string;
+    className?: string;
     shared?: boolean;
+    iconSize?: number;
+    details?: ReactNode;
 }
 /**
  * Component to display a file name with a file icon and shared indicator.
  * Handles long names with ellipsis and tooltip.
  *
+ * If `details` is provided (e.g., file size, date), the component switches to
+ * a vertical layout and renders the extra information below the file name.
+ *
  * @example
  * ```tsx
+ * // Without details
  * <DialFileName name="Document.pdf" />
+ *
+ * // With details (file size and updated date)
+ * <DialFileName
+ *   name="Document.pdf"
+ *   details={<span className="text-secondary">24 KB · Jul 20, 2025</span>}
+ * />
  * ```
  *
- * @param name - Full file name with or without extension
- * @param cssClass - Additional CSS classes for the root container
- * @param shared - Whether the file is shared
+ * @param name - Full file name with or without extension.
+ * @param className - Additional CSS classes for the root container.
+ * @param shared - Whether the file is shared.
+ * @param iconSize - Icon size in px. Default: BASE_ICON_SIZE.
+ * @param details - Optional metadata block displayed under the file name (e.g., size, modified date).
  */
 export declare const DialFileName: FC<DialFileNameProps>;

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

@@ -1,9 +1,10 @@
 import { FC } from 'react';
 export interface DialFolderNameProps {
     name: string;
-    cssClass?: string;
+    className?: string;
     shared?: boolean;
     loading?: boolean;
+    iconSize?: number;
 }
 /**
  * Component to display a folder name with a folder icon and shared indicator.
@@ -15,7 +16,9 @@ export interface DialFolderNameProps {
  * ```
  *
  * @param name - Folder name
- * @param cssClass - Additional CSS classes for the root container
- * @param shared - Whether the folder is shared
+ * @param className - Additional CSS classes for the root container
+ * @param shared - If true, shows shared indicator. Default: false.
+ * @param loading - If true, shows loading state. Default: false.
+ * @param iconSize - Icon size in px. Default: BASE_ICON_SIZE.
  */
 export declare const DialFolderName: FC<DialFolderNameProps>;

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

@@ -3,10 +3,10 @@ import { DialFormItemBaseProps } from '../../types/form-item';
 export interface DialFormItemProps extends DialFormItemBaseProps {
     elementId: string;
     labelVisuallyHidden?: boolean;
-    cssClass?: string;
-    childrenCssClass?: string;
-    labelCssClass?: string;
-    errorCssClass?: string;
+    className?: string;
+    childrenClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
     children: ReactNode;
     value?: ReactNode | string;
     defaultEmptyText?: string;
@@ -22,7 +22,7 @@ export interface DialFormItemProps extends DialFormItemBaseProps {
  *
  * @example
  * ```tsx
- * <DialFormItem elementId="transport" label="Transport" cssClass="w-[320px]">
+ * <DialFormItem elementId="transport" label="Transport" className="w-[320px]">
  *   <DialSelect
  *     elementId="transport"
  *     value={transport}
@@ -53,10 +53,10 @@ export interface DialFormItemProps extends DialFormItemBaseProps {
  *
  * @param elementId - Unique identifier for the form control element (used for accessibility)
  * @param labelVisuallyHidden - Whether to visually hide the label (still accessible to screen readers, default: false)
- * @param cssClass - Additional CSS classes to apply to the container div
- * @param childrenCssClass - Additional CSS classes to apply to the children container div
- * @param labelCssClass - Additional CSS classes to apply to the label element
- * @param errorCssClass - Additional CSS classes to apply to the error message element
+ * @param className - Additional CSS classes to apply to the container div
+ * @param childrenClassName - Additional CSS classes to apply to the children container div
+ * @param labelClassName - Additional CSS classes to apply to the label element
+ * @param errorClassName - Additional CSS classes to apply to the error message element
  * @param children - The form control element(s) to render inside the DialFormItem
  * @param value - The current value of the form control (for readonly mode)
  * @param defaultEmptyText - Text to display when readonly and value is empty (default: "None")

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

@@ -1,3 +1,3 @@
 import { FormItemOrientation } from '../../types/form-item';
-export declare const containerBaseClasses = "w-full flex";
+export declare const containerBaseClassName = "w-full flex";
 export declare const orientationClassMap: Record<FormItemOrientation, string>;

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

@@ -32,7 +32,7 @@ export interface DialFormPopupProps extends DialPopupProps {
  * @param [cancelLabel="Cancel"] - Label for the cancel button
  * @param [isLoading=false] - Shows loader placeholder and hides actions
  * @param [disableSubmitButton=false] - Disables the submit button
- * @param [cssClass] - Extra classes for the popup container
+ * @param [className] - Extra classes for the popup container
  * @param [submitClassName] - Extra classes merged into the submit button
  * @param onClose - Fired on close
  * @param onSubmit - Fired on submit

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

@@ -1,3 +1,3 @@
 export declare const defaultSubmitLabel = "Create";
 export declare const defaultCancelLabel = "Cancel";
-export declare const actionsBaseClasses = "flex items-center justify-end gap-2 px-6 py-3";
+export declare const actionsBaseClassName = "flex items-center justify-end gap-2 px-6 py-3";

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

@@ -6,12 +6,15 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
     rowData?: T[];
     additionalGridOptions?: GridOptions<T>;
     getContextMenuItems?: (row: T) => DropdownItem[];
-    cssClass?: string;
+    className?: string;
     ariaLabel?: string;
     withSelectionColumn?: boolean;
     wrapCustomCellRenderers?: boolean | ((col: ColDef<T>) => boolean);
     selectedRowIds?: Set<string>;
+    selectedRows?: Map<string, T>;
+    selectionOnHover?: boolean;
     onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
+    onSelectionChangeWithMap?: (selectedRows: Map<string, T>) => void;
     getRowId?: (row: T) => string;
     alternateOddRowColors?: boolean;
     filterPlaceholder?: string;
@@ -19,6 +22,8 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
     emptyStateTitle?: string;
     emptyStateDescription?: string;
     loading?: boolean;
+    wrapperBorder?: boolean;
+    withoutHeaderBorders?: boolean;
 }
 /**
  * DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.
@@ -89,11 +94,13 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [rowData] - Array of data objects to display in the grid
  * @param [additionalGridOptions] - Additional ag-Grid GridOptions to merge with defaults
  * @param [getContextMenuItems] - Function returning context menu items for a given row
- * @param [cssClass] - Additional CSS classes to apply to the grid container
+ * @param [className] - Additional CSS classes to apply to the grid container
  * @param [ariaLabel='Data grid'] - Accessible label for the grid region
  * @param [withSelectionColumn=true] - Whether to show the checkbox selection column
  * @param [wrapCustomCellRenderers=true] - Whether to wrap custom cell renderers with context menu support
  * @param [selectedRowIds] - Controlled selection: set of row IDs that should be selected
+ * @param [selectedRows] - Controlled selection: map of row IDs to row data for selected rows
+ * @param [selectionOnHover=true] - Whether row selection highlights are shown on hover
  * @param [onSelectionChange] - Callback invoked when selection changes (selectedIds, selectedRows)
  * @param [getRowId] - Function to extract unique ID from a row object (defaults to 'id' field)
  * @param [alternateOddRowColors=false] - Whether to alternate background colors for odd/even rows
@@ -103,5 +110,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [emptyStateDescription] - Optional description text displayed below the empty state title,
  *   providing additional context or instructions (e.g., "No data found" or "Try adjusting your filters").
  * @param [loading=false] - When true, shows AG-Grid's native loading overlay
+ * @param [wrapperBorder=true] - Whether to apply a border around the grid container
+ * @param [withoutHeaderBorders=false] - Whether to hide the header row borders
  */
-export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, cssClass, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, onSelectionChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, selectedRows, selectionOnHover, onSelectionChange, onSelectionChangeWithMap, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-export declare const gridBaseClasses = "h-full";
+export declare const gridBaseClassName = "h-full";
 export declare const GRID_THEME_COLORS: {
     accentColor: string;
     backgroundColor: string;

package/dist/src/components/Grid/hooks/use-grid-selection.d.ts

@@ -1,12 +1,15 @@
-export interface UseGridSelectionProps<T> {
+export interface UseGridSelectionProps<T extends object> {
     selectedRowIds?: Set<string>;
+    selectedRows?: Map<string, T>;
     onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
+    onSelectionChangeWithMap?: (selectedRows: Map<string, T>) => void;
     rowData?: T[];
     getRowId: (row: T) => string;
 }
-export declare const useGridSelection: <T extends object>({ selectedRowIds, onSelectionChange, rowData, getRowId, }: UseGridSelectionProps<T>) => {
+export declare const useGridSelection: <T extends object>({ selectedRowIds, selectedRows, onSelectionChange, onSelectionChangeWithMap, rowData, getRowId, }: UseGridSelectionProps<T>) => {
     currentSelectedIds: Set<string>;
-    handleSelectionToggle: (rowId: string, checked: boolean) => void;
+    currentSelectedRows: Map<string, T>;
+    handleSelectionToggle: (row: T, checked: boolean) => void;
     headerCheckboxState: string;
-    handleHeaderCheckboxChange: () => void;
+    handleHeaderCheckboxChange: (checked?: boolean) => void;
 };