# hooks/useTabDrag (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/hooks/useTabDrag.ts](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useTabDrag.ts).

## Functions

### `moveId`

Function.

Moves `id` by `delta` slots (keyboard reorder), clamped at the ends.

```ts
function moveId(ids: readonly string[], id: string, delta: number): string[]
```

**Parameters**

- `ids` (`readonly string[]`): The current order; not mutated.
- `id` (`string`): The tab to move; a copy of `ids` comes back unchanged when it is absent.
- `delta` (`number`): Slots to move: negative is left, positive right.

**Returns** `string[]`

Source: [ui/src/hooks/useTabDrag.ts:80](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useTabDrag.ts#L80)

### `useTabDrag`

Function.

Tracks one tab strip's drag: what to draw, the held tab, and the handlers
to pass to `Reorder.Group` and each `Reorder.Item`.

```ts
function useTabDrag(
  ids: readonly string[],
  commit: (order: readonly string[]) => void,
): { bounds: TabDragBounds | undefined; dragging: string | null; onDragEnd: () => void; onDragStart: (id: string) => void; onPointerDown: (e: PointerEvent<HTMLElement>) => void; onReorder: (next: string[]) => void; shown: string[]; wasDragged: () => boolean }
```

**Parameters**

- `ids` (`readonly string[]`): The owner's order, drawn while nothing is held.
- `commit` (`(order: readonly string[]) => void`): Receives the new order once, on drop.

**Returns** `{ bounds: TabDragBounds | undefined; dragging: string | null; onDragEnd: () => void; onDragStart: (id: string) => void; onPointerDown: (e: PointerEvent<HTMLElement>) => void; onReorder: (next: string[]) => void; shown: string[]; wasDragged: () => boolean }`

Source: [ui/src/hooks/useTabDrag.ts:24](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useTabDrag.ts#L24)

## Interfaces

### `TabDragBounds`

Interface.

How far the held tab may travel (`dragConstraints`): the strip's edges, relative to the tab.

```ts
interface TabDragBounds
```

**Properties**

- `left` (`number`): How far left the held tab may go, in px from where the press started (zero or negative).
- `right` (`number`): How far right it may go, in px from where the press started (zero or positive).

Source: [ui/src/hooks/useTabDrag.ts:10](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useTabDrag.ts#L10)