@epam/ai-dial-ui-kit 0.4.0-rc.4 → 0.4.0-rc.6
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC, ReactNode } from 'react';
|
|
1
|
+
import { FC, ReactNode, MouseEvent } from 'react';
|
|
2
2
|
export interface DialCollapsibleSidebarProps {
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
width: number;
|
|
@@ -8,6 +8,8 @@ export interface DialCollapsibleSidebarProps {
|
|
|
8
8
|
iconSize?: number;
|
|
9
9
|
additionalButtons?: ReactNode;
|
|
10
10
|
iconStroke?: number;
|
|
11
|
+
isOpened?: boolean;
|
|
12
|
+
onToggle?: (nextOpened: boolean, e: MouseEvent<HTMLButtonElement>) => void;
|
|
11
13
|
}
|
|
12
14
|
/**
|
|
13
15
|
* A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.
|
|
@@ -35,5 +37,7 @@ export interface DialCollapsibleSidebarProps {
|
|
|
35
37
|
* @param [iconSize = 32] - The size of the toggle icons. Defaults to 32
|
|
36
38
|
* @param [iconStroke = 1.5] - The stroke width of the toggle icons. Defaults to 1.5
|
|
37
39
|
* @param [additionalButtons] - Additional buttons or elements displayed next to the toggle button when expanded
|
|
40
|
+
* @param [isOpened] - When provided, the component becomes controlled by this value
|
|
41
|
+
* @param [onToggle] - Fired when user clicks the toggle in controlled mode, with the next state
|
|
38
42
|
*/
|
|
39
43
|
export declare const DialCollapsibleSidebar: FC<DialCollapsibleSidebarProps>;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
export declare const containerBaseClasses = "w-full h-full grid grid-rows-[auto_1fr] gap-
|
|
2
|
-
export declare const toolbarBaseClasses = "w-full
|
|
3
|
-
export declare const mainGridClasses = "flex min-h-0 min-w-0 h-full gap-
|
|
4
|
-
export declare const contentGridClasses = "flex flex-col flex-1 min-h-0 min-w-0 h-full gap-
|
|
1
|
+
export declare const containerBaseClasses = "w-full h-full grid grid-rows-[auto_1fr] gap-5 p-6 overflow-hidden min-w-0 bg-layer-2";
|
|
2
|
+
export declare const toolbarBaseClasses = "w-full text-secondary flex items-center gap-2";
|
|
3
|
+
export declare const mainGridClasses = "flex min-h-0 min-w-0 h-full gap-4 overflow-hidden";
|
|
4
|
+
export declare const contentGridClasses = "flex flex-col flex-1 min-h-0 min-w-0 h-full gap-4";
|
|
5
5
|
export declare const contentHeaderClasses = "items-center";
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const
|
|
8
|
-
export declare const gridPlaceholderClasses = "flex-1 w-full rounded text-secondary overflow-auto min-h-0 min-w-0";
|
|
6
|
+
export declare const treeBaseClasses = "w-full h-full rounded bg-layer-3 text-secondary overflow-auto min-w-0";
|
|
7
|
+
export declare const gridBaseClasses = "flex-1 w-full rounded text-secondary overflow-auto min-h-0 min-w-0";
|
|
9
8
|
export declare const sidebarWidth = 360;
|
|
10
9
|
export declare const sidebarTitleDefault = "Files";
|