@featherk/composables 0.0.5 → 0.0.7

package/README.md

@@ -1,70 +1,130 @@
-# @featherk/composables — Summary
 
-IMPORTANT: This package is experimental and NOT READY FOR PRODUCTION.
+# useGridA11y — Integration Quick Reference
 
-> BIG DISCLAIMER — Do not use this package in production environments. The API, types, and build output are unstable. Tests and documentation are incomplete. You may encounter breaking changes, missing features, or rough edges. Use only for local experimentation or as a reference.
+## BIG DISCLAIMER
 
-## Short description
+> This package is experimental and NOT READY FOR PRODUCTION.  Do not use this package in production environments. The API, types, and build output are unstable. Tests and documentation are incomplete. You may encounter breaking changes, missing features, or rough edges. Use only for local experimentation or as a reference.
 
-`@featherk/composables` provides small Vue 3 composables intended to augment and improve accessibility and behavior for Kendo UI components (Telerik). The library is developed alongside a demo app that shows usage patterns and integration points.
+## Compatibility
 
-## Key points
+> The current version of `useGridA11y` composable was developed targeting Kendo UI for Vue version 6.4.1.
+>
+> *This library is not affiliated with or approved by Telerik.*
 
-- Vue 3 + Composition API
-- TypeScript (partial coverage; some types may be missing or incomplete)
-- Designed to be used inside a monorepo (Turborepo) with a demo app at `demos/` and package sources in `packages/composables/src/`
+## Short description
 
-## What this README contains
+`@featherk/composables` provides small Vue 3 composables intended to augment and improve accessibility and behavior for Kendo UI components (Telerik).  The library is developed alongside a demo app that shows usage patterns and integration points.
 
-- Purpose and high-level features
-- Current stability/status and the critical disclaimer
-- Quick local build / demo steps to try the code (for contributors)
-- Where to look in the repo for implementation and exports
+### Notes
 
-## Status / Stability
+- The composable expects a Grid ref (a Vue ref to the Grid component).
+- For row-level navigation, disable the Grid's cell-level dynamic tabindex behavior (omit or set `navigatable="false"` on the Grid).
+- The composable returns helpers for keyboard handling, focus management, and sort/filter interactions.
 
-This package is an early-stage library and intentionally marked as experimental:
+### Styling and the .fk-grid class
 
-- API: Unstable. Expect breaking changes.
-- Types: Partial. Some public functions and returned shapes may lack strict TypeScript types.
-- Tests: Minimal or missing. Run tests before trusting behavior.
-- Documentation: Sample usage is mainly in the demo app; inline documentation is minimal.
-- Compatibility: Not officially supported by or affiliated with Telerik.
+- The composable will add the CSS class `.fk-grid` to the Grid's root element (see `setupGridStyling()` in the source). The composable itself does NOT include any CSS (no inline styles or stylesheet).
+- The `.fk-grid` class is a hook used by the FeatherK stylesheet to apply visual styles. To see visual indicators (for example, the active/filtered status), you must include the appropriate FeatherK stylesheet for Kendo in your application.
+- Ensure you are using the matching FeatherK styling release for correct visuals — e.g. `featherk-q3-2024-v#.css` (replace `#` with the patch version you are using).
 
-If you need production-ready composables, consider using broadly-adopted libraries or implementing small, well-scoped utilities locally.
+## Prerequisites
 
-## Quick start (for contributors)
+- Vue 3 (script setup)
+- `@progress/kendo-vue-grid` installed
+- `@featherk/composables` installed
 
-From the repository root you can build and run the demo to exercise the composables locally. Replace `npm` with your package manager if needed.
+Install (if needed)
 
 ```bash
-# build the composables package only
-npm run build:composables
+npm install @featherk/composables
+```
+
+## 1) Minimal import + setup
+
+Place inside a `<script setup lang="ts">` block. Provide a Grid ref and call the composable.
+
+```ts
+import { ref } from 'vue';
+import { useGridA11y } from '@featherk/composables';
 
-# run the demo app (dev server)
-npm run dev:demo
+const gridRef = ref(null);
+
+const { activeFilterButton, handleGridKeyDown, handleSortChange } = useGridA11y(gridRef);
 ```
 
-## Where to look
+## 2) Wire keyboard handler on the Grid
+
+Template snippet showing essential bindings (keep other Grid props as required by your app):
 
-- Source code: `packages/composables/src/`
-- Public exports: `packages/composables/src/index.ts`
-- Types: `packages/composables/src/types/`
-- Demo usage: `demos/src/components/composables/` and `demos/src/App.vue`
+```html
+<Grid
+  ref="gridRef"
+  :dataItems="dataResult.data"
+  :dataItemKey="'id'"
+  :rowRender="renderRow"
+  @keydown="handleGridKeyDown"          <!-- keyboard navigation -->
+  @sortchange="handleSortChange"        <!-- composable-aware sort handling -->
+  navigatable="false"                   <!-- optional: prefer row-level nav -->
+/>
+```
 
-## Contributing notes
+## 3) Provide an accessible row renderer (`aria-label`)
 
-- Add composables inside `packages/composables/src/` and export them from `index.ts`.
-- Keep changes small and documented. Add tests for new behavior where reasonable.
-- Build the composables package before running the demo to ensure the demo picks up local changes.
+> Not part of `@featherk/composable`, but good practice
 
-## Next steps (recommended)
+Kendo Grid `rowRender` allows you to add an `aria-label` so screen readers announce row contents.
+
+```ts
+const renderRow = (h: any, trElement: any, defaultSlots: any, props: any) => {
+  const ariaLabel = `Name: ${props.dataItem.name}, Price: ${props.dataItem.price}`;
+  // merge existing props and add aria-label
+  const merged = { ...trElement.props, 'aria-label': ariaLabel };
+  return h('tr', merged, defaultSlots);
+};
+```
 
-- Add unit tests and a CI job (currently missing or minimal).
-- Improve TypeScript coverage for public API shapes.
-- Add examples and API docs for each composable.
-- Consider adding a clear versioning strategy (semver) and a roadmap stating when the package will be considered stable.
+## 4) Focus the active filter button after filter changes
+
+The composable returns `activeFilterButton` (a ref) which you can focus after DOM updates.
+
+```ts
+import { nextTick } from 'vue';
+
+function onFilterChange(event: any) {
+  // update your filter state and data here
+
+  nextTick(() => {
+    if (activeFilterButton.value) {
+      activeFilterButton.value.focus();
+    }
+  });
+}
+```
+
+## 5) Custom sort handling with composable helper
+
+If you need to show a loader or call an API, pass a custom callback into the composable's sort helper so the composable does its internal work and your app performs side effects.
+
+```ts
+const optionalCustomSort = (event: any) => {
+  loader.value = true;
+  // example async
+  setTimeout(() => {
+    loader.value = false;
+    // apply sort state and reload data
+  }, 200);
+};
+
+function onSortChange(event: any) {
+  handleSortChange(event, optionalCustomSort);
+}
+```
 
-## License
+## 6) Summary checklist
 
-See top-level `LICENSE` for repository licensing information.
+- Import and call `useGridA11y(gridRef)`
+- Bind returned keyboard handler to Grid `@keydown`
+- Bind returned sort handler to Grid `@sortchange` (and optionally pass a custom callback)
+- Use returned `activeFilterButton` to manage focus after filter updates
+- Provide a `rowRender` that adds a descriptive `aria-label` for each row
+- Set `navigatable="false"` on the Grid to prefer row-level navigation

package/dist/featherk-composables.es.js

@@ -1,75 +1,75 @@
 import { ref as E, onMounted as S, onBeforeUnmount as M, nextTick as p, onUnmounted as N } from "vue";
-const G = (m) => {
-  const l = E(null);
-  let d = null, u = null;
-  const f = [], v = ".k-table-row[data-grid-row-index] [tabindex]", k = () => m?.value?.columns, h = (e) => {
-    const o = e.key || e.code;
-    [" ", "Spacebar", "Space", "Enter"].includes(o) && (e.preventDefault(), e.stopPropagation(), l.value = e.target, e.target.click());
-  }, g = (e) => {
-    if (!l.value) return;
-    if (e.code === "Escape") {
-      e.preventDefault(), e.stopPropagation(), l.value && l.value.focus();
+const G = (f) => {
+  const s = E(null);
+  let m = null, u = null;
+  const b = [], y = ".k-table-row[data-grid-row-index] [tabindex]", k = () => f?.value?.columns, h = (t) => {
+    const o = t.key || t.code;
+    [" ", "Spacebar", "Space", "Enter"].includes(o) && (t.preventDefault(), t.stopPropagation(), s.value = t.target, t.target.click());
+  }, g = (t) => {
+    if (!s.value) return;
+    if (t.code === "Escape") {
+      t.preventDefault(), t.stopPropagation(), s.value && s.value.focus();
       return;
     }
     const o = Array.from(
       document.querySelectorAll(
         ".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"
       )
-    ), t = document.querySelector(".k-filter-menu-container");
-    if (t) {
-      if (e.code === "Tab") {
+    ), e = document.querySelector(".k-filter-menu-container");
+    if (e) {
+      if (t.code === "Tab") {
         const r = [
           ".k-filter-menu-container .k-dropdownlist[tabindex='0']",
           ".k-filter-menu-container input.k-input-inner:not([tabindex='-1']):not([disabled])",
           ".k-filter-menu-container button:not([tabindex='-1']):not([disabled])"
         ], n = Array.from(
-          t.querySelectorAll(r.join(","))
+          e.querySelectorAll(r.join(","))
         );
         if (n.length === 0) return;
         const a = n.findIndex(
-          (s) => s === document.activeElement
+          (l) => l === document.activeElement
         );
         let i;
-        a === -1 ? i = 0 : e.shiftKey ? i = (a - 1 + n.length) % n.length : i = (a + 1) % n.length, e.preventDefault(), e.stopPropagation(), n[i]?.focus();
+        a === -1 ? i = 0 : t.shiftKey ? i = (a - 1 + n.length) % n.length : i = (a + 1) % n.length, t.preventDefault(), t.stopPropagation(), n[i]?.focus();
         return;
       }
-    } else if (e.code === "ArrowUp" || e.code === "ArrowDown") {
-      e.preventDefault(), e.stopPropagation();
+    } else if (t.code === "ArrowUp" || t.code === "ArrowDown") {
+      t.preventDefault(), t.stopPropagation();
       const r = o.findIndex(
         (a) => a === document.activeElement
       );
       let n = r;
-      e.code === "ArrowUp" ? n = r > 0 ? r - 1 : o.length - 1 : e.code === "ArrowDown" && (n = r < o.length - 1 ? r + 1 : 0), o[n]?.focus();
+      t.code === "ArrowUp" ? n = r > 0 ? r - 1 : o.length - 1 : t.code === "ArrowDown" && (n = r < o.length - 1 ? r + 1 : 0), o[n]?.focus();
       return;
     }
-    e.code === "Tab" && (e.preventDefault(), e.stopPropagation(), e.shiftKey ? (l.value?.previousElementSibling).focus() : (l.value?.nextElementSibling).focus());
+    t.code === "Tab" && (t.preventDefault(), t.stopPropagation(), t.shiftKey ? (s.value?.previousElementSibling).focus() : (s.value?.nextElementSibling).focus());
   }, x = () => {
-    d = new MutationObserver((e) => {
-      e.forEach((o) => {
-        o.addedNodes.forEach((t) => {
-          if (t.nodeType === Node.ELEMENT_NODE) {
-            const r = t;
+    m = new MutationObserver((t) => {
+      t.forEach((o) => {
+        o.addedNodes.forEach((e) => {
+          if (e.nodeType === Node.ELEMENT_NODE) {
+            const r = e;
             if (r.classList.contains("k-animation-container")) {
-              const a = l.value;
+              const a = s.value;
               a && (a.dataset.featherKSortable === "true" || p(() => {
                 r.querySelectorAll(
                   ".k-columnmenu-item-wrapper"
-                ).forEach((b) => {
-                  b.textContent?.toLowerCase().includes("sort") && b.remove();
+                ).forEach((d) => {
+                  d.textContent?.toLowerCase().includes("sort") && d.remove();
                 });
               })), r.addEventListener(
                 "keydown",
                 g
               ), p(() => {
                 const i = () => {
-                  const s = Array.from(
+                  const l = Array.from(
                     r.querySelectorAll(
                       ".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"
                     )
                   );
-                  if (s.length === 1)
-                    s[0].focus(), s[0].click(), i.attempts = 0;
-                  else if (s.length > 1) {
+                  if (l.length === 1)
+                    l[0].focus(), l[0].click(), i.attempts = 0;
+                  else if (l.length > 1) {
                     i.attempts = 0;
                     return;
                   } else
@@ -87,9 +87,9 @@ const G = (m) => {
               );
             });
           }
-        }), o.removedNodes.forEach((t) => {
-          if (t.nodeType === Node.ELEMENT_NODE) {
-            const r = t;
+        }), o.removedNodes.forEach((e) => {
+          if (e.nodeType === Node.ELEMENT_NODE) {
+            const r = e;
             r.classList.contains("k-animation-container") && r.removeEventListener(
               "keydown",
               g
@@ -104,65 +104,95 @@ const G = (m) => {
           }
         });
       });
-    }), d.observe(document.body, {
+    }), m.observe(document.body, {
       childList: !0,
       subtree: !0
     });
-  }, L = (e) => {
-    if (!e.type || !e)
+  }, L = (t) => {
+    if (!t.type || !t)
       return;
-    console.log("handleGridKeyDown", e, e.code);
-    const o = e.target;
-    if (o && [
-      "ArrowDown",
-      "ArrowLeft",
-      "ArrowRight",
-      "ArrowUp",
-      "Enter",
-      "Space"
-    ].includes(e.code)) {
-      if (e.preventDefault(), o.classList.contains("k-grid-header-menu") && o.classList.contains("k-grid-column-menu")) {
-        l.value = o;
-        return;
+    console.log("handleGridKeyDown", t, t.code);
+    const o = t.target;
+    if (o) {
+      if (t.code === "Escape") {
+        const e = document.activeElement?.closest(".k-table-row[data-grid-row-index]");
+        if (e) {
+          t.preventDefault(), t.stopPropagation();
+          try {
+            Array.from(
+              f?.value.$el.querySelectorAll(
+                ".k-table-row[data-grid-row-index]"
+              )
+            ).forEach((n) => n.setAttribute("tabindex", "-1"));
+          } catch {
+          }
+          e.setAttribute("tabindex", "0"), e.focus();
+          return;
+        }
       }
-      const t = o.closest(
-        ".k-table-row[data-grid-row-index]"
-      );
-      if (t) {
-        if (["ArrowDown", "ArrowUp"].includes(e.code)) {
-          let r = null;
-          e.code === "ArrowDown" ? r = t.nextElementSibling : e.code === "ArrowUp" && (r = t.previousElementSibling), r && r.hasAttribute("tabindex") && (t.setAttribute("tabindex", "-1"), r.setAttribute("tabindex", "0"), r.focus());
+      if ([
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "Enter",
+        "Space"
+      ].includes(t.code)) {
+        if (t.preventDefault(), o.classList.contains("k-grid-header-menu") && o.classList.contains("k-grid-column-menu")) {
+          s.value = o;
           return;
         }
-        if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
-          e.preventDefault();
-          const r = t.querySelectorAll(
-            v
-          );
-          if (r.length === 0) return;
-          let n = Array.from(r).findIndex(
-            (a) => a === document.activeElement
-          );
-          if (n === -1 && document.activeElement === t) {
-            r[0].focus();
+        const e = o.closest(
+          ".k-table-row[data-grid-row-index]"
+        );
+        if (e) {
+          if (["ArrowDown", "ArrowUp"].includes(t.code)) {
+            const r = (a, i) => {
+              let l = i === "next" ? a.nextElementSibling : a.previousElementSibling;
+              for (; l; ) {
+                const d = l;
+                try {
+                  if (d.hasAttribute && d.classList.contains("k-table-row"))
+                    return d;
+                } catch {
+                }
+                l = i === "next" ? l.nextElementSibling : l.previousElementSibling;
+              }
+              return null;
+            }, n = t.code === "ArrowDown" ? r(e, "next") : r(e, "previous");
+            n && (e.setAttribute("tabindex", "-1"), n.setAttribute("tabindex", "0"), n.focus());
+            return;
+          }
+          if (["ArrowLeft", "ArrowRight"].includes(t.code)) {
+            t.preventDefault();
+            const r = e.querySelectorAll(
+              y
+            );
+            if (r.length === 0) return;
+            let n = Array.from(r).findIndex(
+              (a) => a === document.activeElement
+            );
+            if (n === -1 && document.activeElement === e) {
+              r[0].focus();
+              return;
+            }
+            t.code === "ArrowRight" ? n = n === r.length - 1 ? 0 : n + 1 : t.code === "ArrowLeft" && (n = n === r.length - 1 ? n - 1 : r.length - 1), r[n].focus();
             return;
           }
-          e.code === "ArrowRight" ? n = n === r.length - 1 ? 0 : n + 1 : e.code === "ArrowLeft" && (n = n === r.length - 1 ? n - 1 : r.length - 1), r[n].focus();
-          return;
         }
       }
     }
   }, D = () => {
     p(() => {
-      const e = m.value.$el.closest(".k-grid");
-      e && e.classList.add("fk-grid");
+      const t = f.value.$el.closest(".k-grid");
+      t && t.classList.add("fk-grid");
     });
-  }, T = () => {
+  }, q = () => {
     try {
-      const e = () => {
+      const t = () => {
         try {
           const r = Array.from(
-            m.value.$el.querySelectorAll(
+            f.value.$el.querySelectorAll(
               ".k-table-row[data-grid-row-index]"
             )
           );
@@ -181,25 +211,25 @@ const G = (m) => {
           console.error("ensureSingleTabindex error:", r);
         }
       }, o = Array.from(
-        m.value.$el.querySelectorAll(
+        f.value.$el.querySelectorAll(
           ".k-table-row[data-grid-row-index]"
         )
       );
       o.length > 0 && o.forEach((r, n) => {
         r.setAttribute("tabindex", n === 0 ? "0" : "-1");
       });
-      const t = m.value.$el.querySelector(".k-table-tbody");
-      t && (u = new MutationObserver(() => {
-        e();
-      }), u.observe(t, { childList: !0, subtree: !0 }));
-    } catch (e) {
-      console.error("Error setting up row navigation:", e);
+      const e = f.value.$el.querySelector(".k-table-tbody");
+      e && (u = new MutationObserver(() => {
+        t();
+      }), u.observe(e, { childList: !0, subtree: !0 }));
+    } catch (t) {
+      console.error("Error setting up row navigation:", t);
     }
-  }, q = () => {
+  }, T = () => {
     p(() => {
       const o = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
-      o && o.forEach((t) => {
-        t.setAttribute("role", "button"), t.addEventListener(
+      o && o.forEach((e) => {
+        e.setAttribute("role", "button"), e.addEventListener(
           "keydown",
           h
         );
@@ -207,41 +237,41 @@ const G = (m) => {
     });
   }, C = () => {
     const o = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
-    o && o.forEach((t) => {
-      t.removeEventListener(
+    o && o.forEach((e) => {
+      e.removeEventListener(
         "keydown",
         h
       );
-    }), d && (d.disconnect(), d = null), u && (u.disconnect(), u = null), f.forEach((t) => t()), f.length = 0;
+    }), m && (m.disconnect(), m = null), u && (u.disconnect(), u = null), b.forEach((e) => e()), b.length = 0;
   }, I = () => {
     document.querySelectorAll(
       ".k-grid-header .k-table-thead th"
-    ).forEach((t, r) => {
-      const n = t.querySelector(
+    ).forEach((e, r) => {
+      const n = e.querySelector(
         ".k-grid-header-menu.k-grid-column-menu"
       );
       if (!n) return;
       const a = k();
       if (a && a[r]) {
         const c = a[r].field ?? "";
-        t.setAttribute("data-feather-k-field", c), t.setAttribute(
+        e.setAttribute("data-feather-k-field", c), e.setAttribute(
           "data-feather-k-filterable",
           a[r].filterable === !1 ? "false" : "true"
-        ), t.setAttribute(
+        ), e.setAttribute(
           "data-feather-k-sortable",
           a[r].sortable === !1 ? "false" : "true"
         );
       }
-      const i = t.dataset.featherKFilterable !== "false", s = t.dataset.featherKSortable !== "false";
-      n.setAttribute("tabindex", "-1"), i ? (t.setAttribute("tabindex", "0"), t.setAttribute("role", "button"), t.setAttribute("aria-haspopup", "menu"), t.style.cursor = "pointer") : (t.setAttribute("tabindex", "0"), t.setAttribute("role", "columnheader"), t.removeAttribute("aria-haspopup"), t.style.cursor = "default");
-      const b = (c) => {
-        c.target?.closest(".k-column-resizer") || (l.value = t, n.click());
-      }, w = (c) => {
+      const i = e.dataset.featherKFilterable !== "false", l = e.dataset.featherKSortable !== "false";
+      n.setAttribute("tabindex", "-1"), i ? (e.setAttribute("tabindex", "0"), e.setAttribute("role", "button"), e.setAttribute("aria-haspopup", "menu"), e.style.cursor = "pointer") : (e.setAttribute("tabindex", "0"), e.setAttribute("role", "columnheader"), e.removeAttribute("aria-haspopup"), e.style.cursor = "default");
+      const d = (c) => {
+        c.target?.closest(".k-column-resizer") || (s.value = e, n.click());
+      }, v = (c) => {
         if (i)
-          l.value = t, c.preventDefault(), c.stopPropagation(), b(c);
-        else if (s) {
-          l.value = t;
-          const y = new KeyboardEvent("keydown", {
+          s.value = e, c.preventDefault(), c.stopPropagation(), d(c);
+        else if (l) {
+          s.value = e;
+          const w = new KeyboardEvent("keydown", {
             key: "Enter",
             code: "Enter",
             keyCode: 13,
@@ -249,95 +279,95 @@ const G = (m) => {
             bubbles: !0,
             cancelable: !0
           });
-          t.dispatchEvent(y);
+          e.dispatchEvent(w);
         }
       };
-      t.addEventListener("click", w), f.push(() => {
-        t.removeEventListener("click", w);
+      e.addEventListener("click", v), b.push(() => {
+        e.removeEventListener("click", v);
       });
       const A = (c) => {
-        if ((c.code === "Enter" || c.code === "Space") && (i || s)) {
-          if (l.value = t, l.value.focus(), i)
-            c.preventDefault(), c.stopPropagation(), b(c);
-          else if (s) {
-            const y = t.querySelector(".k-link");
-            y && y.click();
+        if ((c.code === "Enter" || c.code === "Space") && (i || l)) {
+          if (s.value = e, s.value.focus(), i)
+            c.preventDefault(), c.stopPropagation(), d(c);
+          else if (l) {
+            const w = e.querySelector(".k-link");
+            w && w.click();
           }
         }
       };
-      t.addEventListener("keydown", A, !0), f.push(() => {
-        t.removeEventListener("keydown", A, !0);
+      e.addEventListener("keydown", A, !0), b.push(() => {
+        e.removeEventListener("keydown", A, !0);
       });
     });
     const o = document.querySelector(".k-grid-header .k-table-thead");
     if (o) {
-      const t = (r) => {
+      const e = (r) => {
         const n = r.target.closest("th");
         n && (r.code === "Enter" || r.code === "Space") && n.dataset.featherKFilterable === "false" && n.dataset.featherKSortable === "false" && (r.preventDefault(), r.stopImmediatePropagation());
       };
       o.addEventListener(
         "keydown",
-        t,
+        e,
         !0
         // NOTE: capture phase
-      ), f.push(() => {
+      ), b.push(() => {
         o.removeEventListener(
           "keydown",
-          t,
+          e,
           !0
         );
       });
     }
-  }, K = function(e, o) {
-    const t = e?.event.event.target, r = k();
-    if (!t || !r) return;
-    const n = t.classList.contains("k-link"), a = t.classList.contains("k-columnmenu-item"), i = r.find((s) => s.field === e.event.field)?.sortable && !0;
+  }, K = function(t, o) {
+    const e = t?.event.event.target, r = k();
+    if (!e || !r) return;
+    const n = e.classList.contains("k-link"), a = e.classList.contains("k-columnmenu-item"), i = r.find((l) => l.field === t.event.field)?.sortable && !0;
     if (!n) {
       if (a && !i) {
-        (e.event.sort && void 0)?.filter(
-          (b) => b.field !== e.event.field
+        (t.event.sort && void 0)?.filter(
+          (d) => d.field !== t.event.field
         );
         return;
       }
       typeof o == "function" && p(() => {
-        l.value && l.value.focus(), o(e);
+        s.value && s.value.focus(), o(t);
       });
     }
   };
   return S(() => {
-    D(), T(), q();
+    D(), q(), T();
   }), M(() => {
     C();
   }), {
-    activeFilterButton: l,
+    activeFilterButton: s,
     handleGridKeyDown: L,
     handleSortChange: K
   };
 };
-function B(m = {}) {
-  const { activeByDefault: l = !1, autoActivateDelay: d = 0 } = m, u = E(l);
-  function f() {
+function P(f = {}) {
+  const { activeByDefault: s = !1, autoActivateDelay: m = 0 } = f, u = E(s);
+  function b() {
     u.value = !0;
   }
-  function v() {
+  function y() {
     u.value = !1;
   }
   function k() {
     u.value = !u.value;
   }
   return S(() => {
-    d > 0 && !l && setTimeout(() => {
-      f();
-    }, d);
+    m > 0 && !s && setTimeout(() => {
+      b();
+    }, m);
   }), N(() => {
   }), {
     isGridActive: u,
-    activateGrid: f,
-    deactivateGrid: v,
+    activateGrid: b,
+    deactivateGrid: y,
     toggleGrid: k
   };
 }
 export {
   G as useGridA11y,
-  B as useGridComposableEx
+  P as useGridComposableEx
 };

package/dist/featherk-composables.umd.js

@@ -1 +1 @@
-(function(f,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(f=typeof globalThis<"u"?globalThis:f||self,s(f.FeatherKComposables={},f.Vue))})(this,(function(f,s){"use strict";const S=p=>{const l=s.ref(null);let m=null,d=null;const b=[],h=".k-table-row[data-grid-row-index] [tabindex]",g=()=>p?.value?.columns,v=e=>{const o=e.key||e.code;[" ","Spacebar","Space","Enter"].includes(o)&&(e.preventDefault(),e.stopPropagation(),l.value=e.target,e.target.click())},y=e=>{if(!l.value)return;if(e.code==="Escape"){e.preventDefault(),e.stopPropagation(),l.value&&l.value.focus();return}const o=Array.from(document.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item")),t=document.querySelector(".k-filter-menu-container");if(t){if(e.code==="Tab"){const n=[".k-filter-menu-container .k-dropdownlist[tabindex='0']",".k-filter-menu-container input.k-input-inner:not([tabindex='-1']):not([disabled])",".k-filter-menu-container button:not([tabindex='-1']):not([disabled])"],r=Array.from(t.querySelectorAll(n.join(",")));if(r.length===0)return;const a=r.findIndex(c=>c===document.activeElement);let i;a===-1?i=0:e.shiftKey?i=(a-1+r.length)%r.length:i=(a+1)%r.length,e.preventDefault(),e.stopPropagation(),r[i]?.focus();return}}else if(e.code==="ArrowUp"||e.code==="ArrowDown"){e.preventDefault(),e.stopPropagation();const n=o.findIndex(a=>a===document.activeElement);let r=n;e.code==="ArrowUp"?r=n>0?n-1:o.length-1:e.code==="ArrowDown"&&(r=n<o.length-1?n+1:0),o[r]?.focus();return}e.code==="Tab"&&(e.preventDefault(),e.stopPropagation(),e.shiftKey?(l.value?.previousElementSibling).focus():(l.value?.nextElementSibling).focus())},L=()=>{m=new MutationObserver(e=>{e.forEach(o=>{o.addedNodes.forEach(t=>{if(t.nodeType===Node.ELEMENT_NODE){const n=t;if(n.classList.contains("k-animation-container")){const a=l.value;a&&(a.dataset.featherKSortable==="true"||s.nextTick(()=>{n.querySelectorAll(".k-columnmenu-item-wrapper").forEach(k=>{k.textContent?.toLowerCase().includes("sort")&&k.remove()})})),n.addEventListener("keydown",y),s.nextTick(()=>{const i=()=>{const c=Array.from(n.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"));if(c.length===1)c[0].focus(),c[0].click(),i.attempts=0;else if(c.length>1){i.attempts=0;return}else i.attempts===void 0&&(i.attempts=0),i.attempts++<3&&setTimeout(i,200)};i()})}n.querySelectorAll(".k-animation-container").forEach(a=>{a.addEventListener("keydown",y)})}}),o.removedNodes.forEach(t=>{if(t.nodeType===Node.ELEMENT_NODE){const n=t;n.classList.contains("k-animation-container")&&n.removeEventListener("keydown",y),n.querySelectorAll(".k-animation-container").forEach(a=>{a.removeEventListener("keydown",y)})}})})}),m.observe(document.body,{childList:!0,subtree:!0})},T=e=>{if(!e.type||!e)return;console.log("handleGridKeyDown",e,e.code);const o=e.target;if(o&&["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Enter","Space"].includes(e.code)){if(e.preventDefault(),o.classList.contains("k-grid-header-menu")&&o.classList.contains("k-grid-column-menu")){l.value=o;return}const t=o.closest(".k-table-row[data-grid-row-index]");if(t){if(["ArrowDown","ArrowUp"].includes(e.code)){let n=null;e.code==="ArrowDown"?n=t.nextElementSibling:e.code==="ArrowUp"&&(n=t.previousElementSibling),n&&n.hasAttribute("tabindex")&&(t.setAttribute("tabindex","-1"),n.setAttribute("tabindex","0"),n.focus());return}if(["ArrowLeft","ArrowRight"].includes(e.code)){e.preventDefault();const n=t.querySelectorAll(h);if(n.length===0)return;let r=Array.from(n).findIndex(a=>a===document.activeElement);if(r===-1&&document.activeElement===t){n[0].focus();return}e.code==="ArrowRight"?r=r===n.length-1?0:r+1:e.code==="ArrowLeft"&&(r=r===n.length-1?r-1:n.length-1),n[r].focus();return}}}},D=()=>{s.nextTick(()=>{const e=p.value.$el.closest(".k-grid");e&&e.classList.add("fk-grid")})},q=()=>{try{const e=()=>{try{const n=Array.from(p.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]"));if(!n||n.length===0||n.filter(i=>i.getAttribute("tabindex")==="0").length===1)return;const a=n.find(i=>i===document.activeElement||i.contains(document.activeElement));if(n.forEach(i=>i.setAttribute("tabindex","-1")),a){a.setAttribute("tabindex","0");return}n[0].setAttribute("tabindex","0")}catch(n){console.error("ensureSingleTabindex error:",n)}},o=Array.from(p.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]"));o.length>0&&o.forEach((n,r)=>{n.setAttribute("tabindex",r===0?"0":"-1")});const t=p.value.$el.querySelector(".k-table-tbody");t&&(d=new MutationObserver(()=>{e()}),d.observe(t,{childList:!0,subtree:!0}))}catch(e){console.error("Error setting up row navigation:",e)}},C=()=>{s.nextTick(()=>{const o=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");o&&o.forEach(t=>{t.setAttribute("role","button"),t.addEventListener("keydown",v)}),L(),K()})},I=()=>{const o=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");o&&o.forEach(t=>{t.removeEventListener("keydown",v)}),m&&(m.disconnect(),m=null),d&&(d.disconnect(),d=null),b.forEach(t=>t()),b.length=0},K=()=>{document.querySelectorAll(".k-grid-header .k-table-thead th").forEach((t,n)=>{const r=t.querySelector(".k-grid-header-menu.k-grid-column-menu");if(!r)return;const a=g();if(a&&a[n]){const u=a[n].field??"";t.setAttribute("data-feather-k-field",u),t.setAttribute("data-feather-k-filterable",a[n].filterable===!1?"false":"true"),t.setAttribute("data-feather-k-sortable",a[n].sortable===!1?"false":"true")}const i=t.dataset.featherKFilterable!=="false",c=t.dataset.featherKSortable!=="false";r.setAttribute("tabindex","-1"),i?(t.setAttribute("tabindex","0"),t.setAttribute("role","button"),t.setAttribute("aria-haspopup","menu"),t.style.cursor="pointer"):(t.setAttribute("tabindex","0"),t.setAttribute("role","columnheader"),t.removeAttribute("aria-haspopup"),t.style.cursor="default");const k=u=>{u.target?.closest(".k-column-resizer")||(l.value=t,r.click())},A=u=>{if(i)l.value=t,u.preventDefault(),u.stopPropagation(),k(u);else if(c){l.value=t;const w=new KeyboardEvent("keydown",{key:"Enter",code:"Enter",keyCode:13,which:13,bubbles:!0,cancelable:!0});t.dispatchEvent(w)}};t.addEventListener("click",A),b.push(()=>{t.removeEventListener("click",A)});const E=u=>{if((u.code==="Enter"||u.code==="Space")&&(i||c)){if(l.value=t,l.value.focus(),i)u.preventDefault(),u.stopPropagation(),k(u);else if(c){const w=t.querySelector(".k-link");w&&w.click()}}};t.addEventListener("keydown",E,!0),b.push(()=>{t.removeEventListener("keydown",E,!0)})});const o=document.querySelector(".k-grid-header .k-table-thead");if(o){const t=n=>{const r=n.target.closest("th");r&&(n.code==="Enter"||n.code==="Space")&&r.dataset.featherKFilterable==="false"&&r.dataset.featherKSortable==="false"&&(n.preventDefault(),n.stopImmediatePropagation())};o.addEventListener("keydown",t,!0),b.push(()=>{o.removeEventListener("keydown",t,!0)})}},M=function(e,o){const t=e?.event.event.target,n=g();if(!t||!n)return;const r=t.classList.contains("k-link"),a=t.classList.contains("k-columnmenu-item"),i=n.find(c=>c.field===e.event.field)?.sortable&&!0;if(!r){if(a&&!i){(e.event.sort&&void 0)?.filter(k=>k.field!==e.event.field);return}typeof o=="function"&&s.nextTick(()=>{l.value&&l.value.focus(),o(e)})}};return s.onMounted(()=>{D(),q(),C()}),s.onBeforeUnmount(()=>{I()}),{activeFilterButton:l,handleGridKeyDown:T,handleSortChange:M}};function x(p={}){const{activeByDefault:l=!1,autoActivateDelay:m=0}=p,d=s.ref(l);function b(){d.value=!0}function h(){d.value=!1}function g(){d.value=!d.value}return s.onMounted(()=>{m>0&&!l&&setTimeout(()=>{b()},m)}),s.onUnmounted(()=>{}),{isGridActive:d,activateGrid:b,deactivateGrid:h,toggleGrid:g}}f.useGridA11y=S,f.useGridComposableEx=x,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+(function(m,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],c):(m=typeof globalThis<"u"?globalThis:m||self,c(m.FeatherKComposables={},m.Vue))})(this,(function(m,c){"use strict";const S=b=>{const s=c.ref(null);let p=null,d=null;const k=[],h=".k-table-row[data-grid-row-index] [tabindex]",g=()=>b?.value?.columns,v=t=>{const o=t.key||t.code;[" ","Spacebar","Space","Enter"].includes(o)&&(t.preventDefault(),t.stopPropagation(),s.value=t.target,t.target.click())},y=t=>{if(!s.value)return;if(t.code==="Escape"){t.preventDefault(),t.stopPropagation(),s.value&&s.value.focus();return}const o=Array.from(document.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item")),e=document.querySelector(".k-filter-menu-container");if(e){if(t.code==="Tab"){const n=[".k-filter-menu-container .k-dropdownlist[tabindex='0']",".k-filter-menu-container input.k-input-inner:not([tabindex='-1']):not([disabled])",".k-filter-menu-container button:not([tabindex='-1']):not([disabled])"],r=Array.from(e.querySelectorAll(n.join(",")));if(r.length===0)return;const a=r.findIndex(l=>l===document.activeElement);let i;a===-1?i=0:t.shiftKey?i=(a-1+r.length)%r.length:i=(a+1)%r.length,t.preventDefault(),t.stopPropagation(),r[i]?.focus();return}}else if(t.code==="ArrowUp"||t.code==="ArrowDown"){t.preventDefault(),t.stopPropagation();const n=o.findIndex(a=>a===document.activeElement);let r=n;t.code==="ArrowUp"?r=n>0?n-1:o.length-1:t.code==="ArrowDown"&&(r=n<o.length-1?n+1:0),o[r]?.focus();return}t.code==="Tab"&&(t.preventDefault(),t.stopPropagation(),t.shiftKey?(s.value?.previousElementSibling).focus():(s.value?.nextElementSibling).focus())},L=()=>{p=new MutationObserver(t=>{t.forEach(o=>{o.addedNodes.forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const n=e;if(n.classList.contains("k-animation-container")){const a=s.value;a&&(a.dataset.featherKSortable==="true"||c.nextTick(()=>{n.querySelectorAll(".k-columnmenu-item-wrapper").forEach(f=>{f.textContent?.toLowerCase().includes("sort")&&f.remove()})})),n.addEventListener("keydown",y),c.nextTick(()=>{const i=()=>{const l=Array.from(n.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"));if(l.length===1)l[0].focus(),l[0].click(),i.attempts=0;else if(l.length>1){i.attempts=0;return}else i.attempts===void 0&&(i.attempts=0),i.attempts++<3&&setTimeout(i,200)};i()})}n.querySelectorAll(".k-animation-container").forEach(a=>{a.addEventListener("keydown",y)})}}),o.removedNodes.forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){const n=e;n.classList.contains("k-animation-container")&&n.removeEventListener("keydown",y),n.querySelectorAll(".k-animation-container").forEach(a=>{a.removeEventListener("keydown",y)})}})})}),p.observe(document.body,{childList:!0,subtree:!0})},T=t=>{if(!t.type||!t)return;console.log("handleGridKeyDown",t,t.code);const o=t.target;if(o){if(t.code==="Escape"){const e=document.activeElement?.closest(".k-table-row[data-grid-row-index]");if(e){t.preventDefault(),t.stopPropagation();try{Array.from(b?.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]")).forEach(r=>r.setAttribute("tabindex","-1"))}catch{}e.setAttribute("tabindex","0"),e.focus();return}}if(["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Enter","Space"].includes(t.code)){if(t.preventDefault(),o.classList.contains("k-grid-header-menu")&&o.classList.contains("k-grid-column-menu")){s.value=o;return}const e=o.closest(".k-table-row[data-grid-row-index]");if(e){if(["ArrowDown","ArrowUp"].includes(t.code)){const n=(a,i)=>{let l=i==="next"?a.nextElementSibling:a.previousElementSibling;for(;l;){const f=l;try{if(f.hasAttribute&&f.classList.contains("k-table-row"))return f}catch{}l=i==="next"?l.nextElementSibling:l.previousElementSibling}return null},r=t.code==="ArrowDown"?n(e,"next"):n(e,"previous");r&&(e.setAttribute("tabindex","-1"),r.setAttribute("tabindex","0"),r.focus());return}if(["ArrowLeft","ArrowRight"].includes(t.code)){t.preventDefault();const n=e.querySelectorAll(h);if(n.length===0)return;let r=Array.from(n).findIndex(a=>a===document.activeElement);if(r===-1&&document.activeElement===e){n[0].focus();return}t.code==="ArrowRight"?r=r===n.length-1?0:r+1:t.code==="ArrowLeft"&&(r=r===n.length-1?r-1:n.length-1),n[r].focus();return}}}}},D=()=>{c.nextTick(()=>{const t=b.value.$el.closest(".k-grid");t&&t.classList.add("fk-grid")})},q=()=>{try{const t=()=>{try{const n=Array.from(b.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]"));if(!n||n.length===0||n.filter(i=>i.getAttribute("tabindex")==="0").length===1)return;const a=n.find(i=>i===document.activeElement||i.contains(document.activeElement));if(n.forEach(i=>i.setAttribute("tabindex","-1")),a){a.setAttribute("tabindex","0");return}n[0].setAttribute("tabindex","0")}catch(n){console.error("ensureSingleTabindex error:",n)}},o=Array.from(b.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]"));o.length>0&&o.forEach((n,r)=>{n.setAttribute("tabindex",r===0?"0":"-1")});const e=b.value.$el.querySelector(".k-table-tbody");e&&(d=new MutationObserver(()=>{t()}),d.observe(e,{childList:!0,subtree:!0}))}catch(t){console.error("Error setting up row navigation:",t)}},C=()=>{c.nextTick(()=>{const o=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");o&&o.forEach(e=>{e.setAttribute("role","button"),e.addEventListener("keydown",v)}),L(),K()})},I=()=>{const o=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");o&&o.forEach(e=>{e.removeEventListener("keydown",v)}),p&&(p.disconnect(),p=null),d&&(d.disconnect(),d=null),k.forEach(e=>e()),k.length=0},K=()=>{document.querySelectorAll(".k-grid-header .k-table-thead th").forEach((e,n)=>{const r=e.querySelector(".k-grid-header-menu.k-grid-column-menu");if(!r)return;const a=g();if(a&&a[n]){const u=a[n].field??"";e.setAttribute("data-feather-k-field",u),e.setAttribute("data-feather-k-filterable",a[n].filterable===!1?"false":"true"),e.setAttribute("data-feather-k-sortable",a[n].sortable===!1?"false":"true")}const i=e.dataset.featherKFilterable!=="false",l=e.dataset.featherKSortable!=="false";r.setAttribute("tabindex","-1"),i?(e.setAttribute("tabindex","0"),e.setAttribute("role","button"),e.setAttribute("aria-haspopup","menu"),e.style.cursor="pointer"):(e.setAttribute("tabindex","0"),e.setAttribute("role","columnheader"),e.removeAttribute("aria-haspopup"),e.style.cursor="default");const f=u=>{u.target?.closest(".k-column-resizer")||(s.value=e,r.click())},A=u=>{if(i)s.value=e,u.preventDefault(),u.stopPropagation(),f(u);else if(l){s.value=e;const w=new KeyboardEvent("keydown",{key:"Enter",code:"Enter",keyCode:13,which:13,bubbles:!0,cancelable:!0});e.dispatchEvent(w)}};e.addEventListener("click",A),k.push(()=>{e.removeEventListener("click",A)});const E=u=>{if((u.code==="Enter"||u.code==="Space")&&(i||l)){if(s.value=e,s.value.focus(),i)u.preventDefault(),u.stopPropagation(),f(u);else if(l){const w=e.querySelector(".k-link");w&&w.click()}}};e.addEventListener("keydown",E,!0),k.push(()=>{e.removeEventListener("keydown",E,!0)})});const o=document.querySelector(".k-grid-header .k-table-thead");if(o){const e=n=>{const r=n.target.closest("th");r&&(n.code==="Enter"||n.code==="Space")&&r.dataset.featherKFilterable==="false"&&r.dataset.featherKSortable==="false"&&(n.preventDefault(),n.stopImmediatePropagation())};o.addEventListener("keydown",e,!0),k.push(()=>{o.removeEventListener("keydown",e,!0)})}},M=function(t,o){const e=t?.event.event.target,n=g();if(!e||!n)return;const r=e.classList.contains("k-link"),a=e.classList.contains("k-columnmenu-item"),i=n.find(l=>l.field===t.event.field)?.sortable&&!0;if(!r){if(a&&!i){(t.event.sort&&void 0)?.filter(f=>f.field!==t.event.field);return}typeof o=="function"&&c.nextTick(()=>{s.value&&s.value.focus(),o(t)})}};return c.onMounted(()=>{D(),q(),C()}),c.onBeforeUnmount(()=>{I()}),{activeFilterButton:s,handleGridKeyDown:T,handleSortChange:M}};function x(b={}){const{activeByDefault:s=!1,autoActivateDelay:p=0}=b,d=c.ref(s);function k(){d.value=!0}function h(){d.value=!1}function g(){d.value=!d.value}return c.onMounted(()=>{p>0&&!s&&setTimeout(()=>{k()},p)}),c.onUnmounted(()=>{}),{isGridActive:d,activateGrid:k,deactivateGrid:h,toggleGrid:g}}m.useGridA11y=S,m.useGridComposableEx=x,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { useGridA11y } from './useGridA11y';
-export { useGridComposableEx } from './useGridComposableEx';
+export { useGridA11y } from "./useGridA11y";
+export { useGridComposableEx } from "./useGridComposableEx";

package/dist/types/kendo.d.ts

@@ -4,7 +4,7 @@
  */
 export interface SortDescriptor {
     field?: string;
-    dir?: 'asc' | 'desc';
+    dir?: "asc" | "desc";
 }
 export interface GridColumnProps {
     field?: string;

package/dist/useGridA11y.d.ts

@@ -3,9 +3,6 @@
  *
  * Composable that augments a Kendo-based grid with accessible keyboard navigation,
  * focus management, and custom behaviors for column header menus (filter/sort).
- *
- * (Contents preserved from previous grid-keyboard-navigation.ts; only the export name
- * and filename were changed to reflect the new composable name.)
  */
 import { type Ref } from "vue";
 import type { GridSortChangeEvent } from "./types/kendo";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featherk/composables",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "main": "dist/featherk-composables.umd.js",
   "module": "dist/featherk-composables.es.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,6 @@
     "build": "vite build && npm run build:types",
     "build:types": "vue-tsc --emitDeclarationOnly --declaration --declarationDir dist",
     "test": "vitest",
-    "lint": "eslint src --ext .ts,.vue",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run build"
   },
@@ -21,7 +20,6 @@
   "devDependencies": {
     "@types/node": "^24.5.2",
     "@vitejs/plugin-vue": "^6.0.1",
-    "eslint": "^8.0.0",
     "typescript": "~5.8.3",
     "vite": "^7.1.7",
     "vitest": "^3.2.4",