# useExclusiveGroup

[Back to Composables README](https://github.com/NantHealth/featherk/blob/integration/packages/composables/README.md)

`useExclusiveGroup` coordinates a set of independently owned active-id registries so that
activating one can deactivate the others.

This is a Vue composable: `register()` automatically removes each member when the component or
composable that called it unmounts. Create the group and register members from Vue setup.

## Quick Start

1. Create one group for the interactions that must be mutually exclusive.
2. Create each active-id registry and register it with the group.
3. Before activating a registry, deactivate the other group members.

```ts
import {
  useActiveIdRegistry,
  useExclusiveGroup,
} from "@featherk/composables/registry";

// Step 1: create one group for the related interactions.
const menuGroup = useExclusiveGroup();

// Step 2: create and register the related registries.
const actionRegistry = useActiveIdRegistry<string>();
const rowRegistry = useActiveIdRegistry<number>();
menuGroup.register(actionRegistry);
menuGroup.register(rowRegistry);

const openAction = (id: string) => {
  // Step 3: close sibling interactions before activating this registry.
  menuGroup.deactivateOthers(actionRegistry);
  actionRegistry.activate(id);
};
```

## With usePopupMenu

`usePopupMenu` stays independent of exclusivity groups. A standalone popup joins through the
registry that owns its `isOpen`, `requestShow`, and `requestHide` state:

```ts
const rowRegistry = useActiveIdRegistry<number>();
const menuGroup = useExclusiveGroup();
menuGroup.register(rowRegistry);

const rowMenu = usePopupMenu({
  isOpen: rowRegistry.isActive,
  triggerRef: rowRegistry.activeElement,
  menuRef,
  triggerMode: "row",
  requestShow: () => {},
  requestHide: () => rowRegistry.deactivate(),
});

const openRowMenu = (rowId: number) => {
  menuGroup.deactivateOthers(rowRegistry);
  rowRegistry.activate(rowId);
};
```

`useActionCellMenu` follows this same pattern internally when its optional `group` is set: it
registers its own active-id registry and deactivates group peers before it opens its popup.

## API

| Method | Description |
| --- | --- |
| `register(member)` | Adds a `{ deactivate(): void }` member and removes it automatically when the current Vue owner unmounts. |
| `deactivateOthers(activeMember)` | Deactivates all registered members except `activeMember`. |
| `deactivateAll()` | Deactivates all registered members. |