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

package/dist/src/index.js

@@ -16676,24 +16676,27 @@ const SuggestionDropdownVariants = {
     minimal: MinimalDropdown,
 };
 
-function Modal({ isOpen, onClose, children }) {
+function Modal({ isOpen, onClose, children, className }) {
     const overlayRef = React.useRef(null);
     const containerRef = React.useRef(null);
     React.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]);
     React.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]);
     React.useEffect(() => {
@@ -16704,7 +16707,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) {
@@ -16719,12 +16722,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 reactDom.createPortal(modalContent, document.body);
 }
@@ -17138,9 +17141,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" }))),
@@ -17585,17 +17588,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] = React.useState(initialOpen);
     const scrollSelectionIntoViewRef = React.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,
@@ -17606,11 +17609,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 = React.useCallback(() => setIsOpen(true), []);
     const handleClose = React.useCallback(() => {
@@ -17654,13 +17659,13 @@ function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiK
         shortcutKey,
     });
     const handleKeyDown = React.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, onKeyDown: handleKeyDown, placeholder: placeholder, onClear: reset }),
+                    React.createElement(SearchBox, { value: query, onChange: setQuery, placeholder: placeholder, onClear: reset }),
                     React.createElement("button", { type: "button", className: "seekora-docsearch-close", onClick: handleClose, "aria-label": "Close search" },
                         React.createElement("span", { className: "seekora-docsearch-close-text" }, "esc"))),
                 React.createElement("div", { className: "seekora-docsearch-body" },