@epam/ai-dial-ui-kit 0.14.0-dev.40 → 0.14.0-dev.44

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

@@ -1,5 +1,6 @@
 import { DropdownItemType } from '../types/dropdown';
 import { MenuItemMark } from '../types/menu-item';
+import { TooltipPlacement } from '../types/tooltip';
 import { ReactNode, MouseEvent } from 'react';
 export interface DropdownSubMenuHoverOptions {
     /** Delay (ms) before the submenu opens/closes on hover. Defaults to `{ open: 80, close: 80 }`. */
@@ -10,6 +11,22 @@ export interface DropdownSubMenuHoverOptions {
     /** Whether pointer movement (not just rest) can trigger the hover open. Defaults to `false`. */
     move?: boolean;
 }
+/**
+ * Data for the interactive panel {@link Dropdown} anchors to an item's row —
+ * unlike a plain tooltip, its content can hold controls of its own (a "View
+ * details" link, for example), which is why it takes a full node rather than
+ * a string.
+ */
+export interface DropdownItemInteractiveTooltip {
+    content: ReactNode;
+    /** @default TooltipPlacement.Right */
+    placement?: TooltipPlacement;
+    /**
+     * Additional CSS classes for the panel — e.g. a wider `max-w-*` for content
+     * that does not fit the default 320px.
+     */
+    contentClassName?: string;
+}
 export interface DropdownItem {
     key: string;
     label?: ReactNode;
@@ -66,4 +83,10 @@ export interface DropdownItem {
     renderItem?: (item: DropdownItem) => ReactNode;
     /** Overrides the default hover-open behavior of this item's submenu. */
     subMenuHoverOptions?: DropdownSubMenuHoverOptions;
+    /**
+     * Anchors an {@link InteractiveTooltip} to this item's row, open on hover
+     * or focus. Use it for content too rich for a plain label — an explanation
+     * with its own link or button.
+     */
+    interactiveTooltip?: DropdownItemInteractiveTooltip;
 }

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

@@ -1,4 +1,21 @@
 import { ReactNode } from 'react';
+import { TooltipPlacement } from '../types/tooltip';
+/**
+ * Data for the interactive panel {@link Select} anchors to an option's row —
+ * unlike a plain tooltip, its content can hold controls of its own (a "View
+ * details" link, for example), which is why it takes a full node rather than
+ * a string.
+ */
+export interface SelectOptionInteractiveTooltip {
+    content: ReactNode;
+    /** @default TooltipPlacement.Right */
+    placement?: TooltipPlacement;
+    /**
+     * Additional CSS classes for the panel — e.g. a wider `max-w-*` for content
+     * that does not fit the default 320px.
+     */
+    contentClassName?: string;
+}
 export interface SelectOption {
     value: string;
     label: string;
@@ -17,5 +34,12 @@ export interface SelectOption {
      * keeps its own click and stays out of the row's accessible name.
      */
     rightControl?: ReactNode;
+    /**
+     * Anchors an {@link InteractiveTooltip} to this option's row, open on hover
+     * or focus. Use it for content too rich for `description` — an explanation
+     * with its own link or button, the way a skill picker explains what a
+     * skill does before it is chosen.
+     */
+    interactiveTooltip?: SelectOptionInteractiveTooltip;
     children?: SelectOption[];
 }

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

@@ -12,6 +12,7 @@ export interface SubMenuHoverOptions {
  */
 export declare function useSubMenuFloating(gap: number, ariaRole?: 'menu' | 'listbox', disabled?: boolean, hoverOptions?: SubMenuHoverOptions): {
     isOpen: boolean;
+    nodeId: string | undefined;
     refs: {
         reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
         floating: React.MutableRefObject<HTMLElement | null>;