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

package/dist/JsonEditor-Bxui5wJH.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("./lazy-_W6FYhKg.cjs"),c=require("@monaco-editor/react");function g(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const f=g(c),b={[a.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[a.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}},k=({value:e,onChange:o,onValidateJSON:r,options:t,currentTheme:n,themesConfig:s=b})=>{function d(i){i?.editor?.defineTheme(n,s[n]),i.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}const{Editor:l}=f;return u.jsx(l,{beforeMount:d,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:r,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...t??{}}})};exports.DialJsonEditor=k;

package/dist/{MarkdownEditor-Cp-KX6-T.cjs → MarkdownEditor-BKtFs714.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-DMVYJhUR.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const h=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:g,strikethrough:x,table:j,unorderedListCommand:C}=h;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(x,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(g,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(j,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=h;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m,showDragbar:I=!0})=>{const g=b.useMemo(()=>M(),[]),x=b.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:j=>i?.(j||""),height:r,preview:u,visibleDragbar:I,commands:g,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-_W6FYhKg.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const h=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:g,strikethrough:x,table:j,unorderedListCommand:C}=h;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(x,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(g,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(j,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=h;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m,showDragbar:I=!0})=>{const g=b.useMemo(()=>M(),[]),x=b.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:j=>i?.(j||""),height:r,preview:u,visibleDragbar:I,commands:g,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/{MarkdownEditor-Dav_pp0T.cjs → MarkdownEditor-Bapd1ycU.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@uiw/react-md-editor"),u=require("./lazy-DMVYJhUR.cjs"),x=require("./merge-classes-BEJXjzkx.cjs"),g=({value:r,onChange:s,height:o=300,preview:i="edit",theme:a=u.EditorThemes.dark,className:n,placeholder:t,showDragbar:d=!0})=>{const l=t!==void 0&&!r;return e.jsxs("div",{"data-color-mode":a,className:x.mergeClasses("relative",n),children:[e.jsx(m,{value:r,onChange:c=>s?.(c||""),height:o,preview:i,visibleDragbar:d}),l&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:t})]})};exports.DialMarkdownEditor=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@uiw/react-md-editor"),u=require("./lazy-_W6FYhKg.cjs"),x=require("./merge-classes-BEJXjzkx.cjs"),g=({value:r,onChange:s,height:o=300,preview:i="edit",theme:a=u.EditorThemes.dark,className:n,placeholder:t,showDragbar:d=!0})=>{const l=t!==void 0&&!r;return e.jsxs("div",{"data-color-mode":a,className:x.mergeClasses("relative",n),children:[e.jsx(m,{value:r,onChange:c=>s?.(c||""),height:o,preview:i,visibleDragbar:d}),l&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:t})]})};exports.DialMarkdownEditor=g;

package/dist/MarkdownEditorContainer-B5aHwoYF.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("./Switch-DE6MrcqJ.cjs"),N=require("./lazy-_W6FYhKg.cjs"),b=require("./MarkdownEditor-Bapd1ycU.cjs"),g=({value:r,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=N.EditorThemes.dark,onValidateJSON:x,preview:j="edit",showDragbar:w=!0})=>{const C=n.useId(),[t,p]=n.useState(!1),[f,S]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-Bxui5wJH.cjs")).then(s=>{S(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),E=n.useCallback(s=>{x?.(s)},[x]),o=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||o)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,o&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:C,onChange:s=>p(s)})})]})]}),o&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:r,onChange:h,onValidateJSON:E,currentTheme:u})}):e.jsx(b.DialMarkdownEditor,{value:r,onChange:h,height:c,preview:j,showDragbar:w,theme:u})]})})})};exports.DialMarkdownEditorContainer=g;

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -1,29 +1,27 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useId as J, useState as u, useEffect as S, useCallback as x } from "react";
-import "../../constants/editor.js";
-import { EditorThemes as b } from "../../types/editor.js";
-import "@monaco-editor/react";
-import { DialSwitch as v } from "../Switch/Switch.js";
+import { DialSwitch as b } from "../Switch/Switch.js";
+import { EditorThemes as v } from "../../types/editor.js";
 import { DialMarkdownEditor as y } from "./MarkdownEditor.js";
 import { DialLabel as j } from "../Label/Label.js";
-const q = ({
+const B = ({
   value: s,
   onChangeValue: l,
-  label: i,
+  label: t,
   headerContent: d,
   switcherLabel: a,
   height: c = 300,
-  theme: m = b.dark,
+  theme: m = v.dark,
   onValidateJSON: f,
   preview: C = "edit",
   showDragbar: N = !0
 }) => {
-  const w = J(), [t, D] = u(!1), [p, E] = u(null);
+  const w = J(), [n, D] = u(!1), [p, E] = u(null);
   S(() => {
-    t && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
       E(() => o.DialJsonEditor);
     });
-  }, [t]);
+  }, [n]);
   const h = x(
     (o) => {
       l?.(o);
@@ -34,16 +32,16 @@ const q = ({
       f?.(o);
     },
     [f]
-  ), n = !!a;
+  ), i = !!a;
   return /* @__PURE__ */ e("div", { className: "size-full flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ r("div", { children: [
-    (i || d || n) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
-      i && /* @__PURE__ */ e(j, { label: i }),
+    (t || d || i) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      t && /* @__PURE__ */ e(j, { label: t }),
       /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-1 justify-end", children: [
         d,
-        n && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
-          v,
+        i && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          b,
           {
-            isOn: t,
+            isOn: n,
             label: a,
             switchId: w,
             onChange: (o) => D(o)
@@ -51,7 +49,7 @@ const q = ({
         ) })
       ] })
     ] }),
-    n && t ? /* @__PURE__ */ e(
+    i && n ? /* @__PURE__ */ e(
       "div",
       {
         className: "border border-primary rounded",
@@ -80,5 +78,5 @@ const q = ({
   ] }) }) });
 };
 export {
-  q as DialMarkdownEditorContainer
+  B as DialMarkdownEditorContainer
 };

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

@@ -1,106 +1,113 @@
 import { jsx as o } from "react/jsx-runtime";
-import { themeBalham as ge, colorSchemeLight as _e } from "../../../node_modules/ag-grid-community/dist/package/main.esm.js";
-import { AgGridReact as Ne } from "../../../node_modules/ag-grid-react/dist/package/index.esm.js";
-import { IconZoomCancel as Ie } from "@tabler/icons-react";
-import { useState as Te, useRef as D, useId as Ae, useCallback as s, useMemo as m, useEffect as g } from "react";
-import { useIsMobileScreen as Ge } from "../../../hooks/use-is-mobile-screen.js";
-import { useIsTabletScreen as De } from "../../../hooks/use-is-tablet-screen.js";
-import { GridSelectionMode as Q } from "../../../models/selection-mode.js";
-import { DropdownTrigger as be } from "../../../types/dropdown.js";
-import { debounceFn as Le } from "../../../utils/debounce.js";
-import { baseColumnComparator as Oe, omitUndefined as we } from "../../../utils/grid-comparators.js";
-import { registerAgGridModulesOnce as ye } from "../../../utils/grid-registration.js";
-import { mergeClasses as X } from "../../../utils/merge-classes.js";
-import { Dropdown as ve } from "../Dropdown/Dropdown.js";
-import { EllipsisTooltip as xe } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { NoDataContent as He } from "../NoDataContent/NoDataContent.js";
-import { SelectionCell as We } from "./components/SelectionCell.js";
-import { SelectionHeader as ke } from "./components/SelectionHeader.js";
-import { GRID_THEME_PARAMS as b, SelectionEventSourceType as S, GRID_ROW_SELECT_CLASS as ze, GRID_HEADER_SELECT_CLASS as Pe, ROW_HEIGHT as Y, GRID_WITHOUT_HEADER_BORDERS_CLASS as Fe, GRID_SELECTION_VISIBLE_CLASS as Ue, GRID_WITH_SELECTION_CLASS as Me, GRID_ROOT_CLASS as Be } from "./constants.js";
-import { SELECTION_COL_DEF as Ve } from "./renderers/constants.js";
-const je = "dial-kit-grid-selection", Je = 150, Ze = 100, Sr = ({
+import { themeBalham as Ne, colorSchemeDark as Ie, colorSchemeLight as Te } from "../../../node_modules/ag-grid-community/dist/package/main.esm.js";
+import { AgGridReact as De } from "../../../node_modules/ag-grid-react/dist/package/index.esm.js";
+import { IconZoomCancel as Ge } from "@tabler/icons-react";
+import { useState as Ae, useRef as b, useId as be, useCallback as s, useMemo as m, useEffect as g } from "react";
+import { useIsMobileScreen as Le } from "../../../hooks/use-is-mobile-screen.js";
+import { useIsTabletScreen as we } from "../../../hooks/use-is-tablet-screen.js";
+import { GridSelectionMode as X } from "../../../models/selection-mode.js";
+import { DropdownTrigger as Oe } from "../../../types/dropdown.js";
+import { GridColorScheme as Y } from "../../../types/grid.js";
+import { debounceFn as ye } from "../../../utils/debounce.js";
+import { baseColumnComparator as ve, omitUndefined as ke } from "../../../utils/grid-comparators.js";
+import { registerAgGridModulesOnce as xe } from "../../../utils/grid-registration.js";
+import { mergeClasses as ee } from "../../../utils/merge-classes.js";
+import { Dropdown as He } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as We } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { NoDataContent as ze } from "../NoDataContent/NoDataContent.js";
+import { SelectionCell as Pe } from "./components/SelectionCell.js";
+import { SelectionHeader as Fe } from "./components/SelectionHeader.js";
+import { GRID_THEME_PARAMS as L, SelectionEventSourceType as S, GRID_ROW_SELECT_CLASS as Ue, GRID_HEADER_SELECT_CLASS as Me, ROW_HEIGHT as re, GRID_WITHOUT_HEADER_BORDERS_CLASS as Be, GRID_SELECTION_VISIBLE_CLASS as Ve, GRID_WITH_SELECTION_CLASS as je, GRID_ROOT_CLASS as Je } from "./constants.js";
+import { SELECTION_COL_DEF as Ze } from "./renderers/constants.js";
+const $e = "dial-kit-grid-selection", qe = 150, Ke = 100, Rr = ({
   columnDefs: _,
   rowData: c,
-  additionalGridOptions: L,
+  additionalGridOptions: w,
   getContextMenuItems: N,
-  className: ee,
-  ariaLabel: re = "Data grid",
+  className: te,
+  ariaLabel: oe = "Data grid",
   wrapCustomCellRenderers: I = !0,
   disabledRowIds: p,
   selectedRowIds: l,
   onSelectionChange: O,
-  onGridApiChange: te,
-  getRowId: w,
-  alternateOddRowColors: y = !1,
-  filterPlaceholder: v = "Enter value",
+  onGridApiChange: ne,
+  getRowId: y,
+  alternateOddRowColors: v = !1,
+  filterPlaceholder: k = "Enter value",
   emptyStateIcon: x,
   emptyStateTitle: H = "No results found",
   emptyStateDescription: W = "Sorry, we couldn't find any results for your search.",
-  loading: k = !1,
-  wrapperBorder: z = !0,
-  withoutHeaderBorders: oe = !1,
-  allowDisabledContextMenu: P = !1,
+  loading: z = !1,
+  wrapperBorder: P = !0,
+  withoutHeaderBorders: ie = !1,
+  allowDisabledContextMenu: F = !1,
   selectionMode: n,
-  selectRowLabel: F,
-  selectAllLabel: U = "Select all rows"
+  selectRowLabel: U,
+  selectAllLabel: M = "Select all rows",
+  colorScheme: T = Y.Light
 }) => {
-  ye();
-  const [t, ne] = Te(), ie = Ge(), se = De(), T = D(/* @__PURE__ */ new Set()), M = D(
+  xe();
+  const [t, se] = Ae(), ae = Le(), le = we(), D = b(/* @__PURE__ */ new Set()), B = b(
     void 0
-  ), B = `dial-kit-grid-selection-${Ae()}`, d = D({
-    getRowId: w,
+  ), V = `dial-kit-grid-selection-${be()}`, d = b({
+    getRowId: y,
     getContextMenuItems: N,
     onSelectionChange: O,
-    selectRowLabel: F,
+    selectRowLabel: U,
     wrapCustomCellRenderers: I
   });
   d.current = {
-    getRowId: w,
+    getRowId: y,
     getContextMenuItems: N,
     onSelectionChange: O,
-    selectRowLabel: F,
+    selectRowLabel: U,
     wrapCustomCellRenderers: I
   };
   const a = s((e) => {
     const r = d.current.getRowId;
     return r ? r(e) : String(e.id ?? JSON.stringify(e));
-  }, []), V = !!N, j = !!I, ae = m(
-    () => ge.withPart(_e).withParams({
-      ...b,
-      oddRowBackgroundColor: y ? b.oddRowBackgroundColor : b.backgroundColor,
-      wrapperBorder: z
+  }, []), j = !!N, J = !!I, ce = m(
+    () => Ne.withPart(
+      T === Y.Dark ? Ie : Te
+    ).withParams({
+      ...L,
+      // The shared params pin `browserColorScheme` to light and are applied
+      // after the part, so the chosen scheme is set again here.
+      browserColorScheme: T,
+      oddRowBackgroundColor: v ? L.oddRowBackgroundColor : L.backgroundColor,
+      wrapperBorder: P
     }),
-    [y, z]
-  ), le = s((e) => {
+    [v, T, P]
+  ), de = s((e) => {
     e.api.sizeColumnsToFit();
-  }, []), ce = ie || se || (l?.size ?? 0) > 0, u = s(
+  }, []), ue = ae || le || (l?.size ?? 0) > 0, u = s(
     (e) => !!e && !!p?.has(a(e)),
     [p, a]
   ), C = s(
-    (e, r, i) => V ? /* @__PURE__ */ o(
-      ve,
+    (e, r, i) => j ? /* @__PURE__ */ o(
+      He,
       {
-        trigger: [be.ContextMenu],
+        trigger: [Oe.ContextMenu],
         items: e.data ? d.current.getContextMenuItems?.(e.data) ?? [] : [],
         anchorToMouse: !0,
         matchReferenceWidth: !0,
-        className: X(
+        className: ee(
           "size-full",
           i && "cursor-not-allowed opacity-75"
         ),
-        disabled: i && !P,
+        disabled: i && !F,
         children: /* @__PURE__ */ o("span", { className: "block min-w-0 max-w-full flex-1", children: r })
       }
     ) : r,
-    [V, P]
-  ), A = s(
+    [j, F]
+  ), G = s(
     (e) => {
       if (!e.data) return null;
       const r = u(e.data);
       return C(
         e,
         /* @__PURE__ */ o(
-          xe,
+          We,
           {
             text: e.value == null ? "" : String(e.value),
             className: "max-w-full dial-small-text text-primary",
@@ -111,35 +118,35 @@ const je = "dial-kit-grid-selection", Je = 150, Ze = 100, Sr = ({
       );
     },
     [u, C]
-  ), R = s(
+  ), h = s(
     (e) => e === S.API || e === S.ROW_DATA_CHANGED,
     []
-  ), de = m(
-    () => Le((e) => {
-      const i = (e.selectedNodes ?? []).map((q) => q.data), f = new Set(i.map(a));
-      T.current = f, M.current = e.source, !R(e.source) && d.current.onSelectionChange?.(f, i);
-    }, Ze),
-    [R, a]
-  ), G = m(() => {
+  ), me = m(
+    () => ye((e) => {
+      const i = (e.selectedNodes ?? []).map((K) => K.data), f = new Set(i.map(a));
+      D.current = f, B.current = e.source, !h(e.source) && d.current.onSelectionChange?.(f, i);
+    }, Ke),
+    [h, a]
+  ), A = m(() => {
     if (n)
       return {
-        ...Ve,
-        colId: je,
+        ...Ze,
+        colId: $e,
         headerName: "",
-        headerClass: Pe,
-        cellClass: ze,
-        headerComponent: n === Q.MULTIPLE ? ke : void 0,
-        headerComponentParams: { label: U },
+        headerClass: Me,
+        cellClass: Ue,
+        headerComponent: n === X.MULTIPLE ? Fe : void 0,
+        headerComponentParams: { label: M },
         cellRenderer: (e) => {
           if (!e.data) return null;
           const r = a(e.data);
           return /* @__PURE__ */ o(
-            We,
+            Pe,
             {
               params: e,
               mode: n,
               rowId: r,
-              radioName: B,
+              radioName: V,
               label: d.current.selectRowLabel?.(e.data) ?? "Select row",
               disabled: p?.has(r)
             }
@@ -148,88 +155,88 @@ const je = "dial-kit-grid-selection", Je = 150, Ze = 100, Sr = ({
       };
   }, [
     n,
-    U,
+    M,
     a,
     p,
-    B
-  ]), J = s(
+    V
+  ]), Z = s(
     (e) => {
       if (!e.cellRenderer)
-        return { ...e, cellRenderer: A };
+        return { ...e, cellRenderer: G };
       const r = d.current.wrapCustomCellRenderers;
       if (!(typeof r == "function" ? r(e) : !!r))
         return e;
       const f = e.cellRenderer;
       return { ...e, cellRenderer: (E) => {
-        const he = u(E.data), K = typeof f == "function" ? f : void 0, Ee = K ? /* @__PURE__ */ o(K, { ...E }) : A(E);
-        return C(E, Ee, he);
+        const ge = u(E.data), Q = typeof f == "function" ? f : void 0, _e = Q ? /* @__PURE__ */ o(Q, { ...E }) : G(E);
+        return C(E, _e, ge);
       } };
     },
-    [u, A, C]
-  ), ue = m(() => {
-    const e = j ? (_ ?? []).map(J) : _ ?? [];
-    return G ? [G, ...e] : e;
-  }, [_, j, J, G]), {
-    defaultColDef: Z,
-    rowSelection: h,
-    ...me
-  } = L ?? {}, fe = m(
+    [u, G, C]
+  ), fe = m(() => {
+    const e = J ? (_ ?? []).map(Z) : _ ?? [];
+    return A ? [A, ...e] : e;
+  }, [_, J, Z, A]), {
+    defaultColDef: $,
+    rowSelection: R,
+    ...Se
+  } = w ?? {}, pe = m(
     () => ({
-      minWidth: Je,
+      minWidth: qe,
       resizable: !0,
       sortable: !0,
       floatingFilter: !0,
       filter: "agTextColumnFilter",
       filterParams: {
-        filterPlaceholder: v,
+        filterPlaceholder: k,
         buttons: ["reset"]
       },
-      comparator: Oe,
-      ...we(Z)
+      comparator: ve,
+      ...ke($)
     }),
-    [v, Z]
-  ), Se = (e) => {
-    e.api.sizeColumnsToFit(), ne(e.api), L?.onGridReady?.(e), te?.(e.api);
+    [k, $]
+  ), Ce = (e) => {
+    e.api.sizeColumnsToFit(), se(e.api), w?.onGridReady?.(e), ne?.(e.api);
   };
   g(() => {
     t && c && t.setGridOption("rowData", c);
   }, [t, c]);
-  const pe = s(
+  const he = s(
     () => /* @__PURE__ */ o(
-      He,
+      ze,
       {
         live: !0,
         title: H,
         description: W,
-        icon: x ?? /* @__PURE__ */ o(Ie, { size: 100, stroke: 0.5, "aria-hidden": "true" })
+        icon: x ?? /* @__PURE__ */ o(Ge, { size: 100, stroke: 0.5, "aria-hidden": "true" })
       }
     ),
     [H, W, x]
-  ), $ = typeof h == "object" ? h : void 0, Ce = m(() => n ? {
+  ), q = typeof R == "object" ? R : void 0, Re = m(() => n ? {
     isRowSelectable: (e) => !u(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.
     */
-    ...$,
+    ...q,
     /*
       `selectionMode` owns the mode, because it also decides whether the
       selection column draws checkboxes or radios.
     */
-    mode: n === Q.SINGLE ? "singleRow" : "multiRow",
+    mode: n === X.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
-  } : h, [
-    h,
-    $,
+  } : R, [
+    R,
+    q,
     u,
     n
   ]);
   g(() => {
-    t && c && T.current.size && T.current.forEach((e) => {
+    t && c && D.current.size && D.current.forEach((e) => {
       const r = t.getRowNode(e);
       r && !r.isSelected() && r.setSelected(!0, !1, S.API);
     });
@@ -239,13 +246,13 @@ const je = "dial-kit-grid-selection", Je = 150, Ze = 100, Sr = ({
       r && !r.isSelected() && r.setSelected(!0, !1, S.API);
     }));
   }, [t, l]);
-  const Re = s(
+  const Ee = s(
     (e) => e.data ? a(e.data) : "",
     [a]
   );
   return g(() => {
-    const e = R(
-      M.current
+    const e = h(
+      B.current
     );
     if (t && l?.size && e) {
       const r = Array.from(l)[0];
@@ -254,48 +261,48 @@ const je = "dial-kit-grid-selection", Je = 150, Ze = 100, Sr = ({
         i && t.ensureNodeVisible(i);
       }
     }
-  }, [t, R, l]), /* @__PURE__ */ o(
+  }, [t, h, l]), /* @__PURE__ */ o(
     "div",
     {
-      className: X(
-        Be,
+      className: ee(
+        Je,
         "size-full",
-        n && Me,
-        n && ce && Ue,
-        oe && Fe,
-        ee
+        n && je,
+        n && ue && Ve,
+        ie && Be,
+        te
       ),
       role: "region",
-      "aria-label": re,
-      "aria-busy": k,
+      "aria-label": oe,
+      "aria-busy": z,
       children: /* @__PURE__ */ o("div", { className: "h-full overflow-x-auto", children: /* @__PURE__ */ o(
-        Ne,
+        De,
         {
           rowModelType: "clientSide",
-          headerHeight: Y,
-          rowHeight: Y,
+          headerHeight: re,
+          rowHeight: re,
           cellSelection: !1,
-          theme: ae,
+          theme: ce,
           autoSizeStrategy: { type: "fitGridWidth" },
-          columnDefs: ue,
-          defaultColDef: fe,
-          onGridSizeChanged: le,
-          onGridReady: Se,
-          loading: k,
+          columnDefs: fe,
+          defaultColDef: pe,
+          onGridSizeChanged: de,
+          onGridReady: Ce,
+          loading: z,
           suppressCellFocus: !0,
           suppressDragLeaveHidesColumns: !0,
-          noRowsOverlayComponent: pe,
+          noRowsOverlayComponent: he,
           rowData: c,
-          rowSelection: Ce,
-          onSelectionChanged: de,
-          getRowId: Re,
-          ...me
+          rowSelection: Re,
+          onSelectionChanged: me,
+          getRowId: Ee,
+          ...Se
         }
       ) })
     }
   );
 };
 export {
-  je as GRID_SELECTION_COLUMN_ID,
-  Sr as Grid
+  $e as GRID_SELECTION_COLUMN_ID,
+  Rr as Grid
 };

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

@@ -25,8 +25,11 @@ const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-gri
   headerBackgroundColor: "var(--bg-layer-raised, #FCFCFC)",
   foregroundColor: "var(--text-primary, #161B2D)",
   headerTextColor: "var(--text-secondary, #57647A)",
-  // 1.0 asked the browser for dark native widgets while painting a light
-  // theme; the scheme now matches the palette it is used with.
+  // Native form controls inside the grid, including the date filter's
+  // calendar, follow this value. The light default matches the token
+  // fallbacks. `Grid` sets it again after this object is spread, because a
+  // dark `colorScheme` has to replace this light value or the browser keeps
+  // painting those controls light.
   browserColorScheme: "light",
   headerFontSize: 14,
   headerFontWeight: 600,

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.1",
-  "generatedAt": "2026-10-12T13:29:09.309Z",
+  "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",