@onereach/ui-components 26.7.1-beta.5969.0 → 26.8.0

package/dist/esm/{OrDataGrid-BsjzHZ6q.mjs → OrDataGrid-Dm8ZScw0.mjs}

@@ -1,25 +1,25 @@
-import { flatten as $e } from "@onereach/ui-components-common/helpers";
-import { O as ue } from "./OrCheckbox-WPBzlvaV.mjs";
-import { O as we } from "./OrIconButton-Ds8k8FmS.mjs";
-import { O as De } from "./OrPagination-BXzDa-Su.mjs";
-import { O as Se } from "./OrSearch-B_YGTJN8.mjs";
-import { O as Ce } from "./OrSkeletonArea.vue_vue_type_script_lang-jgRhbZ0X.mjs";
-import { defineComponent as R, ref as T, computed as r, openBlock as n, createElementBlock as b, normalizeClass as d, renderSlot as m, createCommentVNode as k, resolveComponent as v, normalizeStyle as K, createBlock as O, watch as me, onUnmounted as Te, createElementVNode as se, withModifiers as te, createVNode as P, mergeProps as Ge, withCtx as $, reactive as de, onMounted as Ve, createSlots as ne, normalizeProps as Me, guardReactiveProps as Re, Fragment as x, renderList as _, createTextVNode as oe, toDisplayString as re } from "vue";
-import { useElementSize as Ie, useDebounceFn as ce, useResizeObserver as We } from "@vueuse/core";
-import { _ as I } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
-import { O as Ee } from "./OrDatePicker-B9vB0AaR.mjs";
-import { O as ze } from "./OrDateTimePicker-CXGn2f51.mjs";
+import { flatten as Se } from "@onereach/ui-components-common/helpers";
+import { O as fe } from "./OrCheckbox-WPBzlvaV.mjs";
+import { O as Ce } from "./OrIconButton-Ds8k8FmS.mjs";
+import { O as Te } from "./OrPagination-BXzDa-Su.mjs";
+import { O as Ge } from "./OrSearch-B_YGTJN8.mjs";
+import { O as Ve } from "./OrSkeletonArea.vue_vue_type_script_lang-jgRhbZ0X.mjs";
+import { defineComponent as M, ref as T, computed as r, openBlock as n, createElementBlock as b, normalizeClass as u, renderSlot as m, createCommentVNode as k, resolveComponent as v, normalizeStyle as K, createBlock as O, watch as ge, onUnmounted as Ie, createElementVNode as le, withModifiers as ae, createVNode as P, mergeProps as Me, withCtx as $, reactive as ue, onMounted as Re, createSlots as oe, normalizeProps as We, guardReactiveProps as Ee, Fragment as ee, renderList as te, createTextVNode as re, toDisplayString as se } from "vue";
+import { useElementSize as ze, useDebounceFn as me, useResizeObserver as Fe } from "@vueuse/core";
+import { _ as R } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { O as He } from "./OrDatePicker-B9vB0AaR.mjs";
+import { O as je } from "./OrDateTimePicker-CXGn2f51.mjs";
 import "./OrDateTimePicker.vue_vue_type_script_lang-e2w0L4cX.mjs";
 import "@onereach/ui-components-common/types";
-import { O as Fe } from "./OrInput-CxGhwo0q.mjs";
-import { O as He } from "./OrRating-CAwz23JA.mjs";
-import { O as je } from "./OrSelect-BXBDdzDF.mjs";
-import { O as Pe } from "./OrSwitch-BtoXDsZx.mjs";
-import { O as Ne } from "./OrTagInput-B2U22gXE.mjs";
-import { O as Ue } from "./OrTimePicker-D-mTb4Ia.mjs";
-import { O as Ae } from "./OrIcon-k8cyvh-D.mjs";
-import { O as Le } from "./OrNotification-BkjmRseb.mjs";
-const qe = [
+import { O as Pe } from "./OrInput-CxGhwo0q.mjs";
+import { O as Ne } from "./OrRating-CAwz23JA.mjs";
+import { O as Ue } from "./OrSelect-BXBDdzDF.mjs";
+import { O as Ae } from "./OrSwitch-BtoXDsZx.mjs";
+import { O as Le } from "./OrTagInput-B2U22gXE.mjs";
+import { O as qe } from "./OrTimePicker-D-mTb4Ia.mjs";
+import { O as Be } from "./OrIcon-k8cyvh-D.mjs";
+import { O as Ke } from "./OrNotification-BkjmRseb.mjs";
+const Xe = [
   // Layout
   "layout-row",
   // Interactivity
@@ -33,10 +33,10 @@ const qe = [
   // Theme
   "theme-border-disabled border-t-1",
   "dark:theme-border-disabled-dark"
-], Be = [
+], Je = [
   // Typography
   "typography-body-2-semibold"
-], Ke = R({
+], Qe = M({
   name: "OrDataGridFooter",
   expose: [
     "root"
@@ -44,9 +44,9 @@ const qe = [
   setup() {
     const e = T(), t = r(() => [
       "or-data-grid-footer-v3",
-      ...qe
+      ...Xe
     ]), l = r(() => [
-      ...Be
+      ...Je
     ]);
     return {
       root: e,
@@ -54,37 +54,37 @@ const qe = [
       statusStyles: l
     };
   }
-}), Xe = {
+}), Ye = {
   key: 1,
-  class: /* @__PURE__ */ d(["grow"])
+  class: /* @__PURE__ */ u(["grow"])
 };
-function Je(e, t, l, D, g, f) {
+function Ze(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     e.$slots.status ? (n(), b("div", {
       key: 0,
-      class: d(e.statusStyles)
+      class: u(e.statusStyles)
     }, [
       m(e.$slots, "status")
     ], 2)) : k("", !0),
     m(e.$slots, "actions"),
-    e.$slots.paging ? (n(), b("div", Xe)) : k("", !0),
+    e.$slots.paging ? (n(), b("div", Ye)) : k("", !0),
     m(e.$slots, "paging")
   ], 2);
 }
-const Qe = /* @__PURE__ */ I(Ke, [["render", Je]]), Ye = [
+const xe = /* @__PURE__ */ R(Qe, [["render", Ze]]), _e = [
   // Layout
   "layout-row items-start gap-md",
   // Interactivity
   "interactivity-default",
   // Spacing
   "pb-md"
-], Ze = [
+], et = [
   // Typography
   "typography-headline-2"
-], xe = R({
+], tt = M({
   name: "OrDataGridHeader",
   expose: [
     "root"
@@ -92,9 +92,9 @@ const Qe = /* @__PURE__ */ I(Ke, [["render", Je]]), Ye = [
   setup() {
     const e = T(), t = r(() => [
       "or-data-grid-header-v3",
-      ...Ye
+      ..._e
     ]), l = r(() => [
-      ...Ze
+      ...et
     ]);
     return {
       root: e,
@@ -102,29 +102,29 @@ const Qe = /* @__PURE__ */ I(Ke, [["render", Je]]), Ye = [
       titleStyles: l
     };
   }
-}), _e = {
+}), at = {
   key: 1,
-  class: /* @__PURE__ */ d(["grow"])
+  class: /* @__PURE__ */ u(["grow"])
 };
-function et(e, t, l, D, g, f) {
+function nt(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     e.$slots.title ? (n(), b("div", {
       key: 0,
-      class: d(e.titleStyles)
+      class: u(e.titleStyles)
     }, [
       m(e.$slots, "title")
     ], 2)) : k("", !0),
-    e.$slots.searching || e.$slots.extraActions ? (n(), b("div", _e)) : k("", !0),
+    e.$slots.searching || e.$slots.extraActions ? (n(), b("div", at)) : k("", !0),
     m(e.$slots, "searching"),
     e.$slots.extraActions ? m(e.$slots, "extraActions", { key: 2 }) : k("", !0)
   ], 2);
 }
-const tt = /* @__PURE__ */ I(xe, [["render", et]]);
+const ot = /* @__PURE__ */ R(tt, [["render", nt]]);
 var w = /* @__PURE__ */ ((e) => (e.Standard = "standard", e.Comfortable = "comfortable", e.Compact = "compact", e.Dynamic = "dynamic", e))(w || {});
-const le = "52px", fe = "42px", at = [
+const ie = "52px", he = "42px", rt = [
   // Layout
   "layout-row items-center",
   // Spacing
@@ -160,23 +160,23 @@ const le = "52px", fe = "42px", at = [
   // Border (conditional override for last row/column)
   "group-last:border-b-0",
   "last:border-r-0"
-], nt = [
+], st = [
   // interactivity
   "interactivity-select",
   // Typography
   "truncate"
-], ot = R({
+], lt = M({
   name: "OrDataGridTableContentCell",
   components: {
-    OrCheckbox: ue,
-    OrDatePicker: Ee,
-    OrDateTimePicker: ze,
-    OrInput: Fe,
-    OrRating: He,
-    OrSelect: je,
-    OrSwitch: Pe,
-    OrTagInput: Ne,
-    OrTimePicker: Ue
+    OrCheckbox: fe,
+    OrDatePicker: He,
+    OrDateTimePicker: je,
+    OrInput: Pe,
+    OrRating: Ne,
+    OrSelect: Ue,
+    OrSwitch: Ae,
+    OrTagInput: Le,
+    OrTimePicker: qe
   },
   model: {
     prop: "modelValue",
@@ -220,7 +220,7 @@ const le = "52px", fe = "42px", at = [
       var p, S, W, V, E, F, h, o, y, G;
       return [
         "or-data-grid-table-content-cell-v3",
-        ...at,
+        ...rt,
         ...(p = e.column) != null && p.stickiness ? [`sticky-${e.column.stickiness}`] : [],
         ...(S = e.features) != null && S.resizing && ((W = e.column) != null && W.name) && ((V = e.column) == null ? void 0 : V.resizing) !== !1 ? ["resizable"] : [],
         ...((E = e.column) == null ? void 0 : E.stickiness) === "start" ? ["border-r-1"] : [],
@@ -257,7 +257,7 @@ const le = "52px", fe = "42px", at = [
       return [
         "layout-row items-center w-full min-w-0 overflow-hidden",
         ...((F = e.column) == null ? void 0 : F.alignment) === "end" ? ["justify-end", "text-end"] : ((h = e.column) == null ? void 0 : h.alignment) === "center" ? ["justify-center", "text-center"] : [],
-        ...nt.filter((o) => o !== "truncate"),
+        ...st.filter((o) => o !== "truncate"),
         ...p ? ["whitespace-pre-wrap break-words"] : S ? [] : ["truncate"]
       ];
     }), C = r(() => {
@@ -267,7 +267,7 @@ const le = "52px", fe = "42px", at = [
         maxWidth: (S = e.column) == null ? void 0 : S.maxWidth,
         justifyContent: ((W = e.column) == null ? void 0 : W.alignment) === "end" ? void 0 : ((V = e.column) == null ? void 0 : V.alignment) || (e.column ? void 0 : "center")
       };
-    }), M = r({
+    }), I = r({
       get: () => e.modelValue,
       set: (p) => {
         t.emit("input", p);
@@ -282,21 +282,21 @@ const le = "52px", fe = "42px", at = [
       rootInlineStyles: g,
       contentStyles: f,
       contentInlineStyles: C,
-      model: M,
+      model: I,
       control: z
     };
   }
 });
-function rt(e, t, l, D, g, f) {
-  const C = v("OrInput"), M = v("OrRating"), z = v("OrSelect"), p = v("OrCheckbox"), S = v("OrSwitch"), W = v("OrDatePicker"), V = v("OrTimePicker"), E = v("OrDateTimePicker"), F = v("OrTagInput");
+function it(e, t, l, D, g, f) {
+  const C = v("OrInput"), I = v("OrRating"), z = v("OrSelect"), p = v("OrCheckbox"), S = v("OrSwitch"), W = v("OrDatePicker"), V = v("OrTimePicker"), E = v("OrDateTimePicker"), F = v("OrTagInput");
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles),
+    class: u(e.rootStyles),
     style: K(e.rootInlineStyles)
   }, [
     e.override ? m(e.$slots, "default", { key: 0 }) : e.control ? (n(), b("div", {
       key: 1,
-      class: d(e.contentStyles),
+      class: u(e.contentStyles),
       style: K(e.contentInlineStyles)
     }, [
       e.control.type === "text" ? (n(), O(C, {
@@ -313,7 +313,7 @@ function rt(e, t, l, D, g, f) {
         type: "number",
         variant: "embedded"
       }, null, 8, ["modelValue"])) : k("", !0),
-      e.control.type === "rating" ? (n(), O(M, {
+      e.control.type === "rating" ? (n(), O(I, {
         key: 2,
         modelValue: e.model,
         "onUpdate:modelValue": t[2] || (t[2] = (h) => e.model = h)
@@ -362,18 +362,18 @@ function rt(e, t, l, D, g, f) {
         modelValue: e.model,
         "onUpdate:modelValue": t[9] || (t[9] = (h) => e.model = h),
         variant: "embedded",
-        class: d(["grow min-w-0"])
+        class: u(["grow min-w-0"])
       }, null, 8, ["modelValue"])) : k("", !0)
     ], 6)) : (n(), b("div", {
       key: 2,
-      class: d(e.contentStyles),
+      class: u(e.contentStyles),
       style: K(e.contentInlineStyles)
     }, [
       m(e.$slots, "default")
     ], 6))
   ], 6);
 }
-const st = /* @__PURE__ */ I(ot, [["render", rt]]), lt = [
+const dt = /* @__PURE__ */ R(lt, [["render", it]]), ct = [
   // Layout
   "grid grid-cols-[subgrid] col-span-full",
   // Stacking context
@@ -394,7 +394,7 @@ const st = /* @__PURE__ */ I(ot, [["render", rt]]), lt = [
   // Theme (selected + hover / children)
   "children:hover:selected:theme-background-surface-3",
   "dark:children:hover:selected:theme-background-surface-3-dark"
-], it = {
+], ut = {
   [w.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
@@ -411,7 +411,7 @@ const st = /* @__PURE__ */ I(ot, [["render", rt]]), lt = [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, dt = R({
+}, mt = M({
   name: "OrDataGridTableContentRow",
   props: {
     variant: {
@@ -433,8 +433,8 @@ const st = /* @__PURE__ */ I(ot, [["render", rt]]), lt = [
   setup(e) {
     const t = T(), l = r(() => [
       "or-data-grid-table-content-row-v3",
-      ...lt,
-      ...it[e.variant],
+      ...ct,
+      ...ut[e.variant],
       ...e.interactive ? ["cursor-pointer"] : []
     ]);
     return {
@@ -442,20 +442,20 @@ const st = /* @__PURE__ */ I(ot, [["render", rt]]), lt = [
       rootStyles: l
     };
   }
-}), ct = ["selected"];
-function ut(e, t, l, D, g, f) {
+}), ft = ["selected"];
+function gt(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles),
+    class: u(e.rootStyles),
     selected: e.selected
   }, [
     m(e.$slots, "default")
-  ], 10, ct);
+  ], 10, ft);
 }
-const mt = /* @__PURE__ */ I(dt, [["render", ut]]), ft = [
+const ht = /* @__PURE__ */ R(mt, [["render", gt]]), yt = [
   // Layout
   "contents"
-], gt = R({
+], vt = M({
   name: "OrDataGridTableContent",
   expose: [
     "root"
@@ -463,7 +463,7 @@ const mt = /* @__PURE__ */ I(dt, [["render", ut]]), ft = [
   setup() {
     const e = T(), t = r(() => [
       "or-data-grid-table-content-v3",
-      ...ft
+      ...yt
     ]);
     return {
       root: e,
@@ -471,15 +471,15 @@ const mt = /* @__PURE__ */ I(dt, [["render", ut]]), ft = [
     };
   }
 });
-function ht(e, t, l, D, g, f) {
+function kt(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     m(e.$slots, "default")
   ], 2);
 }
-const yt = /* @__PURE__ */ I(gt, [["render", ht]]), vt = [
+const bt = /* @__PURE__ */ R(vt, [["render", kt]]), pt = [
   // Layout
   "layout-row",
   // Spacing
@@ -489,7 +489,7 @@ const yt = /* @__PURE__ */ I(gt, [["render", ht]]), vt = [
   // Theme
   "theme-border-transparent border-1",
   "dark:theme-border-transparent-dark"
-], kt = R({
+], Ot = M({
   name: "OrDataGridTableFooterCell",
   expose: [
     "root"
@@ -497,7 +497,7 @@ const yt = /* @__PURE__ */ I(gt, [["render", ht]]), vt = [
   setup() {
     const e = T(), t = r(() => [
       "or-data-grid-table-footer-cell-v3",
-      ...vt
+      ...pt
     ]);
     return {
       root: e,
@@ -505,15 +505,15 @@ const yt = /* @__PURE__ */ I(gt, [["render", ht]]), vt = [
     };
   }
 });
-function bt(e, t, l, D, g, f) {
+function $t(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     m(e.$slots, "default")
   ], 2);
 }
-const pt = /* @__PURE__ */ I(kt, [["render", bt]]), Ot = [
+const wt = /* @__PURE__ */ R(Ot, [["render", $t]]), Dt = [
   // Layout
   "grid grid-cols-1",
   // Typography
@@ -526,7 +526,7 @@ const pt = /* @__PURE__ */ I(kt, [["render", bt]]), Ot = [
   "dark:children:theme-foreground-default-dark",
   "children:theme-background-default",
   "dark:children:theme-background-default-dark"
-], $t = {
+], St = {
   [w.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
@@ -543,7 +543,7 @@ const pt = /* @__PURE__ */ I(kt, [["render", bt]]), Ot = [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, wt = R({
+}, Ct = M({
   name: "OrDataGridTableFooterRow",
   props: {
     variant: {
@@ -557,8 +557,8 @@ const pt = /* @__PURE__ */ I(kt, [["render", bt]]), Ot = [
   setup(e) {
     const t = T(), l = r(() => [
       "or-data-grid-table-footer-row-v3",
-      ...Ot,
-      ...$t[e.variant]
+      ...Dt,
+      ...St[e.variant]
     ]);
     return {
       root: t,
@@ -566,18 +566,18 @@ const pt = /* @__PURE__ */ I(kt, [["render", bt]]), Ot = [
     };
   }
 });
-function Dt(e, t, l, D, g, f) {
+function Tt(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     m(e.$slots, "default")
   ], 2);
 }
-const St = /* @__PURE__ */ I(wt, [["render", Dt]]), Ct = [
+const Gt = /* @__PURE__ */ R(Ct, [["render", Tt]]), Vt = [
   // Layout
   "contents"
-], Tt = R({
+], It = M({
   name: "OrDataGridTableFooter",
   expose: [
     "root"
@@ -585,7 +585,7 @@ const St = /* @__PURE__ */ I(wt, [["render", Dt]]), Ct = [
   setup() {
     const e = T(), t = r(() => [
       "or-data-grid-table-footer-v3",
-      ...Ct
+      ...Vt
     ]);
     return {
       root: e,
@@ -593,15 +593,15 @@ const St = /* @__PURE__ */ I(wt, [["render", Dt]]), Ct = [
     };
   }
 });
-function Gt(e, t, l, D, g, f) {
+function Mt(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     m(e.$slots, "default")
   ], 2);
 }
-const Vt = /* @__PURE__ */ I(Tt, [["render", Gt]]), Mt = [
+const Rt = /* @__PURE__ */ R(It, [["render", Mt]]), Wt = [
   // Layout
   "layout-row items-center",
   // Spacing
@@ -625,7 +625,7 @@ const Vt = /* @__PURE__ */ I(Tt, [["render", Gt]]), Mt = [
   "relative",
   // Border (conditional override for last column)
   "last:border-r-0"
-], Rt = [
+], Et = [
   // Position
   "absolute top-0 bottom-0 end-0 z-50",
   // Box
@@ -636,10 +636,10 @@ const Vt = /* @__PURE__ */ I(Tt, [["render", Gt]]), Mt = [
   "dark:hover:theme-background-primary-dark",
   "active:theme-background-primary",
   "dark:active:theme-background-primary-dark"
-], It = R({
+], zt = M({
   name: "OrDataGridTableHeaderCell",
   components: {
-    OrIcon: Ae
+    OrIcon: Be
   },
   model: {
     prop: "modelValue",
@@ -688,7 +688,7 @@ const Vt = /* @__PURE__ */ I(Tt, [["render", Gt]]), Mt = [
       return [
         "or-data-grid-table-header-cell-v3",
         "relative",
-        ...Mt,
+        ...Wt,
         ...(o = e.column) != null && o.stickiness ? [`sticky-${e.column.stickiness}`] : [],
         ...g.value ? ["resizable"] : [],
         ...D.value ? ["interactivity-click"] : [],
@@ -698,8 +698,8 @@ const Vt = /* @__PURE__ */ I(Tt, [["render", Gt]]), Mt = [
       ];
     }), C = r(() => [
       "or-data-grid-table-header-cell-resize-handle-v3",
-      ...Rt
-    ]), M = r(() => {
+      ...Et
+    ]), I = r(() => {
       var o, y;
       return {
         minWidth: (o = e.column) == null ? void 0 : o.minWidth,
@@ -774,9 +774,9 @@ const Vt = /* @__PURE__ */ I(Tt, [["render", Gt]]), Mt = [
       const N = (q) => {
         p.value = !0, H === null && (H = requestAnimationFrame(() => {
           var s, i, Q;
-          const Z = q.pageX - y;
-          let B = Math.max(0, G + Z);
-          const J = ((s = e.column) == null ? void 0 : s.minWidth) || (((i = e.column) == null ? void 0 : i.name) === "_check" ? fe : le);
+          const x = q.pageX - y;
+          let B = Math.max(0, G + x);
+          const J = ((s = e.column) == null ? void 0 : s.minWidth) || (((i = e.column) == null ? void 0 : i.name) === "_check" ? he : ie);
           if (J && (J.endsWith("px") || !isNaN(Number(J)))) {
             const A = parseInt(J, 10);
             B = Math.max(B, A);
@@ -794,8 +794,8 @@ const Vt = /* @__PURE__ */ I(Tt, [["render", Gt]]), Mt = [
       };
       document.addEventListener("mousemove", N), document.addEventListener("mouseup", X);
     }
-    const { width: h } = Ie(l, void 0, { box: "border-box" });
-    return me([
+    const { width: h } = ze(l, void 0, { box: "border-box" });
+    return ge([
       l,
       h,
       () => {
@@ -817,7 +817,7 @@ const Vt = /* @__PURE__ */ I(Tt, [["render", Gt]]), Mt = [
     ]) => {
       var H;
       G && G !== ((H = e.column) == null ? void 0 : H.name) && t.emit("remove:scrollOffset", G), t.emit("update:scrollOffset", o, y, e.column);
-    }), Te(() => {
+    }), Ie(() => {
       var o;
       (o = e.column) != null && o.name && t.emit("remove:scrollOffset", e.column.name);
     }), {
@@ -826,32 +826,32 @@ const Vt = /* @__PURE__ */ I(Tt, [["render", Gt]]), Mt = [
       rootInlineStyles: z,
       headerContentStyles: W,
       headerContentInlineStyles: V,
-      wrapInlineStyle: M,
+      wrapInlineStyle: I,
       resizeHandleStyles: C,
       isSortable: D,
       isResizable: g,
       model: S,
       toggleSorting: E,
       onResizeStart: F,
-      DATA_GRID_DEFAULT_MIN_WIDTH: le
+      DATA_GRID_DEFAULT_MIN_WIDTH: ie
     };
   }
 });
-function Wt(e, t, l, D, g, f) {
+function Ft(e, t, l, D, g, f) {
   const C = v("OrIcon");
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles),
+    class: u(e.rootStyles),
     style: K(e.rootInlineStyles),
-    onClick: t[2] || (t[2] = (M) => e.toggleSorting())
+    onClick: t[2] || (t[2] = (I) => e.toggleSorting())
   }, [
     e.override ? m(e.$slots, "default", { key: 0 }) : (n(), b("div", {
       key: 1,
-      class: d(e.headerContentStyles),
+      class: u(e.headerContentStyles),
       style: K(e.headerContentInlineStyles)
     }, [
-      se("div", {
-        class: d(["truncate"]),
+      le("div", {
+        class: u(["truncate"]),
         style: K(e.wrapInlineStyle)
       }, [
         m(e.$slots, "default")
@@ -863,14 +863,14 @@ function Wt(e, t, l, D, g, f) {
     ], 6)),
     e.isResizable ? (n(), b("div", {
       key: 2,
-      class: d(e.resizeHandleStyles),
-      onMousedown: t[0] || (t[0] = te((...M) => e.onResizeStart && e.onResizeStart(...M), ["stop", "prevent"])),
-      onClick: t[1] || (t[1] = te(() => {
+      class: u(e.resizeHandleStyles),
+      onMousedown: t[0] || (t[0] = ae((...I) => e.onResizeStart && e.onResizeStart(...I), ["stop", "prevent"])),
+      onClick: t[1] || (t[1] = ae(() => {
       }, ["stop"]))
     }, null, 34)) : k("", !0)
   ], 6);
 }
-const Et = /* @__PURE__ */ I(It, [["render", Wt]]), zt = [
+const Ht = /* @__PURE__ */ R(zt, [["render", Ft]]), jt = [
   // Position
   "sticky top-0 z-[10]",
   // Layout
@@ -882,7 +882,7 @@ const Et = /* @__PURE__ */ I(It, [["render", Wt]]), zt = [
   "dark:children:theme-foreground-default-dark",
   "children:theme-background-surface-variant-1",
   "dark:children:theme-background-surface-variant-1-dark"
-], Ft = {
+], Pt = {
   [w.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
@@ -899,7 +899,7 @@ const Et = /* @__PURE__ */ I(It, [["render", Wt]]), zt = [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, Ht = R({
+}, Nt = M({
   name: "OrDataGridTableHeaderRow",
   props: {
     variant: {
@@ -913,8 +913,8 @@ const Et = /* @__PURE__ */ I(It, [["render", Wt]]), zt = [
   setup(e) {
     const t = T(), l = r(() => [
       "or-data-grid-table-header-row-v3",
-      ...zt,
-      ...Ft[e.variant]
+      ...jt,
+      ...Pt[e.variant]
     ]);
     return {
       root: t,
@@ -922,18 +922,18 @@ const Et = /* @__PURE__ */ I(It, [["render", Wt]]), zt = [
     };
   }
 });
-function jt(e, t, l, D, g, f) {
+function Ut(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     m(e.$slots, "default")
   ], 2);
 }
-const Pt = /* @__PURE__ */ I(Ht, [["render", jt]]), Nt = [
+const At = /* @__PURE__ */ R(Nt, [["render", Ut]]), Lt = [
   // Layout
   "contents"
-], Ut = R({
+], qt = M({
   name: "OrDataGridTableHeader",
   expose: [
     "root"
@@ -941,7 +941,7 @@ const Pt = /* @__PURE__ */ I(Ht, [["render", jt]]), Nt = [
   setup() {
     const e = T(), t = r(() => [
       "or-data-grid-table-header-v3",
-      ...Nt
+      ...Lt
     ]);
     return {
       root: e,
@@ -949,15 +949,15 @@ const Pt = /* @__PURE__ */ I(Ht, [["render", jt]]), Nt = [
     };
   }
 });
-function At(e, t, l, D, g, f) {
+function Bt(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     m(e.$slots, "default")
   ], 2);
 }
-const Lt = /* @__PURE__ */ I(Ut, [["render", At]]), qt = [
+const Kt = /* @__PURE__ */ R(qt, [["render", Bt]]), Xt = [
   // Layout
   "layout-row justify-center items-center",
   // Spacing
@@ -971,7 +971,7 @@ const Lt = /* @__PURE__ */ I(Ut, [["render", At]]), qt = [
   "dark:theme-foreground-default-dark",
   "theme-background-default",
   "dark:theme-background-default-dark"
-], Bt = {
+], Jt = {
   [w.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
@@ -988,7 +988,7 @@ const Lt = /* @__PURE__ */ I(Ut, [["render", At]]), qt = [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, Kt = R({
+}, Qt = M({
   name: "OrDataGridTablePlaceholder",
   props: {
     variant: {
@@ -1002,8 +1002,8 @@ const Lt = /* @__PURE__ */ I(Ut, [["render", At]]), qt = [
   setup(e) {
     const t = T(), l = r(() => [
       "or-data-grid-table-placeholder-v3",
-      ...qt,
-      ...Bt[e.variant]
+      ...Xt,
+      ...Jt[e.variant]
     ]);
     return {
       root: t,
@@ -1011,15 +1011,15 @@ const Lt = /* @__PURE__ */ I(Ut, [["render", At]]), qt = [
     };
   }
 });
-function Xt(e, t, l, D, g, f) {
+function Yt(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     m(e.$slots, "default")
   ], 2);
 }
-const Jt = /* @__PURE__ */ I(Kt, [["render", Xt]]), Qt = [
+const Zt = /* @__PURE__ */ R(Qt, [["render", Yt]]), xt = [
   // Layout
   "grid content-start",
   "w-full min-w-0 min-h-0",
@@ -1027,7 +1027,7 @@ const Jt = /* @__PURE__ */ I(Kt, [["render", Xt]]), Qt = [
   "overflow-auto",
   // Interactivity
   "interactivity-default"
-], Yt = R({
+], _t = M({
   name: "OrDataGridTable",
   props: {
     columns: {
@@ -1049,16 +1049,16 @@ const Jt = /* @__PURE__ */ I(Kt, [["render", Xt]]), Qt = [
   setup(e) {
     const t = T(), l = r(() => [
       "or-data-grid-table-v3",
-      ...Qt
+      ...xt
     ]), D = r(() => {
       const g = e.columns.map((f) => {
         const C = e.columnWidths[f.name] || f.width;
         if (C && (C.includes("minmax") || C.includes("calc")))
           return C;
-        const M = C ?? "1fr", z = f.minWidth || (C ? le : f.fitContent || f.stickiness ? "max-content" : "120px"), p = f.maxWidth || (C ? M === "max-content" ? "max-content" : M : f.fitContent || f.minWidth || f.stickiness ? "max-content" : "1fr");
-        return f.fitContent ? "max-content" : M.endsWith("px") ? M : `minmax(${z}, ${p})`;
+        const I = C ?? "1fr", z = f.minWidth || (C ? ie : f.fitContent || f.stickiness ? "max-content" : "120px"), p = f.maxWidth || (C ? I === "max-content" ? "max-content" : I : f.fitContent || f.minWidth || f.stickiness ? "max-content" : "1fr");
+        return f.fitContent ? "max-content" : I.endsWith("px") ? I : `minmax(${z}, ${p})`;
       });
-      return e.features.selecting ? { gridTemplateColumns: `${fe} ${g.join(" ")}` } : { gridTemplateColumns: g.join(" ") };
+      return e.features.selecting ? { gridTemplateColumns: `${he} ${g.join(" ")}` } : { gridTemplateColumns: g.join(" ") };
     });
     return {
       root: t,
@@ -1067,22 +1067,22 @@ const Jt = /* @__PURE__ */ I(Kt, [["render", Xt]]), Qt = [
     };
   }
 });
-function Zt(e, t, l, D, g, f) {
+function ea(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles),
+    class: u(e.rootStyles),
     style: K(e.rootInlineStyles)
   }, [
     m(e.$slots, "default")
   ], 6);
 }
-const xt = /* @__PURE__ */ I(Yt, [["render", Zt]]), _t = [
+const ta = /* @__PURE__ */ R(_t, [["render", ea]]), aa = [
   // Layout
   "layout-row",
   // Spacing
   "gap-xl",
   "pb-md"
-], ea = R({
+], na = M({
   name: "OrDataGridToolbar",
   expose: [
     "root"
@@ -1090,7 +1090,7 @@ const xt = /* @__PURE__ */ I(Yt, [["render", Zt]]), _t = [
   setup() {
     const e = T(), t = r(() => [
       "or-data-grid-toolbar-v3",
-      ..._t
+      ...aa
     ]);
     return {
       root: e,
@@ -1098,20 +1098,20 @@ const xt = /* @__PURE__ */ I(Yt, [["render", Zt]]), _t = [
     };
   }
 });
-function ta(e, t, l, D, g, f) {
+function oa(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     m(e.$slots, "default")
   ], 2);
 }
-const aa = /* @__PURE__ */ I(ea, [["render", ta]]), na = [
+const ra = /* @__PURE__ */ R(na, [["render", oa]]), sa = [
   // Position
   "grid sticky z-10",
   // Layout
   "col-span-full"
-], oa = {
+], la = {
   [w.Standard]: [
     // Position
     "top-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
@@ -1128,9 +1128,9 @@ const aa = /* @__PURE__ */ I(ea, [["render", ta]]), na = [
     // Position
     "top-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, ra = R({
+}, ia = M({
   components: {
-    OrNotification: Le
+    OrNotification: Ke
   },
   props: {
     notification: {
@@ -1149,20 +1149,20 @@ const aa = /* @__PURE__ */ I(ea, [["render", ta]]), na = [
     return {
       rootStyles: r(() => [
         "or-data-grid-notification-v3",
-        ...na,
-        ...oa[e.variant]
+        ...sa,
+        ...la[e.variant]
       ])
     };
   }
 });
-function sa(e, t, l, D, g, f) {
+function da(e, t, l, D, g, f) {
   const C = v("OrNotification");
   return n(), b("div", {
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
-    P(C, Ge(e.notification, {
+    P(C, Me(e.notification, {
       class: "rounded-0 shadow-none",
-      onClose: t[0] || (t[0] = (M) => e.$emit("close-notification"))
+      onClose: t[0] || (t[0] = (I) => e.$emit("close-notification"))
     }), {
       default: $(() => [
         e.$slots.notification ? m(e.$slots, "notification", { key: 0 }) : k("", !0)
@@ -1171,7 +1171,7 @@ function sa(e, t, l, D, g, f) {
     }, 16)
   ], 2);
 }
-const la = /* @__PURE__ */ I(ra, [["render", sa]]), ia = [
+const ca = /* @__PURE__ */ R(ia, [["render", da]]), ua = [
   // Layout
   "grid col-span-full grid-cols-[subgrid]",
   // Typography
@@ -1184,7 +1184,7 @@ const la = /* @__PURE__ */ I(ra, [["render", sa]]), ia = [
   "dark:children:theme-foreground-default-dark",
   "children:theme-background-default",
   "dark:children:theme-background-default-dark"
-], da = {
+], ma = {
   [w.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
@@ -1201,7 +1201,7 @@ const la = /* @__PURE__ */ I(ra, [["render", sa]]), ia = [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, ca = R({
+}, fa = M({
   name: "OrDataGridTableExtraRow",
   props: {
     variant: {
@@ -1215,8 +1215,8 @@ const la = /* @__PURE__ */ I(ra, [["render", sa]]), ia = [
   setup(e) {
     const t = T(), l = r(() => [
       "or-data-grid-table-extra-row-v3",
-      ...ia,
-      ...da[e.variant]
+      ...ua,
+      ...ma[e.variant]
     ]);
     return {
       root: t,
@@ -1224,41 +1224,41 @@ const la = /* @__PURE__ */ I(ra, [["render", sa]]), ia = [
     };
   }
 });
-function ua(e, t, l, D, g, f) {
+function ga(e, t, l, D, g, f) {
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
     m(e.$slots, "default")
   ], 2);
 }
-const ma = /* @__PURE__ */ I(ca, [["render", ua]]), fa = [
+const ha = /* @__PURE__ */ R(fa, [["render", ga]]), ya = [
   // Layout
   "layout-column min-h-0 w-full"
-], ga = R({
+], va = M({
   name: "OrDataGrid",
   components: {
-    OrCheckbox: ue,
-    OrDataGridFooter: Qe,
-    OrDataGridHeader: tt,
-    OrDataGridTable: xt,
-    OrDataGridTableContent: yt,
-    OrDataGridTableContentCell: st,
-    OrDataGridTableContentRow: mt,
-    OrDataGridTableFooter: Vt,
-    OrDataGridTableFooterCell: pt,
-    OrDataGridTableFooterRow: St,
-    OrDataGridTableExtraRow: ma,
-    OrDataGridTableHeader: Lt,
-    OrDataGridTableHeaderCell: Et,
-    OrDataGridTableHeaderRow: Pt,
-    OrDataGridTablePlaceholder: Jt,
-    OrDataGridToolbar: aa,
-    OrDataGridNotification: la,
-    OrIconButton: we,
-    OrPagination: De,
-    OrSearch: Se,
-    OrSkeletonText: Ce
+    OrCheckbox: fe,
+    OrDataGridFooter: xe,
+    OrDataGridHeader: ot,
+    OrDataGridTable: ta,
+    OrDataGridTableContent: bt,
+    OrDataGridTableContentCell: dt,
+    OrDataGridTableContentRow: ht,
+    OrDataGridTableFooter: Rt,
+    OrDataGridTableFooterCell: wt,
+    OrDataGridTableFooterRow: Gt,
+    OrDataGridTableExtraRow: ha,
+    OrDataGridTableHeader: Kt,
+    OrDataGridTableHeaderCell: Ht,
+    OrDataGridTableHeaderRow: At,
+    OrDataGridTablePlaceholder: Zt,
+    OrDataGridToolbar: ra,
+    OrDataGridNotification: ca,
+    OrIconButton: Ce,
+    OrPagination: Te,
+    OrSearch: Ge,
+    OrSkeletonText: Ve
   },
   model: {
     prop: "modelValue",
@@ -1273,6 +1273,10 @@ const ma = /* @__PURE__ */ I(ca, [["render", ua]]), fa = [
       type: Array,
       default: () => []
     },
+    itemKey: {
+      type: [String, Function],
+      default: "id"
+    },
     columns: {
       type: Array,
       required: !0
@@ -1314,24 +1318,24 @@ const ma = /* @__PURE__ */ I(ca, [["render", ua]]), fa = [
   setup(e, t) {
     const l = T(), D = T(), g = T(), f = r(() => [
       "or-data-grid-v3",
-      ...fa
+      ...ya
     ]), C = r(() => {
       const a = {
-        scrollPaddingInlineStart: `${[...U.values()].reduce((c, u) => c + u, 0)}px`,
-        scrollPaddingInlineEnd: `${[...q.values()].reduce((c, u) => c + u, 0)}px`
+        scrollPaddingInlineStart: `${[...U.values()].reduce((d, c) => d + c, 0)}px`,
+        scrollPaddingInlineEnd: `${[...q.values()].reduce((d, c) => d + c, 0)}px`
       };
-      return U.forEach((c, u) => {
-        a[`--or-dg-col-width-${u}`] = `${c}px`;
-      }), q.forEach((c, u) => {
-        a[`--or-dg-col-width-${u}`] = `${c}px`;
+      return U.forEach((d, c) => {
+        a[`--or-dg-col-width-${c}`] = `${d}px`;
+      }), q.forEach((d, c) => {
+        a[`--or-dg-col-width-${c}`] = `${d}px`;
       }), a;
-    }), M = r({
-      get: () => !!(e.items && e.items.length) && e.items.every((a) => z.value.includes(a.id)),
+    }), I = r({
+      get: () => !!(e.items && e.items.length) && e.items.every((a) => z.value.includes(_(a))),
       set: (a) => {
         a && e.items ? z.value = [
           .../* @__PURE__ */ new Set([
             ...z.value,
-            ...e.items.map((c) => c.id)
+            ...e.items.map((d) => _(d))
           ])
         ] : z.value = [];
       }
@@ -1395,54 +1399,54 @@ const ma = /* @__PURE__ */ I(ca, [["render", ua]]), fa = [
           expanded: a
         });
       }
-    }), F = (a) => E.value.indexOf(a.id) !== -1, h = (a) => {
+    }), F = (a) => E.value.indexOf(_(a)) !== -1, h = (a) => {
       if (!a.children || a.children.length === 0) return;
-      const c = E.value;
-      c.indexOf(a.id) === -1 ? E.value = [...c, a.id] : E.value = c.filter((j) => j !== a.id);
+      const d = _(a), c = E.value;
+      c.indexOf(d) === -1 ? E.value = [...c, d] : E.value = c.filter((Y) => Y !== d);
     };
-    me(() => V.value && V.value.offset, () => {
+    ge(() => V.value && V.value.offset, () => {
       g.value && g.value.root && g.value.root.scrollTo({
         top: 0,
         behavior: "smooth"
       });
     });
-    const o = r(() => !e.features.hierarchy || !e.items ? e.items || [] : $e(e.items, F)), y = r(() => e.features.selecting && (typeof e.features.selecting == "object" ? e.features.selecting.showCounter !== !1 : !0)), G = r(() => !e.items || e.items.length === 0 || e.loading || typeof e.features.selecting == "object" && e.features.selecting.disabled), H = r(() => {
+    const o = r(() => !e.features.hierarchy || !e.items ? e.items || [] : Se(e.items, F)), y = r(() => e.features.selecting && (typeof e.features.selecting == "object" ? e.features.selecting.showCounter !== !1 : !0)), G = r(() => !e.items || e.items.length === 0 || e.loading || typeof e.features.selecting == "object" && e.features.selecting.disabled), H = r(() => {
       const a = V.value;
       return a && a.limit || 10;
-    }), N = T({}), X = r(() => e.columns), U = de(/* @__PURE__ */ new Map()), q = de(/* @__PURE__ */ new Map()), Z = r(() => {
-      const a = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), u = [], j = [];
-      e.features.selecting && u.push({
+    }), N = T({}), X = r(() => e.columns), U = ue(/* @__PURE__ */ new Map()), q = ue(/* @__PURE__ */ new Map()), x = r(() => {
+      const a = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map(), c = [], j = [];
+      e.features.selecting && c.push({
         name: "_check",
         stickiness: "start",
         alignment: "center"
       }), X.value.forEach((L) => {
-        L.stickiness === "start" ? u.push(L) : L.stickiness === "end" && j.push(L);
-      });
-      let ee = "0px";
-      u.forEach((L) => {
-        a.set(L.name, ee), ee = `calc(${ee} + var(--or-dg-col-width-${L.name}, 0px))`;
+        L.stickiness === "start" ? c.push(L) : L.stickiness === "end" && j.push(L);
       });
       let Y = "0px";
+      c.forEach((L) => {
+        a.set(L.name, Y), Y = `calc(${Y} + var(--or-dg-col-width-${L.name}, 0px))`;
+      });
+      let Z = "0px";
       return [...j].reverse().forEach((L) => {
-        c.set(L.name, Y), Y = `calc(${Y} + var(--or-dg-col-width-${L.name}, 0px))`;
+        d.set(L.name, Z), Z = `calc(${Z} + var(--or-dg-col-width-${L.name}, 0px))`;
       }), {
         start: a,
-        end: c
+        end: d
       };
     });
     function B(a) {
       S.value = a;
     }
-    function J(a, c, u) {
-      switch (u.stickiness) {
+    function J(a, d, c) {
+      switch (c.stickiness) {
         case "start":
-          U.set(u.name, c), q.delete(u.name);
+          U.set(c.name, d), q.delete(c.name);
           break;
         case "end":
-          U.delete(u.name), q.set(u.name, c);
+          U.delete(c.name), q.set(c.name, d);
           break;
         default:
-          ie(u.name);
+          de(c.name);
           break;
       }
     }
@@ -1452,88 +1456,97 @@ const ma = /* @__PURE__ */ I(ca, [["render", ua]]), fa = [
     function i(a) {
       e.interactiveRows && t.emit("blur:row", a);
     }
-    function Q(a, c, u) {
+    function Q(a, d, c) {
       e.interactiveRows && t.emit("hover:cell", {
         item: a,
-        columnName: c,
-        value: u
+        columnName: d,
+        value: c
       });
     }
-    function A(a, c, u) {
+    function A(a, d, c) {
       e.interactiveRows && t.emit("blur:cell", {
         item: a,
-        columnName: c,
-        value: u
+        columnName: d,
+        value: c
       });
     }
-    function ge(a) {
+    function ye(a) {
       e.interactiveRows && t.emit("click:row", a);
     }
-    const he = ce(ye, 500);
-    function ye() {
-      var c;
+    const ve = me(ke, 500);
+    function ke() {
+      var d;
       if (typeof window > "u" || !e.features.storageKey) return;
       const a = {};
-      X.value.forEach((u) => {
-        const j = N.value[u.name] || u.width;
-        u.name && j && (a[u.name] = j);
+      X.value.forEach((c) => {
+        const j = N.value[c.name] || c.width;
+        c.name && j && (a[c.name] = j);
       }), localStorage.setItem(`or-data-grid-v3-widths-${e.features.storageKey}`, JSON.stringify({
         widths: a,
-        containerWidth: (c = l.value) == null ? void 0 : c.offsetWidth
+        containerWidth: (d = l.value) == null ? void 0 : d.offsetWidth
       }));
     }
-    const ae = T(!1);
-    function ve(a, c) {
-      ae.value = !0, N.value = {
+    const ne = T(!1);
+    function be(a, d) {
+      ne.value = !0, N.value = {
         ...N.value,
-        [a.name]: `${c}px`
-      }, e.features.storageKey && he(), ke();
+        [a.name]: `${d}px`
+      }, e.features.storageKey && ve(), pe();
     }
-    const ke = ce(() => {
-      ae.value = !1;
-    }, 1e3), be = T(0);
-    function pe() {
+    const pe = me(() => {
+      ne.value = !1;
+    }, 1e3), Oe = T(0);
+    function $e() {
       if (!(typeof window > "u" || !e.features.storageKey))
         try {
           const a = localStorage.getItem(`or-data-grid-v3-widths-${e.features.storageKey}`);
           if (a) {
-            const c = JSON.parse(a), u = c.widths || c, j = c.containerWidth;
+            const d = JSON.parse(a), c = d.widths || d, j = d.containerWidth;
             if (j && l.value && Math.abs(l.value.offsetWidth - j) > 10) {
-              be.value = j;
+              Oe.value = j;
               return;
             }
-            N.value = u;
+            N.value = c;
           }
         } catch (a) {
           console.error("[OrDataGrid]: Failed to load column widths from localStorage", a);
         }
     }
-    We(l, (a) => {
-      const c = a[0], { width: u } = c.contentRect;
-      if (!(u <= 0 || ae.value || !e.features.storageKey) && Object.keys(N.value).length > 0) {
+    Fe(l, (a) => {
+      const d = a[0], { width: c } = d.contentRect;
+      if (!(c <= 0 || ne.value || !e.features.storageKey) && Object.keys(N.value).length > 0) {
         const j = localStorage.getItem(`or-data-grid-v3-widths-${e.features.storageKey}`);
         if (j)
           try {
-            const Y = JSON.parse(j).containerWidth;
-            Y && Math.abs(u - Y) > 10 && (N.value = {});
+            const Z = JSON.parse(j).containerWidth;
+            Z && Math.abs(c - Z) > 10 && (N.value = {});
           } catch {
           }
       }
-    }), Ve(() => {
-      pe();
+    }), Re(() => {
+      $e();
     });
-    function ie(a) {
+    function de(a) {
       U.delete(a), q.delete(a);
     }
-    function Oe(a) {
+    function we(a) {
       a.currentTarget.scrollIntoView({ block: "nearest" });
     }
+    function ce(a, d) {
+      return a[d];
+    }
+    function _(a) {
+      return typeof e.itemKey == "function" ? e.itemKey(a) : ce(a, e.itemKey);
+    }
+    function De(a, d, c) {
+      a[d] = c;
+    }
     return {
       root: l,
       rootStyles: f,
       pagination: D,
       tableInlineStyles: C,
-      selectingIndicator: M,
+      selectingIndicator: I,
       showSelectingCouter: y,
       selectingDisabled: G,
       skeletonsLength: H,
@@ -1543,46 +1556,48 @@ const ma = /* @__PURE__ */ I(ca, [["render", ua]]), fa = [
       handleMouseLeaveRow: i,
       handleMouseEnterCell: Q,
       handleMouseLeaveCell: A,
-      handleRowClick: ge,
+      handleRowClick: ye,
       toggleExpand: h,
       isExpanded: F,
-      updateColumnWidth: ve,
+      updateColumnWidth: be,
       columnWidths: N,
       selectingModel: z,
       filteringModel: p,
       searchingModel: S,
       sortingModel: W,
       pagingModel: V,
-      stickyOffsets: Z,
+      stickyOffsets: x,
       updateScrollOffset: J,
-      removeScrollOffset: ie,
+      removeScrollOffset: de,
       updateSearchingModel: B,
+      getItemValue: ce,
+      getItemId: _,
       scrollToTop: () => {
         g.value && g.value.root && g.value.root.scrollTo({
           top: 0,
           behavior: "smooth"
         });
       },
-      scrollTo: Oe,
-      onInput: (a, c, u) => {
-        a[c] = u, t.emit("update:item", a);
+      scrollTo: we,
+      onInput: (a, d, c) => {
+        De(a, d, c), t.emit("update:item", a);
       }
     };
   }
-}), ha = {
+}), ka = {
   key: 0,
   class: "flex items-center justify-center w-6 h-6 shrink-0"
 };
-function ya(e, t, l, D, g, f) {
-  const C = v("OrSearch"), M = v("OrDataGridHeader"), z = v("OrDataGridToolbar"), p = v("OrCheckbox"), S = v("OrDataGridTableHeaderCell"), W = v("OrDataGridTableHeaderRow"), V = v("OrDataGridTableHeader"), E = v("OrDataGridNotification"), F = v("OrDataGridTableExtraRow"), h = v("OrSkeletonText"), o = v("OrDataGridTableContentCell"), y = v("OrDataGridTableContentRow"), G = v("OrIconButton"), H = v("OrDataGridTablePlaceholder"), N = v("OrDataGridTableContent"), X = v("OrDataGridTable"), U = v("OrDataGridTableFooterCell"), q = v("OrDataGridTableFooterRow"), Z = v("OrDataGridTableFooter"), B = v("OrPagination"), J = v("OrDataGridFooter");
+function ba(e, t, l, D, g, f) {
+  const C = v("OrSearch"), I = v("OrDataGridHeader"), z = v("OrDataGridToolbar"), p = v("OrCheckbox"), S = v("OrDataGridTableHeaderCell"), W = v("OrDataGridTableHeaderRow"), V = v("OrDataGridTableHeader"), E = v("OrDataGridNotification"), F = v("OrDataGridTableExtraRow"), h = v("OrSkeletonText"), o = v("OrDataGridTableContentCell"), y = v("OrDataGridTableContentRow"), G = v("OrIconButton"), H = v("OrDataGridTablePlaceholder"), N = v("OrDataGridTableContent"), X = v("OrDataGridTable"), U = v("OrDataGridTableFooterCell"), q = v("OrDataGridTableFooterRow"), x = v("OrDataGridTableFooter"), B = v("OrPagination"), J = v("OrDataGridFooter");
   return n(), b("div", {
     ref: "root",
-    class: d(e.rootStyles)
+    class: u(e.rootStyles)
   }, [
-    e.$slots.title || e.features.searching || e.$slots.search || e.$slots.extraActions ? (n(), O(M, {
+    e.$slots.title || e.features.searching || e.$slots.search || e.$slots.extraActions ? (n(), O(I, {
       key: 0,
-      class: d(["shrink-0"])
-    }, ne({ _: 2 }, [
+      class: u(["shrink-0"])
+    }, oe({ _: 2 }, [
       e.$slots.title ? {
         name: "title",
         fn: $(() => [
@@ -1593,7 +1608,7 @@ function ya(e, t, l, D, g, f) {
       e.features.searching ? {
         name: "searching",
         fn: $(() => [
-          m(e.$slots, "search", Me(Re({ updateSearchingModel: e.updateSearchingModel, searchingModel: e.searchingModel })), () => [
+          m(e.$slots, "search", We(Ee({ updateSearchingModel: e.updateSearchingModel, searchingModel: e.searchingModel })), () => [
             P(C, {
               modelValue: e.searchingModel,
               "onUpdate:modelValue": t[0] || (t[0] = (s) => e.searchingModel = s)
@@ -1612,7 +1627,7 @@ function ya(e, t, l, D, g, f) {
     ]), 1024)) : k("", !0),
     e.$slots.toolbar ? (n(), O(z, {
       key: 1,
-      class: d(["shrink-0"])
+      class: u(["shrink-0"])
     }, {
       default: $(() => [
         m(e.$slots, "toolbar")
@@ -1621,7 +1636,7 @@ function ya(e, t, l, D, g, f) {
     })) : k("", !0),
     P(X, {
       ref: "table",
-      class: d(["grow", "overscroll-none", { "grid-rows-[auto_1fr]": e.items.length === 0 }]),
+      class: u(["grow", "overscroll-none", { "grid-rows-[auto_1fr]": e.items.length === 0 }]),
       style: K(e.tableInlineStyles),
       columns: e.actualColumns,
       "column-widths": e.columnWidths,
@@ -1651,7 +1666,7 @@ function ya(e, t, l, D, g, f) {
                   ]),
                   _: 1
                 }, 8, ["sticky-offset", "onUpdate:scrollOffset", "onRemove:scrollOffset"])) : k("", !0),
-                (n(!0), b(x, null, _(e.actualColumns, (s) => (n(), O(S, {
+                (n(!0), b(ee, null, te(e.actualColumns, (s) => (n(), O(S, {
                   key: s.name,
                   modelValue: e.sortingModel,
                   "onUpdate:modelValue": t[2] || (t[2] = (i) => e.sortingModel = i),
@@ -1663,7 +1678,7 @@ function ya(e, t, l, D, g, f) {
                   "onUpdate:columnWidth": (i) => e.updateColumnWidth(s, i)
                 }, {
                   default: $(() => [
-                    oe(re(s.label), 1)
+                    re(se(s.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["modelValue", "column", "features", "sticky-offset", "onUpdate:scrollOffset", "onRemove:scrollOffset", "onUpdate:columnWidth"]))), 128))
@@ -1678,7 +1693,7 @@ function ya(e, t, l, D, g, f) {
           notification: e.notification,
           variant: e.variant,
           onCloseNotification: t[3] || (t[3] = (s) => e.$emit("close-notification"))
-        }, ne({ _: 2 }, [
+        }, oe({ _: 2 }, [
           e.$slots.notification ? {
             name: "notification",
             fn: $(() => [
@@ -1699,7 +1714,7 @@ function ya(e, t, l, D, g, f) {
               ]),
               _: 3
             }, 8, ["variant"])) : k("", !0),
-            e.loading ? (n(!0), b(x, { key: 1 }, _(e.skeletonsLength, (s) => (n(), O(y, {
+            e.loading ? (n(!0), b(ee, { key: 1 }, te(e.skeletonsLength, (s) => (n(), O(y, {
               key: s,
               variant: e.variant,
               interactive: e.interactiveRows
@@ -1718,7 +1733,7 @@ function ya(e, t, l, D, g, f) {
                   ]),
                   _: 1
                 }, 8, ["sticky-offset", "variant"])) : k("", !0),
-                (n(!0), b(x, null, _(e.actualColumns, (i) => (n(), O(o, {
+                (n(!0), b(ee, null, te(e.actualColumns, (i) => (n(), O(o, {
                   key: i.name,
                   column: i,
                   features: e.features,
@@ -1735,10 +1750,10 @@ function ya(e, t, l, D, g, f) {
                 }, 1032, ["column", "features", "sticky-offset", "variant"]))), 128))
               ]),
               _: 2
-            }, 1032, ["variant", "interactive"]))), 128)) : e.items.length > 0 ? (n(!0), b(x, { key: 2 }, _(e.actualItems, (s) => (n(), O(y, {
-              key: s.id,
+            }, 1032, ["variant", "interactive"]))), 128)) : e.items.length > 0 ? (n(!0), b(ee, { key: 2 }, te(e.actualItems, (s) => (n(), O(y, {
+              key: e.getItemId(s),
               variant: e.variant,
-              selected: e.selectingModel.includes(s.id),
+              selected: e.selectingModel.includes(e.getItemId(s)),
               interactive: e.interactiveRows,
               onMouseenter: () => e.handleMouseEnterRow(s),
               onMouseleave: () => e.handleMouseLeaveRow(s),
@@ -1753,51 +1768,51 @@ function ya(e, t, l, D, g, f) {
                   override: !0,
                   "force-state": "none",
                   class: "!px-none",
-                  onMouseenter: () => e.handleMouseEnterCell(s, "selecting", e.selectingModel.indexOf(s.id) !== -1),
-                  onMouseleave: () => e.handleMouseLeaveCell(s, "selecting", e.selectingModel.indexOf(s.id) !== -1)
+                  onMouseenter: () => e.handleMouseEnterCell(s, "selecting", e.selectingModel.indexOf(e.getItemId(s)) !== -1),
+                  onMouseleave: () => e.handleMouseLeaveCell(s, "selecting", e.selectingModel.indexOf(e.getItemId(s)) !== -1)
                 }, {
                   default: $(() => [
                     P(p, {
                       modelValue: e.selectingModel,
                       "onUpdate:modelValue": t[4] || (t[4] = (i) => e.selectingModel = i),
-                      value: s.id,
+                      value: e.getItemId(s),
                       disabled: e.selectingDisabled
                     }, null, 8, ["modelValue", "value", "disabled"])
                   ]),
                   _: 2
                 }, 1032, ["sticky-offset", "variant", "onMouseenter", "onMouseleave"])) : k("", !0),
-                (n(!0), b(x, null, _(e.actualColumns, (i, Q) => (n(), O(o, {
+                (n(!0), b(ee, null, te(e.actualColumns, (i, Q) => (n(), O(o, {
                   key: i.name,
-                  "model-value": s[i.name],
+                  "model-value": e.getItemValue(s, i.name),
                   column: i,
                   features: e.features,
                   "sticky-offset": i.stickiness === "start" ? e.stickyOffsets.start.get(i.name) : i.stickiness === "end" ? e.stickyOffsets.end.get(i.name) : void 0,
                   variant: e.variant,
                   onInput: (A) => e.onInput(s, i.name, A),
                   onFocusin: t[6] || (t[6] = (A) => e.scrollTo(A)),
-                  onMouseenter: () => e.handleMouseEnterCell(s, i.name, s[i.name]),
-                  onMouseleave: () => e.handleMouseLeaveCell(s, i.name, s[i.name])
+                  onMouseenter: () => e.handleMouseEnterCell(s, i.name, e.getItemValue(s, i.name)),
+                  onMouseleave: () => e.handleMouseLeaveCell(s, i.name, e.getItemValue(s, i.name))
                 }, {
                   default: $(() => [
-                    se("div", {
-                      class: d(["flex items-center gap-xs h-full w-full min-w-0", [
+                    le("div", {
+                      class: u(["flex items-center gap-xs h-full w-full min-w-0", [
                         i.alignment === "end" ? "justify-end" : i.alignment === "center" ? "justify-center" : "justify-start"
                       ]]),
                       style: K(Q === 0 ? { paddingLeft: (s.level || 0) * 24 + "px" } : void 0)
                     }, [
-                      Q === 0 && e.features.hierarchy ? (n(), b("div", ha, [
+                      Q === 0 && e.features.hierarchy ? (n(), b("div", ka, [
                         s.children && s.children.length > 0 ? (n(), O(G, {
                           key: 0,
                           icon: "chevron_right",
                           size: "m",
-                          class: d(["transition-transform duration-200", { "rotate-90": e.isExpanded(s) }]),
-                          onClick: te((A) => e.toggleExpand(s), ["stop"]),
-                          onMousedown: t[5] || (t[5] = te(() => {
+                          class: u(["transition-transform duration-200", { "rotate-90": e.isExpanded(s) }]),
+                          onClick: ae((A) => e.toggleExpand(s), ["stop"]),
+                          onMousedown: t[5] || (t[5] = ae(() => {
                           }, ["prevent"]))
                         }, null, 8, ["class", "onClick"])) : k("", !0)
                       ])) : k("", !0),
-                      se("div", {
-                        class: d(["min-w-0", [
+                      le("div", {
+                        class: u(["min-w-0", [
                           Q === 0 ? "flex-grow" : "",
                           i.alignment === "end" ? "text-end" : i.alignment === "center" ? "text-center" : "text-start",
                           (i.wrapping !== void 0 && i.wrapping !== null ? i.wrapping : e.variant === "dynamic" && !i.control) ? "whitespace-pre-wrap break-words" : i.fitContent ? "" : "truncate"
@@ -1807,7 +1822,7 @@ function ya(e, t, l, D, g, f) {
                           column: i,
                           item: s
                         }, () => [
-                          oe(re(s[i.name]), 1)
+                          re(se(e.getItemValue(s, i.name)), 1)
                         ])
                       ], 2)
                     ], 6)
@@ -1818,7 +1833,7 @@ function ya(e, t, l, D, g, f) {
               _: 2
             }, 1032, ["variant", "selected", "interactive", "onMouseenter", "onMouseleave", "onClick"]))), 128)) : e.$slots.noSearchResults && (e.features.filtering && e.filteringModel || e.features.searching && e.searchingModel) ? (n(), O(H, {
               key: 3,
-              class: d(["col-span-full"]),
+              class: u(["col-span-full"]),
               variant: e.variant
             }, {
               default: $(() => [
@@ -1830,7 +1845,7 @@ function ya(e, t, l, D, g, f) {
               _: 3
             }, 8, ["variant"])) : e.$slots.empty ? (n(), O(H, {
               key: 4,
-              class: d(["col-span-full"]),
+              class: u(["col-span-full"]),
               variant: e.variant
             }, {
               default: $(() => [
@@ -1853,10 +1868,10 @@ function ya(e, t, l, D, g, f) {
       ]),
       _: 3
     }, 8, ["class", "style", "columns", "column-widths", "features"]),
-    e.$slots["extra-row"] ? (n(), O(Z, { key: 2 }, {
+    e.$slots["extra-row"] ? (n(), O(x, { key: 2 }, {
       default: $(() => [
         P(q, {
-          class: d(["shrink-0"]),
+          class: u(["shrink-0"]),
           variant: e.variant
         }, {
           default: $(() => [
@@ -1874,12 +1889,12 @@ function ya(e, t, l, D, g, f) {
     })) : k("", !0),
     e.$slots.actions || e.showSelectingCouter || e.features.paging ? (n(), O(J, {
       key: 3,
-      class: d(["shrink-0"])
-    }, ne({ _: 2 }, [
+      class: u(["shrink-0"])
+    }, oe({ _: 2 }, [
       e.features.selecting && e.selectingModel.length > 0 ? {
         name: "status",
         fn: $(() => [
-          oe(re(e.selectingModel.length) + " row(s) selected ", 1)
+          re(se(e.selectingModel.length) + " row(s) selected ", 1)
         ]),
         key: "0"
       } : void 0,
@@ -1906,27 +1921,27 @@ function ya(e, t, l, D, g, f) {
     ]), 1024)) : k("", !0)
   ], 2);
 }
-const ja = /* @__PURE__ */ I(ga, [["render", ya]]);
+const Ua = /* @__PURE__ */ R(va, [["render", ba]]);
 export {
   w as D,
-  ja as O,
-  le as a,
-  fe as b,
-  Qe as c,
-  tt as d,
-  st as e,
-  mt as f,
-  yt as g,
-  pt as h,
-  St as i,
-  Vt as j,
-  Et as k,
-  Pt as l,
-  Lt as m,
-  Jt as n,
-  xt as o,
-  aa as p,
-  la as q,
-  ma as r
+  Ua as O,
+  ie as a,
+  he as b,
+  xe as c,
+  ot as d,
+  dt as e,
+  ht as f,
+  bt as g,
+  wt as h,
+  Gt as i,
+  Rt as j,
+  Ht as k,
+  At as l,
+  Kt as m,
+  Zt as n,
+  ta as o,
+  ra as p,
+  ca as q,
+  ha as r
 };
-//# sourceMappingURL=OrDataGrid-BsjzHZ6q.mjs.map
+//# sourceMappingURL=OrDataGrid-Dm8ZScw0.mjs.map