@homecode/ui 5.20.18 → 5.20.19

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

@@ -5,6 +5,16 @@ import { Menu } from '../../components/Menu/Menu.js';
 import S from './SlashSuggestionList.styl.js';
 import cn from 'classnames';
 
+function SlashItemIcon({ item }) {
+    const [failed, setFailed] = useState(false);
+    useEffect(() => setFailed(false), [item.image]);
+    if (item.image && !failed) {
+        return (jsx("img", { src: item.image, alt: "", "aria-hidden": true, draggable: false, className: S.itemImage, onError: () => setFailed(true) }));
+    }
+    if (!item.icon)
+        return null;
+    return jsx(Icon, { type: item.icon, size: "s", className: S.itemIcon });
+}
 function SlashSuggestionListInner({ items, command, listHandleRef, }) {
     const [selected, setSelected] = useState(0);
     useEffect(() => {
@@ -48,7 +58,7 @@ function SlashSuggestionListInner({ items, command, listHandleRef, }) {
     useImperativeHandle(listHandleRef, () => ({ onKeyboardEvent }), [
         onKeyboardEvent,
     ]);
-    return (jsx("div", { className: S.root, children: jsx(Menu, { className: S.menu, role: "listbox", "aria-label": "Slash commands", children: items.map((item, idx) => (jsxs(Menu.Item, { role: "option", "aria-selected": idx === safeSel, className: cn(S.item, idx === safeSel && S.itemHighlighted, item.className), onMouseDown: e => e.preventDefault(), onMouseEnter: () => setSelected(idx), onClick: () => onPick(idx), textOverflow: true, children: [item.icon && (jsx(Icon, { type: item.icon, size: "s", className: S.itemIcon })), jsxs("span", { className: S.itemText, children: [jsx("span", { className: S.itemLabel, children: item.label }), item.description && (jsx("span", { className: S.itemDesc, children: item.description }))] })] }, `${item.id}-${idx}`))) }) }));
+    return (jsx("div", { className: S.root, children: jsx(Menu, { className: S.menu, role: "listbox", "aria-label": "Slash commands", children: items.map((item, idx) => (jsxs(Menu.Item, { role: "option", "aria-selected": idx === safeSel, className: cn(S.item, idx === safeSel && S.itemHighlighted, item.className), onMouseDown: e => e.preventDefault(), onMouseEnter: () => setSelected(idx), onClick: () => onPick(idx), textOverflow: true, children: [jsx(SlashItemIcon, { item: item }), jsxs("span", { className: S.itemText, children: [jsx("span", { className: S.itemLabel, children: item.label }), item.description && (jsx("span", { className: S.itemDesc, children: item.description }))] })] }, `${item.id}-${idx}`))) }) }));
 }
 function SlashSuggestionList(props) {
     if (props.items.length === 0)

package/dist/esm/src/tiptap/slash-mention/SlashSuggestionList.styl.js

@@ -1,5 +1,5 @@
-var css_248z = ".SlashSuggestionList_root__9KCb1{backdrop-filter:blur(10px);background-color:var(--decent-color-alpha-700);border-radius:8px;border-radius:var(--radius-lg,8px);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 8px 24px rgba(0,0,0,.2);color:var(--foreground);max-width:90vw;min-width:220px;overflow:hidden;position:relative}.SlashSuggestionList_root__9KCb1:before{background-color:var(--accent-color-alpha-50);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.dark .SlashSuggestionList_root__9KCb1{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 8px 24px rgba(0,0,0,.5)}.SlashSuggestionList_menu__s-jK3{margin:0;max-height:40vh}.SlashSuggestionList_item__9JBeY{align-items:center;border-radius:var(--p-2);display:flex;flex-direction:row;gap:var(--p-2);height:auto!important;justify-content:flex-start;min-height:0;overflow:visible!important;padding:var(--p-1) var(--p-2)!important;position:relative;text-overflow:clip!important;white-space:normal!important;width:100%}.SlashSuggestionList_itemHighlighted__cStZr{box-shadow:inset 100vw 0 0 0 var(--active-color-alpha-200)}.SlashSuggestionList_itemIcon__hTtxe{color:var(--accent-color-alpha-800);flex-shrink:0}.SlashSuggestionList_itemText__uwNbZ{align-items:flex-start;display:flex;flex-direction:column;min-width:0}.SlashSuggestionList_itemLabel__OMaov{font-weight:600}.SlashSuggestionList_itemDesc__fAdcA{color:var(--accent-color-alpha-600);font-size:80%;white-space:normal}.SlashSuggestionList_mention__aT45p{align-items:center;background:var(--muted);border-radius:var(--p-1);display:inline-flex;line-height:1.4;margin:0 var(--p-1);padding:0 var(--p-1);transition:background-color .1s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}.SlashSuggestionList_mention__aT45p:hover{background-color:var(--active-color-alpha-200)}";
-var S = {"root":"SlashSuggestionList_root__9KCb1","menu":"SlashSuggestionList_menu__s-jK3","item":"SlashSuggestionList_item__9JBeY","itemHighlighted":"SlashSuggestionList_itemHighlighted__cStZr","itemIcon":"SlashSuggestionList_itemIcon__hTtxe","itemText":"SlashSuggestionList_itemText__uwNbZ","itemLabel":"SlashSuggestionList_itemLabel__OMaov","itemDesc":"SlashSuggestionList_itemDesc__fAdcA","mention":"SlashSuggestionList_mention__aT45p"};
+var css_248z = ".SlashSuggestionList_root__9KCb1{backdrop-filter:blur(10px);background-color:var(--decent-color-alpha-700);border-radius:8px;border-radius:var(--radius-lg,8px);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 8px 24px rgba(0,0,0,.2);color:var(--foreground);max-width:90vw;min-width:220px;overflow:hidden;position:relative}.SlashSuggestionList_root__9KCb1:before{background-color:var(--accent-color-alpha-50);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.dark .SlashSuggestionList_root__9KCb1{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 8px 24px rgba(0,0,0,.5)}.SlashSuggestionList_menu__s-jK3{margin:0;max-height:40vh}.SlashSuggestionList_item__9JBeY{align-items:center;border-radius:var(--p-2);display:flex;flex-direction:row;gap:var(--p-2);height:auto!important;justify-content:flex-start;min-height:0;overflow:visible!important;padding:var(--p-1) var(--p-2)!important;position:relative;text-overflow:clip!important;white-space:normal!important;width:100%}.SlashSuggestionList_itemHighlighted__cStZr{box-shadow:inset 100vw 0 0 0 var(--active-color-alpha-200)}.SlashSuggestionList_itemIcon__hTtxe{color:var(--accent-color-alpha-800);flex-shrink:0}.SlashSuggestionList_itemImage__U5Z2K{background-color:var(--accent-color-alpha-50);border-radius:50%;flex-shrink:0;height:24px;margin:-3px;-o-object-fit:cover;object-fit:cover;width:24px}.SlashSuggestionList_itemText__uwNbZ{align-items:flex-start;display:flex;flex-direction:column;min-width:0}.SlashSuggestionList_itemLabel__OMaov{font-weight:600}.SlashSuggestionList_itemDesc__fAdcA{color:var(--accent-color-alpha-600);font-size:80%;white-space:normal}.SlashSuggestionList_mention__aT45p{align-items:center;background:var(--muted);border-radius:var(--p-1);display:inline-flex;line-height:1.4;margin:0 var(--p-1);padding:0 var(--p-1);transition:background-color .1s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}.SlashSuggestionList_mention__aT45p:hover{background-color:var(--active-color-alpha-200)}";
+var S = {"root":"SlashSuggestionList_root__9KCb1","menu":"SlashSuggestionList_menu__s-jK3","item":"SlashSuggestionList_item__9JBeY","itemHighlighted":"SlashSuggestionList_itemHighlighted__cStZr","itemIcon":"SlashSuggestionList_itemIcon__hTtxe","itemImage":"SlashSuggestionList_itemImage__U5Z2K","itemText":"SlashSuggestionList_itemText__uwNbZ","itemLabel":"SlashSuggestionList_itemLabel__OMaov","itemDesc":"SlashSuggestionList_itemDesc__fAdcA","mention":"SlashSuggestionList_mention__aT45p"};
             if (typeof document !== 'undefined') {
               var __uilibHead = document.head || document.getElementsByTagName('head')[0];
               if (__uilibHead) {

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

@@ -6,6 +6,11 @@ export type SlashCommandItem = {
     description?: string;
     /** Left icon in the slash suggestion list (`<Icon type={icon} />`). */
     icon?: IconType;
+    /**
+     * Image URL shown as a round picture in place of `icon` (e.g. an avatar).
+     * Falls back to `icon` when the image fails to load.
+     */
+    image?: string;
     /** Extra class on inserted mention chip (merged with `slash-mention`). */
     className?: string;
     /** CSS color for chip text; background uses 30% color blend. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.20.18",
+  "version": "5.20.19",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",