@epam/ai-dial-ui-kit 0.5.0-rc.3 → 0.5.0-rc.30

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 (31) hide show
  1. package/dist/dial-ui-kit.cjs.js +28 -28
  2. package/dist/dial-ui-kit.es.js +8604 -8005
  3. package/dist/index.css +2 -2
  4. package/dist/src/components/Button/Button.d.ts +2 -0
  5. package/dist/src/components/Dropdown/Dropdown.d.ts +2 -0
  6. package/dist/src/components/Dropdown/constants.d.ts +1 -1
  7. package/dist/src/components/FileManager/FileManager.d.ts +46 -3
  8. package/dist/src/components/FileManager/FileManagerContext.d.ts +22 -1
  9. package/dist/src/components/FileManager/FileManagerProvider.d.ts +1 -0
  10. package/dist/src/components/FileManager/components/FileManagerToolbar/DialFileManagerToolbar.d.ts +13 -13
  11. package/dist/src/components/FileManager/components/FoldersTree/FoldersTree.d.ts +1 -0
  12. package/dist/src/components/FileManager/components/FoldersTree/hooks/use-expanded-paths.d.ts +13 -0
  13. package/dist/src/components/FileManager/constants.d.ts +2 -0
  14. package/dist/src/components/FileManager/hooks/__tests__/use-file-upload.spec.d.ts +1 -0
  15. package/dist/src/components/FileManager/hooks/use-bulk-actions.d.ts +22 -0
  16. package/dist/src/components/FileManager/hooks/use-file-clipboard.d.ts +1 -1
  17. package/dist/src/components/FileManager/hooks/use-file-delete.d.ts +1 -1
  18. package/dist/src/components/FileManager/hooks/use-file-upload.d.ts +32 -0
  19. package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts +20 -0
  20. package/dist/src/components/FileManager/hooks/use-item-renaming.d.ts +1 -1
  21. package/dist/src/components/FileManager/hooks/use-new-actions.d.ts +16 -0
  22. package/dist/src/components/FileName/FileName.d.ts +2 -0
  23. package/dist/src/components/FolderName/FolderName.d.ts +4 -1
  24. package/dist/src/components/Grid/Grid.d.ts +16 -3
  25. package/dist/src/components/Grid/hooks/use-grid-selection.d.ts +7 -4
  26. package/dist/src/components/Select/Select.d.ts +7 -1
  27. package/dist/src/components/Select/constants.d.ts +2 -1
  28. package/dist/src/index.d.ts +2 -1
  29. package/dist/src/models/file-manager.d.ts +15 -0
  30. package/dist/src/types/file-manager.d.ts +0 -11
  31. package/package.json +4 -4
@@ -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
  };
@@ -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;
@@ -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';
@@ -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,4 +1,3 @@
1
- import { DialFileNodeType } from '../models/file';
2
1
  export declare enum DialFileManagerTabs {
3
2
  MyFiles = "my_files",
4
3
  Shared = "shared",
@@ -12,13 +11,3 @@ export declare enum DialFileManagerActions {
12
11
  Download = "download",
13
12
  Delete = "delete"
14
13
  }
15
- export interface DialCopiedItem {
16
- sourceUrl: string;
17
- destinationUrl: string;
18
- overwrite?: boolean;
19
- nodeType: DialFileNodeType;
20
- }
21
- export interface DialDeletedItem {
22
- sourceUrl: string;
23
- nodeType: DialFileNodeType;
24
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-ui-kit",
3
- "version": "0.5.0-rc.3",
3
+ "version": "0.5.0-rc.30",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -66,7 +66,7 @@
66
66
  "peerDependencies": {
67
67
  "@floating-ui/react": "^0.27.15",
68
68
  "@monaco-editor/react": "^4.7.0",
69
- "@tabler/icons-react": "^3.34.1",
69
+ "@tabler/icons-react": "^3.35.0",
70
70
  "classnames": "^2.5.1",
71
71
  "monaco-editor": "^0.52.2",
72
72
  "react": "^19.1.0",
@@ -113,8 +113,8 @@
113
113
  "storybook": "^10.0.0",
114
114
  "storybook-addon-pseudo-states": "^10.0.0",
115
115
  "tailwindcss": "^3.4.17",
116
- "typescript": "~5.8.3",
117
- "typescript-eslint": "^8.35.1",
116
+ "typescript": "~5.9.3",
117
+ "typescript-eslint": "^8.48.0",
118
118
  "vite": "^7.1.5",
119
119
  "vite-plugin-dts": "^4.5.4",
120
120
  "vite-plugin-svgr": "^4.5.0",