@affino/datagrid-vue-app 0.1.63 → 0.4.0

package/README.md

@@ -7,11 +7,11 @@
 Declarative Vue component layer for Affino DataGrid.
 
 `@affino/datagrid-vue-app` is the app-facing package.
-It depends on [`@affino/datagrid-vue`](https://github.com/affinio/affinio/tree/main/packages/datagrid-vue#readme), which remains the adapter and headless foundation between Vue and the grid engine.
+It depends on [`@affino/datagrid-vue`](https://github.com/affinio/datagrid/tree/main/packages/datagrid-vue#readme), which remains the adapter and headless foundation between Vue and the grid engine.
 
 Boundary doc:
 
-- [datagrid-vue-app-community-vs-enterprise.md](https://github.com/affinio/affinio/blob/main/docs/datagrid-vue-app-community-vs-enterprise.md)
+- [datagrid-vue-app-community-vs-enterprise.md](https://github.com/affinio/datagrid/blob/main/docs/datagrid-vue-app-community-vs-enterprise.md)
 
 Public export:
 
@@ -945,11 +945,11 @@ Current gantt capabilities:
 
 Reference:
 
-- [datagrid-gantt.md](https://github.com/affinio/affinio/blob/main/docs/datagrid-gantt.md)
+- [datagrid-gantt.md](https://github.com/affinio/datagrid/blob/main/docs/datagrid-gantt.md)
 
 ## Table Chrome Engine
 
-The default table renderer uses [`@affino/datagrid-chrome`](https://github.com/affinio/affinio/tree/main/packages/datagrid-chrome#readme) for shared headless table chrome geometry.
+The default table renderer uses [`@affino/datagrid-chrome`](https://github.com/affinio/datagrid/tree/main/packages/datagrid-chrome#readme) for shared headless table chrome geometry.
 
 That engine derives:
 
@@ -1268,6 +1268,8 @@ Object form:
 Columns can provide a `cellRenderer` callback that returns Vue content for the display layer.
 If a custom cell also needs keyboard-accessible interaction without breaking the grid-owned focus model, declare `cellInteraction` on the column and use `context.interactive` inside the renderer.
 For grouped rows, prefer `groupCellRenderer` so you receive structured group metadata instead of reverse-engineering the formatted disclosure label.
+If an authored renderer throws, the stage preserves the cell wrapper and falls back to the resolved `displayValue` for that cell.
+The full lifecycle, remount, cleanup, focus, async, and performance contract is documented in [`docs/datagrid-renderer-lifecycle.md`](../../docs/datagrid-renderer-lifecycle.md).
 
 ```vue
 <script setup lang="ts">
@@ -1339,6 +1341,7 @@ const columns: DataGridAppColumnInput<Row>[] = [
 - `column` and `columnIndex`
 - `value`: raw string value used by the stage
 - `displayValue`: formatted display string after presentation rules
+- `surface`: rendered surface metadata; `surface.kind` is `"real"` for materialized rows and `"placeholder"` for visual placeholder rows
 - `interactive`: resolved cell interaction contract when the column declares `cellInteraction`; otherwise `null`
 
 `groupCellRenderer` receives the same display fields for group rows plus `group`, which includes:
@@ -1386,9 +1389,23 @@ Guidelines:
 - keep group expand/collapse behind an explicit trigger inside `groupCellRenderer`; do not rely on the whole group cell acting as the disclosure target
 - the grid shell still owns focus, selection, fill, clipboard, menus, and editing; `cellInteraction` only adds semantic invoke behavior inside that model
 - prefer pure render output from row data over local mutable renderer state
+- do not mutate grid state, row data, selection, focus, or editor state while the renderer is running
+- avoid synchronous layout reads such as `getBoundingClientRect()`, `clientWidth`, or computed-style reads inside renderers; measure layout in your surrounding app lifecycle instead
+- return bounded Vue content for each cell; expensive charts, popovers, network work, or observers should mount lazily behind explicit user intent
+- provide stable keys for repeated child VNodes returned from a renderer so virtualized row/column remounts do not lose child identity unnecessarily
+- treat `surface.kind === "placeholder"` as a display-only state; do not assume placeholder rows are persisted or editable until the grid materializes them through the placeholder-row policy
+- keep per-cell renderer work proportional to one cell because the stage invokes renderers synchronously for every rendered center and pinned cell
 - keep identifiers, derived values, and formula-result columns read-only where appropriate
 - if a renderer caches local UI state, listen for targeted app-layer cell refresh and re-sync on refresh
 
+Performance expectations:
+
+- Renderers run in the same Vue render pass as virtualized row and column window updates.
+- Wide grids, pinned panes, and pinned-bottom rows multiply the number of rendered cell surfaces.
+- Renderer exceptions are isolated to the affected cell and fall back to `displayValue`; they are still application bugs and should be fixed rather than used as control flow.
+- The grid may use lightweight display-value rendering during active touch scroll; renderers must not be the only place where essential text, ARIA labels, selection state, or edit affordances exist.
+- Enterprise custom-renderer scenarios should be validated with the browser-frame/perf gates documented in `docs/perf/datagrid-performance-gates.md` before being treated as a performance baseline.
+
 ### System checkbox interactions
 
 The built-in row-selection checkbox column uses the same `cellInteraction` contract internally.
@@ -1509,7 +1526,7 @@ Controlled consumers can still manage quick filter directly through the same `fi
 />
 ```
 
-The app facade remains `filterModel`-first. `quick-filter` only drives the existing filter snapshot, so quick filter stays serializable and aligned with the core projection/filter pipeline. See [DataGrid Quick Filter](https://github.com/affinio/affinio/blob/main/docs/datagrid-quick-filter.md).
+The app facade remains `filterModel`-first. `quick-filter` only drives the existing filter snapshot, so quick filter stays serializable and aligned with the core projection/filter pipeline. See [DataGrid Quick Filter](https://github.com/affinio/datagrid/blob/main/docs/datagrid-quick-filter.md).
 
 Controlled state:
 
@@ -1578,7 +1595,7 @@ const rowSelectionState = ref({
 </template>
 ```
 
-The legacy `row-select` event still exists, but `rowSelectionState` is the stable controlled API when the page wants to bind selected row ids without diffing unified-state updates.
+`rowSelectionState` is the controlled API when the page wants to bind selected row ids without diffing unified-state updates.
 
 For server-backed row models, the header checkbox selects the full current row projection without materializing every row id:
 
@@ -1716,6 +1733,7 @@ Notes:
 - Multiple flex columns share leftover available stage width by their flex weight.
 - If there is no free space, the column falls back to its base width.
 - Pinned and unpinned columns participate in the same effective width calculation.
+- `columnGroup` can be a string id, `{ id, label }`, or a nested path. The stage renders group headers across left-pinned, center, and right-pinned panes; visibility, resize, reorder, and pinning recalculate group spans from the current visible column snapshot.
 
 Unified column-state object:
 
@@ -1796,7 +1814,6 @@ The component emits:
 - `cell-change`
 - `selection-change`
 - `row-selection-change`
-- `row-select` (legacy alias; prefer `row-selection-change` for typed row-selection snapshots)
 - `update:column-state`
 - `update:column-order`
 - `update:hidden-column-keys`
@@ -1889,6 +1906,7 @@ Row drag-and-drop is declarative and opt-in.
 - `rowReorder: false` keeps the row index non-draggable
 - the feature only applies when the grid is using a mutable rows API and `showRowIndex` is enabled
 - placeholder rows, group rows, and pinned rows are not draggable
+- rows with `state.pinned: 'top' | 'bottom'` render outside the scrollable body; body virtualization and row drag only operate on unpinned rows
 
 ```vue
 <DataGrid

package/dist/DataGrid.d.ts

@@ -683,7 +683,6 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
     "cell-edit": (_payload: DataGridCellEditEvent<Record<string, unknown>>) => true;
     "selection-change": (_payload: DataGridApiSelectionChangedEvent) => true;
     "row-selection-change": (_payload: DataGridApiRowSelectionChangedEvent) => true;
-    "row-select": (_payload: DataGridRowSelectionSnapshot | null) => true;
     "update:rowSelectionState": (_payload: DataGridRowSelectionSnapshot | null) => true;
     "update:columnState": (_payload: DataGridUnifiedColumnState | null) => true;
     "update:columnOrder": (_payload: readonly string[] | null) => true;
@@ -988,7 +987,6 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
     "onSelection-change"?: ((_payload: DataGridApiSelectionChangedEvent) => any) | undefined;
     "onRow-selection-change"?: ((_payload: DataGridApiRowSelectionChangedEvent) => any) | undefined;
     "onCell-edit"?: ((_payload: DataGridCellEditEvent<Record<string, unknown>>) => any) | undefined;
-    "onRow-select"?: ((_payload: DataGridRowSelectionSnapshot | null) => any) | undefined;
     "onUpdate:rowSelectionState"?: ((_payload: DataGridRowSelectionSnapshot | null) => any) | undefined;
     "onUpdate:columnState"?: ((_payload: DataGridUnifiedColumnState | null) => any) | undefined;
     "onUpdate:columnOrder"?: ((_payload: readonly string[] | null) => any) | undefined;
@@ -1029,6 +1027,7 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
     readonly virtualization: DataGridVirtualizationProp | undefined;
     readonly pagination: DataGridPaginationProp | undefined;
     readonly rowModel: DataGridRowModel<unknown> | undefined;
+    readonly rangeMove: boolean;
     readonly aggregations: DataGridAggregationsProp | undefined;
     readonly quickFilter: DataGridQuickFilterProp | undefined;
     readonly reportFillWarning: ((message: string) => void) | undefined;
@@ -1049,7 +1048,6 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
     readonly maxRows: number | undefined;
     readonly placeholderRows: DataGridPlaceholderRowsProp<Record<string, unknown>> | undefined;
     readonly fillHandle: boolean;
-    readonly rangeMove: boolean;
     readonly readSelectionCell: DataGridSelectionCellReader<unknown> | undefined;
     readonly rowReorder: DataGridRowReorderProp | undefined;
     readonly viewMode: DataGridAppViewMode | undefined;

package/dist/advanced-filter.js

@@ -1,4 +1,4 @@
-import { _ as e } from "./chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-BkrpyjJb.js";
+import { _ as e } from "./chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-AVmOe3Bv.js";
 export {
   e as DataGridAdvancedFilterPopover
 };

package/dist/aggregations.js

@@ -1,4 +1,4 @@
-import { _ as a } from "./chunks/DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-VYIMuuIQ.js";
+import { _ as a } from "./chunks/DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-TgxL5evy.js";
 export {
   a as DataGridAggregationsPopover
 };

package/dist/chunks/{DataGridAdvancedFilterPopover-BmEL_QzN.js → DataGridAdvancedFilterPopover-p_hnZLCA.js}

@@ -1,4 +1,4 @@
-import { _ as f } from "./DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-BkrpyjJb.js";
+import { _ as f } from "./DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-AVmOe3Bv.js";
 export {
   f as default
 };

package/dist/chunks/{DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-BkrpyjJb.js → DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-AVmOe3Bv.js}

@@ -1,6 +1,6 @@
 import { defineComponent as N, inject as z, ref as A, computed as c, watch as w, nextTick as O, openBlock as i, createElementBlock as u, Fragment as C, createElementVNode as a, mergeProps as F, unref as _, createCommentVNode as P, createTextVNode as K, toDisplayString as l, createBlock as M, Teleport as U, renderList as T, createVNode as k } from "vue";
 import { usePopoverController as Z, useFloatingPopover as H } from "@affino/popover-vue";
-import { _ as L } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-Dt_KqrSU.js";
+import { _ as L } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-CpC_nuMk.js";
 import { d as J, r as Q } from "./dataGridOverlayThemeVars-vzY74EIz.js";
 import { D } from "./dataGridAdvancedFilter-xnME5bRa.js";
 import { u as W } from "./useDataGridDraggableOverlaySurface-BgkSR_nl.js";

package/dist/chunks/{DataGridAggregationsPopover-D-HP10PE.js → DataGridAggregationsPopover-Bzbn6Nuy.js}

@@ -1,4 +1,4 @@
-import { _ as f } from "./DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-VYIMuuIQ.js";
+import { _ as f } from "./DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-TgxL5evy.js";
 export {
   f as default
 };

package/dist/chunks/{DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-VYIMuuIQ.js → DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-TgxL5evy.js}

@@ -1,6 +1,6 @@
 import { defineComponent as V, inject as E, ref as b, computed as d, watch as _, nextTick as m, openBlock as l, createElementBlock as i, Fragment as y, createElementVNode as e, mergeProps as k, unref as f, toDisplayString as h, createBlock as G, Teleport as D, createVNode as C, renderList as I, createCommentVNode as L } from "vue";
 import { usePopoverController as j, useFloatingPopover as z } from "@affino/popover-vue";
-import { _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-Dt_KqrSU.js";
+import { _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-CpC_nuMk.js";
 import { d as q, r as K } from "./dataGridOverlayThemeVars-vzY74EIz.js";
 const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" }, J = /* @__PURE__ */ e("div", null, [
   /* @__PURE__ */ e("div", { class: "datagrid-aggregations__eyebrow" }, "Aggregations"),

package/dist/chunks/DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-CpC_nuMk.js

@@ -0,0 +1,419 @@
+import { defineComponent as Se, inject as Pe, ref as v, useAttrs as Re, computed as s, watch as $, nextTick as m, onMounted as Me, onBeforeUnmount as Be, openBlock as b, createElementBlock as h, createElementVNode as ae, mergeProps as Ve, withModifiers as O, createBlock as De, Teleport as Te, normalizeStyle as Ne, normalizeClass as ie, Fragment as re, renderList as $e, toDisplayString as Ge, createCommentVNode as z } from "vue";
+import { d as He, r as Ue } from "./dataGridOverlayThemeVars-vzY74EIz.js";
+function We(n = {}) {
+  return {
+    open: n.open ?? !1,
+    filter: n.filter ?? "",
+    activeIndex: n.activeIndex ?? -1
+  };
+}
+function P(n, l) {
+  return n.open === l ? n : {
+    ...n,
+    open: l
+  };
+}
+function q(n, l) {
+  return n.filter === l ? n : {
+    ...n,
+    filter: l
+  };
+}
+function R(n, l, t) {
+  const r = Ke(l, t);
+  return r === n.activeIndex ? n : {
+    ...n,
+    activeIndex: r
+  };
+}
+function ue(n, l, t, r = !0) {
+  if (t <= 0 || l === 0)
+    return n;
+  if (n.activeIndex < 0)
+    return R(n, l > 0 ? 0 : t - 1, t);
+  const u = n.activeIndex + Math.trunc(l);
+  return r ? R(n, Xe(u, t), t) : R(n, u, t);
+}
+function Ke(n, l) {
+  if (l <= 0)
+    return -1;
+  if (!Number.isFinite(n))
+    return 0;
+  const t = Math.trunc(n);
+  return t < 0 ? 0 : t >= l ? l - 1 : t;
+}
+function Xe(n, l) {
+  return (n % l + l) % l;
+}
+const ze = 0, qe = 1, je = 2, Je = 3, Ye = 4, Ze = 5, Qe = 6, et = 7, ce = 100;
+function tt(n, l) {
+  const t = j(l);
+  if (t.length === 0)
+    return [...n];
+  const r = n.map((u, c) => ({
+    option: u,
+    score: nt(u, t),
+    originalIndex: c
+  })).filter((u) => u.score < ce);
+  return r.sort((u, c) => {
+    if (u.score !== c.score)
+      return u.score - c.score;
+    const k = u.option.label.length, d = c.option.label.length;
+    return k !== d ? k - d : u.originalIndex - c.originalIndex;
+  }), r.map((u) => u.option);
+}
+function nt(n, l) {
+  const t = j(n.label), r = j(n.value);
+  return t === l ? ze : r === l ? qe : t.startsWith(l) ? je : r.startsWith(l) ? Je : se(t, l) ? Ye : se(r, l) ? Ze : t.includes(l) ? Qe : r.includes(l) ? et : ce;
+}
+function se(n, l) {
+  return n.length === 0 || l.length === 0 ? !1 : n.split(/[^a-z0-9]+/i).some((t) => t.length > 0 && t.startsWith(l));
+}
+function j(n) {
+  return n.trim().toLocaleLowerCase();
+}
+const lt = ["id", "name", "value", "placeholder", "disabled", "aria-busy", "aria-invalid", "aria-expanded", "aria-activedescendant"], ot = ["data-affino-popover-sticky"], at = {
+  key: 0,
+  class: "datagrid-cell-combobox__empty"
+}, it = ["id", "aria-selected", "data-option-index", "onMousemove", "onClick"], rt = { class: "datagrid-cell-combobox__option-label" }, ut = {
+  key: 0,
+  class: "datagrid-cell-combobox__option-state",
+  "aria-hidden": "true"
+}, st = {
+  key: 0,
+  class: "datagrid-cell-combobox__empty"
+}, ct = {
+  inheritAttrs: !1
+}, xt = /* @__PURE__ */ Se({
+  ...ct,
+  __name: "DataGridFilterableCombobox",
+  props: {
+    value: {},
+    options: { default: () => [] },
+    loadOptions: {},
+    placeholder: { default: "Type to filter" },
+    disabled: { type: Boolean, default: !1 },
+    openOnMount: { type: Boolean, default: !0 },
+    initialFilter: { default: "" },
+    openOnFocus: { type: Boolean, default: !0 },
+    inlinePanel: { type: Boolean, default: !1 },
+    stickyPopoverId: {}
+  },
+  emits: ["commit", "cancel", "optionsResolved"],
+  setup(n, { emit: l }) {
+    const t = n, r = l, u = Pe(He, v(null)), c = Re(), k = v(null), d = v(null), L = v(null), J = v({}), G = v({}), M = v("below"), F = v(""), I = v(!1), A = v(null), B = v([]), o = v(We({ open: !1 })), S = `datagrid-filterable-combobox-${Math.random().toString(36).slice(2, 10)}`, de = `${S}-input`, ve = `${S}-field`;
+    let E = 0, _ = null;
+    const fe = s(() => {
+      const {
+        class: e,
+        id: a,
+        name: i,
+        style: f,
+        type: w,
+        value: le,
+        placeholder: oe,
+        disabled: dt,
+        onInput: vt,
+        onFocus: ft,
+        onBlur: pt,
+        onKeydown: mt,
+        onClick: bt,
+        ...Ae
+      } = c;
+      return Ae;
+    }), pe = s(() => String(c.id ?? de)), me = s(() => String(c.name ?? ve)), be = s(() => [
+      "cell-editor-control",
+      "datagrid-cell-combobox__input",
+      c.class
+    ]), he = s(() => c.style), _e = s(() => {
+      if (A.value)
+        return "true";
+      const e = c["aria-invalid"];
+      if (e === !0 || e === "true")
+        return "true";
+      if (!(e === !1 || e === "false" || e == null))
+        return e === "grammar" || e === "spelling" ? e : "true";
+    }), xe = s(() => {
+      if (!t.inlinePanel)
+        return "body";
+    }), H = s(() => Y.value.find((e) => e.value === t.value) ?? null), Y = s(() => t.loadOptions && B.value.length > 0 ? B.value : t.options), p = s(() => tt(Y.value, o.value.filter)), x = s(() => o.value.activeIndex), V = s(() => x.value >= 0 ? p.value[x.value] ?? null : null), ye = s(() => x.value >= 0 ? Z(x.value) : void 0), D = s(() => o.value.open);
+    function Z(e) {
+      return `${S}-option-${e}`;
+    }
+    function ge() {
+      J.value = Ue(u.value);
+    }
+    function U() {
+      F.value = H.value?.label ?? t.value;
+    }
+    function Q() {
+      F.value = t.initialFilter;
+    }
+    function C(e) {
+      const a = p.value;
+      if (a.length === 0) {
+        o.value = {
+          ...o.value,
+          activeIndex: -1
+        };
+        return;
+      }
+      let i = 0;
+      if (e && H.value) {
+        const f = a.findIndex((w) => w.value === H.value?.value);
+        f >= 0 && (i = f);
+      }
+      o.value = R(o.value, i, a.length);
+    }
+    async function W(e) {
+      if (!t.loadOptions)
+        return;
+      const a = E + 1;
+      E = a, I.value = !0, A.value = null;
+      try {
+        const i = await t.loadOptions(e);
+        if (a !== E)
+          return;
+        B.value = i, r("optionsResolved", i), C(!0), m(() => {
+          y(), g();
+        });
+      } catch (i) {
+        if (a !== E)
+          return;
+        A.value = i instanceof Error ? i.message : "options-load-failed", B.value = [], C(!1);
+      } finally {
+        a === E && (I.value = !1);
+      }
+    }
+    function y() {
+      if (t.inlinePanel) {
+        M.value = "below", G.value = {
+          position: "absolute",
+          top: "calc(100% - 1px)",
+          left: "0px",
+          width: "100%",
+          maxHeight: "260px",
+          zIndex: "4"
+        };
+        return;
+      }
+      if (typeof window > "u" || !d.value)
+        return;
+      const e = d.value.getBoundingClientRect(), a = Math.max(e.width, 160), i = Math.min(L.value?.offsetHeight ?? 220, 260), w = window.innerHeight - e.bottom - 8 < Math.min(180, i) && e.top > i + 12;
+      M.value = w ? "above" : "below";
+      const le = w ? Math.max(8, e.top - i + 1) : Math.min(window.innerHeight - i - 8, e.bottom - 1), oe = Math.min(
+        Math.max(8, e.left),
+        Math.max(8, window.innerWidth - a - 8)
+      );
+      G.value = {
+        position: "fixed",
+        top: `${le}px`,
+        left: `${oe}px`,
+        width: `${a}px`,
+        maxHeight: "260px",
+        zIndex: "240"
+      };
+    }
+    function ee() {
+      if (_ == null || typeof window > "u") {
+        _ = null;
+        return;
+      }
+      window.cancelAnimationFrame(_), _ = null;
+    }
+    function we() {
+      if (typeof window > "u") {
+        y();
+        return;
+      }
+      _ == null && (_ = window.requestAnimationFrame(() => {
+        _ = null, D.value && y();
+      }));
+    }
+    function g() {
+      if (!L.value || x.value < 0)
+        return;
+      L.value.querySelector(`[data-option-index="${x.value}"]`)?.scrollIntoView({ block: "nearest" });
+    }
+    function K() {
+      t.disabled || (o.value = P(o.value, !0), C(!0), m(() => {
+        if (y(), g(), d.value?.focus({ preventScroll: !0 }), !!d.value) {
+          if (o.value.filter.length > 0) {
+            const e = d.value.value.length;
+            d.value.setSelectionRange(e, e);
+            return;
+          }
+          d.value.select();
+        }
+      }), t.loadOptions && W(o.value.filter));
+    }
+    function T() {
+      ee(), o.value = P(o.value, !1);
+    }
+    function Ie(e) {
+      return e instanceof Node && (k.value?.contains(e) === !0 || L.value?.contains(e) === !0);
+    }
+    function Ee() {
+      if (o.value.filter.trim().length === 0)
+        return t.value;
+      if (V.value)
+        return V.value.value;
+      const e = F.value.trim().toLocaleLowerCase();
+      return e.length === 0 ? t.value : p.value.find((i) => i.label.trim().toLocaleLowerCase() === e || i.value.trim().toLocaleLowerCase() === e)?.value ?? t.value;
+    }
+    function te(e = "stay") {
+      I.value || A.value || (T(), r("commit", Ee(), e));
+    }
+    function ne(e, a = "stay") {
+      I.value || A.value || (T(), r("commit", e, a));
+    }
+    function X(e) {
+      o.value = R(o.value, e, p.value.length), m(g);
+    }
+    function Ce() {
+      t.openOnFocus && K();
+    }
+    function Oe() {
+      K();
+    }
+    function ke(e) {
+      if (t.disabled)
+        return;
+      const a = e.target.value;
+      F.value = a, o.value = q(o.value, a), o.value = P(o.value, !0), C(!1), m(() => {
+        y(), g();
+      }), t.loadOptions && W(a);
+    }
+    function Le() {
+      m(() => {
+        Ie(document.activeElement) || te("stay");
+      });
+    }
+    function Fe(e) {
+      if (!t.disabled && !(e.isComposing || e.key === "Process" || e.keyCode === 229)) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault(), o.value = P(o.value, !0), o.value = ue(o.value, 1, p.value.length, !0), m(g);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault(), o.value = P(o.value, !0), o.value = ue(o.value, -1, p.value.length, !0), m(g);
+          return;
+        }
+        if (e.key === "Home") {
+          e.preventDefault(), X(0);
+          return;
+        }
+        if (e.key === "End") {
+          e.preventDefault(), X(Math.max(0, p.value.length - 1));
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          if (e.preventDefault(), V.value) {
+            ne(V.value.value, e.shiftKey ? "previous" : "next");
+            return;
+          }
+          te(e.shiftKey ? "previous" : "next");
+          return;
+        }
+        e.key === "Escape" && (e.preventDefault(), T(), r("cancel"));
+      }
+    }
+    function N() {
+      D.value && we();
+    }
+    return $(() => t.options, () => {
+      t.loadOptions || (C(!0), m(y));
+    }, { immediate: !0 }), $(() => t.value, () => {
+      U();
+    }), $(() => t.initialFilter, (e) => {
+      document.activeElement !== d.value && (o.value = q(o.value, e), e.length > 0 ? (Q(), W(e)) : U(), C(!0), m(() => {
+        y(), g();
+      }));
+    }), $(() => t.disabled, (e) => {
+      e && T();
+    }), Me(() => {
+      ge(), t.initialFilter.length > 0 ? (o.value = q(o.value, t.initialFilter), Q()) : U(), t.openOnMount && K(), typeof window < "u" && (window.addEventListener("resize", N), window.addEventListener("scroll", N, { capture: !0, passive: !0 }));
+    }), Be(() => {
+      E += 1, ee(), typeof window < "u" && (window.removeEventListener("resize", N), window.removeEventListener("scroll", N, { capture: !0 }));
+    }), (e, a) => (b(), h("div", {
+      ref_key: "rootEl",
+      ref: k,
+      class: "datagrid-cell-combobox"
+    }, [
+      ae("input", Ve({
+        ref_key: "inputEl",
+        ref: d
+      }, fe.value, {
+        id: pe.value,
+        name: me.value,
+        class: be.value,
+        style: he.value,
+        type: "text",
+        role: "combobox",
+        value: F.value,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        "aria-busy": I.value ? "true" : void 0,
+        "aria-invalid": _e.value,
+        "aria-expanded": D.value ? "true" : "false",
+        "aria-controls": S,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": ye.value,
+        onFocus: Ce,
+        onMousedown: a[0] || (a[0] = O(() => {
+        }, ["stop"])),
+        onContextmenu: a[1] || (a[1] = O(() => {
+        }, ["stop"])),
+        onClick: O(Oe, ["stop"]),
+        onInput: ke,
+        onKeydown: O(Fe, ["stop"]),
+        onBlur: Le
+      }), null, 16, lt),
+      (b(), De(Te, {
+        to: xe.value,
+        disabled: e.inlinePanel
+      }, [
+        D.value ? (b(), h("div", {
+          key: 0,
+          id: S,
+          ref_key: "panelEl",
+          ref: L,
+          class: ie(["datagrid-cell-combobox__panel", {
+            "datagrid-cell-combobox__panel--inline": e.inlinePanel,
+            "datagrid-cell-combobox__panel--attached-below": M.value === "below",
+            "datagrid-cell-combobox__panel--attached-above": M.value === "above"
+          }]),
+          "data-affino-popover-sticky": e.stickyPopoverId || void 0,
+          style: Ne([J.value, G.value]),
+          role: "listbox",
+          onMousedown: a[2] || (a[2] = O(() => {
+          }, ["prevent"]))
+        }, [
+          I.value ? (b(), h("div", at, "Loading options...")) : (b(), h(re, { key: 1 }, [
+            (b(!0), h(re, null, $e(p.value, (i, f) => (b(), h("button", {
+              id: Z(f),
+              key: `${i.value}-${f}`,
+              type: "button",
+              class: ie(["datagrid-cell-combobox__option", {
+                "datagrid-cell-combobox__option--active": f === x.value,
+                "datagrid-cell-combobox__option--selected": i.value === e.value
+              }]),
+              role: "option",
+              "aria-selected": i.value === e.value ? "true" : "false",
+              "data-option-index": f,
+              onMousemove: (w) => X(f),
+              onClick: O((w) => ne(i.value), ["stop"])
+            }, [
+              ae("span", rt, Ge(i.label), 1),
+              i.value === e.value ? (b(), h("span", ut)) : z("", !0)
+            ], 42, it))), 128)),
+            p.value.length === 0 ? (b(), h("div", st, " No matching options ")) : z("", !0)
+          ], 64))
+        ], 46, ot)) : z("", !0)
+      ], 8, ["to", "disabled"]))
+    ], 512));
+  }
+});
+export {
+  xt as _
+};