@epam/ai-dial-ui-kit 0.5.0-rc.9 → 0.5.0-rc.90

package/dist/src/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,77 @@
+import { FC, HTMLAttributes } from 'react';
+import { DialSkeletonVariant, DialSkeletonAvatarSize, DialSkeletonAvatarShape } from '../../types/skeleton';
+export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    paragraph?: boolean | {
+        rows?: number;
+        width?: string | string[];
+    };
+    avatar?: boolean | {
+        size?: number | DialSkeletonAvatarSize;
+        shape?: DialSkeletonAvatarShape;
+    };
+    showTitle?: boolean | {
+        width?: string;
+    };
+    loading?: boolean;
+    children?: React.ReactNode;
+    variant?: DialSkeletonVariant;
+    width?: string | number;
+    height?: string | number;
+}
+/**
+ * DialSkeleton
+ *
+ * A placeholder component to show while content is loading.
+ * Provides various skeleton shapes and configurations.
+ *
+ * @example
+ * ```tsx
+ * // Simple skeleton
+ * <DialSkeleton />
+ *
+ * // Text skeleton with custom size
+ * <DialSkeleton variant={DialSkeletonVariant.Text} width="200px" height="20px" />
+ *
+ * // Circular avatar skeleton
+ * <DialSkeleton variant={DialSkeletonVariant.Circular} width={40} height={40} />
+ *
+ * // Complex skeleton with avatar, showTitle and paragraph
+ * <DialSkeleton
+ *   avatar
+ *   showTitle
+ *   paragraph={{ rows: 3 }}
+ *   active
+ * />
+ *
+ * // Conditional loading
+ * <DialSkeleton loading={isLoading}>
+ *   <div>Your content here</div>
+ * </DialSkeleton>
+ *
+ * // Custom paragraph widths
+ * <DialSkeleton
+ *   paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}
+ * />
+ *
+ * // Avatar with size and shape
+ * <DialSkeleton
+ *   avatar={{
+ *     size: DialSkeletonAvatarSize.Large,
+ *     shape: DialSkeletonAvatarShape.Square
+ *   }}
+ * />
+ * ```
+ *
+ * @param [active=true] - Whether to show the loading animation
+ * @param [paragraph=true] - Show paragraph placeholder or configure its appearance
+ * @param [avatar=false] - Show avatar placeholder or configure its appearance
+ * @param [showTitle=true] - Show title placeholder or configure its appearance
+ * @param [loading=true] - Display the skeleton when true
+ * @param [children] - Content to be displayed when loading is false
+ * @param [variant=DialSkeletonVariant.Default] - Skeleton variant
+ * @param [width] - Width of the skeleton
+ * @param [height] - Height of the skeleton
+ * @param [className] - Additional CSS classes
+ */
+export declare const DialSkeleton: FC<DialSkeletonProps>;

package/dist/src/components/Skeleton/utils.d.ts

@@ -0,0 +1,2 @@
+import { DialSkeletonAvatarSize } from '../../types/skeleton';
+export declare const getAvatarSize: (size?: number | DialSkeletonAvatarSize) => number;

package/dist/src/components/Tab/Tab.d.ts

@@ -1,11 +1,11 @@
+import { ButtonHTMLAttributes, FC } from 'react';
 import { TabModel } from '../../models/tab';
-import { FC } from 'react';
-export interface DialTabProps {
+type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children' | 'type' | 'role' | 'disabled'>;
+export interface DialTabProps extends NativeButtonProps {
     tab: TabModel;
     active: boolean;
     invalid?: boolean;
     horizontal?: boolean;
-    cssClass?: string;
     onClick: (id: string) => void;
 }
 /**
@@ -26,7 +26,7 @@ export interface DialTabProps {
  * @param tab - The tab model containing its `id`, `name`, [`disabled`], [`invalid`].
  * @param active - Whether the tab is currently active.
  * @param [horizontal=false] - Whether the tab is displayed in horizontal orientation.
- * @param [cssClass] - Additional CSS classes applied to the tab element.
  * @param onClick - Callback fired when the tab is clicked. Receives the tab’s `id`.
  */
 export declare const DialTab: FC<DialTabProps>;
+export {};

package/dist/src/components/Tabs/Tabs.d.ts

@@ -1,14 +1,14 @@
 import { FC } from 'react';
 import { TabModel } from '../../models/tab';
-import { SmallScreenThreshold, TabOrientation } from '../../types/tab';
+import { ScreenResolution, TabOrientation } from '../../types/tab';
 export interface DialTabsProps {
     tabs: TabModel[];
     activeTab: string;
     onClick: (id: string) => void;
     orientation?: TabOrientation;
-    smallScreenThreshold?: SmallScreenThreshold;
-    smallScreenContainerCssClass?: string;
-    smallScreenDropdownItemCssClass?: string;
+    screenThreshold?: ScreenResolution;
+    smallScreenContainerClassName?: string;
+    smallScreenDropdownItemClassName?: string;
 }
 /**
  * A responsive and overflow-aware tabs component that automatically adapts its layout
@@ -43,17 +43,17 @@ export interface DialTabsProps {
  * @param activeTab - The identifier of the currently active tab.
  * @param onClick - Callback fired when a tab is selected. Receives the tab's `id` as an argument.
  * @param [orientation=TabOrientation.Horizontal] - Layout direction of the tabs. Uses the {@link TabOrientation} enum.
- * @param [smallScreenThreshold=SmallScreenThreshold.Tablet] - Defines the screen size threshold
- *   below which tabs collapse into a dropdown. Uses the {@link SmallScreenThreshold} enum.
+ * @param [screenThreshold=ScreenResolution.Tablet] - Defines the screen size threshold
+ *   below which tabs collapse into a dropdown. Uses the {@link ScreenRelosution} enum.
  *   When set to `Tablet`, both mobile and tablet screens will trigger dropdown mode.
- * @param [smallScreenContainerCssClass] - Optional CSS class applied to the dropdown container
+ * @param [smallScreenContainerClassName] - Optional CSS class applied to the dropdown container
  *   in small-screen (collapsed) mode.
- * @param [smallScreenDropdownItemCssClass] - Optional CSS class applied to individual dropdown
+ * @param [smallScreenDropdownItemClassName] - Optional CSS class applied to individual dropdown
  *   items in small-screen mode.
  *
  * @remarks
  * - Automatically detects horizontal overflow via `ResizeObserver` and shows a dropdown when needed.
  * - Smoothly scrolls to keep the active tab visible when navigating.
- * - Switches layout responsively based on `smallScreenThreshold`.
+ * - Switches layout responsively based on `screenThreshold`.
  */
 export declare const DialTabs: FC<DialTabsProps>;

package/dist/src/components/Tag/Tag.d.ts

@@ -2,7 +2,7 @@ import { TagVariant } from '../../types/tag';
 import { FC, MouseEvent, ReactNode } from 'react';
 export interface DialTagProps {
     tag: string;
-    cssClass?: string;
+    className?: string;
     remove?: (event: MouseEvent<HTMLButtonElement>) => void;
     variant?: TagVariant;
     iconBefore?: ReactNode;
@@ -22,7 +22,7 @@ export interface DialTagProps {
  * ```
  *
  * @param tag - The text label displayed inside the tag.
- * @param [cssClass] - Optional additional CSS classes applied to the tag container.
+ * @param [className] - Optional additional CSS classes applied to the tag container.
  * @param [remove] - Optional callback invoked when the remove button is clicked.
  *                   If not provided, the remove button will not be rendered.
  * @param [variant=TagVariant.Default] - Visual style of the tag. Uses the {@link TagVariant} enum.

package/dist/src/components/TextAreaField/TextAreaField.d.ts

@@ -33,9 +33,9 @@ export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
  * @param [iconBefore] - Icon or element to display before the input
  * @param [iconAfter] - Icon or element to display after the input
  * @param [textBeforeInput] - Text to display before the input
- * @param [elementCssClass] - Additional CSS classes to apply to the textarea element
- * @param [containerCssClass] - Additional CSS classes to apply to the outer container
- * @param [elementContainerCssClass] - Additional CSS classes to apply to the textarea container
+ * @param [elementClassName] - Additional CSS classes to apply to the textarea element
+ * @param [containerClassName] - Additional CSS classes to apply to the outer container
+ * @param [elementContainerClassName] - Additional CSS classes to apply to the textarea container
  * @param [disableTooltip] - Whether to disable the tooltip that shows the full value on hover
  */
 export declare const DialTextAreaField: FC<DialTextAreaFieldProps>;

package/dist/src/components/Textarea/Textarea.d.ts

@@ -3,8 +3,8 @@ export interface DialTextareaProps {
     value?: string | number | null;
     placeholder?: string;
     textareaId: string;
-    cssClass?: string;
-    containerCssClass?: string;
+    className?: string;
+    containerClassName?: string;
     disabled?: boolean;
     invalid?: boolean;
     readonly?: boolean;
@@ -28,8 +28,8 @@ export interface DialTextareaProps {
  * @param [value] - The current value of the textarea
  * @param [onChange] - Callback function called when the textarea value changes
  * @param [placeholder] - Placeholder text displayed when textarea is empty
- * @param [cssClass=""] - Additional CSS classes to apply to the textarea element
- * @param [containerCssClass=""] - Additional CSS classes to apply to the container div
+ * @param [className=""] - Additional CSS classes to apply to the textarea element
+ * @param [containerClassName=""] - Additional CSS classes to apply to the container div
  * @param [disabled=false] - Whether the textarea is disabled
  * @param [readonly=false] - Whether the textarea is read-only (no user input allowed)
  * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)

package/dist/src/hooks/use-width-breakpoint.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A React hook that tracks the width of a DOM element and determines if it is smaller than a specified breakpoint.
+ *
+ * This hook returns a `ref` to attach to the element you want to observe and a boolean `isBelowBreakpoint`
+ * that becomes `true` when the element's width is less than the given `breakpoint`, and `false` otherwise.
+ * The value updates automatically when the element is resized.
+ *
+ * @param {number} breakpoint - The width in pixels used as the threshold. `isBelowBreakpoint` is true when the element's width is less than this value.
+ * @returns {{ containerRef: React.RefObject<HTMLElement>, isBelowBreakpoint: boolean }} An object containing the ref to attach to your element and the boolean indicating if it is smaller than the breakpoint.
+ *
+ * @example
+ * const { containerRef, isBelowBreakpoint } = useWidthBreakpoint(600);
+ *
+ * return (
+ *   <div ref={containerRef}>
+ *     {isBelowBreakpoint ? 'Compact view' : 'Full view'}
+ *   </div>
+ * );
+ */
+export declare function useWidthBreakpoint(breakpoint: number): {
+    containerRef: import('react').RefObject<HTMLElement | null>;
+    isBelowBreakpoint: boolean;
+};

package/dist/src/index.d.ts

@@ -18,7 +18,10 @@ export { DialFormItem } from './components/FormItem/FormItem';
 export { DialSharedEntityIndicator } from './components/SharedEntityIndicator/SharedEntityIndicator';
 export { DialFileName } from './components/FileName/FileName';
 export { DialFolderName } from './components/FolderName/FolderName';
-export { DialDateCellRenderer } from './components/Grid/renderers/DateCellRenderer';
+export { DialResizableContainer } from './components/ResizableContainer/ResizableContainer';
+export { DialConditionalResizableContainer } from './components/ResizableContainer/ConditionalResizableContainer';
+export { DialSkeleton } from './components/Skeleton/Skeleton';
+export { DialGrid } from './components/Grid/Grid';
 export { DialTabs } from './components/Tabs/Tabs';
 export { DialBreadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { DialBreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem';
@@ -62,9 +65,11 @@ export { TabOrientation } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
 export { SelectSize, SelectVariant } from './types/select';
-export { DialFileManagerTabs, DialFileManagerActions, type DialCopiedItem, type DialDeletedItem, } from './types/file-manager';
+export { DialFileManagerTabs, DialFileManagerActions, FileManagerColumnKey, } from './types/file-manager';
 export { FlexibleActionsDirection } from './types/flexible-actions';
 export { DialItemType } from './types/item';
+export { ResizableContainerSide } from './types/resizable-container';
+export { DialSkeletonVariant, DialSkeletonAvatarSize, DialSkeletonAvatarShape, } from './types/skeleton';
 export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
 export { useEditableItem } from './hooks/use-editable-item';
 export { FileManagerProvider } from './components/FileManager/FileManagerProvider';
@@ -78,4 +83,5 @@ export type { DropdownItem } from './models/dropdown';
 export type { DialModifiedEntity } from './models/base-entity';
 export type { DialFile } from './models/file';
 export { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
+export { type DialCopiedItem, type DialDeletedItem, type DialUploadFileItem, } from './models/file-manager';
 export { mergeClasses } from './utils/merge-classes';

package/dist/src/models/breadcrumb.d.ts

@@ -4,6 +4,6 @@ export interface DialBreadcrumbPathItem {
     href?: string;
     onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
     disabled?: boolean;
-    cssClass?: string;
+    className?: string;
     iconBefore?: ReactNode;
 }

package/dist/src/models/dropdown.d.ts

@@ -7,6 +7,7 @@ export interface DropdownItem {
     disabled?: boolean;
     danger?: boolean;
     type?: DropdownItemType;
+    className?: string;
     onClick?: (info: {
         key: string;
         domEvent: MouseEvent;

package/dist/src/models/file-manager.d.ts

@@ -0,0 +1,15 @@
+import { DialFileNodeType } from './file';
+export interface DialCopiedItem {
+    sourceUrl: string;
+    destinationUrl: string;
+    overwrite?: boolean;
+    nodeType: DialFileNodeType;
+}
+export interface DialDeletedItem {
+    sourceUrl: string;
+    nodeType: DialFileNodeType;
+}
+export interface DialUploadFileItem {
+    fileContent: File;
+    name: string;
+}

package/dist/src/models/file.d.ts

@@ -34,5 +34,5 @@ export declare enum DialFilePermission {
     SHARE = "SHARE"
 }
 export interface DialRootFolder extends DialFile {
-    breadcrumbLabel: string;
+    label: string;
 }

package/dist/src/models/tab.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 export interface TabModel {
     id: string;
-    name: string;
+    label: string | ReactNode;
     invalid?: boolean;
     disabled?: boolean;
 }

package/dist/src/types/dropdown.d.ts

@@ -9,5 +9,6 @@ export declare enum DropdownTrigger {
 }
 export declare enum DropdownItemType {
     Item = "item",
-    Divider = "divider"
+    Divider = "divider",
+    PlainText = "plainText"
 }

package/dist/src/types/file-manager.d.ts

@@ -1,4 +1,3 @@
-import { DialFileNodeType } from '../models/file';
 export declare enum DialFileManagerTabs {
     MyFiles = "my_files",
     Shared = "shared",
@@ -12,13 +11,28 @@ export declare enum DialFileManagerActions {
     Download = "download",
     Delete = "delete"
 }
-export interface DialCopiedItem {
-    sourceUrl: string;
-    destinationUrl: string;
-    overwrite?: boolean;
-    nodeType: DialFileNodeType;
+export declare enum DialFileManagerConflictActions {
+    Replace = "replace",
+    Duplicate = "duplicate",
+    Cancel = "cancel"
+}
+export declare enum DialFileManagerConflictStrategies {
+    ReplaceAll = "replaceAll",
+    DuplicateAll = "duplicateAll",
+    DecideForEach = "decideForEach"
+}
+export declare enum DestinationFolderMode {
+    Copy = "copy",
+    Move = "move"
+}
+export declare enum FileManagerRenameTriggerView {
+    Tree = "tree",
+    Grid = "grid"
 }
-export interface DialDeletedItem {
-    sourceUrl: string;
-    nodeType: DialFileNodeType;
+export declare enum FileManagerColumnKey {
+    Name = "name",
+    UpdatedAt = "updatedAt",
+    Size = "size",
+    Author = "author",
+    Actions = "__actions"
 }

package/dist/src/types/resizable-container.d.ts

@@ -0,0 +1,4 @@
+export declare enum ResizableContainerSide {
+    Left = "left",
+    Right = "right"
+}

package/dist/src/types/skeleton.d.ts

@@ -0,0 +1,15 @@
+export declare enum DialSkeletonVariant {
+    Default = "default",
+    Text = "text",
+    Circular = "circular",
+    Rectangular = "rectangular"
+}
+export declare enum DialSkeletonAvatarSize {
+    Small = "small",
+    Default = "default",
+    Large = "large"
+}
+export declare enum DialSkeletonAvatarShape {
+    Circle = "circle",
+    Square = "square"
+}

package/dist/src/types/tab.d.ts

@@ -2,7 +2,7 @@ export declare enum TabOrientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
-export declare enum SmallScreenThreshold {
+export declare enum ScreenResolution {
     Mobile = "mobile",
     Tablet = "tablet"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.5.0-rc.9",
+  "version": "0.5.0-rc.90",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -59,6 +59,7 @@
   "dependencies": {
     "ag-grid-community": "^34.3.0",
     "ag-grid-react": "^34.3.0",
+    "re-resizable": "^6.11.2",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "tailwind-merge": "^3.3.1"
@@ -66,7 +67,7 @@
   "peerDependencies": {
     "@floating-ui/react": "^0.27.15",
     "@monaco-editor/react": "^4.7.0",
-    "@tabler/icons-react": "^3.34.1",
+    "@tabler/icons-react": "^3.35.0",
     "classnames": "^2.5.1",
     "monaco-editor": "^0.52.2",
     "react": "^19.1.0",
@@ -113,8 +114,8 @@
     "storybook": "^10.0.0",
     "storybook-addon-pseudo-states": "^10.0.0",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.35.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
     "vite": "^7.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-svgr": "^4.5.0",