@primereact/mcp 11.0.0-rc.2

package/data/llms/headless/components/inplace/api.json

@@ -0,0 +1,340 @@
+[
+  {
+    "name": "useInplace",
+    "source": "apps/showcase/assets/apidoc/useinplace.json",
+    "data": {
+      "description": "The useInplace manages the state and functionality of a inplace component.",
+      "interfaces": {
+        "UseInplaceOpenChangeEvent": {
+          "description": "Event fired when the inplace's open state changes.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "originalEvent",
+              "type": "SyntheticEvent<Element, Event>",
+              "default": "",
+              "description": "The original event that triggered the change, if any."
+            },
+            {
+              "name": "open",
+              "type": "boolean",
+              "default": "",
+              "description": "The open state of the inplace."
+            },
+            {
+              "name": "active",
+              "type": "boolean",
+              "default": "",
+              "description": "The open state of the inplace.",
+              "deprecated": "Use "
+            }
+          ],
+          "methods": []
+        },
+        "UseInplaceProps": {
+          "description": "Defines valid properties in useInplace.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "open",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the content is displayed or not."
+            },
+            {
+              "name": "defaultOpen",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the content is displayed or not in uncontrolled mode."
+            },
+            {
+              "name": "active",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the content is displayed or not.",
+              "deprecated": "Use "
+            },
+            {
+              "name": "defaultActive",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the content is displayed or not in uncontrolled mode.",
+              "deprecated": "Use "
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the component is disabled."
+            },
+            {
+              "name": "onOpenChange",
+              "type": "(event: UseInplaceOpenChangeEvent) => void",
+              "default": "",
+              "description": "Callback function that is called when the open state changes."
+            },
+            {
+              "name": "onActiveChange",
+              "type": "(event: UseInplaceOpenChangeEvent) => void",
+              "default": "",
+              "description": "Callback function that is called when the open state changes.",
+              "deprecated": "Use "
+            }
+          ],
+          "methods": []
+        },
+        "UseInplaceState": {
+          "description": "Defines valid state in useInplace.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "open",
+              "type": "boolean",
+              "default": "",
+              "description": "The open state of the useInplace."
+            }
+          ],
+          "methods": []
+        },
+        "UseInplaceRootProps": {
+          "description": "Pre-built props for the inplace root element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-active",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when active."
+            },
+            {
+              "name": "data-inactive",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when inactive."
+            },
+            {
+              "name": "data-disabled",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when disabled."
+            }
+          ],
+          "methods": []
+        },
+        "UseInplaceDisplayProps": {
+          "description": "Pre-built props for the inplace display element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "role",
+              "type": "\"button\"",
+              "default": "",
+              "description": "Button role for assistive technology."
+            },
+            {
+              "name": "tabIndex",
+              "type": "number",
+              "default": "",
+              "description": "Tab index for keyboard accessibility."
+            },
+            {
+              "name": "aria-expanded",
+              "type": "boolean",
+              "default": "",
+              "description": "Reflects whether the editor is open (Disclosure pattern)."
+            },
+            {
+              "name": "aria-disabled",
+              "type": "boolean",
+              "default": "",
+              "description": "Disabled state for assistive technology."
+            },
+            {
+              "name": "onClick",
+              "type": "(event: MouseEvent) => void",
+              "default": "",
+              "description": "Click handler to open the inplace."
+            },
+            {
+              "name": "onKeyDown",
+              "type": "(event: KeyboardEvent<HTMLDivElement>) => void",
+              "default": "",
+              "description": "Keydown handler for the display."
+            },
+            {
+              "name": "data-active",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when active."
+            },
+            {
+              "name": "data-inactive",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when inactive."
+            },
+            {
+              "name": "data-disabled",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when disabled."
+            }
+          ],
+          "methods": []
+        },
+        "UseInplaceContentProps": {
+          "description": "Pre-built props for the inplace content (editor) element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "\"inplace\"",
+              "default": "",
+              "description": "Component scope identifier."
+            },
+            {
+              "name": "data-part",
+              "type": "\"content\"",
+              "default": "",
+              "description": "Component part identifier."
+            },
+            {
+              "name": "onKeyDown",
+              "type": "(event: KeyboardEvent<HTMLElement>) => void",
+              "default": "",
+              "description": "Keydown handler that closes the editor on Escape."
+            },
+            {
+              "name": "data-active",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when active."
+            },
+            {
+              "name": "data-inactive",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when inactive."
+            }
+          ],
+          "methods": []
+        },
+        "UseInplaceCloseProps": {
+          "description": "Pre-built props for the inplace close element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "type",
+              "type": "\"button\"",
+              "default": "",
+              "description": "Button type to avoid implicit form submission."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "default": "",
+              "description": "Accessible label for the close control."
+            },
+            {
+              "name": "onClick",
+              "type": "(event: MouseEvent) => void",
+              "default": "",
+              "description": "Click handler to close the inplace."
+            },
+            {
+              "name": "data-active",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when active."
+            },
+            {
+              "name": "data-inactive",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when inactive."
+            },
+            {
+              "name": "data-disabled",
+              "type": "\"\"",
+              "default": "",
+              "description": "Data attribute when disabled."
+            }
+          ],
+          "methods": []
+        },
+        "UseInplaceExposes": {
+          "description": "Defines the methods and properties exposed by useInplace.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "state",
+              "type": "UseInplaceState",
+              "default": "",
+              "description": "The state of the useInplace."
+            },
+            {
+              "name": "open",
+              "type": "(originalEvent?: SyntheticEvent) => void",
+              "default": "",
+              "description": "Method to open the inplace."
+            },
+            {
+              "name": "close",
+              "type": "(originalEvent?: SyntheticEvent) => void",
+              "default": "",
+              "description": "Method to close the inplace."
+            },
+            {
+              "name": "onDisplayKeyDown",
+              "type": "(event: KeyboardEvent<HTMLDivElement>) => void",
+              "default": "",
+              "description": "Keydown event handler for the display."
+            },
+            {
+              "name": "onContentKeyDown",
+              "type": "(event: KeyboardEvent<HTMLElement>) => void",
+              "default": "",
+              "description": "Keydown event handler for the content (editor) — closes on Escape."
+            },
+            {
+              "name": "rootProps",
+              "type": "UseInplaceRootProps",
+              "default": "",
+              "description": "Pre-built props for the root element."
+            },
+            {
+              "name": "displayProps",
+              "type": "UseInplaceDisplayProps",
+              "default": "",
+              "description": "Pre-built props for the display element."
+            },
+            {
+              "name": "contentProps",
+              "type": "UseInplaceContentProps",
+              "default": "",
+              "description": "Pre-built props for the content (editor) element."
+            },
+            {
+              "name": "closeProps",
+              "type": "UseInplaceCloseProps",
+              "default": "",
+              "description": "Pre-built props for the close element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseInplaceChangeEvent": {
+          "description": "Event fired when the inplace's open state changes.",
+          "values": "UseInplaceOpenChangeEvent"
+        },
+        "UseInplaceInstance": {
+          "description": "Instance of useInplace headless.",
+          "values": "HeadlessInstance<UseInplaceProps, UseInplaceState, UseInplaceExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

package/data/llms/headless/components/inplace.md

@@ -0,0 +1,153 @@
+# useInplace
+
+Hook that manages inline display-to-edit toggling with keyboard and state support.
+
+```tsx
+'use client';
+import { Pencil } from '@primeicons/react/pencil';
+import { Times } from '@primeicons/react/times';
+import { useInplace } from '@primereact/headless/inplace';
+
+export default function BasicDemo() {
+    const { rootProps, displayProps, closeProps, state } = useInplace();
+
+    return (
+        <div className="flex justify-center">
+            <div {...rootProps}>
+                {!state.open ? (
+                    <div
+                        {...displayProps}
+                        className="inline-flex items-center gap-2 px-3 py-2 rounded cursor-pointer text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-100 transition focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                    >
+                        <Pencil className="w-4 h-4" />
+                        <span>Click to edit</span>
+                    </div>
+                ) : (
+                    <div className="inline-flex items-center gap-2">
+                        <input
+                            type="text"
+                            defaultValue="PrimeReact"
+                            className="px-2.5 py-1.5 border border-surface-300 dark:border-surface-600 rounded bg-transparent text-surface-900 dark:text-surface-100 outline-none focus:border-primary-500"
+                            autoFocus
+                        />
+                        <button
+                            {...closeProps}
+                            className="flex items-center justify-center p-2 rounded cursor-pointer text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                        >
+                            <Times />
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useInplace } from '@primereact/headless/inplace';
+```
+
+```tsx
+const { rootProps, displayProps, closeProps, state } = useInplace();
+
+<div {...rootProps}>
+    {!state.open ? (
+        <div {...displayProps}></div>
+```
+
+`useInplace` manages the display/content toggle and returns prop objects for the container, display, and close elements, see [Primitive](/docs/primitive/components/inplace) for a component-based API.
+
+## Features
+
+- **Open-state lifecycle**, controlled or uncontrolled toggling between display and edit modes
+- **Imperative controls**, `open()` and `close()` for programmatic toggling outside the standard click/close flow
+- **Keyboard activation**, built-in Enter/Space handler on `displayProps` to enter edit mode
+- **Data-driven styling**, `data-open`, `data-closed`, and `data-disabled` attributes expose state without className juggling
+- **Disabled mode**, suppresses click and keyboard handlers and marks the root with `data-disabled`
+
+## Working with callbacks
+
+### Controlled open state
+
+Drive the toggle from external state by pairing `open` with `onOpenChange`. The hook never mutates its own state in controlled mode.
+
+```tsx
+const [open, setOpen] = React.useState(false);
+
+const inplace = useInplace({
+    open,
+    onOpenChange: (e) => setOpen(e.open)
+});
+```
+
+### Closing after a save
+
+Use `close()` imperatively so the edit surface exits after the underlying action completes.
+
+```tsx
+const inplace = useInplace();
+
+const onSave = async () => {
+    await save();
+    inplace.close();
+};
+```
+
+### Rendering edit content conditionally
+
+Gate the edit surface on `state.open` so inputs mount only while the inplace is open, useful for forms that need a fresh `defaultValue` each time.
+
+```tsx
+const { rootProps, displayProps, closeProps, state } = useInplace();
+
+<div {...rootProps}>
+    {!state.open ? (
+        <div {...displayProps}>Edit name</div>
+    ) : (
+        <div>
+            <input defaultValue={name} />
+            <button {...closeProps}>Cancel</button>
+        </div>
+    )}
+</div>;
+```
+
+## Styling with data attributes
+
+Every prop object includes `data-scope="inplace"` and a `data-part` attribute. State-dependent attributes (`data-open`, `data-closed`, `data-disabled`) are added automatically.
+
+| Scope     | Part      | States                                      |
+| --------- | --------- | ------------------------------------------- |
+| `inplace` | `root`    | `data-open`, `data-closed`, `data-disabled` |
+| `inplace` | `display` | `data-open`, `data-closed`, `data-disabled` |
+| `inplace` | `content` | `data-open`, `data-closed`, `data-disabled` |
+| `inplace` | `close`   | `data-open`, `data-closed`, `data-disabled` |
+
+```css
+[data-scope='inplace'][data-part='display'] {
+    cursor: pointer;
+    padding: 0.5rem;
+}
+
+[data-scope='inplace'][data-part='display'][data-closed]:hover {
+    background-color: #f3f4f6;
+}
+
+[data-scope='inplace'][data-part='root'][data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+}
+```
+
+## API
+
+### useInplace
+
+<DocTable name="useInplace" category="api" />
+
+## Accessibility
+
+Enter or Space activates edit mode, Escape cancels, and focus returns to the display on exit. See [Primitive](/docs/primitive/components/inplace#accessibility) for full WAI-ARIA compliance details.