@epam/ai-dial-ui-kit 0.15.0 → 0.15.2

package/dist/components/New/Popup/Popup.js

@@ -1,160 +1,183 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useFloating as Q, useRole as U, useDismiss as W, useInteractions as X, FloatingPortal as Y, FloatingOverlay as ee, FloatingFocusManager as oe } from "@floating-ui/react";
-import { useRef as re, useId as se } from "react";
-import { Button as ae } from "../Button/Button.js";
-import { CloseButton as ie } from "../CloseButton/CloseButton.js";
-import { GhostIconButton as le } from "../IconButton/IconButtonWrappers.js";
-import { Tooltip as te } from "../Tooltip/Tooltip.js";
-import { DIAL_KIT_ICON_STROKE as ne } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as pe } from "../../../constants/icon.js";
-import { ButtonVariant as me } from "../../../types/button.js";
-import { PopupSize as ce } from "../../../types/popup.js";
-import { ElementSize as de } from "../../../types/size.js";
-import { useThemeScope as ue } from "../ThemeScope/ThemeScope.js";
-import { mergeClasses as r } from "../../../utils/merge-classes.js";
-import { IconChevronLeft as fe } from "@tabler/icons-react";
-import { popupActionsGroupClassName as l, popupHeaderDividerClassName as ge, popupHeaderClassName as he, popupSizeClassMap as Ne, popupBaseClassName as Ce, popupOverlayBaseClassName as ve, popupTitleClassName as Ie, popupFooterDividerClassName as Fe, popupFooterClassName as Se } from "./constants.js";
-import { DIAL_KIT_CLASS as xe } from "../../../constants/public-class-names.js";
-const je = ({
-  open: t = !1,
-  header: n,
-  ariaLabel: F,
-  portalId: S,
-  className: x,
-  overlayClassName: T,
-  overlayStyle: _,
-  titleClassName: b,
-  headerClassName: y,
-  bodyClassName: z,
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import { useFloating as X, useRole as Y, useDismiss as ee, useInteractions as oe, FloatingPortal as se, FloatingOverlay as re, FloatingFocusManager as ae } from "@floating-ui/react";
+import { useRef as ie, useId as le } from "react";
+import { Button as te } from "../Button/Button.js";
+import { CloseButton as ne } from "../CloseButton/CloseButton.js";
+import { GhostIconButton as pe } from "../IconButton/IconButtonWrappers.js";
+import { Tooltip as me } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_ICON_STROKE as ce } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as ue } from "../../../constants/icon.js";
+import { ButtonVariant as de } from "../../../types/button.js";
+import { PopupSize as fe } from "../../../types/popup.js";
+import { ElementSize as Ne } from "../../../types/size.js";
+import { useThemeScope as ge } from "../ThemeScope/ThemeScope.js";
+import { mergeClasses as s } from "../../../utils/merge-classes.js";
+import { IconChevronLeft as he } from "@tabler/icons-react";
+import { popupActionsGroupClassName as t, popupHeaderDividerClassName as Ce, popupHeaderClassName as ve, popupSizeClassMap as Ie, popupBaseClassName as Fe, popupOverlayBaseClassName as Se, popupTitleClassName as xe, popupMainActionsGroupClassName as Te, popupFooterDividerClassName as _e, popupFooterClassName as be, popupMainActionButtonClassName as F } from "./constants.js";
+import { DIAL_KIT_CLASS as ye } from "../../../constants/public-class-names.js";
+const Ve = ({
+  open: n = !1,
+  header: p,
+  ariaLabel: S,
+  portalId: x,
+  className: T,
+  overlayClassName: _,
+  overlayStyle: b,
+  titleClassName: y,
+  headerClassName: z,
+  bodyClassName: A,
   children: D,
-  footer: p,
-  footerClassName: B,
-  onClose: m,
-  onBack: c,
-  backAriaLabel: L = "Back",
+  footer: m,
+  footerClassName: M,
+  onClose: c,
+  onBack: u,
+  backAriaLabel: B = "Back",
   headerActions: d,
   headerDivider: P = !1,
-  mainButtons: u,
-  additionalButtons: f,
-  additionalButtonsOnLeft: g = !1,
-  footerDivider: A = !1,
-  size: M = ce.Md,
+  mainButtons: f,
+  additionalButtons: N,
+  additionalButtonsOnLeft: a = !1,
+  footerDivider: G = !1,
+  size: L = fe.Md,
   hideClose: R = !1,
   closeAriaLabel: w = "Close dialog",
   closeOnOutsideClick: E = !0,
-  preventKeyboardOnOpen: h = !1
+  preventKeyboardOnOpen: g = !1
 }) => {
-  const G = ue(), N = re(null), O = se(), { refs: C, context: a } = Q({
-    open: t,
+  const $ = ge(), h = ie(null), j = le(), { refs: C, context: i } = X({
+    open: n,
     onOpenChange: (e) => {
-      e || m?.(null);
+      e || c?.(null);
     }
-  }), $ = U(a, { role: "dialog" }), j = W(a, { outsidePress: E }), { getFloatingProps: k } = X([$, j]);
-  if (!t) return null;
-  const i = typeof n == "string" ? `popup-heading-${O}` : void 0, H = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
+  }), k = Y(i, { role: "dialog" }), H = ee(i, { outsidePress: E }), { getFloatingProps: K } = oe([k, H]);
+  if (!n) return null;
+  const l = typeof p == "string" ? `popup-heading-${j}` : void 0, O = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
     "h2",
     {
-      id: i,
-      className: r(Ie, b),
-      children: /* @__PURE__ */ o(te, { tooltip: e, triggerClassName: "truncate", children: e })
+      id: l,
+      className: s(xe, y),
+      children: /* @__PURE__ */ o(me, { tooltip: e, triggerClassName: "truncate", children: e })
     }
-  ) : e : /* @__PURE__ */ o("span", {}), v = R ? null : /* @__PURE__ */ o(ie, { ariaLabel: w, onClose: (e) => m?.(e) }), I = (e, V = []) => V.map(({ variant: Z = me.Neutral, ...q }, J) => /* @__PURE__ */ o(ae, { variant: Z, ...q }, `${e}-${J}`)), K = () => {
-    if (p !== void 0) return p;
-    if (!u?.length && !f?.length) return null;
-    const e = I("additional", f);
-    return /* @__PURE__ */ s(
+  ) : e : /* @__PURE__ */ o("span", {}), v = R ? null : /* @__PURE__ */ o(ne, { ariaLabel: w, onClose: (e) => c?.(e) }), I = (e, Z = [], q) => Z.map(
+    ({ variant: J = de.Neutral, className: Q, ...U }, W) => /* @__PURE__ */ o(
+      te,
+      {
+        variant: J,
+        className: s(q, Q),
+        ...U
+      },
+      `${e}-${W}`
+    )
+  ), V = () => {
+    if (m !== void 0) return m;
+    if (!f?.length && !N?.length) return null;
+    const e = I(
+      "additional",
+      N,
+      a ? void 0 : F
+    );
+    return /* @__PURE__ */ r(
       "div",
       {
-        className: r(
-          Se,
-          A && Fe,
-          B
+        className: s(
+          be,
+          G && _e,
+          M
         ),
         children: [
-          g && e.length > 0 && /* @__PURE__ */ o("div", { className: l, children: e }),
-          /* @__PURE__ */ s("div", { className: r(l, "ml-auto"), children: [
-            !g && e,
-            I("main", u)
-          ] })
+          a && e.length > 0 && /* @__PURE__ */ o("div", { className: t, children: e }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: s(
+                t,
+                Te
+              ),
+              children: [
+                !a && e,
+                I("main", f, F)
+              ]
+            }
+          )
         ]
       }
     );
   };
-  return /* @__PURE__ */ o(Y, { id: S, children: /* @__PURE__ */ o(
-    ee,
+  return /* @__PURE__ */ o(se, { id: x, children: /* @__PURE__ */ o(
+    re,
     {
-      style: _,
-      className: r(
-        ve,
-        G,
-        T
+      style: b,
+      className: s(
+        Se,
+        $,
+        _
       ),
       children: /* @__PURE__ */ o(
-        oe,
+        ae,
         {
-          context: a,
-          initialFocus: h ? N : C.floating,
-          children: /* @__PURE__ */ s(
+          context: i,
+          initialFocus: g ? h : C.floating,
+          children: /* @__PURE__ */ r(
             "div",
             {
               ref: C.setFloating,
-              ...k(),
+              ...K(),
               role: "dialog",
               "aria-modal": "true",
-              "aria-labelledby": i,
-              "aria-label": i ? void 0 : F,
-              className: r(
-                Ce,
-                Ne[M],
-                x,
-                xe.popup
+              "aria-labelledby": l,
+              "aria-label": l ? void 0 : S,
+              className: s(
+                Fe,
+                Ie[L],
+                T,
+                ye.popup
               ),
               children: [
-                h && /* @__PURE__ */ o(
+                g && /* @__PURE__ */ o(
                   "div",
                   {
-                    ref: N,
+                    ref: h,
                     tabIndex: -1,
                     "aria-hidden": !0,
                     className: "absolute size-px -m-px overflow-hidden opacity-0 pointer-events-none"
                   }
                 ),
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ r(
                   "div",
                   {
-                    className: r(
-                      he,
-                      P && ge,
-                      y
+                    className: s(
+                      ve,
+                      P && Ce,
+                      z
                     ),
                     children: [
-                      c && /* @__PURE__ */ o(
-                        le,
+                      u && /* @__PURE__ */ o(
+                        pe,
                         {
-                          "aria-label": L,
-                          size: de.Small,
+                          "aria-label": B,
+                          size: Ne.Small,
                           className: "mr-2",
-                          onClick: c,
+                          onClick: u,
                           icon: /* @__PURE__ */ o(
-                            fe,
+                            he,
                             {
-                              size: pe.SM,
-                              stroke: ne,
+                              size: ue.SM,
+                              stroke: ce,
                               "aria-hidden": "true"
                             }
                           )
                         }
                       ),
-                      H(n),
-                      d ? /* @__PURE__ */ s("div", { className: l, children: [
+                      O(p),
+                      d ? /* @__PURE__ */ r("div", { className: t, children: [
                         d,
                         v
                       ] }) : v
                     ]
                   }
                 ),
-                /* @__PURE__ */ o("div", { className: r("grow overflow-auto", z), children: D }),
-                K()
+                /* @__PURE__ */ o("div", { className: s("grow overflow-auto", A), children: D }),
+                V()
               ]
             }
           )
@@ -164,5 +187,5 @@ const je = ({
   ) });
 };
 export {
-  je as Popup
+  Ve as Popup
 };

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

@@ -1,17 +1,19 @@
 import { PopupSize as e } from "../../../types/popup.js";
-const a = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", r = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", o = "flex flex-row items-center justify-between px-6 py-4", t = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", s = "border-b border-tertiary", l = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", x = "flex shrink-0 flex-row items-center gap-2", i = {
+const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
   [e.Sm]: "max-w-full md:max-w-[400px]",
   [e.Md]: "max-w-full md:max-w-[800px]",
   [e.Lg]: "max-w-full md:max-w-[1200px]"
 };
 export {
-  x as popupActionsGroupClassName,
-  r as popupBaseClassName,
-  l as popupFooterClassName,
+  i as popupActionsGroupClassName,
+  a as popupBaseClassName,
+  r as popupFooterClassName,
   m as popupFooterDividerClassName,
-  o as popupHeaderClassName,
-  s as popupHeaderDividerClassName,
-  a as popupOverlayBaseClassName,
-  i as popupSizeClassMap,
-  t as popupTitleClassName
+  t as popupHeaderClassName,
+  l as popupHeaderDividerClassName,
+  n as popupMainActionButtonClassName,
+  x as popupMainActionsGroupClassName,
+  o as popupOverlayBaseClassName,
+  u as popupSizeClassMap,
+  s as popupTitleClassName
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0",
-  "generatedAt": "2026-10-08T15:16:08.527Z",
+  "version": "0.15.2",
+  "generatedAt": "2026-10-12T14:06:18.751Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -5204,10 +5204,17 @@
           "required": false,
           "defaultValue": "'Select all rows'",
           "description": "Accessible name of the select-all control."
+        },
+        {
+          "name": "colorScheme",
+          "type": "GridColorScheme",
+          "required": false,
+          "defaultValue": "GridColorScheme.Light",
+          "description": "AG Grid color scheme. `dark` paints native controls dark."
         }
       ],
       "examples": [
-        "interface Product { id: string; name: string; price: number }\n\nconst columns: ColDef<Product>[] = [\n  { field: 'name', headerName: 'Product', flex: 1 },\n  { field: 'price', headerName: 'Price', width: 120 },\n];\n\n<Grid<Product> columnDefs={columns} rowData={products} />\n\n// With selection and a context menu\n<Grid<Product>\n  columnDefs={columns}\n  rowData={products}\n  selectionMode={GridSelectionMode.MULTIPLE}\n  selectedRowIds={selectedIds}\n  onSelectionChange={(ids) => setSelectedIds(ids)}\n  selectRowLabel={(row) => `Select ${row.name}`}\n  getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}\n/>"
+        "interface Product { id: string; name: string; price: number }\n\nconst columns: ColDef<Product>[] = [\n  { field: 'name', headerName: 'Product', flex: 1 },\n  { field: 'price', headerName: 'Price', width: 120 },\n];\n\n<Grid<Product> columnDefs={columns} rowData={products} />\n\n// With selection and a context menu\n<Grid<Product>\n  columnDefs={columns}\n  rowData={products}\n  selectionMode={GridSelectionMode.MULTIPLE}\n  selectedRowIds={selectedIds}\n  onSelectionChange={(ids) => setSelectedIds(ids)}\n  selectRowLabel={(row) => `Select ${row.name}`}\n  getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}\n/>\n\n// Dark native controls, including the date-filter calendar\n<Grid<Product> columnDefs={columns} rowData={products} colorScheme={GridColorScheme.Dark} />"
       ],
       "sourceFile": "components/New/Grid/Grid.tsx"
     },
@@ -12334,6 +12341,22 @@
       ],
       "sourceFile": "types/transfer-queue.ts",
       "description": "Lifecycle status of one item in a `TransferQueue`."
+    },
+    {
+      "name": "GridColorScheme",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Light",
+          "value": "'light'"
+        },
+        {
+          "name": "Dark",
+          "value": "'dark'"
+        }
+      ],
+      "sourceFile": "types/grid.ts",
+      "description": "Color scheme `Grid` passes to AG Grid. It selects the light or dark theme\npart and the browser `color-scheme` native controls inside the grid follow."
     }
   ],
   "hooks": [
@@ -12453,7 +12476,7 @@
       "name": "GRID_THEME_PARAMS",
       "sourceFile": "components/New/Grid/constants.ts",
       "description": "ag-Grid theme parameters, resolved from the 2.0 colour tokens with the same\nliteral fallbacks the Tailwind config carries, so a consumer that defines no\nCSS variables still gets the intended palette.\n\nHover uses the subtle accent tint and selection the slightly stronger\nselected tint, as in the grid cell design.",
-      "signature": "GRID_THEME_PARAMS = {\n  accentColor: 'var(--bg-control-accent, #1D4ED8)',\n  backgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  oddRowBackgroundColor: 'var(--bg-layer-sunken, #EEF1F7)',\n  selectedRowBackgroundColor:\n    'var(--bg-control-accent-alpha-active-subtle, #2764D914)',\n  rowHoverColor: 'var(--bg-control-accent-alpha-hover-subtle, #2764D90A)',\n  borderColor: 'var(--stroke-tertiary, #E0E6F0)',\n  // Dividers inside the table sit on the thin stroke (0.5px) rather than the\n  // 1px main stroke that controls and standalone dividers use, so a dense grid\n  // reads as rows of data instead of a set of boxes. Sub-pixel widths are\n  // antialiased rather than snapped, which is what makes the line look lighter.\n  // `wrapperBorder` and the pinned-column boundary are left on the main stroke\n  // by the theme: those frame the table and separate its regions rather than\n  // dividing rows and columns.\n  rowBorder: THIN_TABLE_DIVIDER,\n  // Off: ag-Grid draws this one both under the header and between the title\n  // row and the filter row, and the design has no line between those two. The\n  // line under the header is drawn at 1px in `styles/grid.scss`.\n  headerRowBorder: false,\n  headerColumnBorder: THIN_TABLE_DIVIDER,\n  // The design's header divider is a short 12px mark centred in the cell, not\n  // the 20px (half the row) ag-Grid draws by default.\n  headerColumnBorderHeight: 12,\n  chromeBackgroundColor: 'var(--bg-layer-base, #F5F7FA)',\n  headerBackgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  foregroundColor: 'var(--text-primary, #161B2D)',\n  headerTextColor: 'var(--text-secondary, #57647A)',\n  // 1.0 asked the browser for dark native widgets while painting a light\n  // theme; the scheme now matches the palette it is used with.\n  browserColorScheme: 'light',\n  headerFontSize: 14,\n  headerFontWeight: 600,\n  fontSize: 14,\n  fontFamily: 'var(--theme-font, var(--font-inter))',\n  spacing: 4,\n  borderRadius: 4,\n  // Search fields in the header and filter popups: `rounded-lg`.\n  inputBorderRadius: 8,\n  wrapperBorderRadius: 8,\n}"
+      "signature": "GRID_THEME_PARAMS = {\n  accentColor: 'var(--bg-control-accent, #1D4ED8)',\n  backgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  oddRowBackgroundColor: 'var(--bg-layer-sunken, #EEF1F7)',\n  selectedRowBackgroundColor:\n    'var(--bg-control-accent-alpha-active-subtle, #2764D914)',\n  rowHoverColor: 'var(--bg-control-accent-alpha-hover-subtle, #2764D90A)',\n  borderColor: 'var(--stroke-tertiary, #E0E6F0)',\n  // Dividers inside the table sit on the thin stroke (0.5px) rather than the\n  // 1px main stroke that controls and standalone dividers use, so a dense grid\n  // reads as rows of data instead of a set of boxes. Sub-pixel widths are\n  // antialiased rather than snapped, which is what makes the line look lighter.\n  // `wrapperBorder` and the pinned-column boundary are left on the main stroke\n  // by the theme: those frame the table and separate its regions rather than\n  // dividing rows and columns.\n  rowBorder: THIN_TABLE_DIVIDER,\n  // Off: ag-Grid draws this one both under the header and between the title\n  // row and the filter row, and the design has no line between those two. The\n  // line under the header is drawn at 1px in `styles/grid.scss`.\n  headerRowBorder: false,\n  headerColumnBorder: THIN_TABLE_DIVIDER,\n  // The design's header divider is a short 12px mark centred in the cell, not\n  // the 20px (half the row) ag-Grid draws by default.\n  headerColumnBorderHeight: 12,\n  chromeBackgroundColor: 'var(--bg-layer-base, #F5F7FA)',\n  headerBackgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  foregroundColor: 'var(--text-primary, #161B2D)',\n  headerTextColor: 'var(--text-secondary, #57647A)',\n  // Native form controls inside the grid, including the date filter's\n  // calendar, follow this value. The light default matches the token\n  // fallbacks. `Grid` sets it again after this object is spread, because a\n  // dark `colorScheme` has to replace this light value or the browser keeps\n  // painting those controls light.\n  browserColorScheme: 'light',\n  headerFontSize: 14,\n  headerFontWeight: 600,\n  fontSize: 14,\n  fontFamily: 'var(--theme-font, var(--font-inter))',\n  spacing: 4,\n  borderRadius: 4,\n  // Search fields in the header and filter popups: `rounded-lg`.\n  inputBorderRadius: 8,\n  wrapperBorderRadius: 8,\n}"
     },
     {
       "name": "GRID_ROW_HEIGHT",