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

package/dist/components/New/Select/Select.js

@@ -1,29 +1,29 @@
-import { jsx as l, jsxs as N, Fragment as Ve } from "react/jsx-runtime";
-import { IconChevronDown as qe } from "@tabler/icons-react";
-import { useId as Ge, useState as U, useCallback as m, useMemo as u, useEffect as He, useImperativeHandle as Qe, Fragment as We } from "react";
-import { Checkbox as Ze } from "../Checkbox/Checkbox.js";
-import { Dropdown as Je } from "../Dropdown/Dropdown.js";
-import { EllipsisTooltip as Re } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { InteractiveTooltip as Xe } from "../InteractiveTooltip/InteractiveTooltip.js";
-import { ErrorText as Ye, CaptionText as Pe } from "../CaptionText/CaptionText.js";
-import { GhostIconButton as el } from "../IconButton/IconButtonWrappers.js";
+import { jsx as l, jsxs as N, Fragment as Ge } from "react/jsx-runtime";
+import { IconChevronDown as He } from "@tabler/icons-react";
+import { useId as Qe, useState as U, useCallback as u, useMemo as h, useEffect as We, useImperativeHandle as Ze, Fragment as Je } from "react";
+import { Checkbox as Re } from "../Checkbox/Checkbox.js";
+import { Dropdown as Xe } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as Ye } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { InteractiveTooltip as Pe } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { ErrorText as el, CaptionText as ll } from "../CaptionText/CaptionText.js";
+import { GhostIconButton as tl } from "../IconButton/IconButtonWrappers.js";
 import { Input as se } from "../Input/Input.js";
-import { Label as ll } from "../Label/Label.js";
-import { NoDataContent as tl } from "../NoDataContent/NoDataContent.js";
-import { DIAL_KIT_ICON_STROKE as nl } from "../constants/icon.js";
+import { Label as nl } from "../Label/Label.js";
+import { NoDataContent as rl } from "../NoDataContent/NoDataContent.js";
+import { DIAL_KIT_ICON_STROKE as il } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as ce } from "../../../constants/icon.js";
 import { MenuItem as de } from "../MenuItem/MenuItem.js";
 import { MenuItemMark as V } from "../../../types/menu-item.js";
 import { ElementSize as D } from "../../../types/size.js";
-import { useIsMobileScreen as rl } from "../../../hooks/use-is-mobile-screen.js";
+import { useIsMobileScreen as al } from "../../../hooks/use-is-mobile-screen.js";
 import { resolveAccessibleName as fe } from "../../../utils/accessible-name.js";
 import { mergeClasses as p } from "../../../utils/merge-classes.js";
-import { CollapsedSelectTags as il } from "./CollapsedSelectTags.js";
-import { MultiSelectTags as al } from "./MultiSelectTags.js";
-import { SelectSubMenuItem as ol } from "./SelectSubMenuItem.js";
-import { selectFieldIconClassName as sl, selectListWidthClassName as cl, selectOverlayBaseClassName as dl, selectSearchThreshold as fl, selectSearchIcon as ml, selectCloseIcon as ul, selectOptionBaseClassName as hl, selectOptionsScrollClassName as pl } from "./constants.js";
-import { DIAL_KIT_CLASS as vl } from "../../../constants/public-class-names.js";
-const Vl = ({
+import { CollapsedSelectTags as ol } from "./CollapsedSelectTags.js";
+import { MultiSelectTags as sl } from "./MultiSelectTags.js";
+import { SelectSubMenuItem as cl } from "./SelectSubMenuItem.js";
+import { selectFieldIconClassName as dl, selectListWidthClassName as fl, selectOverlayBaseClassName as ml, selectSearchThreshold as ul, selectSearchIcon as hl, selectCloseIcon as pl, selectOptionBaseClassName as vl, selectOptionsScrollClassName as bl } from "./constants.js";
+import { DIAL_KIT_CLASS as Cl } from "../../../constants/public-class-names.js";
+const Gl = ({
   options: i,
   multiple: n = !1,
   id: me,
@@ -49,96 +49,98 @@ const Vl = ({
   emptyStateTitle: Ie = "No options available",
   emptyStateDescription: Ne,
   emptyStateIcon: Se,
+  filteredEmptyStateTitle: xe,
+  filteredEmptyStateDescription: we,
   disabled: b = !1,
-  className: xe,
-  fieldClassName: we,
-  listClassName: ye,
+  className: ye,
+  fieldClassName: Te,
+  listClassName: Ae,
   closable: L = !1,
   header: x,
   footer: w,
   onClose: Y,
   onChange: P,
-  dismissRef: Te,
+  dismissRef: ke,
   onFooterClick: ee,
   open: le,
   onOpenChange: te,
   onSearchQueryChange: ne,
   customMultiSelectTagsRenderer: $
 }) => {
-  const Ae = Ge(), c = me || Ae, re = `list-${c}`, ie = v ? `${c}-error` : void 0, ae = !v && Q ? `${c}-caption` : void 0, oe = q === D.Small, [ke, Oe] = U(!1), M = le !== void 0, f = M ? !!le : ke, d = m(
+  const Oe = Qe(), d = me || Oe, re = `list-${d}`, ie = v ? `${d}-error` : void 0, ae = !v && Q ? `${d}-caption` : void 0, oe = q === D.Small, [De, Fe] = U(!1), M = le !== void 0, m = M ? !!le : De, f = u(
     (e) => {
-      M || Oe(e), te?.(e);
+      M || Fe(e), te?.(e);
     },
     [M, te]
-  ), [h, De] = U(""), B = m(
+  ), [s, Le] = U(""), B = u(
     (e) => {
-      e !== h && (De(e || ""), ne?.(e || ""));
+      e !== s && (Le(e || ""), ne?.(e || ""));
     },
-    [ne, h]
-  ), E = F !== void 0, [Fe, Le] = U(ue), C = E ? F : Fe, r = u(() => n ? Array.isArray(C) ? C : [] : typeof C == "string" ? [C] : [], [C, n]), y = u(() => {
-    const e = h.trim().toLowerCase();
+    [ne, s]
+  ), E = F !== void 0, [$e, Me] = U(ue), C = E ? F : $e, r = h(() => n ? Array.isArray(C) ? C : [] : typeof C == "string" ? [C] : [], [C, n]), y = h(() => {
+    const e = s.trim().toLowerCase();
     return e ? i.filter((t) => t.label.toLowerCase().includes(e)) : i;
-  }, [i, h]);
-  He(() => {
-    f || B("");
-  }, [f, B]);
-  const s = m(
+  }, [i, s]);
+  We(() => {
+    m || B("");
+  }, [m, B]);
+  const c = u(
     (e) => {
-      E || Le(e), P?.(e);
+      E || Me(e), P?.(e);
     },
     [E, P]
-  ), _ = m(
+  ), _ = u(
     (e) => {
       if (n) {
         const t = new Set(r);
-        t.has(e) ? t.delete(e) : t.add(e), s(Array.from(t));
+        t.has(e) ? t.delete(e) : t.add(e), c(Array.from(t));
         return;
       }
-      s(e), d(!1);
+      c(e), f(!1);
     },
-    [n, s, d, r]
-  ), T = m(
+    [n, c, f, r]
+  ), T = u(
     (e, t) => {
       if (e.stopPropagation(), !n) {
-        s("");
+        c("");
         return;
       }
-      const O = r.filter((Ue) => Ue !== t);
-      s(O);
+      const O = r.filter((qe) => qe !== t);
+      c(O);
     },
-    [n, r, s]
-  ), o = u(
+    [n, r, c]
+  ), o = h(
     () => y.filter((e) => !e.disabled),
     [y]
-  ), j = u(
+  ), j = h(
     () => o.filter((e) => r.includes(e.value)).length,
     [o, r]
-  ), { allSelectedInFiltered: K, someSelectedInFiltered: $e } = u(() => {
+  ), { allSelectedInFiltered: K, someSelectedInFiltered: Be } = h(() => {
     const e = o.length > 0 && j === o.length;
     return {
       allSelectedInFiltered: e,
       someSelectedInFiltered: j > 0 && !e
     };
-  }, [o, j]), Me = m(() => {
+  }, [o, j]), Ee = u(() => {
     if (!(!n || o.length === 0))
       if (K) {
         const e = new Set(o.map((t) => t.value));
-        s(r.filter((t) => !e.has(t)));
+        c(r.filter((t) => !e.has(t)));
       } else {
         const e = new Set(r);
-        o.forEach((t) => e.add(t.value)), s(Array.from(e));
+        o.forEach((t) => e.add(t.value)), c(Array.from(e));
       }
   }, [
     K,
     n,
     o,
     r,
-    s
-  ]), A = r.length > 0, k = !n && A ? r[0] : void 0, a = u(
+    c
+  ]), A = r.length > 0, k = !n && A ? r[0] : void 0, a = h(
     () => k ? i.find((e) => e.value === k) ?? i.flatMap((e) => e.children ?? []).find((e) => e.value === k) : void 0,
     [i, k]
-  ), g = a ? G ? `${G} ${a.label}` : a.label : void 0, Be = rl(), z = n && ge && !$ && !Be, I = u(() => n ? A ? z ? /* @__PURE__ */ l(
-    il,
+  ), g = a ? G ? `${G} ${a.label}` : a.label : void 0, _e = al(), z = n && ge && !$ && !_e, I = h(() => n ? A ? z ? /* @__PURE__ */ l(
+    ol,
     {
       options: i,
       selectedValues: r,
@@ -149,7 +151,7 @@ const Vl = ({
     r,
     T
   ) ?? /* @__PURE__ */ l(
-    al,
+    sl,
     {
       options: i,
       selectedValues: r,
@@ -157,7 +159,7 @@ const Vl = ({
     }
   ) }) : null : !a || !a.labelNode && !a.description ? null : /* @__PURE__ */ N("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
     /* @__PURE__ */ l(
-      Re,
+      Ye,
       {
         text: a.labelNode ?? g
       }
@@ -173,78 +175,79 @@ const Vl = ({
     g,
     r,
     a
-  ]), Ee = n || I ? "" : g || (H && F ? H : ""), _e = typeof S?.label == "string" ? S.label : void 0, je = I ? [
-    fe(W, _e),
+  ]), je = n || I ? "" : g || (H && F ? H : ""), Ke = typeof S?.label == "string" ? S.label : void 0, ze = I ? [
+    fe(W, Ke),
     n ? r.map((e) => i.find((t) => t.value === e)?.label ?? e).join(", ") : g
   ].filter(Boolean).join(", ") || void 0 : fe(W);
-  Qe(Te, () => ({
+  Ze(ke, () => ({
     dismiss: () => {
-      d(!1);
+      f(!1);
     }
   }));
-  const Ke = m(
+  const Ue = u(
     (e) => {
-      b || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), f || d(!0));
+      b || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), m || f(!0));
     },
-    [b, f, d]
-  ), ze = () => /* @__PURE__ */ N(
+    [b, m, f]
+  ), Ve = () => /* @__PURE__ */ N(
     "div",
     {
       id: re,
       role: "listbox",
       "aria-multiselectable": n || void 0,
-      className: dl,
+      className: ml,
       children: [
-        x && /* @__PURE__ */ l(Ve, { children: typeof x == "function" ? x() : x }),
-        (Z || L) && (i.length > fl || !!h) && /* @__PURE__ */ N("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
+        x && /* @__PURE__ */ l(Ge, { children: typeof x == "function" ? x() : x }),
+        (Z || L) && (i.length > ul || !!s) && /* @__PURE__ */ N("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
           Z && /* @__PURE__ */ l(
             se,
             {
-              id: `search-${c}`,
+              id: `search-${d}`,
               size: ve,
               placeholder: J,
               "aria-label": J || "Search options",
               onChange: (e) => B(e),
-              value: h,
-              iconBefore: ml,
+              value: s,
+              iconBefore: hl,
               containerClassName: "w-full"
             }
           ),
           L && /* @__PURE__ */ l(
-            el,
+            tl,
             {
               "aria-label": "Close select",
               className: "shrink-0",
               size: D.Small,
-              icon: ul,
+              icon: pl,
               onClick: (e) => {
-                Y?.(e), d(!1);
+                Y?.(e), f(!1);
               }
             }
           )
         ] }),
-        n && be && o.length > 0 && /* @__PURE__ */ l("div", { className: p(hl, "mt-2"), children: /* @__PURE__ */ l(
-          Ze,
+        n && be && o.length > 0 && /* @__PURE__ */ l("div", { className: p(vl, "mt-2"), children: /* @__PURE__ */ l(
+          Re,
           {
-            id: `${c}-selectAll`,
+            id: `${d}-selectAll`,
             labelProps: { label: Ce },
             isSelected: K,
-            isIndeterminate: $e,
-            onChange: Me
+            isIndeterminate: Be,
+            onChange: Ee
           }
         ) }),
-        /* @__PURE__ */ l("div", { role: "none", className: pl, children: y.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
-          tl,
+        /* @__PURE__ */ l("div", { role: "none", className: bl, children: y.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
+          rl,
           {
+            live: !!s,
             icon: Se,
-            title: Ie,
-            description: Ne
+            title: s && xe || Ie,
+            description: s && we || Ne
           }
         ) }) : y.map((e) => {
           const t = r.includes(e.value);
           if (e.children?.length)
             return /* @__PURE__ */ l(
-              ol,
+              cl,
               {
                 opt: e,
                 selectedValues: r,
@@ -264,7 +267,7 @@ const Vl = ({
             /* @__PURE__ */ l(
               de,
               {
-                id: `${c}-${e.value}`,
+                id: `${d}-${e.value}`,
                 role: "option",
                 "aria-selected": t,
                 "aria-disabled": !!e.disabled,
@@ -295,8 +298,8 @@ const Vl = ({
               onClick: () => !e.disabled && _(e.value)
             }
           );
-          return /* @__PURE__ */ l(We, { children: e.interactiveTooltip ? /* @__PURE__ */ l(
-            Xe,
+          return /* @__PURE__ */ l(Je, { children: e.interactiveTooltip ? /* @__PURE__ */ l(
+            Pe,
             {
               asChild: !0,
               placement: e.interactiveTooltip.placement,
@@ -310,7 +313,7 @@ const Vl = ({
           "div",
           {
             onClick: (e) => {
-              ee?.(e), ee && d(!1);
+              ee?.(e), ee && f(!1);
             },
             children: typeof w == "function" ? w() : w
           }
@@ -323,54 +326,54 @@ const Vl = ({
     {
       className: p(
         "flex w-full flex-col gap-2",
-        xe,
-        vl.select
+        ye,
+        Cl.select
       ),
       children: [
-        S && /* @__PURE__ */ l(ll, { ...S, htmlFor: c }),
+        S && /* @__PURE__ */ l(nl, { ...S, htmlFor: d }),
         /* @__PURE__ */ N("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ l(
-            Je,
+            Xe,
             {
-              open: f,
-              onOpenChange: d,
+              open: m,
+              onOpenChange: f,
               disabled: b,
               closable: L,
               onClose: Y,
               placement: "bottom-start",
               allowedPlacements: ["bottom-start", "top-start"],
-              listClassName: p(cl, ye),
+              listClassName: p(fl, Ae),
               className: "w-full",
-              renderOverlay: ze,
+              renderOverlay: Ve,
               children: /* @__PURE__ */ l(
                 se,
                 {
-                  id: c,
+                  id: d,
                   size: q,
                   disabled: b,
                   invalid: R,
-                  value: Ee,
+                  value: je,
                   placeholder: I ? void 0 : he,
                   readOnly: !0,
                   iconBefore: n ? void 0 : a?.icon,
                   iconAfter: /* @__PURE__ */ l(
-                    qe,
+                    He,
                     {
                       size: oe ? ce.SM : ce.MD,
-                      stroke: nl,
+                      stroke: il,
                       "aria-hidden": "true",
                       className: p(
-                        sl,
-                        f && "rotate-180"
+                        dl,
+                        m && "rotate-180"
                       )
                     }
                   ),
                   role: "combobox",
                   "aria-haspopup": "listbox",
-                  "aria-expanded": f,
+                  "aria-expanded": m,
                   "aria-controls": re,
                   "aria-autocomplete": "none",
-                  "aria-label": je,
+                  "aria-label": ze,
                   "aria-describedby": [pe, ie, ae].filter(Boolean).join(" ") || void 0,
                   "aria-invalid": v || R ? !0 : void 0,
                   containerClassName: "w-full",
@@ -380,25 +383,25 @@ const Vl = ({
                       "!h-auto flex-wrap py-2",
                       oe ? "min-h-[24px]" : "min-h-[40px]"
                     ],
-                    we
+                    Te
                   ),
                   className: p(
                     "cursor-pointer",
                     I && "w-0 min-w-0 flex-none p-0"
                   ),
-                  onKeyDown: Ke,
+                  onKeyDown: Ue,
                   children: I
                 }
               )
             }
           ),
-          /* @__PURE__ */ l(Ye, { id: ie, text: v }),
-          !v && /* @__PURE__ */ l(Pe, { id: ae, text: Q })
+          /* @__PURE__ */ l(el, { id: ie, text: v }),
+          !v && /* @__PURE__ */ l(ll, { id: ae, text: Q })
         ] })
       ]
     }
   );
 };
 export {
-  Vl as Select
+  Gl as Select
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.68",
-  "generatedAt": "2026-11-03T14:00:18.668Z",
+  "version": "0.16.0-dev.69",
+  "generatedAt": "2026-11-03T14:32:39.360Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -1383,6 +1383,18 @@
           "required": false,
           "description": "Icon to display when there are no options."
         },
+        {
+          "name": "filteredEmptyStateTitle",
+          "type": "string",
+          "required": false,
+          "description": "Title when the search leaves no options, as \"No [entities] found\". Falls back to `emptyStateTitle`; the message is announced."
+        },
+        {
+          "name": "filteredEmptyStateDescription",
+          "type": "string",
+          "required": false,
+          "description": "Description when the search leaves no options, as \"Try a different search term\". Falls back to `emptyStateDescription`."
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -5774,7 +5786,7 @@
       "name": "NoDataContent",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "Message shown in place of a list, table or grid that has nothing to show.\naliases: EmptyState|NoResults|ZeroState\nDesign system 2.0\n\nFills its container and centres an illustration, a headline, an optional\nsecondary line and an optional action. The icon is decorative, so it is\nhidden from assistive tech and the text carries the message on its own.",
+      "description": "Message shown in place of a list, table or grid that has nothing to show.\naliases: EmptyState|NoResults|ZeroState\nDesign system 2.0\n\nFills its container and centres an illustration, a headline, an optional\nsecondary line and an optional action. The icon is decorative, so it is\nhidden from assistive tech and the text carries the message on its own.\n\nCopy follows the Patterns 2.0 empty-state behaviour:\n- default: \"No [entities] yet\" / \"[Entities] will appear here once [condition].\"\n- Shared with me: \"No [entities] yet\" / \"[Entities] other people share with you will show up here.\"\n- after a search or filter: \"No [entities] found\" / \"Try a different search\n  term or check your filters.\" — drop the part the list does not have — with `live`.\n\nLeave `icon` unset in a list, so every empty list shows the same card.",
       "props": [
         {
           "name": "title",
@@ -6197,7 +6209,7 @@
       "name": "Grid",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A data grid built on ag-Grid, wired to the 2.0 tokens and controls.\naliases: DataTable|TableGrid|DataGrid\nDesign system 2.0\n\nComes preconfigured with case-insensitive sorting, floating column filters,\ncolumns sized to the available width, a row context menu, truncation\ntooltips, and an empty state.\n\nThe selection column renders the 2.0 `Checkbox` and `Radio` instead of\nag-Grid's own inputs, so selection looks and behaves like every other control\nin the kit and the select-all reaches the `mixed` state when the selection is\npartial. The column stays faded out until the row is hovered, something is\nselected, or the keyboard reaches it.\n\nSelection works controlled or uncontrolled: pass `selectedRowIds` to own it,\nor read `onSelectionChange` and let the grid keep its own. A `sort` declared\non a column is honoured — 1.0 stripped it on startup.",
+      "description": "A data grid built on ag-Grid, wired to the 2.0 tokens and controls.\naliases: DataTable|TableGrid|DataGrid\nDesign system 2.0\n\nComes preconfigured with case-insensitive sorting, floating column filters,\ncolumns sized to the available width, a row context menu, truncation\ntooltips, and an empty state.\n\nThe empty state follows the Patterns 2.0 empty-state behaviour and has two\nforms. A grid with no rows says \"No [entities] yet\" and can offer an action;\na grid whose column filters leave nothing says \"No [entities] found\" and is\nannounced, since the user has just changed a filter. A host that filters\n`rowData` itself passes the \"found\" copy as `emptyStateTitle` and sets\n`emptyStateLive`.\n\nThe selection column renders the 2.0 `Checkbox` and `Radio` instead of\nag-Grid's own inputs, so selection looks and behaves like every other control\nin the kit and the select-all reaches the `mixed` state when the selection is\npartial. The column stays faded out until the row is hovered, something is\nselected, or the keyboard reaches it.\n\nSelection works controlled or uncontrolled: pass `selectedRowIds` to own it,\nor read `onSelectionChange` and let the grid keep its own. A `sort` declared\non a column is honoured — 1.0 stripped it on startup.",
       "props": [
         {
           "name": "columnDefs",
@@ -6291,21 +6303,48 @@
           "name": "emptyStateIcon",
           "type": "ReactNode",
           "required": false,
-          "description": "Illustration of the empty state."
+          "description": "Illustration of both empty states. Defaults to the shared placeholder-list card."
         },
         {
           "name": "emptyStateTitle",
           "type": "string",
           "required": false,
-          "defaultValue": "'No results found'",
-          "description": "Headline of the empty state."
+          "defaultValue": "'No items yet'",
+          "description": "Headline when there are no rows."
         },
         {
           "name": "emptyStateDescription",
           "type": "string",
           "required": false,
-          "defaultValue": "\"Sorry, we couldn't find any results for your search.\"",
-          "description": "Secondary line of the empty state."
+          "defaultValue": "'Items will appear here once they are added.'",
+          "description": "Secondary line when there are no rows."
+        },
+        {
+          "name": "emptyStateAction",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Way forward when there are no rows."
+        },
+        {
+          "name": "emptyStateLive",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Announce the no-rows message; for a host that filters `rowData` itself."
+        },
+        {
+          "name": "filteredEmptyStateTitle",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'No items found'",
+          "description": "Headline when the column filters leave no rows."
+        },
+        {
+          "name": "filteredEmptyStateDescription",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Try a different search term or check your filters.'",
+          "description": "Secondary line when the column filters leave no rows."
         },
         {
           "name": "loading",
@@ -6370,7 +6409,7 @@
         }
       ],
       "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/>\n\n// Dark native controls, including the date-filter calendar\n<Grid<Product> columnDefs={columns} rowData={products} colorScheme={GridColorScheme.Dark} />"
+        "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// An empty grid with a way forward\n<Grid<Product>\n  columnDefs={columns}\n  rowData={[]}\n  emptyStateTitle=\"No products yet\"\n  emptyStateDescription=\"Products will appear here once you add one.\"\n  emptyStateAction={<OutlinedButton label=\"Add product\" onClick={addProduct} />}\n  filteredEmptyStateTitle=\"No products found\"\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"
     },
@@ -9973,7 +10012,7 @@
     {
       "name": "DIAL_KIT_ICON_STROKE",
       "sourceFile": "components/New/constants/icon.ts",
-      "description": "Icon stroke (1.5px) from the 2.0 stroke scale. Tabler renders every outline\nicon at `stroke={2}` unless told otherwise, so the token has to be passed\nexplicitly — a 2.0 component that omits it draws a heavier icon than the\ndesign system asks for.\n\nIt is a number rather than a Tailwind utility because an icon's weight is an\nSVG `stroke-width` attribute on the glyph, not a border on its box. The\nborder half of the same scale stays on plain Tailwind widths — `border`,\n`border-2`, `border-4`, and `border-[0.5px]` for a table divider.\n\nExported publicly so icons a consumer passes into a 2.0 component — a button\nicon, a menu item, a segmented-control segment — can match the ones the\ncomponents draw themselves.\n\nTwo deliberate departures inside the library: the empty-state illustrations\n(`NoDataContent`, the grid's no-rows overlay) use a much lighter stroke,\nsince a 1.5px line reads as a drawing at 16px and as a fence at 100px; and\nthe checkbox glyph uses a heavier one, because it is a control mark sized to\na 14px box rather than an icon from the set.",
+      "description": "Icon stroke (1.5px) from the 2.0 stroke scale. Tabler renders every outline\nicon at `stroke={2}` unless told otherwise, so the token has to be passed\nexplicitly — a 2.0 component that omits it draws a heavier icon than the\ndesign system asks for.\n\nIt is a number rather than a Tailwind utility because an icon's weight is an\nSVG `stroke-width` attribute on the glyph, not a border on its box. The\nborder half of the same scale stays on plain Tailwind widths — `border`,\n`border-2`, `border-4`, and `border-[0.5px]` for a table divider.\n\nExported publicly so icons a consumer passes into a 2.0 component — a button\nicon, a menu item, a segmented-control segment — can match the ones the\ncomponents draw themselves.\n\nTwo deliberate departures inside the library: an icon passed as an\nempty-state illustration (`NoDataContent`'s `icon`) uses a much lighter stroke,\nsince a 1.5px line reads as a drawing at 16px and as a fence at 100px; and\nthe checkbox glyph uses a heavier one, because it is a control mark sized to\na 14px box rather than an icon from the set.",
       "signature": "DIAL_KIT_ICON_STROKE = 1.5"
     },
     {