@epam/ai-dial-ui-kit 0.5.0-rc.4 → 0.5.0-rc.41

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 (53) hide show
  1. package/README.md +3 -3
  2. package/dist/dial-ui-kit.cjs.js +28 -28
  3. package/dist/dial-ui-kit.es.js +9348 -8601
  4. package/dist/index.css +2 -2
  5. package/dist/src/components/Alert/Alert.d.ts +2 -2
  6. package/dist/src/components/Alert/constants.d.ts +2 -2
  7. package/dist/src/components/Breadcrumb/Breadcrumb.d.ts +8 -8
  8. package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts +2 -2
  9. package/dist/src/components/Breadcrumb/constants.d.ts +10 -10
  10. package/dist/src/components/Button/Button.d.ts +10 -18
  11. package/dist/src/components/CloseButton/CloseButton.d.ts +3 -3
  12. package/dist/src/components/DraggableItem/DraggableItem.d.ts +8 -8
  13. package/dist/src/components/DraggableItem/constants.d.ts +2 -2
  14. package/dist/src/components/Dropdown/Dropdown.d.ts +2 -0
  15. package/dist/src/components/Dropdown/constants.d.ts +1 -1
  16. package/dist/src/components/Field/Field.d.ts +4 -6
  17. package/dist/src/components/FileManager/FileManager.d.ts +52 -3
  18. package/dist/src/components/FileManager/FileManagerContext.d.ts +29 -1
  19. package/dist/src/components/FileManager/FileManagerProvider.d.ts +1 -0
  20. package/dist/src/components/FileManager/components/FileManagerToolbar/DialFileManagerToolbar.d.ts +13 -13
  21. package/dist/src/components/FileManager/components/FoldersTree/FoldersTree.d.ts +1 -0
  22. package/dist/src/components/FileManager/components/FoldersTree/hooks/use-expanded-paths.d.ts +13 -0
  23. package/dist/src/components/FileManager/constants.d.ts +3 -0
  24. package/dist/src/components/FileManager/hooks/__tests__/use-file-upload.spec.d.ts +1 -0
  25. package/dist/src/components/FileManager/hooks/use-bulk-actions.d.ts +22 -0
  26. package/dist/src/components/FileManager/hooks/use-file-clipboard.d.ts +1 -1
  27. package/dist/src/components/FileManager/hooks/use-file-delete.d.ts +1 -1
  28. package/dist/src/components/FileManager/hooks/use-file-upload.d.ts +34 -0
  29. package/dist/src/components/FileManager/hooks/use-folder-creation.d.ts +21 -0
  30. package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts +20 -0
  31. package/dist/src/components/FileManager/hooks/use-item-renaming.d.ts +1 -1
  32. package/dist/src/components/FileManager/hooks/use-new-actions.d.ts +16 -0
  33. package/dist/src/components/FileName/FileName.d.ts +2 -0
  34. package/dist/src/components/FolderName/FolderName.d.ts +4 -1
  35. package/dist/src/components/Grid/Grid.d.ts +16 -3
  36. package/dist/src/components/Grid/hooks/use-grid-selection.d.ts +7 -4
  37. package/dist/src/components/Icon/Icon.d.ts +0 -1
  38. package/dist/src/components/Loader/Loader.d.ts +5 -5
  39. package/dist/src/components/Loader/constants.d.ts +2 -2
  40. package/dist/src/components/NoDataContent/NoDataContent.d.ts +6 -3
  41. package/dist/src/components/RemoveButton/RemoveButton.d.ts +6 -8
  42. package/dist/src/components/Select/Select.d.ts +7 -1
  43. package/dist/src/components/Select/constants.d.ts +2 -1
  44. package/dist/src/components/SelectField/SelectField.d.ts +1 -1
  45. package/dist/src/components/Tab/Tab.d.ts +4 -4
  46. package/dist/src/components/Tabs/Tabs.d.ts +9 -9
  47. package/dist/src/index.d.ts +2 -1
  48. package/dist/src/models/breadcrumb.d.ts +1 -1
  49. package/dist/src/models/file-manager.d.ts +15 -0
  50. package/dist/src/models/tab.d.ts +2 -1
  51. package/dist/src/types/file-manager.d.ts +0 -11
  52. package/dist/src/types/tab.d.ts +1 -1
  53. package/package.json +4 -4
@@ -10,10 +10,10 @@ export interface DialFileManagerToolbarProps {
10
10
  hiddenFilesSwitcherLabel?: string;
11
11
  showHiddenFilesLabel?: string;
12
12
  hideHiddenFilesLabel?: string;
13
- isCreateButtonVisible?: boolean;
14
- createButtonVariant?: ButtonVariant;
15
- createButtonDropdownItems?: DropdownItem[];
16
- createButtonLabel?: string;
13
+ isNewButtonVisible?: boolean;
14
+ newButtonVariant?: ButtonVariant;
15
+ newButtonDropdownItems?: DropdownItem[];
16
+ newButtonLabel?: string;
17
17
  onTabChange?: (id: DialFileManagerTabs) => void;
18
18
  onToggleHiddenFiles?: (value: boolean) => void;
19
19
  }
@@ -24,7 +24,7 @@ export interface DialFileManagerToolbarProps {
24
24
  * - Tab navigation for switching between file sections or views
25
25
  * - A toggle for showing or hiding hidden files
26
26
  * - A refresh button for reloading content
27
- * - An optional "Create" button or dropdown for creating new files or folders
27
+ * - An optional "New" button or dropdown for creating new files or folders
28
28
  *
29
29
  * @example
30
30
  * ```tsx
@@ -40,8 +40,8 @@ export interface DialFileManagerToolbarProps {
40
40
  * onTabChange={(id) => console.log('Switched to tab:', id)}
41
41
  * onToggleHiddenFiles={(visible) => console.log('Hidden files visible:', visible)}
42
42
  * onRefresh={() => console.log('Refreshed')}
43
- * isCreateButtonVisible
44
- * createButtonDropdownItems={[
43
+ * isNewButtonVisible
44
+ * newButtonDropdownItems={[
45
45
  * { key: 'folder', label: 'New Folder' },
46
46
  * { key: 'file', label: 'Upload File' },
47
47
  * ]}
@@ -56,16 +56,16 @@ export interface DialFileManagerToolbarProps {
56
56
  * @param [hideHiddenFilesLabel='Hide hidden'] - Label shown when hidden files are visible.
57
57
  * @param [onTabChange] - Callback fired when the user switches between tabs. Receives the selected tab ID.
58
58
  * @param [onToggleHiddenFiles] - Callback fired when the hidden files visibility is toggled. Receives the new visibility state.
59
- * @param [isCreateButtonVisible] - Whether the "Create" button or dropdown should be displayed.
60
- * @param [createButtonVariant=ButtonVariant.Secondary] - Visual style variant for the create button.
61
- * @param [createButtonDropdownItems=[]] - Dropdown items available under the create button. If empty, a single create button is shown instead.
62
- * @param [createButtonLabel='Create'] - Label text for the create button.
59
+ * @param [isNewButtonVisible] - Whether the "New" button or dropdown should be displayed.
60
+ * @param [newButtonVariant=ButtonVariant.Secondary] - Visual style variant for the new button.
61
+ * @param [newButtonDropdownItems=[]] - Dropdown items available under the new button. If empty, a single new button is shown instead.
62
+ * @param [newButtonLabel='New'] - Label text for the new button.
63
63
  *
64
64
  * @remarks
65
65
  * - Tabs are rendered via `DialTabs`.
66
66
  * - The hidden files toggle uses `DialSwitch`.
67
- * - The refresh and create actions use `DialButton` or dropdown variants for consistency.
67
+ * - The refresh and new actions use `DialButton` or dropdown variants for consistency.
68
68
  * - The toolbar automatically adapts its layout for different screen sizes.
69
- * - When `createButtonDropdownItems` is provided, the create button becomes a dropdown menu.
69
+ * - When `newButtonDropdownItems` is provided, the new button becomes a dropdown menu.
70
70
  */
71
71
  export declare const DialFileManagerToolbar: FC<DialFileManagerToolbarProps>;
@@ -17,6 +17,7 @@ export interface DialFoldersTreeProps {
17
17
  onRenameValidate?: (value: string, item: DialFile) => string | null;
18
18
  getContextMenuItems?: (item: DialFile) => DropdownItem[];
19
19
  areHiddenFilesVisible?: boolean;
20
+ onExpandedPathsChange?: (expandedPaths: Set<string>) => void;
20
21
  }
21
22
  /**
22
23
  * DialFoldersTree — A hierarchical folder tree component with nested expand/collapse support, selection highlighting,
@@ -0,0 +1,13 @@
1
+ export interface UseExpandedPathsOptions {
2
+ expandedPaths?: Set<string>;
3
+ onExpandedPathsChange?: (expandedPaths: Set<string>) => void;
4
+ }
5
+ export declare const useExpandedPaths: (options?: UseExpandedPathsOptions) => {
6
+ expandedPaths: Set<string>;
7
+ setExpandedPaths: (newSet: Set<string>) => void;
8
+ togglePath: (path: string) => void;
9
+ collapseAll: () => void;
10
+ expandPath: (path: string) => void;
11
+ collapsePath: (path: string) => void;
12
+ isControlled: boolean;
13
+ };
@@ -7,3 +7,6 @@ export declare const treeBaseClasses = "w-full h-full rounded bg-layer-3 text-se
7
7
  export declare const gridBaseClasses = "flex-1 w-full rounded text-secondary overflow-auto min-h-0 min-w-0";
8
8
  export declare const sidebarWidth = 280;
9
9
  export declare const sidebarTitleDefault = "Files";
10
+ export declare const BASE_FILE_MANAGER_ICON_SIZE = 20;
11
+ export declare const FILES_DATA_TRANSFER_TYPE = "Files";
12
+ export declare const FOLDER_PLACEHOLDER_FILE_NAME = ".dial_folder";
@@ -0,0 +1,22 @@
1
+ import { DialFile } from '../../../models/file';
2
+ import { DialFileManagerActions } from '../../../types/file-manager';
3
+ import { DialActionDropdownItem } from '../components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar';
4
+ export interface UseBulkActionsProps {
5
+ selectedFiles: Map<string, DialFile>;
6
+ actionLabels?: {
7
+ [DialFileManagerActions.Duplicate]?: string;
8
+ [DialFileManagerActions.Copy]?: string;
9
+ [DialFileManagerActions.Rename]?: string;
10
+ [DialFileManagerActions.Download]?: string;
11
+ [DialFileManagerActions.Delete]?: string;
12
+ [DialFileManagerActions.Move]?: string;
13
+ };
14
+ onDuplicate: (files: DialFile[]) => void;
15
+ onCopy: (files: DialFile[]) => void;
16
+ onMove: (files: DialFile[]) => void;
17
+ onDownload: (files: DialFile[]) => void;
18
+ onRename: (filePath: string) => void;
19
+ onDelete: (files: DialFile[], parentFolderPath: string) => void;
20
+ getCurrentFolderPath: () => string;
21
+ }
22
+ export declare const useBulkActions: ({ selectedFiles, actionLabels, onDuplicate, onCopy, onMove, onDownload, onDelete, getCurrentFolderPath, }: UseBulkActionsProps) => DialActionDropdownItem[];
@@ -1,5 +1,5 @@
1
1
  import { DialFile } from '../../../models/file';
2
- import { DialCopiedItem } from '../../../types/file-manager';
2
+ import { DialCopiedItem } from '../../../models/file-manager';
3
3
  export interface UseFileClipboardOptions {
4
4
  getDestinationFiles: (path: string) => DialFile[];
5
5
  getSourceFiles: () => DialFile[];
@@ -1,5 +1,5 @@
1
1
  import { DialFile } from '../../../models/file';
2
- import { DialDeletedItem } from '../../../types/file-manager';
2
+ import { DialDeletedItem } from '../../../models/file-manager';
3
3
  export interface UseFileDeleteOptions {
4
4
  onDeleteFiles?: (items: DialDeletedItem[], sourceFolder: string) => void;
5
5
  }
@@ -0,0 +1,34 @@
1
+ import { DragEvent } from 'react';
2
+ import { DialFile } from '../../../models/file';
3
+ import { DialUploadFileItem } from '../../../models/file-manager';
4
+ export interface FileUploadValidationResult {
5
+ valid: boolean;
6
+ message?: string;
7
+ }
8
+ export interface FileUploadValidationMessages {
9
+ duplicateFiles?: string;
10
+ oversizedFiles?: string;
11
+ validationFailed?: string;
12
+ validationError?: string;
13
+ }
14
+ export interface UseFileUploadOptions {
15
+ onUploadFiles?: (files: DialUploadFileItem[], destinationFolder: string) => void;
16
+ onValidateUpload?: (files: DialUploadFileItem[], existingFiles: DialFile[], destinationFolder: string) => FileUploadValidationResult | Promise<FileUploadValidationResult>;
17
+ maxFileSize?: number;
18
+ validationMessages?: FileUploadValidationMessages;
19
+ onUploadArchive?: (file: File, name: string, destinationFolder: string) => void;
20
+ }
21
+ export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileSize, validationMessages, onUploadArchive, }?: UseFileUploadOptions) => {
22
+ isDragging: boolean;
23
+ isDraggingOverWindow: boolean;
24
+ uploadError: string | undefined;
25
+ handleDragEnter: (e: DragEvent) => void;
26
+ handleDragLeave: (e: DragEvent) => void;
27
+ handleDragOver: (e: DragEvent) => void;
28
+ handleDrop: (e: DragEvent, destinationFolder: string, existingFiles: DialFile[]) => Promise<void>;
29
+ clearError: () => void;
30
+ handleUpload: (files: DialUploadFileItem[], destinationFolder: string, existingFiles: DialFile[]) => Promise<boolean>;
31
+ openFileDialog: (destinationFolder: string, existingFiles: DialFile[]) => void;
32
+ openArchiveDialog: (destinationFolder: string, existingFiles: DialFile[]) => void;
33
+ fileInputRef: import('react').RefObject<HTMLInputElement | null>;
34
+ };
@@ -0,0 +1,21 @@
1
+ import { DialFile } from '../../../models/file';
2
+ import { DialUploadFileItem } from '../../../models/file-manager';
3
+ export interface FolderCreationValidationMessages {
4
+ emptyName?: string;
5
+ duplicateName?: string;
6
+ }
7
+ export interface UseFolderCreationProps {
8
+ currentFolder?: DialFile;
9
+ onCreateFolder?: (file: DialUploadFileItem, folderPath: string, fileId: string) => void | Promise<void>;
10
+ onValidateFolderName?: (name: string, parentFolder: DialFile) => string | null;
11
+ validationMessages?: FolderCreationValidationMessages;
12
+ }
13
+ export interface UseFolderCreationResult {
14
+ isCreatingFolder: boolean;
15
+ newFolderTempId: string | null;
16
+ startFolderCreation: () => void;
17
+ cancelFolderCreation: () => void;
18
+ saveFolderCreation: (name: string) => Promise<void>;
19
+ validateFolderName: (name: string) => string | null;
20
+ }
21
+ export declare const useFolderCreation: ({ currentFolder, onCreateFolder, onValidateFolderName, validationMessages, }: UseFolderCreationProps) => UseFolderCreationResult;
@@ -0,0 +1,20 @@
1
+ import { DialFile } from '../../../models/file';
2
+ import { DialFileManagerActions } from '../../../types/file-manager';
3
+ import { DropdownItem } from '../../../models/dropdown';
4
+ export interface UseGridContextMenuProps {
5
+ actionLabels?: {
6
+ [DialFileManagerActions.Duplicate]?: string;
7
+ [DialFileManagerActions.Copy]?: string;
8
+ [DialFileManagerActions.Rename]?: string;
9
+ [DialFileManagerActions.Download]?: string;
10
+ [DialFileManagerActions.Delete]?: string;
11
+ [DialFileManagerActions.Move]?: string;
12
+ };
13
+ onDuplicate: (file: DialFile) => void;
14
+ onCopy: (file: DialFile) => void;
15
+ onMove: (file: DialFile) => void;
16
+ onDownload: (file: DialFile) => void;
17
+ onRename: (filePath: string) => void;
18
+ onDelete: (file: DialFile, parentFolderPath: string) => void;
19
+ }
20
+ export declare const useGridContextMenu: ({ actionLabels, onDuplicate, onCopy, onMove, onDownload, onRename, onDelete, }: UseGridContextMenuProps) => (file: DialFile) => DropdownItem[];
@@ -1,5 +1,5 @@
1
1
  import { DialFile } from '../../../models/file';
2
- import { DialCopiedItem } from '../../../types/file-manager';
2
+ import { DialCopiedItem } from '../../../models/file-manager';
3
3
  export declare const useItemRenaming: ({ items, onRename, onRenameSave, onRenameCancel, onRenameValidate, onMoveToFiles, }: {
4
4
  items?: DialFile[];
5
5
  onRename?: (path: string) => void;
@@ -0,0 +1,16 @@
1
+ import { DropdownItem } from '../../../models/dropdown';
2
+ export interface UseNewActionsProps {
3
+ newActionLabels?: {
4
+ uploadFiles?: string;
5
+ newFolder?: string;
6
+ uploadArchive?: string;
7
+ };
8
+ onUploadFiles?: () => void;
9
+ onCreateFolder?: () => void;
10
+ onUploadArchive?: () => void;
11
+ }
12
+ export interface UseNewActionsResult {
13
+ newActions: DropdownItem[];
14
+ isNewButtonVisible: boolean;
15
+ }
16
+ export declare const useNewActions: ({ newActionLabels, onUploadFiles, onCreateFolder, onUploadArchive, }: UseNewActionsProps) => UseNewActionsResult;
@@ -3,6 +3,7 @@ export interface DialFileNameProps {
3
3
  name: string;
4
4
  cssClass?: string;
5
5
  shared?: boolean;
6
+ iconSize?: number;
6
7
  }
7
8
  /**
8
9
  * Component to display a file name with a file icon and shared indicator.
@@ -16,5 +17,6 @@ export interface DialFileNameProps {
16
17
  * @param name - Full file name with or without extension
17
18
  * @param cssClass - Additional CSS classes for the root container
18
19
  * @param shared - Whether the file is shared
20
+ * @param iconSize - Icon size in px. Default: BASE_ICON_SIZE.
19
21
  */
20
22
  export declare const DialFileName: FC<DialFileNameProps>;
@@ -4,6 +4,7 @@ export interface DialFolderNameProps {
4
4
  cssClass?: string;
5
5
  shared?: boolean;
6
6
  loading?: boolean;
7
+ iconSize?: number;
7
8
  }
8
9
  /**
9
10
  * Component to display a folder name with a folder icon and shared indicator.
@@ -16,6 +17,8 @@ export interface DialFolderNameProps {
16
17
  *
17
18
  * @param name - Folder name
18
19
  * @param cssClass - Additional CSS classes for the root container
19
- * @param shared - Whether the folder is shared
20
+ * @param shared - If true, shows shared indicator. Default: false.
21
+ * @param loading - If true, shows loading state. Default: false.
22
+ * @param iconSize - Icon size in px. Default: BASE_ICON_SIZE.
20
23
  */
21
24
  export declare const DialFolderName: FC<DialFolderNameProps>;
@@ -11,13 +11,17 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
11
11
  withSelectionColumn?: boolean;
12
12
  wrapCustomCellRenderers?: boolean | ((col: ColDef<T>) => boolean);
13
13
  selectedRowIds?: Set<string>;
14
+ selectedRows?: Map<string, T>;
14
15
  onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
16
+ onSelectionChangeWithMap?: (selectedRows: Map<string, T>) => void;
15
17
  getRowId?: (row: T) => string;
16
18
  alternateOddRowColors?: boolean;
17
19
  filterPlaceholder?: string;
18
20
  emptyStateIcon?: ReactNode;
19
21
  emptyStateTitle?: string;
20
22
  emptyStateDescription?: string;
23
+ loading?: boolean;
24
+ wrapperBorder?: boolean;
21
25
  }
22
26
  /**
23
27
  * DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.
@@ -30,6 +34,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
30
34
  * - Controlled or uncontrolled selection modes
31
35
  * - Automatic column sizing and responsive behavior
32
36
  * - Full accessibility support with ARIA attributes
37
+ * - Loading state with native AG-Grid overlay
33
38
  *
34
39
  * @example
35
40
  * ```tsx
@@ -48,7 +53,13 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
48
53
  * <DialGrid<Product>
49
54
  * columnDefs={columns}
50
55
  * rowData={products}
51
- * storageKey="products-grid"
56
+ * />
57
+ *
58
+ * // With loading state
59
+ * <DialGrid<Product>
60
+ * columnDefs={columns}
61
+ * rowData={products}
62
+ * loading={true}
52
63
  * />
53
64
  *
54
65
  * // With context menu
@@ -93,6 +104,8 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
93
104
  * @param [emptyStateIcon] - Optional icon for empty state
94
105
  * @param [emptyStateTitle] - Optional title text displayed when the grid has no rows to show.
95
106
  * @param [emptyStateDescription] - Optional description text displayed below the empty state title,
96
- * providing additional context or instructions (e.g., No data found or Try adjusting your filters).
107
+ * providing additional context or instructions (e.g., "No data found" or "Try adjusting your filters").
108
+ * @param [loading=false] - When true, shows AG-Grid's native loading overlay
109
+ * @param [wrapperBorder=true] - Whether to apply a border around the grid container
97
110
  */
98
- 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;
111
+ 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, wrapperBorder, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,15 @@
1
- export interface UseGridSelectionProps<T> {
1
+ export interface UseGridSelectionProps<T extends object> {
2
2
  selectedRowIds?: Set<string>;
3
+ selectedRows?: Map<string, T>;
3
4
  onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
5
+ onSelectionChangeWithMap?: (selectedRows: Map<string, T>) => void;
4
6
  rowData?: T[];
5
7
  getRowId: (row: T) => string;
6
8
  }
7
- export declare const useGridSelection: <T extends object>({ selectedRowIds, onSelectionChange, rowData, getRowId, }: UseGridSelectionProps<T>) => {
9
+ export declare const useGridSelection: <T extends object>({ selectedRowIds, selectedRows, onSelectionChange, onSelectionChangeWithMap, rowData, getRowId, }: UseGridSelectionProps<T>) => {
8
10
  currentSelectedIds: Set<string>;
9
- handleSelectionToggle: (rowId: string, checked: boolean) => void;
11
+ currentSelectedRows: Map<string, T>;
12
+ handleSelectionToggle: (row: T, checked: boolean) => void;
10
13
  headerCheckboxState: string;
11
- handleHeaderCheckboxChange: () => void;
14
+ handleHeaderCheckboxChange: (checked?: boolean) => void;
12
15
  };
@@ -2,7 +2,6 @@ import { FC, ReactNode } from 'react';
2
2
  export interface DialIconProps {
3
3
  icon?: ReactNode;
4
4
  className?: string;
5
- label?: string;
6
5
  }
7
6
  /**
8
7
  * A wrapper component for rendering icons with consistent styling
@@ -1,8 +1,8 @@
1
1
  import { FC } from 'react';
2
2
  export interface DialLoaderProps {
3
3
  size?: number;
4
- cssClass?: string;
5
- iconClass?: string;
4
+ className?: string;
5
+ iconClassName?: string;
6
6
  fullWidth?: boolean;
7
7
  ariaLabel?: string;
8
8
  }
@@ -20,12 +20,12 @@ export interface DialLoaderProps {
20
20
  * <DialLoader fullWidth={false} />
21
21
  *
22
22
  * // Custom size and classes
23
- * <DialLoader size={24} iconClass="text-accent-primary" />
23
+ * <DialLoader size={24} iconClassName="text-accent-primary" />
24
24
  * ```
25
25
  *
26
26
  * @param [size=18] - Icon size in px
27
- * @param [cssClass] - Additional classes for the container
28
- * @param [iconClass] - Additional classes for the SVG icon
27
+ * @param [className] - Additional classes for the container
28
+ * @param [iconClassName] - Additional classes for the SVG icon
29
29
  * @param [fullWidth=true] - Stretch to full width/height of container
30
30
  * @param [ariaLabel='Loading'] - Accessible label for screen readers
31
31
  */
@@ -1,2 +1,2 @@
1
- export declare const loaderBaseClasses = "flex items-center justify-center text-secondary";
2
- export declare const loaderIconBaseClasses = "shrink-0 grow-0 basis-auto animate-spin-steps";
1
+ export declare const loaderBaseClassName = "flex items-center justify-center text-secondary";
2
+ export declare const loaderIconBaseClassName = "shrink-0 grow-0 basis-auto animate-spin-steps";
@@ -3,9 +3,9 @@ export interface DialNoDataContentProps {
3
3
  icon?: ReactNode;
4
4
  title: string;
5
5
  description?: string;
6
- containerCssClass?: string;
7
- titleCssClass?: string;
8
- descriptionCssClass?: string;
6
+ containerClassName?: string;
7
+ titleClassName?: string;
8
+ descriptionClassName?: string;
9
9
  }
10
10
  /**
11
11
  * A component for displaying a message and icon when there is no data to show.
@@ -21,5 +21,8 @@ export interface DialNoDataContentProps {
21
21
  * @param [icon] - Custom icon to display (defaults to clipboard icon)
22
22
  * @param title - The message to display when no data is present
23
23
  * @param [description] - The description to display when no data is present
24
+ * @param [containerClassName] - Additional CSS classes for the container
25
+ * @param [titleClassName] - Additional CSS classes for the title text
26
+ * @param [descriptionClassName] - Additional CSS classes for the description text
24
27
  */
25
28
  export declare const DialNoDataContent: FC<DialNoDataContentProps>;
@@ -1,9 +1,7 @@
1
- import { FC, MouseEvent } from 'react';
2
- export interface DialRemoveButtonProps {
3
- iconClass?: string;
4
- cssClass?: string;
5
- ariaLabel?: string;
6
- onClick: (e: MouseEvent) => void;
1
+ import { FC } from 'react';
2
+ import { DialButtonProps } from '../Button/Button';
3
+ export interface DialRemoveButtonProps extends Omit<DialButtonProps, 'iconBefore' | 'iconAfter'> {
4
+ iconClassName?: string;
7
5
  }
8
6
  /**
9
7
  * A specialized button component for removal or delete actions.
@@ -14,11 +12,11 @@ export interface DialRemoveButtonProps {
14
12
  * <DialRemoveButton
15
13
  * label="Delete item"
16
14
  * onClick={handleDelete}
17
- * iconClass="text-error"
15
+ * iconClassName="text-error"
18
16
  * />
19
17
  * @component
20
18
  * @param {DialRemoveButtonProps} props - The properties for the remove button component.
21
- * @param {string} [props.iconClass] - Optional CSS class applied to the trash icon for styling or sizing.
19
+ * @param {string} [props.iconClassName] - Optional CSS class applied to the trash icon for styling or sizing.
22
20
  * @returns {JSX.Element} The rendered remove button component.
23
21
  */
24
22
  export declare const DialRemoveButton: FC<DialRemoveButtonProps>;
@@ -1,12 +1,14 @@
1
- import { FC, ReactNode, MouseEvent } from 'react';
1
+ import { FC, ReactNode, MouseEvent, Ref } from 'react';
2
2
  import { SelectOption } from '../../models/select';
3
3
  import { SelectSize, SelectVariant } from '../../types/select';
4
4
  export interface DialSelectProps {
5
5
  options: SelectOption[];
6
6
  multiple?: boolean;
7
+ elementId?: string;
7
8
  size?: SelectSize;
8
9
  variant?: SelectVariant;
9
10
  value?: string | string[];
11
+ customSelectedValue?: string;
10
12
  prefix?: string;
11
13
  defaultValue?: string | string[];
12
14
  placeholder?: string;
@@ -22,6 +24,7 @@ export interface DialSelectProps {
22
24
  closable?: boolean;
23
25
  header?: ReactNode | (() => ReactNode);
24
26
  footer?: ReactNode | (() => ReactNode);
27
+ dismissRef?: Ref<unknown>;
25
28
  onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
26
29
  onChange?: (next: string | string[]) => void;
27
30
  inlineSearch?: boolean;
@@ -51,10 +54,12 @@ export interface DialSelectProps {
51
54
  * ```
52
55
  *
53
56
  * @param options - Array of options to select from.
57
+ * @param [elementId] - The id attribute for the select element.
54
58
  * @param [multiple] - Whether multiple selections are allowed.
55
59
  * @param [size=SelectSize.Md] - Size of the control.
56
60
  * @param [variant=SelectVariant.Primary] - Visual variant.
57
61
  * @param [value] - Controlled selected value(s).
62
+ * @param [customSelectedValue] - Custom string to render as the selected value in single mode.
58
63
  * @param [prefix] - Prefix for selected value(s).
59
64
  * @param [defaultValue] - Uncontrolled initial selected value(s).
60
65
  * @param [placeholder="Select..."] - Placeholder text when no selection is made.
@@ -74,5 +79,6 @@ export interface DialSelectProps {
74
79
  * @param [onChange] - Called when the selection changes.
75
80
  * @param [inlineSearch=false] - Render a plain input inside trigger (single mode only).
76
81
  * @param [onFooterClick] - Called when the footer element is clicked. When provided, automatically closes the dropdown.
82
+ * @param [dismissRef] - Ref object to expose a `dismiss` method to programmatically close the select.
77
83
  */
78
84
  export declare const DialSelect: FC<DialSelectProps>;
@@ -1,7 +1,8 @@
1
1
  export declare const selectTriggerBaseClasses = "dial-input flex w-full items-center justify-between gap-2 dial-small";
2
- export declare const selectOverlayBaseClasses = "w-full rounded";
2
+ export declare const selectOverlayBaseClasses = "w-full rounded flex flex-col";
3
3
  export declare const selectOptionBaseClasses = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
4
4
  export declare const selectOptionSelectedClasses = "bg-accent-primary-alpha";
5
5
  export declare const selectOptionSingleSelectedClasses = "bg-accent-primary-alpha border-l border-accent-primary border-1";
6
6
  export declare const selectOptionDisabledClasses = "opacity-75";
7
+ export declare const dropdownMenuMaxHeight = 352;
7
8
  export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;
@@ -2,7 +2,7 @@ import { FC } from 'react';
2
2
  import { DialFormItemProps } from '../FormItem/FormItem';
3
3
  import { DialSelectProps } from '../Select/Select';
4
4
  import { DialFieldLabelProps } from '../Field/Field';
5
- export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
5
+ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass' | 'elementId'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
6
6
  selectCssClass?: string;
7
7
  containerCssClass?: string;
8
8
  }
@@ -1,11 +1,11 @@
1
+ import { ButtonHTMLAttributes, FC } from 'react';
1
2
  import { TabModel } from '../../models/tab';
2
- import { FC } from 'react';
3
- export interface DialTabProps {
3
+ type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children' | 'type' | 'role' | 'disabled'>;
4
+ export interface DialTabProps extends NativeButtonProps {
4
5
  tab: TabModel;
5
6
  active: boolean;
6
7
  invalid?: boolean;
7
8
  horizontal?: boolean;
8
- cssClass?: string;
9
9
  onClick: (id: string) => void;
10
10
  }
11
11
  /**
@@ -26,7 +26,7 @@ export interface DialTabProps {
26
26
  * @param tab - The tab model containing its `id`, `name`, [`disabled`], [`invalid`].
27
27
  * @param active - Whether the tab is currently active.
28
28
  * @param [horizontal=false] - Whether the tab is displayed in horizontal orientation.
29
- * @param [cssClass] - Additional CSS classes applied to the tab element.
30
29
  * @param onClick - Callback fired when the tab is clicked. Receives the tab’s `id`.
31
30
  */
32
31
  export declare const DialTab: FC<DialTabProps>;
32
+ export {};
@@ -1,14 +1,14 @@
1
1
  import { FC } from 'react';
2
2
  import { TabModel } from '../../models/tab';
3
- import { SmallScreenThreshold, TabOrientation } from '../../types/tab';
3
+ import { ScreenResolution, TabOrientation } from '../../types/tab';
4
4
  export interface DialTabsProps {
5
5
  tabs: TabModel[];
6
6
  activeTab: string;
7
7
  onClick: (id: string) => void;
8
8
  orientation?: TabOrientation;
9
- smallScreenThreshold?: SmallScreenThreshold;
10
- smallScreenContainerCssClass?: string;
11
- smallScreenDropdownItemCssClass?: string;
9
+ screenThreshold?: ScreenResolution;
10
+ smallScreenContainerClassName?: string;
11
+ smallScreenDropdownItemClassName?: string;
12
12
  }
13
13
  /**
14
14
  * A responsive and overflow-aware tabs component that automatically adapts its layout
@@ -43,17 +43,17 @@ export interface DialTabsProps {
43
43
  * @param activeTab - The identifier of the currently active tab.
44
44
  * @param onClick - Callback fired when a tab is selected. Receives the tab's `id` as an argument.
45
45
  * @param [orientation=TabOrientation.Horizontal] - Layout direction of the tabs. Uses the {@link TabOrientation} enum.
46
- * @param [smallScreenThreshold=SmallScreenThreshold.Tablet] - Defines the screen size threshold
47
- * below which tabs collapse into a dropdown. Uses the {@link SmallScreenThreshold} enum.
46
+ * @param [screenThreshold=ScreenResolution.Tablet] - Defines the screen size threshold
47
+ * below which tabs collapse into a dropdown. Uses the {@link ScreenRelosution} enum.
48
48
  * When set to `Tablet`, both mobile and tablet screens will trigger dropdown mode.
49
- * @param [smallScreenContainerCssClass] - Optional CSS class applied to the dropdown container
49
+ * @param [smallScreenContainerClassNames] - Optional CSS class applied to the dropdown container
50
50
  * in small-screen (collapsed) mode.
51
- * @param [smallScreenDropdownItemCssClass] - Optional CSS class applied to individual dropdown
51
+ * @param [smallScreenDropdownItemClassName] - Optional CSS class applied to individual dropdown
52
52
  * items in small-screen mode.
53
53
  *
54
54
  * @remarks
55
55
  * - Automatically detects horizontal overflow via `ResizeObserver` and shows a dropdown when needed.
56
56
  * - Smoothly scrolls to keep the active tab visible when navigating.
57
- * - Switches layout responsively based on `smallScreenThreshold`.
57
+ * - Switches layout responsively based on `screenThreshold`.
58
58
  */
59
59
  export declare const DialTabs: FC<DialTabsProps>;
@@ -62,7 +62,7 @@ export { TabOrientation } from './types/tab';
62
62
  export type { DialBreadcrumbPathItem } from './models/breadcrumb';
63
63
  export { FormItemOrientation } from './types/form-item';
64
64
  export { SelectSize, SelectVariant } from './types/select';
65
- export { DialFileManagerTabs, DialFileManagerActions, type DialCopiedItem, type DialDeletedItem, } from './types/file-manager';
65
+ export { DialFileManagerTabs, DialFileManagerActions, } from './types/file-manager';
66
66
  export { FlexibleActionsDirection } from './types/flexible-actions';
67
67
  export { DialItemType } from './types/item';
68
68
  export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
@@ -78,4 +78,5 @@ export type { DropdownItem } from './models/dropdown';
78
78
  export type { DialModifiedEntity } from './models/base-entity';
79
79
  export type { DialFile } from './models/file';
80
80
  export { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
81
+ export { type DialCopiedItem, type DialDeletedItem, type DialUploadFileItem, } from './models/file-manager';
81
82
  export { mergeClasses } from './utils/merge-classes';
@@ -4,6 +4,6 @@ export interface DialBreadcrumbPathItem {
4
4
  href?: string;
5
5
  onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
6
6
  disabled?: boolean;
7
- cssClass?: string;
7
+ className?: string;
8
8
  iconBefore?: ReactNode;
9
9
  }
@@ -0,0 +1,15 @@
1
+ import { DialFileNodeType } from './file';
2
+ export interface DialCopiedItem {
3
+ sourceUrl: string;
4
+ destinationUrl: string;
5
+ overwrite?: boolean;
6
+ nodeType: DialFileNodeType;
7
+ }
8
+ export interface DialDeletedItem {
9
+ sourceUrl: string;
10
+ nodeType: DialFileNodeType;
11
+ }
12
+ export interface DialUploadFileItem {
13
+ fileContent: File;
14
+ name: string;
15
+ }
@@ -1,6 +1,7 @@
1
+ import { ReactNode } from 'react';
1
2
  export interface TabModel {
2
3
  id: string;
3
- name: string;
4
+ label: string | ReactNode;
4
5
  invalid?: boolean;
5
6
  disabled?: boolean;
6
7
  }