@featherk/ui 0.12.1 → 0.12.2

package/docs/table/ActionCell.md

@@ -2,7 +2,10 @@
 
 [Back to UI README](https://github.com/NantHealth/featherk/blob/integration/packages/ui/README.md)
 
-`ActionCell` renders a configured set of repeatable Kendo action buttons. The parent owns one `useActiveIdRegistry`, one `usePopupMenu`, and one shared Kendo `Popup` and `Menu`; ActionCell registers every button with that parent-owned lifecycle.
+`ActionCell` renders a configured set of repeatable Kendo action buttons. Triggers with an
+`items` factory register with the parent-owned shared popup lifecycle; triggers without one
+are direct actions. `ActionCell` renders the `<td>` for a Kendo Grid custom cell and accepts
+Kendo `GridCellProps`.
 
 ## Quick Start
 
@@ -16,14 +19,12 @@
   <table>
     <tbody>
       <tr v-for="row in rows" :key="row.id">
-        <td>
-          <!-- Step 3: repeat the trigger container for each data item. -->
-          <ActionCell
-            :data-item="row"
-            :config="config"
-            :menu-controller="menuController"
-          />
-        </td>
+        <!-- Step 3: repeat the table-cell component for each data item. -->
+        <ActionCell
+          :data-item="row"
+          :config="config"
+          :menu-controller="menuController"
+        />
       </tr>
     </tbody>
   </table>
@@ -38,15 +39,13 @@
 import { computed, ref, type ComponentPublicInstance } from "vue";
 import { Popup } from "@progress/kendo-vue-popup";
 import { Menu } from "@progress/kendo-vue-layout";
-import {
-  useActiveIdRegistry,
-  usePopupMenu,
-} from "@featherk/composables";
+import { useActiveIdRegistry } from "@featherk/composables/registry";
+import { usePopupMenu } from "@featherk/composables/menu";
 import {
   ActionCell,
   type ActionCellConfig,
   type ActionCellMenuController,
-} from "@featherk/ui";
+} from "@featherk/ui/table";
 
 type Row = { id: number; name: string };
 const rows = ref<Row[]>([]);
@@ -92,12 +91,30 @@ const activeMenuItems = computed(() => []);
 
 `useCompositeId()` supplies component-local DOM IDs for ActionCell buttons. Do not use those IDs for the shared registry: `menuController.getTriggerId` must return a deterministic identity derived from the trigger and row, such as `patient:42`.
 
+## Grid Cells
+
+`ActionCell` accepts the Grid-cell rendering subset of `GridCellProps` and merges the
+Kendo-provided `className` with its own `fkui-action-cell` class. It intentionally omits
+`onCellclick` and `onCellkeydown`: use Grid-level row handlers such as `useGridRowAction`
+for row interaction. In a Grid cell template, merge the cell props and shared-menu props into
+one binding:
+
+```vue
+<template #actionsCell="{ props }">
+  <ActionCell v-bind="{ ...props, ...actionCellMenu.actionCellProps }" />
+</template>
+```
+
+`ActionCell` owns the custom-cell `<td>`; use it directly in the Grid cell template rather
+than nesting it inside a caller-owned table cell.
+
 ## Keyboard Navigation
 
-`ActionCell` defaults each trigger button to `tabindex="-1"`, preserving the roving-focus
-model used by Kendo UI for Vue Grid with `useGridA11y`. When using `ActionCell` in a standard
-HTML table or another context where the action buttons should participate in sequential Tab
-navigation, pass `:tab-index="0"`:
+`ActionCell` defaults each trigger button to `tabindex="-1"`, preserving the row-focused
+navigation model used by `useGridA11y`. It does not participate in Kendo's built-in
+per-cell `navigatable` mode. When using `ActionCell` in a standard HTML table or another
+context where the action buttons should participate in sequential Tab navigation, pass
+`:tab-index="0"`:
 
 ```vue
 <ActionCell
@@ -114,5 +131,6 @@ This is a component-level focus policy and is intentionally separate from
 ## Types
 
 - `ActionCellConfig<TData>`: stable configuration object containing `triggers`.
-- `ActionCellTrigger<TData>`: defines `key`, `icon`, `ariaLabel`, optional `items(dataItem)`, and optional `disabled(dataItem)`.
+- `ActionCellTrigger<TData>`: defines `key`, `icon`, `ariaLabel`, optional `items(dataItem)` for a menu trigger, and optional `disabled(dataItem)`. Without `items`, the trigger is a direct action.
+- `ActionCellMenuItem`: Kendo-compatible menu item with `id`, `text`, optional `cssClass`, and optional `data`. `useActionCellMenu` passes the entire item to `onActionSelected`; direct actions pass `undefined` and are identified by `trigger.key`.
 - `ActionCellMenuController<TData>`: parent-owned registry, trigger-ID resolver, and popup click/keyboard delegation contract.

package/docs/table/useActionCellMenu.md

@@ -50,6 +50,8 @@ parent.
 This does not replace `useActiveIdRegistry` or `usePopupMenu` — it wraps them for the
 specific `ActionCell` shared-instance shape. Reach for the lower-level composables directly
 when driving a popup/menu that isn't backed by `ActionCell` (e.g. a row-level context menu).
+Triggers without an `items` factory are direct actions: `useActionCellMenu` calls
+`onActionSelected(undefined, row, trigger)` directly and does not register or open a popup.
 
 ## Quick Start
 
@@ -58,8 +60,8 @@ when driving a popup/menu that isn't backed by `ActionCell` (e.g. a row-level co
 2. Create a `menuRef` for the single shared Kendo `Menu` instance.
 3. Spread `actionCellProps` onto every `<ActionCell>` instance.
 4. Spread `popupProps`/`menuProps` onto the single shared `<Popup>`/`<Menu>`.
-5. Handle the selected action in `onActionSelected`, which already receives the resolved row
-   and trigger.
+5. Handle the selected item in `onActionSelected`; dispatch on `item.id` and use the
+  resolved row and trigger for the business action. Direct actions pass `undefined` as item.
 
 ```vue
 <template>
@@ -73,7 +75,10 @@ when driving a popup/menu that isn't backed by `ActionCell` (e.g. a row-level co
 
   <!-- Step 4 -->
   <Popup v-bind="actionCellMenu.popupProps.value">
-    <strong v-if="actionCellMenu.activeTitle.value">
+    <strong
+      v-if="actionCellMenu.activeTitle.value"
+      class="fk-menu-title"
+    >
       {{ actionCellMenu.activeTitle.value }}
     </strong>
     <Menu ref="menuRef" v-bind="actionCellMenu.menuProps.value" />
@@ -82,7 +87,11 @@ when driving a popup/menu that isn't backed by `ActionCell` (e.g. a row-level co
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { ActionCell, useActionCellMenu, type ActionCellConfig } from "@featherk/ui";
+import {
+  ActionCell,
+  useActionCellMenu,
+  type ActionCellConfig,
+} from "@featherk/ui/table";
 
 // Step 2
 const menuRef = ref(null);
@@ -93,8 +102,13 @@ const actionCellMenu = useActionCellMenu({
   rows,
   getRowId: (row) => row.id,
   menuRef,
-  onActionSelected: (action, row, trigger) => {
-    // Step 5: row-specific business logic
+  onActionSelected: (item, row, trigger) => {
+    // Step 5: menu actions dispatch on item.id; direct actions use trigger.key.
+    if (item) {
+      runAction(item.id, row, trigger);
+    } else {
+      runDirectAction(trigger.key, row, trigger);
+    }
   },
 });
 </script>
@@ -112,15 +126,27 @@ const actionCellMenu = useActionCellMenu({
 | `triggerMode`        | No       | Forwarded to `usePopupMenu`. Defaults to `"button"`.                                                                                              |
 | `anchor`             | No       | Forwarded to `usePopupMenu` for offset positioning. Defaults to `true` because the shared popup targets dynamically resolved ActionCell triggers. |
 | `resolveFocusTarget` | No       | Forwarded to `usePopupMenu` for keyboard-close focus restoration.                                                                                 |
-| `coexistsWith`       | No       | Sibling `useActiveIdRegistry` instances (e.g. a hand-rolled row-context menu) to deactivate whenever a trigger in this collection opens.          |
-| `onActionSelected`   | Yes      | Runs after a menu item is selected, with the resolved `(action, row, trigger)`.                                                                   |
+| `group`              | No       | A `useExclusiveGroup()` instance that deactivates other registered members before this menu opens.                                                 |
+| `onActionSelected`   | Yes      | Runs after a menu item is selected, with the original `(item, row, trigger)`. Direct actions pass `undefined` as `item`.                          |
 
 Each trigger in `config.triggers` may also define an optional `title?: (dataItem) => string`.
 When set, the resolved string is exposed via the returned `activeTitle` — it is *not* mixed
 into `menuProps.items`, since `useActionCellMenu` never renders markup and can't dictate how
 a consumer's `<Menu>` implementation would render a fake "title" item. Render `activeTitle`
-yourself as real markup (e.g. `<strong v-if="activeTitle">{{ activeTitle }}</strong>`) as a
-sibling of `<Menu>` inside the `<Popup>`.
+yourself as real markup with the shared `fk-menu-title` class (e.g.
+`<strong v-if="activeTitle" class="fk-menu-title">{{ activeTitle }}</strong>`) as a sibling
+of `<Menu>` inside the `<Popup>`.
+
+### Exclusive Menus
+
+Use `useExclusiveGroup` from `@featherk/composables/registry` when ActionCell menus and
+other active-id registries must be mutually exclusive. `useActionCellMenu` registers its own
+registry automatically; manually wired registries call `group.register()` from their owning
+Vue setup.
+
+When a trigger defines both `items` and `title`, its resolved `activeTitle` is also applied
+as the `aria-label` of the rendered `role="menubar"`. Direct-action triggers and menu
+triggers without a title do not receive a menu label.
 
 ## Return shape
 
@@ -164,12 +190,6 @@ require defining lookup lifecycle/re-render behavior before changing the public
   `triggerMode: "row"` — see
   [ActionCellGridDemo.vue](https://github.com/NantHealth/featherk/blob/integration/demos/src/views/ui/ActionCellGridDemo.vue)
   for a worked example of the two coexisting.
-- **Coexisting with a sibling menu (e.g. a row-level context menu) does not give you mutual
-  exclusivity for free.** Each `usePopupMenu` instance only closes on outside clicks or its
-  own trigger; a click on this row's `ActionCell` button is *inside* a sibling row-menu's
-  ignored trigger element (the `<tr>`), so the sibling's own outside-click handling never
-  fires for it, and vice versa. Pass the sibling's registry via `coexistsWith` to close it
-  automatically whenever an `ActionCell` trigger opens — this covers one direction only. The
-  sibling must still deactivate *this* composable's registry (exposed via
-  `actionCellProps.menuController.registry`) when it activates; see `ActionCellGridDemo.vue`
-  linked above for that remaining call site.
+- **Coexisting with a sibling menu (e.g. a row-level context menu) requires a shared
+  `useExclusiveGroup`.** Register the sibling registry with the group; `useActionCellMenu`
+  registers its own registry automatically, so opening either menu deactivates the other.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featherk/ui",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "main": "dist/featherk-ui.umd.js",
   "module": "dist/featherk-ui.es.js",
   "types": "dist/index.d.ts",
@@ -39,6 +39,7 @@
     "@featherk/composables": ">=0.8.2",
     "@progress/kendo-vue-buttons": "^6.4.1",
     "@progress/kendo-vue-dropdowns": "^6.4.1",
+    "@progress/kendo-vue-grid": "^6.4.1",
     "@progress/kendo-vue-inputs": "^6.4.1",
     "@progress/kendo-vue-labels": "^6.4.1"
   },