@epam/ai-dial-ui-kit 0.15.0-dev.35 → 0.15.0-dev.37

package/dist/components/New/SideDrawer/SideDrawer.js

@@ -1,16 +1,16 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useFloating as O, useRole as z, useDismiss as A, useInteractions as E, FloatingPortal as K, FloatingOverlay as P, FloatingFocusManager as j } from "@floating-ui/react";
-import { IconChevronLeft as M } from "@tabler/icons-react";
-import { useId as R } from "react";
-import { CloseButton as B } from "../CloseButton/CloseButton.js";
-import { DIAL_KIT_ICON_STROKE as G } from "../constants/icon.js";
-import { GhostIconButton as H } from "../IconButton/IconButtonWrappers.js";
-import { useThemeScope as Z } from "../ThemeScope/ThemeScope.js";
-import { DIAL_ICON_SIZE as $ } from "../../../constants/icon.js";
-import { DIAL_KIT_CLASS as q } from "../../../constants/public-class-names.js";
-import { ElementSize as J } from "../../../types/size.js";
+import { useFloating as A, useRole as E, useDismiss as K, useInteractions as P, FloatingPortal as j, FloatingOverlay as M, FloatingFocusManager as R } from "@floating-ui/react";
+import { IconChevronLeft as B } from "@tabler/icons-react";
+import { useId as G } from "react";
+import { CloseButton as H } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as Z } from "../constants/icon.js";
+import { GhostIconButton as $ } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as q } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as J } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as Q } from "../../../constants/public-class-names.js";
+import { ElementSize as U } from "../../../types/size.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
-const ae = ({
+const ne = ({
   open: t,
   onClose: l,
   header: o,
@@ -27,28 +27,31 @@ const ae = ({
   className: I,
   overlayClassName: v,
   headerClassName: S,
-  bodyClassName: w,
-  titleClassName: N,
-  portalId: k
+  style: w,
+  overlayStyle: N,
+  bodyClassName: k,
+  titleClassName: F,
+  portalId: C
 }) => {
-  const F = Z(), d = `side-drawer-title-${R()}`, s = typeof o == "string", { refs: m, context: a } = O({
+  const D = q(), d = `side-drawer-title-${G()}`, s = typeof o == "string", { refs: m, context: a } = A({
     open: t,
-    onOpenChange: (T) => {
-      T || l();
+    onOpenChange: (z) => {
+      z || l();
     }
-  }), C = z(a, { role: "dialog" }), D = A(a, { outsidePress: h }), { getFloatingProps: _ } = E([C, D]), L = o != null || i != null || !n;
-  return /* @__PURE__ */ e(K, { id: k, children: /* @__PURE__ */ e(
-    P,
+  }), _ = E(a, { role: "dialog" }), L = K(a, { outsidePress: h }), { getFloatingProps: T } = P([_, L]), O = o != null || i != null || !n;
+  return /* @__PURE__ */ e(j, { id: C, children: /* @__PURE__ */ e(
+    M,
     {
       lockScroll: t,
+      style: N,
       className: r(
         "z-popup bg-backdrop transition-opacity duration-300 motion-reduce:transition-none",
         t ? "opacity-100" : "pointer-events-none opacity-0",
-        F,
+        D,
         v
       ),
       children: /* @__PURE__ */ e(
-        j,
+        R,
         {
           context: a,
           disabled: !t,
@@ -57,22 +60,23 @@ const ae = ({
             "div",
             {
               ref: m.setFloating,
-              ..._(),
+              ...T(),
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": s ? d : void 0,
               "aria-label": s ? void 0 : f,
               inert: !t,
+              style: w,
               className: r(
                 "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-none",
                 "desktop:w-[540px] desktop:rounded-s-xl desktop:border-s desktop:border-secondary",
                 "transition-transform duration-300 motion-reduce:transition-none",
                 t ? "translate-x-0" : "translate-x-full rtl:-translate-x-full",
                 I,
-                q.sideDrawer
+                Q.sideDrawer
               ),
               children: [
-                L && /* @__PURE__ */ c(
+                O && /* @__PURE__ */ c(
                   "div",
                   {
                     className: r(
@@ -81,16 +85,16 @@ const ae = ({
                     ),
                     children: [
                       i && /* @__PURE__ */ e(
-                        H,
+                        $,
                         {
                           "aria-label": u,
                           disabled: x,
                           onClick: i,
                           icon: /* @__PURE__ */ e(
-                            M,
+                            B,
                             {
-                              size: $.MD,
-                              stroke: G,
+                              size: J.MD,
+                              stroke: Z,
                               className: "rtl:-scale-x-100",
                               "aria-hidden": "true"
                             }
@@ -103,19 +107,19 @@ const ae = ({
                           id: d,
                           className: r(
                             "min-w-0 flex-1 truncate text-primary",
-                            N ?? "dial-h2-text"
+                            F ?? "dial-h2-text"
                           ),
                           children: o
                         }
                       ) : /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: o }),
                       p,
                       !n && /* @__PURE__ */ e(
-                        B,
+                        H,
                         {
                           ariaLabel: g,
                           onClose: l,
                           disabled: b,
-                          size: J.Standard
+                          size: U.Standard
                         }
                       )
                     ]
@@ -126,7 +130,7 @@ const ae = ({
                   {
                     className: r(
                       "min-h-0 flex-1 overflow-y-auto",
-                      w
+                      k
                     ),
                     children: y
                   }
@@ -140,5 +144,5 @@ const ae = ({
   ) });
 };
 export {
-  ae as SideDrawer
+  ne as SideDrawer
 };

package/dist/components/New/constants/overlay.js

@@ -1,13 +1,15 @@
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const a = "rounded-xl bg-layer-raised p-1 shadow-md", l = "flex flex-col gap-0.5", s = e(
+const a = "rounded-xl bg-layer-raised p-1 shadow-md", s = "flex flex-col gap-0.5", l = e(
   a,
   "w-max"
 ), r = e(
-  s,
   l,
+  s,
   "py-2"
 ), n = e(
-  "flex w-full cursor-pointer items-center gap-2 px-3 h-[40px] rounded-lg",
+  // `shrink-0` keeps the 40px: a column squeezed by the panel's height cap
+  // would otherwise collapse the rows to their content.
+  "flex w-full shrink-0 cursor-pointer items-center gap-2 px-3 h-[40px] rounded-lg",
   "dial-small-text text-primary truncate",
   // Hover sits one step up the accent-alpha ramp from the selected tint, so a
   // hovered row reads as hovered whether or not it is also selected.
@@ -26,8 +28,8 @@ export {
   m as overlayItemDisabledClassName,
   c as overlayItemHighlightClassName,
   t as overlayItemSelectedClassName,
-  l as overlayListClassName,
-  s as overlaySubMenuClassName,
+  s as overlayListClassName,
+  l as overlaySubMenuClassName,
   r as overlaySubMenuListClassName,
   a as overlaySurfaceClassName
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.35",
-  "generatedAt": "2026-09-30T21:21:02.534Z",
+  "version": "0.15.0-dev.37",
+  "generatedAt": "2026-10-05T11:16:33.468Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -1250,6 +1250,13 @@
           "defaultValue": "'Select all'",
           "description": "Label for the \"Select All\" checkbox."
         },
+        {
+          "name": "collapseTagOverflow",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Keep a multi-select's tags on one row, folding those that do not fit into a `+N` counter by the width available; the hover panel lists them and removes them."
+        },
         {
           "name": "selectedOptionMark",
           "type": "| MenuItemMark.Tint\n    | MenuItemMark.Check\n    | MenuItemMark.Highlight",
@@ -1403,6 +1410,12 @@
           "type": "(\n    event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,\n    val: string,\n  ) => void",
           "required": false,
           "description": "Called with the value whose tag was removed; when omitted the tags are not removable"
+        },
+        {
+          "name": "tagClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for every tag"
         }
       ],
       "examples": [],
@@ -3533,6 +3546,24 @@
           "required": false,
           "description": "Additional CSS classes for the backdrop"
         },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the header row"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the panel, e.g. custom properties"
+        },
+        {
+          "name": "overlayStyle",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the backdrop"
+        },
         {
           "name": "bodyClassName",
           "type": "string",
@@ -3778,6 +3809,18 @@
           "required": false,
           "description": "Additional CSS classes for the header row"
         },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the panel, e.g. custom properties"
+        },
+        {
+          "name": "overlayStyle",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the backdrop"
+        },
         {
           "name": "bodyClassName",
           "type": "string",