@epam/ai-dial-ui-kit 0.4.0-rc.24 → 0.4.0-rc.25

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

@@ -1,27 +1,26 @@
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
 import { ColDef } from 'ag-grid-community';
-import { DialFile, DialFileNodeType } from '../../models/file';
+import { DialFile } from '../../models/file';
 import { DialFoldersTreeProps } from './components/FoldersTree/FoldersTree';
 import { DialFileManagerNavigationPanelProps } from './components/FileManagerNavigationPanel/FileManagerNavigationPanel';
 import { DialGridProps } from '../Grid/Grid';
 import { DialFileManagerToolbarProps } from './components/FileManagerToolbar/DialFileManagerToolbar';
 import { DialFileManagerBulkActionsToolbarProps } from './components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar';
-interface GridRow {
-    id: string;
-    name: string;
-    updatedAt?: string;
-    size?: string;
-    author?: string;
-    path: string;
-    nodeType: DialFileNodeType;
-    extension?: string;
-}
+import { DialFileManagerActions } from '../../types/file-manager';
+import { FileManagerGridRow } from './FileManagerContext';
+type GridRow = FileManagerGridRow;
 export interface FileTreeOptions extends Omit<DialFoldersTreeProps, 'items' | 'selectedPath' | 'onItemClick'> {
     width?: number;
     title?: string;
     containerCssClass?: string;
-    additionalButtons?: ReactNode;
+    additionalButtons?: React.ReactNode;
     collapsed?: boolean;
+    actionLabels?: {
+        [DialFileManagerActions.Copy]?: string;
+        [DialFileManagerActions.Cut]?: string;
+        [DialFileManagerActions.Paste]?: string;
+        [DialFileManagerActions.Rename]?: string;
+    };
 }
 export type NavigationPanelOptions = Omit<DialFileManagerNavigationPanelProps, 'path' | 'makeHref' | 'onItemClick'>;
 export interface GridOptions extends Omit<DialGridProps<GridRow>, 'rowData' | 'columnDefs'> {
@@ -41,6 +40,8 @@ export interface DialFileManagerProps {
     bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
     onPathChange?: (nextPath?: string) => void;
     onTableFileClick?: (file: GridRow) => void;
+    onCopyFiles?: (files: string[], destination: string) => void;
+    onMoveToFiles?: (files: string[], destination: string) => void;
 }
 /**
  * File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.
@@ -50,6 +51,7 @@ export interface DialFileManagerProps {
  * - The grid shows children of the current folder. When a search query is present, it scans all nested descendants.
  * - Pluggable tree, navigation panel, and grid behaviors via `treeOptions`, `navigationPanelOptions`, and `gridOptions`.
  * - Optional filters toggle via `gridOptions.filterable` (default `true`).
+ * - Supports bulk actions toolbar when items are selected.
  *
  * @example
  * ```tsx
@@ -74,9 +76,16 @@ export interface DialFileManagerProps {
  *   items={files}
  *   treeOptions={{ width: 300, title: 'Explorer', showFiles: true }}
  * />
+ *
+ * // With explicit provider (advanced apps)
+ * <FileManagerProvider items={files} path="/All files">
+ *   <MyCustomHeader />
+ *   <DialFileManagerView />  // internal view
+ *   <MyCustomFooter />
+ * </FileManagerProvider>
  * ```
  *
- * @param [path] - Absolute path of the current location (e.g., "/All files/Design/Icons")
+ * @param [path] - Absolute path of the current location (e.g. "/All files/Design/Icons")
  * @param [cssClass] - Additional classes for the root container
  * @param [items] - Full hierarchical list of files and folders used by both tree and grid
  *
@@ -88,6 +97,15 @@ export interface DialFileManagerProps {
  *
  * @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
  */
 export declare const DialFileManager: FC<DialFileManagerProps>;
+/**
+ * Internal view-only component.
+ * Reads all data from FileManagerContext and renders the actual layout.
+ * This is what apps can reuse if they want to control the provider manually.
+ */
+export declare const DialFileManagerView: FC;
 export {};

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

@@ -0,0 +1,50 @@
+import { DialFile, DialFileNodeType } from '../../models/file';
+import { FileTreeOptions, NavigationPanelOptions, GridOptions, ToolbarOptions, BulkActionsToolbarOptions, DialFileManagerProps } from './FileManager';
+export interface FileManagerGridRow {
+    id: string;
+    name: string;
+    updatedAt?: string;
+    size?: string;
+    author?: string;
+    path: string;
+    nodeType: DialFileNodeType;
+    extension?: string;
+}
+export interface FileManagerContextValue {
+    cssClass?: string;
+    items: DialFile[];
+    treeOptions?: FileTreeOptions;
+    navigationPanelOptions?: NavigationPanelOptions;
+    gridOptions?: GridOptions;
+    toolbarOptions?: ToolbarOptions;
+    bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
+    currentPath?: string;
+    setCurrentPath: (p?: string) => void;
+    searchValue: string;
+    effectiveSearchValue: string;
+    setSearchValue: (v: string) => void;
+    areHiddenFilesVisible: boolean;
+    toggleHiddenFilesVisibility: () => void;
+    isTreeCollapsed: boolean;
+    toggleTreeCollapse: () => void;
+    selectedIds: Set<string>;
+    setSelectedIds: (next: Set<string>) => void;
+    clearSelection: () => void;
+    currentFolder?: DialFile;
+    gridRows: FileManagerGridRow[];
+    clipboard: {
+        copied: Set<string>;
+        cut: Set<string>;
+        hasItems: boolean;
+    };
+    onCopy: (files: string[]) => void;
+    onCut: (files: string[]) => void;
+    onPaste: () => void;
+    handlePathChange: (nextPath?: string) => void;
+    handleTreeItemClick: (item: DialFile) => void;
+    handleBreadcrumbItemClick: (href?: string) => void;
+    handleSearchChange: (value?: string) => void;
+    handleTableRowClick: (row: FileManagerGridRow) => void;
+    onTableFileClick?: DialFileManagerProps['onTableFileClick'];
+}
+export declare const FileManagerContext: import('react').Context<FileManagerContextValue | undefined>;

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

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+import { DialFileManagerProps } from './FileManager';
+export interface FileManagerProviderProps extends Omit<DialFileManagerProps, 'children'> {
+    children: ReactNode;
+}
+/**
+ * Provider that encapsulates all File Manager business logic:
+ * - path & navigation
+ * - search (controlled + uncontrolled)
+ * - hidden files toggle
+ * - tree collapsed state
+ * - selection
+ * - clipboard (copy / cut / paste)
+ * - computed grid rows
+ *
+ */
+export declare const FileManagerProvider: FC<FileManagerProviderProps>;

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

@@ -0,0 +1,16 @@
+export interface UseFileClipboardOptions {
+    getDestination: () => string;
+    onCopyFiles?: (files: string[], destination: string) => void;
+    onMoveToFiles?: (files: string[], destination: string) => void;
+}
+export declare const useFileClipboard: ({ getDestination, onCopyFiles, onMoveToFiles, }: UseFileClipboardOptions) => {
+    state: {
+        copied: Set<string>;
+        cut: Set<string>;
+        hasItems: boolean;
+    };
+    copy: (files: string[]) => void;
+    cut: (files: string[]) => void;
+    paste: () => void;
+    clear: () => void;
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Hook to read the File Manager context.
+ * Throws if used outside of the provider.
+ */
+export declare const useFileManagerContext: () => import('../FileManagerContext').FileManagerContextValue;

package/dist/src/index.d.ts

@@ -62,8 +62,10 @@ export { TagVariant } from './types/tag';
 export { TabOrientation } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
-export { DialFileManagerTabs } from './types/file-manager';
+export { DialFileManagerTabs, DialFileManagerActions, } from './types/file-manager';
 export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
+export { FileManagerProvider } from './components/FileManager/FileManagerProvider';
+export { useFileManagerContext } from './components/FileManager/hooks/use-file-manager-context';
 export { StepStatus } from './models/step';
 export type { Step } from './models/step';
 export type { RadioButtonWithContent } from './models/radio';

package/dist/src/types/file-manager.d.ts

@@ -3,3 +3,9 @@ export declare enum DialFileManagerTabs {
     Shared = "shared",
     Organization = "organization"
 }
+export declare enum DialFileManagerActions {
+    Copy = "copy",
+    Cut = "cut",
+    Paste = "paste",
+    Rename = "rename"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.4.0-rc.24",
+  "version": "0.4.0-rc.25",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",