@epam/ai-dial-ui-kit 0.16.0-dev.49 → 0.16.0-dev.50

package/dist/components/New/Grid/Grid.js

@@ -1,172 +1,176 @@
 import { jsx as o } from "react/jsx-runtime";
-import { themeBalham as Ae, colorSchemeDark as De, colorSchemeLight as Ge } from "../../../node_modules/ag-grid-community/dist/package/main.esm.js";
-import { AgGridReact as Le } from "../../../node_modules/ag-grid-react/dist/package/index.esm.js";
-import { IconZoomCancel as be } from "@tabler/icons-react";
-import { useState as we, useRef as b, useId as Oe, useCallback as s, useMemo as m, useEffect as g } from "react";
-import { useIsMobileScreen as ye } from "../../../hooks/use-is-mobile-screen.js";
+import { themeBalham as Te, colorSchemeDark as Ge, colorSchemeLight as Le } from "../../../node_modules/ag-grid-community/dist/package/main.esm.js";
+import { AgGridReact as be } from "../../../node_modules/ag-grid-react/dist/package/index.esm.js";
+import { IconZoomCancel as we } from "@tabler/icons-react";
+import { useState as Oe, useRef as b, useId as ye, useCallback as s, useMemo as m, useEffect as _ } from "react";
+import { useIsMobileScreen as He } from "../../../hooks/use-is-mobile-screen.js";
 import { useIsTabletScreen as ve } from "../../../hooks/use-is-tablet-screen.js";
-import { GridSelectionMode as Y } from "../../../models/selection-mode.js";
-import { DropdownTrigger as He } from "../../../types/dropdown.js";
-import { GridAppearance as ee, GridColorScheme as re } from "../../../types/grid.js";
+import { GridSelectionMode as ee } from "../../../models/selection-mode.js";
+import { DropdownTrigger as xe } from "../../../types/dropdown.js";
+import { GridAppearance as re, GridColorScheme as te } from "../../../types/grid.js";
 import { debounceFn as ke } from "../../../utils/debounce.js";
-import { baseColumnComparator as xe, omitUndefined as We } from "../../../utils/grid-comparators.js";
-import { registerAgGridModulesOnce as ze } from "../../../utils/grid-registration.js";
-import { mergeClasses as te } from "../../../utils/merge-classes.js";
-import { Dropdown as Pe } from "../Dropdown/Dropdown.js";
+import { baseColumnComparator as We, omitUndefined as ze } from "../../../utils/grid-comparators.js";
+import { registerAgGridModulesOnce as Pe } from "../../../utils/grid-registration.js";
+import { mergeClasses as w } from "../../../utils/merge-classes.js";
+import { Dropdown as Ue } from "../Dropdown/Dropdown.js";
 import { EllipsisTooltip as Fe } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { NoDataContent as Ue } from "../NoDataContent/NoDataContent.js";
+import { NoDataContent as Me } from "../NoDataContent/NoDataContent.js";
 import { SelectionCell as Be } from "./components/SelectionCell.js";
-import { SelectionHeader as Me } from "./components/SelectionHeader.js";
-import { GRID_THEME_PARAMS as w, SelectionEventSourceType as S, GRID_ROW_SELECT_CLASS as Ve, GRID_HEADER_SELECT_CLASS as je, ROW_HEIGHT as oe, GRID_CHAT_CLASS as Je, GRID_WITHOUT_HEADER_BORDERS_CLASS as Ze, GRID_SELECTION_VISIBLE_CLASS as $e, GRID_WITH_SELECTION_CLASS as qe, GRID_ROOT_CLASS as Ke } from "./constants.js";
+import { SelectionHeader as Ve } from "./components/SelectionHeader.js";
+import { GRID_THEME_PARAMS as O, SelectionEventSourceType as p, GRID_ROW_SELECT_CLASS as je, GRID_HEADER_SELECT_CLASS as Je, ROW_HEIGHT as oe, GRID_CHAT_CLASS as Ye, GRID_WITHOUT_HEADER_BORDERS_CLASS as Ze, GRID_SELECTION_VISIBLE_CLASS as $e, GRID_WITH_SELECTION_CLASS as qe, GRID_ROOT_CLASS as Ke } from "./constants.js";
 import { SELECTION_COL_DEF as Qe } from "./renderers/constants.js";
-const Xe = "dial-kit-grid-selection", Ye = 150, er = 100, Nr = ({
-  columnDefs: _,
-  rowData: c,
-  additionalGridOptions: O,
+const Xe = "dial-kit-grid-selection", er = 150, rr = 100, tr = ["rightAligned", "numericColumn"], ne = (f) => [f?.type ?? []].flat().some((a) => tr.includes(a)), Ar = ({
+  columnDefs: f,
+  rowData: a,
+  additionalGridOptions: y,
   getContextMenuItems: N,
-  className: ne,
-  ariaLabel: ie = "Data grid",
+  className: ie,
+  ariaLabel: se = "Data grid",
   wrapCustomCellRenderers: I = !0,
-  disabledRowIds: p,
-  selectedRowIds: l,
-  onSelectionChange: y,
-  onGridApiChange: se,
+  disabledRowIds: C,
+  selectedRowIds: c,
+  onSelectionChange: H,
+  onGridApiChange: ae,
   getRowId: v,
-  alternateOddRowColors: H = !1,
+  alternateOddRowColors: x = !1,
   filterPlaceholder: k = "Enter value",
-  emptyStateIcon: x,
-  emptyStateTitle: W = "No results found",
-  emptyStateDescription: z = "Sorry, we couldn't find any results for your search.",
-  loading: P = !1,
+  emptyStateIcon: W,
+  emptyStateTitle: z = "No results found",
+  emptyStateDescription: P = "Sorry, we couldn't find any results for your search.",
+  loading: U = !1,
   wrapperBorder: F = !0,
-  withoutHeaderBorders: ae = !1,
-  allowDisabledContextMenu: U = !1,
+  withoutHeaderBorders: le = !1,
+  allowDisabledContextMenu: M = !1,
   selectionMode: n,
   selectRowLabel: B,
-  selectAllLabel: M = "Select all rows",
-  colorScheme: T = re.Light,
-  appearance: le = ee.Default
+  selectAllLabel: V = "Select all rows",
+  colorScheme: A = te.Light,
+  appearance: ce = re.Default
 }) => {
-  ze();
-  const [t, ce] = we(), de = ye(), ue = ve(), A = b(/* @__PURE__ */ new Set()), V = b(
+  Pe();
+  const [t, de] = Oe(), ue = He(), me = ve(), D = b(/* @__PURE__ */ new Set()), j = b(
     void 0
-  ), j = `dial-kit-grid-selection-${Oe()}`, d = b({
+  ), J = `dial-kit-grid-selection-${ye()}`, d = b({
     getRowId: v,
     getContextMenuItems: N,
-    onSelectionChange: y,
+    onSelectionChange: H,
     selectRowLabel: B,
     wrapCustomCellRenderers: I
   });
   d.current = {
     getRowId: v,
     getContextMenuItems: N,
-    onSelectionChange: y,
+    onSelectionChange: H,
     selectRowLabel: B,
     wrapCustomCellRenderers: I
   };
-  const a = s((e) => {
+  const l = s((e) => {
     const r = d.current.getRowId;
     return r ? r(e) : String(e.id ?? JSON.stringify(e));
-  }, []), J = !!N, Z = !!I, D = le === ee.Chat, me = m(
-    () => Ae.withPart(
-      T === re.Dark ? De : Ge
+  }, []), Y = !!N, Z = !!I, T = ce === re.Chat, fe = m(
+    () => Te.withPart(
+      A === te.Dark ? Ge : Le
     ).withParams({
-      ...w,
+      ...O,
       // The shared params pin `browserColorScheme` to light and are applied
       // after the part, so the chosen scheme is set again here.
-      browserColorScheme: T,
-      oddRowBackgroundColor: H ? w.oddRowBackgroundColor : w.backgroundColor,
+      browserColorScheme: A,
+      oddRowBackgroundColor: x ? O.oddRowBackgroundColor : O.backgroundColor,
       // The Chat table is a borderless card whose row dividers stop at the
       // cell padding, so `styles/grid.scss` draws them instead. Its header
       // and row cells take 12px on each side, not Balham's 8px.
-      ...D ? {
+      ...T ? {
         wrapperBorder: !1,
         rowBorder: !1,
         cellHorizontalPadding: 12
       } : { wrapperBorder: F }
     }),
-    [H, T, F, D]
-  ), fe = s((e) => {
+    [x, A, F, T]
+  ), Se = s((e) => {
     e.api.sizeColumnsToFit();
-  }, []), Se = de || ue || (l?.size ?? 0) > 0, u = s(
-    (e) => !!e && !!p?.has(a(e)),
-    [p, a]
-  ), C = s(
-    (e, r, i) => J ? /* @__PURE__ */ o(
-      Pe,
+  }, []), pe = ue || me || (c?.size ?? 0) > 0, u = s(
+    (e) => !!e && !!C?.has(l(e)),
+    [C, l]
+  ), h = s(
+    (e, r, i) => Y ? /* @__PURE__ */ o(
+      Ue,
       {
-        trigger: [He.ContextMenu],
+        trigger: [xe.ContextMenu],
         items: e.data ? d.current.getContextMenuItems?.(e.data) ?? [] : [],
         anchorToMouse: !0,
         matchReferenceWidth: !0,
-        className: te(
+        className: w(
           "size-full",
-          i && "cursor-not-allowed opacity-75"
+          i && "cursor-not-allowed opacity-75",
+          ne(e.colDef) && "text-end"
         ),
-        disabled: i && !U,
+        disabled: i && !M,
         children: /* @__PURE__ */ o("span", { className: "block min-w-0 max-w-full flex-1", children: r })
       }
     ) : r,
-    [J, U]
+    [Y, M]
   ), G = s(
     (e) => {
       if (!e.data) return null;
       const r = u(e.data);
-      return C(
+      return h(
         e,
         /* @__PURE__ */ o(
           Fe,
           {
             text: e.value == null ? "" : String(e.value),
-            className: "max-w-full dial-small-text text-primary",
+            className: w(
+              "max-w-full dial-small-text text-primary",
+              ne(e.colDef) && "text-end"
+            ),
             hideTooltip: r
           }
         ),
         r
       );
     },
-    [u, C]
-  ), h = s(
-    (e) => e === S.API || e === S.ROW_DATA_CHANGED,
+    [u, h]
+  ), R = s(
+    (e) => e === p.API || e === p.ROW_DATA_CHANGED,
     []
-  ), pe = m(
+  ), Ce = m(
     () => ke((e) => {
-      const i = (e.selectedNodes ?? []).map((Q) => Q.data), f = new Set(i.map(a));
-      A.current = f, V.current = e.source, !h(e.source) && d.current.onSelectionChange?.(f, i);
-    }, er),
-    [h, a]
+      const i = (e.selectedNodes ?? []).map((Q) => Q.data), S = new Set(i.map(l));
+      D.current = S, j.current = e.source, !R(e.source) && d.current.onSelectionChange?.(S, i);
+    }, rr),
+    [R, l]
   ), L = m(() => {
     if (n)
       return {
         ...Qe,
         colId: Xe,
         headerName: "",
-        headerClass: je,
-        cellClass: Ve,
-        headerComponent: n === Y.MULTIPLE ? Me : void 0,
-        headerComponentParams: { label: M },
+        headerClass: Je,
+        cellClass: je,
+        headerComponent: n === ee.MULTIPLE ? Ve : void 0,
+        headerComponentParams: { label: V },
         cellRenderer: (e) => {
           if (!e.data) return null;
-          const r = a(e.data);
+          const r = l(e.data);
           return /* @__PURE__ */ o(
             Be,
             {
               params: e,
               mode: n,
               rowId: r,
-              radioName: j,
+              radioName: J,
               label: d.current.selectRowLabel?.(e.data) ?? "Select row",
-              disabled: p?.has(r)
+              disabled: C?.has(r)
             }
           );
         }
       };
   }, [
     n,
-    M,
-    a,
-    p,
-    j
+    V,
+    l,
+    C,
+    J
   ]), $ = s(
     (e) => {
       if (!e.cellRenderer)
@@ -174,23 +178,23 @@ const Xe = "dial-kit-grid-selection", Ye = 150, er = 100, Nr = ({
       const r = d.current.wrapCustomCellRenderers;
       if (!(typeof r == "function" ? r(e) : !!r))
         return e;
-      const f = e.cellRenderer;
+      const S = e.cellRenderer;
       return { ...e, cellRenderer: (E) => {
-        const Ie = u(E.data), X = typeof f == "function" ? f : void 0, Te = X ? /* @__PURE__ */ o(X, { ...E }) : G(E);
-        return C(E, Te, Ie);
+        const Ae = u(E.data), X = typeof S == "function" ? S : void 0, De = X ? /* @__PURE__ */ o(X, { ...E }) : G(E);
+        return h(E, De, Ae);
       } };
     },
-    [u, G, C]
-  ), Ce = m(() => {
-    const e = Z ? (_ ?? []).map($) : _ ?? [];
+    [u, G, h]
+  ), he = m(() => {
+    const e = Z ? (f ?? []).map($) : f ?? [];
     return L ? [L, ...e] : e;
-  }, [_, Z, $, L]), {
+  }, [f, Z, $, L]), {
     defaultColDef: q,
-    rowSelection: R,
-    ...he
-  } = O ?? {}, Re = m(
+    rowSelection: g,
+    ...Re
+  } = y ?? {}, ge = m(
     () => ({
-      minWidth: Ye,
+      minWidth: er,
       resizable: !0,
       sortable: !0,
       floatingFilter: !0,
@@ -199,28 +203,28 @@ const Xe = "dial-kit-grid-selection", Ye = 150, er = 100, Nr = ({
         filterPlaceholder: k,
         buttons: ["reset"]
       },
-      comparator: xe,
-      ...We(q)
+      comparator: We,
+      ...ze(q)
     }),
     [k, q]
   ), Ee = (e) => {
-    e.api.sizeColumnsToFit(), ce(e.api), O?.onGridReady?.(e), se?.(e.api);
+    e.api.sizeColumnsToFit(), de(e.api), y?.onGridReady?.(e), ae?.(e.api);
   };
-  g(() => {
-    t && c && t.setGridOption("rowData", c);
-  }, [t, c]);
-  const ge = s(
+  _(() => {
+    t && a && t.setGridOption("rowData", a);
+  }, [t, a]);
+  const _e = s(
     () => /* @__PURE__ */ o(
-      Ue,
+      Me,
       {
         live: !0,
-        title: W,
-        description: z,
-        icon: x ?? /* @__PURE__ */ o(be, { size: 100, stroke: 0.5, "aria-hidden": "true" })
+        title: z,
+        description: P,
+        icon: W ?? /* @__PURE__ */ o(we, { size: 100, stroke: 0.5, "aria-hidden": "true" })
       }
     ),
-    [W, z, x]
-  ), K = typeof R == "object" ? R : void 0, _e = m(() => n ? {
+    [z, P, W]
+  ), K = typeof g == "object" ? g : void 0, Ne = m(() => n ? {
     isRowSelectable: (e) => !u(e.data),
     /*
       Merged, not replaced, the way `defaultColDef` is: a consumer reaching
@@ -232,80 +236,80 @@ const Xe = "dial-kit-grid-selection", Ye = 150, er = 100, Nr = ({
       `selectionMode` owns the mode, because it also decides whether the
       selection column draws checkboxes or radios.
     */
-    mode: n === Y.SINGLE ? "singleRow" : "multiRow",
+    mode: n === ee.SINGLE ? "singleRow" : "multiRow",
     // The controls live in this component's own selection column, so
     // ag-Grid's inputs are switched off and only its behaviour is used.
     checkboxes: !1,
     headerCheckbox: !1
-  } : R, [
-    R,
+  } : g, [
+    g,
     K,
     u,
     n
   ]);
-  g(() => {
-    t && c && A.current.size && A.current.forEach((e) => {
+  _(() => {
+    t && a && D.current.size && D.current.forEach((e) => {
       const r = t.getRowNode(e);
-      r && !r.isSelected() && r.setSelected(!0, !1, S.API);
+      r && !r.isSelected() && r.setSelected(!0, !1, p.API);
     });
-  }, [t, c]), g(() => {
-    t && l && (t.deselectAll("all", S.API), l.forEach((e) => {
+  }, [t, a]), _(() => {
+    t && c && (t.deselectAll("all", p.API), c.forEach((e) => {
       const r = t.getRowNode(e);
-      r && !r.isSelected() && r.setSelected(!0, !1, S.API);
+      r && !r.isSelected() && r.setSelected(!0, !1, p.API);
     }));
-  }, [t, l]);
-  const Ne = s(
-    (e) => e.data ? a(e.data) : "",
-    [a]
+  }, [t, c]);
+  const Ie = s(
+    (e) => e.data ? l(e.data) : "",
+    [l]
   );
-  return g(() => {
-    const e = h(
-      V.current
+  return _(() => {
+    const e = R(
+      j.current
     );
-    if (t && l?.size && e) {
-      const r = Array.from(l)[0];
+    if (t && c?.size && e) {
+      const r = Array.from(c)[0];
       if (r) {
         const i = t.getRowNode(r);
         i && t.ensureNodeVisible(i);
       }
     }
-  }, [t, h, l]), /* @__PURE__ */ o(
+  }, [t, R, c]), /* @__PURE__ */ o(
     "div",
     {
-      className: te(
+      className: w(
         Ke,
         "size-full",
         n && qe,
-        n && Se && $e,
-        ae && Ze,
-        D && Je,
-        ne
+        n && pe && $e,
+        le && Ze,
+        T && Ye,
+        ie
       ),
       role: "region",
-      "aria-label": ie,
-      "aria-busy": P,
+      "aria-label": se,
+      "aria-busy": U,
       children: /* @__PURE__ */ o("div", { className: "h-full overflow-x-auto", children: /* @__PURE__ */ o(
-        Le,
+        be,
         {
           rowModelType: "clientSide",
           headerHeight: oe,
           rowHeight: oe,
           cellSelection: !1,
-          theme: me,
+          theme: fe,
           autoSizeStrategy: { type: "fitGridWidth" },
-          columnDefs: Ce,
-          defaultColDef: Re,
-          onGridSizeChanged: fe,
+          columnDefs: he,
+          defaultColDef: ge,
+          onGridSizeChanged: Se,
           onGridReady: Ee,
-          loading: P,
+          loading: U,
           suppressCellFocus: !0,
           suppressDragLeaveHidesColumns: !0,
-          noRowsOverlayComponent: ge,
-          rowData: c,
-          rowSelection: _e,
-          onSelectionChanged: pe,
-          getRowId: Ne,
-          ...he
+          noRowsOverlayComponent: _e,
+          rowData: a,
+          rowSelection: Ne,
+          onSelectionChanged: Ce,
+          getRowId: Ie,
+          ...Re
         }
       ) })
     }
@@ -313,5 +317,5 @@ const Xe = "dial-kit-grid-selection", Ye = 150, er = 100, Nr = ({
 };
 export {
   Xe as GRID_SELECTION_COLUMN_ID,
-  Nr as Grid
+  Ar as Grid
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.49",
-  "generatedAt": "2026-10-27T09:16:10.434Z",
+  "version": "0.16.0-dev.50",
+  "generatedAt": "2026-10-27T10:32:17.686Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",