@seekora-ai/ui-sdk-react 0.2.32 → 0.2.33

package/dist/src/index.d.ts

@@ -3790,10 +3790,14 @@ interface DocSearchProps {
     shortcutKey?: string;
     /** Post-process results per source (e.g. filter by permission, resolve :storeId). */
     processGroupedResults?: (sourceId: string, items: DocSearchSuggestion[]) => DocSearchSuggestion[];
+    /** Additional CSS class applied to the modal overlay and container — use to scope CSS variable overrides. */
+    className?: string;
 }
 interface DocSearchButtonProps {
     onClick: () => void;
     placeholder?: string;
+    /** Additional CSS class for the button element. */
+    className?: string;
 }
 interface DocSearchTranslations {
     buttonText?: string;
@@ -3812,40 +3816,40 @@ interface DocSearchState {
     isLoading: boolean;
     error: string | null;
     selectedIndex: number;
-    mode: 'suggestions' | 'results';
+    mode: "suggestions" | "results";
 }
 type DocSearchAction = {
-    type: 'SET_QUERY';
+    type: "SET_QUERY";
     payload: string;
 } | {
-    type: 'SET_RESULTS';
+    type: "SET_RESULTS";
     payload: DocSearchHit[];
 } | {
-    type: 'SET_SUGGESTIONS';
+    type: "SET_SUGGESTIONS";
     payload: DocSearchSuggestion[];
 } | {
-    type: 'SET_LOADING';
+    type: "SET_LOADING";
     payload: boolean;
 } | {
-    type: 'SET_ERROR';
+    type: "SET_ERROR";
     payload: string | null;
 } | {
-    type: 'SET_SELECTED_INDEX';
+    type: "SET_SELECTED_INDEX";
     payload: number;
 } | {
-    type: 'SELECT_NEXT';
+    type: "SELECT_NEXT";
 } | {
-    type: 'SELECT_PREV';
+    type: "SELECT_PREV";
 } | {
-    type: 'SET_MODE';
-    payload: 'suggestions' | 'results';
+    type: "SET_MODE";
+    payload: "suggestions" | "results";
 } | {
-    type: 'RESET';
+    type: "RESET";
 };
 
-declare function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiKey, sources, placeholder, maxResults, debounceMs, onSelect, onClose, translations, renderButton, buttonComponent: ButtonComponent, initialOpen, disableShortcut, shortcutKey, processGroupedResults, }: DocSearchProps): React__default.JSX.Element;
+declare function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiKey, sources, placeholder, maxResults, debounceMs, onSelect, onClose, translations, renderButton, buttonComponent: ButtonComponent, initialOpen, disableShortcut, shortcutKey, processGroupedResults, className, }: DocSearchProps): React__default.JSX.Element;
 
-declare function DocSearchButton({ onClick, placeholder }: DocSearchButtonProps): React__default.JSX.Element;
+declare function DocSearchButton({ onClick, placeholder, className, }: DocSearchButtonProps): React__default.JSX.Element;
 
 interface UseDocSearchOptions {
     apiEndpoint?: string;

package/dist/src/index.esm.js

@@ -16674,24 +16674,27 @@ const SuggestionDropdownVariants = {
     minimal: MinimalDropdown,
 };
 
-function Modal({ isOpen, onClose, children }) {
+function Modal({ isOpen, onClose, children, className }) {
     const overlayRef = useRef(null);
     const containerRef = useRef(null);
     useEffect(() => {
         const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
                 onClose();
             }
         };
         if (isOpen)
-            document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
+            document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isOpen, onClose]);
     useEffect(() => {
         if (isOpen) {
             const originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
-            return () => { document.body.style.overflow = originalOverflow; };
+            document.body.style.overflow = "hidden";
+            return () => {
+                document.body.style.overflow = originalOverflow;
+            };
         }
     }, [isOpen]);
     useEffect(() => {
@@ -16702,7 +16705,7 @@ function Modal({ isOpen, onClose, children }) {
         const firstElement = focusableElements[0];
         const lastElement = focusableElements[focusableElements.length - 1];
         const handleTabKey = (e) => {
-            if (e.key !== 'Tab')
+            if (e.key !== "Tab")
                 return;
             if (e.shiftKey) {
                 if (document.activeElement === firstElement) {
@@ -16717,12 +16720,12 @@ function Modal({ isOpen, onClose, children }) {
                 }
             }
         };
-        container.addEventListener('keydown', handleTabKey);
-        return () => container.removeEventListener('keydown', handleTabKey);
+        container.addEventListener("keydown", handleTabKey);
+        return () => container.removeEventListener("keydown", handleTabKey);
     }, [isOpen]);
-    if (!isOpen || typeof document === 'undefined')
+    if (!isOpen || typeof document === "undefined")
         return null;
-    const modalContent = (React.createElement("div", { ref: overlayRef, className: "seekora-docsearch-overlay", role: "dialog", "aria-modal": "true", "aria-label": "Search documentation" },
+    const modalContent = (React.createElement("div", { ref: overlayRef, className: `seekora-docsearch-overlay${className ? ` ${className}` : ""}`, role: "dialog", "aria-modal": "true", "aria-label": "Search documentation" },
         React.createElement("div", { ref: containerRef, className: "seekora-docsearch-container" }, children)));
     return createPortal(modalContent, document.body);
 }
@@ -17136,9 +17139,9 @@ function getShortcutText(key = 'K') {
     return isMac ? `⌘${key}` : `Ctrl+${key}`;
 }
 
-function DocSearchButton({ onClick, placeholder = 'Search documentation...' }) {
-    const shortcutText = getShortcutText('K');
-    return (React.createElement("button", { type: "button", className: "seekora-docsearch-button", onClick: onClick, "aria-label": "Search documentation" },
+function DocSearchButton({ onClick, placeholder = "Search documentation...", className, }) {
+    const shortcutText = getShortcutText("K");
+    return (React.createElement("button", { type: "button", className: `seekora-docsearch-button${className ? ` ${className}` : ""}`, onClick: onClick, "aria-label": "Search documentation" },
         React.createElement("span", { className: "seekora-docsearch-button-icon" },
             React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
                 React.createElement("path", { d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", fill: "currentColor" }))),
@@ -17583,17 +17586,17 @@ function useSeekoraSearch$1(options) {
     };
 }
 
-function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiKey, sources, placeholder = 'Search documentation...', maxResults = 10, debounceMs = 200, onSelect, onClose, translations = {}, renderButton = true, buttonComponent: ButtonComponent = DocSearchButton, initialOpen = false, disableShortcut = false, shortcutKey = 'k', processGroupedResults, }) {
+function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiKey, sources, placeholder = "Search documentation...", maxResults = 10, debounceMs = 200, onSelect, onClose, translations = {}, renderButton = true, buttonComponent: ButtonComponent = DocSearchButton, initialOpen = false, disableShortcut = false, shortcutKey = "k", processGroupedResults, className, }) {
     const [isOpen, setIsOpen] = useState(initialOpen);
     const scrollSelectionIntoViewRef = useRef(false);
     const useSeekoraSDK = !!storeId;
     const seekoraSearch = useSeekoraSearch$1({
-        storeId: storeId || '',
+        storeId: storeId || "",
         storeSecret,
         apiEndpoint: seekoraApiEndpoint,
         maxResults,
         debounceMs,
-        analyticsTags: ['docsearch'],
+        analyticsTags: ["docsearch"],
     });
     const legacySearch = useDocSearch({
         apiEndpoint,
@@ -17604,11 +17607,13 @@ function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiK
         processGroupedResults,
     });
     const { query, suggestions, isLoading, error, selectedIndex, setQuery, selectNext, selectPrev, setSelectedIndex, reset, getSelectedItem, } = useSeekoraSDK ? seekoraSearch : legacySearch;
-    const groupedSuggestions = useSeekoraSDK ? undefined : legacySearch.groupedSuggestions;
+    const groupedSuggestions = useSeekoraSDK
+        ? undefined
+        : legacySearch.groupedSuggestions;
     const results = useSeekoraSDK ? suggestions : legacySearch.results;
-    const mode = useSeekoraSDK ? 'suggestions' : legacySearch.mode;
+    const mode = useSeekoraSDK ? "suggestions" : legacySearch.mode;
     const searchSources = useSeekoraSDK
-        ? [{ id: 'seekora', name: 'Results', endpoint: '' }]
+        ? [{ id: "seekora", name: "Results", endpoint: "" }]
         : legacySearch.sources;
     const handleOpen = useCallback(() => setIsOpen(true), []);
     const handleClose = useCallback(() => {
@@ -17652,10 +17657,10 @@ function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiK
         shortcutKey,
     });
     const handleKeyDown = useCallback((event) => handleModalKeyDown(event), [handleModalKeyDown]);
-    const displayHits = mode === 'results' ? results : suggestions;
+    const displayHits = mode === "results" ? results : suggestions;
     return (React.createElement(React.Fragment, null,
-        renderButton && (React.createElement(ButtonComponent, { onClick: handleOpen, placeholder: translations.buttonText || placeholder })),
-        React.createElement(Modal, { isOpen: isOpen, onClose: handleClose },
+        renderButton && (React.createElement(ButtonComponent, { onClick: handleOpen, placeholder: translations.buttonText || placeholder, className: className })),
+        React.createElement(Modal, { isOpen: isOpen, onClose: handleClose, className: className },
             React.createElement("div", { className: "seekora-docsearch-modal", onKeyDown: handleKeyDown },
                 React.createElement("header", { className: "seekora-docsearch-header" },
                     React.createElement(SearchBox, { value: query, onChange: setQuery, placeholder: placeholder, onClear: reset }),