@epam/ai-dial-ui-kit 0.6.0-rc.0 → 0.6.0-rc.10

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

@@ -1,10 +1,9 @@
 import { FC } from 'react';
 import { DialAutocompleteInputValueProps } from './AutocompleteInputValue';
 export interface DialAutocompleteInputProps extends DialAutocompleteInputValueProps {
-    placeholder?: string;
-    updateSelected: (items: string[]) => void;
     containerClassName?: string;
     inputClassName?: string;
+    onChange: (items: string[]) => void;
 }
 /**
  * A component that provides an interactive input field with autocomplete functionality. Users can
@@ -17,7 +16,7 @@ export interface DialAutocompleteInputProps extends DialAutocompleteInputValuePr
  * <DialAutocompleteInput
  *   placeholder="Type to add items"
  *   selectedItems={['Item 1', 'Item 2']}
- *   updateSelected={(items) => console.log(items)}
+ *   onChange={(items) => console.log(items)}
  *   containerClassName="custom-container-class"
  *   inputClassName="custom-input-class"
  *   listClassName="custom-list-class"
@@ -27,7 +26,7 @@ export interface DialAutocompleteInputProps extends DialAutocompleteInputValuePr
  *
  * @param [placeholder] - The placeholder text displayed in the input field when no items are selected.
  * @param [selectedItems=[]] - An array of strings representing the currently selected items.
- * @param updateSelected - A callback function that updates the list of selected items. Called when items are added or removed.
+ * @param onChange - A callback function that updates the list of selected items. Called when items are added or removed.
  * @param [listClassName] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
  * @param [listElementClassName] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
  * @param [containerClassName] - Additional CSS classes applied to the container `<div>` element wrapping the input and list.

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

@@ -6,7 +6,7 @@ export interface DialBreadcrumbProps {
     ariaLabel?: string;
     className?: string;
     children?: ReactNode;
-    titleClassName?: string;
+    labelClassName?: string;
 }
 /**
  * Breadcrumb navigation component with horizontal scroll on overflow.
@@ -18,16 +18,16 @@ export interface DialBreadcrumbProps {
  * ```tsx
  * <DialBreadcrumb
  *   pathItems={[
- *     { title: 'Home', href: '/' },
- *     { title: 'Section', href: '/section' },
- *     { title: 'Current Page' },
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Section', href: '/section' },
+ *     { label: 'Current Page' },
  *   ]}
  * />
  *
  * <DialBreadcrumb>
- *   <DialBreadcrumbItem title="Home" href="/" />
- *   <DialBreadcrumbItem title="Section" href="/section" />
- *   <DialBreadcrumbItem title="Current Page" />
+ *   <DialBreadcrumbItem label="Home" href="/" />
+ *   <DialBreadcrumbItem label="Section" href="/section" />
+ *   <DialBreadcrumbItem label="Current Page" />
  * </DialBreadcrumb>
  * ```
  *
@@ -36,6 +36,6 @@ export interface DialBreadcrumbProps {
  * @param [ariaLabel] - Aria label for the `<nav>` element (default: "Breadcrumb").
  * @param [className] - Additional CSS classes for the `<nav>` container.
  * @param [children] - Alternatively, compose with `<DialBreadcrumbItem/>` as children.
- * @param [titleClassName] - Additional CSS classes applied to each item when using `pathItems` prop.
+ * @param [labelClassName] - Additional CSS classes applied to each item when using `pathItems` prop.
  */
 export declare const DialBreadcrumb: FC<DialBreadcrumbProps>;

package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,12 +1,11 @@
-import { FC, MouseEventHandler, ReactNode } from 'react';
-export interface DialBreadcrumbItemProps {
-    title: ReactNode;
+import { FC, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+export interface DialBreadcrumbItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'onClick'> {
+    label: ReactNode;
     href?: string;
     onClick?: MouseEventHandler<HTMLAnchorElement>;
     disabled?: boolean;
     iconBefore?: ReactNode;
-    className?: string;
-    titleClassName?: string;
+    labelClassName?: string;
     isLast?: boolean;
     separator?: ReactNode;
 }

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

@@ -21,9 +21,18 @@ export interface DialButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<
  * />
  * ```
  *
+ * @example
+ * ```tsx
+ * <DialButton
+ *   label={<span>Custom <strong>Label</strong></span>}
+ *   aria-label="Custom Label"
+ *   onClick={handleClick}
+ * />
+ * ```
+ *
  * inherits all properties from the `ButtonHTMLAttributes<HTMLButtonElement>`
  *
- * @param [label] - The text content of the button
+ * @param [label] - The content of the button. Can be any React node.
  * @param [variant=ButtonVariant.Primary] - Defines the visual style of the button
  * @param [textClassName] - Additional CSS classes to apply specifically to the button text
  * @param [iconAfter] - Icon or element to display after the button text

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

@@ -24,7 +24,7 @@ export interface DialConfirmationPopupProps extends DialPopupProps {
  * ```tsx
  * <ConfirmationModal
  *   open
- *   title="Delete item?"
+ *   header="Delete item?"
  *   description="This action cannot be undone."
  *   confirmLabel="Delete"
  *   onClose={() => setOpen(false)}
@@ -32,7 +32,7 @@ export interface DialConfirmationPopupProps extends DialPopupProps {
  * />
  * ```
  *
- * @param title - Title content for the header
+ * @param header - Title content for the header
  * @param [description] - Secondary text (ignored when `children` set)
  * @param [descriptionClassName] - Custom CSS class for the description
  * @param [open=false] - Controls visibility of the popup

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-export interface Props {
+import { FC, HTMLAttributes } from 'react';
+export interface Props extends HTMLAttributes<HTMLSpanElement> {
     errorText?: string;
 }
 /**

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

@@ -16,7 +16,7 @@ import { ConflictResolutionPopupProps } from './components/ConflictResolutionPop
 import { RenameValidationMessages } from './hooks/use-item-renaming';
 type GridRow = FileManagerGridRow;
 export type DialFileManagerConflictResolutionPopupOptions = Omit<ConflictResolutionPopupProps, 'open' | 'onClose' | 'onReplace' | 'onDuplicate' | 'conflictingFiles'>;
-export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolderPopupProps, 'setDestinationFolderPath' | 'destinationFolderPath' | 'addFolderLabel' | 'copyLabel' | 'moveLabel' | 'hiddenFilesSwitcherLabel' | 'title' | 'onCreateFolder' | 'onCreateFolderValidate' | 'folderCreationValidationMessages'> & {
+export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolderPopupProps, 'setDestinationFolderPath' | 'destinationFolderPath' | 'addFolderLabel' | 'copyLabel' | 'moveLabel' | 'hiddenFilesSwitcherLabel' | 'header' | 'onCreateFolder' | 'onCreateFolderValidate' | 'folderCreationValidationMessages' | 'disabledPathTooltip'> & {
     getCopyHeader?: (itemsCount: number, itemName?: string) => string;
     getMoveHeader?: (itemsCount: number, itemName?: string) => string;
 };
@@ -24,7 +24,7 @@ export interface FileMetadataPopupOptions {
     fileMetadata?: DialFile;
     loading?: boolean;
     clearMetadata?: () => void;
-    title?: ReactNode;
+    header?: ReactNode;
     nameLabel?: string;
     pathLabel?: string;
     modifiedDateLabel?: string;
@@ -33,7 +33,7 @@ export interface FileMetadataPopupOptions {
 }
 export interface FileTreeOptions extends Omit<DialFoldersTreeProps, 'items' | 'selectedPath' | 'onItemClick'> {
     width?: number;
-    title?: ReactNode;
+    header?: ReactNode;
     containerClassName?: string;
     additionalButtons?: ReactNode;
     collapsed?: boolean;
@@ -98,12 +98,16 @@ export interface CreateFolderValidationMessages {
 }
 export interface DialFileManagerProps {
     path?: string;
+    defaultPath?: string;
     className?: string;
     allowedFileTypes?: DialFileAcceptType[];
     items?: DialFile[];
     rootItem?: DialRootFolder;
     filesLoading?: boolean;
     sharedByMePaths?: Set<string>;
+    selectedPaths?: Set<string>;
+    defaultSelectedPaths?: Set<string>;
+    onSelectedPathsChange?: (paths: Set<string>) => void;
     showHiddenFiles?: boolean;
     onShowHiddenFilesChange?: (value: boolean) => void;
     treeOptions?: FileTreeOptions;
@@ -186,10 +190,13 @@ export interface DialFileManagerProps {
  * ```
  *
  * @param [path] - Absolute path of the current location (e.g. "/All files/Design/Icons")
+ * @param [defaultPath] - Initial path used in uncontrolled mode (applied only on first render)
  * @param [className] - Additional classes for the root container
  * @param [items] - Full hierarchical list of files and folders used by both tree and grid
  * @param [rootItem] - Optional root folder item to represent the top-level container in the tree
  * @param [filesLoading=false] - When true, shows skeleton loading state in the grid
+ * @param [selectedPaths] - Controlled set of selected item paths
+ * @param [defaultSelectedPaths] - Initial selected paths used in uncontrolled mode
  *
  * @param [treeOptions] - Options that configure the collapsible sidebar and folders tree
  * @param [navigationPanelOptions] - Options for the breadcrumb and search panel (value/onSearchChange for controlled search)
@@ -201,6 +208,7 @@ export interface DialFileManagerProps {
  * @param [compactViewWidthBreakpoint=DEFAULT_COMPACT_VIEW_WIDTH_BREAKPOINT] - Width (px) below which the component switches to compact view.
  *
  * @param [onPathChange] - Callback fired when user navigates via tree or breadcrumb
+ * @param [onSelectedPathsChange] - Callback fired when the selected paths change
  * @param [onTableFileClick] - Callback fired when a file row is clicked in the grid
  *
  * @param [onCopyFiles] - Callback fired when files copy-paste

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

@@ -31,7 +31,9 @@ export interface FileManagerContextValue {
     toolbarOptions?: ToolbarOptions;
     bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
     deleteConfirmationOptions?: DeleteConfirmationOptions;
-    destinationFolderPopupOptions?: DialFileManagerDestinationFolderPopupOptions;
+    destinationFolderPopupOptions?: DialFileManagerDestinationFolderPopupOptions & {
+        sourceFolder?: string;
+    };
     conflictResolutionPopupOptions?: DialFileManagerConflictResolutionPopupOptions;
     fileMetadataPopupOptions?: FileMetadataPopupOptions;
     compactViewWidthBreakpoint?: number;
@@ -45,9 +47,9 @@ export interface FileManagerContextValue {
     isTreeCollapsed: boolean;
     toggleTreeCollapse: () => void;
     setIsTreeCollapsed: (value: boolean) => void;
-    selectedIds: Set<string>;
+    selectedPaths: Set<string>;
     selectedFiles: Map<string, DialFile>;
-    setSelectedFiles: (next: Map<string, DialFile>) => void;
+    setSelectedPaths: (paths: Set<string>) => void;
     clearSelection: () => void;
     currentFolder?: DialFile;
     gridRows: FileManagerGridRow[];

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

@@ -12,7 +12,6 @@ export interface ConflictResolutionPopupProps {
     onDuplicate: () => void;
     onDecideForEach?: (decisions: FileConflictDecision[]) => void;
     conflictingFiles: DialFile[];
-    title?: string;
     singleFileTitle?: string;
     multipleFilesTitle?: string;
     message?: string;
@@ -78,7 +77,6 @@ export interface ConflictResolutionPopupProps {
  * @param onDuplicate - Callback fired when Duplicate/Duplicate All is confirmed
  * @param [onDecideForEach] - Callback fired when individual decisions are confirmed; receives array of decisions
  * @param conflictingFiles - Array of files with name conflicts
- * @param [title] - Custom title (overrides singleFileTitle and multipleFilesTitle)
  * @param [singleFileTitle="Replace Or Duplicate Item"] - Title for single file conflicts
  * @param [multipleFilesTitle="Replace Or Duplicate Items"] - Title for multiple file conflicts
  * @param [message] - Custom message (overrides default conflict description)

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

@@ -11,7 +11,9 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
     addFolderLabel?: string;
     hiddenFilesSwitcherLabel?: string;
     mode?: 'copy' | 'move';
-    title?: ReactNode;
+    header?: ReactNode;
+    sourceFolder?: string;
+    disabledPathTooltip?: string;
 }
 /**
  * DestinationFolderPopup
@@ -48,5 +50,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
  * @param rootItem - Root folder item
  * @param path - Current path in the File Manager
  * @param onPathChange - Callback fired when the path changes
+ * @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
  */
 export declare const DestinationFolderPopup: FC<DestinationFolderPopupProps>;

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

@@ -44,7 +44,7 @@ export interface DialFileManagerNavigationPanelProps extends Omit<DialBreadcrumb
  * ```
  *
  * @param [ariaLabel="Breadcrumb"] - Aria label for the breadcrumb `<nav>`
- * @param [titleClassName] - Extra classes for breadcrumb titles
+ * @param [labelClassName] - Extra classes for breadcrumb titles
  * @param [path] - A full path string that will be split into breadcrumb items
  * @param [makeHref] - Factory to create hrefs for segments
  * @param [onItemClick] - Callback fired when a breadcrumb item is clicked

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

@@ -5,7 +5,7 @@ export interface FileMetadataPopupProps {
     onClose: () => void;
     fileMetadata?: DialFile;
     loading?: boolean;
-    title?: ReactNode;
+    header?: ReactNode;
     nameLabel?: string;
     pathLabel?: string;
     modifiedDateLabel?: string;

package/dist/src/components/FileManager/hooks/use-current-path.d.ts

@@ -1,10 +1,13 @@
 export interface UseCurrentPathOptions {
     path?: string;
+    defaultPath?: string;
     onPathChange?: (nextPath?: string) => void;
     onSelectionClear?: () => void;
 }
-export declare const useCurrentPath: ({ path, onPathChange, onSelectionClear, }: UseCurrentPathOptions) => {
-    currentPath: string | undefined;
-    setCurrentPath: import('react').Dispatch<import('react').SetStateAction<string | undefined>>;
+interface UseCurrentPathResult {
+    currentPath?: string;
+    setCurrentPath: (nextPath?: string) => void;
     handlePathChange: (nextPath?: string) => void;
-};
+}
+export declare const useCurrentPath: ({ path, defaultPath, onPathChange, onSelectionClear, }: UseCurrentPathOptions) => UseCurrentPathResult;
+export {};

package/dist/src/components/FileManager/hooks/use-paths-selection.d.ts

@@ -0,0 +1,13 @@
+interface UsePathsSelectionParams {
+    selectedPaths?: Set<string>;
+    defaultSelectedPaths?: Set<string>;
+    onSelectedPathsChange?: (paths: Set<string>) => void;
+}
+interface UsePathsSelectionResult {
+    selectedPaths: Set<string>;
+    setSelectedPaths: (paths: Set<string>) => void;
+    clearSelection: () => void;
+    isControlled: boolean;
+}
+export declare function usePathsSelection({ selectedPaths, defaultSelectedPaths, onSelectedPathsChange, }: UsePathsSelectionParams): UsePathsSelectionResult;
+export {};

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

@@ -20,13 +20,13 @@ export interface DialFormPopupProps extends DialPopupProps {
  * ```tsx
  * <DialFormPopup
  *   open
- *   title="Create Model"
+ *   header="Create Model"
  *   onClose={() => setOpen(false)}
  *   onSubmit={handleSubmit}
  * />
  * ```
  *
- * @param title - Title content for the header
+ * @param header - Title content for the header
  * @param [open=false] - Controls visibility of the popup
  * @param [submitLabel="Submit"] - Label for the primary action button
  * @param [cancelLabel="Cancel"] - Label for the cancel button

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

@@ -18,8 +18,5 @@ export declare const GRID_THEME_COLORS: {
     fontFamily: {
         googleFont: string;
     };
-    cellStyle: {
-        textAlign: string;
-    };
 };
 export declare const ROW_HEIGHT = 40;

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

@@ -18,7 +18,7 @@ export interface DialLabelledTextProps {
  * />
  * ```
  *
- * @param label - The main label text for the field
+ * @param [label] - The main label text for the field
  * @param [text] - Optional tooltip and secondary text
  * @param [tooltip] - Optional tooltip different from main text
  * @param [children] - Custom content to render instead of the default text/tooltip

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

@@ -2,7 +2,7 @@ import { FC, MouseEvent, ReactNode } from 'react';
 import { PopupSize } from '../../types/popup';
 export interface DialPopupProps {
     open?: boolean;
-    title?: ReactNode;
+    header?: ReactNode;
     portalId?: string;
     className?: string;
     overlayClassName?: string;
@@ -40,7 +40,7 @@ export interface DialPopupProps {
  * ```
  *
  * @param [open=false] - Controls visibility of the popup
- * @param [title] - Optional title rendered in the header
+ * @param [header] - Optional title rendered in the header
  * @param [portalId] - Optional portal container id
  * @param [className] - Additional CSS classes applied to the popup container
  * @param [overlayClassName] - Additional CSS classes applied to the overlay

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 export interface DialRadioButtonProps {
     name: string;
     value: string;
-    title?: ReactNode;
+    label?: ReactNode;
     description?: ReactNode;
     checked?: boolean;
     inputId: string;
@@ -33,7 +33,7 @@ export interface DialRadioButtonProps {
  *
  * @param name - Radio group name
  * @param value - Radio value emitted on change
- * @param [title] - Visible label text
+ * @param [label] - Visible label text
  * @param [description] - Supporting text shown when checked
  * @param [checked=false] - Controlled checked state
  * @param inputId - ID associated with the label

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

@@ -5,7 +5,7 @@ import { DialRadioGroupProps } from '../RadioGroup/RadioGroup';
 import { DialPopupProps } from '../Popup/Popup';
 export interface RadioGroupPopupFieldProps extends Pick<DialFieldLabelProps, 'fieldTitle' | 'htmlFor'>, Omit<DialInputPopupProps, 'onOpen' | 'children'>, Pick<DialRadioGroupProps, 'radioButtons'>, Pick<DialPopupProps, 'onClose' | 'portalId' | 'size'> {
     customInputValue?: string;
-    title: string;
+    header: string;
     cancelButtonTitle?: string;
     applyButtonTitle?: string;
     isValid: boolean;
@@ -29,7 +29,7 @@ export interface RadioGroupPopupFieldProps extends Pick<DialFieldLabelProps, 'fi
  * <DialRadioGroupPopupField
  *   fieldTitle="Status"
  *   htmlFor="status"
- *   title="Select status"
+ *   header="Select status"
  *   emptyValueText="None"
  *   radioButtons={[
  *     { id: 'draft', name: 'Draft' },
@@ -55,7 +55,7 @@ export interface RadioGroupPopupFieldProps extends Pick<DialFieldLabelProps, 'fi
  * @param [inputClassName] - Extra classes applied to the collapsed input container
  * @param emptyValueText - Placeholder text when no value is selected
  * @param [onClose] - Callback fired when the popup closes
- * @param title - Title text shown in the popup header
+ * @param header - Title text shown in the popup header
  * @param [portalId] - Target portal id for rendering the popup
  * @param onApply - Callback fired when the Apply button is clicked
  * @param [cancelButtonTitle="Cancel"] - Text for the Cancel button

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

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
 export interface DialSwitchProps {
-    title?: ReactNode;
+    label?: ReactNode;
     switchId: string;
     isOn?: boolean;
     disabled?: boolean;
@@ -13,7 +13,7 @@ export interface DialSwitchProps {
  * ```tsx
  * <DialSwitch
  *   switchId="switch"
- *   title="Toggle"
+ *   label="Toggle"
  *   isOn={true}
  *   disabled={false}
  *   onChange={(value) => console.log(value)}

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

@@ -1,6 +1,6 @@
 import { ReactNode, MouseEvent } from 'react';
 export interface DialBreadcrumbPathItem {
-    title: ReactNode;
+    label: ReactNode;
     href?: string;
     onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
     disabled?: boolean;

package/dist/src/types/form-item.d.ts

@@ -12,7 +12,7 @@ export declare enum FormItemOrientation {
 /**
  * Base properties for form item components providing layout, labeling, and validation display
  *
- * @param label - The label text or element to display for the form item
+ * @param [label] - The label text or element to display for the form item
  * @param optional - Whether the field is optional (displays optional indicator)
  * @param optionalText - Custom text to display for optional fields (default: "(Optional)")
  * @param description - Description text to display below the label

package/package.json

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