@epam/ai-dial-ui-kit 0.5.0-rc.1 → 0.5.0-rc.11

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

@@ -39,14 +39,36 @@ export interface GridOptions extends Omit<DialGridProps<GridRow>, 'rowData' | 'c
     filterable?: boolean;
     dateLocale?: Intl.LocalesArgument;
     dateOptions?: Intl.DateTimeFormatOptions;
+    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'>;
+export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection' | 'actions'> & {
+    actionLabels?: {
+        [DialFileManagerActions.Duplicate]?: string;
+        [DialFileManagerActions.Copy]?: string;
+        [DialFileManagerActions.Download]?: string;
+        [DialFileManagerActions.Delete]?: string;
+        [DialFileManagerActions.Move]?: string;
+    };
+};
+export interface CreateFolderValidationMessages {
+    emptyName?: string;
+    duplicateName?: string;
+    forbiddenChars?: string;
+}
 export interface DialFileManagerProps {
     path?: string;
     cssClass?: string;
     items?: DialFile[];
     rootItem?: DialRootFolder;
+    filesLoading?: boolean;
     showHiddenFiles?: boolean;
     onShowHiddenFilesChange?: (value: boolean) => void;
     treeOptions?: FileTreeOptions;
@@ -66,6 +88,9 @@ export interface DialFileManagerProps {
     onRenameSave?: (value: string) => void;
     onRenameCancel?: () => void;
     onRenameValidate?: (value: string, item: DialFile) => string | null;
+    onCreateFolder?: (folderPath: string, file: File, name: string, bucket?: string) => void;
+    onCreateFolderValidate?: (name: string, parentFolder: DialFile) => string | null;
+    createFolderValidationMessages?: CreateFolderValidationMessages;
 }
 /**
  * File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.
@@ -82,6 +107,9 @@ export interface DialFileManagerProps {
  * // Minimal usage
  * <DialFileManager items={files} path="/All files" />
  *
+ * // With loading state
+ * <DialFileManager items={files} path="/All files" filesLoading={true} />
+ *
  * // With controlled search and disabled grid filters
  * const [query, setQuery] = useState('');
  * <DialFileManager
@@ -113,6 +141,7 @@ export interface DialFileManagerProps {
  * @param [cssClass] - 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
  *
  * @param [treeOptions] - Options that configure the collapsible sidebar and folders tree
  * @param [navigationPanelOptions] - Options for the breadcrumb and search panel (value/onSearchChange for controlled search)

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

@@ -15,6 +15,7 @@ export interface FileManagerContextValue {
     cssClass?: string;
     items: DialFile[];
     rootItem?: DialRootFolder;
+    filesLoading?: boolean;
     treeOptions?: FileTreeOptions;
     navigationPanelOptions?: NavigationPanelOptions;
     gridOptions?: GridOptions;
@@ -33,7 +34,8 @@ export interface FileManagerContextValue {
     toggleTreeCollapse: () => void;
     setIsTreeCollapsed: (value: boolean) => void;
     selectedIds: Set<string>;
-    setSelectedIds: (next: Set<string>) => void;
+    selectedFiles: Map<string, DialFile>;
+    setSelectedFiles: (next: Map<string, DialFile>) => void;
     clearSelection: () => void;
     currentFolder?: DialFile;
     gridRows: FileManagerGridRow[];

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

@@ -7,3 +7,4 @@ export declare const treeBaseClasses = "w-full h-full rounded bg-layer-3 text-se
 export declare const gridBaseClasses = "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;

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-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,9 +1,12 @@
 import { DialFile } from '../../../models/file';
-export declare const useItemRenaming: ({ onRename, onRenameSave, onRenameCancel, onRenameValidate, }: {
+import { DialCopiedItem } from '../../../types/file-manager';
+export declare const useItemRenaming: ({ items, onRename, onRenameSave, onRenameCancel, onRenameValidate, onMoveToFiles, }: {
+    items?: DialFile[];
     onRename?: (path: string) => void;
     onRenameSave?: (value: string) => void;
     onRenameCancel?: () => void;
     onRenameValidate?: (value: string, item: DialFile) => string | null;
+    onMoveToFiles?: (items: DialCopiedItem[], sourceFolder: string, destinationFolder: string) => void;
 }) => {
     renamedPath: string | undefined;
     renameHandler: (path: string) => void;

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

@@ -1,4 +1,5 @@
 import { DialFile } from '../../models/file';
+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

@@ -3,6 +3,7 @@ export interface DialFileNameProps {
     name: string;
     cssClass?: string;
     shared?: boolean;
+    iconSize?: number;
 }
 /**
  * Component to display a file name with a file icon and shared indicator.
@@ -16,5 +17,6 @@ export interface DialFileNameProps {
  * @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 iconSize - Icon size in px. Default: BASE_ICON_SIZE.
  */
 export declare const DialFileName: FC<DialFileNameProps>;

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

@@ -4,6 +4,7 @@ export interface DialFolderNameProps {
     cssClass?: string;
     shared?: boolean;
     loading?: boolean;
+    iconSize?: number;
 }
 /**
  * Component to display a folder name with a folder icon and shared indicator.
@@ -16,6 +17,8 @@ export interface DialFolderNameProps {
  *
  * @param name - Folder name
  * @param cssClass - Additional CSS classes for the root container
- * @param shared - Whether the folder is shared
+ * @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/Grid/Grid.d.ts

@@ -11,13 +11,16 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
     withSelectionColumn?: boolean;
     wrapCustomCellRenderers?: boolean | ((col: ColDef<T>) => boolean);
     selectedRowIds?: Set<string>;
+    selectedRows?: Map<string, T>;
     onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
+    onSelectionChangeWithMap?: (selectedRows: Map<string, T>) => void;
     getRowId?: (row: T) => string;
     alternateOddRowColors?: boolean;
     filterPlaceholder?: string;
     emptyStateIcon?: ReactNode;
     emptyStateTitle?: string;
     emptyStateDescription?: string;
+    loading?: boolean;
 }
 /**
  * DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.
@@ -30,6 +33,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * - Controlled or uncontrolled selection modes
  * - Automatic column sizing and responsive behavior
  * - Full accessibility support with ARIA attributes
+ * - Loading state with native AG-Grid overlay
  *
  * @example
  * ```tsx
@@ -48,7 +52,13 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * <DialGrid<Product>
  *   columnDefs={columns}
  *   rowData={products}
- *   storageKey="products-grid"
+ * />
+ *
+ * // With loading state
+ * <DialGrid<Product>
+ *   columnDefs={columns}
+ *   rowData={products}
+ *   loading={true}
  * />
  *
  * // With context menu
@@ -93,6 +103,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [emptyStateIcon] - Optional icon for empty state
  * @param [emptyStateTitle] - Optional title text displayed when the grid has no rows to show.
  * @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”).
+ *   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
  */
-export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, cssClass, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, onSelectionChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, cssClass, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, selectedRows, onSelectionChange, onSelectionChangeWithMap, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;

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;
 };

package/dist/src/index.d.ts

@@ -49,6 +49,7 @@ export { DialSelectField } from './components/SelectField/SelectField';
 export { DialLoadFileAreaField } from './components/LoadFileArea/LoadFileAreaField';
 export { DialDropdown } from './components/Dropdown/Dropdown';
 export { DialButtonDropdown } from './components/ButtonDropdown/ButtonDropdown';
+export { DialFileManager } from './components/FileManager/FileManager';
 export { AlertVariant } from './types/alert';
 export { ButtonVariant } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.5.0-rc.1",
+  "version": "0.5.0-rc.11",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -66,7 +66,7 @@
   "peerDependencies": {
     "@floating-ui/react": "^0.27.15",
     "@monaco-editor/react": "^4.7.0",
-    "@tabler/icons-react": "^3.34.1",
+    "@tabler/icons-react": "^3.35.0",
     "classnames": "^2.5.1",
     "monaco-editor": "^0.52.2",
     "react": "^19.1.0",