@homecode/ui 5.6.1 → 5.7.0

package/dist/esm/src/tiptap/slash-mention/createSlashMentionExtension.js

@@ -1,35 +1,43 @@
 import { mergeAttributes } from '@tiptap/core';
 import Mention from '@tiptap/extension-mention';
+import { PluginKey } from '@tiptap/pm/state';
 import { ReactRenderer } from '@tiptap/react';
 import { SlashSuggestionList } from './SlashSuggestionList.js';
 import S from './SlashSuggestionList.styl.js';
 import { filterSlashItems } from './defaultChatSlashItems.js';
 
-const SlashMention = Mention.extend({
-    addAttributes() {
-        return {
-            ...this.parent?.(),
-            className: {
-                default: null,
-                parseHTML: element => element.getAttribute('data-slash-class'),
-                renderHTML: attributes => {
-                    if (!attributes.className)
-                        return {};
-                    return { 'data-slash-class': attributes.className };
+/** Keep `/` as `mention` for backward-compatible KnowledgeSelector docs. */
+function mentionExtensionName(slashChar) {
+    return slashChar === '/' ? 'mention' : `mention_${slashChar.charCodeAt(0)}`;
+}
+function createNamedSlashMention(slashChar) {
+    return Mention.extend({
+        name: mentionExtensionName(slashChar),
+        addAttributes() {
+            return {
+                ...this.parent?.(),
+                className: {
+                    default: null,
+                    parseHTML: element => element.getAttribute('data-slash-class'),
+                    renderHTML: attributes => {
+                        if (!attributes.className)
+                            return {};
+                        return { 'data-slash-class': attributes.className };
+                    },
                 },
-            },
-            color: {
-                default: null,
-                parseHTML: element => element.getAttribute('data-slash-color'),
-                renderHTML: attributes => {
-                    if (!attributes.color)
-                        return {};
-                    return { 'data-slash-color': attributes.color };
+                color: {
+                    default: null,
+                    parseHTML: element => element.getAttribute('data-slash-color'),
+                    renderHTML: attributes => {
+                        if (!attributes.color)
+                            return {};
+                        return { 'data-slash-color': attributes.color };
+                    },
                 },
-            },
-        };
-    },
-});
+            };
+        },
+    });
+}
 const SUGGESTION_GAP_PX = 4;
 function placeSlashSuggestionPopup(popupElement, clientRect, placement, editorElement) {
     if (!clientRect)
@@ -109,12 +117,13 @@ function insertDefaultMention(editor, range, item, slashChar) {
     const nodeAfter = editor.view.state.selection.$to.nodeAfter;
     const extend = nodeAfter?.text?.startsWith(' ') ? 1 : 0;
     const adjusted = extend ? { ...range, to: range.to + extend } : range;
+    const nodeType = mentionExtensionName(slashChar);
     editor
         .chain()
         .focus()
         .insertContentAt(adjusted, [
         {
-            type: 'mention',
+            type: nodeType,
             attrs: {
                 id: item.id,
                 label: item.label,
@@ -132,8 +141,8 @@ function insertDefaultMention(editor, range, item, slashChar) {
             ?.collapseToEnd();
     });
 }
-function allowSlashTrigger({ state, range, }) {
-    const type = state.schema.nodes['mention'];
+function allowSlashTrigger({ state, range, slashChar, }) {
+    const type = state.schema.nodes[mentionExtensionName(slashChar)];
     const $from = state.doc.resolve(range.from);
     if (!type || !$from.parent.type.contentMatch.matchType(type))
         return false;
@@ -142,13 +151,24 @@ function allowSlashTrigger({ state, range, }) {
     const before = state.doc.textBetween(range.from - 1, range.from);
     return /\s/.test(before);
 }
-function createSlashMentionExtension({ items: resolvedItems, slashChar = '/', pluginKey, onItemCommand, suggestionPlacement = 'below', onSuggestionUiActiveChange, }) {
+async function resolveSuggestionItems(query, staticItems, getItems) {
+    if (getItems) {
+        return Promise.resolve(getItems(query));
+    }
+    return filterSlashItems(staticItems ?? [], query);
+}
+function createSlashMentionExtension({ items: resolvedItems, getItems, slashChar = '/', pluginKey, onItemCommand, suggestionPlacement = 'below', onSuggestionUiActiveChange, }) {
     const uiRef = {
         current: null,
     };
+    const SlashMention = createNamedSlashMention(slashChar);
+    const resolvedPluginKey = pluginKey ?? new PluginKey(`slashMention${slashChar.charCodeAt(0)}`);
     return SlashMention.configure({
         renderText({ node }) {
-            return `/${node.attrs.id}`;
+            const label = typeof node.attrs.label === 'string' && node.attrs.label.trim() !== ''
+                ? node.attrs.label
+                : String(node.attrs.id ?? '');
+            return `${slashChar}${label}`;
         },
         renderHTML({ options, node }) {
             const id = typeof node.attrs.id === 'string'
@@ -175,10 +195,10 @@ function createSlashMentionExtension({ items: resolvedItems, slashChar = '/', pl
         },
         suggestion: {
             char: slashChar,
-            pluginKey,
+            pluginKey: resolvedPluginKey,
             allowedPrefixes: [' ', '\n', '\t', '\r'],
-            allow: props => allowSlashTrigger(props),
-            items: ({ query }) => Promise.resolve(filterSlashItems(resolvedItems, query)),
+            allow: props => allowSlashTrigger({ ...props, slashChar }),
+            items: ({ query }) => resolveSuggestionItems(query, resolvedItems, getItems),
             command: ({ editor, range, props }) => {
                 const item = props;
                 if (onItemCommand?.({ editor, range, item }) === true) {

package/dist/esm/src/tools/dom.js

@@ -38,17 +38,15 @@ let interactionMode = INTERACTION_MODE.POINTER;
 const getInteractionMode = () => interactionMode;
 function watchControllerFlag() {
     const classes = document.body.classList;
-    const onPointerMove = () => {
-        classes.remove(INTERACTION_MODE.KEYBOARD);
-        classes.add(INTERACTION_MODE.POINTER);
+    const setMode = (mode, prevMode) => {
+        interactionMode = mode;
+        classes.remove(prevMode);
+        classes.add(mode);
     };
     ['pointerdown', 'pointermove'].forEach(event => {
-        document.addEventListener(event, onPointerMove, true);
-    });
-    document.addEventListener('keydown', () => {
-        classes.remove(INTERACTION_MODE.POINTER);
-        classes.add(INTERACTION_MODE.KEYBOARD);
+        document.addEventListener(event, () => setMode(INTERACTION_MODE.POINTER, INTERACTION_MODE.KEYBOARD), true);
     });
+    document.addEventListener('keydown', () => setMode(INTERACTION_MODE.KEYBOARD, INTERACTION_MODE.POINTER));
     classes.add(interactionMode);
 }
 const isTouch = () => isBrowser && 'ontouchstart' in window;

package/dist/esm/src/tools/resizeObserver.js

@@ -57,7 +57,7 @@ function unobserve(elem, cb) {
         return;
     }
     const data = ITEMS.get(elem);
-    if (!cb || data?.listeners.indexOf(cb) === -1)
+    if (!data || !cb || data.listeners.indexOf(cb) === -1)
         return;
     if (data.listeners.length === 1)
         ITEMS.delete(elem);

package/dist/esm/types/src/components/Popup/Popup.d.ts

@@ -9,6 +9,7 @@ export declare class Popup extends Component<T.Props, T.State> {
     containerElem: HTMLDivElement;
     onContainerElemRef: (elem: any) => void;
     focused: boolean;
+    isOpening: boolean;
     pointerPressed: boolean;
     subscribedHoverControl: boolean;
     subscribedSizeChange: boolean;
@@ -61,7 +62,7 @@ export declare class Popup extends Component<T.Props, T.State> {
     onBlur: (e: any) => void;
     onTriggerResize: () => void;
     onContainerResize: () => void;
-    open: any;
+    open: () => void;
     close: () => void;
     changeState(isOpen: boolean, callback: any): void;
     afterOpen: () => void;

package/dist/esm/types/src/components/Popup/Popup.helpers.d.ts

@@ -42,6 +42,7 @@ export declare function shiftMarginsIntoBounds(rect: DOMRectReadOnly, inner: Cli
     marginTop: number;
 };
 export declare function fitRectToBoundary(rect: DOMRectReadOnly, boundary: ClientRectEdges, maxWidth: number | null): BoundaryFit;
+export declare function isEditable(target: EventTarget | null): boolean;
 export declare const childs: Record<Id, Id[]>;
 export declare const getId: () => number;
 export declare const getPopupId: (elem: any, attr?: string) => number;

package/dist/esm/types/src/components/Popup/Popup.types.d.ts

@@ -3,6 +3,7 @@ import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
 import type { BoundaryFit } from './Popup.helpers';
 export type TriggerPropsType = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     className?: string;
+    [dataAttribute: `data-${string}`]: unknown;
 };
 export type WrapperPropsType = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     className?: string;

package/dist/esm/types/src/components/PromptComposer/PromptComposer.d.ts

@@ -6,6 +6,10 @@ export declare const PromptComposer: import("react").ForwardRefExoticComponent<O
     slashCommandItems?: import(".").SlashCommandItem[];
     slashSuggestionPlacement?: import(".").SlashSuggestionPlacement;
     onSlashItemCommand?: import(".").SlashOnItemCommand;
+    mentionConfigs?: import(".").PromptMentionConfig[];
+    atMentionItems?: import(".").SlashCommandItem[];
+    atMentionGetItems?: import(".").SlashGetItems;
+    onAtItemCommand?: import(".").SlashOnItemCommand;
     prefillMessage?: string;
     attachmentsCount?: number;
     allowEnterSubmit?: boolean;

package/dist/esm/types/src/components/PromptComposer/PromptComposer.types.d.ts

@@ -1,6 +1,6 @@
 import type { Editor } from '@tiptap/core';
 import type { HTMLAttributes } from 'react';
-import type { SlashCommandItem, SlashOnItemCommand, SlashSuggestionPlacement } from '../../tiptap/slash-mention';
+import type { PromptMentionConfig, SlashCommandItem, SlashGetItems, SlashOnItemCommand, SlashSuggestionPlacement } from '../../tiptap/slash-mention';
 import type { Props as ScrollProps } from '../Scroll/Scroll.types';
 export type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onSubmit' | 'onChange'> & {
     disabled?: boolean;
@@ -9,12 +9,26 @@ export type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onSubmit' | 'onChange'
     /** Slash menu vertical placement; defaults to above chat input. */
     slashSuggestionPlacement?: SlashSuggestionPlacement;
     onSlashItemCommand?: SlashOnItemCommand;
+    /**
+     * Extra mention triggers (e.g. `@` files). `/` still comes from
+     * slashCommandItems when provided.
+     */
+    mentionConfigs?: PromptMentionConfig[];
+    /** Convenience for `@` file mentions (merged into mentionConfigs). */
+    atMentionItems?: SlashCommandItem[];
+    atMentionGetItems?: SlashGetItems;
+    onAtItemCommand?: SlashOnItemCommand;
     prefillMessage?: string | null;
     /** Staged attachment count - Enter can submit even when text empty. */
     attachmentsCount?: number;
-    /** Mobile usually sets false so Enter inserts newline. */
+    /**
+     * When true (desktop default), Enter submits if content has no newlines yet;
+     * once newlines exist, Enter inserts another line and Cmd/Ctrl+Enter submits.
+     * Shift+Enter always inserts a newline. Mobile usually sets false so Enter
+     * always inserts a newline.
+     */
     allowEnterSubmit?: boolean;
-    /** Called when user presses Enter to submit. */
+    /** Called when user presses Enter (or Cmd/Ctrl+Enter when multiline) to submit. */
     onSubmit?: (text: string, editor: Editor) => void;
     /** Called on every transaction with plain text value. */
     onChange?: (text: string, editor: Editor) => void;

package/dist/esm/types/src/components/PromptComposer/index.d.ts

@@ -4,4 +4,4 @@ export { usePromptComposerEditor } from './usePromptComposerEditor';
 export type { UsePromptComposerEditorOptions } from './usePromptComposerEditor';
 export { getPromptComposerTokenRangeBeforePos, createPromptComposerHandle, insertPromptComposerContentAtCaret, openPromptComposerSlashSuggestion, promptComposerChipHtml, promptComposerMentionNode, PROMPT_COMPOSER_COMMAND_CHIP_CLASS, } from './promptComposerInsert';
 export type { PromptComposerHandle, PromptComposerInsertOptions, PromptComposerMentionNodeInput, } from './promptComposerInsert';
-export type { SlashCommandItem, SlashItemCommandContext, SlashOnItemCommand, SlashSuggestionPlacement, } from '../../tiptap/slash-mention';
+export type { SlashCommandItem, SlashItemCommandContext, SlashOnItemCommand, SlashSuggestionPlacement, SlashGetItems, PromptMentionConfig, } from '../../tiptap/slash-mention';

package/dist/esm/types/src/components/PromptComposer/usePromptComposerEditor.d.ts

@@ -1,11 +1,15 @@
 import { type Editor } from '@tiptap/core';
-import type { SlashCommandItem, SlashOnItemCommand, SlashSuggestionPlacement } from '../../tiptap/slash-mention';
+import type { PromptMentionConfig, SlashCommandItem, SlashGetItems, SlashOnItemCommand, SlashSuggestionPlacement } from '../../tiptap/slash-mention';
 export type UsePromptComposerEditorOptions = {
     disabled: boolean;
     placeholder?: string;
     slashCommandItems?: SlashCommandItem[];
     slashSuggestionPlacement?: SlashSuggestionPlacement;
     onSlashItemCommand?: SlashOnItemCommand;
+    mentionConfigs?: PromptMentionConfig[];
+    atMentionItems?: SlashCommandItem[];
+    atMentionGetItems?: SlashGetItems;
+    onAtItemCommand?: SlashOnItemCommand;
     prefillMessage?: string | null;
     attachmentsCount?: number;
     allowEnterSubmit: boolean;
@@ -17,4 +21,4 @@ export type UsePromptComposerEditorResult = {
     text: string;
     trimmedText: string;
 };
-export declare function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, slashSuggestionPlacement, onSlashItemCommand, prefillMessage, attachmentsCount, allowEnterSubmit, onSubmit, onChange, }: UsePromptComposerEditorOptions): UsePromptComposerEditorResult;
+export declare function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, slashSuggestionPlacement, onSlashItemCommand, mentionConfigs, atMentionItems, atMentionGetItems, onAtItemCommand, prefillMessage, attachmentsCount, allowEnterSubmit, onSubmit, onChange, }: UsePromptComposerEditorOptions): UsePromptComposerEditorResult;

package/dist/esm/types/src/components/Select/Select.helpers.d.ts

@@ -1,6 +1,12 @@
-import type { Option } from './Select.types';
+import type { Id, Option, Value } from './Select.types';
 export declare function isMultiple(value: any): boolean;
 export declare function renderLabel({ label, render }: Option): string;
+/** Selection is always kept as a list of ids, whatever the `value` shape is. */
+export declare function toIds(value: Value | undefined): Id[];
+/** Stable primitive for `useEffect` deps — `value` arrays are often recreated. */
+export declare function idsKey(ids: Id[]): string;
+export declare function matchesSearch(option: Option, query: string): boolean;
+export declare function isSelectable(option: Option | undefined): boolean;
 export declare function buildOptionsTree(options: Option[], idsMap: IdsMap): Option[];
 type IdsMap = {
     items: {

package/dist/esm/types/src/components/Select/Select.hooks.d.ts

@@ -0,0 +1,55 @@
+import * as T from './Select.types';
+/**
+ * Open state contract:
+ * - `isOpen` prop is a boolean -> fully controlled, the consumer must react to
+ *   `onOpen` / `onClose` to change it.
+ * - `isOpen` prop is `undefined` -> Select owns the state.
+ */
+export declare function useSelectOpenState({ isOpen: isOpenProp, onOpen, onClose, }: {
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+}): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+};
+/**
+ * Selection contract mirrors the open state one: `value` present -> controlled,
+ * `value === undefined` -> Select owns the selection.
+ */
+export declare function useSelectedIds(value: T.Value | undefined): {
+    selectedIds: T.Id[];
+    setSelectedIds: (ids: T.Id[]) => void;
+};
+/** Single source of truth for what the list shows and what can be navigated. */
+export declare function useSelectOptions({ options, additionalOptions, searchQuery, }: {
+    options: T.Option[];
+    additionalOptions: T.Option[];
+    searchQuery: string;
+}): {
+    allOptions: T.Option[];
+    visibleOptions: T.Option[];
+    navigableOptions: T.Option[];
+    optionsById: {
+        items: {
+            [key: string]: T.Option;
+        };
+        childIds: {
+            [key: string]: T.Id[];
+        };
+    };
+};
+/**
+ * Keyboard cursor. It is stored as an option id and always resolved against the
+ * currently *visible* list, so filtering can never desync it from the rows.
+ */
+export declare function useKeyboardNav({ isOpen, navigableOptions, selectedIds, onSelect, }: {
+    isOpen: boolean;
+    navigableOptions: T.Option[];
+    selectedIds: T.Id[];
+    onSelect: (id: T.Id) => void;
+}): {
+    focusedId: T.Id;
+    setFocusedId: import("react").Dispatch<import("react").SetStateAction<T.Id>>;
+};

package/dist/esm/types/src/components/Select/Select.types.d.ts

@@ -84,6 +84,6 @@ export type State = {
 };
 export type OptionElemProps = HTMLAttributes<HTMLDivElement> & {
     className: string;
-    ref?: RefObject<HTMLDivElement>;
+    ref?: RefObject<HTMLDivElement> | ((elem: HTMLDivElement | null) => void);
 };
 export {};

package/dist/esm/types/src/components/Select/Select2.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/types/src/tiptap/slash-mention/createSlashMentionExtension.d.ts

@@ -18,4 +18,4 @@ export declare function slashMentionSuggestionRender(uiRef: MutableRefObject<Sla
 export type CreateSlashMentionExtensionConfiguredOptions = CreateSlashMentionExtensionOptions & {
     onSuggestionUiActiveChange?: (active: boolean) => void;
 };
-export declare function createSlashMentionExtension({ items: resolvedItems, slashChar, pluginKey, onItemCommand, suggestionPlacement, onSuggestionUiActiveChange, }: CreateSlashMentionExtensionConfiguredOptions): import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;
+export declare function createSlashMentionExtension({ items: resolvedItems, getItems, slashChar, pluginKey, onItemCommand, suggestionPlacement, onSuggestionUiActiveChange, }: CreateSlashMentionExtensionConfiguredOptions): import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;

package/dist/esm/types/src/tiptap/slash-mention/index.d.ts

@@ -1,4 +1,4 @@
-export type { SlashCommandItem, SlashOnItemCommand, SlashItemCommandContext, SlashSuggestionPlacement, CreateSlashMentionExtensionOptions, } from './types';
+export type { SlashCommandItem, SlashOnItemCommand, SlashItemCommandContext, SlashSuggestionPlacement, SlashGetItems, PromptMentionConfig, CreateSlashMentionExtensionOptions, } from './types';
 export { DEFAULT_CHAT_SLASH_ITEMS, filterSlashItems, } from './defaultChatSlashItems';
 export { createSlashMentionExtension, slashMentionSuggestionRender, } from './createSlashMentionExtension';
 export type { CreateSlashMentionExtensionConfiguredOptions } from './createSlashMentionExtension';

package/dist/esm/types/src/tiptap/slash-mention/types.d.ts

@@ -19,8 +19,19 @@ export type SlashItemCommandContext = {
  */
 export type SlashOnItemCommand = (ctx: SlashItemCommandContext) => boolean;
 export type SlashSuggestionPlacement = 'below' | 'above' | 'auto';
+export type SlashGetItems = (query: string) => SlashCommandItem[] | Promise<SlashCommandItem[]>;
+export type PromptMentionConfig = {
+    slashChar: string;
+    /** Static items (client-filtered). Ignored when getItems is set. */
+    items?: SlashCommandItem[];
+    /** Async/dynamic items (e.g. server search for @files). */
+    getItems?: SlashGetItems;
+    onItemCommand?: SlashOnItemCommand;
+    pluginKey?: import('@tiptap/pm/state').PluginKey;
+};
 export type CreateSlashMentionExtensionOptions = {
-    items: SlashCommandItem[];
+    items?: SlashCommandItem[];
+    getItems?: SlashGetItems;
     slashChar?: string;
     pluginKey?: import('@tiptap/pm/state').PluginKey;
     onItemCommand?: SlashOnItemCommand;

package/graphify-out/.graphify_labels.json

@@ -101,10 +101,10 @@
   "99": "Render Months Label",
   "100": "Render Month Label",
   "101": "Render Weekday Label",
-  "102": "Render Year Label",
-  "103": "Start Of Week",
-  "104": "Weekend ClassName",
-  "105": "Weekend Styling",
+  "102": "Community 102",
+  "103": "Community 103",
+  "104": "Community 104",
+  "105": "Community 105",
   "106": "Icon Name Helpers",
   "107": "Media Placeholder Icons",
   "108": "Utility Icons",
@@ -118,20 +118,20 @@
   "116": "Docs Scope",
   "117": "Auto Scroll Props",
   "118": "Content Props",
-  "119": "Content ClassName",
+  "119": "Community 119",
   "120": "Footer Props",
-  "121": "Icon Props",
-  "122": "Max Height Props",
+  "121": "Community 121",
+  "122": "Community 122",
   "123": "No Scroll Props",
-  "124": "Subtitle Props",
-  "125": "Subtitle ClassName",
+  "124": "Community 124",
+  "125": "Community 125",
   "126": "Title Props",
-  "127": "Title ClassName",
-  "128": "Trigger Props",
+  "127": "Community 127",
+  "128": "Community 128",
   "129": "Trigger ClassName",
-  "130": "Width Props",
+  "130": "Community 130",
   "131": "Community 131",
-  "132": "Expand Types",
+  "132": "Community 132",
   "133": "Brand Avatar Icons",
   "134": "Communication Action Icons",
   "135": "Status Action Icons",
@@ -144,7 +144,7 @@
   "142": "Community 142",
   "143": "More Docs Examples",
   "144": "Docs Scope Pages",
-  "145": "Additional Docs Examples",
+  "145": "Community 145",
   "146": "Brand Logo Assets",
   "147": "Test Utilities",
   "148": "PostCSS Config",
@@ -173,14 +173,18 @@
   "171": "Community 171",
   "172": "Community 172",
   "173": "Community 173",
+  "174": "Community 174",
   "175": "Community 175",
   "176": "Community 176",
   "177": "Community 177",
   "178": "Community 178",
   "179": "Community 179",
+  "180": "Community 180",
+  "181": "Community 181",
   "182": "Community 182",
   "183": "Community 183",
   "184": "Community 184",
+  "185": "Community 185",
   "186": "Community 186",
   "187": "Community 187",
   "188": "Community 188",
@@ -191,23 +195,12 @@
   "193": "Community 193",
   "194": "Community 194",
   "195": "Community 195",
-  "196": "Community 196",
   "197": "Community 197",
-  "198": "Community 198",
-  "199": "Community 199",
   "200": "Community 200",
   "201": "Community 201",
-  "202": "Community 202",
-  "203": "Community 203",
-  "204": "Community 204",
   "205": "Community 205",
-  "206": "Community 206",
-  "207": "Community 207",
-  "208": "Community 208",
-  "209": "Community 209",
   "210": "Community 210",
   "213": "Community 213",
-  "214": "Community 214",
   "216": "Community 216",
   "218": "Community 218",
   "220": "Community 220",