@seekora-ai/ui-sdk-react 0.2.9 → 0.2.10

package/dist/src/index.js

@@ -7113,10 +7113,45 @@ function DropdownPanel({ children, position = 'absolute', top = '100%', left = 0
     return (React.createElement("div", { ref: panelRef, role: "listbox", className: clsx('seekora-suggestions-dropdown-panel', className), style: { ...panelStyle, ...style } }, children));
 }
 
+/**
+ * Parses suggestion text containing <mark>...</mark> and returns React nodes
+ * with the marked segments rendered as <mark> elements. Safe: inner content
+ * is rendered as text, not HTML.
+ */
+const defaultMarkStyle = {
+    backgroundColor: 'var(--seekora-highlight-bg, rgba(251, 191, 36, 0.4))',
+    fontWeight: 500,
+    borderRadius: '2px',
+    padding: '0 2px',
+};
+/**
+ * Converts a string like "lined <mark>blue</mark>" into React nodes with
+ * the marked part rendered as a <mark> element. When no <mark> tags are
+ * present, returns the string as-is.
+ */
+function parseHighlightMarkup(text, options = {}) {
+    if (text == null || typeof text !== 'string')
+        return text;
+    const parts = text.split(/(<mark>[\s\S]*?<\/mark>)/g);
+    if (parts.length <= 1)
+        return text;
+    const { markClassName, markStyle } = options;
+    return (React.createElement(React.Fragment, null, parts.map((part, i) => {
+        const m = part.match(/^<mark>([\s\S]*)<\/mark>$/);
+        if (m) {
+            return (React.createElement("mark", { key: i, className: markClassName, style: { ...defaultMarkStyle, ...markStyle } }, m[1]));
+        }
+        return part;
+    })));
+}
+
 /**
  * SuggestionItem – single text suggestion row (primitive)
  *
- * Highlights when isActive; onClick calls context selectSuggestion. Overridable via className/style.
+ * Highlights when isActive; onClick calls context selectSuggestion.
+ * When enableHighlightMarkup is true (default), parses <mark>...</mark> in
+ * suggestion text and renders as highlighted <mark> elements. Overridable via
+ * renderHighlight, className/style.
  */
 const defaultItemStyle = {
     padding: '10px 12px',
@@ -7131,9 +7166,13 @@ const defaultItemStyle = {
     color: 'var(--seekora-text-primary, #111827)',
     transition: 'background-color 120ms ease',
 };
-function SuggestionItem({ suggestion, index, isActive, onSelect, className, style, renderHighlight, }) {
+function SuggestionItem({ suggestion, index, isActive, onSelect, className, style, enableHighlightMarkup = true, highlightMarkupOptions, renderHighlight, }) {
     const displayText = suggestion.highlightedQuery ?? suggestion.query;
-    const content = renderHighlight ? renderHighlight(displayText) : displayText;
+    const content = renderHighlight != null
+        ? renderHighlight(displayText)
+        : enableHighlightMarkup
+            ? parseHighlightMarkup(displayText ?? '', highlightMarkupOptions)
+            : (suggestion.query ?? displayText ?? '');
     return (React.createElement("li", { role: "option", "aria-selected": isActive, id: `seekora-suggestion-${index}`, className: clsx('seekora-suggestions-item', isActive && 'seekora-suggestions-item--active', className), style: {
             ...defaultItemStyle,
             ...(isActive ? { backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)' } : {}),
@@ -7164,13 +7203,15 @@ function SuggestionsLoading({ className, style, text = 'Loading...' }) {
 /**
  * SuggestionList – container for text suggestions (primitive)
  *
- * Renders list of SuggestionItem from context; uses activeIndex for highlight. Optional renderItem.
+ * Renders list of SuggestionItem from context; uses activeIndex for highlight.
+ * Optional renderItem. When not using renderItem, enableHighlightMarkup and
+ * highlightMarkupOptions control parsing of <mark>...</mark> in suggestion text.
  */
 const listStyle = {
     margin: 0,
     padding: '4px 0',
 };
-function SuggestionList({ maxItems = 10, className, style, listClassName, renderItem, }) {
+function SuggestionList({ maxItems = 10, className, style, listClassName, enableHighlightMarkup = true, highlightMarkupOptions, renderItem, }) {
     const { suggestions, activeIndex, loading, selectSuggestion, getAllNavigableItems, } = useSuggestionsContext();
     const items = suggestions.slice(0, maxItems);
     const navigableItems = getAllNavigableItems();
@@ -7189,7 +7230,7 @@ function SuggestionList({ maxItems = 10, className, style, listClassName, render
             if (renderItem) {
                 return (React.createElement("li", { key: suggestion.objectID ?? suggestion.query ?? i, role: "option" }, renderItem(suggestion, globalIndex, isActive, onSelect)));
             }
-            return (React.createElement(SuggestionItem, { key: suggestion.objectID ?? suggestion.query ?? i, suggestion: suggestion, index: globalIndex, isActive: isActive, onSelect: onSelect }));
+            return (React.createElement(SuggestionItem, { key: suggestion.objectID ?? suggestion.query ?? i, suggestion: suggestion, index: globalIndex, isActive: isActive, onSelect: onSelect, enableHighlightMarkup: enableHighlightMarkup, highlightMarkupOptions: highlightMarkupOptions }));
         }))));
 }
 
@@ -14470,6 +14511,7 @@ exports.mediaQueries = mediaQueries;
 exports.mergeThemes = mergeThemes;
 exports.minimalTheme = minimalTheme;
 exports.minimalThemeVariables = minimalThemeVariables;
+exports.parseHighlightMarkup = parseHighlightMarkup;
 exports.removeRecentSearch = removeRecentSearch;
 exports.touchTargets = touchTargets;
 exports.updateSuggestionsStyles = updateSuggestionsStyles;