@opencxh/ui-kit 3.176.1 → 3.177.0

package/dist/src/index.d.ts

@@ -46,6 +46,7 @@ export { Checkbox, type CheckboxProps } from './input/Checkbox';
 export { DatePicker, type DatePickerProps } from './input/DatePicker';
 export { type FolderDestination, FolderSelect, type FolderSelectProps } from './input/FolderSelect';
 export { ImageField, type ImageFieldProps } from './input/ImageField';
+export { MentionComposer, type MentionComposerProps, type MentionComposerRef, type MentionPerson, } from './input/MentionComposer';
 export { SearchableTextField, type SearchableTextFieldProps } from './input/SearchableTextField';
 export { SearchField, type SearchFieldProps } from './input/SearchField';
 export { Select, type SelectOption, type SelectProps } from './input/Select';

package/dist/src/input/MentionComposer.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+/**
+ * Someone who can be mentioned. Structural on purpose — a domain `User` is assignable, and so
+ * is anything else with a name and an id (a team, an agent), without ui-kit knowing what it is.
+ */
+export interface MentionPerson {
+    id: string;
+    name: string;
+}
+export interface MentionComposerProps {
+    /** Seed HTML, sanitised before it lands. Mention chips survive if they carry `data-mention-id`. */
+    initialContent?: string;
+    /** Plain text plus the ids of the chips still standing in it. */
+    onChange: (plainText: string, mentionIds: string[]) => void;
+    people: MentionPerson[];
+    placeholder?: string;
+    /** Cmd/Ctrl+Enter. Omitted means the shortcut does nothing. */
+    onSubmit?: () => void;
+    /**
+     * Focus on mount, desktop only. Off by default: a composer that is one tab of a detail
+     * page steals both the caret and the scroll position from whatever the reader was doing.
+     */
+    autoFocus?: boolean;
+    className?: string;
+}
+export interface MentionComposerRef {
+    insertText: (text: string) => void;
+    clear: () => void;
+    focus: () => void;
+}
+/**
+ * A one-line-or-more composer where `@` completes a person.
+ *
+ * Mentions are chips (`data-mention-id`), not text: they delete as one unit and survive being
+ * typed around, so the ids handed to `onChange` always match what the author still sees. That
+ * is why this is `contenteditable` and not a `<textarea>` — a textarea can only ever guess
+ * from the text whether a name is still a mention.
+ *
+ * Uncontrolled by design. The DOM holds the content; `onChange` reports it, and the ref is how
+ * a caller writes into it (a template, a draft) without a re-render fighting the caret.
+ */
+export declare const MentionComposer: React.ForwardRefExoticComponent<MentionComposerProps & React.RefAttributes<MentionComposerRef>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencxh/ui-kit",
-  "version": "3.176.1",
+  "version": "3.177.0",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {