@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,407 @@
+[
+  {
+    "name": "InputTagsRoot",
+    "source": "apps/showcase/assets/apidoc/inputtagsroot.json",
+    "data": {
+      "description": "InputTags groups a collection of contents in items.",
+      "interfaces": {
+        "InputTagsRootPassThrough": {
+          "description": "Defines passthrough(pt) options of InputTags component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "InputTagsRootPassThroughType<HTMLAttributes<HTMLDivElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "InputTagsRootValueChangeEvent": {
+          "description": "Event fired when the inputtags's value changes.",
+          "relatedProp": "",
+          "extendedTypes": "UseInputTagsValueChangeEvent",
+          "props": [
+            {
+              "name": "value",
+              "type": "string[]",
+              "default": "",
+              "description": "Value of the inputtags."
+            }
+          ],
+          "methods": []
+        },
+        "InputTagsRootAddEvent": {
+          "description": "Event fired when an item is added.",
+          "relatedProp": "",
+          "extendedTypes": "UseInputTagsAddEvent",
+          "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "default": "",
+              "description": "The added item value."
+            }
+          ],
+          "methods": []
+        },
+        "InputTagsRootRemoveEvent": {
+          "description": "Event fired when an item is removed.",
+          "relatedProp": "",
+          "extendedTypes": "UseInputTagsRemoveEvent",
+          "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "default": "",
+              "description": "The removed item value."
+            },
+            {
+              "name": "index",
+              "type": "number",
+              "default": "",
+              "description": "The index of the removed item."
+            }
+          ],
+          "methods": []
+        },
+        "InputTagsRootProps": {
+          "description": "Defines valid properties in InputTags component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<InputTagsRootInstance, UseInputTagsProps, InputTagsRootPassThrough>",
+          "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?: InputTagsRootInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: InputTagsRootInstance) => 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": "InputTagsRootInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<InputTagsRootPassThrough>",
+              "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: InputTagsRootInstance) => 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": "value",
+              "type": "string[]",
+              "default": "",
+              "description": "Controlled list of tag values."
+            },
+            {
+              "name": "defaultValue",
+              "type": "string[]",
+              "default": "",
+              "description": "Initial tag values for uncontrolled usage."
+            },
+            {
+              "name": "inputValue",
+              "type": "string",
+              "default": "",
+              "description": "Controlled value of the text-entry control."
+            },
+            {
+              "name": "defaultInputValue",
+              "type": "string",
+              "default": "",
+              "description": "Initial value of the text-entry control for uncontrolled usage."
+            },
+            {
+              "name": "max",
+              "type": "number",
+              "default": "",
+              "description": "Maximum number of tags that can be added."
+            },
+            {
+              "name": "delimiter",
+              "type": "string | RegExp",
+              "default": "",
+              "description": "Delimiter used to split typed or pasted text into tags."
+            },
+            {
+              "name": "allowDuplicate",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether duplicate tag values are allowed."
+            },
+            {
+              "name": "addOnBlur",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the current input value should be added when the control loses focus."
+            },
+            {
+              "name": "addOnPaste",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether pasted text should be added as tags."
+            },
+            {
+              "name": "addOnTab",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the current input value should be added when tabbing away."
+            },
+            {
+              "name": "onAdd",
+              "type": "(event: UseInputTagsAddEvent) => void",
+              "default": "",
+              "description": "Callback fired after a tag is added."
+            },
+            {
+              "name": "onRemove",
+              "type": "(event: UseInputTagsRemoveEvent) => void",
+              "default": "",
+              "description": "Callback fired after a tag is removed."
+            },
+            {
+              "name": "onInputValueChange",
+              "type": "(event: UseInputTagsInputValueChangeEvent) => void",
+              "default": "",
+              "description": "Callback fired when the text-entry value changes."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "default": "",
+              "description": "When present, it specifies that the component should be disabled."
+            },
+            {
+              "name": "name",
+              "type": "string",
+              "default": "",
+              "description": "Name of the input element."
+            },
+            {
+              "name": "invalid",
+              "type": "boolean",
+              "default": "",
+              "description": "When present, it specifies that the component should have invalid state style."
+            },
+            {
+              "name": "variant",
+              "type": "\"outlined\" | \"filled\"",
+              "default": "",
+              "description": "Specifies the input variant of the component."
+            },
+            {
+              "name": "fluid",
+              "type": "boolean",
+              "default": "",
+              "description": "When enabled, the component spans the full width of its parent."
+            },
+            {
+              "name": "onValueChange",
+              "type": "(event: InputTagsRootValueChangeEvent) => void",
+              "default": "",
+              "description": "Callback fired when the inputtags's value changes."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "InputTagsRootState": {
+          "description": "Defines valid state in InputTags component.",
+          "relatedProp": "",
+          "extendedTypes": "UseInputTagsState",
+          "props": [
+            {
+              "name": "value",
+              "type": "string[]",
+              "default": "",
+              "description": "Current tag values."
+            },
+            {
+              "name": "inputValue",
+              "type": "string",
+              "default": "",
+              "description": "Current text-entry value."
+            },
+            {
+              "name": "focusedItemIndex",
+              "type": "number",
+              "default": "",
+              "description": "Index of the focused tag item, or -1 when no tag is focused."
+            },
+            {
+              "name": "focused",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the text-entry control is focused."
+            }
+          ],
+          "methods": []
+        },
+        "InputTagsRootExposes": {
+          "description": "Defines the methods and properties exposed by InputTags component.",
+          "relatedProp": "",
+          "extendedTypes": "UseInputTagsExposes",
+          "props": [
+            {
+              "name": "state",
+              "type": "UseInputTagsState",
+              "default": "",
+              "description": "Current state of the tag input."
+            },
+            {
+              "name": "inputRef",
+              "type": "RefObject<HTMLInputElement>",
+              "default": "",
+              "description": "Ref for the text-entry control."
+            },
+            {
+              "name": "itemRefs",
+              "type": "RefObject<Map<number, HTMLElement>>",
+              "default": "",
+              "description": "Refs for rendered tag items keyed by item index."
+            },
+            {
+              "name": "addItem",
+              "type": "(tags: string | string[]) => string[]",
+              "default": "",
+              "description": "Adds one or more tags and returns the accepted values. Accepts a single string or an array of strings."
+            },
+            {
+              "name": "removeItem",
+              "type": "(index: number) => void",
+              "default": "",
+              "description": "Removes the tag at the given index."
+            },
+            {
+              "name": "removeLast",
+              "type": "() => void",
+              "default": "",
+              "description": "Removes the last tag value."
+            },
+            {
+              "name": "removeAll",
+              "type": "() => void",
+              "default": "",
+              "description": "Removes all tag values."
+            },
+            {
+              "name": "rootProps",
+              "type": "UseInputTagsRootProps",
+              "default": "",
+              "description": "Props for the root container element."
+            },
+            {
+              "name": "controlProps",
+              "type": "UseInputTagsControlProps",
+              "default": "",
+              "description": "Props for the text-entry control."
+            },
+            {
+              "name": "hiddenInputProps",
+              "type": "UseInputTagsHiddenInputProps",
+              "default": "",
+              "description": "Props for the hidden form input."
+            },
+            {
+              "name": "getItemProps",
+              "type": "(index: number) => UseInputTagsItemProps",
+              "default": "",
+              "description": "Returns props for a rendered tag item by index."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "InputTagsRootPassThroughType": {
+          "description": "Defines passthrough(pt) options type in InputTags component.",
+          "values": "PassThroughType<InputTagsRootInstance, E>"
+        },
+        "InputTagsRootInstance": {
+          "description": "Instance of InputTags component.",
+          "values": "ComponentInstance<InputTagsRootProps, InputTagsRootState, InputTagsRootExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

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

@@ -0,0 +1,243 @@
+# InputTags
+
+An unstyled tag input component with keyboard navigation, delimiter support, and optional typeahead suggestions.
+
+<DocPrimitiveIntro description="Build fully custom tag input fields with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { Times } from '@primeicons/react/times';
+import { AutoComplete, type AutoCompleteCompleteEvent, type AutoCompleteValueChangeEvent } from 'primereact/autocomplete';
+import { InputTags, type InputTagsRootValueChangeEvent } from 'primereact/inputtags';
+import * as React from 'react';
+import styles from './basic-demo.module.css';
+
+const countries = [
+    'Argentina',
+    'Australia',
+    'Brazil',
+    'Canada',
+    'China',
+    'Egypt',
+    'France',
+    'Germany',
+    'India',
+    'Italy',
+    'Japan',
+    'Mexico',
+    'Netherlands',
+    'Norway',
+    'Poland',
+    'South Korea',
+    'Spain',
+    'Sweden',
+    'Switzerland',
+    'Turkey',
+    'United Kingdom',
+    'United States'
+];
+
+export default function BasicDemo() {
+    const [tags, setTags] = React.useState<string[]>([]);
+    const [query, setQuery] = React.useState('');
+    const [rootEl, setRootEl] = React.useState<HTMLElement | null>(null);
+
+    const filteredCountries = React.useMemo(() => {
+        const q = query.toLowerCase();
+
+        return countries.filter((country) => (!q || country.toLowerCase().includes(q)) && !tags.includes(country));
+    }, [query, tags]);
+
+    return (
+        <div className={styles.wrapper}>
+            <InputTags.Root
+                ref={setRootEl}
+                value={tags}
+                onValueChange={(e: InputTagsRootValueChangeEvent) => setTags(e.value as string[])}
+                className={styles.root}
+            >
+                <InputTags.Items>
+                    {({ item, remove, itemProps }) => (
+                        <span {...itemProps} className={styles.tag}>
+                            {item}
+                            <button type="button" onClick={remove} className={styles.remove}>
+                                <Times className={styles.removeIcon} />
+                            </button>
+                        </span>
+                    )}
+                </InputTags.Items>
+                <InputTags.Control>
+                    {({ controlProps, add }) => (
+                        <AutoComplete.Root
+                            options={filteredCountries}
+                            onComplete={(e: AutoCompleteCompleteEvent) => setQuery(e.query)}
+                            onValueChange={(e: AutoCompleteValueChangeEvent) => {
+                                if (typeof e.value === 'string') add(e.value);
+                            }}
+                            className={styles.acRoot}
+                        >
+                            <AutoComplete.Input
+                                {...controlProps}
+                                placeholder={tags.length === 0 ? 'Add countries...' : ''}
+                                className={styles.input}
+                            />
+                            <AutoComplete.Portal>
+                                <AutoComplete.Positioner anchor={rootEl as HTMLElement} sideOffset={4}>
+                                    <AutoComplete.Popup className={styles.popup}>
+                                        <AutoComplete.List className={styles.list} style={{ maxHeight: '14rem' }}>
+                                            {filteredCountries.map((country, index) => (
+                                                <AutoComplete.Option key={country} index={index} uKey={country} className={styles.option}>
+                                                    {country}
+                                                </AutoComplete.Option>
+                                            ))}
+                                        </AutoComplete.List>
+                                        <AutoComplete.Empty className={styles.empty}>No results found</AutoComplete.Empty>
+                                    </AutoComplete.Popup>
+                                </AutoComplete.Positioner>
+                            </AutoComplete.Portal>
+                        </AutoComplete.Root>
+                    )}
+                </InputTags.Control>
+            </InputTags.Root>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="InputTags" />
+
+## Features
+
+- Tag creation on Enter key press with optional delimiter character
+- Maximum tag limit with `max` prop
+- Duplicate prevention with `allowDuplicate`
+- Optional typeahead suggestions by composing `AutoComplete.Root` inside `InputTags.Control`
+- Add and remove event callbacks for fine-grained control
+- Paste support with `addOnPaste` and automatic delimiter splitting
+
+## Usage
+
+```tsx
+import { InputTags } from 'primereact/inputtags';
+```
+
+```tsx
+<InputTags.Root value={tags} onValueChange={(e) => setTags(e.value)}>
+    <InputTags.Items>
+        {({ item, remove }) => (
+            <span>
+                {item}
+                <button onClick={remove}>×</button>
+            </span>
+        )}
+    </InputTags.Items>
+    <InputTags.Control>{({ controlProps }) => <input {...controlProps} />}</InputTags.Control>
+</InputTags.Root>
+```
+
+`InputTags.Items` is a pure render-prop iterator: it invokes `children` once per tag with `{ item, index, remove, itemProps }`. Spread `itemProps` onto the rendered chip element to wire ARIA roles and the `data-selected` focus marker. `InputTags.Control` calls `children` exactly once with `{ controlProps, add, remove, removeLast, removeAll, value, inputValue, focused }`. `add` accepts either a single string or an array of strings.
+
+### With Typeahead
+
+For suggestion-driven tag entry, mount an `<AutoComplete.Root>` tree inside `<InputTags.Control>`. Spread `controlProps` onto `<AutoComplete.Input>` so the text-entry gets InputTags' Backspace-to-remove, delimiter-split, `addOnBlur` / `addOnPaste`, and focus handlers. On `AutoComplete.onValueChange` (option selection), call `add` from the render-prop arg to commit the tag. Attach a callback ref + state to `<InputTags.Root>` and pass that element to `<AutoComplete.Positioner anchor={...}>` so the suggestion popup sizes against the full chip-input field rather than just the typing area.
+
+```tsx
+import { AutoComplete } from 'primereact/autocomplete';
+import { InputTags } from 'primereact/inputtags';
+
+const [rootEl, setRootEl] = React.useState<HTMLElement | null>(null);
+
+<InputTags.Root ref={setRootEl} value={tags} onValueChange={(e) => setTags(e.value)}>
+    <InputTags.Items>
+        {({ item, remove, itemProps }) => (
+            <span {...itemProps}>
+                {item}
+                <button onClick={remove}>×</button>
+            </span>
+        )}
+    </InputTags.Items>
+    <InputTags.Control>
+        {({ controlProps, add }) => (
+            <AutoComplete.Root
+                options={filteredItems}
+                onComplete={onSearch}
+                onValueChange={(e) => {
+                    if (typeof e.value === 'string') add(e.value);
+                }}
+            >
+                <AutoComplete.Input {...controlProps} />
+                <AutoComplete.Portal>
+                    <AutoComplete.Positioner anchor={rootEl}>
+                        <AutoComplete.Popup>
+                            <AutoComplete.List />
+                            <AutoComplete.Empty>No results found</AutoComplete.Empty>
+                        </AutoComplete.Popup>
+                    </AutoComplete.Positioner>
+                </AutoComplete.Portal>
+            </AutoComplete.Root>
+        )}
+    </InputTags.Control>
+</InputTags.Root>;
+```
+
+## Behavior
+
+### Polymorphic Root
+
+Use `as` on `InputTags.Root` to change the rendered HTML element.
+
+```tsx
+<InputTags.Root as="section">...</InputTags.Root>
+```
+
+### Render Prop Architecture
+
+The component intentionally has no Item / Label / Remove / Input sub-parts. Consumers compose the per-tag JSX (e.g. `Chip.*`, `Tag`, custom) inside `InputTags.Items`, and the text-entry element (a plain `<input>`, `<AutoComplete.Input>`, or anything else) inside `InputTags.Control`.
+
+## Pass Through
+
+<DocPTViewer name="inputtags-pt" components={['InputTagsRoot']} />
+
+## API
+
+### InputTagsRoot
+
+<DocTable name="InputTagsRoot" category="api" />
+
+| Attribute    | Value         |
+| ------------ | ------------- |
+| `data-scope` | `"inputtags"` |
+| `data-part`  | `"root"`      |
+
+<DocTable name="InputTagsRoot" category="pt" />
+
+### InputTagsItems
+
+`InputTagsItems` accepts a render-prop child invoked once per tag with `{ item, index, remove, itemProps }`. Spread `itemProps` onto the rendered chip element for ARIA + keyboard navigation between tags.
+
+### InputTagsControl
+
+`InputTagsControl` accepts a render-prop child invoked once with `{ controlProps, add, remove, removeLast, removeAll, value, inputValue, focused }`. Spread `controlProps` onto a text-entry element (plain `<input>`, `<AutoComplete.Input>`, etc.). Call `add(tag)` or `add([tag1, tag2])` to commit one or more tags programmatically. When you need the root DOM node (for popup anchors, scroll-into-view, etc.), attach a callback ref via `ref={setRootEl}` on `<InputTags.Root>` and use the tracked state.
+
+## Accessibility
+
+### Screen Reader
+
+The root container uses `role="listbox"` with `aria-orientation="horizontal"`. Each tag (via `itemProps`) has `role="option"` with `aria-selected`, `aria-setsize`, and `aria-posinset`. The text-entry element's ARIA depends on what the consumer renders: a plain `<input>` is just a text field; an `<AutoComplete.Input>` adds combobox + `aria-haspopup` / `aria-expanded` / `aria-controls` semantics automatically.
+
+### Keyboard Support
+
+| Key           | Function                                             |
+| ------------- | ---------------------------------------------------- |
+| `tab`         | Moves focus to the input element.                    |
+| `enter`       | Adds a new tag with the current input value.         |
+| `backspace`   | Removes the last tag when input is empty.            |
+| `left arrow`  | Moves focus to the previous tag when input is empty. |
+| `right arrow` | Moves focus to the next tag when focused on a tag.   |
+
+### Tag Keyboard Support
+
+| Key         | Function                 |
+| ----------- | ------------------------ |
+| `backspace` | Removes the focused tag. |
+| `delete`    | Removes the focused tag. |