@epam/ai-dial-ui-kit 0.5.0-rc.10 → 0.5.0-rc.101

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/README.md +3 -3
  2. package/dist/dial-ui-kit.cjs.js +29 -29
  3. package/dist/dial-ui-kit.es.js +25701 -23140
  4. package/dist/index.css +2 -2
  5. package/dist/src/components/Alert/Alert.d.ts +14 -4
  6. package/dist/src/components/Alert/constants.d.ts +7 -4
  7. package/dist/src/components/AutocompleteInput/AutocompleteInput.d.ts +10 -10
  8. package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts +6 -6
  9. package/dist/src/components/Breadcrumb/Breadcrumb.d.ts +8 -8
  10. package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts +2 -2
  11. package/dist/src/components/Breadcrumb/constants.d.ts +10 -10
  12. package/dist/src/components/Button/Button.d.ts +10 -18
  13. package/dist/src/components/Checkbox/Checkbox.d.ts +3 -4
  14. package/dist/src/components/CloseButton/CloseButton.d.ts +5 -3
  15. package/dist/src/components/CollapsibleSidebar/CollapsibleSidebar.d.ts +6 -6
  16. package/dist/src/components/ConfirmationPopup/ConfirmationPopup.d.ts +3 -3
  17. package/dist/src/components/ConfirmationPopup/constants.d.ts +3 -3
  18. package/dist/src/components/DraggableItem/DraggableItem.d.ts +8 -8
  19. package/dist/src/components/DraggableItem/constants.d.ts +2 -2
  20. package/dist/src/components/Dropdown/Dropdown.d.ts +4 -2
  21. package/dist/src/components/Dropdown/constants.d.ts +7 -7
  22. package/dist/src/components/EllipsisTooltip/EllipsisTooltip.d.ts +6 -4
  23. package/dist/src/components/EllipsisTooltip/constants.d.ts +1 -1
  24. package/dist/src/components/Field/Field.d.ts +4 -6
  25. package/dist/src/components/FileIcon/FileIcon.d.ts +2 -2
  26. package/dist/src/components/FileManager/FileManager.d.ts +74 -13
  27. package/dist/src/components/FileManager/FileManagerContext.d.ts +58 -4
  28. package/dist/src/components/FileManager/FileManagerProvider.d.ts +1 -0
  29. package/dist/src/components/FileManager/components/ConflictResolutionPopup/ConflictResolutionPopup.d.ts +92 -0
  30. package/dist/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.d.ts +4 -1
  31. package/dist/src/components/FileManager/components/DialFileManagerItemSummaryCell/DialFileManagerItemSummaryCell.d.ts +56 -0
  32. package/dist/src/components/FileManager/components/DialFileManagerItemSummaryCell/DialFileManagerItemSummaryCell.test.d.ts +1 -0
  33. package/dist/src/components/FileManager/components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar.d.ts +5 -3
  34. package/dist/src/components/FileManager/components/FileManagerItemIcon/FileManagerItemIcon.d.ts +1 -1
  35. package/dist/src/components/FileManager/components/FileManagerItemName/FileManagerItemName.d.ts +2 -1
  36. package/dist/src/components/FileManager/components/FileManagerItemNameInput/FileManagerItemNameInput.d.ts +4 -2
  37. package/dist/src/components/FileManager/components/FileManagerNavigationPanel/FileManagerNavigationPanel.d.ts +13 -11
  38. package/dist/src/components/FileManager/components/FileManagerNavigationPanel/constants.d.ts +3 -3
  39. package/dist/src/components/FileManager/components/FileManagerToolbar/DialFileManagerToolbar.d.ts +13 -13
  40. package/dist/src/components/FileManager/components/FileMetadataPopup/FileMetadataPopup.d.ts +50 -0
  41. package/dist/src/components/FileManager/components/FileMetadataPopup/constants.d.ts +6 -0
  42. package/dist/src/components/FileManager/components/FoldersTree/FoldersTree.d.ts +9 -1
  43. package/dist/src/components/FileManager/components/FoldersTree/hooks/use-expanded-paths.d.ts +13 -0
  44. package/dist/src/components/FileManager/constants.d.ts +14 -7
  45. package/dist/src/components/FileManager/hooks/__tests__/use-conflict-resolution.spec.d.ts +1 -0
  46. package/dist/src/components/FileManager/hooks/__tests__/use-file-upload.spec.d.ts +1 -0
  47. package/dist/src/components/FileManager/hooks/__tests__/use-trigger-view-rename.spec.d.ts +1 -0
  48. package/dist/src/components/FileManager/hooks/use-conflict-resolution.d.ts +26 -0
  49. package/dist/src/components/FileManager/hooks/use-file-clipboard.d.ts +18 -4
  50. package/dist/src/components/FileManager/hooks/use-file-delete.d.ts +3 -2
  51. package/dist/src/components/FileManager/hooks/use-file-download.d.ts +2 -1
  52. package/dist/src/components/FileManager/hooks/use-file-metadata.d.ts +10 -0
  53. package/dist/src/components/FileManager/hooks/use-file-upload.d.ts +43 -0
  54. package/dist/src/components/FileManager/hooks/use-folder-creation.d.ts +21 -0
  55. package/dist/src/components/FileManager/hooks/use-grid-actions-column.d.ts +10 -0
  56. package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts +24 -0
  57. package/dist/src/components/FileManager/hooks/use-item-renaming.d.ts +9 -5
  58. package/dist/src/components/FileManager/hooks/use-new-actions.d.ts +16 -0
  59. package/dist/src/components/FileManager/hooks/use-tree-additional-buttons.d.ts +22 -0
  60. package/dist/src/components/FileManager/hooks/use-trigger-view-rename.d.ts +20 -0
  61. package/dist/src/components/FileManager/utils.d.ts +33 -1
  62. package/dist/src/components/FileName/FileName.d.ts +17 -5
  63. package/dist/src/components/FolderName/FolderName.d.ts +2 -2
  64. package/dist/src/components/FormItem/FormItem.d.ts +9 -9
  65. package/dist/src/components/FormItem/constants.d.ts +1 -1
  66. package/dist/src/components/FormPopup/FormPopup.d.ts +1 -1
  67. package/dist/src/components/FormPopup/constants.d.ts +1 -1
  68. package/dist/src/components/Grid/Grid.d.ts +10 -3
  69. package/dist/src/components/Grid/constants.d.ts +1 -1
  70. package/dist/src/components/Grid/renderers/DateCellRenderer.d.ts +3 -3
  71. package/dist/src/components/Grid/renderers/constants.d.ts +1 -1
  72. package/dist/src/components/Icon/Icon.d.ts +0 -1
  73. package/dist/src/components/Input/Input.d.ts +4 -4
  74. package/dist/src/components/InputField/InputField.d.ts +3 -3
  75. package/dist/src/components/InputPopup/InputPopup.d.ts +6 -6
  76. package/dist/src/components/Loader/Loader.d.ts +5 -5
  77. package/dist/src/components/Loader/constants.d.ts +2 -2
  78. package/dist/src/components/NoDataContent/NoDataContent.d.ts +6 -3
  79. package/dist/src/components/PasswordInput/PasswordInputField.d.ts +1 -1
  80. package/dist/src/components/Popup/Popup.d.ts +6 -6
  81. package/dist/src/components/Popup/constants.d.ts +3 -3
  82. package/dist/src/components/RadioButton/RadioButton.d.ts +6 -6
  83. package/dist/src/components/RadioGroup/RadioGroup.d.ts +20 -20
  84. package/dist/src/components/RadioGroup/constants.d.ts +3 -3
  85. package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts +2 -2
  86. package/dist/src/components/RemoveButton/RemoveButton.d.ts +6 -8
  87. package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts +33 -0
  88. package/dist/src/components/ResizableContainer/ResizableContainer.d.ts +69 -0
  89. package/dist/src/components/ResizableContainer/components/ResizeHandle.d.ts +10 -0
  90. package/dist/src/components/ResizableContainer/components/ResizeIcon.d.ts +8 -0
  91. package/dist/src/components/Search/Search.d.ts +7 -4
  92. package/dist/src/components/Search/constants.d.ts +4 -4
  93. package/dist/src/components/Select/Select.d.ts +9 -3
  94. package/dist/src/components/Select/constants.d.ts +7 -6
  95. package/dist/src/components/SelectField/SelectField.d.ts +6 -6
  96. package/dist/src/components/SharedEntityIndicator/SharedEntityIndicator.d.ts +2 -2
  97. package/dist/src/components/Skeleton/Skeleton.d.ts +77 -0
  98. package/dist/src/components/Skeleton/utils.d.ts +2 -0
  99. package/dist/src/components/Tab/Tab.d.ts +4 -4
  100. package/dist/src/components/Tabs/Tabs.d.ts +9 -9
  101. package/dist/src/components/Tag/Tag.d.ts +2 -2
  102. package/dist/src/components/TextAreaField/TextAreaField.d.ts +3 -3
  103. package/dist/src/components/Textarea/Textarea.d.ts +4 -4
  104. package/dist/src/hooks/use-width-breakpoint.d.ts +23 -0
  105. package/dist/src/index.d.ts +8 -2
  106. package/dist/src/models/breadcrumb.d.ts +1 -1
  107. package/dist/src/models/dropdown.d.ts +1 -0
  108. package/dist/src/models/file-manager.d.ts +18 -0
  109. package/dist/src/models/file.d.ts +2 -1
  110. package/dist/src/models/tab.d.ts +2 -1
  111. package/dist/src/types/dropdown.d.ts +2 -1
  112. package/dist/src/types/file-manager.d.ts +28 -11
  113. package/dist/src/types/resizable-container.d.ts +4 -0
  114. package/dist/src/types/skeleton.d.ts +15 -0
  115. package/dist/src/types/tab.d.ts +1 -1
  116. package/package.json +12 -11
@@ -2,30 +2,32 @@ import { FC, ReactNode } from 'react';
2
2
  import { DialTooltipContainerOptions } from '../Tooltip/TooltipContext';
3
3
  export interface DialEllipsisTooltipProps extends DialTooltipContainerOptions {
4
4
  text: string | ReactNode;
5
- cssClass?: string;
5
+ className?: string;
6
6
  contentClassName?: string;
7
7
  hideTooltip?: boolean;
8
+ id?: string;
8
9
  }
9
10
  /**
10
11
  * Single-line text with CSS ellipsis that shows a tooltip **only when actually truncated**.
11
12
  * If the text fits, tooltip content is empty and the popup stays hidden.
12
13
  *
13
14
  * Important: width must be finite for truncation.
14
- * Consumers can override via `cssClass`.
15
+ * Consumers can override via `className`.
15
16
  *
16
17
  * a11y: when truncated, the full text is exposed via `aria-label` on the reference node.
17
18
  *
18
19
  * @example
19
20
  * ```tsx
20
21
  * <DialEllipsisTooltip text="Very long message that will be truncated" />
21
- * <DialEllipsisTooltip text={<span className="font-medium">Custom node</span>} cssClass="max-w-[160px]" />
22
+ * <DialEllipsisTooltip text={<span className="font-medium">Custom node</span>} className="max-w-[160px]" />
22
23
  * <DialEllipsisTooltip text="Tooltip disabled even if truncated" hideTooltip />
23
24
  * ```
24
25
  *
25
26
  * @param text The text or node to display (truncated with ellipsis if too long).
26
- * @param cssClass Optional additional CSS classes for the text container (e.g. to set width).
27
+ * @param className Optional additional CSS classes for the text container (e.g. to set width).
27
28
  * @param contentClassName Optional additional CSS classes for the tooltip content.
28
29
  * @param hideTooltip If true, disables the tooltip even if text is truncated.
30
+ * @param id Optional attribute for unique identification
29
31
  * @param tooltipProps Additional props to pass to the underlying DialTooltipContainer.
30
32
  */
31
33
  export declare const DialEllipsisTooltip: FC<DialEllipsisTooltipProps>;
@@ -1 +1 @@
1
- export declare const tooltipContentBaseClasses = "text-primary";
1
+ export declare const tooltipContentBaseClassName = "text-primary";
@@ -1,10 +1,9 @@
1
- import { FC, ReactNode } from 'react';
2
- export interface DialFieldLabelProps {
1
+ import { FC, LabelHTMLAttributes, ReactNode } from 'react';
2
+ type NativeLabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'defaultValue' | 'onChange'>;
3
+ export interface DialFieldLabelProps extends NativeLabelProps {
3
4
  fieldTitle?: string | ReactNode;
4
- htmlFor: string;
5
5
  optional?: boolean;
6
6
  optionalText?: string;
7
- cssClass?: string;
8
7
  description?: string;
9
8
  }
10
9
  /**
@@ -16,11 +15,10 @@ export interface DialFieldLabelProps {
16
15
  * <DialFieldLabel htmlFor="email-input" fieldTitle="Email Address" />
17
16
  * ```
18
17
  *
19
- * @param htmlFor - The ID of the form element this label is associated with
20
18
  * @param [fieldTitle] - The title/label text to display for the field
21
19
  * @param [optional=false] - Whether the field is optional (displays "(Optional)" text if optionalText is not provided)
22
20
  * @param [optionalText="(Optional)"] - Custom text for optional indicator
23
- * @param [cssClass] - Additional CSS classes to apply to the label element
24
21
  * @param [description] - Additional description text, displayed below the label.
25
22
  */
26
23
  export declare const DialFieldLabel: FC<DialFieldLabelProps>;
24
+ export {};
@@ -3,7 +3,7 @@ export interface DialFileIconProps {
3
3
  extension: string;
4
4
  size?: number;
5
5
  stroke?: number;
6
- cssClass?: string;
6
+ className?: string;
7
7
  decorative?: boolean;
8
8
  label?: string;
9
9
  indicator?: ReactNode;
@@ -23,7 +23,7 @@ export interface DialFileIconProps {
23
23
  * @param extension - File extension string (with or without leading dot)
24
24
  * @param [size=baseIconProps.size] - Icon pixel size
25
25
  * @param [stroke=baseIconProps.stroke] - Tabler icon stroke width
26
- * @param [cssClass] - Additional classes on the container
26
+ * @param [className] - Additional classes on the container
27
27
  * @param [decorative=false] - Whether the icon should be hidden from assistive technologies
28
28
  * @param [label] - Accessible label when not decorative; defaults to "<EXT> file icon"
29
29
  * @param [indicator] - Optional indicator element to display alongside the icon
@@ -1,4 +1,4 @@
1
- import { FC, ReactNode } from 'react';
1
+ import { FC, ReactNode, Ref } from 'react';
2
2
  import { ColDef } from 'ag-grid-community';
3
3
  import { DialFile, DialRootFolder } from '../../models/file';
4
4
  import { DialFoldersTreeProps } from './components/FoldersTree/FoldersTree';
@@ -6,18 +6,41 @@ import { DialFileManagerNavigationPanelProps } from './components/FileManagerNav
6
6
  import { DialGridProps } from '../Grid/Grid';
7
7
  import { DialFileManagerToolbarProps } from './components/FileManagerToolbar/DialFileManagerToolbar';
8
8
  import { DialFileManagerBulkActionsToolbarProps } from './components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar';
9
- import { DialFileManagerActions, DialCopiedItem, DialDeletedItem } from '../../types/file-manager';
9
+ import { DialCopiedItem, DialDeletedItem, DialUploadFileItem, DialFileManagerActionsRef } from '../../models/file-manager';
10
10
  import { FileManagerGridRow } from './FileManagerContext';
11
11
  import { DestinationFolderPopupProps } from './components/DestinationFolderPopup/DestinationFolderPopup';
12
+ import { FileUploadValidationResult, FileUploadValidationMessages } from './hooks/use-file-upload';
13
+ import { DialFileManagerActions, FileManagerColumnKey } from '../../types/file-manager';
14
+ import { FolderCreationValidationMessages } from './hooks/use-folder-creation';
15
+ import { ConflictResolutionPopupProps } from './components/ConflictResolutionPopup/ConflictResolutionPopup';
16
+ import { RenameValidationMessages } from './hooks/use-item-renaming';
12
17
  type GridRow = FileManagerGridRow;
13
- export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolderPopupProps, 'setDestinationFolderPath' | 'destinationFolderPath' | 'addFolderLabel' | 'copyLabel' | 'moveLabel' | 'hiddenFilesSwitcherLabel'>;
18
+ export type DialFileManagerConflictResolutionPopupOptions = Omit<ConflictResolutionPopupProps, 'open' | 'onClose' | 'onReplace' | 'onDuplicate' | 'conflictingFiles'>;
19
+ export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolderPopupProps, 'setDestinationFolderPath' | 'destinationFolderPath' | 'addFolderLabel' | 'copyLabel' | 'moveLabel' | 'hiddenFilesSwitcherLabel' | 'title' | 'onCreateFolder' | 'onCreateFolderValidate' | 'folderCreationValidationMessages'> & {
20
+ getCopyHeader?: (itemsCount: number, itemName?: string) => string;
21
+ getMoveHeader?: (itemsCount: number, itemName?: string) => string;
22
+ };
23
+ export interface FileMetadataPopupOptions {
24
+ fileMetadata?: DialFile;
25
+ loading?: boolean;
26
+ clearMetadata?: () => void;
27
+ title?: string;
28
+ nameLabel?: string;
29
+ pathLabel?: string;
30
+ modifiedDateLabel?: string;
31
+ sizeLabel?: string;
32
+ authorLabel?: string;
33
+ }
14
34
  export interface FileTreeOptions extends Omit<DialFoldersTreeProps, 'items' | 'selectedPath' | 'onItemClick'> {
15
35
  width?: number;
16
36
  title?: string;
17
- containerCssClass?: string;
37
+ containerClassName?: string;
18
38
  additionalButtons?: ReactNode;
19
39
  collapsed?: boolean;
20
40
  onCollapseChange?: (collapsed: boolean) => void;
41
+ expandedPaths?: Set<string>;
42
+ loadedPaths?: Set<string>;
43
+ onExpandedPathsChange?: (expandedPaths: Set<string>) => void;
21
44
  actionLabels?: {
22
45
  [DialFileManagerActions.Duplicate]?: string;
23
46
  [DialFileManagerActions.Copy]?: string;
@@ -25,6 +48,7 @@ export interface FileTreeOptions extends Omit<DialFoldersTreeProps, 'items' | 's
25
48
  [DialFileManagerActions.Download]?: string;
26
49
  [DialFileManagerActions.Delete]?: string;
27
50
  [DialFileManagerActions.Move]?: string;
51
+ [DialFileManagerActions.Unshare]?: string;
28
52
  };
29
53
  }
30
54
  export interface DeleteConfirmationOptions {
@@ -39,9 +63,26 @@ export interface GridOptions extends Omit<DialGridProps<GridRow>, 'rowData' | 'c
39
63
  filterable?: boolean;
40
64
  dateLocale?: Intl.LocalesArgument;
41
65
  dateOptions?: Intl.DateTimeFormatOptions;
66
+ visibleColumns?: FileManagerColumnKey[];
67
+ actionLabels?: {
68
+ [DialFileManagerActions.Duplicate]?: string;
69
+ [DialFileManagerActions.Copy]?: string;
70
+ [DialFileManagerActions.Rename]?: string;
71
+ [DialFileManagerActions.Download]?: string;
72
+ [DialFileManagerActions.Delete]?: string;
73
+ [DialFileManagerActions.Move]?: string;
74
+ [DialFileManagerActions.Info]?: string;
75
+ [DialFileManagerActions.Unshare]?: string;
76
+ };
42
77
  }
43
- export type ToolbarOptions = Omit<DialFileManagerToolbarProps, 'areHiddenFilesVisible' | 'onToggleHiddenFiles'>;
44
- export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection' | 'actions'> & {
78
+ export type ToolbarOptions = Omit<DialFileManagerToolbarProps, 'areHiddenFilesVisible' | 'onToggleHiddenFiles'> & {
79
+ newActionLabels?: {
80
+ uploadFiles?: string;
81
+ newFolder?: string;
82
+ uploadArchive?: string;
83
+ };
84
+ };
85
+ export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection' | 'actions' | 'selectedCount'> & {
45
86
  actionLabels?: {
46
87
  [DialFileManagerActions.Duplicate]?: string;
47
88
  [DialFileManagerActions.Copy]?: string;
@@ -57,10 +98,11 @@ export interface CreateFolderValidationMessages {
57
98
  }
58
99
  export interface DialFileManagerProps {
59
100
  path?: string;
60
- cssClass?: string;
101
+ className?: string;
61
102
  items?: DialFile[];
62
103
  rootItem?: DialRootFolder;
63
104
  filesLoading?: boolean;
105
+ sharedByMePaths?: Set<string>;
64
106
  showHiddenFiles?: boolean;
65
107
  onShowHiddenFilesChange?: (value: boolean) => void;
66
108
  treeOptions?: FileTreeOptions;
@@ -70,19 +112,28 @@ export interface DialFileManagerProps {
70
112
  bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
71
113
  deleteConfirmationOptions?: DeleteConfirmationOptions;
72
114
  destinationFolderPopupOptions?: DialFileManagerDestinationFolderPopupOptions;
115
+ conflictResolutionPopupOptions?: DialFileManagerConflictResolutionPopupOptions;
116
+ compactViewWidthBreakpoint?: number;
73
117
  onPathChange?: (nextPath?: string) => void;
74
118
  onTableFileClick?: (file: GridRow) => void;
75
119
  onCopyFiles?: (items: DialCopiedItem[], destinationFolder: string) => void;
76
120
  onMoveToFiles?: (items: DialCopiedItem[], sourceFolder: string, destinationFolder: string) => void;
77
121
  onDeleteFiles?: (items: DialDeletedItem[], sourceFolder: string) => void;
78
122
  onDownloadFiles?: (items: DialFile[]) => void;
79
- onRename?: (itemPath: string) => void;
80
- onRenameSave?: (value: string) => void;
81
- onRenameCancel?: () => void;
82
123
  onRenameValidate?: (value: string, item: DialFile) => string | null;
83
- onCreateFolder?: (folderPath: string, file: File, name: string, bucket?: string) => void;
124
+ renameValidationMessages?: RenameValidationMessages;
125
+ onCreateFolder?: (file: DialUploadFileItem, folderPath: string, fileId: string) => void | Promise<void>;
84
126
  onCreateFolderValidate?: (name: string, parentFolder: DialFile) => string | null;
85
- createFolderValidationMessages?: CreateFolderValidationMessages;
127
+ folderCreationValidationMessages?: FolderCreationValidationMessages;
128
+ onUploadFiles?: (files: DialUploadFileItem[], destinationFolder: string) => void;
129
+ onValidateUpload?: (files: DialUploadFileItem[], existingFiles: DialFile[], destinationFolder: string) => FileUploadValidationResult | Promise<FileUploadValidationResult>;
130
+ maxFileSize?: number;
131
+ uploadValidationMessages?: FileUploadValidationMessages;
132
+ onUploadArchive?: (file: File, name: string, destinationFolder: string) => void;
133
+ fileMetadataPopupOptions?: FileMetadataPopupOptions;
134
+ onGetInfo?: (file: DialFile) => void | Promise<void>;
135
+ onUnshareFile?: (file: DialFile) => void | Promise<void>;
136
+ actionsRef?: Ref<DialFileManagerActionsRef>;
86
137
  }
87
138
  /**
88
139
  * File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.
@@ -130,7 +181,7 @@ export interface DialFileManagerProps {
130
181
  * ```
131
182
  *
132
183
  * @param [path] - Absolute path of the current location (e.g. "/All files/Design/Icons")
133
- * @param [cssClass] - Additional classes for the root container
184
+ * @param [className] - Additional classes for the root container
134
185
  * @param [items] - Full hierarchical list of files and folders used by both tree and grid
135
186
  * @param [rootItem] - Optional root folder item to represent the top-level container in the tree
136
187
  * @param [filesLoading=false] - When true, shows skeleton loading state in the grid
@@ -142,12 +193,22 @@ export interface DialFileManagerProps {
142
193
  * @param [bulkActionsToolbarOptions] - Options for the bulk actions toolbar shown when items are selected
143
194
  * @param [deleteConfirmationOptions] - Options for the delete confirmation popup
144
195
  *
196
+ * @param [compactViewWidthBreakpoint=DEFAULT_COMPACT_VIEW_WIDTH_BREAKPOINT] - Width (px) below which the component switches to compact view.
197
+ *
145
198
  * @param [onPathChange] - Callback fired when user navigates via tree or breadcrumb
146
199
  * @param [onTableFileClick] - Callback fired when a file row is clicked in the grid
147
200
  *
148
201
  * @param [onCopyFiles] - Callback fired when files copy-paste
149
202
  * @param [onMoveToFiles] - Callback fired when files cut-paste or rename
150
203
  * @param [onDeleteFiles] - Callback fired when files are deleted
204
+ *
205
+ * @param [onDownloadFiles] - Callback fired when files are downloaded
206
+ *
207
+ * @param [onUploadArchive] - Callback fired when archive files are uploaded
208
+ *
209
+ * @param [sharedByMePaths] - Set of items paths that the user has shared with others. Enables UI indicators (icons/badges) in the tree and grid.
210
+ *
211
+ * @param [actionsRef] - Ref exposing a limited set of imperative File Manager actions (e.g., creating a folder). Allows parent components to trigger internal behaviors programmatically. This ref is not a DOM ref and should be used only for invoking the component’s public actions API.
151
212
  */
152
213
  export declare const DialFileManager: FC<DialFileManagerProps>;
153
214
  /**
@@ -1,6 +1,11 @@
1
+ import { DragEvent, Ref, RefObject } from 'react';
1
2
  import { DialFile, DialRootFolder, DialFileNodeType } from '../../models/file';
2
- import { FileTreeOptions, NavigationPanelOptions, GridOptions, ToolbarOptions, BulkActionsToolbarOptions, DialFileManagerProps, DeleteConfirmationOptions, DialFileManagerDestinationFolderPopupOptions } from './FileManager';
3
- import { DestinationFolderMode } from './hooks/use-file-clipboard';
3
+ import { FileTreeOptions, NavigationPanelOptions, GridOptions, ToolbarOptions, BulkActionsToolbarOptions, DialFileManagerProps, DeleteConfirmationOptions, DialFileManagerDestinationFolderPopupOptions, DialFileManagerConflictResolutionPopupOptions, FileMetadataPopupOptions } from './FileManager';
4
+ import { FileUploadValidationMessages } from './hooks/use-file-upload';
5
+ import { DropdownItem } from '../../models/dropdown';
6
+ import { FileConflictDecision } from './components/ConflictResolutionPopup/ConflictResolutionPopup';
7
+ import { DestinationFolderMode } from '../../types/file-manager';
8
+ import { DialFileManagerActionsRef } from '../../models/file-manager';
4
9
  export interface FileManagerGridRow {
5
10
  id: string;
6
11
  name: string;
@@ -10,9 +15,11 @@ export interface FileManagerGridRow {
10
15
  path: string;
11
16
  nodeType: DialFileNodeType;
12
17
  extension?: string;
18
+ isTemporary?: boolean;
19
+ owner?: string;
13
20
  }
14
21
  export interface FileManagerContextValue {
15
- cssClass?: string;
22
+ className?: string;
16
23
  items: DialFile[];
17
24
  rootItem?: DialRootFolder;
18
25
  filesLoading?: boolean;
@@ -23,6 +30,9 @@ export interface FileManagerContextValue {
23
30
  bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
24
31
  deleteConfirmationOptions?: DeleteConfirmationOptions;
25
32
  destinationFolderPopupOptions?: DialFileManagerDestinationFolderPopupOptions;
33
+ conflictResolutionPopupOptions?: DialFileManagerConflictResolutionPopupOptions;
34
+ fileMetadataPopupOptions?: FileMetadataPopupOptions;
35
+ compactViewWidthBreakpoint?: number;
26
36
  currentPath?: string;
27
37
  setCurrentPath: (p?: string) => void;
28
38
  searchValue: string;
@@ -40,7 +50,7 @@ export interface FileManagerContextValue {
40
50
  currentFolder?: DialFile;
41
51
  gridRows: FileManagerGridRow[];
42
52
  handleCopyTo: (destinationFolder: string) => void;
43
- handleMoveTo: (destinationFolder: string, sourceFolder: string) => void;
53
+ handleMoveTo: (destinationFolder: string, sourceFolder?: string) => void;
44
54
  handleDuplicate: (files: DialFile[]) => void;
45
55
  handleOpenDestinationFolderPopup: (mode: DestinationFolderMode) => void;
46
56
  handleCloseDestinationFolderPopup: () => void;
@@ -49,10 +59,12 @@ export interface FileManagerContextValue {
49
59
  handleSetCopiedFiles: (files: DialFile[]) => void;
50
60
  handleSetMovedFiles: (files: DialFile[]) => void;
51
61
  renamedPath?: string;
62
+ renamedItem?: DialFile;
52
63
  onRename: (file: string) => void;
53
64
  onRenameSave: (value: string) => void;
54
65
  onRenameCancel: () => void;
55
66
  onRenameValidate: (value: string, item: DialFile) => string | null;
67
+ getDisplayName: (item: DialFile) => string;
56
68
  openDeleteConfirmation: (items: DialFile[], parentFolderPath: string) => void;
57
69
  closeDeleteConfirmation: () => void;
58
70
  confirmDelete: () => void;
@@ -65,5 +77,47 @@ export interface FileManagerContextValue {
65
77
  handleTableRowClick: (row: FileManagerGridRow) => void;
66
78
  onTableFileClick?: DialFileManagerProps['onTableFileClick'];
67
79
  handleDownloadFiles: (items: DialFile[]) => void;
80
+ isDragging: boolean;
81
+ isDraggingOverWindow: boolean;
82
+ uploadError?: string;
83
+ handleDragEnter: (e: DragEvent) => void;
84
+ handleDragLeave: (e: DragEvent) => void;
85
+ handleDragOver: (e: DragEvent) => void;
86
+ handleDrop: (e: DragEvent) => void;
87
+ clearUploadError: () => void;
88
+ onUploadFiles?: DialFileManagerProps['onUploadFiles'];
89
+ onValidateUpload?: DialFileManagerProps['onValidateUpload'];
90
+ maxFileSize?: number;
91
+ uploadValidationMessages?: FileUploadValidationMessages;
92
+ newActions: DropdownItem[];
93
+ isNewButtonVisible: boolean;
94
+ openFileDialog: () => void;
95
+ fileInputRef: RefObject<HTMLInputElement | null>;
96
+ isCreatingFolder: boolean;
97
+ newFolderTempId: string | null;
98
+ startFolderCreation: () => void;
99
+ cancelFolderCreation: () => void;
100
+ saveFolderCreation: (name: string) => Promise<void>;
101
+ validateFolderName: (name: string) => string | null;
102
+ conflictingFiles: DialFile[];
103
+ conflictResolutionOpen: boolean;
104
+ closeConflictResolution: () => void;
105
+ handleConflictReplace: () => void;
106
+ handleConflictDuplicate: () => void;
107
+ handleConflictDecideForEach: (decisions: FileConflictDecision[]) => void;
108
+ uploadConflictingFiles: DialFile[];
109
+ uploadConflictResolutionOpen: boolean;
110
+ closeUploadConflictResolution: () => void;
111
+ handleUploadConflictReplace: () => void;
112
+ handleUploadConflictDuplicate: () => void;
113
+ handleUploadConflictDecideForEach: (decisions: FileConflictDecision[]) => void;
114
+ isMetadataPopupOpen: boolean;
115
+ selectedFileForMetadata?: DialFile;
116
+ openMetadataPopup: (file: DialFile) => void;
117
+ closeMetadataPopup: () => void;
118
+ onGetInfo?: (file: DialFile) => void | Promise<void>;
119
+ onUnshareFile?: (file: DialFile) => void | Promise<void>;
120
+ actionsRef?: Ref<DialFileManagerActionsRef>;
121
+ sharedByMePaths?: Set<string>;
68
122
  }
69
123
  export declare const FileManagerContext: import('react').Context<FileManagerContextValue | undefined>;
@@ -13,6 +13,7 @@ export interface FileManagerProviderProps extends Omit<DialFileManagerProps, 'ch
13
13
  * - clipboard (copy / cut / paste)
14
14
  * - delete confirmation state
15
15
  * - computed grid rows
16
+ * - new actions
16
17
  *
17
18
  */
18
19
  export declare const FileManagerProvider: FC<FileManagerProviderProps>;
@@ -0,0 +1,92 @@
1
+ import { FC } from 'react';
2
+ import { DialFile } from '../../../../models/file';
3
+ import { DialFileManagerConflictActions, DialFileManagerConflictStrategies } from '../../../../types/file-manager';
4
+ export interface FileConflictDecision {
5
+ file: DialFile;
6
+ action: DialFileManagerConflictActions;
7
+ }
8
+ export interface ConflictResolutionPopupProps {
9
+ open: boolean;
10
+ onClose: () => void;
11
+ onReplace: () => void;
12
+ onDuplicate: () => void;
13
+ onDecideForEach?: (decisions: FileConflictDecision[]) => void;
14
+ conflictingFiles: DialFile[];
15
+ title?: string;
16
+ singleFileTitle?: string;
17
+ multipleFilesTitle?: string;
18
+ message?: string;
19
+ actionLabels?: {
20
+ [DialFileManagerConflictActions.Replace]?: string;
21
+ [DialFileManagerConflictActions.Duplicate]?: string;
22
+ [DialFileManagerConflictActions.Cancel]?: string;
23
+ };
24
+ strategyLabels?: {
25
+ [DialFileManagerConflictStrategies.ReplaceAll]?: string;
26
+ [DialFileManagerConflictStrategies.DuplicateAll]?: string;
27
+ [DialFileManagerConflictStrategies.DecideForEach]?: string;
28
+ };
29
+ confirmLabel?: string;
30
+ cancelLabel?: string;
31
+ nameColumnLabel?: string;
32
+ actionColumnLabel?: string;
33
+ }
34
+ /**
35
+ * ConflictResolutionPopup
36
+ *
37
+ * A popup dialog for resolving file name conflicts during copy or move operations.
38
+ * Shows different UI based on number of conflicting files:
39
+ * - Single file: Simple Replace/Duplicate choice with radio buttons
40
+ * - Multiple files: Replace all / Duplicate all / Decide for each strategy with optional grid
41
+ *
42
+ * When "Decide for each" is selected, displays a grid with dropdown selectors for individual
43
+ * file resolution (Replace/Duplicate/Cancel).
44
+ *
45
+ * @example
46
+ * ```tsx
47
+ * // Single file conflict
48
+ * <ConflictResolutionPopup
49
+ * open={isOpen}
50
+ * onClose={handleClose}
51
+ * onReplace={handleReplace}
52
+ * onDuplicate={handleDuplicate}
53
+ * conflictingFiles={[file]}
54
+ * />
55
+ *
56
+ * // Multiple files with custom labels
57
+ * <ConflictResolutionPopup
58
+ * open={isOpen}
59
+ * onClose={handleClose}
60
+ * onReplace={handleReplaceAll}
61
+ * onDuplicate={handleDuplicateAll}
62
+ * onDecideForEach={handleDecisions}
63
+ * conflictingFiles={files}
64
+ * actionLabels={{
65
+ * [DialFileManagerConflictActions.Replace]: 'Overwrite',
66
+ * [DialFileManagerConflictActions.Duplicate]: 'Keep Both',
67
+ * }}
68
+ * strategyLabels={{
69
+ * [DialFileManagerConflictStrategies.ReplaceAll]: 'Overwrite All',
70
+ * [DialFileManagerConflictStrategies.DuplicateAll]: 'Keep All',
71
+ * }}
72
+ * />
73
+ * ```
74
+ *
75
+ * @param open - Whether the popup is visible
76
+ * @param onClose - Callback fired when the popup is closed
77
+ * @param onReplace - Callback fired when Replace/Replace All is confirmed
78
+ * @param onDuplicate - Callback fired when Duplicate/Duplicate All is confirmed
79
+ * @param [onDecideForEach] - Callback fired when individual decisions are confirmed; receives array of decisions
80
+ * @param conflictingFiles - Array of files with name conflicts
81
+ * @param [title] - Custom title (overrides singleFileTitle and multipleFilesTitle)
82
+ * @param [singleFileTitle="Replace Or Duplicate Item"] - Title for single file conflicts
83
+ * @param [multipleFilesTitle="Replace Or Duplicate Items"] - Title for multiple file conflicts
84
+ * @param [message] - Custom message (overrides default conflict description)
85
+ * @param [actionLabels] - Custom labels for conflict actions (Replace/Duplicate/Cancel)
86
+ * @param [strategyLabels] - Custom labels for conflict strategies (Replace all/Duplicate all/Decide for each)
87
+ * @param [confirmLabel="Confirm"] - Label for the confirm button
88
+ * @param [cancelLabel="Cancel"] - Label for the cancel button
89
+ * @param [nameColumnLabel="Name"] - Label for the file name column in the grid
90
+ * @param [actionColumnLabel="Action"] - Label for the action column in the grid
91
+ */
92
+ export declare const ConflictResolutionPopup: FC<ConflictResolutionPopupProps>;
@@ -11,6 +11,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
11
11
  addFolderLabel?: string;
12
12
  hiddenFilesSwitcherLabel?: string;
13
13
  mode?: 'copy' | 'move';
14
+ title?: string;
14
15
  }
15
16
  /**
16
17
  * DestinationFolderPopup
@@ -26,6 +27,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
26
27
  * onClose={handleClose}
27
28
  * onConfirm={handleConfirm}
28
29
  * mode="copy"
30
+ * title="Copy 3 files"
29
31
  * items={files}
30
32
  * rootItem={rootFolder}
31
33
  * path={currentPath}
@@ -36,11 +38,12 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
36
38
  * @param open - Whether the popup is visible
37
39
  * @param onClose - Callback fired when the popup is closed
38
40
  * @param [onConfirm] - Callback fired when the confirm button is clicked
39
- * @param [mode="copy"] - Operation mode: 'copy' or 'move'
41
+ * @param [mode=DestinationFolderMode.Copy] - Operation mode: 'copy' or 'move'
40
42
  * @param [copyLabel="Copy"] - Label for the copy button
41
43
  * @param [moveLabel="Move"] - Label for the move button
42
44
  * @param [addFolderLabel="Add folder"] - Label for the add folder button
43
45
  * @param [hiddenFilesSwitcherLabel="Show hidden files"] - Label for the hidden files toggle
46
+ * @param [title] - Custom title for the popup header
44
47
  * @param items - Array of files to display in the File Manager
45
48
  * @param rootItem - Root folder item
46
49
  * @param path - Current path in the File Manager
@@ -0,0 +1,56 @@
1
+ import { FC } from 'react';
2
+ import { DialFileNodeType } from '../../../../models/file';
3
+ interface DialFileManagerItemSummaryCellProps {
4
+ id: string;
5
+ name: string;
6
+ nodeType: DialFileNodeType;
7
+ size?: string;
8
+ updatedAt?: string;
9
+ shared?: boolean;
10
+ dateLocale?: Intl.LocalesArgument;
11
+ dateOptions?: Intl.DateTimeFormatOptions;
12
+ }
13
+ /**
14
+ * Renders file or folder details inside the File Manager list/grid item.
15
+ *
16
+ * Displays the item name with an icon (via `DialFileManagerItemName`),
17
+ * followed by a small details row:
18
+ *
19
+ * - File size (e.g., `"15 KB"`)
20
+ * - A separator dot
21
+ * - Formatted update date (via `DialDateCellRenderer`)
22
+ *
23
+ * The component automatically determines whether to show a **file** or **folder**
24
+ * icon based on `nodeType`.
25
+ *
26
+ * ### Example
27
+ * ```tsx
28
+ * <DialFileManagerItemSummaryCell
29
+ * id="42"
30
+ * name="Report.pdf"
31
+ * nodeType={DialFileNodeType.FILE}
32
+ * size="220 KB"
33
+ * updatedAt="2025-07-20T00:00:00Z"
34
+ * dateLocale="en-US"
35
+ * dateOptions={{ timeZone: 'UTC' }}
36
+ * />
37
+ *
38
+ * <DialFileManagerItemSummaryCell
39
+ * id="folder-1"
40
+ * name="Projects"
41
+ * nodeType={DialFileNodeType.FOLDER}
42
+ * size="—"
43
+ * updatedAt={undefined}
44
+ * />
45
+ * ```
46
+ *
47
+ * @param id - Unique identifier passed to `DialFileManagerItemName` as `elementId`.
48
+ * @param name - File or folder display name.
49
+ * @param nodeType - Determines whether the item renders as a **File** or **Folder**.
50
+ * @param size - Human-readable file size (e.g., `"15 KB"`). May be `"—"` or omitted.
51
+ * @param updatedAt - Date or timestamp passed to `DialDateCellRenderer`. If invalid or missing, renders `"—"`.
52
+ * @param dateLocale - Optional locale override for date formatting (e.g., `"fr-FR"`).
53
+ * @param dateOptions - Optional `Intl.DateTimeFormat` configuration (e.g., `{ timeZone: 'UTC' }`).
54
+ */
55
+ export declare const DialFileManagerItemSummaryCell: FC<DialFileManagerItemSummaryCellProps>;
56
+ export {};
@@ -4,9 +4,10 @@ export interface DialActionDropdownItem extends DropdownItem {
4
4
  title: string;
5
5
  }
6
6
  export interface DialFileManagerBulkActionsToolbarProps {
7
- selectionLabel: string;
7
+ getSelectionLabel: (selectedCount: number) => string;
8
8
  onClearSelection: () => void;
9
9
  actions: DialActionDropdownItem[];
10
+ selectedCount: number;
10
11
  }
11
12
  /**
12
13
  * A responsive toolbar component displayed when files or items are selected
@@ -33,7 +34,7 @@ export interface DialFileManagerBulkActionsToolbarProps {
33
34
  * @example
34
35
  * ```tsx
35
36
  * <DialFileManagerSelectionToolbar
36
- * selectionLabel="3 files selected"
37
+ * getSelectionLabel={(count) => `${count} files selected`}
37
38
  * onClearSelection={() => console.log('Cleared')}
38
39
  * actions={[
39
40
  * { key: 'download', title: 'Download', icon: <IconDownload />, onClick: () => {} },
@@ -43,10 +44,11 @@ export interface DialFileManagerBulkActionsToolbarProps {
43
44
  * ```
44
45
  *
45
46
  * @param {object} props
46
- * @param {string} props.selectionLabel - Label showing current selection status (e.g., "3 files selected").
47
+ * @param {() => string} props.getSelectionLabel - Function to get the label showing current selection status (e.g., "3 files selected").
47
48
  * @param {() => void} props.onClearSelection - Callback invoked when the clear selection button is clicked.
48
49
  * @param {DialActionDropdownItem[]} props.actions - List of available toolbar actions.
49
50
  * Each action defines a title, icon, key, and optional click handler.
51
+ * @param {number} [props.selectedCount] - Count of currently selected items.
50
52
  *
51
53
  * @returns {JSX.Element} A responsive toolbar that adjusts visible actions based on available width.
52
54
  */
@@ -38,7 +38,7 @@ export interface DialFileManagerItemIconProps extends Omit<DialFileIconProps, 'e
38
38
  * @param {boolean} [props.loading=false] - Whether to display the loading state.
39
39
  * @param {number} [props.size] - Optional icon size override.
40
40
  * @param {number} [props.stroke] - Optional icon stroke width override.
41
- * @param {string} [props.cssClass] - Optional CSS class for styling.
41
+ * @param {string} [props.className] - Optional CSS class for styling.
42
42
  * @param {boolean} [props.decorative] - Whether the icon is decorative (for accessibility).
43
43
  * @param {string} [props.label] - Accessible label for screen readers.
44
44
  * @param {ReactNode} [props.indicator] - Optional indicator to display over the icon.
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import { FC, ReactNode } from 'react';
2
2
  import { DialFileManagerItemNameInputProps } from '../FileManagerItemNameInput/FileManagerItemNameInput';
3
3
  import { DialItemType } from '../../../../types/item';
4
4
  export interface DialFileManagerItemNameProps extends DialFileManagerItemNameInputProps {
@@ -8,6 +8,7 @@ export interface DialFileManagerItemNameProps extends DialFileManagerItemNameInp
8
8
  editing?: boolean;
9
9
  loading?: boolean;
10
10
  shared?: boolean;
11
+ details?: ReactNode;
11
12
  validate?: (value: string) => string | null;
12
13
  onSave?: (value: string) => void;
13
14
  onCancel?: () => void;
@@ -8,11 +8,12 @@ export interface DialFileManagerItemNameInputProps {
8
8
  elementId: string;
9
9
  iconSize?: number;
10
10
  iconStroke?: number;
11
- iconCssClass?: string;
11
+ iconClassName?: string;
12
12
  iconLabel?: string;
13
13
  iconIndicator?: ReactNode;
14
14
  inputInvalid?: boolean;
15
15
  inputInvalidMessage?: string;
16
+ inputContainerClassName?: string;
16
17
  inputIconAfter?: ReactNode;
17
18
  inputRef?: Ref<HTMLInputElement>;
18
19
  onChange?: (value?: string) => void;
@@ -53,12 +54,13 @@ export interface DialFileManagerItemNameInputProps {
53
54
  * @param {boolean} [props.loading=false] - Whether the icon is loading.
54
55
  * @param {number} [props.iconSize] - Optional size override for the icon.
55
56
  * @param {number} [props.iconStroke] - Optional stroke width override for the icon.
56
- * @param {string} [props.iconCssClass] - Optional CSS class for the icon.
57
+ * @param {string} [props.iconClassName] - Optional CSS class for the icon.
57
58
  * @param {string} [props.iconLabel] - Optional accessible label for the icon.
58
59
  * @param {ReactNode} [props.iconIndicator] - Optional indicator to render over the icon.
59
60
  * @param {boolean} [props.inputInvalid=false] - Marks the input as invalid.
60
61
  * @param {string} [props.inputInvalidMessage] - Tooltip message shown when invalid.
61
62
  * @param {ReactNode} [props.inputIconAfter] - Optional icon shown after the input (defaults to an error icon).
63
+ * @param {string} [props.inputContainerClassName] - Additional CSS classes applied to the input container.
62
64
  * @param {Ref<HTMLInputElement>} [props.inputRef] - Ref to access the underlying input element.
63
65
  * @param {(value: string) => void} [props.onChange] - Callback fired when input value changes.
64
66
  */