@epam/ai-dial-ui-kit 0.5.0-rc.5 → 0.5.0-rc.50
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 +3 -3
- package/dist/dial-ui-kit.cjs.js +29 -29
- package/dist/dial-ui-kit.es.js +15053 -13240
- package/dist/index.css +2 -2
- package/dist/src/components/Alert/Alert.d.ts +2 -2
- package/dist/src/components/Alert/constants.d.ts +2 -2
- package/dist/src/components/AutocompleteInput/AutocompleteInput.d.ts +10 -10
- package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts +6 -6
- package/dist/src/components/Breadcrumb/Breadcrumb.d.ts +8 -8
- package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts +2 -2
- package/dist/src/components/Breadcrumb/constants.d.ts +10 -10
- package/dist/src/components/Button/Button.d.ts +10 -18
- package/dist/src/components/Checkbox/Checkbox.d.ts +2 -2
- package/dist/src/components/CloseButton/CloseButton.d.ts +3 -3
- package/dist/src/components/CollapsibleSidebar/CollapsibleSidebar.d.ts +6 -6
- package/dist/src/components/ConfirmationPopup/ConfirmationPopup.d.ts +3 -3
- package/dist/src/components/ConfirmationPopup/constants.d.ts +3 -3
- package/dist/src/components/DraggableItem/DraggableItem.d.ts +8 -8
- package/dist/src/components/DraggableItem/constants.d.ts +2 -2
- package/dist/src/components/Dropdown/Dropdown.d.ts +4 -2
- package/dist/src/components/Dropdown/constants.d.ts +7 -7
- package/dist/src/components/EllipsisTooltip/EllipsisTooltip.d.ts +4 -4
- package/dist/src/components/EllipsisTooltip/constants.d.ts +1 -1
- package/dist/src/components/Field/Field.d.ts +4 -6
- package/dist/src/components/FileIcon/FileIcon.d.ts +2 -2
- package/dist/src/components/FileManager/FileManager.d.ts +55 -9
- package/dist/src/components/FileManager/FileManagerContext.d.ts +39 -4
- package/dist/src/components/FileManager/FileManagerProvider.d.ts +1 -0
- package/dist/src/components/FileManager/components/ConflictResolutionPopup/ConflictResolutionPopup.d.ts +92 -0
- package/dist/src/components/FileManager/components/FileManagerItemIcon/FileManagerItemIcon.d.ts +1 -1
- package/dist/src/components/FileManager/components/FileManagerItemNameInput/FileManagerItemNameInput.d.ts +2 -2
- package/dist/src/components/FileManager/components/FileManagerNavigationPanel/FileManagerNavigationPanel.d.ts +10 -10
- package/dist/src/components/FileManager/components/FileManagerNavigationPanel/constants.d.ts +3 -3
- package/dist/src/components/FileManager/components/FileManagerToolbar/DialFileManagerToolbar.d.ts +13 -13
- package/dist/src/components/FileManager/components/FoldersTree/FoldersTree.d.ts +1 -0
- package/dist/src/components/FileManager/components/FoldersTree/hooks/use-expanded-paths.d.ts +13 -0
- package/dist/src/components/FileManager/constants.d.ts +12 -7
- package/dist/src/components/FileManager/hooks/__tests__/use-conflict-resolution.spec.d.ts +1 -0
- package/dist/src/components/FileManager/hooks/__tests__/use-file-upload.spec.d.ts +1 -0
- package/dist/src/components/FileManager/hooks/use-bulk-actions.d.ts +22 -0
- package/dist/src/components/FileManager/hooks/use-conflict-resolution.d.ts +26 -0
- package/dist/src/components/FileManager/hooks/use-file-clipboard.d.ts +10 -2
- package/dist/src/components/FileManager/hooks/use-file-delete.d.ts +3 -2
- package/dist/src/components/FileManager/hooks/use-file-upload.d.ts +34 -0
- package/dist/src/components/FileManager/hooks/use-folder-creation.d.ts +21 -0
- package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts +20 -0
- package/dist/src/components/FileManager/hooks/use-item-renaming.d.ts +7 -5
- package/dist/src/components/FileManager/hooks/use-new-actions.d.ts +16 -0
- package/dist/src/components/FileName/FileName.d.ts +4 -2
- package/dist/src/components/FolderName/FolderName.d.ts +6 -3
- package/dist/src/components/FormItem/FormItem.d.ts +9 -9
- package/dist/src/components/FormItem/constants.d.ts +1 -1
- package/dist/src/components/FormPopup/FormPopup.d.ts +1 -1
- package/dist/src/components/FormPopup/constants.d.ts +1 -1
- package/dist/src/components/Grid/Grid.d.ts +7 -3
- package/dist/src/components/Grid/constants.d.ts +1 -1
- package/dist/src/components/Grid/hooks/use-grid-selection.d.ts +7 -4
- package/dist/src/components/Grid/renderers/DateCellRenderer.d.ts +2 -2
- package/dist/src/components/Grid/renderers/constants.d.ts +1 -1
- package/dist/src/components/Icon/Icon.d.ts +0 -1
- package/dist/src/components/Input/Input.d.ts +4 -4
- package/dist/src/components/InputField/InputField.d.ts +3 -3
- package/dist/src/components/InputPopup/InputPopup.d.ts +6 -6
- package/dist/src/components/Loader/Loader.d.ts +5 -5
- package/dist/src/components/Loader/constants.d.ts +2 -2
- package/dist/src/components/NoDataContent/NoDataContent.d.ts +6 -3
- package/dist/src/components/PasswordInput/PasswordInputField.d.ts +1 -1
- package/dist/src/components/Popup/Popup.d.ts +6 -6
- package/dist/src/components/Popup/constants.d.ts +3 -3
- package/dist/src/components/RadioButton/RadioButton.d.ts +6 -6
- package/dist/src/components/RadioGroup/RadioGroup.d.ts +20 -20
- package/dist/src/components/RadioGroup/constants.d.ts +3 -3
- package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts +2 -2
- package/dist/src/components/RemoveButton/RemoveButton.d.ts +6 -8
- package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts +33 -0
- package/dist/src/components/ResizableContainer/ResizableContainer.d.ts +69 -0
- package/dist/src/components/ResizableContainer/components/ResizeHandle.d.ts +10 -0
- package/dist/src/components/ResizableContainer/components/ResizeIcon.d.ts +8 -0
- package/dist/src/components/Search/Search.d.ts +4 -4
- package/dist/src/components/Search/constants.d.ts +4 -4
- package/dist/src/components/Select/Select.d.ts +9 -3
- package/dist/src/components/Select/constants.d.ts +7 -6
- package/dist/src/components/SelectField/SelectField.d.ts +6 -6
- package/dist/src/components/SharedEntityIndicator/SharedEntityIndicator.d.ts +2 -2
- package/dist/src/components/Tab/Tab.d.ts +4 -4
- package/dist/src/components/Tabs/Tabs.d.ts +9 -9
- package/dist/src/components/Tag/Tag.d.ts +2 -2
- package/dist/src/components/TextAreaField/TextAreaField.d.ts +3 -3
- package/dist/src/components/Textarea/Textarea.d.ts +4 -4
- package/dist/src/index.d.ts +5 -1
- package/dist/src/models/breadcrumb.d.ts +1 -1
- package/dist/src/models/file-manager.d.ts +15 -0
- package/dist/src/models/tab.d.ts +2 -1
- package/dist/src/types/file-manager.d.ts +12 -9
- package/dist/src/types/resizable-container.d.ts +4 -0
- package/dist/src/types/tab.d.ts +1 -1
- package/package.json +5 -4
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import { FC
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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
|
-
*
|
|
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.
|
|
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>;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { DialResizableContainerProps } from './ResizableContainer';
|
|
3
|
+
export interface DialConditionalResizableContainerProps extends DialResizableContainerProps {
|
|
4
|
+
enabled?: boolean;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.
|
|
8
|
+
*
|
|
9
|
+
* This component renders its children inside a resizable container only when `enabled` is true.
|
|
10
|
+
* When `enabled` is false, children are rendered directly without any resizable behavior.
|
|
11
|
+
*
|
|
12
|
+
* All other props are the same as `DialResizableContainer`. See the documentation for
|
|
13
|
+
* `DialResizableContainer` for full details on usage, controlled/uncontrolled modes, sides, and callbacks.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <DialConditionalResizableContainer
|
|
18
|
+
* enabled={!isCollapsed}
|
|
19
|
+
* defaultWidth={260}
|
|
20
|
+
* minWidth={180}
|
|
21
|
+
* maxWidth={520}
|
|
22
|
+
* onResize={(w) => console.log('Current width:', w)}
|
|
23
|
+
* onResizeStop={(w) => setSidebarWidth(w)}
|
|
24
|
+
* >
|
|
25
|
+
* <Sidebar />
|
|
26
|
+
* </DialConditionalResizableContainer>
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* @param enabled - Whether resizing is enabled. When false, children are rendered directly.
|
|
30
|
+
* @param children - Content to render inside the container.
|
|
31
|
+
* @see DialResizableContainer
|
|
32
|
+
*/
|
|
33
|
+
export declare const DialConditionalResizableContainer: FC<DialConditionalResizableContainerProps>;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { ResizableContainerSide } from '../../types/resizable-container';
|
|
2
|
+
import { FC, ReactNode } from 'react';
|
|
3
|
+
export interface DialResizableContainerProps {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
minWidth: number;
|
|
6
|
+
maxWidth: number;
|
|
7
|
+
width?: number;
|
|
8
|
+
defaultWidth: number;
|
|
9
|
+
onResizeStop?: (width: number) => void;
|
|
10
|
+
onResize?: (width: number) => void;
|
|
11
|
+
side?: ResizableContainerSide;
|
|
12
|
+
resizeHandlerClassName?: string;
|
|
13
|
+
resizeHandler?: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* DialResizableContainer — A reusable resizable container
|
|
17
|
+
* supporting both **controlled** and **uncontrolled** width modes.
|
|
18
|
+
*
|
|
19
|
+
* Controlled Mode
|
|
20
|
+
*
|
|
21
|
+
* Provide `width` and optionally `onResizeStop`:
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <DialResizableContainer
|
|
24
|
+
* width={sidebarWidth}
|
|
25
|
+
* onResizeStop={(w) => setSidebarWidth(w)}
|
|
26
|
+
* minWidth={180}
|
|
27
|
+
* maxWidth={520}
|
|
28
|
+
* >
|
|
29
|
+
* <Sidebar />
|
|
30
|
+
* </DialResizableContainer>
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* Uncontrolled Mode
|
|
34
|
+
*
|
|
35
|
+
* Omit `width` entirely — the component manages its own width:
|
|
36
|
+
* ```tsx
|
|
37
|
+
* <DialResizableContainer
|
|
38
|
+
* defaultWidth={260}
|
|
39
|
+
* minWidth={180}
|
|
40
|
+
* maxWidth={520}
|
|
41
|
+
* >
|
|
42
|
+
* <Sidebar />
|
|
43
|
+
* </DialResizableContainer>
|
|
44
|
+
* ```
|
|
45
|
+
*
|
|
46
|
+
* Features:
|
|
47
|
+
* - Resize from left or right
|
|
48
|
+
* - Fully supports controlled & uncontrolled sizing
|
|
49
|
+
* - Custom resize handler (icon or any ReactNode)
|
|
50
|
+
* - Callback when resize stops (optional)
|
|
51
|
+
* - Smooth hover/drag visibility transitions
|
|
52
|
+
*
|
|
53
|
+
* @param [children] - Content placed inside the container.
|
|
54
|
+
* @param [minWidth] - Minimum allowed width (px).
|
|
55
|
+
* @param [maxWidth] - Maximum allowed width (px).
|
|
56
|
+
* @param [width] - Controlled width. If omitted → uncontrolled mode.
|
|
57
|
+
* @param [defaultWidth] - Initial width in uncontrolled mode.
|
|
58
|
+
* @param [onResizeStop] - Optional callback fired when resize ends.
|
|
59
|
+
* @param [onResize] - Optional callback fired continuously during resizing with current width.
|
|
60
|
+
* @param [side=ResizableContainerSide.Right] - Resize handle side.
|
|
61
|
+
* @param [resizeHandlerClassName] - Optional additional CSS classes.
|
|
62
|
+
* @param [resizeHandler] - Optional custom handler element.
|
|
63
|
+
*
|
|
64
|
+
* @remarks
|
|
65
|
+
* - In uncontrolled mode, width is stored internally.
|
|
66
|
+
* - `onResizeStop` is optional in both modes.
|
|
67
|
+
* - Controlled mode always uses the value from `width`.
|
|
68
|
+
*/
|
|
69
|
+
export declare const DialResizableContainer: FC<DialResizableContainerProps>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ResizableContainerSide } from '../../../types/resizable-container';
|
|
2
|
+
import { FC, ReactNode } from 'react';
|
|
3
|
+
interface ResizeHandleProps {
|
|
4
|
+
side: ResizableContainerSide;
|
|
5
|
+
isResizing: boolean;
|
|
6
|
+
customHandler?: ReactNode;
|
|
7
|
+
handlerClassName?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const ResizeHandle: FC<ResizeHandleProps>;
|
|
10
|
+
export {};
|
|
@@ -7,8 +7,8 @@ export interface DialSearchProps {
|
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
readonly?: boolean;
|
|
9
9
|
invalid?: boolean;
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
className?: string;
|
|
11
|
+
containerClassName?: string;
|
|
12
12
|
onChange?: (value: string) => void;
|
|
13
13
|
size?: SearchSize;
|
|
14
14
|
allowClear?: boolean;
|
|
@@ -35,8 +35,8 @@ export interface DialSearchProps {
|
|
|
35
35
|
* @param [disabled=false] - Whether the input is disabled
|
|
36
36
|
* @param [readonly=false] - Whether the input is read-only (non-editable)
|
|
37
37
|
* @param [invalid=false] - Whether the input should be styled as invalid
|
|
38
|
-
* @param [
|
|
39
|
-
* @param [
|
|
38
|
+
* @param [className] - Additional CSS classes applied to the input element
|
|
39
|
+
* @param [containerClassName] - Additional CSS classes applied to the container
|
|
40
40
|
* @param [onChange] - Callback fired when the input value changes
|
|
41
41
|
* @param [size=SearchSize.Base] - The size of the search input. Uses the {@link SearchSize} enum.
|
|
42
42
|
* @param [allowClear=true] - Whether to show a clear button when there is a value
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
export declare const SIZE_CONFIG: {
|
|
2
2
|
small: {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
textClassName: string;
|
|
4
|
+
containerClassName: string;
|
|
5
5
|
iconSize: number;
|
|
6
6
|
iconStroke: number;
|
|
7
7
|
};
|
|
8
8
|
base: {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
textClassName: string;
|
|
10
|
+
containerClassName: string;
|
|
11
11
|
iconSize: number;
|
|
12
12
|
iconStroke: number;
|
|
13
13
|
};
|
|
@@ -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;
|
|
@@ -18,10 +20,11 @@ export interface DialSelectProps {
|
|
|
18
20
|
emptyStateDescription?: string;
|
|
19
21
|
emptyStateIcon?: ReactNode;
|
|
20
22
|
disabled?: boolean;
|
|
21
|
-
|
|
23
|
+
className?: string;
|
|
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.
|
|
@@ -66,7 +71,7 @@ export interface DialSelectProps {
|
|
|
66
71
|
* @param [emptyStateDescription] - Description text when there are no options.
|
|
67
72
|
* @param [emptyStateIcon] - Icon to display when there are no options.
|
|
68
73
|
* @param [disabled=false] - Disable the control.
|
|
69
|
-
* @param [
|
|
74
|
+
* @param [className] - Additional CSS classes for the trigger.
|
|
70
75
|
* @param [closable=false] - Show a close button in the dropdown header.
|
|
71
76
|
* @param [header] - Custom node/function rendered above the options.
|
|
72
77
|
* @param [footer] - Custom node/function rendered below the options.
|
|
@@ -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
|
-
export declare const
|
|
2
|
-
export declare const
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
5
|
-
export declare const
|
|
6
|
-
export declare const
|
|
1
|
+
export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small";
|
|
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";
|
|
4
|
+
export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
|
|
5
|
+
export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
|
|
6
|
+
export declare const selectOptionDisabledClassName = "opacity-75";
|
|
7
|
+
export declare const dropdownMenuMaxHeight = 352;
|
|
7
8
|
export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,9 +2,9 @@ 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, '
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
export interface DialSelectFieldProps extends Omit<DialSelectProps, 'className' | 'elementId'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
|
|
6
|
+
selectClassName?: string;
|
|
7
|
+
containerClassName?: string;
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
10
|
* A Select field wrapper that composes `DialFormItem` and `DialSelect`.
|
|
@@ -26,12 +26,12 @@ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass'>,
|
|
|
26
26
|
* />
|
|
27
27
|
*
|
|
28
28
|
* @params - Component properties extending:
|
|
29
|
-
* - {@link DialSelectProps} for select options and props, except for
|
|
29
|
+
* - {@link DialSelectProps} for select options and props, except for className
|
|
30
30
|
* - {@link DialFormItemProps} for form item props, except for htmlFor
|
|
31
31
|
* - {@link DialFieldLabelProps} for label props, except for label, children, value
|
|
32
32
|
*
|
|
33
|
-
* @param
|
|
34
|
-
* @param
|
|
33
|
+
* @param selectClassName CSS class for the select element
|
|
34
|
+
* @param containerClassName CSS class for the form item container
|
|
35
35
|
* @param emptyStateTitle Title to show when there are no options
|
|
36
36
|
* @param restSelectProps All other DialSelect props
|
|
37
37
|
* @param restFormItemProps All other DialFormItem props
|
|
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
|
|
2
2
|
export interface DialSharedEntityIndicatorProps {
|
|
3
3
|
label?: string;
|
|
4
4
|
size?: number;
|
|
5
|
-
|
|
5
|
+
className?: string;
|
|
6
6
|
stroke?: number;
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
@@ -18,7 +18,7 @@ export interface DialSharedEntityIndicatorProps {
|
|
|
18
18
|
*
|
|
19
19
|
* @param [label="Shared entity"] - Accessible label for assistive tech
|
|
20
20
|
* @param [size=10] - Pixel size for the icon
|
|
21
|
-
* @param [
|
|
21
|
+
* @param [className] - Additional Tailwind classes appended to the container
|
|
22
22
|
* @param [stroke=2] - Stroke width for the icon
|
|
23
23
|
*
|
|
24
24
|
*/
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, FC } from 'react';
|
|
1
2
|
import { TabModel } from '../../models/tab';
|
|
2
|
-
|
|
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 {
|
|
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
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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 [
|
|
47
|
-
* below which tabs collapse into a dropdown. Uses the {@link
|
|
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 [
|
|
49
|
+
* @param [smallScreenContainerClassName] - Optional CSS class applied to the dropdown container
|
|
50
50
|
* in small-screen (collapsed) mode.
|
|
51
|
-
* @param [
|
|
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 `
|
|
57
|
+
* - Switches layout responsively based on `screenThreshold`.
|
|
58
58
|
*/
|
|
59
59
|
export declare const DialTabs: FC<DialTabsProps>;
|
|
@@ -2,7 +2,7 @@ import { TagVariant } from '../../types/tag';
|
|
|
2
2
|
import { FC, MouseEvent, ReactNode } from 'react';
|
|
3
3
|
export interface DialTagProps {
|
|
4
4
|
tag: string;
|
|
5
|
-
|
|
5
|
+
className?: string;
|
|
6
6
|
remove?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
7
7
|
variant?: TagVariant;
|
|
8
8
|
iconBefore?: ReactNode;
|
|
@@ -22,7 +22,7 @@ export interface DialTagProps {
|
|
|
22
22
|
* ```
|
|
23
23
|
*
|
|
24
24
|
* @param tag - The text label displayed inside the tag.
|
|
25
|
-
* @param [
|
|
25
|
+
* @param [className] - Optional additional CSS classes applied to the tag container.
|
|
26
26
|
* @param [remove] - Optional callback invoked when the remove button is clicked.
|
|
27
27
|
* If not provided, the remove button will not be rendered.
|
|
28
28
|
* @param [variant=TagVariant.Default] - Visual style of the tag. Uses the {@link TagVariant} enum.
|
|
@@ -33,9 +33,9 @@ export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
|
|
|
33
33
|
* @param [iconBefore] - Icon or element to display before the input
|
|
34
34
|
* @param [iconAfter] - Icon or element to display after the input
|
|
35
35
|
* @param [textBeforeInput] - Text to display before the input
|
|
36
|
-
* @param [
|
|
37
|
-
* @param [
|
|
38
|
-
* @param [
|
|
36
|
+
* @param [elementClassName] - Additional CSS classes to apply to the textarea element
|
|
37
|
+
* @param [containerClassName] - Additional CSS classes to apply to the outer container
|
|
38
|
+
* @param [elementContainerClassName] - Additional CSS classes to apply to the textarea container
|
|
39
39
|
* @param [disableTooltip] - Whether to disable the tooltip that shows the full value on hover
|
|
40
40
|
*/
|
|
41
41
|
export declare const DialTextAreaField: FC<DialTextAreaFieldProps>;
|
|
@@ -3,8 +3,8 @@ export interface DialTextareaProps {
|
|
|
3
3
|
value?: string | number | null;
|
|
4
4
|
placeholder?: string;
|
|
5
5
|
textareaId: string;
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
className?: string;
|
|
7
|
+
containerClassName?: string;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
invalid?: boolean;
|
|
10
10
|
readonly?: boolean;
|
|
@@ -28,8 +28,8 @@ export interface DialTextareaProps {
|
|
|
28
28
|
* @param [value] - The current value of the textarea
|
|
29
29
|
* @param [onChange] - Callback function called when the textarea value changes
|
|
30
30
|
* @param [placeholder] - Placeholder text displayed when textarea is empty
|
|
31
|
-
* @param [
|
|
32
|
-
* @param [
|
|
31
|
+
* @param [className=""] - Additional CSS classes to apply to the textarea element
|
|
32
|
+
* @param [containerClassName=""] - Additional CSS classes to apply to the container div
|
|
33
33
|
* @param [disabled=false] - Whether the textarea is disabled
|
|
34
34
|
* @param [readonly=false] - Whether the textarea is read-only (no user input allowed)
|
|
35
35
|
* @param [invalid=false] - Whether the textarea has validation errors (applies error styling)
|
package/dist/src/index.d.ts
CHANGED
|
@@ -18,6 +18,8 @@ export { DialFormItem } from './components/FormItem/FormItem';
|
|
|
18
18
|
export { DialSharedEntityIndicator } from './components/SharedEntityIndicator/SharedEntityIndicator';
|
|
19
19
|
export { DialFileName } from './components/FileName/FileName';
|
|
20
20
|
export { DialFolderName } from './components/FolderName/FolderName';
|
|
21
|
+
export { DialResizableContainer } from './components/ResizableContainer/ResizableContainer';
|
|
22
|
+
export { DialConditionalResizableContainer } from './components/ResizableContainer/ConditionalResizableContainer';
|
|
21
23
|
export { DialDateCellRenderer } from './components/Grid/renderers/DateCellRenderer';
|
|
22
24
|
export { DialTabs } from './components/Tabs/Tabs';
|
|
23
25
|
export { DialBreadcrumb } from './components/Breadcrumb/Breadcrumb';
|
|
@@ -62,9 +64,10 @@ export { TabOrientation } from './types/tab';
|
|
|
62
64
|
export type { DialBreadcrumbPathItem } from './models/breadcrumb';
|
|
63
65
|
export { FormItemOrientation } from './types/form-item';
|
|
64
66
|
export { SelectSize, SelectVariant } from './types/select';
|
|
65
|
-
export { DialFileManagerTabs, DialFileManagerActions,
|
|
67
|
+
export { DialFileManagerTabs, DialFileManagerActions, } from './types/file-manager';
|
|
66
68
|
export { FlexibleActionsDirection } from './types/flexible-actions';
|
|
67
69
|
export { DialItemType } from './types/item';
|
|
70
|
+
export { ResizableContainerSide } from './types/resizable-container';
|
|
68
71
|
export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
|
|
69
72
|
export { useEditableItem } from './hooks/use-editable-item';
|
|
70
73
|
export { FileManagerProvider } from './components/FileManager/FileManagerProvider';
|
|
@@ -78,4 +81,5 @@ export type { DropdownItem } from './models/dropdown';
|
|
|
78
81
|
export type { DialModifiedEntity } from './models/base-entity';
|
|
79
82
|
export type { DialFile } from './models/file';
|
|
80
83
|
export { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
|
|
84
|
+
export { type DialCopiedItem, type DialDeletedItem, type DialUploadFileItem, } from './models/file-manager';
|
|
81
85
|
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
|
+
}
|
package/dist/src/models/tab.d.ts
CHANGED
|
@@ -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,17 @@ export declare enum DialFileManagerActions {
|
|
|
12
11
|
Download = "download",
|
|
13
12
|
Delete = "delete"
|
|
14
13
|
}
|
|
15
|
-
export
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
export declare enum DialFileManagerConflictActions {
|
|
15
|
+
Replace = "replace",
|
|
16
|
+
Duplicate = "duplicate",
|
|
17
|
+
Cancel = "cancel"
|
|
18
|
+
}
|
|
19
|
+
export declare enum DialFileManagerConflictStrategies {
|
|
20
|
+
ReplaceAll = "replaceAll",
|
|
21
|
+
DuplicateAll = "duplicateAll",
|
|
22
|
+
DecideForEach = "decideForEach"
|
|
20
23
|
}
|
|
21
|
-
export
|
|
22
|
-
|
|
23
|
-
|
|
24
|
+
export declare enum DestinationFolderMode {
|
|
25
|
+
Copy = "copy",
|
|
26
|
+
Move = "move"
|
|
24
27
|
}
|
package/dist/src/types/tab.d.ts
CHANGED
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
|
+
"version": "0.5.0-rc.50",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"description": "A modern UI kit for building AI DIAL interfaces with React",
|
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"ag-grid-community": "^34.3.0",
|
|
61
61
|
"ag-grid-react": "^34.3.0",
|
|
62
|
+
"re-resizable": "^6.11.2",
|
|
62
63
|
"react-dnd": "^16.0.1",
|
|
63
64
|
"react-dnd-html5-backend": "^16.0.1",
|
|
64
65
|
"tailwind-merge": "^3.3.1"
|
|
@@ -66,7 +67,7 @@
|
|
|
66
67
|
"peerDependencies": {
|
|
67
68
|
"@floating-ui/react": "^0.27.15",
|
|
68
69
|
"@monaco-editor/react": "^4.7.0",
|
|
69
|
-
"@tabler/icons-react": "^3.
|
|
70
|
+
"@tabler/icons-react": "^3.35.0",
|
|
70
71
|
"classnames": "^2.5.1",
|
|
71
72
|
"monaco-editor": "^0.52.2",
|
|
72
73
|
"react": "^19.1.0",
|
|
@@ -113,8 +114,8 @@
|
|
|
113
114
|
"storybook": "^10.0.0",
|
|
114
115
|
"storybook-addon-pseudo-states": "^10.0.0",
|
|
115
116
|
"tailwindcss": "^3.4.17",
|
|
116
|
-
"typescript": "~5.
|
|
117
|
-
"typescript-eslint": "^8.
|
|
117
|
+
"typescript": "~5.9.3",
|
|
118
|
+
"typescript-eslint": "^8.48.0",
|
|
118
119
|
"vite": "^7.1.5",
|
|
119
120
|
"vite-plugin-dts": "^4.5.4",
|
|
120
121
|
"vite-plugin-svgr": "^4.5.0",
|