@epam/ai-dial-ui-kit 0.12.0-dev.9 → 0.12.0

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

@@ -164,6 +164,7 @@ export interface DialFileManagerProps {
     fileTooLargeTooltip?: string;
     unsupportedFileTypeTooltip?: string;
     onUploadFiles?: (files: DialUploadFileItem[], destinationFolder: string) => void;
+    prepareUploadFileName?: (name: string) => string;
     onValidateUpload?: (files: DialUploadFileItem[], existingFiles: DialFile[], destinationFolder: string) => FileUploadValidationResult | Promise<FileUploadValidationResult>;
     maxFileSize?: number;
     uploadValidationMessages?: FileUploadValidationMessages;
@@ -286,6 +287,7 @@ export interface DialFileManagerProps {
  *
  * @param [onUploadArchive] - Callback fired when archive files are uploaded
  * @param [onUploadFiles] - Callback fired when files are uploaded
+ * @param [prepareUploadFileName] - Optional mapper applied to each uploaded item's name before conflict resolution runs and before `onUploadFiles`/`onUploadArchive` are called. Use it to sanitize or normalize names (e.g. stripping forbidden symbols). Conflict detection is performed against the mapped names, so renames take place before the conflict check.
  * @param [onValidateUpload] - Callback to validate files before upload
  * @param [maxFileSize] - Maximum allowed file size for uploads in bytes
  * @param [uploadValidationMessages] - Custom validation messages for file uploads. Consumers can customize these strings for a11y and copy consistency.

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

@@ -1,3 +1,6 @@
 export declare const DEFAULT_WARNINGS: {
     hiddenItemWarning: string;
 };
+export declare const DEFAULT_ERRORS: {
+    consecutiveDotsError: string;
+};

package/dist/src/components/FileManager/hooks/use-file-upload.d.ts

@@ -34,9 +34,10 @@ export interface UseFileUploadOptions {
     allowedFileTypes?: DialFileAcceptType[];
     validationMessages?: FileUploadValidationMessages;
     onUploadArchive?: (file: File, name: string, destinationFolder: string) => void;
+    prepareUploadFileName?: (name: string) => string;
     currentFolder?: DialFile;
 }
-export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileSize, allowedFileTypes, validationMessages, onUploadArchive, uploadEnabled, currentFolder, }?: UseFileUploadOptions) => {
+export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileSize, allowedFileTypes, validationMessages, onUploadArchive, prepareUploadFileName, uploadEnabled, currentFolder, }?: UseFileUploadOptions) => {
     isDragging: boolean;
     isDraggingOverWindow: boolean;
     uploadError: string | undefined;

package/dist/src/components/FileManager/hooks/use-folder-creation.d.ts

@@ -4,6 +4,7 @@ export interface FolderCreationValidationMessages {
     emptyName?: string;
     duplicateName?: string;
     hiddenItemWarning?: string;
+    consecutiveDotsError?: string;
 }
 export interface UseFolderCreationProps {
     currentFolder?: DialFile;

package/dist/src/components/FileManager/hooks/use-item-renaming.d.ts

@@ -4,6 +4,7 @@ export interface RenameValidationMessages {
     emptyName?: string;
     duplicateName?: string;
     hiddenItemWarning?: string;
+    consecutiveDotsError?: string;
 }
 export declare const useItemRenaming: ({ items, onRenameValidate, validationMessages, onMoveToFiles, }: {
     items?: DialFile[];

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

@@ -1 +1 @@
-export declare const infoButtonClassName = "w-[24px] h-[24px] border border-solid rounded-[6px] border-transparent flex items-center justify-center text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active focus-within:border-focus";
+export declare const infoButtonClassName = "w-[24px] h-[24px] border border-solid rounded-[6px] border-transparent flex items-center justify-center text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active";

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

@@ -8,6 +8,7 @@ export interface DialRadioGroupProps {
     radioButtons: RadioButtonWithContent[];
     activeRadioButton: string;
     orientation: RadioGroupOrientation;
+    labelDescription?: string;
     onChange: (radioId: string) => void;
     radioClassName?: string;
     groupLabelClassName?: string;
@@ -55,6 +56,7 @@ export interface DialRadioGroupProps {
  * @param [selectedLabelClassName] - Additional classes applied to the selected option's label
  * @param [radioGroupClassName] - Additional classes applied to the radio group container
  * @param [disabled] - Disables all child radios when set
+ * @param [labelDescription] - Optional description rendered by `DialFormItem`
  * @param radioButtons - Array of options with ids, labels, and optional content
  * @param activeRadioButton - The id of the currently selected radio
  * @param orientation - Layout direction of radios: row or column

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

@@ -53,6 +53,7 @@ export interface RadioGroupPopupFieldProps extends Pick<DialLabelProps, 'label'
  * @param [selectedValue] - Current value id used to resolve the displayed option name
  * @param radioButtons - Collection of radio options (id/name)
  * @param [customInputValue] - Custom value text to display instead of a radio option name
+ * @param [placeholder] - Placeholder text shown in the field when no value is selected; unlike `emptyValueText`, it suppresses the tooltip
  * @param [valueClassName] - Extra classes applied to the value text in the collapsed field
  * @param [inputClassName] - Extra classes applied to the collapsed input container
  * @param emptyValueText - Placeholder text when no value is selected

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

@@ -24,5 +24,6 @@ import { DialSchemaRendererProps } from './types';
  * @param [onChange] - Called with the full form value on every change
  * @param [onPropertyChange] - Called with `(path, value)` for each individual property change
  * @param [onDefaultValues] - Called once on mount with the resolved default values
+ * @param [jsonEditorTheme] - Theme for the JSON editor shown for value keys absent from the schema
  */
 export declare const DialSchemaRenderer: FC<DialSchemaRendererProps>;

package/dist/src/components/SchemaRenderer/components/SchemaAdditionalPropertiesEditor.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { EditorThemes } from '../../../types/editor';
+export interface SchemaAdditionalPropertiesEditorProps {
+    value: unknown;
+    onChange: (value: unknown) => void;
+    theme?: EditorThemes;
+    height?: number;
+}
+/**
+ * Renders a single value key that is not declared in the schema's `properties` as a raw JSON
+ * editor, letting users inspect and manually edit it. The Monaco-based editor is dynamically
+ * imported on the client only, keeping the parent SchemaRenderer SSR-safe.
+ * aliases: SchemaExtraPropertyEditor|SchemaUnknownPropertyEditor
+ *
+ * @param value - The current value of the property (any JSON type)
+ * @param onChange - Called with the parsed value whenever the edited JSON is valid
+ * @param [theme=EditorThemes.dark] - Theme applied to the JSON editor
+ * @param [height=240] - Editor height in pixels
+ */
+export declare const SchemaAdditionalPropertiesEditor: FC<SchemaAdditionalPropertiesEditorProps>;

package/dist/src/components/SchemaRenderer/context.d.ts

@@ -1,11 +1,14 @@
 import { default as React } from 'react';
 import { JsonSchema, JsonSchemaDef, SchemaRendererTexts } from './types';
+import { EditorThemes } from '../../types/editor';
 interface SchemaRendererContextValue {
     rootSchema: JsonSchema;
     texts: SchemaRendererTexts;
     readonly?: boolean;
     defaultExpanded?: boolean;
     inputClassName?: string;
+    jsonEditorTheme?: EditorThemes;
+    acceptableResourceTypes?: Record<string, unknown>;
     renderField?: (path: string[], schema: JsonSchemaDef, defaultElement: React.ReactElement) => React.ReactNode;
     touchedPaths?: ReadonlySet<string>;
     markTouched?: (path: string) => void;

package/dist/src/components/SchemaRenderer/types.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { EditorThemes } from '../../types/editor';
 export declare enum SchemaRendererVariant {
     Sections = "sections",
     Flat = "flat",
@@ -46,6 +47,7 @@ export interface JsonSchemaDef {
     };
     'dial:meta'?: Record<string, unknown>;
     'dial:resource'?: boolean;
+    acceptableResourceTypes?: string[];
     [key: string]: unknown;
 }
 export interface JsonSchema extends JsonSchemaDef {
@@ -94,6 +96,18 @@ export interface DialSchemaRendererProps {
      * with a field. When `false` (default), all unfilled required fields are highlighted immediately.
      */
     skipUntouched?: boolean;
+    /**
+     * Theme applied to the JSON editor shown for value keys that are not declared in the
+     * schema's `properties`. Defaults to `EditorThemes.dark`.
+     */
+    jsonEditorTheme?: EditorThemes;
+    /**
+     * Live resource options for schema properties flagged with `dial:resource: true`.
+     * Keyed by the resource type name referenced in a property's `acceptableResourceTypes`
+     * array; each value provides the selectable entries for that resource type (a string
+     * array for string-typed properties).
+     */
+    acceptableResourceTypes?: Record<string, unknown>;
     onChange?: (value: Record<string, unknown>) => void;
     onPropertyChange?: (path: string, value: unknown) => void;
     onDefaultValues?: (value: Record<string, unknown>) => void;

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

@@ -0,0 +1,39 @@
+import { SegmentedControlOption } from '../../models/segmented-control';
+export interface DialSegmentedControlProps<T extends string> {
+    options: SegmentedControlOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    disabled?: boolean;
+    className?: string;
+    ariaLabel?: string;
+}
+/**
+ * A single-select control for switching between a small set of mutually exclusive,
+ * equally-sized options (e.g. view switchers).
+ * aliases: SegmentedButton|ViewSwitcher
+ *
+ * Renders a horizontal group of segments where every option is always visible and
+ * equally sized. Supports 2 or more segments, optional per-option icons, and
+ * keyboard navigation (Arrow keys, Home, End).
+ *
+ * @example
+ * ```tsx
+ * <DialSegmentedControl
+ *   ariaLabel="View"
+ *   value={view}
+ *   onChange={setView}
+ *   options={[
+ *     { value: 'list', label: 'List' },
+ *     { value: 'grid', label: 'Grid' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @param options - Segments to render. Each option needs a unique `value` and may include a `label`, `icon`, and `disabled` flag.
+ * @param value - The currently selected option `value`.
+ * @param onChange - Callback fired with the selected option `value`.
+ * @param [disabled] - Disables the entire control when set.
+ * @param [className] - Additional classes applied to the container.
+ * @param [ariaLabel] - Accessible label for the control (applied to the `tablist`).
+ */
+export declare const DialSegmentedControl: <T extends string>({ options, value, onChange, disabled, className, ariaLabel, }: DialSegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const containerBaseClassName = "inline-flex items-center rounded bg-layer-3";
+export declare const segmentBaseClassName = "flex flex-1 items-center justify-center gap-2 h-7 px-3 py-1 border border-primary dial-small-text whitespace-nowrap focus-visible:outline outline-offset-0 focus-visible:relative focus-visible:z-10";
+export declare const segmentSelectedClassName = "relative z-10 bg-controls-accent-primary-alpha-active text-primary";
+export declare const segmentUnselectedClassName = "text-secondary hover:text-primary";
+export declare const segmentDisabledClassName = "text-controls-disable-accent cursor-not-allowed hover:text-controls-disable-accent";

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

@@ -1,6 +1,7 @@
 import { FC, ReactNode, MouseEvent, Ref } from 'react';
 import { SelectOption } from '../../models/select';
 import { SelectSize, SelectVariant } from '../../types/select';
+import { ElementSize } from '../../types/size';
 export interface DialSelectProps {
     options: SelectOption[];
     multiple?: boolean;
@@ -13,6 +14,7 @@ export interface DialSelectProps {
     defaultValue?: string | string[];
     placeholder?: string;
     searchable?: boolean;
+    searchSize?: ElementSize;
     searchPlaceholder?: string;
     selectAll?: boolean;
     selectAllLabel?: string;
@@ -71,6 +73,7 @@ export interface DialSelectProps {
  * @param [defaultValue] - Uncontrolled initial selected value(s).
  * @param [placeholder="Select..."] - Placeholder text when no selection is made.
  * @param [searchable=false] - Show a search field in the overlay header.
+ * @param [searchSize=ElementSize.Standard] - Size of the overlay search input when `searchable` is enabled.
  * @param [searchPlaceholder] - Placeholder for the search input (overlay/inline).
  * @param [selectAll=false] - Show a "Select All" checkbox in multiple mode.
  * @param [selectAllLabel="Select all"] - Label for the "Select All" checkbox.

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

@@ -1,10 +1,12 @@
 import { FC, HTMLAttributes } from 'react';
+import { DialLabelProps } from '../Label/Label';
 export interface DialSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     value: number;
     min?: number;
     max?: number;
     step?: number;
     disabled?: boolean;
+    labelProps?: DialLabelProps;
     /** 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 */
@@ -41,6 +43,7 @@ export interface DialSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
  * @param [max=1] - Maximum value
  * @param [step=0.1] - Step increment
  * @param [disabled=false] - Disables interaction
+ * @param [labelProps] - Props forwarded to DialLabel rendered above the slider
  * @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

package/dist/src/index.d.ts

@@ -5,7 +5,7 @@ export { AnalyticsCardVariant } from './types/analytics';
 export { DialAnalyticsBar } from './components/Analytics';
 export type { DialAnalyticsBarProps } from './components/Analytics';
 export { DEFAULT_ANALYTICS_BAR_COLOR_MAP } from './components/Analytics';
-export type { AnalyticsBarColorStop } from './models/analytics';
+export type { AnalyticsBarColorStop, AnalyticsCardCompareItem, } from './models/analytics';
 export { DialAnalyticsErrorTag } from './components/Analytics';
 export type { DialAnalyticsErrorTagProps } from './components/Analytics';
 export { DialAnalyticsBarGroup } from './components/Analytics';
@@ -62,6 +62,8 @@ export type { DialFabButtonProps } from './components/FabButton/FabButton';
 export { DialTextarea } from './components/Textarea/Textarea';
 export { DialTooltip } from './components/Tooltip/Tooltip';
 export { DialSwitch } from './components/Switch/Switch';
+export { DialSegmentedControl } from './components/SegmentedControl/SegmentedControl';
+export type { DialSegmentedControlProps } from './components/SegmentedControl/SegmentedControl';
 export { DialPopup } from './components/Popup/Popup';
 export { DialConfirmationPopup } from './components/ConfirmationPopup/ConfirmationPopup';
 export { DialRadioGroupPopupField } from './components/RadioGroupPopupField/RadioGroupPopupField';
@@ -87,6 +89,7 @@ export { DialFileManager } from './components/FileManager/FileManager';
 export type { FileManagerGridRow } from './components/FileManager/FileManagerContext';
 export type { GridOptions, ToolbarOptions, BulkActionsToolbarOptions, } from './components/FileManager/FileManager';
 export { DialDestinationFolderPopup } from './components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup';
+export { DialFoldersTree } from './components/FileManager/components/FoldersTree/FoldersTree.tsx';
 export { NotificationVariant } from './types/notification.ts';
 export { ButtonVariant, ButtonAppearance } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';
@@ -111,6 +114,7 @@ export { StepStatus } from './models/step';
 export type { Step } from './models/step';
 export type { RadioButtonWithContent } from './models/radio';
 export type { SelectOption } from './models/select';
+export type { SegmentedControlOption } from './models/segmented-control';
 export type { TabModel } from './models/tab';
 export type { DropdownItem } from './models/dropdown';
 export type { DialModifiedEntity } from './models/base-entity';

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export interface AnalyticsBarColorStop {
     /** Lower bound of the band (exclusive), as a ratio of value to maxValue (0–1). */
     from: number;
@@ -6,3 +7,9 @@ export interface AnalyticsBarColorStop {
     /** CSS color applied to the fill when the ratio falls within this band. */
     color: string;
 }
+export interface AnalyticsCardCompareItem {
+    /** Sub-title shown above the value in compare mode. */
+    title: ReactNode;
+    /** The metric value to display. */
+    value: ReactNode;
+}

package/dist/src/models/segmented-control.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}

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

@@ -2,6 +2,12 @@ import { ReactNode } from 'react';
 export interface SelectOption {
     value: string;
     label: string;
+    /**
+     * Custom node rendered in place of `label` in the option list, trigger and
+     * submenu. `label` is still used for filtering/search matching and as the
+     * accessible name, so keep it as a plain-text representation of `labelNode`.
+     */
+    labelNode?: ReactNode;
     description?: string;
     disabled?: boolean;
     icon?: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.12.0-dev.9",
+  "version": "0.12.0",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",

package/dist/JsonEditor-bH9iEgeS.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./index-D1Mdz55f.cjs"),o=require("./editor-Ba3vCFHk.cjs"),u=require("@monaco-editor/react"),c={[o.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[o.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}},g=({value:t,onChange:n,onValidateJSON:i,options:s,currentTheme:e,themesConfig:d=c})=>{function a(r){r?.editor?.defineTheme(e,d[e]),r.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}return l.jsxRuntimeExports.jsx(u.Editor,{beforeMount:a,height:"100%",defaultLanguage:"json",value:t,onChange:n,theme:e,onValidate:i,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...s??{}}})};exports.DialJsonEditor=g;

package/dist/MarkdownEditor-DMYUcSTi.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D1Mdz55f.cjs"),c=require("@uiw/react-md-editor"),x=require("./editor-Ba3vCFHk.cjs"),m=({value:t,onChange:r,height:s=300,preview:i="edit",theme:n=x.EditorThemes.dark,className:d,placeholder:o})=>{const a=o!==void 0&&!t;return e.jsxRuntimeExports.jsxs("div",{"data-color-mode":n,className:e.mergeClasses("relative",d),children:[e.jsxRuntimeExports.jsx(c,{value:t,onChange:l=>r?.(l||""),height:s,preview:i}),a&&e.jsxRuntimeExports.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:o})]})};exports.DialMarkdownEditor=m;

package/dist/MarkdownEditor-DlQ9Xilh.js

@@ -1,36 +0,0 @@
-import { j as o, m as l } from "./index-D1DPfPQX.js";
-import c from "@uiw/react-md-editor";
-import { E as x } from "./editor-Cu1dRT39.js";
-const E = ({
-  value: e,
-  onChange: s,
-  height: r = 300,
-  preview: a = "edit",
-  theme: i = x.dark,
-  className: d,
-  placeholder: t
-}) => {
-  const m = t !== void 0 && !e;
-  return /* @__PURE__ */ o.jsxs(
-    "div",
-    {
-      "data-color-mode": i,
-      className: l("relative", d),
-      children: [
-        /* @__PURE__ */ o.jsx(
-          c,
-          {
-            value: e,
-            onChange: (n) => s?.(n || ""),
-            height: r,
-            preview: a
-          }
-        ),
-        m && /* @__PURE__ */ o.jsx("div", { className: "pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40", children: t })
-      ]
-    }
-  );
-};
-export {
-  E as DialMarkdownEditor
-};

package/dist/editor-Ba3vCFHk.cjs

@@ -1 +0,0 @@
-"use strict";var t=(r=>(r.dark="dark",r.light="light",r))(t||{});exports.EditorThemes=t;

package/dist/editor-Cu1dRT39.js

@@ -1,4 +0,0 @@
-var a = /* @__PURE__ */ ((r) => (r.dark = "dark", r.light = "light", r))(a || {});
-export {
-  a as E
-};