@homecode/ui 5.6.1 → 5.7.0

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -49,19 +49,22 @@ import '../GridLayout/GridLayout.styl.js';
 import '../Heading/Heading.js';
 import '../InputFile/InputFile.styl.js';
 import '../InputFile/Item/Item.styl.js';
-import '../../tiptap/slash-mention/createSlashMentionExtension.js';
+import '@tiptap/core';
+import '@tiptap/extension-mention';
+import '@tiptap/pm/state';
+import '@tiptap/react';
+import { Menu } from '../Menu/Menu.js';
+import '../../tiptap/slash-mention/SlashSuggestionList.styl.js';
 import '../../services/i18n.js';
 import '../Portal/Portal.js';
 import '../Paranja/Paranja.styl.js';
 import '../LightBox/LightBox.styl.js';
-import { Menu } from '../Menu/Menu.js';
 import '../Notifications/store.js';
 import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
 import '../PromptComposer/PromptComposer.js';
 import '@tiptap/extensions';
-import '@tiptap/react';
 import '@tiptap/starter-kit';
 import '../PromptComposer/PromptComposer.styl.js';
 import '../RadioGroup/RadioGroupContext.js';

package/dist/esm/src/components/InputFile/InputFile.js

@@ -63,7 +63,10 @@ import '@tiptap/extensions';
 import '@tiptap/react';
 import '@tiptap/starter-kit';
 import '../PromptComposer/PromptComposer.styl.js';
-import '../../tiptap/slash-mention/createSlashMentionExtension.js';
+import '@tiptap/core';
+import '@tiptap/extension-mention';
+import '@tiptap/pm/state';
+import '../../tiptap/slash-mention/SlashSuggestionList.styl.js';
 import '../RadioGroup/RadioGroupContext.js';
 import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';

package/dist/esm/src/components/Popup/Popup.helpers.js

@@ -104,6 +104,13 @@ function fitRectToBoundary(rect, boundary, maxWidth) {
         maxWidth,
     };
 }
+function isEditable(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    return /^(input|textarea)$/i.test(target.tagName);
+}
 const childs = {};
 let popupIds = 0;
 const getId = () => ++popupIds;
@@ -126,4 +133,4 @@ function unsetChild(rootId, id) {
         delete childs[rootId];
 }
 
-export { ZERO_BOUNDARY_FIT, childs, constrainAxisShift, domRectToEdges, edgesWidth, fitRectToBoundary, getId, getPopupId, intersectEdges, isLastChild, popupBoundaryEdges, popupBoundaryPadding, setChild, shiftMarginsIntoBounds, shrinkEdgesUniform, unsetChild, viewportClientRectEdges };
+export { ZERO_BOUNDARY_FIT, childs, constrainAxisShift, domRectToEdges, edgesWidth, fitRectToBoundary, getId, getPopupId, intersectEdges, isEditable, isLastChild, popupBoundaryEdges, popupBoundaryPadding, setChild, shiftMarginsIntoBounds, shrinkEdgesUniform, unsetChild, viewportClientRectEdges };

package/dist/esm/src/components/Popup/Popup.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ZERO_BOUNDARY_FIT, getId, getPopupId, popupBoundaryEdges, popupBoundaryPadding, edgesWidth, fitRectToBoundary, isLastChild, unsetChild, childs, setChild } from './Popup.helpers.js';
+import { ZERO_BOUNDARY_FIT, getId, getPopupId, popupBoundaryEdges, popupBoundaryPadding, edgesWidth, fitRectToBoundary, isLastChild, unsetChild, childs, isEditable, setChild } from './Popup.helpers.js';
 import { observe, unobserve } from '../../tools/resizeObserver.js';
 import { Component, createRef } from 'react';
 import { Paranja } from '../Paranja/Paranja.js';
@@ -32,6 +32,7 @@ class Popup extends Component {
         }
     };
     focused = false;
+    isOpening = false;
     pointerPressed = false;
     subscribedHoverControl = false;
     subscribedSizeChange = false;
@@ -329,7 +330,8 @@ class Popup extends Component {
             this.close();
             return;
         }
-        if (this.focused && /Enter| /.test(e.key)) {
+        // Enter/Space belong to the trigger itself when it is a text field.
+        if (this.focused && /Enter| /.test(e.key) && !isEditable(e.target)) {
             e.stopPropagation();
             this.toggle();
         }
@@ -366,10 +368,13 @@ class Popup extends Component {
     onContainerResize = () => {
         this.updateBounds();
     };
-    open = throttle(() => {
+    open = () => {
         const { rootPopupId } = this.state;
-        if (this.state.isOpen)
+        // `isOpening` covers the gap until the state commits — throttling here used
+        // to swallow a re-open that came right after a close.
+        if (this.state.isOpen || this.isOpening)
             return;
+        this.isOpening = true;
         this.updateBounds();
         this.subscribeSizeChange();
         this.subscribeScroll();
@@ -380,8 +385,9 @@ class Popup extends Component {
         this.changeState(true, this.afterOpen);
         if (rootPopupId)
             setChild(rootPopupId, this.id);
-    }, 100);
+    };
     close = () => {
+        this.isOpening = false;
         if (!this.state.isOpen)
             return;
         this.unsubscribeSizeChange();
@@ -390,7 +396,7 @@ class Popup extends Component {
     changeState(isOpen, callback) {
         const { animated, onOpen, onClose } = this.props;
         this.timers.clear();
-        this.setState({ isOpen });
+        this.setState({ isOpen }, () => (this.isOpening = false));
         isOpen ? onOpen?.() : onClose?.();
         if (animated) {
             this.setState({ animating: true });

package/dist/esm/src/components/PromptComposer/PromptComposer.js

@@ -7,13 +7,17 @@ import S from './PromptComposer.styl.js';
 import { createPromptComposerHandle } from './promptComposerInsert.js';
 import { usePromptComposerEditor } from './usePromptComposerEditor.js';
 
-const PromptComposer = forwardRef(function PromptComposer({ disabled = false, placeholder, className, slashCommandItems, slashSuggestionPlacement, onSlashItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit = true, onSubmit, onChange, scrollProps = {}, }, ref) {
+const PromptComposer = forwardRef(function PromptComposer({ disabled = false, placeholder, className, slashCommandItems, slashSuggestionPlacement, onSlashItemCommand, mentionConfigs, atMentionItems, atMentionGetItems, onAtItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit = true, onSubmit, onChange, scrollProps = {}, }, ref) {
     const { editor } = usePromptComposerEditor({
         disabled,
         placeholder,
         slashCommandItems,
         slashSuggestionPlacement,
         onSlashItemCommand,
+        mentionConfigs,
+        atMentionItems,
+        atMentionGetItems,
+        onAtItemCommand,
         prefillMessage,
         attachmentsCount,
         allowEnterSubmit,

package/dist/esm/src/components/PromptComposer/promptComposerInsert.js

@@ -20,8 +20,9 @@ function promptComposerChipHtml(text, className = PROMPT_COMPOSER_COMMAND_CHIP_C
 }
 function promptComposerMentionNode(input) {
     const { id, label = id, className = null, color = null, slashChar = '/', } = input;
+    const nodeType = slashChar === '/' ? 'mention' : `mention_${slashChar.charCodeAt(0)}`;
     return {
-        type: 'mention',
+        type: nodeType,
         attrs: {
             id,
             label,

package/dist/esm/src/components/PromptComposer/usePromptComposerEditor.js

@@ -8,20 +8,78 @@ import { createSlashMentionExtension } from '../../tiptap/slash-mention/createSl
 import { safePromptComposerEditorText, promptComposerSafeEditorDom, syncPromptComposerHeight } from './PromptComposer.helpers.js';
 import { PROMPT_COMPOSER_EMPTY_DOC, promptComposerParagraphDoc } from './promptComposerDoc.js';
 
-function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, slashSuggestionPlacement = 'above', onSlashItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit, onSubmit, onChange, }) {
-    const slashOpenRef = useRef(false);
+function buildMentionConfigs({ slashCommandItems, onSlashItemCommand, mentionConfigs, atMentionItems, atMentionGetItems, onAtItemCommand, }) {
+    const configs = [];
+    const slashItems = slashCommandItems ?? DEFAULT_CHAT_SLASH_ITEMS;
+    if (slashItems.length > 0) {
+        configs.push({
+            slashChar: '/',
+            items: slashItems,
+            onItemCommand: onSlashItemCommand,
+        });
+    }
+    if (mentionConfigs?.length) {
+        configs.push(...mentionConfigs);
+    }
+    if (atMentionGetItems || (atMentionItems && atMentionItems.length > 0)) {
+        configs.push({
+            slashChar: '@',
+            items: atMentionItems,
+            getItems: atMentionGetItems,
+            onItemCommand: onAtItemCommand,
+        });
+    }
+    // Deduplicate by slashChar (first wins for `/` from slashCommandItems).
+    const seen = new Set();
+    return configs.filter(cfg => {
+        if (seen.has(cfg.slashChar))
+            return false;
+        seen.add(cfg.slashChar);
+        return true;
+    });
+}
+function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, slashSuggestionPlacement = 'above', onSlashItemCommand, mentionConfigs, atMentionItems, atMentionGetItems, onAtItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit, onSubmit, onChange, }) {
+    const suggestionOpenCountRef = useRef(0);
     const onSlashItemCommandRef = useRef(onSlashItemCommand);
     onSlashItemCommandRef.current = onSlashItemCommand;
+    const onAtItemCommandRef = useRef(onAtItemCommand);
+    onAtItemCommandRef.current = onAtItemCommand;
+    const mentionConfigsRef = useRef(mentionConfigs);
+    mentionConfigsRef.current = mentionConfigs;
     const onSubmitRef = useRef(onSubmit);
     onSubmitRef.current = onSubmit;
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
+    const atMentionGetItemsRef = useRef(atMentionGetItems);
+    atMentionGetItemsRef.current = atMentionGetItems;
     const editorRef = useRef(null);
     const suggestionActiveUpdater = useCallback((active) => {
-        slashOpenRef.current = active;
+        suggestionOpenCountRef.current = Math.max(0, suggestionOpenCountRef.current + (active ? 1 : -1));
     }, []);
     const slashItemsFingerprint = JSON.stringify(slashCommandItems ?? null);
-    const slashItemsStable = useMemo(() => slashCommandItems ?? DEFAULT_CHAT_SLASH_ITEMS, [slashItemsFingerprint]);
+    const atItemsFingerprint = JSON.stringify(atMentionItems ?? null);
+    const mentionConfigsFingerprint = JSON.stringify((mentionConfigs ?? []).map(c => ({
+        slashChar: c.slashChar,
+        items: c.items ?? null,
+        hasGetItems: Boolean(c.getItems),
+    })));
+    const resolvedMentionConfigs = useMemo(() => buildMentionConfigs({
+        slashCommandItems,
+        onSlashItemCommand,
+        mentionConfigs,
+        atMentionItems,
+        atMentionGetItems,
+        onAtItemCommand,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- fingerprint keys
+    [
+        slashItemsFingerprint,
+        atItemsFingerprint,
+        mentionConfigsFingerprint,
+        Boolean(atMentionGetItems),
+        Boolean(onSlashItemCommand),
+        Boolean(onAtItemCommand),
+    ]);
     const placeholderText = useMemo(() => {
         if (placeholder === undefined || placeholder === null) {
             return 'Type a message...';
@@ -51,18 +109,38 @@ function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, sla
                 emptyNodeClass: S.promptComposerEmptyNode,
             }),
         ];
-        if (slashItemsStable.length > 0) {
+        for (const cfg of resolvedMentionConfigs) {
+            const slashChar = cfg.slashChar;
             exts.push(createSlashMentionExtension({
-                items: slashItemsStable,
+                items: cfg.items,
+                getItems: slashChar === '@' && atMentionGetItemsRef.current
+                    ? query => atMentionGetItemsRef.current(query)
+                    : cfg.getItems
+                        ? query => {
+                            const latest = mentionConfigsRef.current?.find(c => c.slashChar === slashChar);
+                            return (latest?.getItems ?? cfg.getItems)(query);
+                        }
+                        : undefined,
+                slashChar,
+                pluginKey: cfg.pluginKey,
                 suggestionPlacement: slashSuggestionPlacement,
                 onSuggestionUiActiveChange: suggestionActiveUpdater,
-                onItemCommand: ctx => onSlashItemCommandRef.current?.(ctx) === true,
+                onItemCommand: ctx => {
+                    if (slashChar === '/') {
+                        return onSlashItemCommandRef.current?.(ctx) === true;
+                    }
+                    if (slashChar === '@') {
+                        return onAtItemCommandRef.current?.(ctx) === true;
+                    }
+                    const latest = mentionConfigsRef.current?.find(c => c.slashChar === slashChar);
+                    return (latest?.onItemCommand ?? cfg.onItemCommand)?.(ctx) === true;
+                },
             }));
         }
         return exts;
     }, [
         placeholderText,
-        slashItemsStable,
+        resolvedMentionConfigs,
         slashSuggestionPlacement,
         suggestionActiveUpdater,
     ]);
@@ -82,31 +160,31 @@ function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, sla
         });
     }, []);
     const trimmedText = text.trim();
-    const trimmedTextRef = useRef(trimmedText);
-    trimmedTextRef.current = trimmedText;
     const attachmentsCountRef = useRef(attachmentsCount);
     attachmentsCountRef.current = attachmentsCount;
     const allowEnterSubmitRef = useRef(allowEnterSubmit);
     allowEnterSubmitRef.current = allowEnterSubmit;
     const handleEditorKeyDown = useCallback((_view, event) => {
-        if (!(event.key === 'Enter' &&
-            !event.shiftKey &&
-            !event.metaKey &&
-            !event.ctrlKey)) {
+        if (event.key !== 'Enter' || event.shiftKey)
             return false;
-        }
         if (!allowEnterSubmitRef.current)
             return false;
-        if (slashOpenRef.current)
+        if (suggestionOpenCountRef.current > 0)
             return false;
-        if (!trimmedTextRef.current && attachmentsCountRef.current === 0) {
+        const activeEditor = editorRef.current;
+        if (!activeEditor)
+            return false;
+        const currentText = activeEditor.getText();
+        const hasNewlines = currentText.includes('\n');
+        const isModEnter = event.metaKey || event.ctrlKey;
+        // Single line: Enter submits. Multiline: Enter inserts a line; Cmd/Ctrl+Enter submits.
+        if (hasNewlines ? !isModEnter : isModEnter)
+            return false;
+        if (!currentText.trim() && attachmentsCountRef.current === 0) {
             return false;
         }
         event.preventDefault();
-        const activeEditor = editorRef.current;
-        if (!activeEditor)
-            return true;
-        onSubmitRef.current?.(activeEditor.getText(), activeEditor);
+        onSubmitRef.current?.(currentText, activeEditor);
         return true;
     }, []);
     const editor = useEditor({

package/dist/esm/src/components/Select/Select.helpers.js

@@ -6,6 +6,33 @@ function renderLabel({ label, render }) {
         return render(label);
     return label;
 }
+/** Selection is always kept as a list of ids, whatever the `value` shape is. */
+function toIds(value) {
+    if (value === null || value === undefined)
+        return [];
+    if (Array.isArray(value))
+        return value;
+    return [value];
+}
+/** Stable primitive for `useEffect` deps — `value` arrays are often recreated. */
+function idsKey(ids) {
+    return ids.join('\u0000');
+}
+/**
+ * Script-agnostic normalization: `toLocaleLowerCase` respects locale casing rules
+ * and NFC keeps composed/decomposed forms comparable.
+ */
+function normalize(text) {
+    return text.toLocaleLowerCase().normalize('NFC');
+}
+function matchesSearch(option, query) {
+    if (!query)
+        return true;
+    return normalize(option.label).includes(normalize(query));
+}
+function isSelectable(option) {
+    return Boolean(option) && !option.isGroupHeader;
+}
 function buildOptionsTree(options, idsMap) {
     function buildOption(id) {
         const { items, childIds } = idsMap;
@@ -34,4 +61,4 @@ function mapById(options) {
     });
 }
 
-export { buildOptionsTree, isMultiple, mapById, renderLabel };
+export { buildOptionsTree, idsKey, isMultiple, isSelectable, mapById, matchesSearch, renderLabel, toIds };

package/dist/esm/src/components/Select/Select.hooks.js

@@ -0,0 +1,131 @@
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import useEvent from '../../hooks/useEvent.js';
+import { idsKey, matchesSearch, isSelectable, mapById, toIds } from './Select.helpers.js';
+
+/**
+ * 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.
+ */
+function useSelectOpenState({ isOpen: isOpenProp, onOpen, onClose, }) {
+    const isControlled = typeof isOpenProp === 'boolean';
+    const [innerIsOpen, setInnerIsOpen] = useState(false);
+    const isOpen = isControlled ? isOpenProp : innerIsOpen;
+    // Kept in sync during render so that two `open()` calls within one event
+    // (Popup + Select both reacting to a focus) notify the consumer only once.
+    const isOpenRef = useRef(isOpen);
+    isOpenRef.current = isOpen;
+    const callbacks = useRef({ onOpen, onClose });
+    callbacks.current = { onOpen, onClose };
+    const open = useCallback(() => {
+        if (isOpenRef.current)
+            return;
+        isOpenRef.current = true;
+        if (!isControlled)
+            setInnerIsOpen(true);
+        callbacks.current.onOpen?.();
+    }, [isControlled]);
+    const close = useCallback(() => {
+        if (!isOpenRef.current)
+            return;
+        isOpenRef.current = false;
+        if (!isControlled)
+            setInnerIsOpen(false);
+        callbacks.current.onClose?.();
+    }, [isControlled]);
+    return { isOpen, open, close };
+}
+/**
+ * Selection contract mirrors the open state one: `value` present -> controlled,
+ * `value === undefined` -> Select owns the selection.
+ */
+function useSelectedIds(value) {
+    const isControlled = value !== undefined;
+    const [innerIds, setInnerIds] = useState([]);
+    const propIds = toIds(value);
+    const propIdsKey = idsKey(propIds);
+    const selectedIds = useMemo(() => (isControlled ? propIds : innerIds), [isControlled, propIdsKey, innerIds]);
+    const setSelectedIds = useCallback((ids) => {
+        if (!isControlled)
+            setInnerIds(ids);
+    }, [isControlled]);
+    return { selectedIds, setSelectedIds };
+}
+/** Single source of truth for what the list shows and what can be navigated. */
+function useSelectOptions({ options, additionalOptions, searchQuery, }) {
+    const allOptions = useMemo(() => additionalOptions.length ? [...additionalOptions, ...options] : options, [additionalOptions, options]);
+    const visibleOptions = useMemo(() => searchQuery
+        ? allOptions.filter(option => matchesSearch(option, searchQuery))
+        : allOptions, [allOptions, searchQuery]);
+    // Group headers are rendered but never focusable/selectable.
+    const navigableOptions = useMemo(() => visibleOptions.filter(isSelectable), [visibleOptions]);
+    const optionsById = useMemo(() => mapById(allOptions), [allOptions]);
+    return { allOptions, visibleOptions, navigableOptions, optionsById };
+}
+/**
+ * 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.
+ */
+function useKeyboardNav({ isOpen, navigableOptions, selectedIds, onSelect, }) {
+    const [focusedId, setFocusedId] = useState(null);
+    const focusedIndex = useMemo(() => navigableOptions.findIndex(({ id }) => id === focusedId), [navigableOptions, focusedId]);
+    const latest = useRef({ navigableOptions, focusedIndex, selectedIds, onSelect });
+    latest.current = { navigableOptions, focusedIndex, selectedIds, onSelect };
+    const focusAt = useCallback((index) => {
+        const { navigableOptions } = latest.current;
+        if (!navigableOptions.length) {
+            setFocusedId(null);
+            return;
+        }
+        const clamped = Math.min(Math.max(index, 0), navigableOptions.length - 1);
+        setFocusedId(navigableOptions[clamped].id);
+    }, []);
+    // On open put the cursor on the selected row, on close drop it.
+    useEffect(() => {
+        if (!isOpen) {
+            setFocusedId(null);
+            return;
+        }
+        const { navigableOptions, selectedIds } = latest.current;
+        const preferred = navigableOptions.find(({ id }) => selectedIds.includes(id)) ??
+            navigableOptions[0];
+        setFocusedId(preferred?.id ?? null);
+    }, [isOpen]);
+    // Keep the cursor on a row that still exists after the list changed.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        setFocusedId(current => current !== null && navigableOptions.some(({ id }) => id === current)
+            ? current
+            : (navigableOptions[0]?.id ?? null));
+    }, [isOpen, navigableOptions]);
+    const onKeyDown = useCallback((e) => {
+        const { key } = e;
+        const { navigableOptions, focusedIndex, onSelect } = latest.current;
+        if (!navigableOptions.length)
+            return;
+        if (key === 'ArrowUp') {
+            e.preventDefault();
+            focusAt(focusedIndex - 1);
+            return;
+        }
+        if (key === 'ArrowDown') {
+            e.preventDefault();
+            focusAt(focusedIndex + 1);
+            return;
+        }
+        if (key === 'Enter') {
+            const option = navigableOptions[focusedIndex];
+            if (!option)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            onSelect(option.id);
+        }
+    }, [focusAt]);
+    useEvent({ event: 'keydown', isActive: isOpen, callback: onKeyDown });
+    return { focusedId, setFocusedId };
+}
+
+export { useKeyboardNav, useSelectOpenState, useSelectOptions, useSelectedIds };