@epam/ai-dial-ui-kit 0.16.0-dev.68 → 0.16.0-dev.69

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

@@ -1,127 +1,130 @@
-import { jsx as o } from "react/jsx-runtime";
-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 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 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 Me } from "../NoDataContent/NoDataContent.js";
-import { SelectionCell as Be } from "./components/SelectionCell.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", er = 150, rr = 100, tr = ["rightAligned", "numericColumn"], ne = (f) => [f?.type ?? []].flat().some((a) => tr.includes(a)), Ar = ({
+import { jsx as l } from "react/jsx-runtime";
+import { themeBalham as we, colorSchemeDark as Oe, colorSchemeLight as ve } from "../../../node_modules/ag-grid-community/dist/package/main.esm.js";
+import { AgGridReact as ye } from "../../../node_modules/ag-grid-react/dist/package/index.esm.js";
+import { useState as He, useRef as w, useId as xe, useCallback as a, useMemo as d, useEffect as _ } from "react";
+import { useIsMobileScreen as Pe } from "../../../hooks/use-is-mobile-screen.js";
+import { useIsTabletScreen as ke } from "../../../hooks/use-is-tablet-screen.js";
+import { GridSelectionMode as ne } from "../../../models/selection-mode.js";
+import { DropdownTrigger as We } from "../../../types/dropdown.js";
+import { GridAppearance as ie, GridColorScheme as se } from "../../../types/grid.js";
+import { debounceFn as ze } from "../../../utils/debounce.js";
+import { baseColumnComparator as Ue, omitUndefined as Fe } from "../../../utils/grid-comparators.js";
+import { registerAgGridModulesOnce as Me } from "../../../utils/grid-registration.js";
+import { mergeClasses as O } from "../../../utils/merge-classes.js";
+import { Dropdown as Be } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as Ve } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { selectGridEmptyStateOverlay as je } from "./components/GridEmptyState.js";
+import { SelectionCell as Je } from "./components/SelectionCell.js";
+import { SelectionHeader as Ye } from "./components/SelectionHeader.js";
+import { GRID_THEME_PARAMS as v, SelectionEventSourceType as p, GRID_ROW_SELECT_CLASS as $e, GRID_HEADER_SELECT_CLASS as qe, ROW_HEIGHT as le, GRID_CHAT_CLASS as Ke, GRID_WITHOUT_HEADER_BORDERS_CLASS as Qe, GRID_SELECTION_VISIBLE_CLASS as Xe, GRID_WITH_SELECTION_CLASS as Ze, GRID_ROOT_CLASS as er } from "./constants.js";
+import { SELECTION_COL_DEF as rr } from "./renderers/constants.js";
+const tr = "dial-kit-grid-selection", or = 150, nr = 100, ir = ["rightAligned", "numericColumn"], ae = (f) => [f?.type ?? []].flat().some((i) => ir.includes(i)), Ar = ({
   columnDefs: f,
-  rowData: a,
+  rowData: i,
   additionalGridOptions: y,
   getContextMenuItems: N,
-  className: ie,
-  ariaLabel: se = "Data grid",
-  wrapCustomCellRenderers: I = !0,
+  className: ce,
+  ariaLabel: de = "Data grid",
+  wrapCustomCellRenderers: G = !0,
   disabledRowIds: C,
   selectedRowIds: c,
   onSelectionChange: H,
-  onGridApiChange: ae,
-  getRowId: v,
-  alternateOddRowColors: x = !1,
+  onGridApiChange: ue,
+  getRowId: x,
+  alternateOddRowColors: P = !1,
   filterPlaceholder: k = "Enter value",
-  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: le = !1,
-  allowDisabledContextMenu: M = !1,
-  selectionMode: n,
-  selectRowLabel: B,
-  selectAllLabel: V = "Select all rows",
-  colorScheme: A = te.Light,
-  appearance: ce = re.Default
+  emptyStateIcon: I,
+  emptyStateTitle: W = "No items yet",
+  emptyStateDescription: z = "Items will appear here once they are added.",
+  emptyStateAction: U,
+  emptyStateLive: F = !1,
+  filteredEmptyStateTitle: M = "No items found",
+  filteredEmptyStateDescription: B = "Try a different search term or check your filters.",
+  loading: V = !1,
+  wrapperBorder: j = !0,
+  withoutHeaderBorders: me = !1,
+  allowDisabledContextMenu: J = !1,
+  selectionMode: o,
+  selectRowLabel: Y,
+  selectAllLabel: $ = "Select all rows",
+  colorScheme: T = se.Light,
+  appearance: fe = ie.Default
 }) => {
-  Pe();
-  const [t, de] = Oe(), ue = He(), me = ve(), D = b(/* @__PURE__ */ new Set()), j = b(
+  Me();
+  const [t, Se] = He(), pe = Pe(), Ce = ke(), A = w(/* @__PURE__ */ new Set()), q = w(
     void 0
-  ), J = `dial-kit-grid-selection-${ye()}`, d = b({
-    getRowId: v,
+  ), K = `dial-kit-grid-selection-${xe()}`, u = w({
+    getRowId: x,
     getContextMenuItems: N,
     onSelectionChange: H,
-    selectRowLabel: B,
-    wrapCustomCellRenderers: I
+    selectRowLabel: Y,
+    wrapCustomCellRenderers: G
   });
-  d.current = {
-    getRowId: v,
+  u.current = {
+    getRowId: x,
     getContextMenuItems: N,
     onSelectionChange: H,
-    selectRowLabel: B,
-    wrapCustomCellRenderers: I
+    selectRowLabel: Y,
+    wrapCustomCellRenderers: G
   };
-  const l = s((e) => {
-    const r = d.current.getRowId;
+  const s = a((e) => {
+    const r = u.current.getRowId;
     return r ? r(e) : String(e.id ?? JSON.stringify(e));
-  }, []), Y = !!N, Z = !!I, T = ce === re.Chat, fe = m(
-    () => Te.withPart(
-      A === te.Dark ? Ge : Le
+  }, []), Q = !!N, X = !!G, D = fe === ie.Chat, he = d(
+    () => we.withPart(
+      T === se.Dark ? Oe : ve
     ).withParams({
-      ...O,
+      ...v,
       // The shared params pin `browserColorScheme` to light and are applied
       // after the part, so the chosen scheme is set again here.
-      browserColorScheme: A,
-      oddRowBackgroundColor: x ? O.oddRowBackgroundColor : O.backgroundColor,
+      browserColorScheme: T,
+      oddRowBackgroundColor: P ? v.oddRowBackgroundColor : v.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.
-      ...T ? {
+      ...D ? {
         wrapperBorder: !1,
         rowBorder: !1,
         cellHorizontalPadding: 12
-      } : { wrapperBorder: F }
+      } : { wrapperBorder: j }
     }),
-    [x, A, F, T]
-  ), Se = s((e) => {
+    [P, T, j, D]
+  ), Re = a((e) => {
     e.api.sizeColumnsToFit();
-  }, []), 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,
+  }, []), ge = pe || Ce || (c?.size ?? 0) > 0, m = a(
+    (e) => !!e && !!C?.has(s(e)),
+    [C, s]
+  ), h = a(
+    (e, r, n) => Q ? /* @__PURE__ */ l(
+      Be,
       {
-        trigger: [xe.ContextMenu],
-        items: e.data ? d.current.getContextMenuItems?.(e.data) ?? [] : [],
+        trigger: [We.ContextMenu],
+        items: e.data ? u.current.getContextMenuItems?.(e.data) ?? [] : [],
         anchorToMouse: !0,
         matchReferenceWidth: !0,
-        className: w(
+        className: O(
           "size-full",
-          i && "cursor-not-allowed opacity-75",
-          ne(e.colDef) && "text-end"
+          n && "cursor-not-allowed opacity-75",
+          ae(e.colDef) && "text-end"
         ),
-        disabled: i && !M,
-        children: /* @__PURE__ */ o("span", { className: "block min-w-0 max-w-full flex-1", children: r })
+        disabled: n && !J,
+        children: /* @__PURE__ */ l("span", { className: "block min-w-0 max-w-full flex-1", children: r })
       }
     ) : r,
-    [Y, M]
-  ), G = s(
+    [Q, J]
+  ), L = a(
     (e) => {
       if (!e.data) return null;
-      const r = u(e.data);
+      const r = m(e.data);
       return h(
         e,
-        /* @__PURE__ */ o(
-          Fe,
+        /* @__PURE__ */ l(
+          Ve,
           {
             text: e.value == null ? "" : String(e.value),
-            className: w(
+            className: O(
               "max-w-full dial-small-text text-primary",
-              ne(e.colDef) && "text-end"
+              ae(e.colDef) && "text-end"
             ),
             hideTooltip: r
           }
@@ -129,72 +132,72 @@ const Xe = "dial-kit-grid-selection", er = 150, rr = 100, tr = ["rightAligned",
         r
       );
     },
-    [u, h]
-  ), R = s(
+    [m, h]
+  ), R = a(
     (e) => e === p.API || e === p.ROW_DATA_CHANGED,
     []
-  ), Ce = m(
-    () => ke((e) => {
-      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)
+  ), Ee = d(
+    () => ze((e) => {
+      const n = (e.selectedNodes ?? []).map((te) => te.data), S = new Set(n.map(s));
+      A.current = S, q.current = e.source, !R(e.source) && u.current.onSelectionChange?.(S, n);
+    }, nr),
+    [R, s]
+  ), b = d(() => {
+    if (o)
       return {
-        ...Qe,
-        colId: Xe,
+        ...rr,
+        colId: tr,
         headerName: "",
-        headerClass: Je,
-        cellClass: je,
-        headerComponent: n === ee.MULTIPLE ? Ve : void 0,
-        headerComponentParams: { label: V },
+        headerClass: qe,
+        cellClass: $e,
+        headerComponent: o === ne.MULTIPLE ? Ye : void 0,
+        headerComponentParams: { label: $ },
         cellRenderer: (e) => {
           if (!e.data) return null;
-          const r = l(e.data);
-          return /* @__PURE__ */ o(
-            Be,
+          const r = s(e.data);
+          return /* @__PURE__ */ l(
+            Je,
             {
               params: e,
-              mode: n,
+              mode: o,
               rowId: r,
-              radioName: J,
-              label: d.current.selectRowLabel?.(e.data) ?? "Select row",
+              radioName: K,
+              label: u.current.selectRowLabel?.(e.data) ?? "Select row",
               disabled: C?.has(r)
             }
           );
         }
       };
   }, [
-    n,
-    V,
-    l,
+    o,
+    $,
+    s,
     C,
-    J
-  ]), $ = s(
+    K
+  ]), Z = a(
     (e) => {
       if (!e.cellRenderer)
-        return { ...e, cellRenderer: G };
-      const r = d.current.wrapCustomCellRenderers;
+        return { ...e, cellRenderer: L };
+      const r = u.current.wrapCustomCellRenderers;
       if (!(typeof r == "function" ? r(e) : !!r))
         return e;
       const S = e.cellRenderer;
       return { ...e, cellRenderer: (E) => {
-        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);
+        const Le = m(E.data), oe = typeof S == "function" ? S : void 0, be = oe ? /* @__PURE__ */ l(oe, { ...E }) : L(E);
+        return h(E, be, Le);
       } };
     },
-    [u, G, h]
-  ), he = m(() => {
-    const e = Z ? (f ?? []).map($) : f ?? [];
-    return L ? [L, ...e] : e;
-  }, [f, Z, $, L]), {
-    defaultColDef: q,
+    [m, L, h]
+  ), _e = d(() => {
+    const e = X ? (f ?? []).map(Z) : f ?? [];
+    return b ? [b, ...e] : e;
+  }, [f, X, Z, b]), {
+    defaultColDef: ee,
     rowSelection: g,
-    ...Re
-  } = y ?? {}, ge = m(
+    ...Ne
+  } = y ?? {}, Ge = d(
     () => ({
-      minWidth: er,
+      minWidth: or,
       resizable: !0,
       sortable: !0,
       floatingFilter: !0,
@@ -203,119 +206,135 @@ const Xe = "dial-kit-grid-selection", er = 150, rr = 100, tr = ["rightAligned",
         filterPlaceholder: k,
         buttons: ["reset"]
       },
-      comparator: We,
-      ...ze(q)
+      comparator: Ue,
+      ...Fe(ee)
     }),
-    [k, q]
-  ), Ee = (e) => {
-    e.api.sizeColumnsToFit(), de(e.api), y?.onGridReady?.(e), ae?.(e.api);
+    [k, ee]
+  ), Ie = (e) => {
+    e.api.sizeColumnsToFit(), Se(e.api), y?.onGridReady?.(e), ue?.(e.api);
   };
   _(() => {
-    t && a && t.setGridOption("rowData", a);
-  }, [t, a]);
-  const _e = s(
-    () => /* @__PURE__ */ o(
-      Me,
-      {
-        live: !0,
-        title: z,
-        description: P,
-        icon: W ?? /* @__PURE__ */ o(we, { size: 100, stroke: 0.5, "aria-hidden": "true" })
+    t && i && t.setGridOption("rowData", i);
+  }, [t, i]);
+  const Te = d(
+    () => ({
+      empty: {
+        title: W,
+        description: z,
+        icon: I,
+        action: U,
+        live: F
+      },
+      // The user has just changed a filter, so this one is always announced.
+      filtered: {
+        title: M,
+        description: B,
+        icon: I,
+        live: !0
       }
-    ),
-    [z, P, W]
-  ), K = typeof g == "object" ? g : void 0, Ne = m(() => n ? {
-    isRowSelectable: (e) => !u(e.data),
+    }),
+    [
+      W,
+      z,
+      I,
+      U,
+      F,
+      M,
+      B
+    ]
+  ), re = typeof g == "object" ? g : void 0, Ae = d(() => o ? {
+    isRowSelectable: (e) => !m(e.data),
     /*
       Merged, not replaced, the way `defaultColDef` is: a consumer reaching
       for `isRowSelectable` alone would otherwise hand ag-Grid a whole new
       object and lose the three settings below with it.
     */
-    ...K,
+    ...re,
     /*
       `selectionMode` owns the mode, because it also decides whether the
       selection column draws checkboxes or radios.
     */
-    mode: n === ee.SINGLE ? "singleRow" : "multiRow",
+    mode: o === ne.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
   } : g, [
     g,
-    K,
-    u,
-    n
+    re,
+    m,
+    o
   ]);
   _(() => {
-    t && a && D.current.size && D.current.forEach((e) => {
+    t && i && A.current.size && A.current.forEach((e) => {
       const r = t.getRowNode(e);
       r && !r.isSelected() && r.setSelected(!0, !1, p.API);
     });
-  }, [t, a]), _(() => {
+  }, [t, i]), _(() => {
     t && c && (t.deselectAll("all", p.API), c.forEach((e) => {
       const r = t.getRowNode(e);
       r && !r.isSelected() && r.setSelected(!0, !1, p.API);
     }));
   }, [t, c]);
-  const Ie = s(
-    (e) => e.data ? l(e.data) : "",
-    [l]
+  const De = a(
+    (e) => e.data ? s(e.data) : "",
+    [s]
   );
   return _(() => {
     const e = R(
-      j.current
+      q.current
     );
     if (t && c?.size && e) {
       const r = Array.from(c)[0];
       if (r) {
-        const i = t.getRowNode(r);
-        i && t.ensureNodeVisible(i);
+        const n = t.getRowNode(r);
+        n && t.ensureNodeVisible(n);
       }
     }
-  }, [t, R, c]), /* @__PURE__ */ o(
+  }, [t, R, c]), /* @__PURE__ */ l(
     "div",
     {
-      className: w(
-        Ke,
+      className: O(
+        er,
         "size-full",
-        n && qe,
-        n && pe && $e,
-        le && Ze,
-        T && Ye,
-        ie
+        o && Ze,
+        o && ge && Xe,
+        me && Qe,
+        D && Ke,
+        ce
       ),
       role: "region",
-      "aria-label": se,
-      "aria-busy": U,
-      children: /* @__PURE__ */ o("div", { className: "h-full overflow-x-auto", children: /* @__PURE__ */ o(
-        be,
+      "aria-label": de,
+      "aria-busy": V,
+      children: /* @__PURE__ */ l("div", { className: "h-full overflow-x-auto", children: /* @__PURE__ */ l(
+        ye,
         {
           rowModelType: "clientSide",
-          headerHeight: oe,
-          rowHeight: oe,
+          headerHeight: le,
+          rowHeight: le,
           cellSelection: !1,
-          theme: fe,
+          theme: he,
           autoSizeStrategy: { type: "fitGridWidth" },
-          columnDefs: he,
-          defaultColDef: ge,
-          onGridSizeChanged: Se,
-          onGridReady: Ee,
-          loading: U,
+          columnDefs: _e,
+          defaultColDef: Ge,
+          onGridSizeChanged: Re,
+          onGridReady: Ie,
+          loading: V,
           suppressCellFocus: !0,
           suppressDragLeaveHidesColumns: !0,
-          noRowsOverlayComponent: _e,
-          rowData: a,
-          rowSelection: Ne,
-          onSelectionChanged: Ce,
-          getRowId: Ie,
-          ...Re
+          overlayComponentSelector: je,
+          overlayComponentParams: Te,
+          rowData: i,
+          rowSelection: Ae,
+          onSelectionChanged: Ee,
+          getRowId: De,
+          ...Ne
         }
       ) })
     }
   );
 };
 export {
-  Xe as GRID_SELECTION_COLUMN_ID,
+  tr as GRID_SELECTION_COLUMN_ID,
   Ar as Grid
 };

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

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { NoDataContent as s } from "../../NoDataContent/NoDataContent.js";
+const c = ["noRows", "noMatchingRows"], i = ({
+  overlayType: o,
+  empty: t,
+  filtered: n
+}) => /* @__PURE__ */ e(s, { ...o === "noMatchingRows" ? n : t }), m = ({
+  overlayType: o
+}) => c.includes(o) ? { component: i } : void 0;
+export {
+  i as GridEmptyState,
+  m as selectGridEmptyStateOverlay
+};