@primereact/mcp 11.0.0-rc.2

package/data/llms/primitive/components/popover.md

@@ -0,0 +1,277 @@
+# Popover
+
+An unstyled popover component with positioning, focus management, and outside click dismissal.
+
+<DocPrimitiveIntro description="Build fully custom popover overlays with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { Check } from '@primeicons/react/check';
+import { Times } from '@primeicons/react/times';
+import { Popover } from 'primereact/popover';
+import * as React from 'react';
+import styles from './basic-demo.module.css';
+
+const team = [
+    { initials: 'AK', name: 'Alex Kim' },
+    { initials: 'MR', name: 'Maya Ross' },
+    { initials: 'SL', name: 'Sam Lee' }
+];
+
+export default function BasicDemo() {
+    const [copied, setCopied] = React.useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText('https://acme.io/project/design-system');
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div className={styles.wrapper}>
+            <Popover.Root>
+                <Popover.Trigger className={styles.trigger}>Share</Popover.Trigger>
+                <Popover.Portal>
+                    <Popover.Positioner sideOffset={12} side="bottom">
+                        <Popover.Popup className={styles.popup}>
+                            <Popover.Arrow className={styles.arrow} />
+                            <Popover.Header className={styles.header}>
+                                <Popover.Title className={styles.title}>Share Project</Popover.Title>
+                                <Popover.Close as="button" className={styles.close}>
+                                    <Times />
+                                </Popover.Close>
+                            </Popover.Header>
+                            <Popover.Content className={styles.content}>
+                                <div className={styles.linkRow}>
+                                    <input type="text" readOnly value="https://acme.io/project/design-system" className={styles.input} />
+                                    <button onClick={handleCopy} className={styles.copyButton}>
+                                        {copied ? (
+                                            <>
+                                                <Check className={styles.copyIcon} /> Copied!
+                                            </>
+                                        ) : (
+                                            'Copy'
+                                        )}
+                                    </button>
+                                </div>
+                                <p className={styles.sectionLabel}>Team Members</p>
+                                <div className={styles.teamRow}>
+                                    {team.map((member) => (
+                                        <div key={member.initials} title={member.name} className={styles.avatar}>
+                                            {member.initials}
+                                        </div>
+                                    ))}
+                                    <button className={styles.addButton}>+</button>
+                                </div>
+                            </Popover.Content>
+                            <Popover.Footer className={styles.footer}>
+                                <span className={styles.footerText}>Anyone with the link can view this project.</span>
+                            </Popover.Footer>
+                        </Popover.Popup>
+                    </Popover.Positioner>
+                </Popover.Portal>
+            </Popover.Root>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="Popover" />
+
+## Features
+
+- Compound component API with sub-components: `Root`, `Trigger`, `Portal`, `Positioner`, `Popup`, `Arrow`, `Header`, `Title`, `Close`, `Content`, `Description`, `Footer`
+- Automatic positioning relative to trigger with configurable `side`, `align`, and offset options
+- Outside click and escape key dismissal with optional focus trapping
+- Arrow element support for visual connection to the trigger
+
+## Usage
+
+```tsx
+import { Popover } from 'primereact/popover';
+```
+
+```tsx
+<Popover.Root>
+    <Popover.Trigger></Popover.Trigger>
+    <Popover.Portal>
+        <Popover.Positioner side="bottom" sideOffset={8}>
+            <Popover.Popup>
+                <Popover.Arrow />
+                <Popover.Header>
+                    <Popover.Title></Popover.Title>
+                    <Popover.Close></Popover.Close>
+                </Popover.Header>
+                <Popover.Content>
+                    <Popover.Description></Popover.Description>
+                </Popover.Content>
+                <Popover.Footer></Popover.Footer>
+            </Popover.Popup>
+        </Popover.Positioner>
+    </Popover.Portal>
+</Popover.Root>
+```
+
+## Behavior
+
+### Motion Animation
+
+```tsx
+<Popover.Popup motionProps={{ name: 'p-popover' }}>...</Popover.Popup>
+```
+
+See [Motion](/docs/primitive/components/motion) for animation phases, CSS variables, and hide strategies.
+
+### Polymorphic Rendering
+
+Use `as` on any sub-component to change the rendered HTML element.
+
+```tsx
+<Popover.Trigger as="div">...</Popover.Trigger>
+```
+
+### Render Function Children
+
+Sub-components accept a render function as children, providing access to the component instance.
+
+```tsx
+<Popover.Trigger>{(instance) => <span>{instance.popover?.state.open ? 'Close' : 'Open'}</span>}</Popover.Trigger>
+```
+
+## Pass Through
+
+<DocPTViewer name="popover-pt" components={['PopoverRoot']} />
+
+## API
+
+### PopoverRoot
+
+<DocTable name="PopoverRoot" category="api" />
+
+<DocTable name="PopoverRoot" category="pt" />
+
+### PopoverTrigger
+
+<DocTable name="PopoverTrigger" category="api" />
+
+| Attribute              | Value                        |
+| ---------------------- | ---------------------------- |
+| `data-positioner-open` | Present when popover is open |
+
+<DocTable name="PopoverTrigger" category="pt" />
+
+### PopoverPortal
+
+<DocTable name="PopoverPortal" category="api" />
+
+<DocTable name="PopoverPortal" category="pt" />
+
+### PopoverPositioner
+
+<DocTable name="PopoverPositioner" category="api" />
+
+| Attribute    | Value                                                     |
+| ------------ | --------------------------------------------------------- |
+| `data-side`  | `"top"` \| `"bottom"` \| `"left"` \| `"right"`, placement |
+| `data-align` | `"start"` \| `"center"` \| `"end"`, alignment             |
+
+**CSS Custom Properties**
+
+The positioner element exposes CSS custom properties for layout and transform control.
+
+| CSS Variable                | Description                              |
+| --------------------------- | ---------------------------------------- |
+| `--available-height`        | Available vertical space in pixels       |
+| `--available-width`         | Available horizontal space in pixels     |
+| `--transform-origin`        | Computed transform origin for animations |
+| `--positioner-anchor-width` | Width of the anchor/trigger element      |
+
+<DocTable name="PopoverPositioner" category="pt" />
+
+### PopoverPopup
+
+<DocTable name="PopoverPopup" category="api" />
+
+| Attribute   | Value                        |
+| ----------- | ---------------------------- |
+| `data-open` | Present when popover is open |
+
+<DocTable name="PopoverPopup" category="pt" />
+
+### PopoverArrow
+
+<DocTable name="PopoverArrow" category="api" />
+
+| Attribute    | Value                                                     |
+| ------------ | --------------------------------------------------------- |
+| `data-side`  | `"top"` \| `"bottom"` \| `"left"` \| `"right"`, placement |
+| `data-align` | `"start"` \| `"center"` \| `"end"`, alignment             |
+
+**CSS Custom Properties**
+
+The arrow element exposes CSS custom properties for dynamic positioning:
+
+| CSS Variable          | Description                    |
+| --------------------- | ------------------------------ |
+| `--placer-arrow-x`    | Horizontal offset of arrow     |
+| `--placer-arrow-y`    | Vertical offset of arrow       |
+| `--placer-arrow-left` | Left position of arrow element |
+| `--placer-arrow-top`  | Top position of arrow element  |
+
+<DocTable name="PopoverArrow" category="pt" />
+
+### PopoverHeader
+
+<DocTable name="PopoverHeader" category="api" />
+
+<DocTable name="PopoverHeader" category="pt" />
+
+### PopoverTitle
+
+<DocTable name="PopoverTitle" category="api" />
+
+<DocTable name="PopoverTitle" category="pt" />
+
+### PopoverClose
+
+<DocTable name="PopoverClose" category="api" />
+
+<DocTable name="PopoverClose" category="pt" />
+
+### PopoverContent
+
+<DocTable name="PopoverContent" category="api" />
+
+<DocTable name="PopoverContent" category="pt" />
+
+### PopoverDescription
+
+<DocTable name="PopoverDescription" category="api" />
+
+<DocTable name="PopoverDescription" category="pt" />
+
+### PopoverFooter
+
+<DocTable name="PopoverFooter" category="api" />
+
+<DocTable name="PopoverFooter" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+Use a clear label for the trigger content so screen readers can identify the action.
+
+Use `Popover.Title` and optional `Popover.Description` to provide semantic structure inside the popup.
+
+The trigger communicates popup state using ARIA attributes such as `aria-expanded`, `aria-controls`, and `aria-haspopup`.
+
+### Keyboard Support
+
+| Key           | Function                                            |
+| ------------- | --------------------------------------------------- |
+| `enter`       | Activates the trigger button.                       |
+| `space`       | Activates the trigger button.                       |
+| `escape`      | Closes the popover when `closeOnEscape` is enabled. |
+| `tab`         | Moves focus to the next focusable element.          |
+| `shift + tab` | Moves focus to the previous focusable element.      |

package/data/llms/primitive/components/portal/api.json

@@ -0,0 +1,176 @@
+[
+  {
+    "name": "Portal",
+    "source": "apps/showcase/assets/apidoc/portal.json",
+    "data": {
+      "description": "Portal component renders its children into a DOM node that exists outside the component's DOM hierarchy.",
+      "interfaces": {
+        "PortalPassThrough": {
+          "description": "Defines passthrough(pt) options of Portal component.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "PortalProps": {
+          "description": "Defines valid properties in Portal component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<PortalInstance, UsePortalProps, PortalPassThrough>",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<unknown>",
+              "default": "",
+              "description": "The reference to the component instance."
+            },
+            {
+              "name": "pIf",
+              "type": "boolean",
+              "default": "true",
+              "description": "Whether the component should be rendered."
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties | ((instance?: PortalInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: PortalInstance) => string)",
+              "default": "",
+              "description": "The class name to apply to the component."
+            },
+            {
+              "name": "as",
+              "type": "string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode>",
+              "default": "",
+              "description": "The component type to render."
+            },
+            {
+              "name": "asChild",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the component should be rendered as a child component."
+            },
+            {
+              "name": "instance",
+              "type": "PortalInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<PortalPassThrough>",
+              "default": "",
+              "description": "The pass-through props to pass to the component."
+            },
+            {
+              "name": "ptOptions",
+              "type": "PassThroughOptions",
+              "default": "",
+              "description": "The pass-through options to pass to the component."
+            },
+            {
+              "name": "unstyled",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the component should be rendered without classes."
+            },
+            {
+              "name": "dt",
+              "type": "unknown",
+              "default": "",
+              "description": "The design token to use for the component."
+            },
+            {
+              "name": "styles",
+              "type": "StylesOptions<ComponentInstance>",
+              "default": "",
+              "description": "The styles to use for the component."
+            },
+            {
+              "name": "render",
+              "type": "(instance: PortalInstance) => ReactNode",
+              "default": "",
+              "description": "The render function to render the component with instance access."
+            },
+            {
+              "name": "children",
+              "type": "any",
+              "default": "",
+              "description": "The children to render.\n\nAccepts  `React.ReactNode`  for static content or a render function  `(instance: I) => React.ReactNode`  for instance access.\nTyped as  `any`  to avoid JSX type errors when used directly in templates."
+            },
+            {
+              "name": "onMounted",
+              "type": "() => void",
+              "default": "",
+              "description": "Callback function to invoke when the portal is mounted."
+            },
+            {
+              "name": "onUnmounted",
+              "type": "() => void",
+              "default": "",
+              "description": "Callback function to invoke when the portal is unmounted."
+            },
+            {
+              "name": "element",
+              "type": "HTMLElement | ReactNode",
+              "default": "",
+              "description": "The element to be rendered as the portal."
+            },
+            {
+              "name": "elementRef",
+              "type": "RefObject<HTMLElement>",
+              "default": "",
+              "description": "The element reference to be rendered as the portal."
+            },
+            {
+              "name": "appendTo",
+              "type": "string | HTMLElement | ((instance: PortalInstance) => HTMLElement)",
+              "default": "'body'",
+              "description": "The DOM element where the portal should be appended to."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            }
+          ],
+          "methods": []
+        },
+        "PortalState": {
+          "description": "Defines valid state in Portal component.",
+          "relatedProp": "",
+          "extendedTypes": "UsePortalState",
+          "props": [
+            {
+              "name": "mounted",
+              "type": "boolean",
+              "default": "",
+              "description": "Current mount of the portal."
+            }
+          ],
+          "methods": []
+        },
+        "PortalExposes": {
+          "description": "Defines the methods and properties exposed by Portal component.",
+          "relatedProp": "",
+          "extendedTypes": "UsePortalExposes",
+          "props": [],
+          "methods": []
+        }
+      },
+      "types": {
+        "PortalPassThroughType": {
+          "description": "Defines passthrough(pt) options type in Portal component.",
+          "values": "PassThroughType<PortalInstance, E>"
+        },
+        "PortalInstance": {
+          "description": "Instance of Portal component.",
+          "values": "ComponentInstance<PortalProps, PortalState, PortalExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

package/data/llms/primitive/components/portal.md

@@ -0,0 +1,79 @@
+# Portal
+
+An unstyled utility component that renders content into a DOM node outside the component hierarchy.
+
+<DocPrimitiveIntro description="Build fully custom overlay containers with SSR-safe portal rendering." />
+
+```tsx
+'use client';
+import { Portal } from 'primereact/portal';
+import * as React from 'react';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    const targetRef = React.useRef<HTMLDivElement>(null);
+    const [ready, setReady] = React.useState(false);
+
+    React.useEffect(() => {
+        setReady(true);
+    }, []);
+
+    return (
+        <div className={styles.root}>
+            <div className={styles.target}>
+                <p className={styles.targetLabel}>Portal Target</p>
+                <div ref={targetRef} className={styles.targetContainer} />
+            </div>
+            {ready && targetRef.current && (
+                <Portal appendTo={targetRef.current}>
+                    <p className={styles.portalContent}>This content is rendered inside the target container via a portal.</p>
+                </Portal>
+            )}
+        </div>
+    );
+}
+```
+
+For hook-based usage without components, see the [usePortal](/docs/headless/components/portal) hook.
+
+## Features
+
+- SSR-safe rendering that waits for client-side mount before creating portals
+- Flexible `appendTo` targeting: `'body'`, `'self'`, HTMLElement, CSS selector, or a function
+- Accepts children, `element` prop, or `elementRef` as content source
+
+## Usage
+
+```tsx
+import { Portal } from 'primereact/portal';
+```
+
+```tsx
+<Portal>
+    <div></div>
+</Portal>
+```
+
+## Behavior
+
+### Polymorphic Rendering
+
+Portal does not render a wrapper element. Content is portaled directly into the target container.
+
+### Render Function Children
+
+Portal accepts a render function as children, providing access to the component instance.
+
+```tsx
+<Portal>{(instance) => <div>{instance.state.mounted ? 'Mounted' : 'Pending'}</div>}</Portal>
+```
+
+## API
+
+### Portal
+
+<DocTable name="Portal" category="api" />
+
+## Accessibility
+
+Portal is a structural utility that renders content into a different DOM location. It does not introduce any ARIA roles or keyboard interactions. Accessibility concerns are handled by the content rendered inside the portal (e.g., `Popover.Popup`, `Drawer.Portal`).