@epam/ai-dial-ui-kit 0.13.0-dev.59 → 0.13.0-dev.61

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

@@ -67,6 +67,6 @@ export interface PopupProps {
  * @param [hideClose=false] - Whether the close button is hidden in the header
  * @param [closeAriaLabel="Close dialog"] - Accessible name of the close button
  * @param [closeOnOutsideClick=true] - Whether the popup closes when clicking outside
- * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile
+ * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility
  */
 export declare const Popup: FC<PopupProps>;

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

@@ -1,7 +1,8 @@
-import { FC, InputHTMLAttributes, ReactNode } from 'react';
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
 type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'size'>;
 export interface SwitchProps extends NativeInputProps {
-    label?: ReactNode;
+    labelProps?: LabelProps;
     isOn?: boolean;
     disabled?: boolean;
     onChange?: (value: boolean) => void;
@@ -16,17 +17,22 @@ export interface SwitchProps extends NativeInputProps {
  * ```tsx
  * <Switch
  *   id="notifications"
- *   label="Active"
+ *   labelProps={{ label: 'Active' }}
  *   isOn={isActive}
  *   onChange={setIsActive}
  * />
  * ```
  *
- * @param [label] - Visible label rendered next to the control
+ * The track and the label text are two sibling `<label for>` elements rather
+ * than one wrapper, so the {@link Label} keeps its own `required` marker and
+ * `caption` info button — a button nested in a label forwards its clicks to the
+ * labelled control. Clicking either one still toggles the switch.
+ *
+ * @param [labelProps] - Props of the {@link Label} rendered next to the control
  * @param [isOn=false] - The current value of the switch
  * @param [disabled=false] - Whether the switch is disabled
  * @param [onChange] - Callback fired with the new value when toggled
- * @param [caption] - Caption text rendered below the label
+ * @param [caption] - Caption text rendered below the label, and described by the switch
  */
 export declare const Switch: FC<SwitchProps>;
 export {};

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

@@ -59,6 +59,6 @@ export interface DialPopupProps {
  * @param [size=PopupSize.Md] - Sets the max-width of the popup
  * @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)
- * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile
+ * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility
  */
 export declare const DialPopup: FC<DialPopupProps>;

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

@@ -1,16 +1,54 @@
-import { FC } from 'react';
-export declare enum DialProgressBarSize {
-    Small = "sm",
-    Medium = "md"
-}
-export interface DialProgressBarProps {
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import { LabelProps } from '../New/Label/Label';
+import { ElementSize } from '../../types/size';
+type NativeProgressBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export interface ProgressBarProps extends NativeProgressBarProps {
     value: number;
     max?: number;
-    size?: DialProgressBarSize;
-    className?: string;
-    ariaLabel?: string;
+    size?: ElementSize;
+    labelProps?: LabelProps;
+    valueLabel?: ReactNode;
 }
 /**
- * Design system 1.0
+ * A horizontal bar indicating progress toward a goal.
+ * aliases: Progress|LoadingBar|Meter
+ * Design system 2.0
+ *
+ * Names itself from `labelProps.label` through `aria-labelledby`; without one it
+ * falls back to `aria-label`, and finally to `Progress` so the bar is never
+ * anonymous. Prefer a real label — several bars all announcing "Progress" tell a
+ * screen reader user nothing about which is which.
+ *
+ * Screen readers derive the announced percentage from the value and `max`. When
+ * the raw numbers are more useful than a percentage, pass `aria-valuetext`
+ * (e.g. `"3 of 10 files"`); it goes straight through to the element.
+ *
+ * `valueLabel` renders a readout at the end of the label row. Formatting stays
+ * with the caller — the bar has no way to know how many decimals or which unit
+ * a given quantity deserves. It does not name the bar, so pair it with a
+ * matching `aria-valuetext` to have the same reading announced.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={40} labelProps={{ label: 'Uploading' }} />
+ * <ProgressBar value={3} max={10} aria-valuetext="3 of 10 files" />
+ * <ProgressBar value={80} size={ElementSize.Small} />
+ *
+ * <ProgressBar
+ *   value={3.313182}
+ *   max={500}
+ *   labelProps={{ label: 'Cost per month', caption: 'Billed monthly' }}
+ *   valueLabel="3.31 / 500"
+ *   aria-valuetext="3.31 of 500"
+ * />
+ * ```
+ *
+ * @param value - Current progress. Clamped into `0…max`.
+ * @param [max=100] - Value that counts as complete.
+ * @param [size=ElementSize.Standard] - Bar height: standard is 8px, small is 4px.
+ * @param [labelProps] - Props of the {@link Label} rendered above the bar, which also names it.
+ * @param [valueLabel] - Readout rendered at the end of the label row.
+ * @param [className] - Additional classes on the track element.
  */
-export declare const DialProgressBar: FC<DialProgressBarProps>;
+export declare const ProgressBar: FC<ProgressBarProps>;
+export {};

package/dist/src/index.d.ts

@@ -21,8 +21,8 @@ export type { DialNotificationProps } from './components/Notification/Notificati
 export { DialLoader } from './components/Loader/Loader';
 export { Spinner } from './components/Spinner/Spinner';
 export type { SpinnerProps } from './components/Spinner/Spinner';
-export { DialProgressBar, DialProgressBarSize, } from './components/ProgressBar/ProgressBar';
-export type { DialProgressBarProps } from './components/ProgressBar/ProgressBar';
+export { ProgressBar } from './components/ProgressBar/ProgressBar';
+export type { ProgressBarProps } from './components/ProgressBar/ProgressBar';
 export { DialPagination } from './components/Pagination/Pagination';
 export type { DialPaginationProps } from './components/Pagination/Pagination';
 export { DialCheckbox } from './components/Checkbox/Checkbox';

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

@@ -1,5 +1,14 @@
 import { DropdownItemType } from '../types/dropdown';
 import { ReactNode, MouseEvent } from 'react';
+export interface DropdownSubMenuHoverOptions {
+    /** Delay (ms) before the submenu opens/closes on hover. Defaults to `{ open: 80, close: 80 }`. */
+    delay?: number | {
+        open?: number;
+        close?: number;
+    };
+    /** Whether pointer movement (not just rest) can trigger the hover open. Defaults to `false`. */
+    move?: boolean;
+}
 export interface DropdownItem {
     key: string;
     label?: ReactNode;
@@ -13,4 +22,22 @@ export interface DropdownItem {
         domEvent: MouseEvent;
     }) => void;
     children?: DropdownItem[];
+    /** Content rendered above the children list in this item's submenu panel. */
+    menuHeader?: ReactNode | (() => ReactNode);
+    /** Content rendered below the children list in this item's submenu panel. */
+    menuFooter?: ReactNode | (() => ReactNode);
+    /**
+     * Fully replaces the submenu panel content (children/menuHeader/menuFooter are ignored).
+     * Use this to show a custom popup — e.g. a preview or a picker — instead of a plain item list.
+     */
+    renderSubMenu?: () => ReactNode;
+    /**
+     * Replaces this item's icon + label content while keeping its button element, click
+     * handling, and (for a submenu trigger) the caret intact. Use this for lighter-weight
+     * customization — e.g. a badge or avatar next to the label — without giving up the
+     * default row/list wiring the way `renderSubMenu` does.
+     */
+    renderItem?: (item: DropdownItem) => ReactNode;
+    /** Overrides the default hover-open behavior of this item's submenu. */
+    subMenuHoverOptions?: DropdownSubMenuHoverOptions;
 }

package/dist/src/utils/sub-menu-floating.d.ts

@@ -1,9 +1,16 @@
 import { ReactNode } from 'react';
+export interface SubMenuHoverOptions {
+    delay?: number | {
+        open?: number;
+        close?: number;
+    };
+    move?: boolean;
+}
 /**
  * Shared floating state for right-side submenus.
  * Handles open state, Floating UI positioning and hover/dismiss/role interactions.
  */
-export declare function useSubMenuFloating(gap: number, ariaRole?: 'menu' | 'listbox', disabled?: boolean): {
+export declare function useSubMenuFloating(gap: number, ariaRole?: 'menu' | 'listbox', disabled?: boolean, hoverOptions?: SubMenuHoverOptions): {
     isOpen: boolean;
     refs: {
         reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;

package/package.json

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