@epam/ai-dial-ui-kit 0.9.0-rc.2 → 0.9.0-rc.21
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.
- package/README.md +9 -2
- package/dist/.cursor/hooks/post-write-verify.d.ts +1 -0
- package/dist/components-manifest.json +4652 -0
- package/dist/dial-ui-kit.cjs.js +28 -28
- package/dist/dial-ui-kit.es.js +13526 -13314
- package/dist/index.css +2 -2
- package/dist/mcp-server.cjs +357 -0
- package/dist/src/components/Alert/Alert.d.ts +1 -0
- package/dist/src/components/Alert/constants.d.ts +1 -1
- package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts +2 -0
- package/dist/src/components/Breadcrumb/Breadcrumb.d.ts +1 -0
- package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts +1 -1
- package/dist/src/components/Breadcrumb/constants.d.ts +1 -1
- package/dist/src/components/Button/Button.d.ts +1 -0
- package/dist/src/components/ButtonDropdown/ButtonDropdown.d.ts +1 -0
- package/dist/src/components/CaptionText/CaptionText.d.ts +1 -0
- package/dist/src/components/Checkbox/Checkbox.d.ts +1 -0
- package/dist/src/components/CloseButton/CloseButton.d.ts +1 -0
- package/dist/src/components/CollapsibleSidebar/CollapsibleSidebar.d.ts +2 -0
- package/dist/src/components/ConfirmationPopup/ConfirmationPopup.d.ts +1 -0
- package/dist/src/components/DraggableItem/DraggableItem.d.ts +1 -0
- package/dist/src/components/Dropdown/Dropdown.d.ts +2 -0
- package/dist/src/components/EllipsisTooltip/EllipsisTooltip.d.ts +2 -0
- package/dist/src/components/FileIcon/FileIcon.d.ts +1 -0
- package/dist/src/components/FileManager/FileManager.d.ts +17 -13
- package/dist/src/components/FileManager/FileManagerContext.d.ts +4 -0
- package/dist/src/components/FileManager/FileManagerTooltip.d.ts +11 -0
- package/dist/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.d.ts +1 -0
- package/dist/src/components/FileManager/hooks/use-file-download.d.ts +2 -1
- package/dist/src/components/FileManager/hooks/use-file-manager-columns.d.ts +1 -0
- package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts +3 -1
- package/dist/src/components/FileManager/utils.d.ts +3 -0
- package/dist/src/components/FileManager/utils.spec.d.ts +1 -0
- package/dist/src/components/FileName/FileName.d.ts +2 -0
- package/dist/src/components/FolderName/FolderName.d.ts +2 -0
- package/dist/src/components/FormItem/FormItem.d.ts +1 -0
- package/dist/src/components/FormPopup/FormPopup.d.ts +1 -0
- package/dist/src/components/Grid/Grid.d.ts +1 -0
- package/dist/src/components/Icon/Icon.d.ts +1 -0
- package/dist/src/components/IconButton/IconButton.d.ts +1 -0
- package/dist/src/components/Input/Input.d.ts +1 -0
- package/dist/src/components/InputPopup/InputPopup.d.ts +6 -0
- package/dist/src/components/Label/Label.d.ts +1 -0
- package/dist/src/components/LabelledText/LabelledText.d.ts +1 -0
- package/dist/src/components/LoadFileArea/EmptyFileArea.d.ts +3 -0
- package/dist/src/components/LoadFileArea/LoadFileArea.d.ts +2 -0
- package/dist/src/components/LoadFileArea/LoadFileAreaField.d.ts +2 -0
- package/dist/src/components/Loader/Loader.d.ts +1 -0
- package/dist/src/components/NoDataContent/NoDataContent.d.ts +1 -0
- package/dist/src/components/NumberInput/NumberInput.d.ts +1 -0
- package/dist/src/components/PasswordInput/PasswordInput.d.ts +1 -0
- package/dist/src/components/Popup/Popup.d.ts +1 -0
- package/dist/src/components/RadioButton/RadioButton.d.ts +1 -0
- package/dist/src/components/RadioGroup/RadioGroup.d.ts +1 -0
- package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts +1 -0
- package/dist/src/components/RemoveButton/RemoveButton.d.ts +1 -0
- package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts +1 -0
- package/dist/src/components/ResizableContainer/ResizableContainer.d.ts +2 -0
- package/dist/src/components/Search/Search.d.ts +2 -0
- package/dist/src/components/Select/Select.d.ts +1 -0
- package/dist/src/components/Select/constants.d.ts +2 -2
- package/dist/src/components/SelectField/SelectField.d.ts +1 -0
- package/dist/src/components/SharedEntityIndicator/SharedEntityIndicator.d.ts +1 -0
- package/dist/src/components/Skeleton/Skeleton.d.ts +1 -0
- package/dist/src/components/Steps/Steps.d.ts +1 -0
- package/dist/src/components/Switch/Switch.d.ts +1 -0
- package/dist/src/components/Tabs/Tabs.d.ts +2 -0
- package/dist/src/components/Tag/Tag.d.ts +2 -0
- package/dist/src/components/TagInput/TagInput.d.ts +2 -0
- package/dist/src/components/Textarea/Textarea.d.ts +1 -0
- package/dist/src/components/Tooltip/Tooltip.d.ts +1 -0
- package/dist/src/index.d.ts +1 -1
- package/dist/src/mcp/generate-manifest.d.ts +1 -0
- package/dist/src/mcp/server.d.ts +1 -0
- package/dist/src/mcp/types.d.ts +54 -0
- package/dist/src/types/file-manager.d.ts +4 -2
- package/package.json +23 -4
|
@@ -13,6 +13,8 @@ export interface DialCollapsibleSidebarProps {
|
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.
|
|
16
|
+
* aliases: ToggleSidebar|CollapsiblePanel
|
|
17
|
+
*
|
|
16
18
|
* It supports customizable width, title, icons, additional buttons, and flexible styling options.
|
|
17
19
|
*
|
|
18
20
|
* @example
|
|
@@ -16,6 +16,7 @@ export interface DialConfirmationPopupProps extends DialPopupProps {
|
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
18
18
|
* A confirmation dialog built with DialPopup and DialButton.
|
|
19
|
+
* aliases: ConfirmDialog|WarningDialog
|
|
19
20
|
*
|
|
20
21
|
* Provides an accessible modal with a title, optional description or custom content,
|
|
21
22
|
* and a footer with Cancel / Confirm actions.
|
|
@@ -9,6 +9,7 @@ export interface DialDraggableItemProps {
|
|
|
9
9
|
}
|
|
10
10
|
/**
|
|
11
11
|
* A lightweight wrapper that makes its children sortable via drag-and-drop.
|
|
12
|
+
* aliases: SortableItem|DragHandle
|
|
12
13
|
*
|
|
13
14
|
* Renders a row with a grab handle (left) and the provided content (right).
|
|
14
15
|
* Integrates with `react-dnd` using a simple "column" drag type and delegates
|
|
@@ -35,6 +35,8 @@ export interface DialDropdownProps {
|
|
|
35
35
|
/**
|
|
36
36
|
*
|
|
37
37
|
* Renders the given trigger (`children`) and a floating contextual menu overlay.
|
|
38
|
+
* aliases: ContextMenu|PopupMenu
|
|
39
|
+
*
|
|
38
40
|
* Supports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional
|
|
39
41
|
* close button inside the overlay. Placement is taken directly from Floating UI; when
|
|
40
42
|
* `placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.
|
|
@@ -10,6 +10,8 @@ export interface DialEllipsisTooltipProps extends DialTooltipContainerOptions {
|
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* Single-line text with CSS ellipsis that shows a tooltip **only when actually truncated**.
|
|
13
|
+
* aliases: TruncatedText|TruncationTooltip
|
|
14
|
+
*
|
|
13
15
|
* If the text fits, tooltip content is empty and the popup stays hidden.
|
|
14
16
|
*
|
|
15
17
|
* Important: width must be finite for truncation.
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { FC, ReactNode, Ref, RefObject } from 'react';
|
|
2
1
|
import { ColDef, GridApi } from 'ag-grid-community';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
2
|
+
import { FC, ReactNode, Ref, RefObject } from 'react';
|
|
3
|
+
import { ConflictResolutionPopupProps } from './components/ConflictResolutionPopup/ConflictResolutionPopup';
|
|
4
|
+
import { FileUploadValidationMessages, FileUploadValidationResult } from './hooks/use-file-upload';
|
|
5
|
+
import { RenameValidationMessages } from './hooks/use-item-renaming';
|
|
6
6
|
import { DialGridProps } from '../Grid/Grid';
|
|
7
|
-
import { DialFileManagerToolbarProps } from './components/FileManagerToolbar/DialFileManagerToolbar';
|
|
8
|
-
import { DialFileManagerBulkActionsToolbarProps } from './components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar';
|
|
9
7
|
import { DropdownItem } from '../../models/dropdown';
|
|
10
|
-
import {
|
|
8
|
+
import { DialFile, DialRootFolder } from '../../models/file';
|
|
9
|
+
import { DialCopiedItem, DialDeletedItem, DialFileAcceptType, DialFileManagerActionsRef, DialUploadFileItem } from '../../models/file-manager';
|
|
10
|
+
import { GridSelectionMode } from '../../models/selection-mode.ts';
|
|
11
|
+
import { DialFileManagerActions, FileManagerColumnKey } from '../../types/file-manager';
|
|
11
12
|
import { FileManagerGridRow } from './FileManagerContext';
|
|
12
13
|
import { DestinationFolderPopupProps } from './components/DestinationFolderPopup/DestinationFolderPopup';
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import { GridSelectionMode } from '../../models/selection-mode.ts';
|
|
14
|
+
import { DialFileManagerBulkActionsToolbarProps } from './components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar';
|
|
15
|
+
import { DialFileManagerNavigationPanelProps } from './components/FileManagerNavigationPanel/FileManagerNavigationPanel';
|
|
16
|
+
import { DialFileManagerToolbarProps } from './components/FileManagerToolbar/DialFileManagerToolbar';
|
|
17
|
+
import { DialFoldersTreeProps } from './components/FoldersTree/FoldersTree';
|
|
18
18
|
type GridRow = FileManagerGridRow;
|
|
19
19
|
export type DialFileManagerConflictResolutionPopupOptions = Omit<ConflictResolutionPopupProps, 'open' | 'onClose' | 'onReplace' | 'onDuplicate' | 'conflictingFiles'>;
|
|
20
|
-
export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolderPopupProps, 'setDestinationFolderPath' | 'destinationFolderPath' | 'addFolderLabel' | 'copyLabel' | 'moveLabel' | 'hiddenFilesSwitcherLabel' | 'header' | 'onCreateFolder' | 'onCreateFolderValidate' | 'folderCreationValidationMessages' | 'disabledPathTooltip'> & {
|
|
20
|
+
export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolderPopupProps, 'setDestinationFolderPath' | 'destinationFolderPath' | 'addFolderLabel' | 'copyLabel' | 'moveLabel' | 'hiddenFilesSwitcherLabel' | 'header' | 'onCreateFolder' | 'onCreateFolderValidate' | 'folderCreationValidationMessages' | 'disabledPathTooltip' | 'emptyStateTitle' | 'emptyStateDescription'> & {
|
|
21
21
|
getCopyHeader?: (itemsCount: number, itemName?: string) => string;
|
|
22
22
|
getMoveHeader?: (itemsCount: number, itemName?: string) => string;
|
|
23
23
|
};
|
|
@@ -186,6 +186,7 @@ export interface DialFileManagerProps {
|
|
|
186
186
|
onFolderPopupPathChange?: (newPath?: string) => void;
|
|
187
187
|
onManagePermissions?: (path?: string) => void;
|
|
188
188
|
onPreview?: (path?: string) => void;
|
|
189
|
+
onOpenInNewTab?: (file: DialFile) => void;
|
|
189
190
|
previewExtensions?: string[];
|
|
190
191
|
isRenameFileAvailable?: boolean;
|
|
191
192
|
isDuplicateFolderAvailable?: boolean;
|
|
@@ -193,10 +194,13 @@ export interface DialFileManagerProps {
|
|
|
193
194
|
customCreateNewItemAction?: (currentPath?: string, currentFolder?: DialFile) => void;
|
|
194
195
|
customDuplicateAction?: (items?: DialFile[]) => void;
|
|
195
196
|
customDeleteItemsAction?: (items: DialFile[], parentFolderPath: string) => void;
|
|
197
|
+
customDownloadItemsAction?: (items?: DialFile[]) => void;
|
|
196
198
|
nonClickableTableColumns?: FileManagerColumnKey[];
|
|
199
|
+
hideSearchPathItemName?: boolean;
|
|
197
200
|
}
|
|
198
201
|
/**
|
|
199
202
|
* File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.
|
|
203
|
+
* aliases: FileExplorer|FileBrowser
|
|
200
204
|
*
|
|
201
205
|
* Features:
|
|
202
206
|
* - Global `path` drives both the breadcrumb trail and the visible folder in the grid.
|
|
@@ -14,6 +14,7 @@ export interface FileManagerGridRow {
|
|
|
14
14
|
size?: number;
|
|
15
15
|
author?: string;
|
|
16
16
|
path: string;
|
|
17
|
+
parentPath?: string | null;
|
|
17
18
|
nodeType: DialFileNodeType;
|
|
18
19
|
extension?: string;
|
|
19
20
|
isTemporary?: boolean;
|
|
@@ -153,6 +154,7 @@ export interface FileManagerContextValue {
|
|
|
153
154
|
onFolderPopupPathChange?: (newPath?: string) => void;
|
|
154
155
|
onManagePermissions?: (path?: string) => void;
|
|
155
156
|
onPreview?: (path?: string) => void;
|
|
157
|
+
onOpenInNewTab?: (file: DialFile) => void;
|
|
156
158
|
previewExtensions?: string[];
|
|
157
159
|
isRenameFileAvailable?: boolean;
|
|
158
160
|
isDuplicateFolderAvailable?: boolean;
|
|
@@ -160,9 +162,11 @@ export interface FileManagerContextValue {
|
|
|
160
162
|
customCreateNewItemAction?: (currentPath?: string, currentFolder?: DialFile) => void;
|
|
161
163
|
customDuplicateAction?: (items?: DialFile[]) => void;
|
|
162
164
|
customDeleteItemsAction?: (items: DialFile[], parentFolderPath: string) => void;
|
|
165
|
+
customDownloadItemsAction?: (items?: DialFile[]) => void;
|
|
163
166
|
nonClickableTableColumns?: FileManagerColumnKey[];
|
|
164
167
|
getDisabledTooltip?: (row: FileManagerGridRow) => string | undefined;
|
|
165
168
|
fileTooLargeTooltip?: string;
|
|
166
169
|
unsupportedFileTypeTooltip?: string;
|
|
170
|
+
hideSearchPathItemName?: boolean;
|
|
167
171
|
}
|
|
168
172
|
export declare const FileManagerContext: import('react').Context<FileManagerContextValue | undefined>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FileManagerGridRow } from './FileManagerContext';
|
|
2
|
+
interface FileManagerTooltipProps {
|
|
3
|
+
disabledGridRowIds: Set<string>;
|
|
4
|
+
gridRows: FileManagerGridRow[];
|
|
5
|
+
getDisabledTooltip?: (row: FileManagerGridRow) => string | undefined;
|
|
6
|
+
getRowDisabledTooltip: (row: FileManagerGridRow, allowedFileTypes?: string[], maxSelectableFileSize?: number) => string | undefined;
|
|
7
|
+
allowedFileTypes?: string[];
|
|
8
|
+
maxSelectableFileSize?: number;
|
|
9
|
+
}
|
|
10
|
+
export declare const FileManagerTooltip: ({ disabledGridRowIds, gridRows, getDisabledTooltip, getRowDisabledTooltip, allowedFileTypes, maxSelectableFileSize, }: FileManagerTooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -21,6 +21,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
|
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
23
|
* DestinationFolderPopup
|
|
24
|
+
* aliases: FolderSelector|PathChooser
|
|
24
25
|
*
|
|
25
26
|
* A popup dialog for selecting a destination folder when copying or moving files.
|
|
26
27
|
* Displays a File Manager interface with a footer containing action buttons and
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { DialFile } from '../../../models/file';
|
|
2
2
|
export interface UseFileDownloadOptions {
|
|
3
3
|
onDownloadFiles?: (items: DialFile[]) => void;
|
|
4
|
+
customDownloadItemsAction?: (items: DialFile[]) => void;
|
|
4
5
|
onDownloadSuccess?: () => void;
|
|
5
6
|
}
|
|
6
|
-
export declare const useFileDownload: ({ onDownloadFiles, onDownloadSuccess, }: UseFileDownloadOptions) => {
|
|
7
|
+
export declare const useFileDownload: ({ onDownloadFiles, customDownloadItemsAction, onDownloadSuccess, }: UseFileDownloadOptions) => {
|
|
7
8
|
handleDownloadFiles: (items: DialFile[]) => void;
|
|
8
9
|
};
|
|
@@ -21,6 +21,7 @@ export interface FileManagerGridContext {
|
|
|
21
21
|
onRenameSave: (value: string) => void;
|
|
22
22
|
onRenameCancel: () => void;
|
|
23
23
|
getDisplayName: (item: DialFile) => string;
|
|
24
|
+
hideSearchPathItemName?: boolean;
|
|
24
25
|
}
|
|
25
26
|
export interface UseFileManagerColumnsArgs {
|
|
26
27
|
userColumnDefs?: (ColDef<GridRow> | ((dateLocale: Intl.LocalesArgument, dateOptions: Intl.DateTimeFormatOptions | undefined, isCompactView: boolean) => ColDef<GridRow, unknown>))[];
|
|
@@ -17,6 +17,7 @@ export interface UseGridContextMenuProps {
|
|
|
17
17
|
[DialFileManagerActions.Info]?: string;
|
|
18
18
|
[DialFileManagerActions.Unshare]?: string;
|
|
19
19
|
[DialFileManagerActions.RemoveAccess]?: string;
|
|
20
|
+
[DialFileManagerActions.OpenInNewTab]?: string;
|
|
20
21
|
};
|
|
21
22
|
onDuplicate: (file: DialFile) => void;
|
|
22
23
|
onCopy: (file: DialFile) => void;
|
|
@@ -33,9 +34,10 @@ export interface UseGridContextMenuProps {
|
|
|
33
34
|
onAddChild?: (file: DialFile) => void;
|
|
34
35
|
onManagePermissions?: (path?: string) => void;
|
|
35
36
|
onPreview?: (path?: string) => void;
|
|
37
|
+
onOpenInNewTab?: (file: DialFile) => void;
|
|
36
38
|
previewExtensions?: string[];
|
|
37
39
|
isRenameFileAvailable?: boolean;
|
|
38
40
|
isDuplicateFolderAvailable?: boolean;
|
|
39
41
|
forbiddenSymbolsRegExp?: RegExp;
|
|
40
42
|
}
|
|
41
|
-
export declare const useGridContextMenu: ({ actionLabels, onDuplicate, onCopy, onMove, onDownload, onRename, onDelete, onInfo, onUnshare, onRemoveAccess, sharedWithMeIds, sharedByMePaths, onAddSibling, onAddChild, onManagePermissions, onPreview, previewExtensions, isRenameFileAvailable, isDuplicateFolderAvailable, forbiddenSymbolsRegExp, }: UseGridContextMenuProps) => (file: DialFile) => DropdownItem[];
|
|
43
|
+
export declare const useGridContextMenu: ({ actionLabels, onDuplicate, onCopy, onMove, onDownload, onRename, onDelete, onInfo, onUnshare, onRemoveAccess, sharedWithMeIds, sharedByMePaths, onAddSibling, onAddChild, onManagePermissions, onPreview, onOpenInNewTab, previewExtensions, isRenameFileAvailable, isDuplicateFolderAvailable, forbiddenSymbolsRegExp, }: UseGridContextMenuProps) => (file: DialFile) => DropdownItem[];
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { DialFile } from '../../models/file';
|
|
2
2
|
import { DialFileAcceptType } from '../../models/file-manager';
|
|
3
3
|
import { ReactNode } from 'react';
|
|
4
|
+
import { FileManagerGridRow } from './FileManagerContext';
|
|
4
5
|
export declare const findNodeByPath: (nodes: DialFile[] | undefined, path: string) => DialFile | undefined;
|
|
5
6
|
export declare const findFolderForPath: (root: DialFile[] | undefined, path?: string) => DialFile | undefined;
|
|
6
7
|
export declare const normalizeToLowerCase: (input?: string) => string;
|
|
@@ -40,8 +41,10 @@ export declare const formatBytes: (bytes?: number) => string;
|
|
|
40
41
|
*/
|
|
41
42
|
export declare const formatDate: (date?: string, locale?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions) => string;
|
|
42
43
|
export declare function isFileAccepted(allowedFileTypes: DialFileAcceptType[] | undefined, contentType: string, fileName?: string): boolean;
|
|
44
|
+
export declare const formatAllowedFileTypesForTooltip: (allowedFileTypes: DialFileAcceptType[] | undefined) => string;
|
|
43
45
|
export declare const cleanForbiddenSymbolsRegExp: (forbiddenSymbolsRegExp?: RegExp) => RegExp | undefined;
|
|
44
46
|
export declare function getForbiddenSymbolsTooltip(item: {
|
|
45
47
|
name: string;
|
|
46
48
|
isFolder: boolean;
|
|
47
49
|
}, forbiddenSymbolsRegExp?: RegExp, forbiddenSymbolsTooltip?: ReactNode): ReactNode | undefined;
|
|
50
|
+
export declare const getRowTooltip: (file: FileManagerGridRow, allowedFileTypes?: string[], maxSelectableFileSize?: number, unsupportedFileTypeTooltip?: string, fileTooLargeTooltip?: string) => string | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -14,6 +14,8 @@ export interface DialFileNameProps {
|
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* Component to display a file name with a file icon and shared indicator.
|
|
17
|
+
* aliases: FileDisplay|NameDisplay
|
|
18
|
+
*
|
|
17
19
|
* Handles long names with ellipsis and tooltip.
|
|
18
20
|
*
|
|
19
21
|
* If `details` is provided (e.g., file size, date), the component switches to
|
|
@@ -13,6 +13,7 @@ export interface DialFormItemProps extends DialFormItemBaseProps {
|
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* A layout wrapper for form controls with label, helper text and error message.
|
|
16
|
+
* aliases: FieldWrapper|FormControl
|
|
16
17
|
*
|
|
17
18
|
* Uses `DialLabel` for the label and `DialErrorText` for consistent error styling.
|
|
18
19
|
* Wires accessibility with:
|
|
@@ -12,6 +12,7 @@ export interface DialFormPopupProps extends DialPopupProps {
|
|
|
12
12
|
}
|
|
13
13
|
/**
|
|
14
14
|
* A form-oriented popup dialog.
|
|
15
|
+
* aliases: FormDialog|FormModal
|
|
15
16
|
*
|
|
16
17
|
* Provides an accessible popup with a title, custom body,
|
|
17
18
|
* and a footer with "Cancel" and "Submit" actions.
|
|
@@ -29,6 +29,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
|
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
31
31
|
* DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.
|
|
32
|
+
* aliases: DataTable|TableGrid
|
|
32
33
|
*
|
|
33
34
|
* Provides a pre-configured grid with:
|
|
34
35
|
* - Dark theme styling with CSS variable integration
|
|
@@ -12,9 +12,13 @@ export interface DialInputPopupProps {
|
|
|
12
12
|
errorText?: string;
|
|
13
13
|
invalid?: boolean;
|
|
14
14
|
emptyValueText?: string;
|
|
15
|
+
editable?: boolean;
|
|
16
|
+
onValueChange?: (value: string) => void;
|
|
15
17
|
}
|
|
16
18
|
/**
|
|
17
19
|
* An input field that opens a popup when clicked, displaying a selected value or a list of values.
|
|
20
|
+
* aliases: PopupInput|ReadonlyInput
|
|
21
|
+
*
|
|
18
22
|
* It supports read-only mode, error states, and disabled state, with customizable styling.
|
|
19
23
|
* The modal content is rendered using a portal for seamless integration.
|
|
20
24
|
*
|
|
@@ -47,5 +51,7 @@ export interface DialInputPopupProps {
|
|
|
47
51
|
* @param [errorText] - An optional error message displayed below the input when an error state is present.
|
|
48
52
|
* @param [invalid] - Whether the input is in an invalid state, affecting styling. Applied automatically if errorText is provided.
|
|
49
53
|
* @param [emptyValueText] - The text displayed when no value is selected and placeholder is not provided.
|
|
54
|
+
* @param [editable=false] - When true, the input area becomes an editable text field; only the icon opens the popup.
|
|
55
|
+
* @param [onValueChange] - Callback fired when the user types in the editable input.
|
|
50
56
|
*/
|
|
51
57
|
export declare const DialInputPopup: FC<DialInputPopupProps>;
|
|
@@ -6,12 +6,15 @@ export interface DialEmptyFileAreaProps {
|
|
|
6
6
|
acceptTypes: string;
|
|
7
7
|
maxFilesCount?: number;
|
|
8
8
|
maxFileSize?: number;
|
|
9
|
+
maxMultiFilesSize?: number;
|
|
9
10
|
multiple?: boolean;
|
|
10
11
|
fileFormatError?: string;
|
|
11
12
|
fileCountError?: string;
|
|
12
13
|
fileSizeError?: string;
|
|
14
|
+
multiFilesSizeError?: string;
|
|
13
15
|
getIsFileFormatError?: (fileItems: File[] | DataTransferItem[]) => boolean;
|
|
14
16
|
getIsFileSizeError?: (fileItems: File[] | DataTransferItem[]) => boolean;
|
|
17
|
+
getIsMultiFilesSizeError?: (fileItems: File[] | DataTransferItem[]) => boolean;
|
|
15
18
|
onChange: (files: File[]) => void;
|
|
16
19
|
}
|
|
17
20
|
/**
|
|
@@ -10,6 +10,8 @@ export interface DialLoadFileAreaProps extends DialEmptyFileAreaProps {
|
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* A drag-and-drop file upload area component that allows users to upload files
|
|
13
|
+
* aliases: FileDropZone|DragDropUpload
|
|
14
|
+
*
|
|
13
15
|
* either by dragging them into the area or by selecting them through the file picker.
|
|
14
16
|
* Displays helpful text, button prompts, and validation errors for file format or count limits.
|
|
15
17
|
*
|
|
@@ -9,6 +9,8 @@ export interface DialLoadFileAreaFieldProps extends DialLoadFileAreaProps {
|
|
|
9
9
|
}
|
|
10
10
|
/**
|
|
11
11
|
* A composite file upload field that combines a label, file list management,
|
|
12
|
+
* aliases: UploadField|FileListField
|
|
13
|
+
*
|
|
12
14
|
* and a drag-and-drop upload area. Allows users to add, remove, and validate files
|
|
13
15
|
* with customizable restrictions on file types and count.
|
|
14
16
|
*
|
|
@@ -20,6 +20,7 @@ export interface DialPopupProps {
|
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
22
|
* An accessible modal dialog component using Floating UI.
|
|
23
|
+
* aliases: Modal|Dialog
|
|
23
24
|
*
|
|
24
25
|
* Renders in a portal with a scrim overlay, focus management, header with a title,
|
|
25
26
|
* content area, optional footer and a close control.
|
|
@@ -15,6 +15,7 @@ export interface DialRadioButtonProps {
|
|
|
15
15
|
}
|
|
16
16
|
/**
|
|
17
17
|
* A stylized, accessible radio input with optional description.
|
|
18
|
+
* aliases: ChoiceOption|RadioInput
|
|
18
19
|
*
|
|
19
20
|
* Renders a native `<input type="radio" />` paired with a label. When `checked`
|
|
20
21
|
* and `description` are provided, a supporting text block appears under the control.
|
|
@@ -22,6 +22,7 @@ export interface DialRadioGroupProps {
|
|
|
22
22
|
}
|
|
23
23
|
/**
|
|
24
24
|
* Groups multiple `DialRadio` options and renders custom content for the active option.
|
|
25
|
+
* aliases: SelectionGroup|OptionGroup
|
|
25
26
|
*
|
|
26
27
|
* Uses `DialField` as the field label and a container with `role="radiogroup"`.
|
|
27
28
|
* Content provided in `radioButtons[].content` is shown under the currently active radio.
|
|
@@ -17,6 +17,7 @@ export interface RadioGroupPopupFieldProps extends Pick<DialLabelProps, 'label'
|
|
|
17
17
|
}
|
|
18
18
|
/**
|
|
19
19
|
* A composite field that opens a popup with a radio group selector.
|
|
20
|
+
* aliases: PopupRadio|ChoicePopup
|
|
20
21
|
*
|
|
21
22
|
* Renders a labeled readout using `DialInputPopup`; when opened, a `DialPopup`
|
|
22
23
|
* displays a `DialRadioGroup` allowing the user to pick from a list of options.
|
|
@@ -5,6 +5,7 @@ export interface DialRemoveButtonProps extends Omit<DialButtonProps, 'iconBefore
|
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
7
|
* A specialized button component for removal or delete actions.
|
|
8
|
+
* aliases: DeleteButton|TrashButton
|
|
8
9
|
*
|
|
9
10
|
* Renders a `DialErrorButton` with a predefined trash icon (`IconTrashX`) as the leading icon.
|
|
10
11
|
* Additional props are passed directly to the underlying `DialErrorButton`.
|
|
@@ -5,6 +5,7 @@ export interface DialConditionalResizableContainerProps extends DialResizableCon
|
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
7
|
* DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.
|
|
8
|
+
* aliases: OptionalResize|ConditionalPanel
|
|
8
9
|
*
|
|
9
10
|
* This component renders its children inside a resizable container only when `enabled` is true.
|
|
10
11
|
* When `enabled` is false, children are rendered directly without any resizable behavior.
|
|
@@ -14,6 +14,8 @@ export interface DialResizableContainerProps {
|
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* DialResizableContainer — A reusable resizable container
|
|
17
|
+
* aliases: ResizePanel|SizableContainer
|
|
18
|
+
*
|
|
17
19
|
* supporting both **controlled** and **uncontrolled** width modes.
|
|
18
20
|
*
|
|
19
21
|
* Controlled Mode
|
|
@@ -7,6 +7,8 @@ export interface DialSearchProps extends Omit<DialInputProps, 'type' | 'size' |
|
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
9
|
* A search input component with a customizable placeholder, icons, flexible props, and the ability
|
|
10
|
+
* aliases: SearchField|QueryInput
|
|
11
|
+
*
|
|
10
12
|
* to clear the input value via a clear button. Supports multiple sizes for flexible layouts.
|
|
11
13
|
*
|
|
12
14
|
* @example
|
|
@@ -37,6 +37,7 @@ export interface DialSelectProps {
|
|
|
37
37
|
}
|
|
38
38
|
/**
|
|
39
39
|
* A versatile select supporting single and multiple selections.
|
|
40
|
+
* aliases: OptionPicker|ChoiceSelector
|
|
40
41
|
*
|
|
41
42
|
* Single mode mirrors the legacy visual:
|
|
42
43
|
* - Trigger shows the selected option's leading icon + label.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small cursor-pointer";
|
|
1
|
+
export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer";
|
|
2
2
|
export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
|
|
3
|
-
export declare const selectOptionBaseClassName = "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";
|
|
3
|
+
export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
|
|
4
4
|
export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
|
|
5
5
|
export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
|
|
6
6
|
export declare const selectOptionDisabledClassName = "opacity-75";
|
|
@@ -8,6 +8,7 @@ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'className'
|
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
10
|
* A Select field wrapper that composes `DialFormItem` and `DialSelect`.
|
|
11
|
+
* aliases: SelectInput|ComboField
|
|
11
12
|
*
|
|
12
13
|
* Provides unified label, description, error rendering and a readonly view that shows
|
|
13
14
|
* the selected option labels (comma-separated in single mode, list in multiple).
|
|
@@ -21,6 +21,7 @@ export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
23
|
* DialSkeleton
|
|
24
|
+
* aliases: PlaceholderUI|ShimmerLoader
|
|
24
25
|
*
|
|
25
26
|
* A placeholder component to show while content is loading.
|
|
26
27
|
* Provides various skeleton shapes and configurations.
|
|
@@ -14,6 +14,8 @@ export interface DialTabsProps {
|
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* A responsive and overflow-aware tabs component that automatically adapts its layout
|
|
17
|
+
* aliases: TabNavigation|TabBar
|
|
18
|
+
*
|
|
17
19
|
* between a scrollable tab bar and a dropdown menu on smaller screens.
|
|
18
20
|
*
|
|
19
21
|
* When there are too many tabs to fit in a single line, it introduces a dropdown button
|
|
@@ -10,6 +10,8 @@ export interface DialTagProps {
|
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* A small tag component used to display labeled items such as categories, filters, or selections.
|
|
13
|
+
* aliases: Badge|Chip
|
|
14
|
+
*
|
|
13
15
|
* Optionally supports removal via a close button and multiple colors variants defined by {@link TagVariant}.
|
|
14
16
|
*
|
|
15
17
|
* @example
|
|
@@ -13,6 +13,8 @@ export interface DialTagInputProps extends DialLabelProps {
|
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* A tag input field that allows users to add multiple tags using the Enter or comma key.
|
|
16
|
+
* aliases: MultiTag|TagField
|
|
17
|
+
*
|
|
16
18
|
* Supports removing tags, displaying field labels, optional indicators, validation states,
|
|
17
19
|
* and dynamic layout adjustment when tags wrap to multiple lines.
|
|
18
20
|
*
|