@epam/ai-dial-ui-kit 0.3.0-rc.3 → 0.3.0-rc.31

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

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { DialFormItemProps } from '../FormItem/FormItem';
+import { DialSelectProps } from '../Select/Select';
+import { DialFieldLabelProps } from '../Field/Field';
+export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children'> {
+    selectCssClass?: string;
+    containerCssClass?: string;
+}
+/**
+ * A Select field wrapper that composes `DialFormItem` and `DialSelect`.
+ *
+ * Provides unified label, description, error rendering and a readonly view that shows
+ * the selected option labels (comma-separated in single mode, list in multiple).
+ *
+ * @example
+ * ```tsx
+ * <DialSelectField
+ *   elementId="transport"
+ *   fieldTitle="Transport"
+ *   options={[
+ *     { value: 'SSE', label: 'Server-Sent Events (SSE)' },
+ *     { value: 'WS', label: 'WebSocket' },
+ *   ]}
+ *   value="WS"
+ *   onChange={(v) => setTransport(v as string)}
+ * />
+ *
+ * @param selectCssClass CSS class for the select element
+ * @param containerCssClass CSS class for the form item container
+ * @param emptyStateTitle Title to show when there are no options
+ * @param restSelectProps All other DialSelect props
+ * @param restFormItemProps All other DialFormItem props
+ * ```
+ */
+export declare const DialSelectField: FC<DialSelectFieldProps>;

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

@@ -0,0 +1,35 @@
+import { TabModel } from '../../models/tab';
+import { FC } from 'react';
+export interface DialTabProps {
+    tab: TabModel;
+    active: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    horizontal?: boolean;
+    cssClass?: string;
+    onClick: (id: string) => void;
+}
+/**
+ * A single tab element used within the {@link DialTabs} component.
+ * Supports active, disabled, and invalid states, and can render in
+ * horizontal or vertical orientations. Displays an optional error icon
+ * when marked as invalid.
+ *
+ * @example
+ * ```tsx
+ * <DialTab
+ *   tab={{ id: 'overview', name: 'Overview' }}
+ *   isActive={true}
+ *   onClick={(id) => console.log('Selected tab:', id)}
+ * />
+ * ```
+ *
+ * @param tab - The tab model containing its `id` and `name`.
+ * @param active - Whether the tab is currently active.
+ * @param [disabled=false] - Whether the tab is disabled and non-interactive.
+ * @param [invalid=false] - Whether the tab is marked as invalid, displaying an error icon.
+ * @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>;

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

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { TabModel } from '../../models/tab';
+import { TabOrientation } from '../../types/tab';
+export interface DialTabsProps {
+    tabs: TabModel[];
+    activeTab: string;
+    onClick: (id: string) => void;
+    jsonEditorEnabled?: boolean;
+    orientation?: TabOrientation;
+}
+/**
+ * A responsive and overflow-aware tabs component that adapts between horizontal and dropdown (mobile) layouts
+ * based on screen size and available space. When there are too many tabs to fit in one line,
+ * the component automatically adds a dropdown button for accessing hidden tabs and enables smooth horizontal scrolling.
+ *
+ * Supports both horizontal and vertical orientations and can integrate with JSON editor states to toggle
+ * visibility when needed. Automatically keeps the active tab in view when navigating through scrollable tabs.
+ *
+ * On larger screens, tabs are displayed horizontally or vertically according to the {@link TabOrientation} prop.
+ * On smaller screens, tabs collapse into a dropdown menu for better usability.
+ *
+ * @example
+ * ```tsx
+ * <DialTabs
+ *   tabs={[
+ *     { id: 'overview', label: 'Overview' },
+ *     { id: 'details', label: 'Details' },
+ *     { id: 'settings', label: 'Settings' },
+ *   ]}
+ *   activeTab="overview"
+ *   onClick={(id) => setActiveTab(id)}
+ *   orientation={TabOrientation.Horizontal}
+ * />
+ * ```
+ *
+ * @param tabs - Array of tab models to render. Each tab should include an `id` and `label`.
+ * @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 [jsonEditorEnabled=false] - If true, hides the tab UI to integrate with JSON editor layouts.
+ * @param [orientation=TabOrientation.Horizontal] - The layout direction of the tabs. Uses the {@link TabOrientation} enum.
+ *
+ * @remarks
+ * - Automatically detects overflow using a `ResizeObserver` and toggles a dropdown button when tabs exceed
+ *   available width.
+ * - Smoothly scrolls the tab row to keep the active tab visible.
+ * - Switches to a dedicated dropdown interface on mobile and tablet screens via the `useIsTabletScreen` hook.
+ */
+export declare const DialTabs: FC<DialTabsProps>;

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

@@ -0,0 +1 @@
+export declare const DESKTOP_TABS_GAP_PX = 12;

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

@@ -1,10 +1,12 @@
 import { TagVariant } from '../../types/tag';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 export interface DialTagProps {
     tag: string;
     cssClass?: string;
-    remove?: () => void;
+    remove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     variant?: TagVariant;
+    iconBefore?: ReactNode;
+    bordered?: boolean;
 }
 /**
  * A small tag component used to display labeled items such as categories, filters, or selections.
@@ -24,5 +26,7 @@ export interface DialTagProps {
  * @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.
  */
 export declare const DialTag: FC<DialTagProps>;

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

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { DialInputFieldBaseProps } from '../InputField/InputField';
 export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
     onChange?: (value: string) => void;
+    disableTooltip?: boolean;
 }
 /**
  * A complete textarea field component that combines a field label, textarea input, and error text
@@ -26,14 +27,15 @@ export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
  * @param [errorText] - Error message to display below the textarea
  * @param [optional=false] - Whether to show optional indicator next to the label
  * @param [readonly=false] - Whether the textarea is read-only (no user input allowed)
- * @param [elementCssClass] - Additional CSS classes to apply to the textarea element
  * @param [disabled=false] - Whether the input is disabled and cannot be interacted with
  * @param [invalid=false] - Whether the input has validation errors (applies error styling)
  * @param [defaultEmptyText="None"] - Text to display when readonly and value is empty
  * @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 [elementContainerCssClass] - Additional CSS classes to apply to the input container
+ * @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 [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

@@ -4,9 +4,11 @@ export interface DialTextareaProps {
     placeholder?: string;
     textareaId: string;
     cssClass?: string;
+    containerCssClass?: string;
     disabled?: boolean;
     invalid?: boolean;
     readonly?: boolean;
+    disableTooltip?: boolean;
     onChange?: (value: string) => void;
 }
 /**
@@ -27,8 +29,10 @@ export interface DialTextareaProps {
  * @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 [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)
+ * @param [disableTooltip] - Whether to disable the tooltip that shows the full value on hover
  */
 export declare const DialTextarea: FC<DialTextareaProps>;

package/dist/src/components/Tooltip/TooltipContext.d.ts

@@ -28,10 +28,10 @@ export declare const useTooltipContext: () => {
         floating: HTMLElement | null;
     } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     context: {
-        x: number;
-        y: number;
         placement: Placement;
         strategy: import('@floating-ui/utils').Strategy;
+        x: number;
+        y: number;
         middlewareData: import('@floating-ui/core').MiddlewareData;
         isPositioned: boolean;
         update: () => void;
@@ -75,10 +75,10 @@ export declare const useTooltip: ({ initialOpen, placement, isTriggerClickable,
         floating: HTMLElement | null;
     } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     context: {
-        x: number;
-        y: number;
         placement: Placement;
         strategy: import('@floating-ui/utils').Strategy;
+        x: number;
+        y: number;
         middlewareData: import('@floating-ui/core').MiddlewareData;
         isPositioned: boolean;
         update: () => void;

package/dist/src/hooks/use-is-tablet-screen.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A React hook that determines whether the current window size matches a tablet screen width.
+ *
+ * It initializes based on the current screen size using `isMediumScreen()` and updates its value
+ * whenever the window is resized.
+ *
+ * @returns {boolean} `true` if the viewport width matches the tablet breakpoint, otherwise `false`.
+ *
+ * @example
+ * const isTablet = useIsTabletScreen();
+ * if (isTablet) {
+ *   console.log('Tablet layout active');
+ * }
+ */
+export declare const useIsTabletScreen: () => boolean;

package/dist/src/index.d.ts

@@ -11,6 +11,13 @@ export { DialNoDataContent } from './components/NoDataContent/NoDataContent';
 export { DialCollapsibleSidebar } from './components/CollapsibleSidebar/CollapsibleSidebar';
 export { DialLabelledText } from './components/LabelledText/LabelledText';
 export { DialTag } from './components/Tag/Tag';
+export { DialEllipsisTooltip } from './components/EllipsisTooltip/EllipsisTooltip';
+export { DialDraggableItem } from './components/DraggableItem/DraggableItem';
+export { DialFormItem } from './components/FormItem/FormItem';
+export { DialTabs } from './components/Tabs/Tabs';
+export { DialTab } from './components/Tab/Tab';
+export { DialBreadcrumb } from './components/Breadcrumb/Breadcrumb';
+export { DialBreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem';
 export { DialButton } from './components/Button/Button';
 export { DialCloseButton } from './components/CloseButton/CloseButton';
 export { DialTextarea } from './components/Textarea/Textarea';
@@ -20,7 +27,9 @@ export { DialSwitch } from './components/Switch/Switch';
 export { DialPopup } from './components/Popup/Popup';
 export { DialConfirmationPopup } from './components/ConfirmationPopup/ConfirmationPopup';
 export { DialRadioGroupPopupField } from './components/RadioGroupPopupField/RadioGroupPopupField';
+export { DialFormPopup } from './components/FormPopup/FormPopup';
 export { DialInput } from './components/Input/Input';
+export type { DialInputProps } from './components/Input/Input';
 export { DialNumberInputField } from './components/InputField/InputField';
 export { DialTextInputField } from './components/InputField/InputField';
 export { DialPasswordInputField } from './components/PasswordInput/PasswordInputField';
@@ -30,6 +39,7 @@ export { DialInputPopup } from './components/InputPopup/InputPopup';
 export { DialAutocompleteInput } from './components/AutocompleteInput/AutocompleteInput';
 export { DialAutocompleteInputValue } from './components/AutocompleteInput/AutocompleteInputValue';
 export { DialTagInput } from './components/TagInput/TagInput';
+export { DialSelect } from './components/Select/Select';
 export { DialDropdown } from './components/Dropdown/Dropdown';
 export { AlertVariant } from './types/alert';
 export { ButtonVariant } from './types/button';
@@ -39,6 +49,13 @@ export { ConfirmationPopupVariant } from './types/confirmation-popup';
 export { DropdownType } from './types/dropdown';
 export { SearchSize } from './types/search';
 export { TagVariant } from './types/tag';
+export { TabOrientation } from './types/tab';
+export type { DialBreadcrumbPathItem } from './models/breadcrumb';
+export { FormItemOrientation } from './types/form-item';
 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 { TabModel } from './models/tab';
+export type { DropdownItem } from './models/dropdown';
+export { mergeClasses } from './utils/merge-classes';

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

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

package/dist/src/models/field-control-props.d.ts

@@ -6,6 +6,7 @@ export interface FieldControlProps {
 export interface InputBaseProps {
     elementId: string;
     value?: string | number | null;
+    defaultValue?: string | number;
     placeholder?: string;
     disabled?: boolean;
     readonly?: boolean;

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: ReactNode;
+}

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

@@ -0,0 +1,4 @@
+export interface TabModel {
+    id: string;
+    name: string;
+}

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

@@ -0,0 +1,4 @@
+export declare enum FormItemOrientation {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}

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

@@ -0,0 +1,4 @@
+export declare enum TabOrientation {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}

package/dist/src/utils/merge-classes.d.ts

@@ -0,0 +1,3 @@
+import { default as classNames } from 'classnames';
+/** Merge class names (classnames → tailwind-merge). */
+export declare function mergeClasses(...inputs: Parameters<typeof classNames>): string;

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

@@ -0,0 +1,14 @@
+/**
+ * Checks if the current viewport width is within the "medium" (tablet) screen range.
+ *
+ * Specifically, it returns `true` if the window width is less than 1024 pixels.
+ * Safely handles server-side rendering by verifying that `window` is defined.
+ *
+ * @returns {boolean} `true` if the viewport width is less than 1024px, otherwise `false`.
+ *
+ * @example
+ * if (isMediumScreen()) {
+ *   console.log('Tablet or smaller screen detected');
+ * }
+ */
+export declare const isMediumScreen: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.3.0-rc.3",
+  "version": "0.3.0-rc.31",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -37,9 +37,9 @@
     "format": "prettier --check .",
     "format-fix": "prettier --write .",
     "preview": "vite preview",
-    "storybook": "concurrently 'npm run storybook:css' 'storybook dev -p 6006'",
+    "storybook": "concurrently \"npm run storybook:css\" \"storybook dev -p 6006\"",
     "storybook:css": "tailwindcss -w -i ./src/styles/tailwind-entry.scss -o ./src/index.css",
-    "build-storybook": "concurrently 'npm run build-storybook:css' 'storybook build'",
+    "build-storybook": "concurrently \"npm run build-storybook:css\" \"storybook build\"",
     "build-storybook:css": "tailwindcss -m -i ./src/styles/tailwind-entry.scss -o ./src/index.css",
     "prepare": "husky",
     "publish": "node tools/publish-lib.mjs",
@@ -56,6 +56,11 @@
   "overrides": {
     "esbuild": "0.25.9"
   },
+  "dependencies": {
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "tailwind-merge": "^3.3.1"
+  },
   "peerDependencies": {
     "@floating-ui/react": "^0.27.15",
     "@monaco-editor/react": "^4.7.0",