@synerise/ds-search 1.5.14 → 1.5.15

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.5.14...@synerise/ds-search@1.5.15) (2026-04-22)
+
+### Bug Fixes
+
+- **search:** update click outside logic ([e23b44b](https://github.com/Synerise/synerise-design/commit/e23b44b073337580cabae5ed834cfdf9b45ad383))
+
 ## [1.5.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.5.13...@synerise/ds-search@1.5.14) (2026-04-21)
 
 **Note:** Version bump only for package @synerise/ds-search

package/README.md

@@ -88,7 +88,7 @@ return (
 
 ## Demo
 
-<iframe src="/storybook-static/iframe.html?id=components-search--default"></iframe>
+<iframe src="/storybook-static/iframe.html?id=components-search-search--with-dropdown"></iframe>
 
 ## API
 
@@ -157,7 +157,7 @@ return (
 | alwaysHighlight     | When set, the input always has blue border when expanded                  | boolean                                                                  | `false` |
 | alwaysExpanded      | Boolean value to force expanded state of the input                        | boolean                                                                  | `false` |
 | clearTooltip        | Clear button tooltip text                                                 | ReactNode                                                                | -       |
-| closeOnClickOutside | Boolean value to prevent / force toggling the input when clicking outside | boolean                                                                  | `false` |
+| closeOnClickOutside | Collapses the input when clicking outside. The decision fires on `mousedown`/`touchstart`, but the collapse animation is deferred to the matching `mouseup`/`touchend` so clicks on adjacent layout-shifting content stay reliable | boolean                                                                  | `false` |
 | disabled            | Disables the entire component including the search button                 | boolean                                                                  | -       |
 | disableInput        | Disables only the text input; search button remains active                | boolean                                                                  | -       |
 | filterLabel         | Label displayed on the left-hand side of the input caret                  | `{ icon?: ReactNode; [key: string]: any }` or null                       | -       |

package/dist/Elements/SearchHeader/SearchHeader.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import Icon, { InfoFillS } from "@synerise/ds-icon";
-import Tooltip from "@synerise/ds-tooltip/dist/Tooltip";
+import Tooltip from "@synerise/ds-tooltip";
 import { MenuHeader, HeaderIconWrapper } from "../../Search.styles.js";
 const SearchHeader = ({
   headerText,

package/dist/Elements/SearchInput/SearchInput.js

@@ -48,11 +48,25 @@ const SearchInput = ({
       toggleOpen();
     }
   });
-  useOnClickOutside(wrapperRef, () => {
-    if (closeOnClickOutside && !alwaysExpanded) {
-      setIsInputOpen(false);
-      onToggle && onToggle(false);
+  const pendingCloseCleanupRef = useRef(null);
+  useEffect(() => () => {
+    pendingCloseCleanupRef.current?.();
+  }, []);
+  useOnClickOutside(wrapperRef, (event) => {
+    if (!closeOnClickOutside || alwaysExpanded) {
+      return;
     }
+    pendingCloseCleanupRef.current?.();
+    const endEventName = event.type === "touchstart" ? "touchend" : "mouseup";
+    const close = () => {
+      pendingCloseCleanupRef.current = null;
+      setIsInputOpen(false);
+      onToggle?.(false);
+    };
+    document.addEventListener(endEventName, close, {
+      once: true
+    });
+    pendingCloseCleanupRef.current = () => document.removeEventListener(endEventName, close);
   });
   const focusInput = () => {
     inputRef.current && inputRef.current.focus();

package/dist/Elements/utils/searchUtils.d.ts

@@ -2,8 +2,9 @@ import { AnyObject } from '../../Search.types';
 export declare const getAllElementsFiltered: <T extends AnyObject>(data: T[] | undefined | null, value: string, elementTextLookupKey: keyof T) => T[];
 export declare const hasSomeElementFiltered: <T extends AnyObject>(data: T[] | undefined | null, currentValue: string, elementTextLookupKey: keyof T) => boolean;
 export declare const hasSomeElement: (data: Record<string, unknown>[] | undefined) => boolean;
-export declare const getParametersScrollTop: ({ scrollTop, rowHeight, recent, }: {
+export declare const getParametersScrollTop: ({ scrollTop, rowHeight, recent, hasRecentTitle, }: {
     scrollTop: number;
     rowHeight: number;
     recent: AnyObject[];
+    hasRecentTitle?: boolean;
 }) => number;

package/dist/Elements/utils/searchUtils.js

@@ -9,8 +9,9 @@ const hasSomeElement = (data) => !!data && data.length > 0;
 const getParametersScrollTop = ({
   scrollTop,
   rowHeight,
-  recent
-}) => scrollTop - LIST_HEADER_HEIGHT - (hasSomeElement(recent) ? recent.length * rowHeight : 0);
+  recent,
+  hasRecentTitle
+}) => scrollTop - (hasSomeElement(recent) && hasRecentTitle ? LIST_HEADER_HEIGHT : 0) - (hasSomeElement(recent) ? recent.length * rowHeight : 0);
 export {
   getAllElementsFiltered,
   getParametersScrollTop,

package/dist/Search.js

@@ -4,7 +4,7 @@ import Scrollbar from "@synerise/ds-scrollbar";
 import { useOnClickOutside, focusWithArrowKeys } from "@synerise/ds-utils";
 import SearchInput from "./Elements/SearchInput/SearchInput.js";
 import "@synerise/ds-icon";
-import "@synerise/ds-tooltip/dist/Tooltip";
+import "@synerise/ds-tooltip";
 import { SearchWrapper, SearchDropdownWrapper, SearchDropdownContent } from "./Search.styles.js";
 import "react-window";
 import "@synerise/ds-list-item";
@@ -132,13 +132,26 @@ function Search({
     return 0;
   };
   const [isOpen, setIsOpen] = useState(false);
-  useOnClickOutside(wrapperRef, () => {
-    if (isOpen && !value && !label && !alwaysExpanded) {
-      setToggleInputTrigger((prev) => !prev);
-    }
-    setIsOpen(false);
-    setIsListVisible(false);
-    setScrollbarScrollTop(0);
+  const pendingCloseCleanupRef = useRef(null);
+  useEffect(() => () => {
+    pendingCloseCleanupRef.current?.();
+  }, []);
+  useOnClickOutside(wrapperRef, (event) => {
+    pendingCloseCleanupRef.current?.();
+    const endEventName = event.type === "touchstart" ? "touchend" : "mouseup";
+    const close = () => {
+      pendingCloseCleanupRef.current = null;
+      if (isOpen && !value && !label && !alwaysExpanded) {
+        setToggleInputTrigger((prev) => !prev);
+      }
+      setIsOpen(false);
+      setIsListVisible(false);
+      setScrollbarScrollTop(0);
+    };
+    document.addEventListener(endEventName, close, {
+      once: true
+    });
+    pendingCloseCleanupRef.current = () => document.removeEventListener(endEventName, close);
   });
   const handleClearValue = () => {
     onClear?.();
@@ -227,7 +240,8 @@ function Search({
         scrollTop: getParametersScrollTop({
           scrollTop: scrollbarScrollTop,
           recent: filteredRecent,
-          rowHeight: recentDisplayProps.rowHeight
+          rowHeight: recentDisplayProps.rowHeight,
+          hasRecentTitle: !!recentDisplayProps.title
         }),
         ...parametersDisplayProps.listProps || {}
       }, onItemClick: (item) => selectFilter(item), ...parametersDisplayProps }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search",
-  "version": "1.5.14",
+  "version": "1.5.15",
   "description": "Search UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -49,5 +49,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "16b12f75e97d9c416a5cb9ca38864e97ef4f1530"
+  "gitHead": "519e7db3c177aabeec594d84658c0357f532bf0a"
 }