@primereact/mcp 11.0.0-rc.2

package/data/llms/hooks/use-sortable-list.md

@@ -0,0 +1,226 @@
+# useSortableList
+
+Reorder items in a list, optionally transfer them between lists, with state and handlers you spread onto your own DOM.
+
+## Usage
+
+```tsx
+import { useSortableList } from '@primereact/hooks/use-sortable-list';
+```
+
+```tsx
+const { dragState, getListHandlers, getItemHandlers } = useSortableList<'source' | 'target', Item>({
+    onReorder: (listId, from, to) => reorder(listId, from, to),
+    onTransfer: (sourceId, targetId, items, targetIndex) => transfer(sourceId, targetId, items, targetIndex)
+});
+```
+
+Spread `getListHandlers(listId)` on the list wrapper and `getItemHandlers(listId, index, item)` on each draggable row. The hook tracks hover index internally so drop events always resolve to the right target, even when the user releases over a transitioning item.
+
+## Options
+
+- `onReorder(listId, from, to)`, same-list move.
+- `onTransfer?(sourceId, targetId, items, targetIndex?)`, cross-list drop. Omit to make transfers no-ops.
+- `canTransfer?(sourceId, targetId)`, opt out of specific pairings.
+- `getSelectedItems?(listId, item)`, return an array for multi-drag (defaults to `[item]`).
+
+## State
+
+`dragState` exposes `isDragging`, `draggedItems`, `draggedIndex`, `sourceListId`, `dragOverListId`, `dragOverIndex`, enough to style placeholders, ghosts, or drop indicators.
+
+## Basic
+
+Reorder items inside a single list. The hook feeds you hover state so you can style the active drop target however you like.
+
+```tsx
+'use client';
+import { useSortableList } from '@primereact/hooks/use-sortable-list';
+import * as React from 'react';
+
+interface Task {
+    id: number;
+    title: string;
+}
+
+const initialTasks: Task[] = [
+    { id: 1, title: 'Review pull requests' },
+    { id: 2, title: 'Write release notes' },
+    { id: 3, title: 'Triage bug reports' },
+    { id: 4, title: 'Prepare demo for Friday' },
+    { id: 5, title: 'Answer community questions' }
+];
+
+export default function BasicDemo() {
+    const [tasks, setTasks] = React.useState<Task[]>(initialTasks);
+
+    const reorder = React.useCallback((_listId: 'tasks', from: number, to: number) => {
+        setTasks((prev) => {
+            const next = prev.slice();
+            const [moved] = next.splice(from, 1);
+
+            next.splice(to, 0, moved);
+
+            return next;
+        });
+    }, []);
+
+    const { dragState, getListHandlers, getItemHandlers } = useSortableList<'tasks', Task>({
+        onReorder: reorder
+    });
+
+    const listHandlers = getListHandlers('tasks');
+
+    return (
+        <div className="w-full max-w-md">
+            <ul
+                className="flex flex-col gap-2 p-3 rounded-md border border-surface-200 dark:border-surface-700"
+                onDragOver={listHandlers.onDragOver}
+                onDrop={listHandlers.onDrop}
+            >
+                {tasks.map((task, index) => {
+                    const itemHandlers = getItemHandlers('tasks', index, task);
+                    const isDragging = dragState.isDragging && dragState.draggedIndex === index;
+                    const isOver = dragState.dragOverIndex === index && !isDragging;
+
+                    return (
+                        <li
+                            key={task.id}
+                            {...itemHandlers}
+                            className={`flex items-center gap-3 px-3 py-2 rounded-md border cursor-grab active:cursor-grabbing transition-colors select-none ${
+                                isDragging
+                                    ? 'opacity-40 border-dashed border-surface-300 dark:border-surface-600'
+                                    : isOver
+                                      ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
+                                      : 'border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900'
+                            }`}
+                        >
+                            <span className="text-surface-400 font-mono text-xs">{index + 1}</span>
+                            <span className="flex-1">{task.title}</span>
+                            <span className="text-surface-300 dark:text-surface-600 text-xs">drag</span>
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+}
+```
+
+## Transfer between lists
+
+Pass `onTransfer` alongside `onReorder` to move items across lists. The handler receives the source list, target list, dragged items, and the target index.
+
+```tsx
+'use client';
+import { useSortableList } from '@primereact/hooks/use-sortable-list';
+import * as React from 'react';
+
+interface Item {
+    id: number;
+    label: string;
+}
+
+type ListId = 'todo' | 'done';
+
+const initial: Record<ListId, Item[]> = {
+    todo: [
+        { id: 1, label: 'Draft the proposal' },
+        { id: 2, label: 'Send invoices' },
+        { id: 3, label: 'Update changelog' }
+    ],
+    done: [
+        { id: 4, label: 'Ship v1.0' },
+        { id: 5, label: 'Fix login bug' }
+    ]
+};
+
+export default function TransferDemo() {
+    const [lists, setLists] = React.useState(initial);
+
+    const reorder = React.useCallback((listId: ListId, from: number, to: number) => {
+        setLists((prev) => {
+            const next = prev[listId].slice();
+            const [moved] = next.splice(from, 1);
+
+            next.splice(to, 0, moved);
+
+            return { ...prev, [listId]: next };
+        });
+    }, []);
+
+    const transfer = React.useCallback((source: ListId, target: ListId, items: Item[], targetIndex?: number) => {
+        setLists((prev) => {
+            const ids = new Set(items.map((i) => i.id));
+            const src = prev[source].filter((i) => !ids.has(i.id));
+            const tgt = prev[target].slice();
+            const at = targetIndex ?? tgt.length;
+
+            tgt.splice(at, 0, ...items);
+
+            return { ...prev, [source]: src, [target]: tgt };
+        });
+    }, []);
+
+    const { dragState, getListHandlers, getItemHandlers } = useSortableList<ListId, Item>({
+        onReorder: reorder,
+        onTransfer: transfer
+    });
+
+    const renderList = (listId: ListId, title: string) => {
+        const items = lists[listId];
+        const listHandlers = getListHandlers(listId);
+        const isTarget = dragState.dragOverListId === listId && dragState.sourceListId !== listId;
+
+        return (
+            <div className="flex-1 flex flex-col gap-2">
+                <h4 className="text-xs font-mono uppercase tracking-wide text-surface-500">{title}</h4>
+                <ul
+                    onDragOver={listHandlers.onDragOver}
+                    onDrop={listHandlers.onDrop}
+                    className={`flex flex-col gap-2 p-3 min-h-32 rounded-md border transition-colors ${
+                        isTarget ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' : 'border-surface-200 dark:border-surface-700'
+                    }`}
+                >
+                    {items.map((item, index) => {
+                        const itemHandlers = getItemHandlers(listId, index, item);
+                        const isDragging = dragState.isDragging && dragState.sourceListId === listId && dragState.draggedIndex === index;
+                        const isOver = dragState.dragOverListId === listId && dragState.dragOverIndex === index && !isDragging;
+
+                        return (
+                            <li
+                                key={item.id}
+                                {...itemHandlers}
+                                className={`px-3 py-2 rounded-md border cursor-grab active:cursor-grabbing select-none transition-colors ${
+                                    isDragging
+                                        ? 'opacity-40 border-dashed border-surface-300 dark:border-surface-600'
+                                        : isOver
+                                          ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
+                                          : 'border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900'
+                                }`}
+                            >
+                                {item.label}
+                            </li>
+                        );
+                    })}
+                    {items.length === 0 && <li className="text-xs text-surface-400 text-center py-4">Drop items here</li>}
+                </ul>
+            </div>
+        );
+    };
+
+    return (
+        <div className="w-full flex flex-col sm:flex-row gap-4">
+            {renderList('todo', 'To Do')}
+            {renderList('done', 'Done')}
+        </div>
+    );
+}
+```
+
+## Notes
+
+Drops are handled at the **list level**, not per-item. That means you can animate items freely without breaking drop targeting, and you don't need to attach `onDrop` to each row.
+
+## Related
+
+For PrimeReact's component-level drag-and-drop primitives, composable `useDraggable`, `useDroppable`, and `useSortableContainer` with a shared coordinator, see the headless `dnd` package. Those power components like OrderList and PickList.

package/data/llms/hooks/use-tree-filter.md

@@ -0,0 +1,216 @@
+# useTreeFilter
+
+Filter hook for hierarchical data. Lenient or strict branch matching.
+
+## Usage
+
+```tsx
+import { useTreeFilter } from '@primereact/hooks/use-tree-filter';
+```
+
+```tsx
+const { filteredNodes, value, setValue, isFiltered } = useTreeFilter({
+    nodes,
+    field: 'label'
+});
+```
+
+`useTreeFilter` walks nodes with `children` and returns the matching branches. Rules and matchers are the same as `useFilter`, pick the hook that matches your data shape.
+
+## Signature
+
+```ts
+function useTreeFilter<TNode extends TreeNodeLike, TMode extends string = BuiltInMatchMode>(options: UseTreeFilterOptions<TNode, TMode>): UseTreeFilterReturn<TNode, TMode>;
+```
+
+## filterMode
+
+- **`lenient`** (default), keep a branch if it matches, or if any descendant matches. The whole subtree is included.
+- **`strict`**, leaves must match on their own. Parents are kept only as a path to a matching descendant; non-matching leaves are dropped.
+
+```tsx
+'use client';
+import { File } from '@primeicons/react/file';
+import { Folder } from '@primeicons/react/folder';
+import { Search } from '@primeicons/react/search';
+import { useTreeFilter, type TreeFilterMode } from '@primereact/hooks/use-tree-filter';
+import { IconField } from '@primereact/ui/iconfield';
+import { InputText } from '@primereact/ui/inputtext';
+import { ToggleButton } from '@primereact/ui/togglebutton';
+import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
+import * as React from 'react';
+
+interface Node {
+    key: string;
+    data: { name: string; type: 'folder' | 'file' };
+    children?: Node[];
+}
+
+const tree: Node[] = [
+    {
+        key: '0',
+        data: { name: 'Documents', type: 'folder' },
+        children: [
+            { key: '0-0', data: { name: 'Work Report.docx', type: 'file' } },
+            { key: '0-1', data: { name: 'Expenses.xlsx', type: 'file' } },
+            {
+                key: '0-2',
+                data: { name: 'Invoices', type: 'folder' },
+                children: [
+                    { key: '0-2-0', data: { name: 'January.pdf', type: 'file' } },
+                    { key: '0-2-1', data: { name: 'February.pdf', type: 'file' } }
+                ]
+            }
+        ]
+    },
+    {
+        key: '1',
+        data: { name: 'Media', type: 'folder' },
+        children: [
+            { key: '1-0', data: { name: 'Holiday.mp4', type: 'file' } },
+            { key: '1-1', data: { name: 'Wallpaper.jpg', type: 'file' } }
+        ]
+    },
+    {
+        key: '2',
+        data: { name: 'Archive', type: 'folder' },
+        children: [{ key: '2-0', data: { name: 'old-work-report.docx', type: 'file' } }]
+    }
+];
+
+function renderNode(node: Node, level = 0): React.ReactNode {
+    return (
+        <React.Fragment key={node.key}>
+            <div
+                className="flex items-center gap-2 py-1 px-2 rounded hover:bg-surface-100 dark:hover:bg-surface-800"
+                style={{ paddingInlineStart: `${0.5 + level * 1.25}rem` }}
+            >
+                {node.data.type === 'folder' ? (
+                    <Folder className="w-4 h-4 text-yellow-500" />
+                ) : (
+                    <File className="w-4 h-4 text-surface-500 dark:text-surface-400" />
+                )}
+                <span className={node.data.type === 'folder' ? 'font-semibold' : ''}>{node.data.name}</span>
+            </div>
+            {node.children?.map((c) => renderNode(c, level + 1))}
+        </React.Fragment>
+    );
+}
+
+export default function TreeDemo() {
+    const [mode, setMode] = React.useState<TreeFilterMode>('lenient');
+
+    const { filteredNodes, rules, setRules } = useTreeFilter<Node>({
+        nodes: tree,
+        defaultRules: [{ field: 'name', value: null, matchMode: 'contains' }],
+        filterMode: mode
+    });
+
+    const search = (rules[0]?.value as string) ?? '';
+
+    return (
+        <div className="w-full flex flex-col gap-3">
+            <div className="flex items-center gap-2">
+                <IconField.Root>
+                    <IconField.Inset>
+                        <Search />
+                    </IconField.Inset>
+                    <InputText
+                        type="search"
+                        placeholder="Search nodes..."
+                        value={search}
+                        onChange={(e: any) => setRules([{ field: 'name', value: e.target.value, matchMode: 'contains' }])}
+                    />
+                </IconField.Root>
+
+                <ToggleButtonGroup
+                    allowEmpty={false}
+                    multiple={false}
+                    value={mode}
+                    onValueChange={(e: { value: unknown }) => setMode(e.value as TreeFilterMode)}
+                >
+                    <ToggleButton.Root value="lenient" size="small">
+                        <ToggleButton.Indicator>Lenient</ToggleButton.Indicator>
+                    </ToggleButton.Root>
+                    <ToggleButton.Root value="strict" size="small">
+                        <ToggleButton.Indicator>Strict</ToggleButton.Indicator>
+                    </ToggleButton.Root>
+                </ToggleButtonGroup>
+            </div>
+            <div className="border border-surface-200 dark:border-surface-700 rounded-md p-2 min-h-60">
+                {filteredNodes.length === 0 ? (
+                    <div className="p-4 text-center text-sm text-surface-500 dark:text-surface-400">No matches.</div>
+                ) : (
+                    filteredNodes.map((n) => renderNode(n))
+                )}
+            </div>
+            <p className="text-xs text-surface-500 dark:text-surface-400">
+                <strong>Lenient</strong>: a branch is kept if any descendant matches. <strong>Strict</strong>: leaves must match; parents are kept
+                only when a descendant matches.
+            </p>
+        </div>
+    );
+}
+```
+
+## Rules
+
+Same shape as `useFilter`. Fields resolve against `node.data` first, then against the node itself. So a flat `{ key, label, children }` works the same as the DataTable-style `{ key, data: { name, type }, children }`.
+
+```tsx
+// node.data.name
+useTreeFilter({
+    nodes,
+    defaultRules: [{ field: 'name', value: 'doc', matchMode: 'contains' }],
+    filterMode: 'lenient'
+});
+
+// node.label (top-level)
+useTreeFilter({
+    nodes,
+    defaultRules: [{ field: 'label', value: 'doc', matchMode: 'contains' }]
+});
+```
+
+## Shorthand
+
+For single-field filtering, skip the rules array and pass `field` directly. The hook builds a `{ field, value, matchMode }` rule for you and exposes `value` / `setValue` for the input.
+
+```tsx
+const { filteredNodes, value, setValue, isFiltered } = useTreeFilter({
+    nodes,
+    field: 'label',
+    matchMode: 'contains' // optional, defaults to 'contains'
+});
+
+<InputText value={value as string} onChange={(e) => setValue(e.target.value)} />;
+```
+
+`value` follows the standard controlled / uncontrolled convention:
+
+| Mode             | Setup                                        | When to use                                                                 |
+| ---------------- | -------------------------------------------- | --------------------------------------------------------------------------- |
+| **Uncontrolled** | omit `value`, optionally pass `defaultValue` | Default. The hook keeps the state and `setValue` updates it.                |
+| **Controlled**   | pass both `value` and `onValueChange`        | When the parent already owns the query (URL sync, parent re-renders, etc.). |
+
+Passing `rules` or `defaultRules` turns the shorthand off, use one or the other.
+
+## Lazy
+
+With `lazy: true` the client-side walk is skipped and `filteredNodes` is returned untouched. `onLazyLoad` fires with the current rules and the active `filterMode`; forward both so your backend can apply the same branch logic.
+
+```tsx
+useTreeFilter({
+    nodes,
+    lazy: true,
+    defaultRules: [{ field: 'label', value: null }],
+    filterMode: 'lenient',
+    onLazyLoad: ({ rules, filterMode }) => {
+        // fetch filtered tree from the server
+    }
+});
+```
+
+## Custom matchers
+
+Reuse `matchers` and the shared `registerMatcher` / `unregisterMatcher` helpers from `@primereact/hooks/use-filter`.

package/data/llms/hooks/use-unmount-effect.md

@@ -0,0 +1,23 @@
+# useUnmountEffect
+
+Run an effect exactly once, when the component unmounts.
+
+## Usage
+
+```tsx
+import { useUnmountEffect } from '@primereact/hooks/use-unmount-effect';
+```
+
+```tsx
+useUnmountEffect(() => {
+    socket.close();
+});
+```
+
+Equivalent to `useEffect(() => cleanup, [])`, expressed as the cleanup by itself. Reads clearer when the mount path has nothing to do.
+
+## Signature
+
+```ts
+function useUnmountEffect(effect: React.EffectCallback): void;
+```

package/data/llms/hooks/use-update-effect.md

@@ -0,0 +1,27 @@
+# useUpdateEffect
+
+useEffect that skips the initial mount and runs only on subsequent dependency changes.
+
+## Usage
+
+```tsx
+import { useUpdateEffect } from '@primereact/hooks/use-update-effect';
+```
+
+```tsx
+useUpdateEffect(() => {
+    onValueChange(value);
+}, [value]);
+```
+
+The effect does not run on the first render. Every time one of the dependencies changes afterwards, it fires like a normal `useEffect`.
+
+## Signature
+
+```ts
+function useUpdateEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;
+```
+
+## When to use it
+
+Triggering side effects that only make sense _after_ a user-driven change, firing a controlled `onChange`, syncing to a remote store, or announcing transitions.

package/data/llms/hooks/use-view-transition.md

@@ -0,0 +1,31 @@
+# useViewTransition
+
+Wrap state updates in the View Transitions API, with a graceful fallback on unsupported browsers.
+
+## Usage
+
+```tsx
+import { useViewTransition } from '@primereact/hooks/use-view-transition';
+```
+
+```tsx
+const startTransition = useViewTransition();
+
+function toggleTheme() {
+    startTransition(() => {
+        setTheme(theme === 'light' ? 'dark' : 'light');
+    });
+}
+```
+
+Calls `document.startViewTransition(callback)` when the API exists; otherwise the callback runs synchronously. That means your code always works, the animation is the enhancement.
+
+## Signature
+
+```ts
+function useViewTransition(): (callback: () => void) => void;
+```
+
+## Notes
+
+View Transitions are driven by CSS (`::view-transition-*` pseudo-elements and `view-transition-name`). This hook is a small API hook, pair it with the CSS your design system defines.

package/data/llms/hooks/use-visibility-change.md

@@ -0,0 +1,30 @@
+# useVisibilityChange
+
+Reactive boolean that reflects the document's Page Visibility state.
+
+## Usage
+
+```tsx
+import { useVisibilityChange } from '@primereact/hooks/use-visibility-change';
+```
+
+```tsx
+const isVisible = useVisibilityChange();
+
+React.useEffect(() => {
+    if (!isVisible) pauseTimers();
+    else resumeTimers();
+}, [isVisible]);
+```
+
+Listens to the `visibilitychange` event and returns `true` while the tab is active, `false` when backgrounded or minimized.
+
+## Signature
+
+```ts
+function useVisibilityChange(): boolean;
+```
+
+## When to use it
+
+Throttle or pause work while the tab isn't visible, polling requests, animations, WebSocket pings, and resume when the user comes back.