@epam/ai-dial-ui-kit 0.6.0-rc.6 → 0.6.0-rc.60

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

@@ -14,6 +14,7 @@ export interface FileUploadValidationMessages {
     validationError?: string;
 }
 export interface UseFileUploadOptions {
+    uploadEnabled?: boolean;
     onUploadFiles?: (files: DialUploadFileItem[], destinationFolder: string) => void;
     onValidateUpload?: (files: DialUploadFileItem[], existingFiles: DialFile[], destinationFolder: string) => FileUploadValidationResult | Promise<FileUploadValidationResult>;
     maxFileSize?: number;
@@ -21,7 +22,7 @@ export interface UseFileUploadOptions {
     validationMessages?: FileUploadValidationMessages;
     onUploadArchive?: (file: File, name: string, destinationFolder: string) => void;
 }
-export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileSize, allowedFileTypes, validationMessages, onUploadArchive, }?: UseFileUploadOptions) => {
+export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileSize, allowedFileTypes, validationMessages, onUploadArchive, uploadEnabled, }?: UseFileUploadOptions) => {
     isDragging: boolean;
     isDraggingOverWindow: boolean;
     uploadError: string | undefined;

package/dist/src/components/FileManager/hooks/use-grid-actions-column.d.ts

@@ -4,10 +4,11 @@ import { DropdownItem } from '../../../models/dropdown';
 import { DialFileAcceptType } from '../../../models/file-manager';
 interface UseGridActionsColumnProps {
     getContextMenuItems: (row: FileManagerGridRow) => DropdownItem[];
-    isRowDisabled: (row: FileManagerGridRow, allowedFileTypes?: DialFileAcceptType[]) => boolean;
+    isRowDisabled: (row: FileManagerGridRow, allowedFileTypes?: DialFileAcceptType[], maxSelectableFileSize?: number) => boolean;
     allowedFileTypes?: DialFileAcceptType[];
+    maxSelectableFileSize?: number;
 }
-export declare const useGridActionsColumn: ({ getContextMenuItems, isRowDisabled, allowedFileTypes, }: UseGridActionsColumnProps) => {
+export declare const useGridActionsColumn: ({ getContextMenuItems, isRowDisabled, allowedFileTypes, maxSelectableFileSize, }: UseGridActionsColumnProps) => {
     actionsColumnDef: ColDef<FileManagerGridRow, any>;
 };
 export {};

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

@@ -5,6 +5,7 @@ export interface DialFileNameProps {
     shared?: boolean;
     iconSize?: number;
     details?: ReactNode;
+    sharedIndicatorClassName?: string;
 }
 /**
  * Component to display a file name with a file icon and shared indicator.
@@ -30,5 +31,6 @@ export interface DialFileNameProps {
  * @param shared - Whether the file is shared.
  * @param iconSize - Icon size in px. Default: BASE_ICON_SIZE.
  * @param details - Optional metadata block displayed under the file name (e.g., size, modified date).
+ * @param sharedIndicatorClassName - Additional CSS classes for the shared indicator.
  */
 export declare const DialFileName: FC<DialFileNameProps>;

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

@@ -1,10 +1,11 @@
 import { FC } from 'react';
 export interface DialFolderNameProps {
     name: string;
-    className?: string;
     shared?: boolean;
     loading?: boolean;
     iconSize?: number;
+    className?: string;
+    sharedIndicatorClassName?: string;
 }
 /**
  * Component to display a folder name with a folder icon and shared indicator.
@@ -20,5 +21,6 @@ export interface DialFolderNameProps {
  * @param shared - If true, shows shared indicator. Default: false.
  * @param loading - If true, shows loading state. Default: false.
  * @param iconSize - Icon size in px. Default: BASE_ICON_SIZE.
+ * @param sharedIndicatorClassName - Additional CSS classes for the shared indicator
  */
 export declare const DialFolderName: FC<DialFolderNameProps>;

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

@@ -3,8 +3,10 @@ export declare const GRID_THEME_COLORS: {
     accentColor: string;
     backgroundColor: string;
     oddRowBackgroundColor: string;
+    selectedRowBackgroundColor: string;
     borderColor: string;
     rowBorder: string;
+    rowHoverColor: string;
     borderRadius: number;
     browserColorScheme: string;
     chromeBackgroundColor: string;

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

@@ -45,7 +45,7 @@ export interface DialInputPopupProps {
  * @param [inputClassName] - Additional CSS classes applied to the input container.
  * @param [elementId] - A unique identifier for the input element, useful for accessibility and testing.
  * @param [errorText] - An optional error message displayed below the input when an error state is present.
- * @param [invalid] - Whether the input is in an invalid state, affecting styling. Applyed automatically if errorText is provided.
+ * @param [invalid] - Whether the input is in an invalid state, affecting styling. Applied automatically if errorText is provided.
  * @param [emptyValueText] - The text displayed when no value is selected and placeholder is not provided.
  */
 export declare const DialInputPopup: FC<DialInputPopupProps>;

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

@@ -5,6 +5,7 @@ export interface DialLabelledTextProps {
     tooltip?: string;
     children?: ReactNode;
     postfix?: ReactNode;
+    className?: string;
 }
 /**
  * A label component for form fields with optional tooltip, content, and custom elements.
@@ -23,5 +24,6 @@ export interface DialLabelledTextProps {
  * @param [tooltip] - Optional tooltip different from main text
  * @param [children] - Custom content to render instead of the default text/tooltip
  * @param [postfix] - Element to display after the text (e.g., an asterisk)
+ * @param [className] - Additional CSS classes for the container element.
  */
 export declare const DialLabelledText: FC<DialLabelledTextProps>;

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

@@ -13,6 +13,7 @@ export interface DialPopupProps {
     footer?: ReactNode;
     onClose?: (e?: MouseEvent<HTMLButtonElement> | null) => void;
     size?: PopupSize;
+    hideClose?: boolean;
     closeOnOutsideClick?: boolean;
 }
 /**
@@ -51,6 +52,7 @@ export interface DialPopupProps {
  * @param [footer] - Footer area for actions
  * @param [onClose] - Callback fired when the popup requests to close
  * @param [size=PopupSize.Md] - Sets the max-width of the popup
- * @param [closeOnOutsideClick=true] - Whether the popup closes when clicking outside
+ * @param [hideClose=false] Whether the close button is hidden in the header (default: false)
+ * @param [closeOnOutsideClick=true] - Whether the popup closes when clicking outside (default: true)
  */
 export declare const DialPopup: FC<DialPopupProps>;

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

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { DialFieldLabelProps } from '../Field/Field';
 import { DialInputPopupProps } from '../InputPopup/InputPopup';
-import { DialRadioGroupProps } from '../RadioGroup/RadioGroup';
 import { DialPopupProps } from '../Popup/Popup';
+import { DialRadioGroupProps } from '../RadioGroup/RadioGroup';
 export interface RadioGroupPopupFieldProps extends Pick<DialFieldLabelProps, 'fieldTitle' | 'htmlFor'>, Omit<DialInputPopupProps, 'onOpen' | 'children'>, Pick<DialRadioGroupProps, 'radioButtons'>, Pick<DialPopupProps, 'onClose' | 'portalId' | 'size'> {
     customInputValue?: string;
     header: string;

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

@@ -6,8 +6,8 @@ export interface DialRemoveButtonProps extends Omit<DialButtonProps, 'iconBefore
 /**
  * A specialized button component for removal or delete actions.
  *
- * Renders a `DialButton` with a predefined trash icon (`IconTrashX`) as the leading icon.
- * Additional props are passed directly to the underlying `DialButton`.
+ * Renders a `DialErrorButton` with a predefined trash icon (`IconTrashX`) as the leading icon.
+ * Additional props are passed directly to the underlying `DialErrorButton`.
  * @example
  * <DialRemoveButton
  *   label="Delete item"

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

@@ -21,9 +21,14 @@ export interface DialSelectProps {
     emptyStateIcon?: ReactNode;
     disabled?: boolean;
     className?: string;
+    listClassName?: string;
     closable?: boolean;
+    invalid?: boolean;
     header?: ReactNode | (() => ReactNode);
     footer?: ReactNode | (() => ReactNode);
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onInlineQueryChange?: (query: string) => void;
     dismissRef?: Ref<unknown>;
     onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
     onChange?: (next: string | string[]) => void;
@@ -70,14 +75,19 @@ export interface DialSelectProps {
  * @param [emptyStateTitle="No options available"] - Title text when there are no options.
  * @param [emptyStateDescription] - Description text when there are no options.
  * @param [emptyStateIcon] - Icon to display when there are no options.
+ * @param [invalid] - Whether the select is in an invalid state, affecting styling.
  * @param [disabled=false] - Disable the control.
  * @param [className] - Additional CSS classes for the trigger.
+ * @param [listClassName] - Additional CSS classes for the list dropdown.
  * @param [closable=false] - Show a close button in the dropdown header.
  * @param [header] - Custom node/function rendered above the options.
  * @param [footer] - Custom node/function rendered below the options.
+ * @param [open] - Controlled open state of the dropdown. When provided, makes the dropdown controlled.
+ * @param [onOpenChange] - Called when the dropdown open state changes.
  * @param [onClose] - Called when the dropdown close button is clicked.
  * @param [onChange] - Called when the selection changes.
  * @param [inlineSearch=false] - Render a plain input inside trigger (single mode only).
+ * @param [onInlineQueryChange] - Called when the inline search query changes
  * @param [onFooterClick] - Called when the footer element is clicked. When provided, automatically closes the dropdown.
  * @param [dismissRef] - Ref object to expose a `dismiss` method to programmatically close the select.
  */

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

@@ -1,4 +1,4 @@
-export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small";
+export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small cursor-pointer";
 export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
 export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
 export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";

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

@@ -2,8 +2,9 @@ import { FC, ReactNode } from 'react';
 export interface DialSharedEntityIndicatorProps {
     label?: ReactNode;
     size?: number;
-    className?: string;
     stroke?: number;
+    className?: string;
+    containerClassName?: string;
 }
 /**
  * A compact icon-only indicator to denote a "shared" entity.
@@ -18,8 +19,9 @@ export interface DialSharedEntityIndicatorProps {
  *
  * @param [label="Shared entity"] - Accessible label for assistive tech
  * @param [size=10] - Pixel size for the icon
- * @param [className] - Additional Tailwind classes appended to the container
- * @param [stroke=2] - Stroke width for the icon
+ * @param [className] - Additional Tailwind classes applied to the icon
+ * @param [containerClassName] - Additional Tailwind classes appended to the container
+ * @param [stroke=1.5] - Stroke width for the icon
  *
  */
 export declare const DialSharedEntityIndicator: FC<DialSharedEntityIndicatorProps>;

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

@@ -9,6 +9,8 @@ export interface DialTabsProps {
     screenThreshold?: ScreenResolution;
     smallScreenContainerClassName?: string;
     smallScreenDropdownItemClassName?: string;
+    desktopDropdownClassName?: string;
+    desktopTabClassName?: string;
 }
 /**
  * A responsive and overflow-aware tabs component that automatically adapts its layout
@@ -50,6 +52,8 @@ export interface DialTabsProps {
  *   in small-screen (collapsed) mode.
  * @param [smallScreenDropdownItemClassName] - Optional CSS class applied to individual dropdown
  *   items in small-screen mode.
+ * @param [desktopDropdownClassName] - Optional CSS class applied to dropdown button in non small-screen mode.
+ * @param [desktopTabClassName] - Optional CSS class applied to tab in non small-screed mode.
  *
  * @remarks
  * - Automatically detects horizontal overflow via `ResizeObserver` and shows a dropdown when needed.

package/dist/src/hooks/use-screen-type.d.ts

@@ -1,3 +1,4 @@
+import { ScreenType } from '../types/screen';
 /**
  * A React hook that determines the current screen type based on the viewport width.
  *
@@ -16,4 +17,4 @@
  *   console.log('Desktop layout active');
  * }
  */
-export declare const useScreenType: () => import('../types/screen').ScreenType;
+export declare const useScreenType: () => ScreenType;

package/dist/src/index.d.ts

@@ -26,6 +26,7 @@ export { DialTabs } from './components/Tabs/Tabs';
 export { DialBreadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { DialBreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem';
 export { DialButton } from './components/Button/Button';
+export { DialErrorButton, DialNeutralButton, DialPrimaryButton, DialGhostButton, DialLinkButton, } from './components/Button/ButtonWrappers';
 export { DialCloseButton } from './components/CloseButton/CloseButton';
 export { DialRemoveButton } from './components/RemoveButton/RemoveButton';
 export { DialTextarea } from './components/Textarea/Textarea';
@@ -54,7 +55,7 @@ export { DialDropdown } from './components/Dropdown/Dropdown';
 export { DialButtonDropdown } from './components/ButtonDropdown/ButtonDropdown';
 export { DialFileManager } from './components/FileManager/FileManager';
 export { AlertVariant } from './types/alert';
-export { ButtonVariant } from './types/button';
+export { ButtonVariant, ButtonAppearance, ButtonSize } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';
 export { PopupSize } from './types/popup';
 export { ConfirmationPopupVariant } from './types/confirmation-popup';

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

@@ -1,6 +1,18 @@
 export declare enum ButtonVariant {
     Primary = "primary",
+    Neutral = "neutral",
+    Error = "error",
+    Success = "Success",
     Secondary = "secondary",
-    Tertiary = "tertiary",
-    Danger = "danger"
+    Tertiary = "tertiary"
+}
+export declare enum ButtonAppearance {
+    Solid = "solid",
+    Outlined = "outlined",
+    Ghost = "ghost",
+    Link = "link"
+}
+export declare enum ButtonSize {
+    Standard = "standard",
+    Small = "small"
 }

package/dist/src/utils/__tests__/path.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/path.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Splits a path string into normalized, non-empty segments.
+ *
+ * Trims whitespace from each segment and removes empty values
+ * caused by leading, trailing, or repeated slashes.
+ *
+ * @param path - A path string (e.g. "Org / Design / Assets/")
+ * @returns An array of path segments
+ */
+export declare const getSegments: (path: string) => string[];

package/package.json

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