@epam/ai-dial-ui-kit 0.11.0-dev.8 → 0.11.1

package/dist/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.d.ts

@@ -11,6 +11,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
     moveLabel?: string;
     addFolderLabel?: string;
     showHiddenFileSwitcher?: boolean;
+    showCreateFolderButton?: boolean;
     hiddenFilesSwitcherLabel?: string;
     mode?: 'copy' | 'move';
     header?: ReactNode;
@@ -19,6 +20,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
     collapsedFileTree?: boolean;
     alertProps?: DialNotificationProps;
     onFolderPopupPathChange?: (newPath?: string) => void;
+    processDestinationFolderPath?: (path: string) => string;
 }
 /**
  * DestinationFolderPopup
@@ -59,5 +61,8 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
  * @param [sourceFolder] - The source folder path for move operations
  * @param [disabledPathTooltip="Unavailable for the original path. Please select another folder"] - Tooltip text when destination is disabled
  * @param [collapsedFileTree=false] - Whether the file tree should be initially collapsed
+ * @param [processDestinationFolderPath] - Optional function to process the destination folder path before setting it
+ *
+ * @returns A React component for the destination folder selection popup
  */
 export declare const DialDestinationFolderPopup: FC<DestinationFolderPopupProps>;

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

@@ -54,4 +54,5 @@ export declare const splitPathAndName: (fullPath: string) => {
 };
 export declare const isFileSelectable: (file: Pick<DialFile, "contentLength" | "contentType" | "name">, allowedFileTypes?: DialFileAcceptType[], maxSelectableFileSize?: number) => boolean;
 export declare const getRowTooltip: (file: FileManagerGridRow, allowedFileTypes?: DialFileAcceptType[], maxSelectableFileSize?: number, unsupportedFileTypeTooltip?: string, fileTooLargeTooltip?: string) => string | undefined;
+export declare const getFolderNestingDepth: (folderPath: string) => number;
 export declare const getNextFolderName: (existingFolders: DialFile[]) => string;

package/dist/src/components/Input/Button/InputButton.d.ts

@@ -5,6 +5,7 @@ export interface DialInputButtonProps {
     disabled?: boolean;
     onClick?: () => void;
     size?: ElementSize;
+    className?: string;
 }
 /**
  * An Input button component with a customizable icon and accessible label.

package/dist/src/components/LoadFileArea/FilledDropZone.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+interface FilledDropZoneProps {
+    children: ReactNode;
+    existingFiles: File[];
+    onDrop: (files: File[]) => void;
+    getIsFileFormatError?: (fileItems: File[] | DataTransferItem[]) => boolean;
+    getIsFileSizeError?: (fileItems: File[] | DataTransferItem[]) => boolean;
+    maxFilesCount?: number;
+    fileFormatError?: string;
+    fileSizeError?: string;
+    fileCountError?: string;
+}
+export declare const FilledDropZone: FC<FilledDropZoneProps>;
+export {};

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

@@ -7,6 +7,7 @@ export interface DialNotificationProps extends Omit<HTMLAttributes<HTMLDivElemen
     closable?: boolean;
     iconSize?: number;
     iconStroke?: number;
+    textClassName?: string;
     onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 /**
@@ -18,25 +19,25 @@ export interface DialNotificationProps extends Omit<HTMLAttributes<HTMLDivElemen
  *
  * @example
  * ```tsx
- * <DialAlert
+ * <DialNotification
  *   variant={NotificationVariant.Info}
  *   message="This is an info alert."
  * />
  *
- * <DialAlert
+ * <DialNotification
  *   variant={NotificationVariant.Success}
  *   title="Saved"
  *   message="Changes saved successfully."
  * />
  *
- * <DialAlert
+ * <DialNotification
  *   variant={NotificationVariant.Error}
  *   closable
  *   message="Something went wrong."
  *   onClose={(e) => console.log('closed', e)}
  * />
  *
- * <DialAlert
+ * <DialNotification
  *   variant={NotificationVariant.Loading}
  *   title="Processing"
  *   message="Please wait..."
@@ -47,6 +48,7 @@ export interface DialNotificationProps extends Omit<HTMLAttributes<HTMLDivElemen
  * @param [title] - Optional heading displayed above the message in semibold
  * @param message - Message text to display inside the alert
  * @param [className] - Additional CSS classes applied to the alert container
+ * @param [textClassName] - Additional CSS classes applied to the message text
  * @param [closable=false] - Whether the alert has a close button
  * @param [iconSize=24] - Size of the icon displayed in the alert
  * @param [iconStroke=2] - Stroke width of the icon displayed in the alert

package/dist/src/components/Notification/constants.d.ts

@@ -5,4 +5,4 @@ export declare const variantIcons: (props: {
     stroke: number;
 }) => Record<NotificationVariant, ReactNode>;
 export declare const notificationVariantClassNameMap: Record<NotificationVariant, string>;
-export declare const alertBaseClassName = "items-center justify-between gap-3 p-3 border border-solid dial-small-text-150 rounded shadow flex";
+export declare const alertBaseClassName = "items-center justify-between relative gap-3 p-3 border border-solid dial-small-text-150 rounded shadow flex";

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

@@ -1,5 +1,9 @@
 export declare const MANY_PAGES_THRESHOLD = 7;
 export declare const ADJACENT_WINDOW = 2;
 export declare const getPageRange: (totalPages: number) => number[];
-export type PageDisplayType = 'active' | 'adjacent' | 'far';
+export declare enum PageDisplayType {
+    Active = "active",
+    Adjacent = "adjacent",
+    Far = "far"
+}
 export declare const getPageDisplayType: (p: number, currentPage: number, totalPages: number) => PageDisplayType;

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

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { ElementSize } from '../../types/size';
 import { DialInputProps } from '../Input/Input';
 export interface DialSearchProps extends Omit<DialInputProps, 'type' | 'size' | 'inputButtonProps' | 'labelProps' | 'iconBefore' | 'iconAfter' | 'prefix' | 'postfix' | 'onChange'> {
+    withoutBorder?: boolean;
     size?: ElementSize;
     onChange?: (value: string) => void;
 }
@@ -28,5 +29,6 @@ export interface DialSearchProps extends Omit<DialInputProps, 'type' | 'size' |
  * (like `iconBefore`, `iconAfter`, and `inputButtonProps` which are managed internally). The `size`
  * prop allows you to choose between predefined size configurations that adjust the input's appearance
  * @param [size=ElementSize.Standard] - The size of the search input. Uses the {@link ElementSize} enum.
+ * @param [withoutBorder] - If true, the search input will be rendered without a border.
  */
 export declare const DialSearch: FC<DialSearchProps>;

package/dist/src/components/Search/constants.d.ts

@@ -1,16 +1,8 @@
-export declare const SIZE_CONFIG: {
-    small: {
-        className: string;
-        wrapperClassName: string;
-        containerClassName: string;
-        iconSize: number;
-        iconStroke: number;
-    };
-    standard: {
-        className: string;
-        wrapperClassName: string;
-        containerClassName: string;
-        iconSize: number;
-        iconStroke: number;
-    };
-};
+import { ElementSize } from '../../types/size';
+export declare const SIZE_CONFIG: Record<ElementSize, {
+    className: string;
+    wrapperClassName: string;
+    containerClassName: string;
+    iconSize: number;
+    iconStroke: number;
+}>;

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

@@ -18,6 +18,8 @@ export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     variant?: DialSkeletonVariant;
     width?: string | number;
     height?: string | number;
+    overlay?: ReactNode;
+    color?: string;
 }
 /**
  * DialSkeleton
@@ -74,5 +76,7 @@ export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * @param [width] - Width of the skeleton
  * @param [height] - Height of the skeleton
  * @param [className] - Additional CSS classes
+ * @param [overlay] - Content to overlay on top of the skeleton (e.g., a spinner)
+ * @param [color] - Custom background color for the skeleton elements (overrides the default token)
  */
 export declare const DialSkeleton: FC<DialSkeletonProps>;

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

@@ -0,0 +1,53 @@
+import { FC, HTMLAttributes } from 'react';
+export interface DialSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    /** 2-element or 3-element label tuple rendered below the track */
+    labels?: [string, string] | [string, string, string];
+    /** Custom formatter for the thumb value; defaults to fixed-decimal based on step */
+    formatValue?: (value: number) => string;
+    onChange?: (value: number) => void;
+    /** Additional classes for the track bar (default: `bg-layer-1`) */
+    trackClassName?: string;
+    /** Additional classes for the filled portion of the track (default: `bg-controls-accent-primary`) */
+    fillClassName?: string;
+    /** Additional classes for the thumb circle (default: `bg-layer-3 text-primary dial-small-text`) */
+    thumbClassName?: string;
+    /** Additional classes for the labels row (default: `text-secondary dial-tiny-text`) */
+    labelsClassName?: string;
+}
+/**
+ * A range slider with a custom thumb showing the current value and optional labels.
+ * aliases: RangeInput|TemperatureSlider
+ *
+ * @example
+ * ```tsx
+ * <DialSlider
+ *   value={0.5}
+ *   min={0}
+ *   max={1}
+ *   step={0.1}
+ *   labels={['Precise', 'Neutral', 'Creative']}
+ *   aria-label="Temperature"
+ *   onChange={(v) => console.log(v)}
+ * />
+ * ```
+ *
+ * @param value - Current slider value
+ * @param [min=0] - Minimum value
+ * @param [max=1] - Maximum value
+ * @param [step=0.1] - Step increment
+ * @param [disabled=false] - Disables interaction
+ * @param [labels] - 2 or 3 strings rendered below the track (start, [middle,] end)
+ * @param [formatValue] - Custom value formatter for the thumb display
+ * @param [onChange] - Callback fired with the new value on interaction
+ * @param [className] - Additional CSS classes for the outer container
+ * @param [trackClassName] - Additional CSS classes for the track bar
+ * @param [fillClassName] - Additional CSS classes for the fill portion of the track
+ * @param [thumbClassName] - Additional CSS classes for the thumb circle
+ * @param [labelsClassName] - Additional CSS classes for the labels row
+ */
+export declare const DialSlider: FC<DialSliderProps>;

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

@@ -1,34 +1,24 @@
-import { TagVariant } from '../../types/tag';
 import { FC, MouseEvent, ReactNode } from 'react';
+/**
+ * Props for the `DialTag` component.
+ */
 export interface DialTagProps {
-    tag: string;
+    /** Text content displayed inside the tag. */
+    label: string;
+    /** Additional CSS classes applied to the root container. */
     className?: string;
-    remove?: (event: MouseEvent<HTMLButtonElement>) => void;
-    variant?: TagVariant;
-    iconBefore?: ReactNode;
-    bordered?: boolean;
+    /** Applies selected visual styles when `true`. */
+    selected?: boolean;
+    /** Optional icon rendered before the label. */
+    icon?: ReactNode;
+    /** Enables rendering of the remove button. */
+    closable?: boolean;
+    /** Fired when the tag container is clicked. */
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /** Fired when the remove button is clicked. */
+    onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 /**
- * A small tag component used to display labeled items such as categories, filters, or selections.
- * aliases: Badge|Chip
- *
- * Optionally supports removal via a close button and multiple colors variants defined by {@link TagVariant}.
- *
- * @example
- * ```tsx
- * <DialTag
- *   tag="React"
- *   variant={TagVariant.Default}
- *   remove={() => console.log('Tag removed')}
- * />
- * ```
- *
- * @param tag - The text label displayed inside the tag.
- * @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.
- * @param [iconBefore] - Optional icon or element to display before the tag text.
- * @param [bordered=true] - When true, adds a border to the tag for better visibility on light backgrounds.
+ * A compact label element used for selections, filters, or categories.
  */
 export declare const DialTag: FC<DialTagProps>;

package/dist/src/hooks/use-editable-item.d.ts

@@ -1,4 +1,8 @@
 import { RefObject } from 'react';
+export declare const EDITABLE_CONTAINER_ATTRIBUTE = "data-editable-container";
+export declare const editableContainerProps: {
+    readonly "data-editable-container": "";
+};
 export interface UseEditableItemOptions {
     value: string;
     isEditing: boolean;

package/dist/src/index.d.ts

@@ -13,6 +13,8 @@ export { DialCheckbox } from './components/Checkbox/Checkbox';
 export { DialSteps } from './components/Steps/Steps';
 export { DialRadioButton } from './components/RadioButton/RadioButton';
 export { DialRadioGroup } from './components/RadioGroup/RadioGroup';
+export { DialSlider } from './components/Slider/Slider';
+export type { DialSliderProps } from './components/Slider/Slider';
 export { DialNoDataContent } from './components/NoDataContent/NoDataContent';
 export type { DialNoDataContentProps } from './components/NoDataContent/NoDataContent';
 export { DialCollapsibleSidebar } from './components/CollapsibleSidebar/CollapsibleSidebar';
@@ -77,7 +79,6 @@ export { PopupSize } from './types/popup';
 export { ConfirmationPopupVariant } from './types/confirmation-popup';
 export { DropdownType, DropdownTrigger, DropdownItemType, } from './types/dropdown';
 export { ElementSize } from './types/size';
-export { TagVariant } from './types/tag';
 export { TabOrientation } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';

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

@@ -1,4 +1,5 @@
 export declare enum ElementSize {
     Small = "small",
-    Standard = "standard"
+    Standard = "standard",
+    Large = "large"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.11.0-dev.8",
+  "version": "0.11.1",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -69,7 +69,9 @@
   },
   "overrides": {
     "lodash": "4.18.1",
-    "dompurify": "3.4.1"
+    "dompurify": "3.4.10",
+    "shell-quote": "1.8.4",
+    "esbuild": "0.28.1"
   },
   "dependencies": {
     "ag-grid-community": "^35.2.1",
@@ -98,13 +100,13 @@
     }
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.1.2",
+    "@chromatic-com/storybook": "^5.2.1",
     "@eslint/js": "^9.39.2",
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@storybook/addon-a11y": "^10.3.6",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/addon-vitest": "^10.3.6",
-    "@storybook/react-vite": "^10.3.6",
+    "@storybook/addon-a11y": "^10.4.4",
+    "@storybook/addon-docs": "^10.4.4",
+    "@storybook/addon-vitest": "^10.4.4",
+    "@storybook/react-vite": "^10.4.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@types/jsdom": "^28.0.1",
@@ -113,11 +115,11 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.6.0",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "autoprefixer": "^10.5.0",
-    "concurrently": "^9.2.1",
-    "esbuild": "^0.25.9",
+    "concurrently": "^10.0.3",
+    "esbuild": "0.28.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
@@ -125,7 +127,7 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-storybook": "^10.2.17",
+    "eslint-plugin-storybook": "^10.4.4",
     "eslint-plugin-tailwindcss": "^3.18.3",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
@@ -136,8 +138,8 @@
     "prettier": "^3.8.3",
     "sass": "^1.99.0",
     "sass-embedded": "^1.99.0",
-    "storybook": "^10.3.6",
-    "storybook-addon-pseudo-states": "^10.3.6",
+    "storybook": "^10.4.4",
+    "storybook-addon-pseudo-states": "^10.4.4",
     "tailwindcss": "^3.4.19",
     "tsx": "^4.20.5",
     "typescript": "~5.9.3",
@@ -145,6 +147,6 @@
     "vite": "^7.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-svgr": "^4.5.0",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.8"
   }
 }